/* DravyaOS — landing site · "Bloom"
   Pure static CSS. No build step, no framework, no shared tooling with the app.

   Aurora at its softest: rounded pastel fields (mint, sky, lilac), oversized
   radii, no hard edges, human voice. Sora for display, Karla for body.
   The mockup this is lifted from is design-ideas/landing/03-bloom*.html —
   change one and change the other in the same sitting.

   Layout note: the home page, blog index and article pages carry Bloom's own
   markup. The compare pages and the article bodies keep the vocabulary they
   were written in (.section, .grid, .card, .prose, .cmp-*) because that markup
   is generated from _data/ or is nineteen files of prose; those class names are
   dressed in Bloom values further down rather than renamed. */

:root{
  /* pastel fields */
  --mint:#dff5ee; --sky:#e4eefc; --lilac:#eee9fd; --sand:#fdf3e3;
  /* brand ink */
  --teal:#15a48c; --blue:#2f7fd0; --lilac-ink:#6d5fe6; --leaf:#46a93f; --amber:#c77d11;
  --ink:#1a2740; --ink-2:#4b5a7a; --muted:#6f7c99; --faint:#a3adc4;
  --white:#fff; --line:rgba(26,39,64,.09); --line-2:rgba(26,39,64,.16);
  --rx:#c2453a; --rx-soft:rgba(194,69,58,.10);
  --grad:linear-gradient(140deg,var(--teal),var(--blue));

  --disp:"Sora",system-ui,-apple-system,sans-serif;
  --body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"Cascadia Code","Consolas",monospace;

  --maxw:1160px; --r:30px;
  --soft:0 2px 4px rgba(26,39,64,.03), 0 20px 48px rgba(26,39,64,.08);
  --lift:0 40px 90px rgba(26,39,64,.18);

  /* Aliases for the blocks that were written against the previous sheet — the
     chat widget (its markup is built in app.js, so there is nothing to rename)
     and the compare tables. Defining them here is what lets those blocks come
     across untouched. */
  --paper:#fbfdff; --paper-2:rgba(255,255,255,.5);
  --card:rgba(255,255,255,.8); --card-line:rgba(255,255,255,.9);
  --accent:var(--teal); --accent-soft:rgba(21,164,140,.10);
  --pos:#2c7150;
  --on-ink:#fff; --on-ink-muted:rgba(255,255,255,.82);
  --font-display:var(--disp); --font-body:var(--body); --font-mono:var(--mono);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;font-family:var(--body);color:var(--ink);line-height:1.68;font-size:16.5px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(760px 620px at 88% -6%, var(--lilac), transparent 62%),
    radial-gradient(700px 620px at 4% 8%, var(--mint), transparent 62%),
    radial-gradient(900px 700px at 60% 104%, var(--sky), transparent 62%),
    #fbfdff;
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;margin:0;line-height:1.1}
h4,h5{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.mono{font-family:var(--mono)}
.center{text-align:center}

/* the uppercase teal label above a heading — .tag on Bloom's own markup,
   .eyebrow on everything inherited */
.tag,.eyebrow{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin:0 0 16px;display:block}
.eyebrow a{color:inherit}

/* blobs behind a hero */
.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;pointer-events:none;z-index:0}

/* ---------- placeholders ----------
   A slot with nothing in it yet. It prints what belongs there, so an asset we
   haven't shot is visible rather than a blank box. `.vid` adds the duration and
   the play badge; replacing one is swapping the div for a <video> or <img> of
   the same class, which the fill rules below already size. */
.ph{border:2px dashed rgba(47,127,208,.3);border-radius:26px;background:rgba(255,255,255,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:26px;color:var(--muted)}
.ph b{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue)}
.ph span{font-size:13px;max-width:34ch;line-height:1.45}
.ph.vid{position:relative}
.ph.vid::before{content:attr(data-dur);position:absolute;left:14px;bottom:13px;font-size:11.5px;
  letter-spacing:.05em;color:var(--ink-2);background:rgba(255,255,255,.86);border-radius:999px;
  padding:4px 11px;box-shadow:0 4px 12px rgba(26,39,64,.08)}
.ph.vid::after{content:"\25b6";position:absolute;right:14px;bottom:11px;width:34px;height:34px;
  border-radius:50%;display:grid;place-items:center;font-size:12px;padding-left:2px;color:#fff;
  background:linear-gradient(140deg,var(--teal),var(--blue));box-shadow:0 8px 20px rgba(47,127,208,.34)}

