/* ============================================================
   THE MAGPIE SITE.

   Laid out after the strongest site in the category — seated white
   cards on a pale ground, a dark statistics band and a coloured footer —
   with their purple swapped for our blue. Every colour is a token here;
   nothing outside :root carries a raw hex except the illustration.

   THE TYPE IS THE APP'S (src/app.html), because Tom's rule is one look
   end to end: headlines in Gabarito 700 — the free face measured closest
   to the category leader's paid Chopin — and everything else Inter at
   400–600. The first site was Inter 800–900 with italic accent words;
   next to the leader it read heavy, and Tom's word for heavy was "cheap".
   Nothing here is heavier than 700, and 700 is for display type only.
   Gabarito has no italic, so the accent word is colour, never a faked
   slant. Buttons are 12px-cornered like theirs, medium weight.

   Contrast was checked before a line of this was written:
     --ink   #09090B on #FFFFFF  19.9:1
     --ink-2 #3F3F46 on #FFFFFF  10.4:1
     --muted #52525B on #FFFFFF   7.7:1 · on --wash 7.1:1
     --blue  #1F5BD8 on #FFFFFF   6.1:1  (small text safe)
     --blue  #1F5BD8 on --wash    5.5:1
     #FFFFFF on --blue            6.1:1  (button text)
     #FFFFFF on --navy #0A1A3F   16.9:1
     --sky   #9CC0FF on --navy    8.7:1
     --ink   on --sun #FFE45C    15.6:1
   ============================================================ */
:root{
  --ink:#09090B; --ink-2:#3F3F46; --muted:#52525B;
  --paper:#FFFFFF; --wash:#F3F6FD; --line:#E4E4E7;
  --blue:#1F5BD8; --blue-hi:#1848B0; --blue-lo:#E7EEFD; --sky:#9CC0FF;
  --navy:#0A1A3F; --navy-2:#132A5E;
  --sun:#FFE45C; --good:#12805C; --good-lo:#E3F5EE; --bad:#B42318; --bad-lo:#FDECEA;
  --radius:16px; --pill:999px; --btn:12px;
  --shadow:0 1px 2px rgba(11,18,32,.06),0 8px 24px rgba(11,18,32,.06);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Gabarito","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
     -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
b,strong{font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{line-height:1.1;margin:0;letter-spacing:-.015em;font-weight:700;font-family:var(--display)}
h1{font-size:clamp(2.4rem,6vw,4.25rem);line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.08}
h3{font-size:1.3rem;letter-spacing:-.005em;line-height:1.2}
.acc{color:var(--blue)}
.sec{padding:88px 0}
.sec.tight{padding:64px 0}
.sec.wash{background:var(--wash)}
.center{text-align:center}
.lede{font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--muted);max-width:60ch}
.center .lede{margin-left:auto;margin-right:auto}
.kicker{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;
        text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--paper);padding:8px 12px;z-index:99}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--btn);
     font-weight:500;font-size:.97rem;padding:.8rem 1.35rem;text-decoration:none;
     border:2px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2;
     transition:transform .12s ease,background .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#27272A}
