/* The blue-and-white system for / and /es. Shared on purpose: a second copy of 300
   lines of CSS is a guarantee the two languages stop looking like one product. */
/* Blue and white, to match the printed cards. Navy for type, one strong blue for every
     action, a very light slate for alternating bands, and green reserved for a confirmed
     outcome -- nowhere else, or it stops meaning "this worked". */
  :root{
    --ink:#0f172a; --body:#475569; --muted:#64748b; --line:#e2e8f0;
    --blue:#2563eb; --blue-hi:#1d4ed8; --blue-soft:#eff4ff;
    --slate:#f8fafc; --green:#15803d; --green-soft:#ecfdf3; --green-line:#a7e3bf;
    --wrapw:1180px;
  }
  *{ box-sizing:border-box; }
  body{
    margin:0; background:#fff; color:var(--body); font-size:18px; line-height:1.62;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{ max-width:var(--wrapw); margin:0 auto; padding:0 24px; }
  a{ color:var(--blue); }
  button{ font-family:inherit; }
  h1,h2,h3,h4{ color:var(--ink); }

  /* ---------- chrome ---------- */
  header{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; gap:16px; flex-wrap:wrap; }
  .brand{ font-weight:800; font-size:26px; letter-spacing:-.028em; line-height:1; text-decoration:none; color:var(--ink); }
  .brand span{ color:var(--blue); }
  .nav{ display:flex; gap:4px; align-items:center; }
  .nav .lnk{ color:var(--ink); text-decoration:none; font-weight:600; font-size:16px; padding:10px 14px; border-radius:9px; }
  .nav .lnk:hover{ background:var(--slate); }
  /* Two letters, not a flag: a flag picks a country and these dealers are in Texas
     whichever language they read in. */
  .langs{ flex:none; display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; margin:0 4px; }
  .langs a{ padding:9px 11px; font-size:13.5px; font-weight:700; color:var(--muted);
            text-decoration:none; letter-spacing:.03em; }
  .langs a + a{ border-left:1px solid var(--line); }
  .langs a:hover{ background:var(--slate); color:var(--ink); }
  .langs a[aria-current]{ background:var(--blue-soft); color:var(--blue); }
  .btn{
    display:inline-block; background:var(--blue); color:#fff; text-decoration:none;
    padding:14px 24px; border-radius:10px; font-weight:650; border:1px solid var(--blue);
    font-size:17px; cursor:pointer; line-height:1.3;
  }
  .btn:hover{ background:var(--blue-hi); border-color:var(--blue-hi); }
  .btn.ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
  .btn.ghost:hover{ background:var(--slate); }
  .btn.sm{ padding:10px 16px; font-size:16px; }

  /* ---------- type ---------- */
  h1{ font-size:clamp(36px,4.6vw,58px); line-height:1.02; margin:0 0 20px; letter-spacing:-.04em; font-weight:800; }
  h2{ font-size:clamp(30px,3.6vw,42px); line-height:1.1; margin:0 0 14px; letter-spacing:-.032em; font-weight:780; }
  h3{ font-size:20px; margin:0 0 8px; letter-spacing:-.018em; font-weight:700; }
  .eyebrow{ font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
            color:var(--blue); margin:0 0 16px; }
  .lede{ font-size:20px; color:var(--body); margin:0 0 30px; max-width:34em; }
  .lede b{ color:var(--ink); font-weight:650; }
  .sub{ font-size:19px; color:var(--body); margin:0 0 36px; max-width:44em; }
  section{ padding:80px 0; }
  .band{ background:var(--slate); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

  /* ---------- 1. promise + demonstration ---------- */
  .hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:clamp(28px,4vw,64px);
         align-items:center; padding:52px 0 72px; }
  .cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  .relief{ margin:-12px 0 26px; font-size:19px; color:var(--ink); font-weight:600;
           max-width:30em; letter-spacing:-.012em; }
  .pricenote{ margin:22px 0 0; font-size:16.5px; color:var(--muted); }
  .pricenote b{ color:var(--ink); font-weight:700; }
  .taxline{ font-size:14.5px; color:var(--muted); font-weight:400; }
  @media (max-width:1140px){ .hero{ grid-template-columns:1fr; padding:30px 0 48px; gap:34px; } }

  /* the replay -- one of the three things that earns a card */
  .demo{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
         box-shadow:0 1px 2px rgba(15,23,42,.05), 0 18px 40px rgba(15,23,42,.09); }
  section.demo{ padding:0; }
  .demo .hd2{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
              padding:16px 20px 14px; border-bottom:1px solid var(--line); background:#fcfdff; }
  .demo .hd2 h3{ margin:0 0 3px; font-size:17px; }
  .demo .hd2 .cx{ margin:0; font-size:14px; color:var(--muted); max-width:36ch; }
  .demo .tag{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800;
              letter-spacing:.11em; text-transform:uppercase; color:var(--blue);
              background:var(--blue-soft); border-radius:999px; padding:4px 10px; margin-bottom:9px; }
  .demo .controls{ display:flex; gap:7px; align-items:center; }
  .demo .seg{ display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
  .demo .seg button{ background:#fff; border:none; font:inherit; font-size:14px; font-weight:620;
                     color:var(--muted); padding:8px 13px; cursor:pointer; }
  .demo .seg button[aria-pressed="true"]{ background:var(--blue-soft); color:var(--blue-hi); }
  .demo .seg button + button{ border-left:1px solid var(--line); }
  .demo .replay{ background:#fff; border:1px solid var(--line); border-radius:9px; font:inherit;
                 font-size:14px; font-weight:620; color:var(--ink); padding:8px 13px; cursor:pointer;
                 display:flex; align-items:center; gap:7px; }
  .demo .replay:hover, .demo .seg button:hover{ background:var(--slate); }
  .demo .replay:focus-visible, .demo .seg button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
  /* The whole conversation is ~870px tall; capped and scrolled the way the real panel
     behaves, so the hero copy is not dwarfed by a tower of chat. */
  .demo .thread{ padding:18px 20px 14px; display:flex; flex-direction:column; gap:13px;
                 height:min(56vh,434px); overflow-y:auto; overscroll-behavior:contain;
                 scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
  .demo .thread::-webkit-scrollbar{ width:8px; }
  .demo .thread::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:4px; }
  .demo .thread::-webkit-scrollbar-track{ background:transparent; }
  .demo .ln{ display:grid; grid-template-columns:58px minmax(0,1fr); gap:11px; align-items:start;
             opacity:0; transform:translateY(8px); animation:demoRise .34s cubic-bezier(.2,.7,.3,1) forwards; }
  @keyframes demoRise{ to{ opacity:1; transform:none; } }
  .demo .clock{ font-size:12px; color:var(--muted); text-align:right; padding-top:9px;
                font-variant-numeric:tabular-nums; white-space:nowrap; }
  .demo .bub{ max-width:46ch; padding:11px 15px; border-radius:14px; font-size:16px; line-height:1.5; }
  .demo .ln.buyer .bub{ background:#f1f5f9; border:1px solid var(--line); color:var(--ink);
                        border-top-left-radius:5px; justify-self:start; }
  .demo .ln.bot{ grid-template-columns:minmax(0,1fr) 58px; }
  .demo .ln.bot .clock{ order:2; text-align:left; }
  .demo .ln.bot .stack{ order:1; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
  .demo .ln.bot .bub{ background:var(--blue); color:#fff; border-top-right-radius:5px; }
  .demo .speed{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
                color:var(--muted); font-variant-numeric:tabular-nums; }
  .demo .cap{ font-size:12.5px; color:var(--muted); text-align:right; max-width:40ch; line-height:1.45; }
  .demo .vin{ font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em;
              background:rgba(255,255,255,.2); border-radius:5px; padding:2px 6px; white-space:nowrap; }
  .demo .typing{ display:inline-flex; gap:4px; align-items:center; background:var(--blue);
                 border-radius:14px; border-top-right-radius:5px; padding:14px 16px; }
  .demo .typing i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.8);
                   display:block; animation:demoBlink 1.1s infinite ease-in-out; }
  .demo .typing i:nth-child(2){ animation-delay:.16s; }
  .demo .typing i:nth-child(3){ animation-delay:.32s; }
  @keyframes demoBlink{ 0%,60%,100%{ opacity:.35; transform:translateY(0); }
                        30%{ opacity:1; transform:translateY(-2px); } }
  /* Amber, never green. Green is the booked card and means a thing finished; this is
     the software stopping and handing the conversation back. */
  .demo .divider{ display:flex; align-items:center; gap:12px; margin:12px 0 2px; color:var(--muted);
                  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
  .demo .divider::before, .demo .divider::after{ content:""; flex:1; height:1px; background:var(--line); }
  .demo .held{ margin:6px 0 0; display:grid; grid-template-columns:58px minmax(0,1fr); gap:11px;
               opacity:0; animation:demoRise .4s cubic-bezier(.2,.7,.3,1) forwards; }
  .demo .held-card{ background:#fffaf0; border:1px solid #f4d9a4; border-radius:12px; padding:13px 16px; }
  .demo .held-card .k{ font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#a06a06; }
  .demo .held-card .v{ font-size:17px; font-weight:750; letter-spacing:-.018em; margin-top:4px; color:var(--ink); }
  .demo .held-card .draft{ margin-top:10px; padding:10px 12px; background:#fff; border:1px solid #f0e2c6;
                           border-radius:9px; font-size:14.5px; line-height:1.5; color:var(--ink); }
  .demo .held-card .draft span{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.11em;
                                text-transform:uppercase; color:#b08324; margin-bottom:5px; }
  .demo .held-card .why{ font-size:13.5px; color:#7a5a17; margin-top:9px; line-height:1.5; }
  .demo .booked{ margin:6px 0 0; display:grid; grid-template-columns:58px minmax(0,1fr); gap:11px;
                 opacity:0; animation:demoRise .4s cubic-bezier(.2,.7,.3,1) forwards; }
  .demo .booked-card{ background:var(--green-soft); border:1px solid var(--green-line);
                      border-radius:12px; padding:13px 16px; }
  .demo .booked-card .k{ font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--green); }
  .demo .booked-card .v{ font-size:17px; font-weight:750; letter-spacing:-.018em; margin-top:4px; color:var(--ink); }
  .demo .booked-card .why{ font-size:14px; color:#3f6b52; margin-top:5px; }
  .demo .ft2{ border-top:1px solid var(--line); padding:14px 20px 16px; background:#fcfdff;
              display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:baseline; }
  .demo .ft2 .tot{ font-size:15px; color:var(--body); }
  .demo .ft2 .tot b{ font-variant-numeric:tabular-nums; color:var(--ink); }
  .demo .ft2 .fine{ font-size:13px; color:var(--muted); margin:0; }
  @media (max-width:640px){
    /* The clock moves left for BOTH sides, so the bot row flips its column order too --
       giving .clock and .stack the same order let DOM order decide, which put the bubble
       in the clock column and pushed the page sideways. The orders must differ. */
    .demo .ln, .demo .ln.bot, .demo .booked, .demo .held{ grid-template-columns:44px minmax(0,1fr); gap:9px; }
    .demo .ln.bot .clock{ order:0; text-align:right; }
    .demo .ln.bot .stack{ order:1; }
    .demo .cap{ max-width:none; }
    .demo .bub{ font-size:15.5px; max-width:none; }
    .demo .vin{ font-size:13px; }
    .demo .thread{ padding:15px 14px 12px; height:min(58vh,392px); }
    .demo .hd2, .demo .ft2{ padding-left:14px; padding-right:14px; }
  }
  @media (prefers-reduced-motion:reduce){
    .demo .ln, .demo .booked, .demo .held{ animation:none; opacity:1; transform:none; }
    .demo .typing i{ animation:none; }
  }

  /* ---------- 2. results ---------- */
  .proof{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
  .stat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px; }
  .stat .n{ font-size:clamp(42px,4.6vw,54px); font-weight:820; letter-spacing:-.04em; line-height:1; color:var(--ink); }
  .stat .l{ margin-top:12px; font-size:16.5px; line-height:1.5; color:var(--body); }
  .stat .w{ margin-top:12px; padding-top:11px; border-top:1px solid var(--line);
            font-size:13.5px; color:var(--muted); }
  .src{ margin:28px 0 0; font-size:15px; color:var(--muted); max-width:72ch; }

  /* ---------- 3 & 4. steps, control ---------- */
  .steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:34px; }
  .step .no{ width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff;
             font-weight:800; font-size:17px; display:grid; place-items:center; margin-bottom:16px; }
  .step p{ margin:0; font-size:17px; }
  .need{ margin:44px 0 0; background:var(--blue-soft); border:1px solid #cfdcfb; border-radius:14px; padding:26px 28px; }
  .need h3{ margin:0 0 8px; }
  .need p{ margin:0; font-size:17px; color:#2c3c5c; max-width:64ch; }

  /* Four items, so two even rows -- auto-fit gave three across and left the fourth
     stranded on a row of its own. */
  .ctrl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 56px; }
  @media (max-width:760px){ .ctrl{ grid-template-columns:1fr; gap:30px; } }
  .ctrl h3{ margin:0 0 6px; }
  .ctrl p{ margin:0; font-size:17px; }

  /* ---------- 5. the offer ---------- */
  .offer{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:48px; align-items:center; }
  @media (max-width:900px){ .offer{ grid-template-columns:1fr; gap:32px; } }
  .plan{ background:#fff; border:2px solid var(--blue); border-radius:16px; padding:32px;
         box-shadow:0 18px 40px rgba(37,99,235,.13); }
  .plan .amt{ font-size:52px; font-weight:820; letter-spacing:-.042em; line-height:1; color:var(--ink); }
  .plan .amt span{ font-size:20px; font-weight:650; color:var(--muted); letter-spacing:-.01em; }
  .plan .inc{ margin:18px 0 22px; padding:0; list-style:none; }
  .plan .inc li{ padding:8px 0 8px 28px; position:relative; font-size:16.5px; border-bottom:1px solid var(--line); }
  .plan .inc li:last-child{ border-bottom:none; }
  .plan .inc li::before{ content:"✓"; position:absolute; left:0; top:8px; color:var(--green); font-weight:800; }
  .plan .btn{ display:block; text-align:center; }
  .plan .refund{ margin:16px 0 0; font-size:14.5px; color:var(--muted); text-align:center; }

  /* ---------- 6. questions ---------- */
  .qa{ padding:26px 0; border-bottom:1px solid var(--line); display:grid;
       grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:18px 40px; }
  .qa:last-child{ border-bottom:none; }
  .qa dt{ font-weight:700; color:var(--ink); font-size:18px; }
  .qa dd{ margin:0; font-size:17px; }
  @media (max-width:760px){ .qa{ grid-template-columns:1fr; gap:6px; } }

  /* ---------- 7. founder ---------- */
  .founder{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:30px; align-items:start; }
  .shot{ width:132px; height:132px; border-radius:16px; object-fit:cover; display:block; border:1px solid var(--line); }
  .mono{ width:132px; height:132px; border-radius:16px; background:var(--blue-soft); color:var(--blue);
         display:grid; place-items:center; font-size:42px; font-weight:800; letter-spacing:-.03em;
         border:1px solid #cfdcfb; }
  .founder p{ margin:0 0 14px; font-size:17.5px; max-width:56em; }
  @media (max-width:640px){ .founder{ grid-template-columns:1fr; gap:20px; } }

  /* ---------- close + footer ---------- */
  .close{ background:var(--blue); color:#fff; }
  .close h2{ color:#fff; }
  .close p{ color:#d3e2ff; font-size:19px; margin:0; max-width:36em; }
  .close-in{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
  .close .btn{ background:#fff; color:var(--blue-hi); border-color:#fff; }
  .close .btn:hover{ background:#e8eefb; border-color:#e8eefb; }
  .close .btn.ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
  .close .btn.ghost:hover{ background:rgba(255,255,255,.14); }

  footer{ padding:40px 0 56px; color:var(--muted); font-size:15.5px; }
  footer a{ color:var(--muted); text-decoration:none; }
  footer a:hover{ color:var(--ink); }
  footer .links{ display:flex; gap:20px; flex-wrap:wrap; margin-top:12px; }
  footer .legal{ margin:20px 0 0; font-size:13.5px; max-width:74ch; line-height:1.55; }

  /* ---------- fit: who this is for, now that Facebook answers for free ---------- */
  .fitsec h2{ margin-bottom:24px; }
  .fit{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  @media (max-width:760px){ .fit{ grid-template-columns:1fr; } }
  .fit .col{ border:1px solid var(--line); border-radius:14px; padding:26px 28px; background:#fff; }
  .fit .col.yes{ border-color:#cfdcfb; background:var(--blue-soft); }
  .fit h3{ margin:0 0 14px; }
  .fit ul{ list-style:none; margin:0; padding:0; }
  .fit li{ position:relative; padding:0 0 12px 30px; font-size:17px; color:#2c3c5c; }
  .fit li:last-child{ padding-bottom:0; }
  .fit li::before{ position:absolute; left:0; top:0; font-weight:800; }
  .fit .yes li::before{ content:"\2713"; color:var(--blue); }
  .fit .no li::before{ content:"\2013"; color:var(--muted); }
  .fit li b{ color:var(--ink); font-weight:650; }
  .more{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px 40px; margin-top:52px; }
  .more h3{ font-size:18px; margin:0 0 4px; }
  .more p{ margin:0; font-size:16.5px; }

  /* ---------- the guide: Marco talks it through instead of a wall of text ---------- */
  .guide{ margin:6px 0 0; }
  .g-stage{ position:relative; border-radius:18px; overflow:hidden; background:#0b1736;
            box-shadow:0 24px 60px -24px rgba(15,23,42,.45); }
  .g-frame{ position:relative; aspect-ratio:16/9; overflow:hidden; }
  .g-who{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 30%;
          transform-origin:72% 35%; transition:transform 8s ease-out; }
  .talking .g-who{ transform:scale(1.045); animation:g-breathe 3.4s ease-in-out infinite; }
  @keyframes g-breathe{ 0%,100%{ translate:0 0; } 50%{ translate:0 -2px; } }
  .g-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,23,54,.94) 0%, rgba(11,23,54,.86) 40%, rgba(11,23,54,.2) 62%, rgba(11,23,54,0) 75%),
            linear-gradient(0deg, rgba(11,23,54,.75) 0%, rgba(11,23,54,0) 26%); }
  .g-panel{ position:absolute; left:0; top:0; width:54%; bottom:20%; padding:4.2% 0 0 4.4%; color:#fff;
            display:flex; flex-direction:column; }
  .g-kicker{ font-size:clamp(11px,1.05vw,13px); font-weight:800; letter-spacing:.14em; color:#8fb3ff; margin:0 0 8px; }
  .g-title{ color:#fff; font-size:clamp(20px,2.7vw,34px); line-height:1.08; letter-spacing:-.03em; margin:0 0 4%; }
  .g-panel.in .g-kicker, .g-panel.in .g-title{ animation:g-rise .5s cubic-bezier(.2,.9,.2,1) both; }
  .g-panel.in .g-title{ animation-delay:.06s; }
  @keyframes g-rise{ from{ opacity:0; transform:translateY(10px); } }
  .g-items{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(6px,1vw,11px); max-width:30em; }
  .g-items li{ position:relative; background:#fff; color:var(--ink); border-radius:11px; font-weight:700;
               font-size:clamp(13px,1.45vw,18px); line-height:1.25; padding:clamp(7px,.95vw,12px) 14px clamp(7px,.95vw,12px) 44px;
               opacity:0; transform:translateX(-22px) scale(.97); transition:transform .5s cubic-bezier(.2,.9,.2,1.25), opacity .35s, box-shadow .3s; }
  .g-items li::before{ content:"\2713"; position:absolute; left:12px; top:50%; translate:0 -50%; width:22px; height:22px;
               border-radius:50%; background:var(--blue); color:#fff; font-size:13px; display:grid; place-items:center; }
  [data-tone="no"] .g-items li::before{ content:"\2715"; background:#94a3b8; }
  .g-items li.on{ opacity:1; transform:none; }
  .g-items li.hot{ box-shadow:0 0 0 3px #8fb3ff; }
  .g-tag{ position:absolute; right:3%; bottom:20%; background:rgba(11,23,54,.78); color:#fff; border-left:3px solid var(--blue);
          padding:6px 12px; border-radius:8px; font-weight:800; font-size:14px; line-height:1.15; display:flex; gap:10px; align-items:center; }
  .g-tag small{ display:block; font-weight:600; font-size:11.5px; color:#a9bce6; }
  .g-bars{ display:inline-flex; gap:2px; align-items:flex-end; height:14px; opacity:0; transition:opacity .3s; }
  .g-bars i{ width:3px; height:30%; background:#8fb3ff; border-radius:2px; animation:g-eq .9s ease-in-out infinite; }
  .g-bars i:nth-child(2){ animation-delay:.15s } .g-bars i:nth-child(3){ animation-delay:.3s } .g-bars i:nth-child(4){ animation-delay:.45s }
  @keyframes g-eq{ 0%,100%{ height:25% } 50%{ height:100% } }
  .talking .g-bars{ opacity:1; }
  .g-cap{ position:absolute; left:4%; right:4%; bottom:4.5%; text-align:center; color:#fff; pointer-events:none;
          font-size:clamp(14px,1.6vw,20px); font-weight:650; line-height:1.4; }
  .g-cap span{ background:rgba(11,23,54,.7); padding:.2em .6em; border-radius:8px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
  .g-cap i{ font-style:normal; border-radius:4px; padding:0 1px; transition:background .1s; }
  .g-cap i.now{ background:var(--blue); }
  .g-cover{ position:absolute; inset:0; border:0; padding:0 0 0 5%; margin:0; cursor:pointer; font:inherit; color:#fff; text-align:left;
            background:linear-gradient(90deg, rgba(11,23,54,.9) 0%, rgba(11,23,54,.7) 45%, rgba(11,23,54,0) 70%);
            display:flex; align-items:center; gap:22px; }
  .g-cover[hidden]{ display:none; }
  .g-play{ flex:none; width:clamp(58px,7vw,84px); height:clamp(58px,7vw,84px); border-radius:50%; background:var(--blue);
           display:grid; place-items:center; font-size:clamp(20px,2.4vw,28px); padding-left:5px;
           box-shadow:0 0 0 10px rgba(37,99,235,.25); transition:transform .2s, box-shadow .2s; }
  .g-cover:hover .g-play{ transform:scale(1.06); box-shadow:0 0 0 14px rgba(37,99,235,.3); }
  .g-cover-t{ max-width:15em; font-size:clamp(15px,1.6vw,19px); color:#c9d6f5; line-height:1.35; }
  .g-cover-t b{ display:block; color:#fff; font-size:clamp(22px,2.9vw,36px); line-height:1.08; letter-spacing:-.03em; margin:0 0 6px; }
  .failed .g-cover{ display:none; }
  .g-end{ position:absolute; inset:0; background:rgba(11,23,54,.88); color:#fff; display:flex; flex-direction:column;
          justify-content:center; padding:0 6%; }
  .g-end[hidden]{ display:none; }
  .g-end h3{ color:#fff; font-size:clamp(24px,3.2vw,40px); letter-spacing:-.03em; margin:0 0 6px; }
  .g-end p{ color:#c9d6f5; margin:0 0 22px; font-size:clamp(15px,1.6vw,19px); }
  .g-cta{ display:flex; gap:12px; flex-wrap:wrap; }
  .g-end .btn.ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
  .g-again{ align-self:flex-start; margin-top:18px; background:none; border:0; color:#a9bce6; font:inherit; font-size:15px; cursor:pointer; padding:0; }
  .g-bar{ display:flex; align-items:center; gap:14px; margin:12px 0 0; }
  .g-toggle{ flex:none; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:8px 16px;
             font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; min-width:104px; }
  .g-chapters{ flex:1; display:flex; gap:5px; min-width:0; }
  .g-chapters button{ min-width:0; border:0; background:none; padding:6px 0; cursor:pointer; text-align:left; font:inherit; }
  .g-chapters button i{ display:block; height:5px; width:0; background:var(--blue); border-radius:3px; box-shadow:0 0 0 0 transparent; }
  .g-chapters button{ background-image:linear-gradient(var(--line),var(--line)); background-size:100% 5px; background-repeat:no-repeat; background-position:0 6px; }
  .g-chapters button.done i{ width:100% !important; }
  .g-chapters button span{ display:block; margin-top:7px; font-size:12.5px; color:var(--muted); font-weight:600;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:4px; }
  .g-chapters button.cur span{ color:var(--ink); }
  .readit{ margin:26px 0 0; }
  .readit > summary{ cursor:pointer; color:var(--blue); font-weight:650; font-size:16px; list-style:none; display:inline-block; }
  .readit > summary::-webkit-details-marker{ display:none; }
  .readit > summary::after{ content:" \25BE"; }
  .readit[open] > summary::after{ content:" \25B4"; }
  .readit[open] > summary{ margin-bottom:24px; }
  @media (max-width:760px){
    .g-panel{ position:static; width:auto; padding:18px 18px 20px; background:#0b1736; min-height:280px; }
    .g-shade{ background:linear-gradient(0deg, rgba(11,23,54,.85) 0%, rgba(11,23,54,0) 40%); }
    .g-frame{ aspect-ratio:4/3; }
    .g-who{ object-position:76% 18%; }
    .talking .g-who{ transform:scale(1.02); }
    .g-tag{ bottom:auto; top:10px; right:auto; left:10px; font-size:13px; }
    .g-cap{ font-size:14px; bottom:6%; }
    .g-cover{ padding:0 0 0 18px; gap:14px; background:linear-gradient(90deg, rgba(11,23,54,.88) 0%, rgba(11,23,54,.5) 60%, rgba(11,23,54,.1) 100%); }
    .g-cover-t{ font-size:13.5px; } .g-cover-t b{ font-size:21px; }
    .g-chapters button span{ display:none; }
    .g-items li{ font-size:15px; }
  }
  @media (max-width:640px){ .nav .fitlnk{ display:none; } }

  /* ---------- /book: the demo request ---------- */
  .bookwrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; padding:40px 0 80px; align-items:start; }
  @media (max-width:860px){ .bookwrap{ grid-template-columns:1fr; gap:30px; padding-top:16px; } }
  .bookwrap h1{ font-size:clamp(34px,4.4vw,52px); }
  .bookwrap .see{ list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:12px; }
  .bookwrap .see li{ position:relative; padding-left:32px; font-size:17.5px; color:#2c3c5c; }
  .bookwrap .see li::before{ content:"\2713"; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%;
             background:var(--blue); color:#fff; font-size:13px; font-weight:800; display:grid; place-items:center; }
  .bookwrap .sig{ display:flex; gap:14px; align-items:center; color:var(--ink); font-weight:650; }
  .bookwrap .sig img, .bookwrap .sig .mono{ width:56px; height:56px; border-radius:12px; object-fit:cover; font-size:20px; }
  .bookwrap .sig small{ display:block; color:var(--muted); font-weight:500; }
  .bookform{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:0 24px 60px -30px rgba(15,23,42,.35); }
  .bookform h2{ font-size:24px; margin:0 0 4px; }
  .bookform .hint{ margin:0 0 20px; font-size:15.5px; color:var(--muted); }
  .bookform label{ display:block; font-size:14.5px; font-weight:650; color:var(--ink); margin:0 0 6px; }
  .bookform input, .bookform select{ width:100%; font:inherit; font-size:17px; padding:12px 14px; border:1px solid #cbd5e1; border-radius:10px;
             margin:0 0 16px; background:#fff; color:var(--ink); }
  .bookform input:focus, .bookform select:focus{ outline:3px solid #bfd3ff; border-color:var(--blue); }
  .bookform .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .bookform .chips{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
  .bookform .chips button{ flex:1; min-width:46px; font:inherit; font-size:16px; font-weight:700; padding:10px 0; border-radius:10px;
             border:1px solid #cbd5e1; background:#fff; color:var(--ink); cursor:pointer; }
  .bookform .chips button[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff; }
  .bookform .btn{ width:100%; font-size:18px; padding:16px; }
  .bookform .days button{ display:flex; flex-direction:column; align-items:center; line-height:1.15; padding:9px 0; font-size:15px; }
  .bookform .days button small{ font-weight:500; font-size:12.5px; opacity:.8; }
  .bookform .tz{ margin:-8px 0 16px; font-size:13px; color:var(--muted); }
  .bookform .err{ color:#b42318; font-weight:600; font-size:15px; margin:12px 0 0; }
  .bookform .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .bookform .fine{ font-size:13.5px; color:var(--muted); margin:14px 0 0; text-align:center; }
  .bookdone{ text-align:center; padding:12px 0; }
  .bookdone .ok{ width:64px; height:64px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:30px;
             display:grid; place-items:center; margin:0 auto 16px; font-weight:800; }
  .bookdone h2{ margin:0 0 8px; }

  /* ---------- 3. what it does ---------- */
  .three{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  @media (max-width:860px){ .three{ grid-template-columns:1fr; } }
  .card3{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; }
  .card3 h3{ margin:0 0 8px; }
  .card3 p{ margin:0; font-size:16.5px; }
  .card3 b{ color:var(--ink); font-weight:650; }
  .more-detail{ margin:0 0 34px; }
  .more-detail .sub{ font-size:17px; margin-bottom:22px; }
  h3.dt{ font-size:24px; letter-spacing:-.02em; margin:0 0 8px; }