/* ---------- entrance ---------- */
@keyframes pop{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
.pop{opacity:0;animation:pop .8s cubic-bezier(.2,.8,.25,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.24s}.d4{animation-delay:.36s}
/* .pop fires on load and is right for a hero; anything further down the page
   waits for the scroll instead (app.js adds .in). */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.25,1),transform .7s cubic-bezier(.2,.8,.25,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pop{animation:none;opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--disp);
  font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 12px 28px rgba(26,39,64,.24)}
.btn-primary:hover{background:#0f1a2e}
.btn-mint{background:var(--mint);color:var(--ink);border-color:rgba(21,164,140,.25)}
.btn-white,.btn-on-ink{background:#fff;color:var(--ink);box-shadow:var(--soft)}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--ink);border-color:rgba(255,255,255,.9);box-shadow:var(--soft)}
.btn-clear{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
.btn.sm,.btn-sm{padding:10px 20px;font-size:14px}
.text-link{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--teal);white-space:nowrap}
.text-link:hover{color:var(--ink)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;padding:14px 0}
.site-header.scrolled .nav{box-shadow:0 10px 34px rgba(26,39,64,.13)}
/* The nav element is also the .wrap, so .nav's own padding overrides .wrap's
   26px gutter. On desktop the 1160px max-width leaves a margin anyway and it
   never showed; on a phone the pill runs edge to edge and the screen slices its
   999px corners off -- which reads as a header that is broken rather than one
   that is wide. Give the gutter back as width, so .wrap's `margin:0 auto` goes
   on centring it and the max-width still caps it above 1188px. */
.site-header .wrap.nav{width:calc(100% - 28px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);
  border-radius:999px;padding:10px 12px 10px 20px;box-shadow:var(--soft)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;
  font-size:18px;letter-spacing:-.03em;flex:none}
.brand .mark{width:30px;height:30px;display:block;border-radius:8px}
.nav .links{display:flex;gap:4px;margin-left:auto}
.nav .links a{font-size:14.5px;font-weight:500;color:var(--muted);padding:8px 13px;border-radius:999px;transition:.16s}
.nav .links a:hover,.nav .links a.active,.nav .links a[aria-current="page"]{background:var(--mint);color:var(--ink)}
.nav .nav-cta{margin-left:6px}

/* mobile menu — a native <details>, so it opens with no JS at all */
/* The mobile menu is a <details> so it opens with no JS -- which also means the
   FAQ's bare `details{...}` rule below was styling it: a card background, a
   border-radius and 20px/26px of padding wrapped around a 42px round button,
   making it 84px wide. That phantom 42px was most of why the nav row would not
   fit a 360px phone. Reset the lot; .mnav owns its own look. */
.mnav{display:none;position:relative;flex:none;
  padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none}
.mnav summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:999px;
  border:1px solid rgba(255,255,255,.9);background:#fff;box-shadow:var(--soft);
  display:flex;align-items:center;justify-content:center;font-size:17px}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:none}
.mnav[open] .sheet{display:grid}
.sheet{display:none;position:absolute;right:0;top:54px;min-width:214px;padding:8px;z-index:80;
  background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:22px;
  box-shadow:0 24px 54px rgba(26,39,64,.16)}
.sheet a{padding:12px 16px;border-radius:14px;font-size:15px;font-weight:500;color:var(--ink-2)}
.sheet a:hover{background:var(--mint);color:var(--ink)}

/* ---------- footer ---------- */
/* This element is `.site-footer wrap`, and a shorthand `padding:0 0 34px` here
   beats .wrap's `0 26px` (same specificity, declared later) -- so the footer had
   no side gutter at all. Invisible on desktop, where the 1160 cap leaves margin
   anyway; on a phone every footer line sat flush against the glass. Restate the
   gutter rather than reaching for the longhand. */
.site-footer{padding:0 26px 34px;color:var(--muted);font-size:14px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px;padding:44px 0 34px;border-top:1px solid var(--line)}
.fgrid .brand{margin-bottom:12px}
.fgrid p{margin:0 0 10px;font-size:14.5px;color:var(--ink-2);max-width:32ch}
.fgrid p a{color:var(--teal);font-weight:600}
.fsocial{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;max-width:none}
.fsocial a{display:inline-flex;align-items:center}
.fsocial svg{width:18px;height:18px;fill:currentColor;flex:none}
.fcol h5{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.fcol a{display:block;padding:5px 0;font-size:14.5px;color:var(--muted)}
.fcol a:hover{color:var(--teal)}
.fbar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.fbar a{color:var(--muted)}
.fbar a:hover{color:var(--teal)}

/* ---------- section shells ---------- */
section.blk,.section{padding:96px 0;position:relative}
.section.alt{background:rgba(255,255,255,.44)}
.head,.section-head{text-align:center;max-width:660px;margin:0 auto}
.head h2,.section-head h2{font-size:clamp(30px,3.8vw,48px)}
.head p,.section-head p{color:var(--ink-2);margin-top:14px;font-size:17px}
.section-head:not(.center){text-align:left;margin-left:0}
.lead{font-size:19px;color:var(--ink-2)}
.small{font-size:14px;color:var(--muted);margin-top:16px}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px;position:relative}
/* A .blob is a decorative wash deliberately hung past its section's edge
   (right:-60px, left:-80px). On a desktop that bleed is invisible; on a 390px
   phone it is 60px of real horizontal overflow, so the document lays out 450
   wide against a 390 viewport -- and every position:fixed element is then
   pinned to the WIDER box. That is what pushed the chat button to x=436 and
   off the screen: the button was never the bug, the bleed was.
   overflow-x:clip, not hidden: clip does not establish a scroll container, so
   the sticky header and scroll-behavior:smooth go on working. body already
   carries overflow-x:hidden, but overflow propagated from body to the viewport
   still leaves the overflow in the layout, which is what innerWidth reads. */
.hero,.top{overflow-x:clip}
.hero-top{position:relative;z-index:2;text-align:center;max-width:940px;margin:0 auto}
.hero h1{font-size:clamp(38px,5.4vw,66px);max-width:17ch;margin:0 auto}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero p.lead{max-width:52ch;margin:22px auto 28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-top .cta-row{justify-content:center}

/* stage: the app in a frosted frame, with a phone tucked into the corner */
.vstage{position:relative;z-index:2;max-width:1000px;margin:52px auto 0}
.vframe{position:relative;border-radius:38px;padding:14px;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 50px 110px rgba(26,39,64,.2);backdrop-filter:blur(10px)}
.vframe img,.vframe video{width:100%;display:block;border-radius:26px;background:var(--sky)}
.vframe video{aspect-ratio:16/9;object-fit:cover}
/* the empty case: the placeholder stands in at the frame's own size */
.vframe > .ph{aspect-ratio:16/9;border-radius:26px;justify-content:flex-start;
  padding-top:clamp(24px,3.6vw,46px);background:linear-gradient(150deg,var(--sky),#fff 55%,var(--mint))}
.vframe .ph b{font-size:12px}
.vframe .ph span{max-width:44ch;font-size:14px}
/* the sound-on version; the loop behind it plays muted on its own */
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:88px;height:88px;
  border-radius:50%;display:grid;place-items:center;color:#fff;font-size:26px;padding-left:5px;
  cursor:pointer;border:0;background:linear-gradient(140deg,var(--teal),var(--blue));
  box-shadow:0 18px 44px rgba(47,127,208,.4);transition:.2s}
.play::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:2px solid rgba(47,127,208,.3);animation:ripple 2.8s ease-out infinite}
@keyframes ripple{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.play:hover{transform:translate(-50%,-50%) scale(1.06)}
.vbar{position:absolute;left:26px;bottom:26px;z-index:4;display:flex;gap:8px;flex-wrap:wrap}
.vbar span{background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:999px;
  padding:7px 15px;font-size:13px;color:var(--ink-2);box-shadow:0 6px 18px rgba(26,39,64,.1)}
.vbar span.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--teal);margin-right:7px;vertical-align:middle;animation:blink 2s infinite}
@keyframes blink{50%{opacity:.25}}
.phone{position:absolute;right:-58px;bottom:-52px;z-index:5;width:184px;padding:8px;border-radius:30px;
  background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:var(--lift)}
.phone img,.phone video{width:100%;display:block;border-radius:22px;background:var(--sky)}
.phone video{aspect-ratio:9/16;object-fit:cover}
.phone .ph{aspect-ratio:9/16;border-radius:22px;padding:12px}
.phone .ph b{font-size:9.5px;letter-spacing:.1em}
.phone .ph span{font-size:11px;line-height:1.35}
.chip{position:absolute;z-index:3;background:#fff;border-radius:20px;padding:14px 16px;box-shadow:var(--soft);
  display:flex;gap:11px;align-items:center;animation:bob 6.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.chip .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:15px;flex:none}
.chip .t{font-family:var(--disp);font-weight:600;font-size:14px}
.chip .s{font-size:12.5px;color:var(--muted);line-height:1.3}
.chip.one{left:-46px;top:64px}
.chip.two{right:-72px;top:36px;animation-delay:-2.2s}
.chip.three{left:-30px;bottom:96px;animation-delay:-4s}

/* trust pills + big figures */
.trust{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:104px}
.trust span{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:999px;
  padding:9px 18px;font-size:14px;color:var(--ink-2);box-shadow:0 6px 18px rgba(26,39,64,.05)}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:60px}
.fig{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:26px;
  padding:26px 24px;box-shadow:0 8px 24px rgba(26,39,64,.05)}
