/* ===========================================================================
   PULSE — ONE STYLESHEET FOR EVERY PAGE

   Every Pulse page links this file. Do not fork it per page. The reason the
   site read as inconsistent was three pages each carrying their own copy of
   the tokens, which drift the moment one is edited.

   TYPE — Cormorant Garamond (display) / Fraunces (body) / Inter (labels).
   These are the same three families Callie uses. Typefaces are not anyone's
   property and this is the pairing the owner wants; because the families now
   match, their px sizes are directly portable and are used verbatim rather
   than cap-height converted.

   NO ITALIC FOR EMPHASIS. An earlier version set headline emphasis in true
   italic, which switches mid-sentence and reads as a coding tic rather than a
   typographic decision. `em` is deliberately neutralised below — if a word
   needs emphasis, rewrite the sentence.

   METRICS, measured off b2b.getcallie.care:
     container 1152 · section padding 112 · nav 81
     h1 68/1.05/-.022em/700 · h2 64/1.04/-.02em/500 · h3 30/1.18/-.012em/500
     body 16/1.55 · paragraph 20/31 · eyebrow Inter 12/.22em/500 · radius 4

   COLOUR — light default, dark from the MarketFramework palette. Dark is warm
   (#171614 bg, #E5E3DF text), which is why it sits under a bone-and-clay
   system instead of fighting it. Every pair is measured:
     light: ink 16.6:1 · muted 5.5:1 · clay 4.93:1
     dark:  text 14.1:1 · muted 6.1:1 · accent #E09A78 7.8:1
   Light-mode clay (#A9553B) is only 3.5:1 on dark, so dark swaps the accent.
   Measure any new pair before adding it.
   =========================================================================== */

