/* RoundWiz marketing site — shared stylesheet.
   Server-rendered multi-page site. Tokens mirror the app's globals.css naming. */

/* Self-hosted so no third party sees a visitor's IP on page load. Both files are
   variable, so one face per family covers every weight the site uses. */
@font-face{font-family:"Geist";src:url("assets/fonts/geist-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("assets/fonts/geist-mono-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#07101C;--paper-2:#0B1726;--paper-3:#102438;
  --ink:#F4F8FC;--ink-2:rgba(244,248,252,0.86);--dim:#9AB0C5;--faint:#7A91A8;
  --rule:rgba(255,255,255,0.10);--rule-2:rgba(255,255,255,0.05);
  --cyan:#1FA8FF;--cyan-dim:#2A86C7;--cyan-soft:rgba(31,168,255,0.10);--on-cyan:#04131F;
  --ok:#3DD68C;--ok-soft:rgba(61,214,140,0.14);--peach:#F0B17D;--amber:#FFB347;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  --gut:20px;--max:1200px;
  /* Four surfaces that were hardcoded until the blog got a light mode. They are
     named for the one place each is used, because that is all they are for. */
  --hdr-bg:rgba(7,16,28,.86);--th-bg:rgba(255,255,255,.03);
  --quote-bg:rgba(255,255,255,.035);--menu-shadow:rgba(0,0,0,.8);
  --btn-glow:rgba(31,168,255,.7);
  --logo-light:block;--logo-dark:none;
}

/* Light mode, and only the blog offers it: the toggle is rendered on /blog/ and
   on posts, so nothing else on the site can reach this block. Every rule in the
   sheet already reads its colours through the tokens above, so redefining the
   tokens is the whole theme and no existing rule needed rewriting.

   Values are not matched to the dark theme's contrast ratios, which would have
   forced --dim to a muddy near-black and drained the blue out of --cyan. They
   are set comfortably above the 4.5:1 AA floor instead, measured on --paper:
   --faint 5.45, --dim 7.36, --cyan 5.67, and 5.99 for white on a cyan button.

   Dark stays the default. Reading prefers-color-scheme here would hand a
   light-preferring visitor a white blog bolted onto a black everything-else,
   which reads as a bug. Swap the two lines in the head script to change that. */
:root[data-theme="light"]{
  --paper:#F6F9FC;--paper-2:#FFFFFF;--paper-3:#E9F1F9;
  --ink:#0A1622;--ink-2:rgba(10,22,34,0.84);--dim:#445465;--faint:#566878;
  --rule:rgba(10,22,34,0.14);--rule-2:rgba(10,22,34,0.07);
  /* --cyan-dim is the blockquote rail and nothing else. It shipped at #4E96C9,
     which managed only 2.81 against the quote panel where the dark theme's rail
     gets 4.53, so quotes were markedly easier to spot while scrolling in dark
     than in light. #1871B2 brings light to 4.54, matching it. Close to the link
     blue in lightness, which is fine for a 2px rule and nothing else uses it. */
  --cyan:#0966AC;--cyan-dim:#1871B2;--cyan-soft:rgba(9,102,172,0.10);--on-cyan:#FFFFFF;
  --ok:#0E7A4B;--ok-soft:rgba(14,122,75,0.14);--peach:#A85B26;--amber:#8A5700;
  /* .07 rather than the .035 this shipped with: on white the header row was
     leaning on its bold weight to separate itself and the fill was barely
     there. This roughly doubles the step off the page without turning the row
     into a grey bar. */
  --hdr-bg:rgba(246,249,252,.88);--th-bg:rgba(10,22,34,.07);
  --quote-bg:rgba(10,22,34,.04);--menu-shadow:rgba(10,22,34,.22);
  --btn-glow:rgba(9,102,172,.35);
  --logo-light:none;--logo-dark:block;
}
*,*::before,*::after{box-sizing:border-box}

/* Type is sized in rem so it follows the reader's own default font size. A px
   scale ignores that setting completely: page zoom still works, but the reader
   who went into their browser settings and asked for bigger text gets nothing,
   and on this audience that is not a rare reader.

   The root is 62.5% so 1rem is 10px and every value below is its old px figure
   with a decimal point in it (14.5px -> 1.45rem), which keeps the scale
   readable. The usual objection to that trick is third-party CSS assuming a
   16px root, and nothing third-party renders on this site.

   body has to restate 16px, because everything without an explicit size
   inherits from it and would otherwise land on the 10px root.

   Line heights are unitless and letter-spacing is in em throughout, so both
   already follow font-size and neither needed touching. Hairlines stay in px:
   a 1px rule should stay one pixel however large the type gets.

   Breakpoints are in em so the layout changes when the type gets too big for
   the column, not only when the window does. Inside a media query em and rem
   both resolve against the browser default and ignore the 62.5% above, so the
   divisor there is 16, not 10. What the five map to at a default setting:

     22.4375em = 359px    39.9375em = 639px    62.5em = 1000px
     29.9375em = 479px    45em      = 720px

   Spacing, padding and radii are deliberately still px. Scaling those too is
   arguable but it moves every page, so it is a separate decision. */
html{scroll-behavior:smooth;font-size:62.5%}
body{margin:0;font-size:1.6rem;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,h4{font-feature-settings:"ss01","cv11";margin:0;letter-spacing:-0.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
a:hover{opacity:.86}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--mono);font-size:1.15rem;font-weight:700;color:var(--cyan);letter-spacing:.16em;text-transform:uppercase}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:1.3rem;font-weight:700;color:var(--ink-2)}
.chip .van{flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-size:1.55rem;font-weight:800;padding:14px 22px;border:none;cursor:pointer;font-family:inherit;letter-spacing:-.01em;min-height:48px}
.btn-primary{background:var(--cyan);color:var(--on-cyan);box-shadow:0 10px 26px -12px var(--btn-glow)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.card{background:var(--paper-2);border-radius:16px;box-shadow:inset 0 0 0 1px var(--rule)}
.sec{padding:72px 0}
.sec-rule{border-top:1px solid var(--rule)}
.h2{font-size:clamp(2.8rem,6vw,4.4rem);font-weight:700;line-height:1.08;letter-spacing:-.03em}
.lede{font-size:1.65rem;line-height:1.65;color:var(--ink-2)}
.dimtext{color:var(--dim)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-2)}
.hdr-in{display:flex;align-items:center;gap:16px;padding:12px var(--gut);justify-content:space-between}
.hdr-in>nav{display:none;gap:26px;font-size:1.45rem;font-weight:600;color:var(--dim)}
.hdr-in>nav a:hover{color:var(--ink);opacity:1}
.hdr-in>nav a[aria-current="page"]{color:var(--ink)}
.hdr-cta{display:flex;align-items:center;gap:8px;flex:none}
.hdr .btn{padding:10px 16px;font-size:1.4rem;min-height:42px}
.logo{height:38px;width:auto}