.fig b{display:block;font-family:var(--disp);font-size:38px;font-weight:800;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(120deg,var(--teal),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.fig span{display:block;margin-top:10px;font-size:14.5px;color:var(--ink-2)}

/* keycap motif, kept from the ledger era */
.hint-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:18px;
  font-size:13.5px;color:var(--muted)}
.hint-row .pair{display:inline-flex;align-items:center;gap:6px}
.hint-row .sep{color:var(--faint)}
.kbd-cap{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:7px}

/* ---------- three pastel cards (worries / who it's for) ---------- */
.worries{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.worry{border-radius:var(--r);padding:34px 30px;position:relative;overflow:hidden}
.worry:nth-child(1){background:var(--mint)}
.worry:nth-child(2){background:var(--sky)}
.worry:nth-child(3){background:var(--lilac)}
.worry .q{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.25;margin:0 0 12px}
.worry.said .q::before{content:"\201C";font-size:44px;line-height:0;position:relative;top:14px;margin-right:4px;opacity:.35}
.worry p{margin:0 0 12px;color:var(--ink-2);font-size:15.5px}
.worry .who{margin-top:18px;margin-bottom:0;font-size:13px;color:var(--muted);font-style:italic}

/* ---------- alternating showcase ---------- */
.show{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:76px}
.show.flip .txt{order:2}
.show h3{font-size:clamp(26px,3vw,38px);margin-bottom:14px}
.show p{color:var(--ink-2);font-size:16.5px}
.show ul{list-style:none;padding:0;margin:22px 0 0}
.show li{padding:9px 0 9px 30px;position:relative;color:var(--ink-2);font-size:15.5px}
.show li::before{content:"";position:absolute;left:0;top:17px;width:14px;height:14px;border-radius:50%;
  background:var(--mint);border:3px solid var(--teal)}
.show .art{align-self:start;border-radius:var(--r);overflow:hidden;box-shadow:var(--soft);background:#fff;padding:16px}
.show .art img,.show .art video{width:100%;display:block;border-radius:20px}
.show .art video{aspect-ratio:3/2;object-fit:cover}
.show .art .ph{aspect-ratio:3/2;border-radius:20px}
/* an empty slot is already a dashed frame; the white card around it would be a
   second frame, so the chrome comes off until there is something to hold */
.show .art:has(> .ph){background:none;box-shadow:none;padding:0}
/* the detail is kept, just folded away — plain disclosure, none of the FAQ chrome */
.more{background:none;border:0;border-radius:0;padding:0;margin:20px 0 0}
.more summary{font-family:var(--body);font-size:15px;font-weight:600;color:var(--teal);justify-content:flex-start;gap:7px}
.more summary::before{content:"Show more"}
.more[open] summary::before{content:"Show less"}
.more summary::after{font-size:13px}
.more ul{margin-top:6px}
.more p{margin-top:10px}

/* ---------- cards in a grid (the kit, features, compare) ---------- */
.kit,.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
/* .k is scoped to .kit on purpose: a compare chip uses .k for its little
   uppercase label, and an unscoped card rule nests a card inside the chip. */
.kit .k,.card{display:block;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.9);
  border-radius:24px;padding:26px 24px;box-shadow:0 8px 24px rgba(26,39,64,.05);transition:.18s}
.kit .k:hover,a.card:hover{transform:translateY(-3px);box-shadow:var(--soft);text-decoration:none}
.kit .k h4,.card h3{font-family:var(--disp);font-weight:700;font-size:17.5px;letter-spacing:-.025em;margin:0 0 7px;line-height:1.28}
.kit .k p,.card p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
/* the card leads with its clip; until one is shot, with the slot for it */
.kit .k .ph.clip,.card .ph.clip{aspect-ratio:16/9;border-radius:16px;margin-bottom:16px;padding:14px;gap:5px;
  background:linear-gradient(150deg,var(--sky),#fff 60%,var(--mint))}
.kit .k .ph.clip b,.card .ph.clip b{font-size:9.5px;letter-spacing:.11em}
.kit .k .ph.clip span,.card .ph.clip span{font-size:11.5px;line-height:1.35;max-width:30ch}
.kit .k .clip.vid::before,.card .clip.vid::before{left:10px;bottom:9px;font-size:10px;padding:3px 9px}
.kit .k .clip.vid::after,.card .clip.vid::after{right:10px;bottom:8px;width:26px;height:26px;font-size:10px}
video.clip,img.clip{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;
  border-radius:16px;margin-bottom:16px;background:var(--sky)}
.card .tag,.tag{display:inline-block;font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);background:rgba(21,164,140,.1);border-radius:999px;
  padding:4px 11px;margin:0 0 12px}
/* the optional add-on group, marked so it doesn't read as core */
.tag.tag-ai{color:#fff;background:linear-gradient(120deg,var(--lilac-ink),var(--blue))}
.card ul{list-style:none;padding:0;margin:12px 0 0}
.card li{position:relative;padding:6px 0 6px 24px;font-size:14.5px;color:var(--ink-2)}
.card li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:10px;border-radius:50%;
  background:var(--mint);border:3px solid var(--teal)}
.card-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card-date{font-size:12.5px;color:var(--muted)}

/* ---------- the unnamed comparison table on the home page ---------- */
.cmp{margin-top:44px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r);box-shadow:var(--soft);padding:10px 12px;overflow-x:auto}
.cmp table{width:100%;min-width:680px;border-collapse:collapse}
.cmp th,.cmp td{padding:15px 18px;text-align:left;font-size:15px;color:var(--ink-2);vertical-align:top}
.cmp thead th{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);padding-top:20px;padding-bottom:14px}
.cmp tbody tr{border-top:1px solid var(--line)}
.cmp .feat{font-weight:600;color:var(--ink);width:30%}
.cmp th.us,.cmp td.us{background:var(--mint);color:var(--ink);width:32%}
.cmp thead th.us{color:var(--teal);border-radius:22px 22px 0 0}
.cmp tbody tr:last-child td.us{border-radius:0 0 22px 22px}
.cmp td.us::before{content:"\2713";color:var(--teal);font-weight:700;margin-right:9px}
.cmp-note{max-width:70ch;margin:22px auto 0;text-align:center;font-size:14.5px;color:var(--muted)}

/* ---------- steps ---------- */
.steps-band{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);border-radius:44px;
  padding:56px 44px;box-shadow:var(--soft)}
.steps,.switch-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px;position:relative}
.switch-steps{grid-template-columns:repeat(4,1fr)}
.steps::before{content:"";position:absolute;left:9%;right:9%;top:27px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(47,127,208,.34) 0 8px,transparent 8px 16px)}
.step{position:relative;text-align:center}
.step .n{width:56px;height:56px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  position:relative;z-index:2;font-family:var(--disp);font-weight:800;font-size:19px;color:#fff;
  background:var(--grad);box-shadow:0 10px 24px rgba(47,127,208,.28);border:5px solid #fdfeff}
.step h3,.step h4{font-family:var(--disp);font-weight:700;font-size:18.5px;letter-spacing:-.025em;margin:0 0 8px}
.step p{margin:0;font-size:15px;color:var(--ink-2)}
.step .when{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--teal);
  background:var(--mint);border-radius:999px;padding:5px 14px}

/* ---------- pricing ---------- */
.price{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:22px;margin-top:48px;align-items:center}
.pcard{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:32px;
  padding:34px;box-shadow:var(--soft)}
