/* ═══════════════════════════════════════════════════════════════
     CROWN CAST — visual system
     World:  the chapel hymn board, in the colors of the mark. Navy
             lacquer ground, white letterpress type, gold-leaf
             numerals, hairline rules.
     Ground: navy #101B38   Type: white #F2F5FB   Leaf: gold #E3B44C
     Faces:  Spectral (display, real italic) · Archivo (UI, grotesk)
     Rule:   rules divide, never boxes. No cards. No glow. No pills.
     ═══════════════════════════════════════════════════════════════ */

  :root{
    /* dark is the default: this page is read in a projection booth
       with the house lights down. Names are historical — "ink" is the
       navy ground, "cream" the white type, "leaf" the gold. */
    --ink:#101B38;
    --ink-raised:#17234A;     /* the tile navy of the app mark */
    --ink-sunk:#0A1226;
    --cream:#F2F5FB;
    --cream-2:#A8B4CE;        /* 8.1:1 on ink */
    --cream-3:#7C89A6;        /* rules, disabled */
    --leaf:#E3B44C;           /* 9.1:1 on ink */
    --leaf-deep:#A9812A;
    --on-leaf:#101B38;
    --rule:rgba(226,233,246,0.14);
    --rule-strong:rgba(226,233,246,0.28);
    --field:rgba(226,233,246,0.05);
    --shade:0 18px 40px -24px rgba(4,8,20,0.85);

    --display:'Spectral', 'Iowan Old Style', Georgia, serif;
    --ui:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --gut:clamp(20px, 5vw, 56px);
    --rhythm:clamp(72px, 11vw, 148px);
    --measure:68ch;
  }
  :root[data-theme="light"]{
    /* the same board, chalk on paper, for a lit room */
    --ink:#F4F6FB;
    --ink-raised:#E9EDF6;
    --ink-sunk:#DFE5F1;
    --cream:#0F1830;
    --cream-2:#4A5570;        /* 6.9:1 on paper */
    --cream-3:#5C6784;
    --leaf:#7E5C15;           /* 5.7:1 on paper */
    --leaf-deep:#5F440F;
    --on-leaf:#F7F9FD;
    --rule:rgba(16,27,56,0.16);
    --rule-strong:rgba(16,27,56,0.34);
    --field:rgba(16,27,56,0.04);
    --shade:0 18px 40px -26px rgba(16,27,56,0.36);
  }

  *{box-sizing:border-box; margin:0; padding:0}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{
    font-family:var(--ui);
    background:var(--ink);
    color:var(--cream-2);
    font-size:1rem;
    line-height:1.62;
    letter-spacing:0.004em;      /* light-on-dark compensation */
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transition:background .3s ease, color .3s ease;
  }

  /* ── browser surfaces: the parts we did not draw still carry the design ── */
  ::selection{background:var(--leaf); color:var(--on-leaf)}
  ::-moz-selection{background:var(--leaf); color:var(--on-leaf)}
  html{scrollbar-color:var(--cream-3) var(--ink); scrollbar-width:thin}
  ::-webkit-scrollbar{width:11px; height:11px}
  ::-webkit-scrollbar-track{background:var(--ink)}
  ::-webkit-scrollbar-thumb{background:var(--cream-3); border:3px solid var(--ink)}
  ::-webkit-scrollbar-thumb:hover{background:var(--leaf)}
  input,textarea{caret-color:var(--leaf)}
  :focus-visible{outline:2px solid var(--leaf); outline-offset:4px}
  ::marker{color:var(--leaf)}

  h1,h2,h3,h4{
    font-family:var(--display); font-weight:500; color:var(--cream);
    line-height:1.06; letter-spacing:-0.022em; text-wrap:balance;
  }
  h1 em,h2 em,h3 em{font-style:italic; font-weight:500; color:var(--leaf)}
  a{color:inherit; text-decoration:none}
  p a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:0.22em; text-decoration-color:var(--leaf)}
  p a:hover{color:var(--cream)}
  img{max-width:100%; display:block}
  button{font-family:var(--ui); color:inherit}
  b,strong{font-weight:600; color:var(--cream)}
  p{max-width:var(--measure)}

  .wrap{max-width:1240px; margin:0 auto; padding:0 var(--gut)}
  .rule{height:1px; background:var(--rule); border:0}

  /* small-caps label — the hymn-board slot legend */
  .slug{
    font-size:0.7rem; font-weight:600; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--cream-3);
    font-variant-numeric:tabular-nums;
  }

  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:200;
    background:var(--leaf); color:var(--on-leaf);
    padding:14px 22px; font-weight:600; letter-spacing:0.06em;
  }
  .skip-link:focus{left:0}

  /* ── actions: struck blocks and ruled links, never pills ── */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:var(--ui); font-weight:600; font-size:0.94rem;
    letter-spacing:0.09em; text-transform:uppercase;
    min-height:52px; padding:14px 34px; border-radius:2px;
    cursor:pointer; border:1px solid transparent; white-space:nowrap;
    transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .btn-primary{background:var(--leaf); color:var(--on-leaf)}
  .btn-primary:hover{background:var(--cream); color:var(--ink)}
  .btn-quiet{background:transparent; color:var(--cream); border-color:var(--rule-strong)}
  .btn-quiet:hover{border-color:var(--leaf); color:var(--leaf)}
  .link-quiet{
    display:inline-flex; align-items:center; gap:8px; min-height:44px;
    font-weight:500; font-size:0.95rem; color:var(--cream);
    border-bottom:1px solid var(--rule-strong);
    transition:border-color .18s ease, color .18s ease;
  }
  .link-quiet:hover{border-bottom-color:var(--leaf); color:var(--leaf)}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *{animation:none !important; transition-duration:0.01ms !important}
  }

  /* ═══════════ NAV ═══════════ */
  .nav{
    position:sticky; top:0; z-index:100;
    background:var(--ink);
    border-bottom:1px solid var(--rule);
  }
  .nav-inner{
    max-width:1240px; margin:0 auto; padding:14px var(--gut);
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .nav-brand{
    display:flex; align-items:center; gap:11px;
    font-family:var(--display); font-weight:600; font-size:1.12rem;
    letter-spacing:0.005em; color:var(--cream); min-height:44px;
  }
  .nav-mark{width:30px; height:30px; flex-shrink:0}
  .nav-mark img{width:100%; height:100%; object-fit:contain; display:block}
  .nav-links{display:flex; gap:30px; align-items:center}
  .nav-links a{
    font-size:0.76rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--cream-2); padding:6px 0; border-bottom:1px solid transparent;
    transition:color .18s ease, border-color .18s ease;
  }
  .nav-links a:hover{color:var(--cream); border-bottom-color:var(--leaf)}
  .nav-right{display:flex; align-items:center; gap:12px}
  .icon-btn{
    width:40px; height:40px; display:grid; place-items:center;
    background:transparent; border:1px solid var(--rule); border-radius:2px;
    color:var(--cream-2); cursor:pointer;
    transition:border-color .18s ease, color .18s ease;
  }
  .icon-btn:hover{border-color:var(--leaf); color:var(--leaf)}
  .icon-btn svg{width:17px; height:17px}
  .icon-btn .sun{display:none}
  :root[data-theme="light"] .icon-btn .sun{display:block}
  :root[data-theme="light"] .icon-btn .moon{display:none}
  .nav .btn{min-height:40px; padding:10px 22px; font-size:0.76rem; letter-spacing:0.14em}

  /* language */
  .lang{position:relative}
  .lang-btn{
    display:flex; align-items:center; gap:7px; height:40px; padding:0 12px;
    background:transparent; border:1px solid var(--rule); border-radius:2px;
    color:var(--cream-2); cursor:pointer;
    font-size:0.74rem; font-weight:600; letter-spacing:0.14em;
    transition:border-color .18s ease, color .18s ease;
  }
  .lang-btn:hover{border-color:var(--leaf); color:var(--leaf)}
  .lang-btn svg{width:15px; height:15px}
  .lang-menu{
    position:absolute; right:0; top:calc(100% + 10px); min-width:222px;
    background:var(--ink-raised); border:1px solid var(--rule-strong); padding:6px; display:none; z-index:120;
  }
  .lang.open .lang-menu{display:block}
  .lang-opt{
    display:flex; justify-content:space-between; gap:18px; width:100%;
    padding:10px 12px; background:none; border:0; cursor:pointer;
    font-size:0.88rem; color:var(--cream-2); text-align:left;
  }
  .lang-opt:hover{background:var(--field); color:var(--cream)}
  .lang-opt.active{color:var(--leaf)}
  .lang-opt .native{color:var(--cream-3)}

  /* ═══════════ HERO ═══════════ */
  .hero{border-bottom:1px solid var(--rule)}
  .hero-grid{
    max-width:1240px; margin:0 auto; padding:clamp(48px,7vw,96px) var(--gut) clamp(40px,6vw,72px);
    display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    gap:clamp(36px,5vw,72px); align-items:center;
  }
  .hero-badge{
    display:inline-flex; align-items:center; gap:12px; margin-bottom:30px;
    padding-bottom:9px; border-bottom:1px solid var(--rule);
    font-size:0.78rem; color:var(--cream-2); min-height:36px;
    transition:border-color .18s ease;
  }
  .hero-badge:hover{border-bottom-color:var(--leaf); color:var(--cream)}
  .hero-badge .tag{
    font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--leaf); border:1px solid var(--leaf); padding:3px 7px;
    font-variant-numeric:tabular-nums;
  }
  .hero h1{
    font-size:clamp(2.9rem, 6.6vw, 5.4rem);
    line-height:0.98; letter-spacing:-0.032em; margin-bottom:26px;
  }
  .hero-sub{
    font-size:clamp(1.02rem, 1.5vw, 1.18rem); color:var(--cream-2);
    max-width:46ch; margin-bottom:36px;
  }
  .hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px}
  .hero-note{margin-top:26px; font-size:0.82rem; color:var(--cream-3)}

  /* the stage — the one authored motion moment on this page:
     the software doing its job, cycling its three outputs. */
  .stage{position:relative}
  .screen{
    position:relative; aspect-ratio:16/10; overflow:hidden;
    background:var(--ink-sunk); border:1px solid var(--rule-strong);
  }
  .beam{
    position:absolute; inset:-2% -6% -2% -6%; pointer-events:none; z-index:2;
    background:linear-gradient(103deg, transparent 44%, rgba(227,180,76,0.08) 62%, transparent 76%);
    mix-blend-mode:screen;
  }
  .slide{
    position:absolute; inset:0; display:grid; place-items:center;
    padding:clamp(20px,4vw,44px); text-align:center;
    opacity:0; transition:opacity .7s cubic-bezier(.22,1,.36,1);
  }
  .slide.on{opacity:1}
  .slide-verse{background:radial-gradient(115% 90% at 50% 8%, #1C2C58 0%, #0A1226 78%)}
  .vtext{
    font-family:var(--display); font-style:italic; font-weight:400;
    font-size:clamp(0.98rem, 2.1vw, 1.5rem); line-height:1.42; color:#F2F5FB;
    max-width:34ch; margin:0 auto;
  }
  .vref{
    margin-top:18px; font-size:0.72rem; font-weight:600;
    letter-spacing:0.22em; text-transform:uppercase; color:#E3B44C;
  }
  .slide-lyric{background:linear-gradient(168deg,#17234A 0%,#080E1E 100%)}
  .ltext{
    font-family:var(--display); font-weight:600;
    font-size:clamp(1.2rem, 3.2vw, 2.15rem); line-height:1.22; color:#F2F5FB;
    letter-spacing:-0.02em;
  }
  .lmeta{margin-top:16px; font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:#8492AE}
  .slide-stream{background:#070C18; place-items:end stretch; padding:0}
  .stream-frame{
    position:absolute; inset:0;
    /* what OBS actually receives: a flat chroma-key field */
    background:#00B140;
    box-shadow:inset 0 -90px 90px -60px rgba(0,0,0,0.55);
  }
  .lower-third{
    position:relative; z-index:2; margin:0 0 9% 7%; padding:14px 22px 14px 18px;
    border-left:1px solid #E3B44C; background:rgba(8,14,30,0.82); text-align:left; max-width:78%;
  }
  .lt-text{font-family:var(--display); font-style:italic; font-size:clamp(0.86rem,1.7vw,1.1rem); color:#F2F5FB; line-height:1.35}
  .lt-ref{margin-top:6px; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:#E3B44C}

  .mode-tabs{display:flex; border:1px solid var(--rule); border-top:0}
  .mode-tab{
    flex:1; padding:13px 8px; background:transparent; border:0;
    border-right:1px solid var(--rule); cursor:pointer;
    font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--cream-3); transition:color .2s ease, background .2s ease;
  }
  .mode-tab:last-child{border-right:0}
  .mode-tab:hover{color:var(--cream-2)}
  .mode-tab.on{color:var(--leaf); background:var(--field)}

  /* the facts band — read at your own pace, no marquee */
  .facts{border-top:1px solid var(--rule)}
  .facts-list{
    max-width:1240px; margin:0 auto; padding:19px var(--gut);
    display:flex; flex-wrap:wrap; justify-content:space-between;
    gap:11px clamp(16px,2.2vw,34px);
  }
  .facts-list li{
    list-style:none; flex:0 0 auto;
    font-size:0.8rem; font-weight:500; white-space:nowrap;
    color:var(--cream-2); display:flex; align-items:baseline; gap:10px;
  }
  .facts-list li::before{
    content:""; width:5px; height:5px; flex-shrink:0;
    background:var(--leaf); transform:translateY(-2px);
  }

  /* ═══════════ SECTION SHELL ═══════════ */
  .sec{padding:var(--rhythm) 0}
  .sec-head{margin-bottom:clamp(44px,5.5vw,80px)}
  .sec-head h2{font-size:clamp(2.1rem, 4.4vw, 3.6rem); max-width:19ch}
  .sec-head.center{text-align:center}
  .sec-head.center h2{margin:0 auto}
  .sec-head p{margin-top:20px; color:var(--cream-2); font-size:1.03rem}
  .sec-head.center p{margin-left:auto; margin-right:auto}

  /* ═══════════ FEATURES — ruled spreads, then a ruled index ═══════════ */
  .spread{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);
    gap:clamp(28px,4.5vw,72px); align-items:center;
    padding:clamp(40px,5vw,68px) 0; border-top:1px solid var(--rule);
  }
  .spread:first-of-type{border-top:0; padding-top:0}
  .spread.flip .spread-art{order:-1}
  .spread h3{font-size:clamp(1.5rem, 2.5vw, 2.15rem); margin-bottom:16px}
  .spread p{color:var(--cream-2); max-width:44ch}
  .spread-art{
    background:var(--ink-raised); border:1px solid var(--rule);
    padding:clamp(20px,3vw,34px); min-height:206px;
    display:flex; flex-direction:column; justify-content:center; gap:14px;
  }

  /* demonstration panels — the product's own surfaces, at rest */
  .art-search{
    display:flex; align-items:center; gap:11px; padding:13px 15px;
    border:1px solid var(--rule-strong); background:var(--ink-sunk);
    font-size:0.94rem; color:var(--cream);
  }
  .art-search svg{width:16px; height:16px; color:var(--cream-3); flex-shrink:0}
  .art-search .caret{width:1px; height:17px; background:var(--leaf); animation:blink 1.15s steps(2) infinite}
  @keyframes blink{50%{opacity:0}}
  .art-search .k{
    margin-left:auto; font-size:0.7rem; letter-spacing:0.1em; color:var(--cream-3);
    border:1px solid var(--rule); padding:3px 7px; white-space:nowrap;
  }
  .art-result{
    padding:13px 15px; font-size:0.86rem; color:var(--cream-2);
    border:1px solid var(--rule); background:var(--field);
  }
  .art-result b{color:var(--leaf); font-weight:600}
  .art-lt{
    font-family:var(--display); font-style:italic; font-size:1.02rem; color:var(--cream);
    padding:15px 18px; border-left:1px solid var(--leaf); background:var(--ink-sunk); line-height:1.4;
  }
  .art-lt b{display:block; margin-bottom:7px; font-weight:400; color:var(--cream)}
  .art-obs{
    display:inline-flex; align-self:flex-start; align-items:center; gap:8px;
    font-size:0.7rem; font-weight:700; letter-spacing:0.18em; color:var(--leaf);
  }
  .art-phone{
    width:172px; margin:0 auto; padding:15px 14px 13px;
    border:1px solid var(--rule-strong); background:var(--ink-sunk);
  }
  .ph-bar{height:3px; width:40px; margin:0 auto 15px; background:var(--cream-3)}
  .ph-line{height:7px; margin-bottom:8px; background:var(--rule-strong)}
  .ph-line.g{background:var(--leaf); opacity:.62}
  .ph-live{margin-top:14px; font-size:0.7rem; letter-spacing:0.18em; color:var(--leaf)}

  /* the index: three more capabilities, ruled columns, no boxes */
  .index-3{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
    border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
    margin-top:clamp(30px,4vw,54px);
  }
  .index-3 > div{padding:clamp(28px,3.4vw,44px) 30px clamp(28px,3.4vw,40px) 0; border-right:1px solid var(--rule)}
  .index-3 > div:last-child{border-right:0}
  .index-3 h3{font-size:1.24rem; margin-bottom:11px}
  .index-3 p{font-size:0.93rem; color:var(--cream-2)}
  .swatches{display:flex; gap:5px; margin-top:16px}
  /* the hairline keeps the navy theme chip legible against the navy ground */
  .swatches i{width:15px; height:15px; display:block; border:1px solid var(--rule-strong)}

  /* ═══════════ GALLERY — the real application, plate by plate ═══════════ */
  .proof-frame{
    margin:0; padding:clamp(12px,1.6vw,20px);
    background:var(--ink-raised); border:1px solid var(--rule);
  }
  .proof-frame img{width:100%; height:auto; display:block; border:1px solid var(--rule-strong)}
  .proof-frame figcaption{
    margin-top:14px; font-size:0.74rem; letter-spacing:0.13em; text-transform:uppercase;
    color:var(--cream-3);
  }
  .proof-frame.lead figcaption{font-size:0.78rem; margin-top:16px}
  .plates{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:clamp(18px,2.4vw,30px); margin-top:clamp(18px,2.4vw,30px);
    align-items:start;   /* portrait and landscape captures sit at their own height */
  }

  /* ═══════════ HOW — a numbered sequence, because order matters ═══════════ */
  .how{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
  .how .step{padding:clamp(28px,3.4vw,42px) 30px clamp(28px,3.4vw,40px) 0; border-right:1px solid var(--rule)}
  .how .step:last-child{border-right:0}
  .how .n{
    font-family:var(--display); font-weight:500; font-size:1.9rem; color:var(--leaf);
    line-height:1; letter-spacing:0.06em; text-transform:uppercase;
    padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--rule);
  }
  .how h3{font-size:1.32rem; margin-bottom:11px}
  .how p{font-size:0.95rem; color:var(--cream-2)}

  /* ═══════════ PRICE — a sentence, not a card ═══════════ */
  .price{text-align:center; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:clamp(56px,7vw,96px) 0}
  .price-zero{
    font-family:var(--display); font-weight:600; color:var(--leaf);
    font-size:clamp(5rem, 15vw, 11rem); line-height:0.86; letter-spacing:-0.05em;
    font-variant-numeric:lining-nums;
  }
  .price-line{
    font-family:var(--display); font-style:italic; font-size:clamp(1.24rem,2.4vw,1.85rem);
    color:var(--cream); margin:26px auto 40px; max-width:24ch;
  }
  .price-chips{
    display:flex; flex-wrap:wrap; justify-content:center;
    max-width:820px; margin:0 auto 44px; border-top:1px solid var(--rule);
  }
  .price-chips .chip{
    flex:1 1 190px; display:flex; align-items:center; justify-content:center; gap:9px;
    padding:17px 14px; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
    font-size:0.85rem; color:var(--cream-2);
  }
  .price-chips .chip:last-child{border-right:0}
  .price-chips .chip svg{width:13px; height:13px; color:var(--leaf); flex-shrink:0}

  /* ═══════════ STORY ═══════════ */
  .story-quote{
    font-family:var(--display); font-style:italic; font-weight:400;
    font-size:clamp(1.42rem, 3.1vw, 2.5rem); line-height:1.3; color:var(--cream);
    letter-spacing:-0.018em; max-width:24ch;
  }
  .story-sign{margin-top:28px; font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--leaf)}
  .story-more{margin-top:44px; border-top:1px solid var(--rule); max-width:var(--measure)}
  .story-more summary{
    list-style:none; cursor:pointer; padding:20px 0;
    font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--cream-2); display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .story-more summary::-webkit-details-marker{display:none}
  .story-more summary::after{content:"+"; font-family:var(--display); font-size:1.4rem; color:var(--leaf); line-height:1}
  .story-more[open] summary::after{content:"–"}
  .story-more summary:hover{color:var(--cream)}
  .story-more p{color:var(--cream-2); margin-bottom:18px; font-size:0.98rem}

  /* ═══════════ GIVE — a ruled index of ministries ═══════════ */
  .give-list{border-top:1px solid var(--rule)}
  .give-row{
    display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.35fr) auto;
    gap:clamp(18px,3vw,48px); align-items:baseline;
    padding:clamp(26px,3.4vw,40px) 0; border-bottom:1px solid var(--rule);
    transition:background .2s ease, padding-left .25s cubic-bezier(.22,1,.36,1);
  }
  .give-row:hover{background:var(--field); padding-left:14px}
  .give-row h3{font-size:clamp(1.3rem,2.1vw,1.72rem)}
  .give-row .badge{
    display:inline-block; margin-top:11px;
    font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--leaf); border:1px solid var(--leaf); padding:2px 7px;
  }
  .give-row p{color:var(--cream-2); font-size:0.95rem; max-width:52ch}
  .give-row .go{
    font-size:0.75rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--cream); white-space:nowrap; border-bottom:1px solid var(--rule-strong); padding-bottom:4px;
    transition:color .18s ease, border-color .18s ease;
  }
  .give-row:hover .go{color:var(--leaf); border-bottom-color:var(--leaf)}
  .give-note{margin:30px auto 0; font-size:0.87rem; color:var(--cream-3); text-align:center; max-width:60ch}

  /* ═══════════ FAQ ═══════════ */
  .faq-list{border-top:1px solid var(--rule); max-width:900px; margin:0 auto}
  .faq-item{border-bottom:1px solid var(--rule)}
  .faq-item summary{
    list-style:none; cursor:pointer; padding:24px 0;
    font-family:var(--display); font-size:clamp(1.06rem,1.6vw,1.28rem); font-weight:500;
    color:var(--cream); display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
    transition:color .18s ease;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{
    content:"+"; font-family:var(--display); font-size:1.5rem; font-weight:400;
    color:var(--leaf); line-height:1; flex-shrink:0;
  }
  .faq-item[open] summary::after{content:"–"}
  .faq-item summary:hover{color:var(--leaf)}
  .faq-item .a{padding:0 0 26px; color:var(--cream-2); max-width:var(--measure); font-size:0.98rem}

  /* ═══════════ FINAL ═══════════ */
  .final{
    text-align:center; padding:clamp(84px,11vw,150px) 0;
    border-top:1px solid var(--rule); background:var(--ink-sunk);
  }
  .final h2{font-size:clamp(2.3rem,5.4vw,4.4rem); margin-bottom:22px}
  .final > .wrap > p{margin:0 auto 36px; color:var(--cream-2)}
  .final .req{margin-top:26px; font-size:0.78rem; color:var(--cream-3)}
  .verse-foot{
    margin:66px auto 0; padding-top:36px; border-top:1px solid var(--rule);
    max-width:38ch; font-family:var(--display); font-style:italic;
    font-size:1.1rem; color:var(--cream-2);
  }
  .verse-foot .ref{
    display:block; margin-top:12px; font-family:var(--ui); font-style:normal;
    font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--leaf);
  }

  /* ═══════════ FOOTER ═══════════ */
  .footer{padding:clamp(56px,7vw,88px) 0 40px; border-top:1px solid var(--rule)}
  .foot-grid{
    display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,2fr);
    gap:clamp(36px,5vw,72px); padding-bottom:44px;
  }
  .foot-brand p{margin-top:18px; color:var(--cream-3); font-size:0.9rem; max-width:34ch}
  .foot-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:34px}
  .foot-col{display:flex; flex-direction:column; gap:12px}
  .foot-col h3{
    font-family:var(--ui); font-size:0.7rem; font-weight:700; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--cream-3); margin-bottom:5px;
  }
  .foot-col a{font-size:0.92rem; color:var(--cream-2); width:fit-content; border-bottom:1px solid transparent}
  .foot-col a:hover{color:var(--leaf); border-bottom-color:var(--leaf)}
  .foot-base{
    display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between;
    padding-top:26px; border-top:1px solid var(--rule);
    font-size:0.79rem; color:var(--cream-3);
  }
  .foot-base span:last-child{font-family:var(--display); font-style:italic}

  /* ═══════════ RESPONSIVE ═══════════ */
  @media (max-width:1000px){
    .hero-grid{grid-template-columns:1fr; gap:44px}
    .spread{grid-template-columns:1fr; gap:26px}
    .spread.flip .spread-art{order:0}
    .foot-grid{grid-template-columns:1fr}
  }
  @media (max-width:820px){
    /* The links drop to their own ruled slot rather than vanishing, and the
       whole bar stops sticking — three pinned rows would eat a quarter of a
       phone screen. The download action repeats in the hero, price and close. */
    .nav{position:static}
    .nav-inner{flex-wrap:wrap; padding-bottom:0}
    .nav-links{
      order:3; width:100%; gap:0; margin-top:12px;
      border-top:1px solid var(--rule); justify-content:space-between;
      overflow-x:auto; scrollbar-width:none;
    }
    .nav-links::-webkit-scrollbar{display:none}
    .nav-links a{padding:11px 14px 11px 0; font-size:0.72rem; white-space:nowrap}
    .give-row{grid-template-columns:1fr; gap:12px; align-items:start}
    .give-row .go{margin-top:6px}
    .index-3 > div,.how .step{border-right:0; border-bottom:1px solid var(--rule); padding-right:0}
    .index-3 > div:last-child,.how .step:last-child{border-bottom:0}
    .facts-list li{white-space:normal}
    .price-chips .chip{flex-basis:100%; justify-content:flex-start; border-right:0}
  }
  @media (max-width:480px){
    .nav-brand span:not(.nav-mark){font-size:1rem}
    .lang-btn{padding:0 9px}
    .btn{width:100%}
    .hero-cta{align-items:flex-start; flex-direction:column}
    .hero-cta .link-quiet{width:fit-content}
  }