/* page head (inner pages) */
.phead{padding:44px 0 8px}
.phead h1{font-size:clamp(3.4rem,8.5vw,6rem);font-weight:700;line-height:1.02;letter-spacing:-.035em;margin:18px 0 0}
.phead .sub{margin-top:18px;font-size:1.7rem;line-height:1.6;color:var(--ink-2);max-width:640px}

/* hero */
.hero{padding:36px 0 8px}
.hero h1{font-size:clamp(4rem,10.5vw,7.6rem);font-weight:700;line-height:.98;letter-spacing:-.035em;margin:22px 0 0}
.hero .sub{margin-top:20px;font-size:1.7rem;line-height:1.6;color:var(--ink-2);max-width:620px}
.hero-cta{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.hero-cta .btn{width:100%}
.microcopy{margin-top:14px;font-size:1.35rem;color:var(--faint);line-height:1.55}
.trust{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-family:var(--mono);font-size:1.15rem;font-weight:600;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.trust .sep{width:4px;height:4px;border-radius:999px;background:var(--faint)}

/* phone mock */
.phone{position:relative;width:100%;max-width:290px;margin:34px auto 0;aspect-ratio:9/19.5;border-radius:36px;background:linear-gradient(180deg,var(--paper-3) 0%,var(--paper-2) 60%);box-shadow:inset 0 0 0 1px var(--rule),0 30px 70px -30px rgba(0,0,0,.75);transform:rotate(-1.5deg);overflow:hidden}
.phone-glow{position:absolute;top:-90px;right:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(240,177,125,.35) 0%,rgba(240,177,125,0) 70%);pointer-events:none}
.phone-glow2{position:absolute;bottom:-90px;left:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(31,168,255,.3) 0%,rgba(31,168,255,0) 70%);pointer-events:none}
.phone-shot{display:block;width:100%;height:100%;object-fit:cover;border-radius:28px}
.phone-scr{position:absolute;inset:9px;border-radius:28px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule);overflow:hidden;display:flex;flex-direction:column}
.ph-status{display:flex;justify-content:space-between;padding:12px 18px 0;font-size:1.1rem;font-weight:700;color:var(--dim);font-family:var(--mono)}
.ph-head{padding:14px 16px 10px}
.ph-title{font-size:2.2rem;font-weight:800;letter-spacing:-.03em}
.ph-wx{display:flex;gap:6px;margin-top:10px}
.ph-wx span{flex:1;padding:7px 0;border-radius:9px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--rule-2);text-align:center;font-size:.95rem;font-weight:700;color:var(--dim)}
.ph-rows{padding:4px 12px;display:flex;flex-direction:column;gap:7px}
.ph-row{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:12px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--rule-2)}
.ph-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.ph-tick{width:19px;height:19px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--faint);flex:none}
.ph-row.done .ph-tick{background:var(--ok);box-shadow:none}
.ph-row.done .ph-a{color:var(--dim);text-decoration:line-through}
.ph-a{font-size:1.2rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-b{font-size:1rem;color:var(--faint);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-p{margin-left:auto;font-size:1.25rem;font-weight:800;flex:none}
.ph-play{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(7,16,28,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--rule);font-family:var(--mono);font-size:.95rem;font-weight:700;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

/* beats */
.beats{display:flex;flex-direction:column;gap:14px}
.beat{padding:22px 20px}
.beat h2{font-size:1.9rem;font-weight:800;letter-spacing:-.025em;margin:10px 0 8px;line-height:1.25}
.beat p{font-size:1.5rem;line-height:1.6;color:var(--ink-2)}
.beats-phone{display:none}

/* beat detail graphics — small app-truthful stills that fill the dwell space */
.bd{margin-top:20px;padding:14px;border-radius:14px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--rule-2);max-width:460px}
.bd-cap{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;margin-bottom:11px}
.bd-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--rule-2)}
.bd-row+.bd-row{margin-top:7px}
.bd-a{font-size:1.3rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-b{font-size:1.1rem;color:var(--faint);margin-top:1px}
.bd-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.bd-amt{font-size:1.35rem;font-weight:800;flex:none}
.bd-days{display:flex;gap:6px}
.bd-days span{flex:1;padding:9px 0;border-radius:10px;text-align:center;font-size:1.05rem;font-weight:700;color:var(--dim);background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--rule-2)}
.bd-days span.on{background:var(--cyan-soft);box-shadow:inset 0 0 0 1px rgba(31,168,255,.45);color:var(--cyan)}
.bd-days b{display:block;font-size:1.3rem;color:inherit;margin-top:3px}
.bd-pills{display:flex;flex-wrap:wrap;gap:7px}
.bd-pill{padding:6px 12px;border-radius:999px;font-size:1.2rem;font-weight:700;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--rule-2);color:var(--dim)}
.bd-pill.on{background:var(--cyan-soft);box-shadow:inset 0 0 0 1px rgba(31,168,255,.4);color:var(--cyan)}
.bd-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.bd-total{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.bd-total.peach{color:var(--peach)}
.bd-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06);gap:2px;margin:4px 0 10px}
.bd-bar i{display:block}
.bd-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:1.2rem;color:var(--dim)}
.bd-legend b{color:var(--ink)}
.bd-key{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
.bd-note{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--rule-2);font-size:1.2rem;color:var(--ink-2);font-weight:600}
.bd-notes{display:flex;flex-wrap:wrap;gap:7px}
.tick-ok{width:18px;height:18px;border-radius:999px;background:var(--ok);flex:none;display:grid;place-items:center}
.tick-off{width:18px;height:18px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--faint);flex:none}