.pcard.best{background:var(--ink);color:#fff;padding:44px 36px}
.pcard.best .note{color:rgba(255,255,255,.75)}
.pcard.best li{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.16)}
.plan{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0}
.pcard.best .plan{color:var(--mint)}
.pbadge{display:inline-block;margin:0 0 14px;font-family:var(--disp);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--mint);
  border-radius:999px;padding:6px 14px}
.amt{font-family:var(--disp);font-size:46px;font-weight:800;letter-spacing:-.045em;margin:12px 0 2px;line-height:1}
.amt s{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--faint);
  margin-bottom:4px;text-decoration-thickness:2px}
.amt small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0;white-space:nowrap}
.pcard.best .amt small{color:rgba(255,255,255,.7)}
.pcard.best .amt s{color:rgba(255,255,255,.5)}
.pcard:not(.best) .amt{font-size:40px}
.note{font-size:15px;color:var(--ink-2);margin:0}
.plist{list-style:none;padding:0;margin:20px 0 26px;font-size:15px;color:var(--ink-2)}
.plist li{padding:9px 0 9px 26px;position:relative;border-top:1px solid var(--line)}
.plist li::before{content:"\2713";position:absolute;left:0;color:var(--teal)}
.pcard.best .plist li::before{color:var(--mint)}
.pextra{max-width:900px;margin:26px auto 0;font-size:15px;color:var(--ink-2);text-align:center;line-height:1.75}
.pextra strong{font-family:var(--disp);font-weight:700;color:var(--ink)}
.pextra strong:not(:first-child){margin-left:8px}
.pextra span{color:var(--muted)}

/* ---------- enquiry form ---------- */
.enquiry{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;margin-top:64px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:44px;
  padding:48px 44px;box-shadow:var(--soft)}
.enquiry h3{font-size:clamp(22px,2.4vw,30px);margin-bottom:14px}
.enquiry p{color:var(--ink-2);font-size:15.5px;margin:0 0 12px}
.enquiry-alt a{color:var(--teal);font-weight:600}
.enquiry-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
.enquiry-form label{display:block;font-size:0}
.enquiry-form .wide{grid-column:1/-1}
.enquiry-form .cap{display:block;font-family:var(--disp);font-size:12.5px;font-weight:600;
  color:var(--ink-2);margin-bottom:7px}
.enquiry-form .req{color:var(--rx);margin-left:3px}
.enquiry-form input,.enquiry-form select,.enquiry-form textarea{
  width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-radius:16px;padding:12px 16px;outline:0;transition:.16s}
.enquiry-form textarea{border-radius:20px;resize:vertical}
.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 4px rgba(21,164,140,.12)}
.enquiry-send{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.enquiry-fine{font-size:13px;color:var(--muted)}
.enquiry-fine a{color:var(--teal);font-weight:600}
.hp{position:absolute;left:-9999px}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:44px auto 0}
details{background:rgba(255,255,255,.7);border-radius:22px;padding:20px 26px;margin-bottom:12px;
  border:1px solid rgba(255,255,255,.9)}
summary{cursor:pointer;font-family:var(--disp);font-weight:600;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;gap:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"\2193";color:var(--teal);transition:.2s}
details[open] summary::after{transform:rotate(180deg)}
details p{color:var(--ink-2);margin:12px 0 0;font-size:15.5px}
details p a{color:var(--teal);font-weight:600}
.pm{display:none}

/* ---------- closing band ---------- */
.close{padding:20px 0 110px}
.close-box,.cta-band{border-radius:44px;background:linear-gradient(125deg,var(--teal),var(--blue) 65%,var(--lilac-ink));
  padding:74px 40px;text-align:center;color:#fff;box-shadow:0 40px 90px rgba(47,127,208,.3)}
.close-box h2,.cta-band h2{font-size:clamp(30px,4.2vw,54px);max-width:16ch;margin:0 auto}
.close-box p,.cta-band p{color:rgba(255,255,255,.9);max-width:50ch;margin:18px auto 28px;font-size:17px}
.close-box .cta-row,.cta-band .cta-row{justify-content:center}

/* ================================================================
   BLOG INDEX
   ================================================================ */
.top{padding:56px 0 8px;position:relative}
.top .wrap{position:relative;z-index:2}
.top .head{max-width:700px}
.top .head h1{font-size:clamp(34px,4.8vw,58px)}
.top .head h1 em{font-style:normal;color:var(--teal)}
.top .head p{margin-top:16px;font-size:17.5px}

.jump{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.jump a{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);border-radius:999px;
  padding:9px 18px;font-size:14.5px;color:var(--ink-2);box-shadow:0 6px 18px rgba(26,39,64,.05);transition:.16s}
.jump a:hover{background:#fff;color:var(--ink);transform:translateY(-2px);text-decoration:none}
.jump a b{font-family:var(--disp);font-weight:600;color:var(--faint);margin-left:7px;font-size:13px}

.feature-post{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;
  background:linear-gradient(120deg,var(--mint),var(--lilac));border-radius:44px;padding:44px;margin-top:46px}
.feature-post:hover{text-decoration:none}
.feature-post .chip{position:static;animation:none;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.8);border-radius:999px;padding:6px 15px;font-size:12.5px;
  color:var(--ink-2);margin-bottom:16px;box-shadow:none}
.feature-post .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
.feature-post h2{font-size:clamp(26px,3.2vw,40px)}
.feature-post p{color:var(--ink-2);font-size:16.5px;margin:16px 0 0}
.feature-post .art{border-radius:var(--r);background:#fff;padding:14px;box-shadow:var(--soft)}
.feature-post .art img{width:100%;display:block;border-radius:20px}
.feature-post .read{display:inline-block;margin-top:24px;font-family:var(--disp);font-weight:600;
  font-size:15px;color:var(--teal)}
.feature-post .read::after{content:" \2192"}

section.cat{padding:62px 0 0}
.field{border-radius:44px;padding:46px 40px}
.field.mint{background:var(--mint)}
.field.sky{background:var(--sky)}
.field.lilac{background:var(--lilac)}
.field.sand{background:var(--sand)}
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
.cat-head h2{font-size:clamp(24px,2.8vw,34px)}
.cat-head p{margin:10px 0 0;color:var(--ink-2);font-size:16px;max-width:56ch}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.post{background:rgba(255,255,255,.9);border-radius:26px;padding:26px 24px 24px;box-shadow:var(--soft);
  display:flex;flex-direction:column;transition:.18s}
.post:hover{transform:translateY(-4px);background:#fff;text-decoration:none}
.meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.meta .t{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);background:rgba(21,164,140,.1);border-radius:999px;padding:4px 11px}
.post h3{font-size:19px;letter-spacing:-.03em;line-height:1.24}
.post p{margin:11px 0 0;font-size:14.8px;color:var(--ink-2);line-height:1.55}
.post .read{margin-top:auto;padding-top:18px;font-family:var(--disp);font-weight:600;font-size:14px;color:var(--teal)}
.post .read::after{content:" \2192"}

/* ================================================================
   ARTICLE
   ================================================================ */
/* reading progress — width is set by app.js */
.prog{position:fixed;left:0;top:0;height:3px;width:0;z-index:90;background:var(--grad);
  border-radius:0 3px 3px 0;transition:width .1s linear}

.backlink{display:inline-block;font-size:14.5px;color:var(--teal);font-weight:600;margin-bottom:20px}
.backlink:hover{color:var(--ink);text-decoration:none}
.hfield{background:linear-gradient(120deg,var(--lilac),var(--mint));border-radius:44px;padding:52px 48px}
.hfield.legal{background:linear-gradient(150deg,var(--mint),#fff 58%,var(--sky));
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--soft)}
.crumb{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);margin-bottom:18px;flex-wrap:wrap}
.crumb .t{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);background:rgba(255,255,255,.8);border-radius:999px;padding:5px 13px}
.hfield h1{font-size:clamp(30px,4.4vw,54px);max-width:20ch}
.dek{font-size:18.5px;color:var(--ink-2);max-width:60ch;margin:20px 0 0}
.hfield .also{margin:22px 0 0;font-size:15.5px;color:var(--ink-2);max-width:64ch}
.hfield .also a{color:var(--teal);font-weight:600}
.byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.byline .n{font-family:var(--disp);font-weight:600;font-size:14.5px}
.byline .r{font-size:13px;color:var(--muted)}
.byline .share{margin-left:auto;display:flex;gap:8px}
.byline .share a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);
  display:grid;place-items:center;font-size:14px;color:var(--ink-2);
  box-shadow:0 6px 16px rgba(26,39,64,.07);transition:.16s}