:root{
  --paper:#FBF9F5; --band:#F3EFE7; --deep:#22352C; --ink:#191A17;
  --muted:#6A655C; --clay:#A9553B; --clay-l:#E09A78;
  --rule:#E4DFD6; --rule-d:rgba(251,249,245,.15);
  --lede:#4A463E; --btn-fg:#fff; --ghost-bd:#CFC8BB;
  --hdr:rgba(251,249,245,.97); --grain:.055;
  --art-bg:#F3EFE7; --art-floor:#E7E0D3; --art-fill:#FBF9F5; --art-fill2:#EBE3D6;
  --art-line:#C9BFAE; --art-ink:#8E8577; --art-accent:#A9553B;

  /* Measured off getcallie.care — their MAIN site, not the b2b one. The two use different
     systems and the b2b page was the wrong reference: it is Cormorant + Fraunces + Inter,
     while the main site is Fraunces for display and NEWSREADER for everything you read,
     including the nav and the wordmark. Serif chrome and ~20px body is most of why theirs
     feels warm where a 14px sans nav feels like an app. */
  --display:"Fraunces",ui-serif,Georgia,serif;
  --text:"Newsreader",ui-serif,Georgia,serif;
  --ui:"Inter",system-ui,-apple-system,sans-serif;   /* small tracked caps ONLY */
  --gut:clamp(18px,3.6vw,48px); --maxw:1200px;
}
:root.dark{
  --paper:#171614; --band:#211F1C; --deep:#23312A; --ink:#E5E3DF;
  --muted:#9A9590; --clay:#E09A78; --clay-l:#E09A78;
  --rule:#2E2A27; --rule-d:rgba(229,227,223,.16);
  --lede:#BDB8B2; --btn-fg:#171614; --ghost-bd:#3A3632;
  --hdr:rgba(23,22,20,.97); --grain:.030;
  --art-bg:#211F1C; --art-floor:#191715; --art-fill:#2A2724; --art-fill2:#242220;
  --art-line:#4A443E; --art-ink:#8A837B; --art-accent:#E09A78;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body,main{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:20px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Paper is never one flat value; a flat fill reads as an unpainted div. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{padding:112px 0}
/* The opening section sets up the page; it is not a peer of the sections below it. */
main > section:first-of-type{padding:72px 0 64px}
main > section:first-of-type:has(.hero){
  padding:56px 0;
  min-height:calc(100svh - 82px);
  display:flex;align-items:center;
}
main > section:first-of-type:has(.hero) > .wrap{width:100%}
@supports not (height:100svh){
  main > section:first-of-type:has(.hero){min-height:calc(100vh - 82px)}
}
.band{background:var(--band)}
hr.rule{border:0;border-top:1px solid var(--rule);margin:0}

h1,h2,h3{font-family:var(--display);margin:0;font-optical-sizing:auto}
h1{font-size:clamp(30px,3.2vw,46px);font-weight:500;line-height:1.05;letter-spacing:-.025em}
h2{font-size:clamp(28px,3.2vw,44px);font-weight:500;line-height:1.11;letter-spacing:-.02em}
h3{font-size:clamp(20px,2.1vw,28px);font-weight:500;line-height:1.33;letter-spacing:-.02em}
/* Emphasis is NOT italic. If a word must stand out, rewrite the sentence. */
em,i{font-style:normal}
p{margin:0 0 1.05em}
/* A heading and the prose under it were touching wherever the body was not a .lede. */
h2 + p,h2 + div,h1 + p,h3 + p{margin-top:22px}
.lede{font-size:22px;line-height:1.45;color:var(--lede);max-width:58ch;margin-top:24px}
.small{font-size:15px;color:var(--muted);line-height:1.6}
.eyebrow{font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.22em;
  line-height:18.6px;text-transform:uppercase;color:var(--clay);margin:0 0 20px}

.btn{display:inline-block;font-family:var(--text);font-size:16px;font-weight:500;
  padding:16px 32px;border-radius:4px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.btn-primary{background:var(--ink);color:var(--btn-fg)}
.btn-primary:hover{background:var(--clay);color:#fff}
.btn-ghost{border-color:var(--ghost-bd);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;align-items:center}

header{border-bottom:1px solid var(--rule);background:var(--hdr);
  backdrop-filter:saturate(1.15) blur(8px);position:sticky;top:0;z-index:20}
nav{display:flex;align-items:center;justify-content:space-between;height:81px;gap:24px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand-ic{width:26px;height:26px;display:block;flex:none}
.brand-word{font-family:var(--display);font-size:22.5px;font-weight:600;
  letter-spacing:-.025em;line-height:1}
.brand-dot{color:var(--clay)}
.navlinks{display:flex;gap:30px;font-family:var(--text);font-size:18px}
.navlinks a{color:var(--ink);text-decoration:none;opacity:.72}
.navlinks a:hover{opacity:1}
.navend{display:flex;align-items:center;gap:10px}

.theme-t{background:none;border:1px solid var(--ghost-bd);border-radius:4px;cursor:pointer;
  width:38px;height:38px;display:grid;place-items:center;color:var(--ink);padding:0;flex:none;
  transition:border-color .18s ease}
.theme-t:hover{border-color:var(--ink)}
.theme-t svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}


/* ---- ILLUSTRATION PALETTE ----
   Deliberately WIDER than the brand palette. The brand is bone + one clay, which is right for
   type and chrome and is exactly why the page read as austere: with no colour anywhere, a page
   is just ruled boxes. Illustration is where colour lives.

   These stay the SAME in dark mode on purpose. Desaturating art for dark is what makes a themed
   site look switched rather than designed — the drawings keep their colour, only the surface
   under them changes. Every value is picked to sit on both #FBF9F5 and #211F1C. */
:root{
  --i-line:#4A3F35; --i-cream:#F7EEDF; --i-yellow:#E9B44C; --i-yellow-d:#D19A32;
  --i-sage:#9BB08A;  --i-sage-d:#7A9068; --i-teal:#6E9E9B; --i-peach:#F0B48C;
  --i-clay:#C4694A;  --i-rose:#D97A6C;   --i-brown:#9A7355; --i-sky:#A8C4CC;
}
:root.dark{ --i-line:#D8CFC2; --i-cream:#2E2A25; }
.art{background:var(--art-bg)}
.art.ico{width:78px;height:78px;border:0;background:none;margin:0 0 16px}
.art .ln{stroke:var(--i-line);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---- THEME SWAP: circular reveal ----
   Ported from marketframework-frontend (src/app/global.css). The new theme's snapshot is
   clipped to a circle centred on the click and grown past the far corner, so the theme appears
   to wipe out from the button rather than blink.

   The UA's default root cross-fade is neutralised first — leaving it on makes the whole page
   look like it fades out and back in, which is the thing that reads as a cheap toggle.

   Skipped entirely under prefers-reduced-motion and on browsers without startViewTransition;
   both fall back to an instant swap, which is correct, not degraded. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-vt::view-transition-old(root){z-index:1}
html.theme-vt::view-transition-new(root){z-index:9999}

/* Their convention, and the better one: show the theme you will GET, not the one you are in. */
.theme-t .sun{display:none}
.theme-t .moon{display:block}
:root.dark .theme-t .sun{display:block}
:root.dark .theme-t .moon{display:none}

/* ---- hero ----
   The reference hero has NO BOX. The image bleeds off the right edge of the viewport and fades
   into the paper on the left through a gradient mask, so there is no seam between picture and
   page. A bordered rectangle sitting inside the content column is a picture in an article —
   which is exactly what made this read as a blog.

   The right column therefore escapes .wrap: it is pulled to the viewport edge with a negative
   margin sized from the gutter, and masked so its own background dissolves into --paper. */
.hero{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(24px,4vw,56px);
  align-items:center;position:relative}
.hero .art-wrap{min-width:0;position:relative;
  margin-right:calc(-1 * (var(--gut) + max(0px, (100vw - var(--maxw)) / 2)));
}
.hero-art{width:100%;height:auto;display:block;border:0;background:none;
  max-height:min(64svh,540px);object-fit:contain;object-position:left center;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 100%)}
@media(max-width:900px){
  /* Text FIRST on a phone. Art-first pushed the headline and the buttons off the first screen,
     so the thing a visitor landed for was the last thing they saw. */
  .hero{grid-template-columns:1fr;gap:28px}
  .hero .art-wrap{order:2;margin-right:calc(-1 * var(--gut));margin-left:calc(-1 * var(--gut))}
  .hero-art{max-height:38svh}
  body{font-size:18px}
  .lede{font-size:19px;line-height:1.5}
  .btn{width:100%;text-align:center}      /* full-width taps, no 38px targets */
  .cta-row{gap:10px}
  .hero-art{-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 60%,transparent 100%)}
}

/* ---- cards ---- */
.cells{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.cells.two{grid-template-columns:repeat(2,1fr)}
.cell{border:1px solid var(--rule);padding:30px 28px 32px;background:var(--paper)}
.cell h3{margin-bottom:10px}
.cell p{margin:0;font-size:17px;color:var(--muted);line-height:1.6}
.step{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--clay);display:block;margin-bottom:16px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.stat{border:1px solid var(--rule);padding:32px 28px}
.stat .n{font-family:var(--display);font-size:clamp(40px,4.6vw,60px);font-weight:500;
  line-height:1.02;letter-spacing:-.025em}
.stat p{margin:12px 0 0;font-size:16px;color:var(--muted);line-height:1.55}
.stat .src{font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:14px;display:block;opacity:.75}

/* ---- numbered rail (company page signature) ---- */
.rail{display:grid;grid-template-columns:180px 1fr;gap:clamp(24px,5vw,72px);align-items:start}
.rail-n{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);position:sticky;top:120px;padding-top:8px;
  border-top:2px solid var(--ink)}
.rail-n b{display:block;font-family:var(--display);font-size:38px;font-weight:500;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:2px}

/* ---- product cards ---- */
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.prod{border:1px solid var(--rule);padding:30px 28px 30px;display:flex;flex-direction:column;
  background:var(--paper);text-decoration:none;color:inherit;transition:border-color .18s ease}
a.prod:hover{border-color:var(--ink)}
.prod-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.status{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.status.live{background:rgba(34,53,44,.10);color:var(--deep)}
.status.soon{background:rgba(106,101,92,.11);color:var(--muted)}
:root.dark .status.live{background:rgba(159,192,169,.14);color:#9FC0A9}
:root.dark .status.soon{background:rgba(229,227,223,.09)}
.prod h3{margin-bottom:10px}
.prod p{font-size:17px;color:var(--muted);line-height:1.6;margin:0 0 18px}
.prod ul{margin:0 0 20px;padding:0;list-style:none;font-size:15px;color:var(--muted)}
.prod li{padding:7px 0;border-top:1px solid var(--rule)}
.prod .go{margin-top:auto;font-family:var(--ui);font-size:13px;font-weight:500;color:var(--clay)}
.prod.ghost{background:transparent;border-style:dashed}
.art{display:block;width:100%;height:auto;margin-bottom:22px;border:1px solid var(--rule)}

/* ---- comparison table ---- */
.cmp{width:100%;border-collapse:collapse;margin-top:44px;font-size:16px}
.cmp th,.cmp td{border:1px solid var(--rule);padding:15px 16px;text-align:left}
.cmp thead th{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);background:var(--band)}
.cmp thead th.us{color:var(--clay)}
.cmp td.c{text-align:center;font-size:18px}
.cmp .yes{color:var(--deep)} :root.dark .cmp .yes{color:#9FC0A9}
.cmp .no{color:var(--muted);opacity:.5}
.cmp tbody th{font-weight:400;color:var(--ink)}

/* ---- faq ---- */
.faq{margin-top:44px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font-family:var(--display);
  font-size:23px;font-weight:500;letter-spacing:-.01em;display:flex;justify-content:space-between;
  gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ui);font-size:20px;color:var(--clay);flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0 0 22px;color:var(--muted);max-width:74ch}

/* ---- inverted sections + footer ----
   NOTE: this is .invert, NOT .dark. The theme class lives on <html class="dark">, so a
   section modifier named .dark would match every descendant of the page in dark mode. */
.invert{background:var(--deep);color:#DCE3DB}
.invert h2,.invert h3{color:#F7F5EF}
.invert .eyebrow{color:var(--clay-l)}
.invert p,.invert .lede{color:#BAC5B9}
.invert .btn-primary{background:var(--paper);color:var(--ink)}
.invert .btn-primary:hover{background:var(--clay-l);color:#171614}
.invert .btn-ghost{border-color:var(--rule-d);color:#DCE3DB}
.invert .rail-n{color:#9DAA9C;border-top-color:#DCE3DB}
.invert .rail-n b{color:#F7F5EF}

/* ---- long-form documents (legal, policies) ---- */
.doc{max-width:74ch}
.doc h2{font-size:clamp(28px,3.2vw,44px);font-weight:500;line-height:1.11;letter-spacing:-.02em}
.doc h3{font-size:clamp(20px,2.1vw,28px);font-weight:500;line-height:1.33;letter-spacing:-.02em}
.doc p,.doc li{color:var(--lede);font-size:17px;line-height:1.65}
.doc ul{padding-left:20px}
.doc li{margin:6px 0}
.doc a{color:var(--clay)}
.updated{font-family:var(--ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:8px}

/* ---- contact form ---- */
.cform{margin-top:40px;max-width:64ch}
.cform label{display:block;margin-bottom:20px;font-family:var(--ui);font-size:12px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cform input,.cform textarea{display:block;width:100%;margin-top:9px;padding:14px 15px;
  font-family:var(--text);font-size:17px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:4px;letter-spacing:normal;text-transform:none}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--clay);outline-offset:1px;
  border-color:var(--clay)}
.cform textarea{resize:vertical;line-height:1.55}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fmsg{font-family:var(--ui);font-size:14px;color:var(--muted)}
.fmsg.good{color:var(--deep)} :root.dark .fmsg.good{color:#9FC0A9}
.fmsg.bad{color:var(--clay)}
.fmsg a{color:var(--clay)}
@media(max-width:640px){.frow{grid-template-columns:1fr}}

/* ---- big footer ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 18px;z-index:100;font-family:var(--ui);font-size:14px}
.skip:focus{left:8px;top:8px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;
  padding-bottom:36px}
.foot-brand .foot-mark{display:flex;align-items:center;gap:11px;color:#DCE3DB;font-size:15px}
.foot-brand p{margin:16px 0 0;max-width:34ch;line-height:1.6;color:#93A192}
.foot-grid h4{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#DCE3DB;margin:0 0 16px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:0 0 11px}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--rule-d);padding-top:24px;font-size:12.5px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

footer{background:var(--deep);color:#93A192;font-family:var(--ui);font-size:13.5px;
  border-top:1px solid var(--rule-d);padding:38px 0}
footer a{color:#C6D0C4;text-decoration:none}
footer a:hover{text-decoration:underline}
footer .fr{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer{padding:56px 0 34px}
footer .brand-ic{width:21px;height:21px}

/* ---- entrance ---- */
.rise{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ---- mobile nav ----
   .navlinks was simply hidden below 900px with nothing replacing it, so every page except the
   one you landed on was unreachable on a phone. A checkbox-driven panel needs no JS, so it works
   even if the theme script fails. */
.navtoggle{display:none}
.navburger{display:none;background:none;border:1px solid var(--ghost-bd);border-radius:4px;
  width:38px;height:38px;cursor:pointer;padding:0;place-items:center;color:var(--ink)}
.navburger span,.navburger span::before,.navburger span::after{
  content:"";display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.navburger span::before{top:-5px}.navburger span::after{top:3.5px}

@media(max-width:900px){
  section{padding:72px 0}
  .navburger{display:grid}
  .navlinks{
    display:block;position:fixed;inset:82px 0 auto 0;background:var(--paper);
    border-bottom:1px solid var(--rule);padding:8px var(--gut) 22px;
    transform:translateY(-120%);transition:transform .28s cubic-bezier(.22,.61,.36,1);
    z-index:19;max-height:calc(100svh - 82px);overflow-y:auto}
  .navtoggle:checked ~ .navlinks{transform:none}
  .navlinks a{display:block;padding:15px 0;font-size:20px;opacity:1;
    border-bottom:1px solid var(--rule)}
  @media(prefers-reduced-motion:reduce){.navlinks{transition:none}}
  .cells,.cells.two,.prods,.stats{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr;gap:22px}
  .rail-n{position:static;display:flex;align-items:baseline;gap:12px}
  .rail-n b{margin:0}
  .navlinks{display:none}
  .cmp{display:block;overflow-x:auto}
}