.btn.blue{background:var(--blue);color:#fff}
.btn.blue:hover{background:var(--blue-hi)}
.btn.line{background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 2px rgba(9,9,11,.05)}
.btn.line:hover{background:#FAFAFA}
.btn.white{background:#fff;color:var(--ink)}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn.sm{font-size:.9rem;padding:.58rem 1rem;border-radius:10px}
.btn .dot{width:8px;height:8px;border-radius:50%;background:#46E08F;
          box-shadow:0 0 0 3px rgba(70,224,143,.25)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.center .btns{justify-content:center}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
     backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
     border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:70px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:1.3rem;
      letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.logo .mk{width:30px;height:30px;border-radius:9px;background:var(--blue);display:grid;place-items:center}
.logo .mk svg{width:17px;height:17px}
.logo b{color:var(--blue);font-weight:700}
.links{display:flex;align-items:center;gap:4px;margin-left:12px}
.links>a,.links summary{font-weight:500;font-size:.94rem;color:var(--ink-2);text-decoration:none;
       padding:.5rem .75rem;border-radius:10px;cursor:pointer;list-style:none}
.links summary::-webkit-details-marker{display:none}
.links>a:hover,.links summary:hover{background:var(--wash)}
.links details{position:relative}
.links summary:after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;
       border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
       transform:translateY(-3px) rotate(45deg)}
.drop{position:absolute;top:calc(100% + 8px);left:0;background:var(--paper);border:1px solid var(--line);
      border-radius:14px;box-shadow:var(--shadow);padding:8px;min-width:250px}
.drop.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:600px;gap:2px}
.drop.two a{display:flex;gap:10px;align-items:flex-start}
.drop .dic{width:32px;height:32px;border-radius:9px;background:var(--blue-lo);color:var(--blue);display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.drop .dic svg{width:17px;height:17px}
.drop .all{grid-column:1 / -1;border-top:1px solid var(--line);border-radius:0 0 9px 9px;margin-top:4px;padding-top:.8rem;color:var(--blue);display:flex;align-items:center;gap:6px}
.drop .all svg{width:16px;height:16px}
.drop a{display:block;padding:.6rem .8rem;border-radius:9px;text-decoration:none;font-weight:500;font-size:.94rem}
.drop a small{display:block;font-weight:400;color:var(--muted);font-size:.82rem}
.drop a:hover{background:var(--wash)}
.nav .ctas{margin-left:auto;display:flex;gap:8px}
.burger{display:none;margin-left:auto}
.burger summary{list-style:none;cursor:pointer;padding:10px;border-radius:10px;border:1px solid var(--line)}
.burger summary::-webkit-details-marker{display:none}
.burger .panel{position:absolute;left:0;right:0;top:70px;background:var(--paper);
      border-bottom:1px solid var(--line);padding:12px 20px 20px;box-shadow:var(--shadow)}
.burger .panel a{display:block;padding:.7rem 0;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line)}
.burger .panel .btns{margin-top:16px}
@media(max-width:980px){.links,.nav .ctas{display:none}.burger{display:block}}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 60% 55% at 85% 20%,var(--blue-lo),transparent 70%)}
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:940px){.hgrid{grid-template-columns:1fr;gap:40px}}
.hero h1 .ring{display:inline-flex;align-items:center;gap:.12em}
.hero h1 .ring svg{width:.62em;height:.62em;color:var(--blue)}
.hero .lede{margin-top:20px}
.pillbar{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;background:var(--sun);
      border-radius:var(--pill);padding:.4rem .5rem .4rem .9rem;font-size:.86rem;font-weight:500;margin-bottom:22px}
.pillbar b{background:#fff;border-radius:var(--pill);padding:.2rem .65rem;font-weight:600}
.badge{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
       color:var(--blue);margin-bottom:12px}
.trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;font-size:.9rem;color:var(--muted)}
.trust span{display:flex;align-items:center;gap:6px}
.trust svg{width:16px;height:16px;color:var(--good)}

/* the live call, which is the hero illustration */
.live{position:relative;max-width:500px;margin-left:auto;width:100%}
@media(max-width:940px){.live{margin:0 auto}}
.callcard{background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 70px rgba(31,91,216,.18);
          padding:20px;position:relative;z-index:2}