.byline .share a:hover{transform:translateY(-2px);color:var(--teal);text-decoration:none}

/* body + contents rail */
.body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:54px;padding:56px 0 0;align-items:start}
.toc{position:sticky;top:100px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  border-radius:26px;padding:24px 22px;box-shadow:0 8px 24px rgba(26,39,64,.05)}
.toc h5{font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.toc a{display:block;padding:7px 0 7px 12px;font-size:14.5px;color:var(--ink-2);line-height:1.35;
  border-left:2px solid transparent;margin-left:-12px;transition:.16s}
.toc a:hover{color:var(--ink);text-decoration:none}
.toc a.on{color:var(--teal);border-left-color:var(--teal);font-weight:600}
.toc .mins{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* prose — also what the legal pages and every article body use */
.prose{max-width:68ch}
.prose p{color:var(--ink-2);margin:0 0 20px;font-size:17px}
.prose p.lead{font-size:19.5px;color:var(--ink);line-height:1.6}
.prose h2{font-size:clamp(24px,2.6vw,31px);margin:44px 0 14px;scroll-margin-top:100px}
.prose h3{font-size:20px;margin:30px 0 10px}
.prose strong{color:var(--ink);font-weight:600}
.prose em{color:var(--ink)}
.prose a:not(.btn){color:var(--teal);font-weight:600;box-shadow:inset 0 -1px 0 rgba(21,164,140,.35)}
.prose a:not(.btn):hover{background:var(--mint);text-decoration:none}
.prose ul,.prose ol{margin:0 0 22px;padding:0;list-style:none;counter-reset:n}
.prose li{position:relative;padding:8px 0 8px 32px;color:var(--ink-2);font-size:16.5px}
.prose ul li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:12px;border-radius:50%;
  background:var(--mint);border:3px solid var(--teal)}
.prose ol li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:9px;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:12px;color:#fff;background:var(--grad)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px}
.prose th,.prose td{padding:12px 14px;text-align:left;border-top:1px solid var(--line);color:var(--ink-2)}
.prose th{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);border-top:0}
.prose figure{margin:32px 0}
.prose figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:10px}
.prose blockquote{margin:0 0 22px;padding-left:20px;border-left:3px solid var(--teal);color:var(--ink-2)}
.updated{font-size:14.5px;color:var(--muted)}

/* pastel asides inside an article */
.pull{background:var(--sky);border-radius:var(--r);padding:30px 32px;margin:32px 0}
.pull p{margin:0;font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.03em;
  line-height:1.32;color:var(--ink)}
.pull span{display:block;margin-top:10px;font-family:var(--body);font-weight:400;font-size:15px;
  color:var(--ink-2);letter-spacing:0}
/* scoped to .prose: .note is also the caption under a pricing card, and an
   unscoped rule turns that caption into a sand-coloured box */
