/* ============================================================
     LoyaltyScan — "Vault"
     Near-black ground; the app screenshots are the light source.
     Accent (gold) is a signal, never a fill. One display face set
     tight and large does the shouting; body copy stays quiet grey.
     ============================================================ */
  :root{
    --bg:        #0A0B0D;
    --bg-lift:   #0F1115;
    --surface:   #15181C;
    --surface-2: #1B1F24;
    --ink:       #EDEEF0;
    --ink-soft:  #9BA1AA;
    --ink-faint: #6C727B;
    --line:      rgba(255,255,255,.085);
    --line-2:    rgba(255,255,255,.17);
    --gold:      #C9A227;
    --gold-lift: #E3BC46;
    --gold-wash: rgba(201,162,39,.11);
    --good:      #3FAE7A;
    --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 18px 44px rgba(0,0,0,.5);
    --shadow-3: 0 40px 90px rgba(0,0,0,.65);
    --maxw: 1180px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
  }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{ max-width:100%; height:auto; display:block; }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3,h4{
    font-family:'Familjen Grotesk',system-ui,sans-serif;
    margin:0; line-height:1.05; letter-spacing:-.03em; font-weight:700;
    text-wrap:balance; color:var(--ink);
  }
  p{ margin:0; }
  h1,h2,h3,p,li,summary{ overflow-wrap:break-word; }
  ::selection{ background:rgba(201,162,39,.28); }
  :focus-visible{ outline:2px solid var(--gold-lift); outline-offset:3px; border-radius:4px; }

  .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,4vw,34px); }
  .section{ padding-block:clamp(64px,9vw,116px); }
  .section-head{ max-width:640px; margin-block-end:clamp(34px,4.5vw,52px); }
  .eyebrow{
    display:inline-block; font-size:11px; font-weight:600; letter-spacing:.19em;
    text-transform:uppercase; color:var(--gold); margin-block-end:16px;
  }
  h2{ font-size:clamp(28px,4.1vw,48px); }
  h3{ font-size:clamp(17px,1.5vw,20px); }
  .lede{ color:var(--ink-soft); font-size:clamp(15.5px,1.35vw,17.5px); margin-block-start:16px; max-width:60ch; }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:600; font-size:15px; padding:13px 26px; border-radius:999px;
    border:1px solid transparent; cursor:pointer; white-space:nowrap;
    transition:transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  }
  .btn-primary{ background:var(--ink); color:#0A0B0D; }
  .btn-primary:hover{ background:#fff; transform:translateY(-1px); }
  .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
  .btn-ghost:hover{ border-color:var(--ink-soft); background:rgba(255,255,255,.04); }
  .btn-sm{ padding:9px 18px; font-size:13.5px; }

  /* ---------- header ---------- */
  #site-header{
    position:sticky; inset-block-start:0; z-index:60;
    background:rgba(10,11,13,.78); backdrop-filter:blur(14px);
    border-block-end:1px solid transparent; transition:border-color .25s ease;
  }
  #site-header.scrolled{ border-block-end-color:var(--line); }
  .nav{ display:flex; align-items:center; gap:26px; padding-block:15px; }
  .logo{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:16.5px; letter-spacing:-.02em; }
  .logo-icon{ width:28px; height:28px; border-radius:8px; flex:none; }
  .nav-links{ display:flex; gap:24px; margin-inline-start:auto; }
  .nav-links a{ font-size:14px; color:var(--ink-soft); transition:color .18s ease; white-space:nowrap; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-right{ display:flex; align-items:center; gap:12px; }
  .lang-switch{
    background:var(--surface); color:var(--ink-soft); border:1px solid var(--line);
    border-radius:999px; padding:8px 12px; font:inherit; font-size:13px; cursor:pointer;
  }
  .lang-switch:hover{ border-color:var(--line-2); }
  @media (max-width:1000px){ .nav-links{ display:none; } .nav-right{ margin-inline-start:auto; } }
  /* Below the sticky-CTA breakpoint the header button has nowhere to go and
     overflows the viewport. The bottom bar is the CTA on mobile, so there is
     no second one to lose. */
  @media (max-width:700px){ #site-header .nav-right .btn{ display:none; } }

  /* ---------- hero ---------- */
  .hero{ position:relative; overflow:hidden; padding-block:clamp(46px,6vw,84px) clamp(20px,3vw,40px); }
  .hero::before{
    content:""; position:absolute; inset-block-start:-220px; inset-inline-start:50%;
    transform:translateX(-50%); width:min(1100px,140vw); height:620px; pointer-events:none;
    background:radial-gradient(closest-side, rgba(201,162,39,.15), rgba(201,162,39,.03) 55%, transparent);
  }
  .hero-grid{
    position:relative; display:grid; grid-template-columns:1.06fr .94fr;
    gap:clamp(28px,4vw,58px); align-items:center;
  }
  .hero-copy h1{ font-size:clamp(38px,5.8vw,70px); margin-block:0; }
  .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-block-start:30px; }
  .store-badge{
    display:inline-flex; align-items:center; gap:11px; padding:11px 20px;
    border-radius:13px; background:var(--ink); color:#0A0B0D;
    transition:transform .18s ease, background .18s ease;
  }
  .store-badge:hover{ background:#fff; transform:translateY(-1px); }
  .store-badge svg{ width:22px; height:22px; flex:none; }
  .store-badge .txt{ display:flex; flex-direction:column; line-height:1.16; }
  .store-badge small{ font-size:10px; opacity:.68; }
  .store-badge strong{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
  .hero-price{ margin-block-start:18px; font-size:clamp(16px,1.4vw,18px); font-weight:600; color:var(--ink); }
  .hero-price .js-price{ color:var(--gold-lift); }
  .hero-proof{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-block-start:26px; color:var(--ink-faint); font-size:13.5px; }
  .hero-proof .item{ display:inline; line-height:1.8; }
  .hero-proof .item .stars{ margin-inline-end:4px; }
  .hero-proof .item svg{ width:15px; height:15px; color:var(--ink-faint); }
  .stars{ color:var(--gold); letter-spacing:1px; font-size:13px; }
  .hero-proof .quote{ color:var(--ink-soft); font-style:italic; }
  .hero-proof .sep{ color:var(--ink-faint); }

  /* phone frame — the light source */
  .hero-visual{ display:flex; justify-content:center; }
  .device{
    position:relative; width:min(292px,76vw); margin-inline:auto;
    border:10px solid #1E2229; border-radius:42px; overflow:hidden;
    background:#1E2229;
    box-shadow:0 0 0 1px rgba(255,255,255,.07), var(--shadow-3), 0 -6px 60px rgba(201,162,39,.13);
  }
  .device img{ border-radius:32px; }
  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ order:2; }
    .hero-copy{ order:1; }
  }

  /* ---------- trust strip ---------- */
  .diff{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:var(--r);
    overflow:hidden;
  }
  .cell{ display:flex; align-items:flex-start; gap:12px; padding:20px 22px; background:var(--bg-lift); }
  .ico{ flex:none; color:var(--gold); margin-block-start:2px; }
  .ico svg{ width:19px; height:19px; display:block; }
  .cell .t{ font-weight:600; font-size:14.5px; }
  .cell .s{ color:var(--ink-faint); font-size:13px; }
  @media (max-width:820px){ .diff{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:460px){ .diff{ grid-template-columns:1fr; } }

  /* ---------- gift cards: the lead feature ---------- */
  .lead{
    position:relative; border:1px solid var(--line); border-radius:var(--r-xl);
    background:linear-gradient(168deg,#14171C 0%,#0D0F12 62%); overflow:hidden;
  }
  .lead::before{
    content:""; position:absolute; inset-block-start:-40%; inset-inline-end:-10%;
    width:520px; height:520px; border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side, rgba(201,162,39,.13), transparent);
  }
  .lead-grid{
    position:relative; display:grid; grid-template-columns:1fr .82fr;
    gap:clamp(26px,4vw,56px); align-items:center;
    padding:clamp(30px,4.4vw,58px) clamp(24px,4vw,54px) 0;
  }
  .lead h2{ font-size:clamp(26px,3.5vw,42px); }
  .lead .lede{ margin-block-start:18px; }
  .lead-points{ display:flex; flex-direction:column; gap:2px; margin-block-start:30px; }
  .point{ display:flex; gap:14px; padding-block:15px; border-block-start:1px solid var(--line); }
  .point:first-child{ border-block-start:0; }
  .point .ico{ margin-block-start:3px; }
  .point h3{ font-size:15.5px; letter-spacing:-.015em; margin-block-end:4px; }
  .point p{ color:var(--ink-soft); font-size:14px; line-height:1.55; }
  .point .tag{
    display:inline-block; margin-inline-start:8px; font-size:9.5px; font-weight:700;
    letter-spacing:.13em; text-transform:uppercase; color:var(--good);
    border:1px solid rgba(63,174,122,.4); border-radius:999px; padding:2px 7px;
    vertical-align:2px;
  }
  .lead-note{
    margin-block-start:20px; padding:12px 16px; border-radius:var(--r-sm);
    background:var(--gold-wash); border:1px solid rgba(201,162,39,.26);
    color:var(--ink-soft); font-size:13.5px; line-height:1.5;
  }
  .lead-shot{ align-self:end; justify-self:center; }
  .lead-shot .device{ width:min(252px,72vw); margin-block-end:-2px; border-block-end:0;
    border-end-start-radius:0; border-end-end-radius:0; }
  .lead-shot .device img{
    border-end-start-radius:0; border-end-end-radius:0;
    height:420px; object-fit:cover; object-position:top;
  }
  @media (max-width:880px){
    .lead-grid{ grid-template-columns:1fr; padding-inline:clamp(20px,5vw,34px); }
    .lead-shot{ display:none; }
    .lead-grid{ padding-block-end:clamp(26px,4vw,40px); }
  }

  /* ---------- wrist & home screen ---------- */
  .next{
    border:1px solid var(--line); border-radius:var(--r-xl); background:var(--bg-lift);
    padding:clamp(30px,4.4vw,58px) clamp(24px,4vw,54px);
  }
  .next .lede{ margin-block-end:clamp(28px,3.5vw,44px); }
  .next-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .next-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:24px; display:flex; flex-direction:column; gap:15px;
  }
  .next-card h3{ font-size:16.5px; }
  .next-card p{ color:var(--ink-soft); font-size:14px; line-height:1.55; }
  .next-card .soon{
    align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold);
    border:1px solid rgba(201,162,39,.42); border-radius:999px; padding:4px 10px;
  }
  .mock{ height:132px; display:grid; place-items:center; }
  .mock-watch{
    width:98px; height:117px; border-radius:30px; background:#0A1220;
    border:3px solid rgba(255,255,255,.20); display:grid; place-items:center; position:relative;
  }
  .mock-watch::before,.mock-watch::after{
    content:""; position:absolute; inset-inline-start:50%; transform:translateX(-50%);
    width:40px; height:15px; background:rgba(255,255,255,.14); border-radius:5px;
  }
  .mock-watch::before{ inset-block-start:-15px; }
  .mock-watch::after{ inset-block-end:-15px; }
  .mock-round{
    width:108px; height:108px; border-radius:50%; background:#0A1220;
    border:3px solid rgba(255,255,255,.20); display:grid; place-items:center;
  }
  .mock-watch img{ width:100%; height:100%; object-fit:cover; border-radius:27px; }
  .mock-round img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .mock-widget{
    width:114px; height:114px; border-radius:24px; background:#0A1220;
    border:1px solid rgba(255,255,255,.14); display:grid; place-items:center;
    padding:14px; align-content:center; gap:8px;
  }
  .barcode{ display:flex; align-items:flex-end; gap:2px; height:34px; }
  .barcode i{ width:2px; background:rgba(255,255,255,.85); border-radius:1px; display:block; }
  .mock-label{ font-size:9px; color:var(--ink-faint); margin-block-start:7px; letter-spacing:.04em; }
  @media (max-width:820px){ .next-grid{ grid-template-columns:1fr; } }

  /* ---------- bento ---------- */
  .bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .tile{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:26px; display:flex; flex-direction:column;
  }
  .tile h3{ margin-block-end:9px; }
  .tile p{ color:var(--ink-soft); font-size:14.5px; }
  .tile .ico{ margin-block-end:14px; }
  .tile .ico svg{ width:22px; height:22px; }
  .tile-wide{ grid-column:span 2; }
  .tile-tall{ grid-row:span 2; }
  .tile-feature{
    grid-column:span 2; grid-row:span 2; background:linear-gradient(165deg,#16191E,#0D0F12);
    display:flex; flex-direction:column; justify-content:space-between; gap:22px;
  }
  .tile-feature h3{ font-size:clamp(20px,2.3vw,26px); }
  .tile-feature .shot{
    border-radius:18px 18px 0 0; overflow:hidden; border:6px solid rgba(255,255,255,.07);
    border-block-end:0; margin-block-end:-26px; margin-inline:auto; width:min(250px,80%);
  }
  .tile-feature .shot img{ height:360px; object-fit:cover; object-position:top; }
  .tile .chip{
    display:inline-block; background:var(--gold-wash); color:var(--gold-lift);
    font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
    padding:5px 11px; border-radius:999px; margin-block-end:13px;
  }
  .tile-shot{ padding:0; overflow:hidden; }
  .tile-shot .cap{ padding:26px 26px 0; }
  .tile-shot img{
    margin-block-start:18px; border-start-start-radius:16px; border-start-end-radius:16px;
    margin-inline:22px; width:auto; height:300px; object-fit:cover; object-position:top;
  }
  @media (max-width:980px){
    .bento{ grid-template-columns:repeat(2,1fr); }
    .tile-feature{ grid-column:span 2; grid-row:auto; }
    .tile-wide{ grid-column:span 2; } .tile-tall{ grid-row:auto; }
  }
  @media (max-width:600px){ .bento{ grid-template-columns:1fr; } .tile-feature,.tile-wide{ grid-column:span 1; } }

  /* ---------- steps ---------- */
  .steps-layout{ display:grid; grid-template-columns:250px 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
  .steps-layout .steps{ grid-template-columns:repeat(2,1fr); }
  .steps-device{ width:250px; margin-inline:auto; }
  .hero-device video{ display:block; width:100%; height:auto; border-radius:32px; background:#F7F7FB; }
  .steps-device video{ display:block; width:100%; height:auto; border-radius:32px; background:#F7F7FB; }
  @media (max-width:820px){ .steps-layout{ grid-template-columns:1fr; } .steps-device{ width:min(240px,70vw); } }
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
  .step{ padding-block-start:22px; border-block-start:1px solid var(--line-2); }
  .step::before{
    counter-increment:step; content:"0" counter(step);
    font-size:12px; font-weight:600; color:var(--gold); letter-spacing:.1em;
    display:block; margin-block-end:11px;
  }
  .step h3{ margin-block-end:8px; font-size:17px; }
  .step p{ color:var(--ink-soft); font-size:14.5px; }
  @media (max-width:820px){ .steps{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

  /* ---------- pricing ---------- */
  /* the reassurance note under the plans, not a wrapper */
  .pricing-frame{
    display:flex; align-items:flex-start; gap:11px; margin-block-start:18px;
    border:1px solid var(--line); border-radius:var(--r); background:var(--bg-lift);
    padding:15px 20px; color:var(--ink-soft); font-size:14px;
  }
  .pricing-founder{ margin:14px auto 0; max-width:64ch; text-align:center; color:var(--ink-faint); font-size:14px; }
  .pricing-frame svg{ width:17px; height:17px; color:var(--gold); flex:none; margin-block-start:2px; }
  .plans{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .plan{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:30px; display:flex; flex-direction:column; position:relative;
  }
  .plan.featured{ border-color:rgba(201,162,39,.42); background:linear-gradient(170deg,#1A1A16,#141519); }
  .plan-badge{
    position:absolute; inset-block-start:-11px; inset-inline-start:30px;
    background:var(--gold); color:#171203; font-size:10px; font-weight:700;
    letter-spacing:.13em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
  }
  .plan-name{ font-family:'Familjen Grotesk',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.02em; }
  .plan-price{ font-family:'Familjen Grotesk',sans-serif; font-size:42px; font-weight:700; letter-spacing:-.035em; margin-block:14px 2px; }
  .plan-price .per{ font-size:14px; font-weight:500; color:var(--ink-faint); letter-spacing:0; margin-inline-start:6px; }
  .plan-note{ color:var(--ink-faint); font-size:13px; margin-block-end:22px; }
  .plan ul{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; flex-grow:1; }
  .plan li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink-soft); align-items:flex-start; }
  .tick{ color:var(--good); flex:none; font-weight:700; }
  @media (max-width:760px){ .plans{ grid-template-columns:1fr; } }

  /* ---------- reviews ---------- */
  .reviews-summary{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-block-end:18px; }
  .reviews-summary .big{ font-family:'Familjen Grotesk',sans-serif; font-weight:700; font-size:34px; letter-spacing:-.02em; }
  .reviews-summary .stars{ color:var(--gold); letter-spacing:1px; font-size:16px; }
  .reviews-summary .count{ color:var(--ink-soft); font-size:14.5px; }
  .reviews-summary .more{ margin-inline-start:auto; color:var(--gold-lift); font-weight:600; font-size:14.5px; text-decoration:underline; text-underline-offset:3px; }
  .review h3{ font-size:16px; margin:8px 0 6px; }
  .review .who .name{ color:var(--ink); font-weight:600; }
  .reviews-note{ margin-block-start:16px; color:var(--ink-faint); font-size:13px; }
  .reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .review{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:26px; display:flex; flex-direction:column; gap:13px;
  }
  .review .stars{ font-size:14px; }
  .review p{ font-size:14.5px; color:var(--ink-soft); flex-grow:1; }
  .review .who{ font-size:13px; color:var(--ink-faint); }
  @media (max-width:860px){ .reviews{ grid-template-columns:1fr; } }

  /* ---------- faq ---------- */
  .faq-list{ display:flex; flex-direction:column; border-block-start:1px solid var(--line); }
  .faq-item{ border-block-end:1px solid var(--line); }
  .faq-item summary{
    cursor:pointer; list-style:none; padding-block:20px; padding-inline-end:34px;
    font-weight:600; font-size:16px; position:relative; color:var(--ink);
    font-family:'Familjen Grotesk',sans-serif; letter-spacing:-.015em;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+"; position:absolute; inset-inline-end:4px; inset-block-start:19px;
    font-size:19px; font-weight:400; color:var(--ink-faint); transition:transform .2s ease;
  }
  .faq-item[open] summary::after{ content:"−"; }
  .faq-a{ color:var(--ink-soft); font-size:15px; padding-block-end:22px; padding-inline-end:34px; max-width:74ch; }

  /* ---------- final cta ---------- */
  .final{
    text-align:center; border:1px solid var(--line); border-radius:var(--r-xl);
    background:linear-gradient(170deg,#15181D,#0C0E11); padding:clamp(40px,6vw,76px) clamp(24px,4vw,54px);
    position:relative; overflow:hidden;
  }
  .final::before{
    content:""; position:absolute; inset-block-start:-160px; inset-inline-start:50%;
    transform:translateX(-50%); width:600px; height:400px; border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side, rgba(201,162,39,.16), transparent);
  }
  .final > *{ position:relative; }
  .final .lede{ margin-inline:auto; }
  .final .hero-cta{ justify-content:center; }

  /* ---------- footer ---------- */
  footer{ border-block-start:1px solid var(--line); padding-block:clamp(38px,5vw,60px) 30px; background:var(--bg-lift); }
  .foot-main{ display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap; align-items:flex-start; }
  .foot-links{ display:flex; gap:22px; flex-wrap:wrap; }
  .foot-links a{ color:var(--ink-soft); font-size:14px; }
  .foot-links a:hover{ color:var(--ink); }
  .footer-langs{ display:flex; gap:9px 16px; flex-wrap:wrap; margin-block-start:22px; }
  .footer-langs a{ color:var(--ink-faint); font-size:12.5px; }
  .footer-langs a:hover{ color:var(--ink-soft); }
  .foot-bottom{
    display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
    margin-block-start:30px; padding-block-start:22px; border-block-start:1px solid var(--line);
    color:var(--ink-faint); font-size:13px;
  }

  /* ---------- mobile sticky cta ---------- */
  .mobile-cta{
    position:fixed; inset-inline:0; inset-block-end:0; z-index:70; display:none;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(10,11,13,.9); backdrop-filter:blur(14px); border-block-start:1px solid var(--line);
  }
  .mobile-cta .btn{ width:100%; }
  @media (max-width:700px){ .mobile-cta{ display:block; } body{ padding-block-end:78px; } }

  /* ---------- toast / misc ---------- */
  .msg{
    position:fixed; inset-block-end:20px; inset-inline-start:50%; transform:translateX(-50%);
    background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink);
    padding:12px 18px; border-radius:999px; font-size:14px; z-index:90; box-shadow:var(--shadow-2);
  }
  .close-btn,.view-btn{ background:none; border:0; color:var(--ink-soft); cursor:pointer; font:inherit; }

  /* language suggestion bar, built by the script on English pages */
  .lang-banner{
    display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
    background:var(--surface); border-block-end:1px solid var(--line);
    padding:11px 18px; font-size:14px; color:var(--ink-soft);
  }
  .lang-banner .msg{
    position:static; transform:none; background:none; border:0; padding:0;
    border-radius:0; box-shadow:none; color:inherit; font-size:inherit;
  }
  .lang-banner .view-btn{ color:var(--gold-lift); font-weight:600; text-decoration:underline; }
  .lang-banner .close-btn{ font-size:19px; line-height:1; color:var(--ink-faint); }

  /* ---------- reveal ----------
     Resting state is visible. The hidden start only applies where a script
     can actually run to undo it, so a JS failure can never leave a section
     blank — which is exactly what a page like this cannot afford. */
  .reveal{ opacity:1; transform:none; }
  @media (scripting:enabled) and (prefers-reduced-motion:no-preference){
    .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
    .reveal.in{ opacity:1; transform:none; }
  }

  /* ---------- subpage additions ---------- */
  /* single-column hero: cap the copy, but keep the column flush left with
     the sections below it -- a max-width on the wrapper itself gets centred
     by .wrap's auto margins and leaves the headline floating. */
  .hero-solo{ grid-template-columns:1fr; }
  .hero-solo .hero-copy{ max-width:780px; }
  .hero-solo h1{ font-size:clamp(34px,5vw,58px); }
  .steps-3{ grid-template-columns:repeat(3,1fr); }
  @media (max-width:820px){ .steps-3{ grid-template-columns:1fr; } }
  .more{ display:inline-block; margin-block-start:12px; font-size:14px; font-weight:600; color:var(--gold-lift); }
  .more:hover{ color:var(--gold); }
  .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
  @media (max-width:760px){ .why-grid{ grid-template-columns:1fr; } }