.callhead{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.callhead .av{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:600}
.callhead b{display:block;font-size:.98rem;font-weight:600}
.callhead small{color:var(--muted);font-size:.8rem}
.callhead .rec{margin-left:auto;font-family:var(--mono);font-size:.74rem;color:var(--good);
       background:var(--good-lo);padding:.25rem .55rem;border-radius:var(--pill);display:flex;gap:6px;align-items:center}
.callhead .rec:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.bub{max-width:86%;padding:.65rem .9rem;border-radius:16px;font-size:.92rem;margin-top:10px;line-height:1.45}
.bub.c{background:var(--wash);border-bottom-left-radius:4px}
.bub.d{background:var(--blue);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.bub small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.ticket{position:relative;z-index:3;margin:-18px -10px 0 34px;background:var(--navy);color:#fff;border-radius:18px;padding:16px 18px;
        box-shadow:0 20px 40px rgba(10,26,63,.35)}
.ticket .row{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.ticket .row:last-child{border:0}
.ticket .row span{color:var(--sky)}
.ticket .top{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:6px}
.ticket .top i{font-style:normal;background:#46E08F;color:var(--navy);font-size:.72rem;font-weight:600;padding:.15rem .5rem;border-radius:var(--pill)}
.example{font-size:.76rem;color:var(--muted);text-align:right;margin-top:10px}
/* Each bubble carries its own delay (--d) in the markup. The old rules
   counted bubbles with nth-of-type, which also counted the call header —
   so the LAST line of the call appeared first and the card sat nearly
   empty for two seconds. Found on a live screenshot. */
@media(prefers-reduced-motion:no-preference){
  .callcard .bub{opacity:0;animation:in .5s ease forwards;animation-delay:var(--d,.2s)}
  .ticket{opacity:0;animation:in .6s ease 3s forwards}
}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- the illustrated hero on a trade page ---------- */
.live.staged{max-width:520px}
.staged .scene{border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(31,91,216,.16);border:1px solid var(--line);background:var(--wash)}
.staged .scene img{display:block;width:100%;height:auto}
.staged .callcard{margin:-96px 18px 0 40px}
.staged .ticket{margin:-18px -6px 0 72px}
@media(max-width:560px){.staged .callcard{margin:-56px 6px 0 14px}.staged .ticket{margin:-14px 0 0 28px}}

/* ---------- industry cards: the hub, and "other trades" ---------- */
.igrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media(max-width:1060px){.igrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.igrid{grid-template-columns:minmax(0,1fr)}}
.icard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:14px 14px 22px;
       text-decoration:none;color:var(--ink);transition:box-shadow .2s,border-color .2s,transform .2s}
.icard:hover{border-color:var(--blue);box-shadow:0 18px 44px rgba(31,91,216,.14);transform:translateY(-2px)}
.ipic{border-radius:16px;overflow:hidden;background:var(--wash);margin-bottom:18px}
.ipic img{display:block;width:100%;height:auto}
.ikick{color:var(--blue);font-weight:600;font-size:.86rem;padding:0 8px}
.icard h3{font-size:1.45rem;margin:.35rem 0 .45rem;padding:0 8px}
.icard p{color:var(--muted);margin:0 0 18px;padding:0 8px;line-height:1.55;font-size:.96rem}
.imore{margin-top:auto;padding:0 8px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.imore svg{width:18px;height:18px;transition:transform .2s}
.icard:hover .imore svg{transform:translateX(3px)}
.rowhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.rowhead h2{margin:.3rem 0 0}
.rowhead .more{font-weight:600;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.rowhead .more svg{width:18px;height:18px}

/* ---------- what she asks ---------- */
.asks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px;text-align:left}
@media(max-width:980px){.asks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.asks{grid-template-columns:minmax(0,1fr)}}
.ask{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.ask h3{font-size:1.05rem;margin:0 0 .6rem}
.ask ol{margin:0;padding-left:1.2rem;color:var(--ink-2)}
.ask li{margin:.3rem 0;line-height:1.45}
.ask .none{margin:0;color:var(--muted)}
.ask .opts{display:block;font-size:.84rem;color:var(--muted);margin-top:2px;line-height:1.45}
.skips{max-width:900px;margin:22px auto 0;display:grid;gap:10px;text-align:left}
.skip-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.tag{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem;padding:.3rem .7rem;border-radius:var(--pill);white-space:nowrap}
.tag svg{width:16px;height:16px}
.tag.urg{background:#FFF1E6;color:#9A3C00}
.tag.evac{background:var(--bad-lo);color:var(--bad)}
.safety.never{border-color:#C98A00;background:#FFF8E5}
.safety.never b{color:#8A5A00;font-weight:600}

/* ---------- the industries table ---------- */
.itable th[scope=row] a{color:var(--ink);text-decoration:none;font-weight:600}
.itable th[scope=row] a:hover{color:var(--blue)}
.itable td{text-align:left;font-size:.94rem;line-height:1.5}

/* ---------- trade tabs ---------- */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
@media(max-width:760px){.tabs{grid-template-columns:repeat(2,1fr)}}
.tab{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;
     text-decoration:none;font-weight:600;background:var(--paper)}
.tab:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.tab .ic{width:38px;height:38px;border-radius:11px;background:var(--blue-lo);color:var(--blue);display:grid;place-items:center;flex-shrink:0}
.tab .ic svg{width:20px;height:20px}
.tab small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px;margin-top:44px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.card .ic{width:48px;height:48px;border-radius:14px;background:var(--blue-lo);color:var(--blue);display:grid;place-items:center;margin-bottom:18px}
.card .ic svg{width:24px;height:24px}
.card p{color:var(--muted);margin:.6rem 0 0;font-size:.96rem}
.card ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.card ul li{font-size:.78rem;font-weight:500;background:var(--wash);border:1px solid var(--line);
        padding:.25rem .6rem;border-radius:var(--pill);color:var(--ink-2)}

/* agents */
.agent{display:flex;flex-direction:column;overflow:hidden;padding:0}
.agent .art{height:150px;background:linear-gradient(135deg,var(--blue) 0%,#4C86F0 100%);position:relative;display:grid;place-items:center;color:#fff}
.agent .art.navy{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%)}
.agent .art svg{width:64px;height:64px;opacity:.95}
.agent .art .role{position:absolute;left:16px;top:14px;background:rgba(255,255,255,.18);font-size:.72rem;font-weight:600;
       letter-spacing:.06em;text-transform:uppercase;padding:.25rem .6rem;border-radius:var(--pill)}
.agent .body{padding:22px;display:flex;flex-direction:column;flex:1}
.agent .body p{flex:1}
.agent .btn{margin-top:18px;align-self:flex-start}

/* ---------- the dark numbers band ---------- */
.band{background:var(--navy);color:#fff;border-radius:32px;padding:64px 48px;margin:0 20px}
@media(max-width:680px){.band{padding:44px 22px;border-radius:24px;margin:0 12px}}
.band h2{max-width:18ch}
.band .lede{color:#C5D3EE}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
@media(max-width:760px){.stats{grid-template-columns:1fr}}
.stat{border-top:2px solid var(--blue);padding-top:18px}
.stat .n{font-family:var(--display);font-size:clamp(2.6rem,6vw,3.6rem);font-weight:700;letter-spacing:-.02em;line-height:1}
.stat .t{color:#D6E1F5;margin-top:.7rem;font-size:.98rem}
.stat .s{font-size:.8rem;color:var(--sky);margin-top:.7rem;font-weight:500}

/* ---------- comparison ---------- */
.cmpwrap{margin-top:44px;overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:var(--paper)}
table.cmp{width:100%;border-collapse:collapse;min-width:680px}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.93rem;vertical-align:top}
.cmp thead th{font-size:.85rem;font-weight:600;background:var(--wash)}
.cmp thead th.us{background:var(--blue);color:#fff}
.cmp td.us{background:#F5F8FF;font-weight:500}
.cmp tr:last-child td{border-bottom:0}
.yes,.no,.mid{display:inline-flex;align-items:center;gap:6px}
.yes:before,.no:before,.mid:before{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700}
.yes:before{content:"✓";background:var(--good-lo);color:var(--good)}
.no:before{content:"✕";background:var(--bad-lo);color:var(--bad)}
.mid:before{content:"~";background:#FFF6D6;color:#8A6400}
.cmpnote{font-size:.82rem;color:var(--muted);margin-top:12px}

/* ---------- timeline ---------- */
.tl{position:relative;margin-top:52px;max-width:920px;margin-left:auto;margin-right:auto}
.tl:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--blue);transform:translateX(-50%)}
.step{position:relative;width:calc(50% - 40px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
      padding:22px 24px;box-shadow:var(--shadow);margin-bottom:28px}
.step:nth-child(odd){margin-right:auto}.step:nth-child(even){margin-left:auto}
.step:after{content:"";position:absolute;top:28px;width:16px;height:16px;border-radius:50%;background:var(--blue);border:4px solid var(--blue-lo)}
.step:nth-child(odd):after{right:-50px}.step:nth-child(even):after{left:-50px}
.step .lbl{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.step h3{margin-top:6px}
.step p{color:var(--muted);margin:.5rem 0 0;font-size:.95rem}
@media(max-width:760px){
  .tl:before{left:10px}
  .step{width:auto;margin-left:36px!important}
  .step:nth-child(odd):after,.step:nth-child(even):after{left:-34px;right:auto}
}

/* ---------- calculator ---------- */
.calcgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:40px}
@media(max-width:860px){.calcgrid{grid-template-columns:1fr}}
.field{margin-bottom:22px}.field:last-child{margin-bottom:0}
.field label{display:block;font-weight:600;font-size:.97rem;margin-bottom:.15rem}
.field .hint{font-size:.84rem;color:var(--muted);margin-bottom:.6rem}
.slide{display:flex;align-items:center;gap:12px}
input[type=range]{flex:1;accent-color:var(--blue);height:26px;min-width:0}
.val{font-family:var(--mono);font-weight:600;font-size:1rem;min-width:84px;text-align:right;background:var(--blue-lo);
     color:var(--blue-hi);padding:.35rem .55rem;border-radius:8px}
.result{background:var(--navy);color:#fff;border-radius:var(--radius);padding:30px;position:sticky;top:90px}
@media(max-width:860px){.result{position:static}}
.result .lab{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.big{font-family:var(--display);font-size:clamp(2.6rem,7vw,3.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:.3rem 0 .1rem;
     font-variant-numeric:tabular-nums}
.per{color:var(--sky);font-size:.95rem}
.split{display:flex;gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15)}
.split>div{flex:1}
.split .num{font-family:var(--mono);font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums}
.split .l{font-size:.8rem;color:var(--sky);line-height:1.35;margin-top:.2rem}
.note{margin-top:20px;font-size:.9rem;color:#D6E1F5;line-height:1.5}

/* ---------- price ---------- */
.ptable{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;max-width:900px}
.center .ptable{margin-left:auto;margin-right:auto;text-align:left}
@media(max-width:760px){.ptable{grid-template-columns:1fr}}
.p{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:var(--paper);box-shadow:var(--shadow);position:relative}
.p.lead{border:2px solid var(--blue)}
.p .tag{position:absolute;top:-12px;left:24px;background:var(--blue);color:#fff;font-size:.72rem;font-weight:600;
        letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:var(--pill)}
.p .amt{font-family:var(--display);font-size:2.8rem;font-weight:700;letter-spacing:-.02em;margin:.5rem 0 .2rem}
.p .amt small{font-family:var(--sans);font-size:1rem;font-weight:500;color:var(--muted)}
.p p{color:var(--muted);font-size:.95rem;margin:.4rem 0 0}
/* The plan is one card, centred, with what it includes. */
.ptable.one{grid-template-columns:minmax(0,1fr);max-width:560px}
.ptable.one .p{padding:32px}
.ptable.one .ticks{margin:18px 0 0}
.ptable.one .ticks li{color:var(--ink-2);font-size:.97rem;padding:5px 0 5px 32px}
.ptable.one .ticks li:before{top:6px}
.ptable.one + .guar{max-width:560px}
.guar{background:var(--blue-lo);border:1px solid #C9D9FA;border-radius:var(--radius);padding:22px 24px;margin:24px auto 0;max-width:900px;text-align:left}
.guar b{color:var(--blue-hi);font-weight:600}

/* ---------- call me ---------- */
.cm{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:860px){.cm{grid-template-columns:1fr;gap:28px}}
.cm-lede{color:var(--muted);font-size:1.08rem;margin:.9rem 0 0}
.cm-fine{color:var(--muted);font-size:.9rem;margin-top:1rem}
.cm-card label{display:block;font-weight:600;font-size:.9rem;margin:0 0 .35rem}
.cm-card input[type=text],.cm-card input[type=tel],.cm-card input:not([type]){width:100%;padding:.8rem .9rem;border-radius:12px;
  border:1px solid var(--line);background:var(--wash);font-size:1rem;font-family:inherit;margin-bottom:1rem;color:var(--ink)}
.cm-check{display:flex!important;gap:.7rem;align-items:flex-start;font-weight:400!important;font-size:.84rem!important;
  color:var(--muted);line-height:1.5;margin:.3rem 0 1.2rem!important;cursor:pointer}
.cm-check input{margin:.2rem 0 0;flex-shrink:0;width:1.05rem;height:1.05rem;accent-color:var(--blue)}
.cm-go{width:100%;justify-content:center}
.cm-go[disabled]{opacity:.55;cursor:not-allowed}
.cm-msg{margin-top:.9rem;font-size:.92rem;min-height:1.2rem}
.cm-msg.err{color:var(--bad)}.cm-msg.good{color:var(--good)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:40px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:1.06rem;padding:18px 40px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:14px;font-size:1.5rem;color:var(--blue);font-weight:400}
.faq details[open] summary:after{content:"–"}
.faq details p{color:var(--muted);margin:0 0 18px;max-width:70ch}

/* ---------- bullets, steps, use cases ---------- */
.ticks{list-style:none;padding:0;margin:24px 0 0}
.ticks li{padding:6px 0 6px 32px;position:relative}
.ticks li:before{content:"✓";position:absolute;left:0;top:6px;width:22px;height:22px;border-radius:50%;background:var(--blue-lo);
     color:var(--blue);font-size:.75rem;font-weight:700;display:grid;place-items:center}
.num3 .card .k{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;margin-bottom:14px}
.safety{border-left:4px solid var(--bad);background:var(--bad-lo);border-radius:14px;padding:22px 24px;margin-top:28px}
.safety b{color:var(--bad);font-weight:600}
.safety q{display:block;font-style:italic;margin-top:10px;color:var(--ink-2);quotes:"\201C" "\201D"}

/* ---------- prose (legal, integrations detail) ---------- */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:1.5rem;margin:40px 0 10px}
.prose h3{font-size:1.1rem;margin:26px 0 8px}
.prose p,.prose li{color:var(--ink-2)}
.prose .upd{color:var(--muted);font-size:.9rem}

/* ---------- final CTA + footer ---------- */
.final{background:var(--blue);color:#fff;border-radius:32px;margin:0 20px;padding:72px 32px;text-align:center;position:relative;overflow:hidden}
@media(max-width:680px){.final{margin:0 12px;border-radius:24px;padding:52px 20px}}
.final:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;border:70px solid rgba(255,255,255,.07);right:-180px;top:-220px}
.final h2{max-width:20ch;margin:0 auto}
.final p{color:#E3ECFF;max-width:54ch;margin:16px auto 0;font-size:1.1rem}
.foot{background:var(--navy);color:#C5D3EE;margin-top:88px;padding:64px 0 30px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
.foot h4{color:#fff;font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:0;margin-bottom:12px}
.foot a{display:block;text-decoration:none;padding:4px 0;font-size:.92rem}
.foot a:hover{color:#fff}
/* .foot a (a link in a footer column) outranks .logo, and drew the
   wordmark as a small block under its own mark. Named here so it can't. */
.foot .logo{display:flex;font-size:1.3rem;padding:0;color:#fff;margin-bottom:12px}
.foot .logo b{color:var(--sky)}
.foot .small{font-size:.84rem;margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;
      flex-wrap:wrap;gap:12px;justify-content:space-between}
.fill{font-family:var(--mono)}
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--blue);text-decoration:none}
[hidden]{display:none!important}
.ticket .top svg{width:18px;height:18px;flex-shrink:0}
.tabs.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.tabs.three{grid-template-columns:1fr}}
.logo .wm{display:inline}
.burger summary svg{width:22px;height:22px;display:block}
.hero h1.t{font-size:clamp(2.2rem,4.8vw,3.5rem)}
@media(max-width:560px){.pillbar{font-size:.8rem;border-radius:16px}.hero{padding-top:36px}}

/* ---------- the app, shown ---------- */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;align-items:start}
@media(max-width:900px){.phones{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}}
.phonebox{text-align:left}
.phonebox h3{margin:18px 4px 4px;font-size:1.1rem}
.phonebox>p{margin:0 4px;color:var(--muted);font-size:.93rem}
.frame{background:var(--navy);border-radius:38px;padding:10px;box-shadow:0 30px 60px rgba(10,26,63,.25)}
.screen{background:#F3F6FD;border-radius:30px;overflow:hidden;height:520px;position:relative;font-size:12px;padding:14px 12px 64px}
.screen .top{display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.01em;margin-bottom:10px}
.screen .top i{width:18px;height:18px;border-radius:5px;background:var(--blue);display:inline-block}
.screen .top b{color:var(--blue)}
.screen .top em{font-style:normal}
.m-tiles strong{font-size:20px!important;line-height:1.1}
.screen .top span{margin-left:auto;font-family:var(--sans);font-weight:500;color:var(--muted);font-size:10px;letter-spacing:0}
.screen h4{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.m-chips{display:flex;gap:5px;margin-bottom:8px}
.m-chips em{font-style:normal;font-weight:500;font-size:10px;padding:4px 8px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.m-chips em.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.m-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 10px;margin-bottom:7px}
.m-card b{display:flex;justify-content:space-between;font-size:12px;font-weight:600}
.m-card b small{font-weight:400;color:var(--muted);font-size:10px}
.m-card p{margin:2px 0 5px;color:var(--muted);font-size:11px;line-height:1.35}
.m-pill{display:inline-block;font-size:8.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;margin-right:4px}
.m-pill.g{background:var(--good-lo);color:var(--good)} .m-pill.r{background:var(--bad-lo);color:var(--bad)}
.m-pill.y{background:#FFF6D6;color:#8A6400} .m-pill.q{background:#EEF2F8;color:var(--muted)} .m-pill.b{background:var(--blue-lo);color:var(--blue-hi)}
.m-week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:10px}
.m-week em{font-style:normal;background:#fff;border:1px solid var(--line);border-radius:9px;text-align:center;padding:4px 0;font-weight:600;font-size:12px;line-height:1.1}
.m-week em small{display:block;font-size:7.5px;color:var(--muted);font-weight:500}
.m-week em.on{background:var(--blue);color:#fff;border-color:var(--blue)} .m-week em.on small{color:#DCE7FF}
.m-slot{display:grid;grid-template-columns:52px 1fr;gap:6px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:10px;padding:7px 8px;margin-bottom:6px}
.m-slot.r{border-left-color:var(--bad)} .m-slot.o{background:transparent;border:1px dashed #B7C7EA;border-left:3px dashed #B7C7EA}
.m-slot strong{font-size:11px;font-weight:600} .m-slot.o strong{color:var(--blue)}
.m-slot p{margin:0;font-size:10.5px;color:var(--muted)} .m-slot h5{margin:0;font-size:12px;font-family:var(--sans);font-weight:600;letter-spacing:0}
.m-hero{background:var(--navy);color:#fff;border-radius:14px;padding:10px 12px;margin-bottom:7px}
.m-hero small{font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sky)}
.m-hero strong{display:block;font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.m-hero p{margin:0;font-size:10px;color:#C5D3EE}
.m-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:7px}
.m-tiles div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 8px}
.m-tiles div.y{background:#FFF6D6;border-color:#F0D48A}
.m-tiles strong{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em}
.m-tiles span{font-size:9.5px;color:var(--muted)}
.m-bars{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;align-items:flex-end;gap:6px;height:74px}
.m-bars i{flex:1;background:var(--blue);border-radius:3px 3px 0 0;display:block}
.m-tab{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:7px 6px 10px;text-align:center;font-size:9px;font-weight:500;color:var(--muted)}
.m-tab span.on{color:var(--blue)}
.m-tab span:before{content:"";display:block;width:16px;height:16px;border-radius:5px;margin:0 auto 2px;background:currentColor;opacity:.25}
.m-tab span.on:before{opacity:.9}

/* ---------- the live booking widget ---------- */
.livebook{max-width:1100px;margin:36px auto 0;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(31,91,216,.18);border:1px solid var(--line);background:#fff}
.livebook iframe{display:block;width:100%;height:700px;border:0}
@media(max-width:680px){.livebook iframe{height:760px}}

.spots{margin:16px auto 0;font-size:1rem;color:var(--ink-2)}
.spots b{color:var(--blue-hi);font-weight:600}