/* story */
.story{background:var(--paper-2);border-radius:20px;padding:36px 22px;box-shadow:inset 0 0 0 1px var(--rule)}
.story p{margin-top:18px;font-size:1.65rem;line-height:1.7;color:var(--ink-2)}

/* scroll clock: decorative. On a phone it sits above the heading rather than
   after the CTA, which is where source order would otherwise put it - the copy
   stays first in the DOM and `order` does the moving. Hand rotation is set by
   script, not CSS, so the global prefers-reduced-motion rule cannot reach it -
   that is handled in the script instead. */
.story{display:grid;gap:26px}
.story-txt{order:2;min-width:0}
.clock{order:1;width:min(200px,50vw);margin:0 auto}
.clock svg{display:block;width:100%;height:auto}
.clock-face{color:var(--ink)}
.clock-hour{stroke:var(--ink)}
.clock-min{stroke:var(--cyan)}
.clock-cap{fill:var(--cyan)}
.inline-cta{display:inline-flex;align-items:center;gap:7px;margin-top:22px;color:var(--cyan);font-weight:700;font-size:1.6rem}

/* import still */
.imp{margin-top:28px;padding:18px;border-radius:16px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule)}
.imp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--rule-2)}
.imp-f{font-family:var(--mono);font-size:1.2rem;font-weight:700;color:var(--ink)}
.imp-ok{font-family:var(--mono);font-size:1.05rem;font-weight:700;color:var(--ok);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.imp-rows{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.imp-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--rule-2);font-size:1.25rem}
.imp-col{font-family:var(--mono);color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-arw{color:var(--faint);flex:none}
.imp-map{font-weight:700;color:var(--ink);flex:1;min-width:0}
.imp-note{margin-top:12px;font-size:1.25rem;color:var(--faint)}

/* diff cards */
.diffs{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.diff{padding:22px 20px}
.diff h2{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.diff p{font-size:1.5rem;line-height:1.6;color:var(--ink-2)}
.diff a{color:var(--cyan);font-weight:700}

/* pricing */
.price-card{max-width:520px;margin:32px auto 0;padding:34px 24px;text-align:center;background:var(--paper-2);border-radius:20px;box-shadow:inset 0 0 0 1px var(--rule),0 30px 70px -40px rgba(31,168,255,.5)}
.price-big{font-size:clamp(4.4rem,12vw,6.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:6px}
.price-big span{font-size:.42em;font-weight:700;color:var(--dim);letter-spacing:-.01em}
.price-alt{margin-top:12px;font-size:1.5rem;color:var(--ink-2)}
.price-alt b{color:var(--ink)}
/* the homepage states the shape of the pricing, not the figure; the figure lives
   on /pricing/ so there is one place to keep right. */
.price-line{margin-top:10px;font-size:clamp(2.4rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.2}
.price-see{margin-top:16px;font-size:1.45rem}
.price-card p.body{margin-top:18px;font-size:1.55rem;line-height:1.65;color:var(--ink-2)}
.price-card .btn{margin-top:24px;width:100%}
.incl{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--rule-2);display:grid;gap:11px;text-align:left}
.incl li{display:flex;align-items:flex-start;gap:11px;font-size:1.45rem;color:var(--ink-2);line-height:1.5}

/* faq */
.faq{margin-top:28px;display:flex;flex-direction:column;gap:10px}
details{background:var(--paper-2);border-radius:14px;box-shadow:inset 0 0 0 1px var(--rule);overflow:hidden}
summary{list-style:none;cursor:pointer;padding:18px 20px;font-size:1.6rem;font-weight:700;letter-spacing:-.015em;display:flex;align-items:flex-start;gap:12px}
summary::-webkit-details-marker{display:none}
summary .plus{margin-left:auto;flex:none;color:var(--cyan);font-size:2rem;line-height:1;transition:transform .2s}
details[open] summary .plus{transform:rotate(45deg)}
details p{padding:0 20px 20px;font-size:1.5rem;line-height:1.65;color:var(--ink-2)}
details p+p{padding-top:0;margin-top:-8px}

/* feature blocks (features page) */
.fblock{padding:44px 0;border-top:1px solid var(--rule)}
.fblock h2{font-size:clamp(2.5rem,5.4vw,3.6rem);font-weight:700;letter-spacing:-.03em;margin:12px 0 0;line-height:1.12}
.fblock p{margin-top:16px;font-size:1.6rem;line-height:1.65;color:var(--ink-2);max-width:620px}
.fbullets{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:620px}
.fbullets li{display:flex;gap:11px;font-size:1.5rem;line-height:1.55;color:var(--ink-2)}
.fbullets b{color:var(--ink)}

/* steps (import page) */
.steps{display:flex;flex-direction:column;gap:14px;margin-top:32px;counter-reset:s}
.step{padding:22px 20px;position:relative}
.step h2{font-size:1.7rem;font-weight:800;margin-bottom:8px;letter-spacing:-.02em}
.step p{font-size:1.5rem;line-height:1.6;color:var(--ink-2)}
.step-n{font-family:var(--mono);font-size:1.1rem;font-weight:700;color:var(--cyan);letter-spacing:.14em;margin-bottom:10px}

/* stacked cards: the release notes list, and the meta line above a post's h1 */
.posts{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.post{padding:22px 20px;display:block}
.post h2{font-size:1.8rem;font-weight:800;letter-spacing:-.025em;line-height:1.3}
.post p{margin-top:8px;font-size:1.45rem;line-height:1.6;color:var(--ink-2)}
.post-meta{font-family:var(--mono);font-size:1.05rem;font-weight:700;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.post-meta b{color:var(--cyan);font-weight:700}

/* blog index — one hairline-ruled document rather than a stack of cards, so ten
   posts read as a contents page instead of ten competing boxes. Mobile stacks
   the category over the title; from 720px it moves into a left rail. */
/* doubled up so it outranks the .sec padding the 720px media query sets later */
.sec.sec-blog{padding-top:30px}

/* Buttons, not links: filtering hides rows in place and never changes the URL,
   so there is nothing here for a crawler to follow. */
.cats{display:flex;flex-wrap:wrap;gap:10px 22px;padding-bottom:26px;border-bottom:1px solid var(--rule)}
.cat{appearance:none;background:none;border:0;padding:0;cursor:pointer;font-family:var(--mono);font-size:1.1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cat span{margin-left:4px;color:var(--dim);opacity:.65}
.cat:hover{color:var(--ink-2)}
.cat.is-on,.cat.is-on span{color:var(--cyan);opacity:1}
.cat:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:2px}

/* Light/dark switch, blog pages only. Two buttons rather than one that flips,
   so the choice on offer is visible without having to work out what the single
   icon currently means. Hidden until the script wires it up, the same as the
   category row above: a control that cannot do anything should not be on the
   page at all. */
/* The strip above a page head: breadcrumb on the left where one exists, theme
   switch pushed right by its own margin rather than by justify-content, so the
   switch sits right whether or not anything precedes it. */
.phead-top{display:flex;align-items:center;gap:16px;margin-bottom:10px;min-width:0}
.themer{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule)}
.themer[hidden]{display:none}
.themer-btn{appearance:none;border:0;padding:0;margin:0;cursor:pointer;background:none;color:var(--faint);display:inline-flex;align-items:center;justify-content:center;width:42px;height:34px;border-radius:999px;font-family:inherit}
.themer-btn:hover{color:var(--ink-2)}
.themer-btn[aria-pressed="true"]{background:var(--cyan-soft);color:var(--cyan)}
.themer-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.themer-btn svg{width:17px;height:17px}

/* One logo file per theme, swapped by a token rather than by script, so the
   right one is painted on the first frame. The wordmark is white in one and
   ink in the other; the blue mark is the same in both. */
.logo-light{display:var(--logo-light)}
.logo-dark{display:var(--logo-dark)}

/* Breadcrumb, post pages only. Deliberately NOT the mono caps used by the meta
   line directly beneath it: two tracked-out uppercase strips stacked on top of
   each other read as one confused block, and the last crumb is the page title,
   which would then be shouted immediately above the h1 that already says it.
   Sentence case in the sans face keeps it quiet and tells the two lines apart.

   The last crumb is the page itself, so it is not a link, and it truncates
   rather than wraps: these titles run to sixty characters and a breadcrumb
   taking three lines on a phone is worse than one that trails off. */
.crumbs{min-width:0;font-size:1.3rem;font-weight:600;color:var(--faint)}
.crumbs ol{display:flex;align-items:center;gap:9px;margin:0;padding:0;list-style:none;min-width:0}
.crumbs li{display:flex;align-items:center;gap:9px;flex:none}
.crumbs li+li::before{content:"/";opacity:.55}
.crumbs a:hover{color:var(--ink-2);opacity:1}
.crumbs li:last-child{min-width:0;flex:1 1 auto}
.crumbs [aria-current]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.lead{padding:34px 0 32px;border-bottom:1px solid var(--rule)}
.lead h2{margin:6px 0 0;font-size:clamp(3rem,6.8vw,5rem);font-weight:700;line-height:1.04;letter-spacing:-.035em;max-width:820px}
.lead-sub{margin-top:16px;font-size:1.65rem;line-height:1.65;color:var(--ink-2);max-width:620px}
.lead-date{margin-top:20px;font-family:var(--mono);font-size:1.05rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.readon{margin-top:18px;font-size:1.5rem;font-weight:700;color:var(--cyan)}
.readon a{display:inline-flex;align-items:center;gap:7px}

.prow{padding:26px 0;border-bottom:1px solid var(--rule-2)}
.prow-rail{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-family:var(--mono);font-size:1.05rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.prow-cat{color:var(--cyan)}
/* on one line the three need separating; in the desktop rail they are stacked */
.prow-rail>*+*::before{content:"\00b7";margin-right:11px;opacity:.7}
.prow h2{margin:11px 0 0;font-size:1.9rem;font-weight:800;letter-spacing:-.025em;line-height:1.3}
.prow p{margin-top:9px;font-size:1.5rem;line-height:1.6;color:var(--dim);max-width:660px}
.prow .readon{margin-top:14px;font-size:1.45rem}
/* the attribute selector outbids the desktop grid rule below, whatever the order */
.prow[hidden],.lead[hidden]{display:none}

/* final band */
.band{margin:0 var(--gut);padding:44px 24px;border-radius:20px;text-align:center;background:linear-gradient(180deg,var(--paper-3) 0%,var(--paper-2) 70%);box-shadow:inset 0 0 0 1px var(--rule)}
.band p{margin:16px auto 0;max-width:560px;font-size:1.65rem;line-height:1.65;color:var(--ink-2)}
.band-cta{display:flex;flex-direction:column;gap:10px;margin-top:26px}

/* footer */
.ftr{margin-top:72px;border-top:1px solid var(--rule);padding:40px 0}
.ftr-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.ftr h3{font-family:var(--mono);font-size:1.1rem;font-weight:700;color:var(--faint);letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:1.45rem;color:var(--dim)}
.ftr-base{margin-top:36px;padding-top:22px;border-top:1px solid var(--rule-2);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:1.3rem;color:var(--faint)}

/* Mobile navigation. The desktop nav is hidden below 1000px, so without this the
   other pages are unreachable from the header on the device most visitors use. */
/* the shared details{} rule below styles the FAQ accordion; the menu opts out */
.menu{position:relative;flex:none;background:none;border-radius:0;box-shadow:none;overflow:visible}
/* padding:0 is load-bearing. The shared summary{} rule below sets 18px 20px for
   the FAQ accordion, and with border-box that left a 44px button with a 4px
   content box: the middle bar shrank from 18px to 4px, and the other two, being
   absolute against it, hung off to the right. Three even bars, centred. */
.menu summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;padding:0;width:44px;height:44px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.menu-bars{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0;display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
.menu-bars::before{top:-6px}
.menu-bars::after{top:6px}
.menu[open] .menu-bars{background:transparent}
.menu[open] .menu-bars::before{top:0;transform:rotate(45deg)}
.menu[open] .menu-bars::after{top:0;transform:rotate(-45deg)}
.menu-panel{position:absolute;right:0;top:calc(100% + 12px);min-width:212px;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:18px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule),0 24px 60px -20px var(--menu-shadow);z-index:60}
.menu-panel a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;font-size:1.5rem;font-weight:600;color:var(--ink-2)}
.menu-panel a:hover{background:var(--cyan-soft);color:var(--ink);opacity:1}
.menu-panel a[aria-current="page"]{color:var(--cyan)}
.menu-sep{height:1px;margin:6px 8px;background:var(--rule-2)}

/* Long-form legal pages. Content is generated from the app's own privacy.md and
   terms.md, so the two surfaces can never drift apart. */
.legal{max-width:760px;color:var(--ink-2);font-size:1.6rem;line-height:1.65}
.legal h2{margin:44px 0 14px;font-size:2.2rem;color:var(--ink);letter-spacing:-.02em}
.legal h3{margin:30px 0 10px;font-size:1.7rem;color:var(--ink)}
.legal h2:first-child,.legal h3:first-child{margin-top:0}
.legal p{margin:0 0 14px}
.legal strong{color:var(--ink);font-weight:650}
.legal a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px}
.legal li{margin:0 0 8px}
.legal hr{margin:36px 0;border:0;border-top:1px solid var(--rule-2)}
.legal code{font-family:var(--mono);font-size:.92em;color:var(--ink)}
.legal-table{margin:0 0 20px;overflow-x:auto;border-radius:14px;box-shadow:inset 0 0 0 1px var(--rule)}
.legal-table table{width:100%;border-collapse:collapse;font-size:1.45rem;min-width:460px}
.legal-table th,.legal-table td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule-2)}
.legal-table th{color:var(--ink);font-weight:650;background:var(--th-bg);white-space:nowrap}
.legal-table tr:last-child td{border-bottom:0}
/* A pricing table has one long label column and one short figure column. Letting
   the label wrap keeps the whole thing inside 360px instead of handing the
   reader a sideways scroll on the narrowest phones. */
@media(max-width:29.9375em){
  .legal-table table{min-width:0;font-size:1.35rem}
  .legal-table th,.legal-table td{padding:9px 11px}
  .legal-table th{white-space:normal}
}

/* Blog posts quote scripts the reader is meant to copy and send, so a quote is
   styled as a message rather than as a pull quote. */
.legal blockquote{margin:0 0 18px;padding:14px 17px;border-radius:4px 14px 14px 4px;border-left:2px solid var(--cyan-dim);background:var(--quote-bg);color:var(--ink);font-size:1.55rem;line-height:1.6}
.legal blockquote p:last-child{margin-bottom:0}

/* post footer: the way out of a post is back to the index or on to its
   neighbours, which is also how a crawler gets round all ten. */
.postfoot{max-width:760px;margin-top:44px;padding-top:26px;border-top:1px solid var(--rule)}
.postnav{display:flex;flex-direction:column;gap:12px}
.postnav a{display:block;padding:16px 18px;border-radius:14px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule)}
.postnav a:hover{opacity:1;box-shadow:inset 0 0 0 1px rgba(31,168,255,.4)}
.postnav b{display:block;font-family:var(--mono);font-size:1.05rem;font-weight:700;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px}
.postnav span{font-size:1.55rem;font-weight:700;letter-spacing:-.02em;line-height:1.35;color:var(--ink)}
.postback{margin-top:22px;font-size:1.45rem;font-weight:700;color:var(--cyan)}

/* Below 640px the burger has to share the bar with both CTAs. Log in stays visible
   (returning customers land on this site too) but drops its pill to make room. */
/* Beat supporting graphics are real screenshots of the app, captured from the
   installed PWA, so a change in the product shows up here as a stale image
   rather than as copy that quietly stops being true. */
/* Cap these at the width of the phone frame beside them. Without it a 720px
   capture stretches to fill the column and the app renders far bigger than
   it ever does on a phone. */
.shot{margin:18px 0 0;max-width:320px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule);background:var(--paper)}
.shot img{display:block;width:100%;height:auto}

/* Full-bleed artwork inside a feature block: unlike .shot this is not a phone
   screenshot, so it fills its column and carries no frame of its own. */
.artshot{margin:0;max-width:none}
.artshot img{display:block;width:100%;height:auto}

@media(max-width:39.9375em){
  .hdr-in{gap:10px}
  .hdr .btn{padding:10px 13px;font-size:1.35rem}
  .hdr .btn-ghost{padding:10px 6px;box-shadow:none}
  .logo{max-width:104px}
}

/* Under ~360px the logo, both CTAs and the burger cannot share one bar. Log in
   steps out of the bar and into the menu rather than pushing the page sideways. */
@media(max-width:22.4375em){
  .hdr-in{gap:8px}
  .hdr .btn-ghost{display:none}
  .logo{max-width:96px}
}
.menu-login{color:var(--cyan)!important}

@media(min-width:45em){
  :root{--gut:32px}
  .sec{padding:96px 0}
  .hero{padding:56px 0 16px}
  .phead{padding:64px 0 8px}
  .hero-cta{flex-direction:row;gap:12px}
  .hero-cta .btn{width:auto}
  .beats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .diffs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr)}
  .story{padding:48px 40px}
  .band-cta{flex-direction:row;justify-content:center}
  .ftr-cols{grid-template-columns:repeat(4,1fr)}
  .imp-row{font-size:1.35rem}
  .incl{grid-template-columns:1fr 1fr;gap:11px 22px}
  /* the category, reading time and date step out of the way into a left rail so
     the titles line up as one column the eye can run down */
  .prow{display:grid;grid-template-columns:168px 1fr;gap:36px;padding:30px 0}
  .prow-rail{flex-direction:column;align-items:flex-start;gap:7px}
  .prow-rail>*+*::before{content:none}
  .prow h2{margin:0;font-size:2.2rem}
  .postnav{flex-direction:row}
  .postnav a{flex:1}
}
@media(min-width:62.5em){
  .hdr-in>nav{display:flex}
  .menu{display:none}
  .hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .phone{margin:0 0 0 auto;max-width:330px}
  .hero h1{font-size:clamp(5.6rem,5.6vw,7.6rem)}
  .story-grid{display:grid;grid-template-columns:400px 1fr;gap:80px;align-items:start}
  .story{grid-template-columns:1fr auto;gap:64px;align-items:center}
  .story-txt{order:0;grid-column:1}
  .clock{order:0;grid-column:2;width:clamp(220px,20vw,300px);margin:0}
  .beats-phone{display:block;position:sticky;top:96px}
  .beats-phone .phone{transform:rotate(-1.5deg);margin:0;max-width:380px}
  .beats{display:flex;flex-direction:column;gap:0}
  .beat{background:transparent;box-shadow:none;padding:56px 0;border-radius:0}
  .beat+.beat{border-top:1px solid var(--rule-2)}
  .beat h2{font-size:3rem;letter-spacing:-.03em}
  .beat p{font-size:1.7rem;max-width:640px}
  /* keep the graphic the same size as the screen in the frame beside it */
  .shot{max-width:362px}
  .diffs{grid-template-columns:repeat(3,1fr)}
  .fblock{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:64px 0}
  .fblock .fb-copy{max-width:560px}
  /* the device composite is a wide, detailed image: in a half-column it renders
     at ~540px and the three devices become unreadable slabs. This block goes
     single-column so the graphic gets the full wrap width. */
  .fblock-stack{display:block}
  .fblock-stack .fb-copy{max-width:660px}
  .fblock-stack .artshot{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}