.prose .note{background:var(--sand);border-radius:26px;padding:24px 28px;margin:30px 0}
.prose .note b{display:block;font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.prose .note p{margin:0;font-size:15.8px}

/* the in-article call to action — .cta-box is what the nineteen articles use */
.ctabox,.cta-box{margin:44px 0 8px;border-radius:var(--r);padding:38px 34px;text-align:center;color:#fff;
  background:linear-gradient(125deg,var(--teal),var(--blue) 65%,var(--lilac-ink));
  box-shadow:0 26px 60px rgba(47,127,208,.26)}
.ctabox h3,.cta-box h3{font-size:25px;max-width:22ch;margin:0 auto}
.ctabox p,.cta-box p{color:rgba(255,255,255,.92);margin:0 auto 22px;max-width:46ch;font-size:16px}
.cta-box p strong{color:#fff}
.cta-box li::before{background:rgba(255,255,255,.3);border-color:#fff}
.cta-box a:not(.btn){color:#fff}
/* the nineteen articles all reach for .btn-primary in here, which is ink on a
   gradient — invert it rather than editing every article */
.ctabox .btn-primary,.cta-box .btn-primary,.close-box .btn-primary,.cta-band .btn-primary{
  background:#fff;color:var(--ink);box-shadow:var(--soft)}

/* related */
.rel{padding:72px 0 0}
.rel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.rel-head h2{font-size:clamp(24px,2.8vw,34px)}
.rel .posts{margin-top:28px}

/* ================================================================
   COMPARE — the matrix and its furniture are generated from _data/,
   so these class names are fixed. Dressed in Bloom values here.
   ================================================================ */
.cmp-stamp{font-size:13px;color:var(--muted);margin-top:14px}
.cmp-jump{position:sticky;top:78px;z-index:40;padding:10px 0}
.cmp-jump-in{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);
  border-radius:999px;padding:8px 14px;box-shadow:var(--soft);max-width:var(--maxw)}
.cmp-jump-l{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-right:6px}
.cmp-jump a{font-size:14px;color:var(--ink-2);padding:6px 13px;border-radius:999px}
.cmp-jump a:hover{background:var(--mint);color:var(--ink);text-decoration:none}

.stats{padding:36px 0 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:26px;
  padding:26px 24px;box-shadow:0 8px 24px rgba(26,39,64,.05);text-align:center}
.stat .big{font-family:var(--disp);font-size:38px;font-weight:800;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(120deg,var(--teal),var(--blue));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.stat .lbl{margin-top:10px;font-size:14.5px;color:var(--ink-2)}

.price-reveal{text-align:center;max-width:760px;margin:0 auto}
.big-zero{font-family:var(--disp);font-size:clamp(56px,9vw,110px);font-weight:800;letter-spacing:-.05em;
  line-height:1;background:linear-gradient(120deg,var(--teal),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.price-reveal h2{font-size:clamp(24px,3vw,34px);margin-top:6px}
.price-reveal p{color:var(--ink-2);margin-top:16px;font-size:16.5px}
.price-reveal a{color:var(--teal);font-weight:600}
.price-fine{font-size:14px;color:var(--muted);margin-top:12px}

.cmp-wide{max-width:calc(var(--maxw) + 120px);margin:0 auto;padding:0 26px}
.cmp-ctl{display:grid;gap:12px;margin:0 0 20px;background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);border-radius:26px;padding:18px 20px;box-shadow:var(--soft)}
.cmp-ctl-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cmp-ctl-l{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.cmp-togs{display:flex;gap:7px;flex-wrap:wrap}
.cmp-tog{font-family:var(--body);font-size:13px;font-weight:500;color:var(--muted);
  background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;cursor:pointer;transition:.14s}
.cmp-tog.is-on{color:var(--ink);background:var(--mint);border-color:rgba(21,164,140,.3);font-weight:600}
.cmp-ctl-btn{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--teal);background:#fff;
  border:1px solid rgba(21,164,140,.3);border-radius:999px;padding:7px 15px;cursor:pointer}
.cmp-ctl-btn:hover{background:var(--mint)}
.cmp-ctl-note{font-size:13px;color:var(--muted)}

.compare{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:var(--r);
  box-shadow:var(--soft);padding:10px 12px;overflow-x:auto}
.compare table{width:100%;border-collapse:collapse;min-width:640px}
.compare.cmp-matrix table{min-width:1100px}
.compare th,.compare td{padding:13px 15px;text-align:left;font-size:14.5px;color:var(--ink-2);vertical-align:top}
.compare td.center,.compare th.center{text-align:center}
.compare thead th{font-family:var(--disp);font-size:12.5px;font-weight:600;color:var(--ink);
  padding-top:18px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.compare thead th small{display:block;font-family:var(--body);font-size:11.5px;font-weight:400;
  color:var(--muted);margin-top:4px;letter-spacing:0}
.compare thead th a{color:var(--ink)}
.compare thead th a:hover{color:var(--teal);text-decoration:none}
.compare tbody tr{border-top:1px solid var(--line)}
.compare td.feat,.compare th.feat{font-weight:600;color:var(--ink);min-width:200px}
.compare td.feat small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:3px}
.compare .us,.compare th.us{background:var(--mint);color:var(--ink)}
.compare thead th.us{color:var(--teal)}
.compare tr.grp td{background:rgba(255,255,255,.5);padding-top:22px;padding-bottom:10px;border-top:0}
.grp-l{display:block;font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal)}
.grp-b{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}
.cmp-rehead td{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);padding-top:6px;padding-bottom:6px;border-top:0}
.compare td.yes{color:var(--pos);font-weight:600}
.compare td.no{color:var(--muted)}
.compare td.cmp-unknown{color:var(--faint);font-style:italic}
.cmp-legend{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:22px;
  font-size:13.5px;color:var(--muted)}
.cmp-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.k-yes{background:var(--pos)}
.k-no{background:var(--faint)}
.k-unk{background:#fff;border:2px solid var(--faint)}

.cmp-honest{max-width:900px;margin:40px auto 0;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r);box-shadow:var(--soft);padding:8px 26px}
.cmp-honest-row{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:18px 0;border-top:1px solid var(--line)}
.cmp-honest-row:first-child{border-top:0}
.cmp-honest-p{font-family:var(--disp);font-weight:700;font-size:15.5px;color:var(--ink)}
.cmp-honest-p:hover{color:var(--teal);text-decoration:none}
.cmp-honest-row p{margin:0;font-size:15px;color:var(--ink-2)}

/* the screenshot-beside-copy blocks, shared with features.html */
.feature{margin-top:76px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.reverse .feature-copy{order:2}
.feature-copy h2{font-size:clamp(24px,2.8vw,34px);margin-bottom:14px}
.feature-copy .desc{color:var(--ink-2);font-size:16.5px}
.bullets{list-style:none;padding:0;margin:22px 0 0}
.bullets li{padding:9px 0 9px 30px;position:relative;color:var(--ink-2);font-size:15.5px}
.bullets li::before{content:"";position:absolute;left:0;top:17px;width:14px;height:14px;border-radius:50%;
  background:var(--mint);border:3px solid var(--teal)}
.shot{border-radius:var(--r);background:#fff;padding:16px;box-shadow:var(--soft)}
.shot img,.shot video{width:100%;display:block;border-radius:20px}
.shot video{aspect-ratio:16/9;object-fit:cover;background:var(--sky)}
/* the empty case, sized like the clip that will replace it */
.shot .ph{aspect-ratio:16/9;border-radius:20px}
.shot-cap{margin:12px 4px 2px;font-size:13.5px;color:var(--muted);text-align:center}

.cmp-seg{margin-top:44px}
.cmp-seg-head h3{font-size:clamp(20px,2.2vw,26px)}
.cmp-seg-head p{margin:8px 0 0;color:var(--ink-2);font-size:15.5px}
.cmp-seg .grid{margin-top:24px}
.cmp-card-meta{display:block;margin-top:14px;font-size:13px;color:var(--muted)}

.cmp-method{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.cmp-method-c{background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.9);border-radius:24px;
  padding:28px 26px;box-shadow:0 8px 24px rgba(26,39,64,.05)}
.cmp-method-c h3{font-size:18px;margin-bottom:8px}
.cmp-method-c p{margin:0;font-size:15px;color:var(--ink-2)}
.cmp-method-c a{color:var(--teal);font-weight:600}
.cmp-disclaimer{max-width:78ch;margin:0 auto;text-align:center;font-size:13.5px;color:var(--muted)}
.cmp-disclaimer a{color:var(--teal);font-weight:600}

/* the individual head-to-head page */
.cmp-hero{padding:56px 0 0}
.cmp-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
/* two stacked lines, so the pill has to be a rounded card rather than a
   999px lozenge — a pill sized for one line pushes the second one outside it */
.cmp-chip{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);border-radius:22px;
  padding:12px 18px;box-shadow:0 6px 18px rgba(26,39,64,.05)}
.cmp-chip .k{display:block;font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.cmp-chip .v{display:block;font-size:14px;color:var(--ink-2)}
.cmp-chip .v em{font-style:normal;font-weight:600;color:var(--teal)}
.verdict{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.verdict-col{border-radius:var(--r);padding:32px 30px}
.verdict-col{background:var(--sand)}
.verdict-col.is-us{background:var(--mint)}
.verdict-col ul{list-style:none;padding:0;margin:0}
.verdict-col li{position:relative;padding:9px 0 9px 30px;color:var(--ink-2);font-size:15.5px}
.verdict-col li::before{content:"";position:absolute;left:0;top:17px;width:14px;height:14px;
  border-radius:50%;background:#fff;border:3px solid var(--amber)}
.verdict-col.is-us li::before{border-color:var(--teal)}
.verdict-h{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.03em;margin:0 0 14px}
.win-list{list-style:none;padding:0;margin:0}
.win-list li{position:relative;padding:9px 0 9px 30px;color:var(--ink-2);font-size:15.5px}
.win-list li::before{content:"";position:absolute;left:0;top:17px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--teal)}
.win-fallback{margin:0;color:var(--ink-2);font-size:15.5px}


/* ---------- the wide matrix: frozen pair + phone reflow ----------
   Ported from the previous sheet; only the palette changes. A twelve-column row
   is unreadable unless "what the row is" and "our answer to it" stay put while
   the rest scrolls, and on a phone the table has to stop being a table. */
.compare.cmp-matrix{overscroll-behavior-x:contain}
.cmp-matrix th,.cmp-matrix td{padding:14px 16px}
.cmp-matrix th:nth-child(n+3),.cmp-matrix td:nth-child(n+3){min-width:136px}
.cmp-matrix td.feat small{max-width:none}

/* Both frozen cells need an opaque background or the scrolled columns show
   through — the DravyaOS tint keeps its exact colour, laid over a solid. */
.cmp-matrix th:first-child,.cmp-matrix td:first-child{
  position:sticky;left:0;z-index:2;width:250px;min-width:250px;max-width:250px;background:#f4f8fd}
.cmp-matrix th:nth-child(2),.cmp-matrix td:nth-child(2){
  position:sticky;left:250px;z-index:2;width:158px;min-width:158px;
  background:linear-gradient(180deg,rgba(21,164,140,.14),rgba(47,127,208,.09)),#f4f8fd}

/* A rival's column is clipped mid-word wherever the scroll happens to stop, and
   a half-eaten "…ence TSS" against the frozen pair reads as a broken layout
   rather than as more table. Fade the incoming column out at the boundary and
   the same clip reads as "there is more over here". A box-shadow on the cell
   would be the obvious way, but cells in a border-collapse table don't paint
   one — hence the pseudo-element. */
.cmp-matrix th:nth-child(2)::after,.cmp-matrix td:nth-child(2)::after{
  content:"";position:absolute;top:0;bottom:0;left:100%;width:42px;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(26,39,64,.14),rgba(26,39,64,0) 16px),
    linear-gradient(90deg,#f4f8fd 0,#f4f8fd 16px,rgba(244,248,253,0) 42px)}

/* The group banner spans the row, so it opts out of the frozen-column rules —
   but each of its two lines sticks to the left edge on its own, or the label
   slides away and you lose track of which group you are in. */
.cmp-matrix tr.grp td{position:static;width:auto;min-width:0;max-width:none;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.24))}
.cmp-matrix tr.grp .grp-l,.cmp-matrix tr.grp .grp-b{position:sticky;left:0;width:fit-content;max-width:100%}

/* The header repeated at the top of each group. A sticky thead can't work here
   (sticky resolves against the horizontal scroller), and at row 38 of a
   twelve-column table you have no idea which column is which. */
.cmp-matrix tr.cmp-rehead td:first-child{background:#f4f8fd}
.cmp-matrix tr.cmp-rehead td:nth-child(2){color:var(--teal)}

/* The toggles hide cells with the `hidden` attribute, but the phone reflow below
   sets display:block on every row and cell — an author rule, which beats the
   browser's own [hidden] rule. Without this the toggles do nothing on a phone. */
.cmp-matrix tr[hidden],.cmp-matrix th[hidden],.cmp-matrix td[hidden]{display:none}

/* Phone: one card per row. A twelve-column table inside a horizontal scroller
   is unreadable on a 390px screen, and this table is forty-three rows long. */
@media(max-width:700px){
  .compare-deep{overflow:visible;background:transparent;border:0;box-shadow:none;padding:0}
  .compare-deep table,.compare-deep tbody,.compare-deep tr,.compare-deep td{display:block;width:100%}
  .compare-deep thead{display:none}
  /* .compare.cmp-matrix table{min-width:1100px} up top outranks a single-class
     selector, so the reset has to match its specificity or the table stays
     1100px wide behind body{overflow-x:hidden} and the cards run off-screen. */
  .compare-deep table,.compare.cmp-matrix table{min-width:0;background:transparent;box-shadow:none}
  .compare-deep tbody tr{
    background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:24px;
    box-shadow:0 8px 24px rgba(26,39,64,.06);margin-bottom:12px;padding:6px 2px;overflow:hidden}
  .compare-deep tbody td{border:0;padding:10px 18px;text-align:left}
  .compare-deep td.feat{padding-bottom:4px;font-size:15.5px}

  /* label each value with the column it came from */
  .compare-deep td.center{display:flex;align-items:baseline;gap:10px;text-align:left}
  .compare-deep td.center::before{
    content:attr(data-label);flex:0 0 96px;font-family:var(--disp);font-size:10px;font-weight:600;
    text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
  .compare-deep td.center.us::before{color:var(--teal)}

  /* the frozen pair and the column tint make no sense once rows are cards */
  .cmp-matrix th:first-child,.cmp-matrix td:first-child,
  .cmp-matrix th:nth-child(2),.cmp-matrix td:nth-child(2){
    position:static;width:auto;min-width:0;max-width:none;left:auto}
  .cmp-matrix th:nth-child(2)::after,.cmp-matrix td:nth-child(2)::after{content:none}
  .compare-deep td.us{background:var(--mint);border-radius:0;font-weight:600}
  .cmp-matrix th:nth-child(n+3),.cmp-matrix td:nth-child(n+3){min-width:0}

  /* group headers stay full-width banners rather than becoming cards. The
     sticky that keeps the label in view while scrolling sideways has nothing
     left to scroll against here, and clips the first letter — drop it. */
  .cmp-matrix tr.grp .grp-l,.cmp-matrix tr.grp .grp-b{position:static}
  .compare-deep tr.grp{background:none;border:0;box-shadow:none;margin:26px 0 10px;padding:0}
  .compare-deep tr.grp td{padding:0 4px 10px;background:none;border-bottom:1px solid var(--line-2)}
  .compare-deep tr.cmp-rehead{display:none}
}

/* ================================================================
   ENQUIRY CHAT
   Markup is built in app.js, so there is nothing here to rename —
   it reads the alias tokens declared at the top of this file.
   ================================================================ */
.chat-fab{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:flex;align-items:center;gap:9px;
  font:inherit;font-size:14px;font-weight:600;font-family:var(--disp);
  color:#fff;background:var(--grad);border:0;border-radius:999px;
  padding:13px 20px;cursor:pointer;
  box-shadow:0 10px 28px rgba(47,127,208,.32);
  transition:transform .14s ease, box-shadow .14s ease;
}
.chat-fab:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(47,127,208,.4)}
/* Speech bubble: a square with three round corners and one squared-off tail.
   Cheaper than an inline SVG and reads correctly at 17px. */
.chat-fab-i{width:17px;height:17px;flex:none;background:currentColor;border-radius:50% 50% 50% 3px}
body.chat-open .chat-fab{display:none}

.chat-panel{
  position:fixed;right:20px;bottom:20px;z-index:61;
  width:370px;max-width:calc(100vw - 40px);height:540px;max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;overflow:hidden;
  background:#fbfdff;border:1px solid rgba(255,255,255,.9);border-radius:26px;
  box-shadow:0 24px 60px rgba(26,39,64,.22);
}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;background:var(--grad);color:#fff}
.chat-head strong{display:block;font-family:var(--disp);font-size:15px}
.chat-head span{font-size:12px;color:rgba(255,255,255,.82)}
.chat-head-btns{display:flex;align-items:center;gap:10px;flex:none}
.chat-x{font:inherit;font-size:22px;line-height:1;color:#fff;background:none;border:0;
  padding:0 2px;cursor:pointer;opacity:.8}
.chat-x:hover{opacity:1}
.chat-restart{font:inherit;font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
  border-radius:999px;padding:6px 11px;cursor:pointer;opacity:.9;
  transition:background .12s ease, opacity .12s ease}
.chat-restart:hover{background:rgba(255,255,255,.26);opacity:1}
.chat-restart[hidden]{display:none}

.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px}
.chat-msg{max-width:84%;font-size:13.5px;line-height:1.55;padding:10px 14px;border-radius:18px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.chat-msg.bot{align-self:flex-start;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-bottom-left-radius:6px}
.chat-msg.me{align-self:flex-end;color:#fff;background:var(--ink);border-bottom-right-radius:6px}
.chat-chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 4px}
.chat-chip{font:inherit;font-size:12.5px;font-weight:600;color:var(--teal);
  background:#fff;border:1px solid rgba(21,164,140,.4);border-radius:999px;
  padding:7px 13px;cursor:pointer;transition:background .12s,color .12s}
.chat-chip:hover{color:var(--ink);background:var(--mint)}

.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:rgba(255,255,255,.6)}
.chat-input[hidden]{display:none}
.chat-input input{flex:1;min-width:0;font:inherit;font-family:var(--body);font-size:14px;color:var(--ink);
  background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:10px 16px;outline:0}
.chat-input input:focus{border-color:var(--teal)}
.chat-input button{flex:none;width:42px;font-size:17px;color:#fff;background:var(--grad);
  border:0;border-radius:999px;cursor:pointer}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1100px){
  .worries,.price,.cmp-method{grid-template-columns:1fr 1fr}
  .price{grid-template-columns:1fr}
  .figs,.stats-grid,.kit,.grid,.posts,.switch-steps{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr 1fr}
  .vstage{max-width:none}
  .chip.one{left:-14px}.chip.two{right:-16px}.chip.three{left:8px}
  .phone{width:152px;right:-14px;bottom:-42px}
  .body{grid-template-columns:1fr;gap:0}
  .toc{position:static;margin-bottom:34px}
  .toc a{display:inline-block;border-left:0;padding:6px 14px;margin:0 6px 6px 0;
    border-radius:999px;background:rgba(255,255,255,.7)}
  .toc a.on{background:var(--mint);border-left:0}
  .prose{max-width:none}
  .enquiry{grid-template-columns:1fr;gap:28px}
}
@media(max-width:960px){
  .nav .links{display:none}
  /* with the link bar gone the CTA has nothing pushing it right, so it takes
     over the job and the hamburger sits beside it rather than across a gap */
  .nav .nav-cta{margin-left:auto}
  .mnav{display:block}
  .show,.split,.worries,.quotes,.verdict{grid-template-columns:1fr}
  .show.flip .txt,.split.reverse .feature-copy{order:0}
  .chip{display:none}
  section.blk,.section{padding:clamp(56px,9vw,96px) 0}
  .show,.feature{margin-top:52px}
  .close-box,.cta-band{border-radius:32px;padding:clamp(44px,8vw,74px) clamp(20px,5vw,40px)}
  .kit,.grid,.posts,.switch-steps,.cmp-method{grid-template-columns:1fr}
  .trust{margin-top:56px}
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before{display:none}
  .steps-band{padding:40px 24px;border-radius:32px}
  .enquiry{padding:32px 24px;border-radius:32px}
  .enquiry-form{grid-template-columns:1fr}
  .feature-post{grid-template-columns:1fr;padding:32px;border-radius:32px;gap:28px}
  .feature-post .art{order:-1}
  .field{padding:34px 22px;border-radius:32px}
  .hfield{padding:34px 24px;border-radius:32px}
  .cmp-honest-row{grid-template-columns:1fr;gap:6px}
  .cmp-jump{position:static}
  .fgrid{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:640px){
  .nav{padding:8px 8px 8px 16px}
  .hero{padding:44px 0 26px}
  .vstage{margin-top:36px}
  .play{width:56px;height:56px;font-size:17px;top:auto;left:auto;right:16px;bottom:14px;transform:none}
  .play:hover{transform:scale(1.06)}
  .vframe > .ph{aspect-ratio:4/3}
  .vframe .ph span{font-size:12.5px;max-width:32ch}
  .vframe{border-radius:26px;padding:10px}
  .vframe img,.vframe video,.vframe > .ph{border-radius:18px}
  .phone{display:none}
  .vbar{left:14px;bottom:14px;gap:6px}
  .vbar span{font-size:11.5px;padding:6px 12px}
  .cta-row .btn{flex:1 1 100%}
  .nav .btn{flex:0 0 auto}
  .trust{gap:8px}.trust span{font-size:13px;padding:8px 14px}
  .worry{padding:28px 22px;border-radius:24px}
  .pcard{padding:26px 22px;border-radius:26px}
  .pcard.best{padding:32px 24px}
  details{padding:16px 20px;border-radius:18px}
  .figs,.stats-grid{grid-template-columns:1fr 1fr;gap:12px}
  .fig,.stat{padding:20px 18px;border-radius:22px}
  .fig b,.stat .big{font-size:30px}
  .top{padding:34px 0 0}
  .jump{gap:8px}.jump a{font-size:13px;padding:8px 14px}
  .cat-head{align-items:flex-start}
  .post{padding:22px 20px}
  .pull{padding:24px 22px}.pull p{font-size:18.5px}
  .ctabox,.cta-box{padding:30px 22px;border-radius:26px}
  .byline .share{margin-left:0}
  .cmp-legend{justify-content:flex-start;text-align:left;gap:10px}
  /* Brand block full width, the four link columns two-up -- one 18-link
     column ran the footer to 1360px of scrolling on a 390px phone. */
  .fgrid{grid-template-columns:1fr 1fr;gap:22px 20px;padding-bottom:26px}
  .fgrid > :first-child{grid-column:1/-1}
  .fgrid p{max-width:none}
}
/* Below ~385px the header row (brand + CTA + menu) is wider than the phone.
   Tighten the gaps and the CTA's side padding rather than dropping the CTA:
   hiding the only button in the header to make the header fit is not fixing it. */
@media(max-width:400px){
  .nav{gap:10px;padding:8px 8px 8px 12px}
  .nav .nav-cta{padding-left:14px;padding-right:14px}
  .brand{font-size:17px;gap:8px}
  .brand .mark{width:27px;height:27px}
}
@media(max-width:480px){
  .chat-panel{right:0;bottom:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    border-radius:0;border:0}
  .chat-fab{right:14px;bottom:14px;padding:12px 17px;font-size:13.5px}
}