:root{
      --paper:#F6EFE3;
      --paper-soft:#FCF8F0;
      --surface:#FFFDF8;
      --ink:#1D2B34;
      --body:#344650;
      --muted:#6A767E;
      --line:#E5D8C6;
      --navy:#183549;
      --teal:#277D78;
      --gold:#B8752A;
      --shadow:0 16px 36px rgba(50,38,23,.10);
      --radius:12px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:2rem;
      color:var(--ink);
      background:
        linear-gradient(rgba(246,239,227,.96), rgba(246,239,227,.96)),
        radial-gradient(circle at 10% 0%, rgba(184,117,42,.12), transparent 30rem),
        radial-gradient(circle at 100% 0%, rgba(39,125,120,.10), transparent 28rem),
        var(--paper);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .shell{
      width:min(100%, 920px);
      border:1px solid var(--line);
      border-radius:28px;
      background:rgba(255,253,248,.82);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .hero{
      padding:2rem;
      border-bottom:1px solid var(--line);
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      color:var(--navy);
      font-size:.86rem;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .mark{
      width:38px;
      height:38px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:var(--navy);
      color:var(--paper-soft);
    }

    h1{
      margin:1rem 0 .65rem;
      color:var(--navy);
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(2.2rem, 6vw, 4rem);
      line-height:1;
      letter-spacing:-.03em;
    }

    p{
      margin:0;
      color:var(--body);
      line-height:1.7;
      font-size:1rem;
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:1rem;
      padding:1.25rem;
    }

    .card{
      display:flex;
      flex-direction:column;
      gap:.75rem;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--surface);
      padding:1.1rem;
    }

    .card h2{
      margin:0;
      color:var(--navy);
      font-size:1.2rem;
    }

    .card small{
      color:var(--muted);
      font-size:.86rem;
      line-height:1.5;
    }

    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin-top:.25rem;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:.78rem 1rem;
      border-radius:999px;
      text-decoration:none;
      font-weight:900;
      transition:.16s ease;
    }

    .btn-primary{
      color:var(--paper-soft);
      background:var(--navy);
    }

    .btn-primary:hover{background:#10293B}

    .btn-soft{
      color:var(--navy);
      background:var(--paper-soft);
      border:1px solid var(--line);
    }

    .btn-soft:hover{background:#F2E7D8}

    .note{
      margin:0 1.25rem 1.25rem;
      padding:1rem;
      border:1px dashed rgba(184,117,42,.6);
      border-radius:var(--radius);
      background:rgba(255,253,248,.64);
      color:#5F554A;
      line-height:1.65;
    }