/* ===========================================================================
   LogBlues.com — one stylesheet for every page.

   The ground stays calm: one quiet page colour, hairlines between sections,
   hierarchy carried by size rather than colour. Nothing in the furniture is
   saturated, so the only loud things on the site are the products.

   What earns colour: the feature cards. Those are the shop window — a big
   picture, a short line, and the app it belongs to sitting underneath with a
   way in. Everything else stays out of their way.

   ONE MARK PER PAGE. The LogBlues wordmark owns the header everywhere; the
   LogBlues Practice lockup appears on its own page and nowhere else.
   =========================================================================== */

:root {
  --page:#f7f8f7; --surface:#ffffff; --raised:#f0f2f1;
  --ink:#0b0f0e; --ink-2:#4d5654; --ink-3:#84908d;
  --grid:#e2e6e5; --border:rgba(11,15,14,0.08);
  --accent:#14708f; --good:#0a7c5c;
  /* The splash. Lifted straight from the app so the site and the product
     agree with each other: the brand blue, the setup green, the violet the
     app uses for admin, and the magenta it uses to raise its voice. Used
     small -- eyebrows and markers -- never as a fill. */
  --brand:#3162d8; --leaf:#0a68a8; --plum:#6b5ce7; --rose:#b3277f;
  --shadow:0 1px 2px rgba(11,15,14,.05), 0 8px 24px -12px rgba(11,15,14,.14);
  --shadow-lift:0 2px 4px rgba(11,15,14,.06), 0 26px 52px -26px rgba(11,15,14,.3);
  --r:14px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  margin:0; background:var(--page); color:var(--ink-2);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
img { max-width:100%; }

.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.narrow { max-width:980px; }

/* ------------------------------------------------------------- beta bar */
/* Above the sticky header, so it announces itself once and then gets out
   of the way. Muted on purpose -- the point is disclosure, not drama. */
.betabar {
  background:var(--raised); border-bottom:1px solid var(--border);
  font-size:13.5px; color:var(--ink-3);
}
.betabar .wrap {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:9px 24px; text-align:center; flex-wrap:wrap;
}
.betabar strong { color:var(--ink-2); font-weight:600; }
.betabar a { color:var(--accent); font-weight:600; white-space:nowrap; }
@media (max-width:600px) { .betabar .wrap { padding:8px 18px; font-size:13px; } }

/* ---------------------------------------------------------------- top bar */
header.bar {
  position:sticky; top:0; z-index:20;
  background:rgba(247,248,247,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.bar .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand, .brand:hover { display:block; line-height:0; text-decoration:none; }
.brand img { height:28px; width:auto; display:block; }
nav.links { display:flex; gap:22px; font-size:14.5px; }
nav.links a { color:var(--ink-2); }
nav.links a[aria-current] { color:var(--accent); }

/* -------------------------------------------------- the opening of a page */
/* .band is itself a <section>, so it was taking the generic `section`
   padding AND the padding on `.band .wrap` underneath it -- 64+64 on desktop,
   56+56 on a phone. That put ~112px of dead space above the first line of
   every band, which is most of a phone's first screen spent on nothing.
   The .wrap padding is the deliberate one (it carries the horizontal and
   bottom values too), so the section's own padding goes. */
.band { border-bottom:1px solid var(--border); padding:0; }
.band .wrap { padding:64px 24px 58px; }

section { padding:64px 0; }
section + section { border-top:1px solid var(--border); }

/* ------------------------------------------------------------------- type */
.eyebrow {
  font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
h1 {
  font-weight:700; font-size:clamp(34px,5.4vw,54px); line-height:1.05;
  letter-spacing:-.035em; color:var(--ink); margin:0; max-width:24ch; text-wrap:balance;
}
h2 {
  font-size:clamp(24px,3.4vw,34px); font-weight:700; letter-spacing:-.026em;
  color:var(--ink); margin:0 0 14px; max-width:30ch; text-wrap:balance;
}
h3 { font-size:18px; font-weight:600; letter-spacing:-.012em; color:var(--ink); margin:0 0 6px; }

/* The splash, applied. Eyebrows carry the colour so each section announces
   itself, and a card marks its subject with one small square. Two things
   only -- the moment a third element takes colour, the page starts shouting. */
.eyebrow.c-brand { color:var(--brand); }
.eyebrow.c-leaf  { color:var(--leaf); }
.eyebrow.c-plum  { color:var(--plum); }
.eyebrow.c-rose  { color:var(--rose); }

.card.mark h3 { display:flex; align-items:center; gap:10px; }
.card.mark h3::before {
  content:""; width:10px; height:10px; border-radius:3px;
  background:var(--dot,var(--accent)); flex:0 0 auto;
}
.card.c-brand { --dot:var(--brand); }
.card.c-leaf  { --dot:var(--leaf); }
.card.c-plum  { --dot:var(--plum); }
.card.c-rose  { --dot:var(--rose); }
p { margin:0 0 16px; max-width:78ch; }
p:last-child { margin-bottom:0; }
.lede { font-size:clamp(17px,2.1vw,20px); color:var(--ink-2); max-width:70ch; margin:22px 0 0; }

/* ---------------------------------------------------------------- actions */
.cta {
  display:inline-block; margin-top:28px; font-size:16px; font-weight:600;
  color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:3px;
}
.cta:hover { text-decoration:none; color:var(--ink); border-bottom-color:var(--ink); }
.cta.second { margin-left:26px; color:var(--ink-2); border-bottom-color:var(--grid); }
.pill {
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--good);
  border:1px solid rgba(10,124,92,.28); border-radius:999px; padding:4px 12px; margin-bottom:16px;
}
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--good); }

/* ---------------------------------------------- the App Store button pill */
.get {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:92px; padding:9px 22px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:15px; font-weight:600;
  letter-spacing:.01em; border:0; transition:filter .16s ease, transform .16s ease;
}
.get:hover { text-decoration:none; color:#fff; filter:brightness(1.08); }
.get:active { transform:scale(.98); }
.get.ghost { background:rgba(255,255,255,.22); backdrop-filter:blur(8px); color:#fff; }
.get.ghost:hover { background:rgba(255,255,255,.32); }

/* ------------------------------------------------------- the product head */
/* Icon, name, one line, and a way in -- the top of an App Store page. */
.producthead { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; }
/* THE SHADOW HAS TO FOLLOW THE ARTWORK, NOT THE BOX.
   All three product icons are shaped PNGs with transparent corners, and Blues
   is a full circle. A box-shadow is drawn around the element's rounded-square
   border box regardless of what is painted inside it, so a circular icon came
   with a square halo hanging off its four corners -- read on screen as the
   icon being broken. filter: drop-shadow() reads the alpha channel instead, so
   the shadow traces the circle on Blues and the rounded square on the other
   two, from one rule and with no per-image class to forget.

   Two stacked drop-shadows rather than one, for the same reason the old
   box-shadow had two layers: a tight contact shadow that seats the icon, and
   a wide soft one that lifts it. */
.appicon {
  width:104px; height:104px; border-radius:23px; display:block;
  filter:drop-shadow(0 1px 2px rgba(11,15,14,.10))
         drop-shadow(0 12px 20px rgba(11,15,14,.26));
}

/* On a near-black page a near-black shadow is invisible, so dark mode gets its
   own weights. Both dark states are covered: the media query for a phone set
   to dark, and the explicit toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .appicon {
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))
           drop-shadow(0 14px 24px rgba(0,0,0,.7));
  }
}
:root[data-theme="dark"] .appicon {
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))
         drop-shadow(0 14px 24px rgba(0,0,0,.7));
}
.appicon.sm { width:52px; height:52px; border-radius:12px; }
.producthead h1 { font-size:clamp(30px,4.4vw,44px); margin:0 0 4px; max-width:20ch; }
.producthead .sub { font-size:17px; color:var(--ink-3); margin:0; }
.producthead .row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:16px; }
.producthead .meta { font-size:13px; color:var(--ink-3); }

/* ------------------------------------------------------ the feature cards */
/* The shop window. A picture, a short line, and the app underneath. */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:26px; margin-top:40px; }
.today {
  position:relative; display:block; border-radius:20px; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
  color:inherit; text-decoration:none; min-height:430px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.today:hover { text-decoration:none; box-shadow:var(--shadow-lift); transform:translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .today:hover { transform:none; } }
.today .art { position:absolute; inset:0 0 92px 0; overflow:hidden; }
.today .art img { width:100%; height:100%; object-fit:cover; display:block; }
/* Text sits on the picture, so the picture is damped only where the words
   are -- strong at the top, heaviest at the bottom edge. Same rule the app
   follows: protect the text, not the whole image. */
.today .art::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(6,10,20,.10) 0%, rgba(6,10,20,.30) 46%, rgba(6,10,20,.80) 100%);
}
.today .copy { position:absolute; left:0; right:0; bottom:92px; padding:0 24px 22px; color:#fff; }
.today .copy .eyebrow { color:rgba(255,255,255,.86); margin:0 0 8px; }
.today .copy h3 {
  color:#fff; font-size:clamp(23px,2.5vw,29px); font-weight:700;
  letter-spacing:-.024em; line-height:1.12; margin:0 0 7px; max-width:17ch; text-wrap:balance;
}
.today .copy p { color:rgba(255,255,255,.9); font-size:15.5px; margin:0; max-width:40ch; }
/* The app row: icon, name, tagline, View. Sits on the surface, not the art. */
.today .app {
  position:absolute; left:0; right:0; bottom:0; height:92px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:0 20px; background:var(--surface); border-top:1px solid var(--border);
}
.today .app .name { font-size:16px; font-weight:600; color:var(--ink); line-height:1.25; }
.today .app .tag { font-size:13.5px; color:var(--ink-3); line-height:1.3; }
.today .app .view {
  padding:7px 20px; border-radius:999px; background:var(--raised);
  color:var(--accent); font-size:14.5px; font-weight:600; border:1px solid var(--border);
}
.today:hover .app .view { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ------------------------------------------------------------------ cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:40px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:26px; box-shadow:var(--shadow); }
.card p { font-size:15.5px; color:var(--ink-3); margin:0; }
.card p + p { margin-top:10px; }

a.product {
  display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
  color:inherit; text-decoration:none; transition:box-shadow .18s ease, transform .18s ease;
}
a.product:hover { text-decoration:none; box-shadow:var(--shadow-lift); transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.product:hover { transform:none; } }
.product .pad { padding:28px 28px 30px; }
.product .shot {
  width:100%; height:260px; object-fit:cover; object-position:left top;
  display:block; border-top:1px solid var(--border);
}
.product .go { color:var(--accent); font-weight:600; font-size:15.5px; margin-top:16px; display:block; }

/* ------------------------------------------------------- product showcase */
/* A horizontal strip that snaps. Each shot sits in the app-window frame so
   the artwork themes read as the product rather than as page decoration. */
.showcase {
  display:grid; grid-auto-flow:column; grid-auto-columns:min(760px,88vw);
  gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 0 14px; margin-top:36px; scrollbar-width:thin;
}
.showcase figure { margin:0; scroll-snap-align:center; }
.showcase .window { border-radius:16px; }
.showcase .screen img { width:100%; height:auto; display:block; }
.showcase figcaption {
  padding:14px 18px; border-top:1px solid var(--border); background:var(--raised);
  font-size:14.5px; color:var(--ink-3);
}
.showcase figcaption strong { color:var(--ink-2); font-weight:600; }
.showhint { font-size:14px; color:var(--ink-3); margin-top:10px; }

/* --------------------------------------------------- the screenshot strip */
.gallery {
  display:grid; grid-auto-flow:column; grid-auto-columns:min(560px,82vw); gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; margin-top:36px;
  padding-bottom:10px; scrollbar-width:thin;
}
.gallery figure { margin:0; scroll-snap-align:start; }
.gallery img {
  width:100%; height:auto; display:block; border-radius:14px;
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.gallery figcaption { padding:12px 2px 0; font-size:14px; color:var(--ink-3); border:0; background:none; }

/* ------------------------------------------------- copy left, art right */
.split { display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }

/* The marker is positioned rather than laid out as a grid column. A grid
   row would make every inline child its own grid item, so a list item
   containing <strong> plus trailing text broke into one word per line. */
ul.facts { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:13px; }
ul.facts li { position:relative; padding-left:28px; font-size:15.5px;
  line-height:1.6; color:var(--ink-3); }
ul.facts li::before {
  content:""; position:absolute; left:1px; top:8px;
  width:9px; height:9px; border-radius:50%; background:var(--leaf);
}
/* Green, blue, violet, repeating. */
ul.facts li:nth-child(3n+2)::before { background:var(--brand); }
ul.facts li:nth-child(3n+3)::before { background:var(--plum); }
ul.facts li strong { color:var(--ink-2); font-weight:600; }

/* --------------------------------------------------------- the app window */
.window { margin:0; padding:0; border-radius:var(--r); overflow:hidden;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lift); }
.chrome { display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:var(--raised); border-bottom:1px solid var(--border); }
.chrome span { width:10px; height:10px; border-radius:50%; background:var(--grid); }
.screen img { width:100%; height:auto; display:block; }
figcaption { padding:14px 18px; border-top:1px solid var(--border); background:var(--raised);
  font-size:13.5px; color:var(--ink-3); }

/* --------------------------------------------------------------- security */
.security { display:grid; grid-template-columns:64px 1fr; gap:26px; align-items:start; }
.shield { width:64px; height:64px; display:block; }
.security ul { list-style:none; margin:20px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px 26px; }
.security li { font-size:15px; color:var(--ink-3); padding-left:16px; position:relative; }
.security li::before { content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  border-radius:50%; background:var(--leaf); }
.security li:nth-child(3n+2)::before { background:var(--brand); }
.security li:nth-child(3n+3)::before { background:var(--plum); }

/* --------------------------------------------------------- layers + rows */
.layers { list-style:none; padding:0; margin:34px 0 0; display:grid; gap:0; }
.layers li { display:grid; grid-template-columns:150px 1fr; gap:24px;
  padding:20px 0; border-top:1px solid var(--border); font-size:15.5px; color:var(--ink-3); }
.layers li:last-child { border-bottom:1px solid var(--border); }
.layers .who { font-size:15px; font-weight:600; color:var(--ink); }

.status { list-style:none; padding:0; margin:34px 0 0; display:grid; gap:0; }
.status li { display:grid; grid-template-columns:104px 1fr; gap:20px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--border); font-size:15.5px; color:var(--ink-3); }
.status li:last-child { border-bottom:1px solid var(--border); }
.status .tag { font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.status .now { color:var(--good); }
.status .next { color:var(--accent); }
.status .later { color:var(--ink-3); }
.status strong { color:var(--ink); font-weight:600; }

/* --------------------------------------------------------- price cards */
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px; margin-top:38px; align-items:stretch; }
.plan { background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:28px 26px 30px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
/* The featured plan used to take a blue border, rgba(49,98,216,.35). Two
   problems with that: it did not match the grey border every other card has,
   which is what the owner spotted; and the value was hard-coded rather than a
   token, so the LIGHT theme's brand blue was painted in dark mode as well.
   The card is already marked out by its "Most practices" badge and the deeper
   shadow, so the border can simply be the same as everyone else's. */
.plan.featured { box-shadow:var(--shadow-lift); }
.plan .badge { font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand); margin:0 0 12px; }
.plan h3 { font-size:19px; margin:0 0 4px; }
.plan .who { font-size:14px; color:var(--ink-3); margin:0 0 18px; }
.plan .price { font-size:38px; font-weight:700; letter-spacing:-.035em; color:var(--ink);
  line-height:1; margin:0; font-variant-numeric:tabular-nums; }
.plan .per { font-size:14.5px; color:var(--ink-3); margin:7px 0 20px; }
.plan ul { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; }
.plan li { position:relative; padding-left:26px; font-size:15px; line-height:1.55; color:var(--ink-3); }
.plan li::before { content:""; position:absolute; left:1px; top:7px; width:8px; height:8px;
  border-radius:50%; background:var(--leaf); }
.plan li:nth-child(3n+2)::before { background:var(--brand); }
.plan li:nth-child(3n+3)::before { background:var(--plum); }
.plan li strong { color:var(--ink-2); font-weight:600; }
.plan .foot { margin-top:auto; }

/* ------------------------------------------------------ comparison grid */
.matrix-wrap { overflow-x:auto; margin-top:34px; }
table.matrix { border-collapse:collapse; table-layout:fixed; width:100%; min-width:640px; font-size:15px; }
table.matrix th, table.matrix td { text-align:left; padding:13px 16px;
  border-bottom:1px solid var(--border); vertical-align:top; }
table.matrix thead th { font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; border-bottom:1px solid var(--grid); }
table.matrix thead th:first-child, table.matrix tbody th { width:44%; }
table.matrix thead th:not(:first-child), table.matrix td { width:18.666%; text-align:center; }
table.matrix tbody th { font-weight:500; color:var(--ink-2); }
table.matrix td { color:var(--ink-3); font-variant-numeric:tabular-nums; }
table.matrix td.yes { color:var(--good); font-weight:700; }
table.matrix td.no { color:var(--ink-3); opacity:.5; }
table.matrix tbody tr:hover { background:var(--raised); }
table.matrix caption { caption-side:bottom; padding-top:16px; font-size:14px;
  color:var(--ink-3); text-align:left; }
.enterprise-contact { scroll-margin-top:110px; margin-top:48px; padding:32px 28px;
  border:1px solid var(--border); border-radius:20px; background:var(--raised); }
.enterprise-contact h2 { margin:4px 0 8px; font-size:24px; }
.enterprise-contact p { margin:0; }
.enterprise-contact-action { margin-top:24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.enterprise-contact-action .get { white-space:nowrap; border:0; cursor:pointer; }
.enterprise-copy-status { min-width:180px; color:var(--ink-3); font-size:14px; }

/* ------------------------------------------------------------ contact */
.contact-safety { margin-bottom:28px; padding:18px 20px; border:1px solid var(--border);
  border-left:4px solid var(--rose); border-radius:14px; background:var(--raised);
  color:var(--ink-2); line-height:1.6; }
.contact-form { display:grid; gap:22px; padding:30px; border:1px solid var(--border);
  border-radius:22px; background:var(--card); }
.contact-form label { display:grid; gap:9px; color:var(--ink-2); font-size:14px; font-weight:600; }
.contact-form input, .contact-form select, .contact-form textarea { width:100%; padding:13px 14px;
  border:1px solid var(--border); border-radius:12px; background:var(--raised); color:var(--ink);
  font:inherit; font-weight:400; }
.contact-form textarea { resize:vertical; min-height:150px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline:3px solid color-mix(in srgb,var(--brand) 22%,transparent); border-color:var(--brand); }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-form .contact-confirm { display:flex; grid-template-columns:none; align-items:flex-start; gap:11px;
  font-weight:400; line-height:1.5; }
.contact-confirm input { width:auto; margin-top:4px; }
.contact-form .get { justify-self:start; border:0; cursor:pointer; }
.contact-form .get:disabled { opacity:.55; cursor:wait; }
.contact-status { min-height:24px; margin:0; color:var(--good); font-weight:600; }
.contact-status.error { color:var(--rose); }
.contact-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
@media (max-width:650px) { .contact-fields { grid-template-columns:1fr; } .contact-form { padding:22px; } }

/* ---------------------------------------------------------------- specs */
/* Facts, not prose. A buyer scanning for one number should find it without
   reading a paragraph to get there. */
.specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:0 36px; margin:30px 0 0; }
.specs > div { padding:15px 0; border-top:1px solid var(--border); }
.specs dt { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; }
.specs dd { margin:5px 0 0; font-size:15.5px; color:var(--ink); line-height:1.5; }

/* ------------------------------------------------------------------- faq */
.faq { margin-top:34px; }
.faq details { border-top:1px solid var(--border); padding:17px 0; }
.faq details:last-child { border-bottom:1px solid var(--border); }
.faq summary {
  cursor:pointer; font-weight:600; color:var(--ink); font-size:16.5px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--accent); font-size:21px; line-height:1; flex:0 0 auto; }
.faq details[open] summary::after { content:"\2212"; }
.faq summary:hover { color:var(--accent); }
.faq p { margin:13px 0 0; font-size:15.5px; color:var(--ink-3); max-width:80ch; }
.faq p + p { margin-top:10px; }

.family { margin-top:56px; padding-top:26px; border-top:1px solid var(--border);
  color:var(--ink-3); font-size:15px; }
.family strong { color:var(--ink); }
.lockup { width:100%; max-width:280px; height:auto; display:block; margin:0 0 22px; }

/* ---------------------------------------------------------------- articles */
.post { max-width:680px; }
.post .kicker { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; margin:0 0 18px; }
.post .kicker .date { color:var(--ink-3); letter-spacing:.04em; text-transform:none; font-weight:500; }
.post h1 { max-width:26ch; }
.post .standfirst { font-size:clamp(18px,2.2vw,21px); line-height:1.5; color:var(--ink-2);
  margin:24px 0 0; max-width:68ch; }
.post article { margin-top:8px; }
.post article h2 { font-size:clamp(20px,2.5vw,25px); margin:44px 0 12px; max-width:34ch; }
.post article p { font-size:17px; line-height:1.72; margin:0 0 18px; max-width:76ch; }
.post article ul { margin:22px 0; padding:0; list-style:none; display:grid; gap:13px; }
/* Positioned marker, not a grid column -- see the note on ul.facts. */
.post article ul li { position:relative; padding-left:30px;
  font-size:16.5px; line-height:1.6; }
.post article ul li::before { content:""; position:absolute; left:1px; top:10px;
  width:9px; height:9px; border-radius:50%; background:var(--leaf); }
.post article ul li:nth-child(3n+2)::before { background:var(--brand); }
.post article ul li:nth-child(3n+3)::before { background:var(--plum); }
.post figure.hero { margin:0 0 8px; }
.post figure.hero img { width:100%; height:auto; display:block; border-radius:14px;
  border:1px solid var(--border); box-shadow:var(--shadow); }
.post article strong { color:var(--ink); font-weight:600; }
.postfoot { margin-top:52px; padding-top:26px; border-top:1px solid var(--border); font-size:15.5px; }

/* --------------------------------------------------------- article index */
.posts { display:grid; gap:0; margin-top:36px; }
a.postrow {
  display:grid; grid-template-columns:112px 1fr; gap:26px; align-items:start;
  padding:26px 0; border-top:1px solid var(--border); color:inherit; text-decoration:none;
}
.posts a.postrow:last-child { border-bottom:1px solid var(--border); }
a.postrow:hover { text-decoration:none; }
a.postrow:hover h3 { color:var(--accent); }
a.postrow .tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
a.postrow .tag img { width:20px; height:20px; flex:0 0 auto; }
a.postrow h3 { font-size:21px; letter-spacing:-.018em; margin:0 0 7px; max-width:30ch; }
a.postrow p { font-size:15.5px; color:var(--ink-3); margin:0; max-width:76ch; }
a.postrow .more { display:inline-block; margin-top:11px; font-size:14.5px;
  font-weight:600; color:var(--accent); }


/* ------------------------------------------------------- numbered layers */
/* The security layers are a real sequence, outside in, so they are numbered.
   Numbering anything that is not a sequence is decoration pretending to be
   information. */
.steps { list-style:none; padding:0; margin:34px 0 0; display:grid; gap:0; }
.steps li { display:grid; grid-template-columns:52px 1fr; gap:22px;
  padding:24px 0; border-top:1px solid var(--border); align-items:start; }
.steps li:last-child { border-bottom:1px solid var(--border); }
.steps .num {
  width:44px; height:44px; border-radius:13px; display:flex;
  align-items:center; justify-content:center; font-size:15px; font-weight:700;
  background:var(--tint,rgba(20,112,143,.10)); color:var(--mark,var(--accent));
}
.steps .head { display:flex; align-items:center; gap:10px; margin:9px 0 7px; }
.steps .head svg { width:19px; height:19px; flex:0 0 auto; stroke:var(--mark,var(--accent)); }
.steps .name { font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.012em; }
.steps .desc { font-size:15.5px; line-height:1.65; color:var(--ink-3); margin:0; max-width:76ch; }
.steps li.s-leaf  { --mark:var(--leaf);  --tint:rgba(10,104,168,.10); }
.steps li.s-brand { --mark:var(--brand); --tint:rgba(49,98,216,.10); }
.steps li.s-plum  { --mark:var(--plum);  --tint:rgba(107,92,231,.10); }
.steps li.s-rose  { --mark:var(--rose);  --tint:rgba(179,39,127,.09); }
@media (max-width:820px) {
  .steps li { grid-template-columns:40px 1fr; gap:16px; }
  .steps .num { width:38px; height:38px; border-radius:11px; font-size:14px; }
}

/* ------------------------------------------------------------- legal docs */
.doc article { margin-top:8px; }
.doc article h3 { font-size:17.5px; margin:32px 0 8px; }
.doc article p { font-size:16.5px; margin:0 0 14px; max-width:90ch; }
.doc .updated { font-size:14px; color:var(--ink-3); margin-top:12px; }
.docnav { display:flex; flex-wrap:wrap; gap:18px; margin-top:44px; padding-top:24px;
  border-top:1px solid var(--border); font-size:14.5px; }

/* ----------------------------------------------------------------- footer */
footer { border-top:1px solid var(--border); background:var(--raised);
  padding:52px 0; font-size:14.5px; color:var(--ink-3); }
footer .cols { display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; }
footer nav { display:flex; flex-wrap:wrap; gap:20px; }
footer a { color:var(--ink-2); }
footer .fine { margin-top:28px; font-size:13px; max-width:78ch; }

@media (max-width:820px) {
  .split { grid-template-columns:1fr; gap:36px; }
  .security { grid-template-columns:1fr; gap:14px; }
  .status li, .layers li { grid-template-columns:1fr; gap:4px; }
  .producthead { grid-template-columns:1fr; gap:18px; }
  .appicon { width:82px; height:82px; border-radius:19px; }
  section { padding:56px 0; }
  .band .wrap { padding:56px 24px 52px; }
  nav.links { gap:15px; font-size:14px; }
  nav.links a.hide-sm { display:none; }
  .cta.second { margin-left:0; display:block; }
}

/* A placeholder that must be filled before launch. Deliberately ugly so it
   cannot survive a proofread unnoticed. */
.gap { display:inline-block; background:#fff3cd; color:#6b4b00; border:1px dashed #d9a520;
  border-radius:5px; padding:1px 8px; font-size:.92em; font-weight:600; }

/* ------------------------------------------------------------- offer bar */
/* The one loud thing on the site, and it earns it: two months free is the
   reason to try rather than read. Borrowed from Blues' own gradient in the
   app so the site and the assistant look like the same company -- green
   leading, because this is an offer, not an AI feature.

   The sweep is slow on purpose. It sits above every page, and anything
   faster becomes something to look away from. */
.offerbar {
  position:relative; overflow:hidden;
  background:linear-gradient(96deg,#1d8752 0%,#27874e 26%,#14708f 62%,#3162d8 100%);
  background-size:220% 100%;
  animation:offerSweep 18s ease-in-out infinite;
  color:#fff; font-size:14.5px;
}
@keyframes offerSweep {
  0%,100% { background-position:0% 50%; }
  50%     { background-position:100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .offerbar { animation:none; background-size:100% 100%; }
}
.offerbar .wrap {
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:11px 24px; text-align:center; flex-wrap:wrap;
}
.offerbar strong { font-weight:700; }
.offerbar .sparkle { flex:0 0 auto; width:17px; height:17px; opacity:.95; }
.offerbar a.go {
  color:#fff; font-weight:700; white-space:nowrap;
  border-bottom:2px solid rgba(255,255,255,.55); padding-bottom:1px;
}
.offerbar a.go:hover { text-decoration:none; border-bottom-color:#fff; }
@media (max-width:640px) {
  .offerbar .wrap { padding:10px 18px; font-size:13.5px; gap:9px; }
  .offerbar .sparkle { display:none; }
}

/* ----------------------------------------------------------- signup form */
.signup { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; max-width:560px; }
.signup input[type="email"] {
  flex:1 1 260px; min-width:0; padding:13px 16px; font:inherit; font-size:16px;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--grid); border-radius:11px;
}
.signup input[type="email"]::placeholder { color:var(--ink-3); }
.signup input[type="email"]:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(20,112,143,.14);
}
.signup button {
  padding:13px 26px; border:0; border-radius:11px; cursor:pointer;
  background:var(--accent); color:#fff; font:inherit; font-size:16px; font-weight:600;
  transition:filter .16s ease;
}
.signup button:hover { filter:brightness(1.08); }
.signup button:active { transform:scale(.99); }
.signup .note { flex:1 1 100%; font-size:13.5px; color:var(--ink-3); margin:0; }

/* -------------------------------------------------------------- articles */
.dateline { font-size:14px; color:var(--ink-3); margin:0 0 14px; letter-spacing:.01em; }

/* Nineteen articles in one long list is a scroll. The filter turns the
   archive into "show me the four about billing" without a page load. */
.filters { display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 30px; }
.filters button {
  padding:8px 15px; font:inherit; font-size:14.5px; font-weight:500; cursor:pointer;
  color:var(--ink-2); background:var(--surface);
  border:1px solid var(--grid); border-radius:999px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.filters button:hover { border-color:var(--ink-3); color:var(--ink); }
.filters button[aria-pressed="true"] {
  background:var(--ink); color:var(--page); border-color:var(--ink);
}

.archive { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); }
.archive a {
  display:block; padding:19px 21px; text-decoration:none;
  background:var(--surface); border:1px solid var(--grid); border-radius:14px;
  transition:border-color .15s ease, transform .15s ease;
}
.archive a:hover { border-color:var(--ink-3); transform:translateY(-2px); text-decoration:none; }
.archive .meta {
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  font-size:12.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  margin-bottom:9px;
}
.archive .meta .when { color:var(--ink-3); font-weight:500; letter-spacing:.03em; text-transform:none; }
.archive h3 { font-size:17.5px; line-height:1.34; margin:0 0 7px; color:var(--ink); }
.archive p { font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:0; }
.archive a[hidden] { display:none; }
.archive .none { grid-column:1/-1; color:var(--ink-3); padding:20px 2px; }

/* ------------------------------------------------------------ trial signup */
.startbox {
  display:grid; gap:44px; align-items:start;
  grid-template-columns:1.05fr .95fr;
  padding:38px 40px;
  background:var(--surface); border:1px solid var(--grid); border-radius:20px;
}
.startbox h2 { margin-top:6px; }
.startbox .signup { margin-top:8px; }
@media (max-width:860px) {
  .startbox { grid-template-columns:1fr; gap:28px; padding:28px 24px; }
}

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

/* ---------------------------------------------------------------- ask blues */
/* The launcher stays at the right edge so it remains visible when blue page
   artwork reaches the bottom. It returns to a compact bottom control on phones. */
.sc-launch {
  position:fixed; right:0; top:50%; bottom:auto; z-index:60;
  width:58px; min-height:152px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px;
  padding:16px 10px; border:0; border-radius:19px 0 0 19px; cursor:pointer;
  color:#fff; font:inherit; font-size:15px; font-weight:600;
  background:linear-gradient(122deg,#3162d8 0%,#6b5ce7 48%,#14708f 100%);
  background-size:180% 100%;
  box-shadow:0 6px 22px rgba(20,26,45,.24), 0 2px 6px rgba(20,26,45,.14);
  transform:translateY(-50%);
  transition:transform .18s ease, box-shadow .18s ease, background-position .5s ease;
}
.sc-launch::after {
  content:''; position:absolute; top:10px; right:9px; width:8px; height:8px;
  border:2px solid rgba(255,255,255,.9); border-radius:50%; background:#6fffc4;
  box-shadow:0 0 0 0 rgba(111,255,196,.55);
  animation:scBluesPulse 2s ease-out infinite;
}
.sc-launch-label {
  writing-mode:vertical-rl; transform:rotate(180deg);
  letter-spacing:.025em; white-space:nowrap;
}
.sc-launch:hover {
  transform:translateY(calc(-50% - 2px)); background-position:100% 50%;
  box-shadow:0 10px 28px rgba(20,26,45,.28), 0 3px 8px rgba(20,26,45,.16);
}
.sc-launch:active { transform:translateY(-50%); }
.sc-launch:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
.sc-launch svg { width:21px; height:21px; flex:0 0 auto; transform-origin:center; animation:scBluesListening 2.6s ease-in-out infinite; }

@keyframes scBluesPulse {
  0% { box-shadow:0 0 0 0 rgba(111,255,196,.58); }
  65%,100% { box-shadow:0 0 0 9px rgba(111,255,196,0); }
}
@keyframes scBluesListening {
  0%,100% { transform:translateY(0) rotate(0); }
  45% { transform:translateY(-2px) rotate(-5deg); }
  60% { transform:translateY(-2px) rotate(4deg); }
}

.sc-panel {
  position:fixed; right:76px; top:50%; bottom:auto; z-index:61;
  display:flex; flex-direction:column;
  width:min(390px, calc(100vw - 44px)); height:min(560px, calc(100vh - 130px));
  background:var(--page); border:1px solid var(--grid); border-radius:18px;
  box-shadow:0 18px 50px rgba(20,26,45,.22), 0 4px 14px rgba(20,26,45,.12);
  overflow:hidden;
  opacity:0; transform:translateY(calc(-50% + 10px)) scale(.985);
  transition:opacity .2s ease, transform .2s ease;
}
.sc-panel.sc-in { opacity:1; transform:translateY(-50%); }

/* The closed panel was still swallowing clicks.
 *
 * blues-chat.js does `panel.hidden = true` on close, which looks like it hides
 * it -- but `[hidden]` is a user-agent rule and `.sc-panel { display:flex }`
 * is a class selector, so the class wins and the attribute does nothing. The
 * panel stayed laid out at up to 390x560, fixed over the bottom-right corner
 * of every page at z-index 61, with `opacity:0`. Opacity does not remove an
 * element from hit testing, so every click that landed in that rectangle went
 * to an invisible chat window instead of the page: buttons in the lower right
 * of a long page simply did nothing, while the same control higher up worked.
 *
 * This was twice misdiagnosed as a stale stylesheet. */
.sc-panel[hidden] { display:none; }

/* Belt and braces for the 200ms between the class coming off and `hidden`
 * being set, when the panel is mid-fade and still hit-testable. */
.sc-panel:not(.sc-in) { pointer-events:none; }
.sc-panel.sc-in { pointer-events:auto; }

.sc-head {
  display:flex; align-items:center; gap:11px; padding:14px 14px 14px 16px;
  color:#fff; background:linear-gradient(122deg,#3162d8 0%,#6b5ce7 52%,#14708f 100%);
}
.sc-avatar {
  display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto;
  border-radius:50%; background:rgba(255,255,255,.18);
}
.sc-avatar svg { width:19px; height:19px; }
.sc-who { flex:1; min-width:0; line-height:1.3; }
.sc-who strong { display:block; font-size:15.5px; font-weight:700; }
.sc-who span { display:block; font-size:11.5px; opacity:.86; }
.sc-close {
  flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  border:0; border-radius:8px; cursor:pointer;
  color:#fff; background:rgba(255,255,255,.14);
}
.sc-close:hover { background:rgba(255,255,255,.26); }
.sc-close svg { width:16px; height:16px; }

.sc-log { flex:1; overflow-y:auto; padding:18px 16px 6px; }
.sc-row { display:flex; margin-bottom:13px; }
.sc-row.sc-me { justify-content:flex-end; }
.sc-bubble {
  max-width:85%; padding:11px 14px; border-radius:15px;
  font-size:14.7px; line-height:1.56;
}
.sc-blues .sc-bubble {
  color:var(--ink); background:var(--surface);
  border:1px solid var(--grid); border-bottom-left-radius:5px;
}
.sc-me .sc-bubble {
  color:#fff; background:var(--brand); border-bottom-right-radius:5px;
}
.sc-bubble a { color:var(--accent); font-weight:500; }
.sc-me .sc-bubble a { color:#fff; }

.sc-links { display:flex; flex-direction:column; gap:5px; margin-top:11px; }
.sc-links a {
  display:block; padding:8px 11px; font-size:13.6px; font-weight:600;
  color:var(--accent); text-decoration:none;
  background:var(--page); border:1px solid var(--grid); border-radius:9px;
}
.sc-links a:hover { border-color:var(--accent); text-decoration:none; }

.sc-chips { display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 14px; }
.sc-chips button {
  padding:7px 13px; font:inherit; font-size:13.4px; cursor:pointer;
  color:var(--ink-2); background:var(--surface);
  border:1px solid var(--grid); border-radius:999px;
}
.sc-chips button:hover { border-color:var(--accent); color:var(--accent); }

.sc-dots { display:inline-flex; gap:4px; padding:2px 0; }
.sc-dots i {
  width:6px; height:6px; border-radius:50%; background:var(--ink-3);
  animation:scBlink 1.15s ease-in-out infinite;
}
.sc-dots i:nth-child(2) { animation-delay:.16s; }
.sc-dots i:nth-child(3) { animation-delay:.32s; }
@keyframes scBlink { 0%,80%,100% { opacity:.28; } 40% { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .sc-dots i { animation:none; opacity:.6; }
  .sc-panel { transition:none; }
  .sc-launch::after, .sc-launch svg { animation:none; }
}

.sc-ask {
  display:flex; gap:8px; padding:12px 14px;
  border-top:1px solid var(--grid); background:var(--surface);
}
.sc-ask input {
  flex:1; min-width:0; padding:11px 14px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--page);
  border:1px solid var(--grid); border-radius:11px;
}
.sc-ask input:focus { outline:none; border-color:var(--accent); }
.sc-ask button {
  flex:0 0 auto; width:42px; display:grid; place-items:center;
  border:0; border-radius:11px; cursor:pointer;
  color:#fff; background:var(--accent);
}
.sc-ask button:hover { filter:brightness(1.09); }
.sc-ask button svg { width:19px; height:19px; }

@media (max-width:560px) {
  .sc-launch { right:max(16px, env(safe-area-inset-right)); top:auto; bottom:max(16px, env(safe-area-inset-bottom)); width:52px; min-height:52px; flex-direction:row; padding:14px; border-radius:50%; transform:none; }
  .sc-launch::after { top:4px; right:3px; }
  .sc-launch:hover { transform:translateY(-2px); }
  .sc-launch:active { transform:none; }
  .sc-launch-label { display:none; }
  .sc-panel {
    right:12px; left:12px; top:auto; bottom:80px; width:auto;
    height:min(72vh, calc(100vh - 110px));
    transform:translateY(10px) scale(.985);
  }
  .sc-panel.sc-in { transform:none; }
}
@media print { .sc-launch, .sc-panel, .offerbar { display:none !important; } }

/* ---------------------------------------------------------- screenshot grid */
.shots { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }
.shots figure { margin:0; }
.shots img {
  display:block; width:100%; height:auto; border-radius:13px;
  border:1px solid var(--grid); background:var(--surface);
}
.shots figcaption { margin-top:9px; font-size:14px; color:var(--ink-3); }

/* -------------------------------------------------------- cards that link */
a.card {
  display:block; color:inherit; text-decoration:none;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
a.card:hover {
  text-decoration:none; transform:translateY(-2px);
  border-color:var(--ink-3); box-shadow:0 8px 22px rgba(20,26,45,.09);
}
a.card h3 { color:var(--ink); }
.card .more {
  display:inline-block; margin-top:13px;
  font-size:14.5px; font-weight:600; color:var(--accent);
}

/* ===========================================================================
   DEVICE RIGS
   ---------------------------------------------------------------------------
   Flat full-window screenshots tell a visitor almost nothing -- at page width
   the interface shrinks to grey confetti and reads as "some software". These
   put the app inside real device shells, angled, at several sizes at once, so
   the impression is "this runs everywhere and it is good-looking" before a
   single label is read.

   The shells are CSS rather than image mockups: they stay crisp on any
   display, they re-theme with the site, they cost no download, and swapping a
   screenshot is one src attribute rather than a new render.

   Every rig sits on the Founders Edition artwork -- the theme given to the
   practices who were here first -- so the mockups and the product share a
   palette.
   ======================================================================== */

.rig {
  position:relative; isolation:isolate;
  border-radius:24px; overflow:hidden;
  padding:clamp(38px,6vw,74px) clamp(18px,4vw,54px);
  background:#1a2352;
  box-shadow:0 22px 60px rgba(16,22,54,.28), 0 4px 14px rgba(16,22,54,.16);
}
.rig::before {                       /* the artwork */
  content:""; position:absolute; inset:0; z-index:0;
  background:url("founders-landscape.webp") center 34% / cover no-repeat;
}
.rig::after {                        /* scrim, so white device bezels separate */
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(10,14,42,.62) 0%, rgba(10,14,42,0) 62%),
    linear-gradient(184deg, rgba(10,14,42,.30) 0%, rgba(10,14,42,.10) 42%, rgba(10,14,42,.48) 100%);
}
.rig > * { position:relative; z-index:2; }

/* Perspective lives on the stage so every device shares one vanishing point;
   set it per-device and they each look bent their own way. */
.stage {
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(10px,2.4vw,30px);
  perspective:1900px; perspective-origin:50% 42%;
  transform-style:preserve-3d;
}

.dev { --rot:0deg; --tilt:0deg; --lift:0px; --z:0px; flex:0 0 auto; }
.dev > .shell {
  transform:translateY(var(--lift)) rotateY(var(--rot)) rotateX(var(--tilt)) translateZ(var(--z));
  transform-origin:50% 80%;
  transition:transform .55s cubic-bezier(.22,.7,.28,1);
}
.rig:hover .dev > .shell { transform:translateY(var(--lift)) rotateY(calc(var(--rot) * .45)) rotateX(calc(var(--tilt) * .45)) translateZ(var(--z)); }
@media (prefers-reduced-motion: reduce) {
  .dev > .shell, .rig:hover .dev > .shell { transition:none; }
}

.dev .scr { overflow:hidden; background:#0d1330; }
.dev .scr img { display:block; width:100%; height:100%; object-fit:cover; object-position:left top; }

/* ------------------------------------------------------------------ phone */
.dev.phone { width:var(--w,168px); }
.dev.phone .shell {
  position:relative; border-radius:26px; padding:7px;
  background:linear-gradient(148deg,#f2f3f7 0%,#c9ccd8 38%,#8f94a8 62%,#e8eaf1 100%);
  box-shadow:0 26px 44px rgba(8,12,36,.42), 0 6px 14px rgba(8,12,36,.3);
}
.dev.phone .scr { border-radius:20px; aspect-ratio:9 / 19.5; }
.dev.phone .shell::after {           /* the pill cutout */
  content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:31%; height:8px; border-radius:99px; background:#0b1024; z-index:2;
}

/* ----------------------------------------------------------------- tablet */
.dev.tablet { width:var(--w,320px); }
.dev.tablet .shell {
  border-radius:20px; padding:11px;
  background:linear-gradient(148deg,#eef0f5 0%,#c6cad6 40%,#9297aa 64%,#e5e8ef 100%);
  box-shadow:0 30px 52px rgba(8,12,36,.42), 0 7px 16px rgba(8,12,36,.28);
}
.dev.tablet .scr { border-radius:11px; aspect-ratio:4 / 3; }

/* ----------------------------------------------------------------- laptop */
.dev.laptop { width:var(--w,470px); }
.dev.laptop .shell { position:relative; }
.dev.laptop .lid {
  border-radius:12px 12px 4px 4px; padding:11px 11px 13px;
  background:linear-gradient(148deg,#eceef4 0%,#c3c7d4 42%,#8e93a6 66%,#e2e5ed 100%);
  box-shadow:0 26px 46px rgba(8,12,36,.4);
}
.dev.laptop .scr { border-radius:4px; aspect-ratio:16 / 10; }
.dev.laptop .base {                   /* the wedge under the hinge */
  height:11px; margin:0 -7%; border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#d3d6e0 0%,#a8adbf 52%,#7d8296 100%);
  box-shadow:0 12px 22px rgba(8,12,36,.36);
}
.dev.laptop .base::after {            /* the notch you open it by */
  content:""; display:block; width:15%; height:3px; margin:0 auto;
  border-radius:0 0 4px 4px; background:rgba(10,14,38,.28);
}

/* ---------------------------------------------------------------- desktop */
.dev.desktop { width:var(--w,520px); }
.dev.desktop .lid {
  border-radius:12px; padding:13px 13px 15px;
  background:linear-gradient(148deg,#e9ebf2 0%,#bfc3d1 42%,#8a8fa3 68%,#dfe2ea 100%);
  box-shadow:0 28px 50px rgba(8,12,36,.42);
}
.dev.desktop .scr { border-radius:5px; aspect-ratio:16 / 9; }
.dev.desktop .stand {
  width:16%; height:24px; margin:0 auto;
  background:linear-gradient(180deg,#b9bdcb,#8f94a7);
}
.dev.desktop .foot {
  width:34%; height:7px; margin:0 auto; border-radius:99px;
  background:linear-gradient(180deg,#a9aebe,#7b8094);
  box-shadow:0 10px 20px rgba(8,12,36,.34);
}

/* -------------------------------------------------------------- rig label */
.rig .cap {
  margin:clamp(26px,4vw,44px) auto 0; max-width:60ch; text-align:center;
  color:rgba(255,255,255,.94);
}
.rig .cap .eyebrow { color:#ffd6a3; }
.rig .cap h2, .rig .cap h3 { color:#fff; margin:0 0 10px; }
.rig .cap p { color:rgba(255,255,255,.8); font-size:16px; margin:0 auto; max-width:56ch; }
.rig .cap .badges {
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:20px;
}
.rig .cap .badges span {
  padding:6px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
}

/* Narrow screens cannot hold three angled devices. Rather than shrink them
   into illegibility, drop the supporting ones and keep the phone honest. */
@media (max-width:960px) {
  .stage { gap:14px; perspective:1200px; }
  .dev.laptop { width:min(58vw,380px); }
  .dev.tablet { width:min(30vw,190px); }
  .dev.phone  { width:min(20vw,120px); }
}
@media (max-width:680px) {
  .rig { border-radius:18px; }
  .dev.tablet, .dev.desktop { display:none; }
  .dev.laptop { width:min(72vw,430px); }
  .dev.phone { width:min(28vw,132px); }
  .stage { align-items:flex-end; }
}

/* ---------------------------------------------------------------- the rig,
   on a phone.

   On a pointer device the devices straighten and draw together when the
   cursor enters the rig -- see `.rig:hover .dev > .shell` above. A phone has
   no cursor, so that never fired, and the two remaining devices sat frozen at
   full splay with a gap between them. The effect people see on a desktop was
   simply missing from the version most visitors get.

   Scroll is the phone's equivalent of hover, so the same movement is driven
   by the scroll position instead: as the rig travels up through the viewport
   the devices rotate toward square and slide toward each other, arriving
   composed by the time it is fully in view.

   `animation-timeline: view()` does this with no JavaScript and no scroll
   listener -- the browser ties the animation to the element's own progress
   through the viewport, which stays smooth because it never touches the main
   thread. It is wrapped in @supports so that a browser without it shows
   exactly what it shows today rather than something broken; the devices just
   stay splayed, which is the current behaviour and no worse.

   --conv is per device and signed: the laptop is on the left so it travels
   right, the phone is on the right so it travels left. They meet in between,
   closing the gap the way the hover state does. */
@media (max-width:960px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rig .dev.laptop { --conv:24px; }
    .rig .dev.phone  { --conv:-24px; }
    .rig .dev.tablet,
    .rig .dev.desktop { --conv:0px; }

    /* The timeline is named and declared on .rig, not taken from view() on
       the shell itself. .rig sets overflow:hidden, which makes it a scroll
       container, so view() measured from inside it compares the shell against
       the rig's own box -- where the shell is always fully visible, so the
       animation sat permanently at 100% and the devices were simply frozen in
       their end position. Naming the timeline on .rig measures .rig against
       the viewport, which is the thing actually scrolling. */
    .rig { view-timeline-name:--rig-view; }

    .rig .dev > .shell {
      animation:rig-converge linear both;
      animation-timeline:--rig-view;
      /* Starts once a fifth of the rig has entered, finishes before it is
         centred, so the movement is over while it is still being read. */
      animation-range:entry 20% cover 45%;
    }
  }
}

@keyframes rig-converge {
  from {
    transform:translateX(0)
              translateY(var(--lift))
              rotateY(var(--rot))
              rotateX(var(--tilt))
              translateZ(var(--z));
  }
  to {
    transform:translateX(var(--conv,0px))
              translateY(var(--lift))
              rotateY(calc(var(--rot) * .28))
              rotateX(calc(var(--tilt) * .28))
              translateZ(var(--z));
  }
}

/* ===========================================================================
   DARK MODE
   ---------------------------------------------------------------------------
   Not a grey inversion. The dark palette is the Founders Edition twilight --
   the same deep indigo-into-violet the launch-year theme paints the app with --
   so choosing dark on the site shows you a real thing the product does rather
   than a generic night mode.

   Three states, like every well-behaved site: an explicit choice stamps
   data-theme on <html> and wins; with no choice, the operating system decides.
   Tokens are redefined, never individual colours, so anything built on the
   tokens follows without being touched.
   ======================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:#0a1029; --surface:#141c40; --raised:#1b2450;
    --ink:#eef1fc; --ink-2:#bcc6e8; --ink-3:#8792bd;
    --grid:#26305c; --border:rgba(226,232,255,0.13);
    --accent:#5ec8e8; --good:#4bd4a4;
    --brand:#7b9dff; --leaf:#5cc2f0; --plum:#a893ff; --rose:#ff6fc0;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 26px 52px -26px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --page:#0a1029; --surface:#141c40; --raised:#1b2450;
  --ink:#eef1fc; --ink-2:#bcc6e8; --ink-3:#8792bd;
  --grid:#26305c; --border:rgba(226,232,255,0.13);
  --accent:#5ec8e8; --good:#4bd4a4;
  --brand:#7b9dff; --leaf:#5cc2f0; --plum:#a893ff; --rose:#ff6fc0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 26px 52px -26px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* The header's translucent fill is a literal colour rather than a token,
   because backdrop-filter needs an alpha the tokens do not carry. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) header.bar { background:rgba(10,16,41,.86); }
}
:root[data-theme="dark"] header.bar { background:rgba(10,16,41,.86); }

/* Screenshots and artwork are lit for a white page. Take a little glare off
   them in the dark rather than leaving them burning a hole in the layout. */
:root[data-theme="dark"] .shots img,
:root[data-theme="dark"] .window .screen img,
:root[data-theme="dark"] .today .art img { filter:brightness(.9) contrast(1.02); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shots img,
  :root:not([data-theme="light"]) .window .screen img,
  :root:not([data-theme="light"]) .today .art img { filter:brightness(.9) contrast(1.02); }
}

/* --------------------------------------------------------- header controls */
.bartools { display:flex; align-items:center; gap:8px; }

.accountlogin, .themetoggle, .burger {
  display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto;
  padding:0; border:1px solid var(--grid); border-radius:10px; cursor:pointer;
  color:var(--ink-2); background:var(--surface);
  transition:border-color .15s ease, color .15s ease;
}
.accountlogin:hover, .themetoggle:hover, .burger:hover { border-color:var(--ink-3); color:var(--ink); text-decoration:none; }
.accountlogin svg, .themetoggle svg, .burger svg { width:18px; height:18px; }
/* One button, two glyphs: show the mode you would be switching to. */
.themetoggle .moon { display:block; }
.themetoggle .sun  { display:none; }
:root[data-theme="dark"] .themetoggle .moon { display:none; }
:root[data-theme="dark"] .themetoggle .sun  { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle .moon { display:none; }
  :root:not([data-theme="light"]) .themetoggle .sun  { display:block; }
}

.burger { display:none; }
.burger .x { display:none; }
.burger[aria-expanded="true"] .bars { display:none; }
.burger[aria-expanded="true"] .x { display:block; }

/* ------------------------------------------------------------- mobile menu */
@media (max-width:820px) {
  .burger { display:grid; }
  nav.links {
    position:fixed; inset:64px 0 auto; z-index:19;
    display:block; padding:8px 0 14px;
    background:var(--page); border-bottom:1px solid var(--grid);
    box-shadow:0 18px 34px rgba(8,12,36,.16);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  nav.links.open { transform:none; opacity:1; pointer-events:auto; }
  nav.links a {
    display:block; padding:13px 24px; font-size:16.5px; color:var(--ink);
    border-bottom:1px solid var(--grid);
  }
  nav.links a:last-child { border-bottom:0; }
  nav.links a:hover { background:var(--raised); text-decoration:none; }
  nav.links a[aria-current] { color:var(--accent); font-weight:600; }
  nav.links a.hide-sm { display:block; }
}
@media (prefers-reduced-motion: reduce) { nav.links { transition:none; } }

/* -------------------------------------------------------- theme showcase */
.swatchrow { display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.swatchrow span {
  width:26px; height:26px; border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 1px 3px rgba(11,15,14,.16);
}

.themegrid {
  display:grid; gap:20px; margin-top:36px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}
.theme {
  position:relative; margin:0; overflow:hidden;
  background:var(--surface); border:1px solid var(--grid); border-radius:15px;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.theme:hover {
  transform:translateY(-3px); border-color:var(--accent-theme);
  box-shadow:0 12px 28px rgba(11,15,14,.12);
}
.theme .tart { display:block; aspect-ratio:16 / 10; overflow:hidden; background:var(--raised); }
.theme .tart img {
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.7,.28,1);
}
.theme:hover .tart img { transform:scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .theme, .theme .tart img { transition:none; }
  .theme:hover { transform:none; }
  .theme:hover .tart img { transform:none; }
}
.theme figcaption { display:block; padding:15px 17px 17px; }
.theme .tname {
  display:flex; align-items:center; gap:9px;
  font-size:16px; font-weight:600; color:var(--ink);
}
.theme .tname .dot {
  width:11px; height:11px; flex:0 0 auto; border-radius:50%;
  background:var(--accent-theme);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-theme) 18%, transparent);
}
.theme .tdesc {
  display:block; margin-top:7px; font-size:14.5px; line-height:1.55;
  color:var(--ink-3);
}
.theme .tflag {
  position:absolute; top:12px; right:12px; z-index:2;
  padding:5px 11px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; background:rgba(12,18,42,.62); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.24);
}
.theme .tflag.prem { background:rgba(12,18,42,.5); }

/* A row of phones, each turned slightly more than the last, so a set of
   screens reads as a set rather than a contact sheet. The devices overlap by
   a negative gap; z-index counts down from the middle so the near ones sit in
   front the way they would on a desk. */
.stage.fan { gap:clamp(-30px,-2.2vw,-10px); align-items:center; perspective:2200px; }
.stage.fan .dev.phone { width:clamp(112px,12.5vw,166px); }
.stage.fan .dev:nth-child(1) { --rot:32deg;  --tilt:3deg;  --lift:16px;  --z:-140px; z-index:1; }
.stage.fan .dev:nth-child(2) { --rot:19deg;  --tilt:2deg;  --lift:2px;   --z:-70px;  z-index:2; }
.stage.fan .dev:nth-child(3) { --rot:0deg;   --tilt:0deg;  --lift:-16px; --z:0;      z-index:3; }
.stage.fan .dev:nth-child(4) { --rot:-19deg; --tilt:2deg;  --lift:2px;   --z:-70px;  z-index:2; }
.stage.fan .dev:nth-child(5) { --rot:-32deg; --tilt:3deg;  --lift:16px;  --z:-140px; z-index:1; }
@media (max-width:820px) {
  .stage.fan { gap:-14px; }
  .stage.fan .dev:nth-child(1), .stage.fan .dev:nth-child(5) { display:none; }
}
@media (max-width:520px) {
  .stage.fan .dev:nth-child(2), .stage.fan .dev:nth-child(4) { display:none; }
  .stage.fan .dev.phone { width:min(46vw,190px); }
}

/* A quieter rig for use inside a split, where the artwork backdrop would
   fight the text beside it. */
.rig.plain { background:transparent; box-shadow:none; padding:0; overflow:visible; }
.rig.plain::before, .rig.plain::after { display:none; }
.rig.plain .stage { perspective:1500px; }

/* --------------------------------------------------------- reversed mark */
/* The wordmark's ink is near-black, so on the dark page it disappears into
   the header. Same mark, same geometry, same green and blue bars -- only the
   ink is reversed, which is what a reversed lockup is for. */
.brand .rev { display:none; }
:root[data-theme="dark"] .brand .std { display:none; }
:root[data-theme="dark"] .brand .rev { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .std { display:none; }
  :root:not([data-theme="light"]) .brand .rev { display:block; }
}

/* Sizes tuned so three angled devices fit inside the rig's padding at 1080px
   without the outer two being sliced off by overflow:hidden. */
.dev.desktop { width:clamp(280px,32vw,404px); }
.dev.laptop  { width:clamp(230px,26vw,330px); }
.dev.tablet  { width:clamp(170px,19vw,246px); }
.dev.phone   { width:clamp(96px,11vw,142px); }

/* The fan is one device type repeated, so it can run wider. */
.stage.fan .dev.tablet { width:clamp(128px,15vw,208px); }

.rig .cap .rignote {
  margin-top:14px; font-size:13.5px; color:rgba(255,255,255,.62);
}

/* --------------------------------------------------- rig sizing, corrected */
/* Earlier values let the outer two devices run under the rig's overflow:hidden
   at 1080px. These are sized so the widest arrangement clears the padding with
   room to spare. */
.rig { padding:clamp(34px,5vw,64px) clamp(14px,2.6vw,34px); }
.dev.desktop { width:clamp(240px,27vw,350px); }
.dev.laptop  { width:clamp(200px,22vw,280px); }
.dev.tablet  { width:clamp(150px,16vw,205px); }
.dev.phone   { width:clamp(94px,10vw,132px); }

/* The fan overlaps its devices. `gap` cannot take a negative length -- the
   declaration is simply dropped -- so the overlap has to come from margins,
   and the angles have to be steep enough to read as a fan rather than a row. */
.stage.fan { gap:0; align-items:center; perspective:2400px; }
.stage.fan .dev + .dev { margin-left:-5.5%; }
.stage.fan .dev.tablet { width:clamp(150px,19vw,262px); }
.stage.fan .dev:nth-child(1) { --rot:44deg;  --tilt:6deg;  --lift:22px;  --z:-190px; z-index:1; }
.stage.fan .dev:nth-child(2) { --rot:27deg;  --tilt:4deg;  --lift:4px;   --z:-92px;  z-index:2; }
.stage.fan .dev:nth-child(3) { --rot:0deg;   --tilt:0deg;  --lift:-24px; --z:40px;   z-index:3; }
.stage.fan .dev:nth-child(4) { --rot:-27deg; --tilt:4deg;  --lift:4px;   --z:-92px;  z-index:2; }
.stage.fan .dev:nth-child(5) { --rot:-44deg; --tilt:6deg;  --lift:22px;  --z:-190px; z-index:1; }
.stage.fan .dev > .shell { transform-origin:50% 50%; }

/* Two rigs in a row would otherwise show the same picture twice. */
.rig.alt::before { background-position:center 78%; transform:scaleX(-1); }

/* --------------------------------------------------------- fan, sized right */
/* Five devices at width w overlapping by f take 5w - 4fw across. At the rig's
   usable ~968px that means w must stay near 200px with a 12% overlap, or the
   outer two run off both edges -- which is what was happening. */
.stage.fan .dev.tablet { width:clamp(118px,14.5vw,200px); }
.stage.fan .dev + .dev { margin-left:-12%; }
/* The middle screen is the one you are meant to read. */
.stage.fan .dev:nth-child(3) .shell { scale:1.1; }
.stage.fan .dev:nth-child(3) { --lift:-18px; }

/* Give the fan's backdrop a crop with sky behind the devices and water behind
   the caption, so neither sits on a busy part of the picture. */
.rig.alt::before { background-position:center 30%; }
.rig.alt::after {
  background:
    radial-gradient(130% 80% at 50% 118%, rgba(10,14,42,.74) 0%, rgba(10,14,42,0) 58%),
    linear-gradient(182deg, rgba(10,14,42,.16) 0%, rgba(10,14,42,.06) 34%, rgba(10,14,42,.62) 100%);
}

/* ------------------------------------------------------------ fan, opened */
/* At 44 degrees the outer two screens foreshortened to almost nothing and the
   12% overlap finished them off -- five screens read as three. Gentler angles
   and a smaller overlap keep all five legible as separate screens, which is
   the only reason to show five. */
.stage.fan .dev.tablet { width:clamp(132px,16vw,200px); }
.stage.fan .dev + .dev { margin-left:-4%; }
.stage.fan .dev:nth-child(1) { --rot:31deg;  --tilt:5deg;  --lift:20px;  --z:-150px; }
.stage.fan .dev:nth-child(2) { --rot:17deg;  --tilt:3deg;  --lift:4px;   --z:-70px; }
.stage.fan .dev:nth-child(3) { --rot:0deg;   --tilt:0deg;  --lift:-20px; --z:50px; }
.stage.fan .dev:nth-child(4) { --rot:-17deg; --tilt:3deg;  --lift:4px;   --z:-70px; }
.stage.fan .dev:nth-child(5) { --rot:-31deg; --tilt:5deg;  --lift:20px;  --z:-150px; }
.stage.fan .dev:nth-child(3) .shell { scale:1.14; }

/* ===========================================================================
   CONTRAST CORRECTIONS
   ---------------------------------------------------------------------------
   Measured with _build/check_contrast.py rather than eyeballed. Six things
   failed WCAG AA and are corrected here:

     --ink-3 at 3.10:1  secondary text was decorative-grey, not readable text
     --leaf  at 3.20:1  the green eyebrow, same problem
     white on the dark --accent (1.93:1) -- a bright cyan button cannot carry
       white text; in dark mode the label goes near-black instead
     the offer bar's two green stops (4.10 and 3.41) against its white text
     form-input borders, which need 3:1 as interactive boundaries

   Hue and saturation are preserved in every case; only lightness moved, so
   nothing changes colour, it just stops being too pale to read.
   ======================================================================== */

:root { --ink-3:#697472; --leaf:#0a68a8; --field:#83938f; --on-accent:#ffffff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-3:#8792bd; --leaf:#5cc2f0; --field:#5164b7; --on-accent:#0a1029;
  }
}
:root[data-theme="dark"] {
  --ink-3:#8792bd; --leaf:#5cc2f0; --field:#5164b7; --on-accent:#0a1029;
}

/* Anything filled with --accent takes the matching label colour. White on a
   pale cyan is the single worst pairing in the dark palette. */
.signup button,
.sc-ask button,
.startbox .signup button { color:var(--on-accent); }
:root[data-theme="dark"] .get,
:root[data-theme="dark"] a.get { color:var(--on-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .get,
  :root:not([data-theme="light"]) a.get { color:var(--on-accent); }
}

/* Decorative hairlines can stay quiet; the edge of a control someone has to
   find and click cannot. */
.signup input[type="email"], .sc-ask input { border-color:var(--field); }

/* Cards size to their own text instead of stretching to the tallest in the
   row, which was leaving a pale strip under the shorter descriptions. */
.themegrid { align-items:start; }

/* ------------------------------------------------- disclosure hit area fix */
/* The padding used to sit on <details>, which meant the 17px above and below
   every summary belonged to the container rather than the control. Clicking
   there — including on plenty of the whitespace beside the + — did nothing,
   because only the summary toggles. Moving the padding onto the summary makes
   the entire row the target, edge to edge.

   The row also now lights up on hover, so it reads as clickable before you
   find that out by clicking. */
.faq details { padding:0; }
.faq summary {
  z-index:1;
  padding:18px 20px 18px 8px;
  margin:-2px -20px -2px -8px;
  border-radius:11px;
  transition:background-color .14s ease;
}
.faq summary:hover { background:color-mix(in srgb, var(--accent) 6%, var(--page)); }
.faq summary:focus-visible {
  outline:2px solid var(--accent); outline-offset:-2px;
  background:color-mix(in srgb, var(--accent) 9%, var(--page));
}
/* The answer needs the breathing room the container padding used to give it. */
.faq details[open] > :last-child { margin-bottom:17px; }
@media (prefers-reduced-motion: reduce) { .faq summary { transition:none; } }

/* ------------------------------------------------------- store badges */
/* "Coming soon" rather than a live Play link, because the listing does not
   exist yet and a badge that 404s is worse than one that is honest. Swap the
   href and drop .soon when it goes live. */
.stores { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:26px; }
.storebadge {
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 18px 11px 15px; border-radius:12px; text-decoration:none;
  color:var(--ink); background:var(--surface); border:1px solid var(--grid);
  transition:border-color .15s ease, transform .15s ease;
}
.storebadge:hover { text-decoration:none; border-color:var(--ink-3); transform:translateY(-1px); }
.storebadge svg { width:24px; height:24px; flex:0 0 auto; }
.storebadge .lines { display:block; line-height:1.25; }
.storebadge .small { display:block; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.storebadge .big { display:block; font-size:16px; font-weight:700; }
.storebadge.soon { cursor:default; opacity:.92; }
.storebadge.soon:hover { transform:none; border-color:var(--grid); }
.storebadge .tag {
  margin-left:4px; padding:3px 8px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--leaf);
}

/* --------------------------------------------------- Blues musical-note mark */
/* The note distinguishes the assistant from the LogBlues product wordmark. */
.notemark { display:inline-flex; align-items:center; gap:6px; }
.notemark svg { width:14px; height:14px; flex:0 0 auto; color:var(--leaf); }
nav.links a .notemark svg { width:13px; height:13px; }

/* --------------------------------------------- email capture inside the chat */
.sc-capture { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.sc-capture input[type="email"] {
  flex:1 1 100%; min-width:0; padding:10px 13px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--page);
  border:1px solid var(--field); border-radius:10px;
}
.sc-capture input[type="email"]:focus { outline:none; border-color:var(--accent); }
.sc-capture button {
  flex:1 1 100%; padding:10px 16px; border:0; border-radius:10px; cursor:pointer;
  background:var(--accent); color:var(--on-accent);
  font:inherit; font-size:15px; font-weight:600;
}
.sc-capture button:hover { filter:brightness(1.08); }

/* --------------------------------------------- disclosure rows, more obvious */
/* The hit area was already the full row, but there was nothing to tell you
   that before you clicked. Now the row lifts on hover, the marker grows and
   takes a tinted disc, and the cursor is a pointer across the whole bar. */
.faq summary { position:relative; cursor:pointer; }
.faq summary::after {
  display:grid; place-items:center;
  width:30px; height:30px; margin-right:-4px;
  border-radius:50%; font-size:20px; font-weight:400;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  transition:background-color .14s ease, transform .14s ease;
}
.faq summary:hover::after {
  background:color-mix(in srgb, var(--accent) 26%, transparent);
  transform:scale(1.08);
}
.faq details[open] summary::after {
  background:color-mix(in srgb, var(--accent) 20%, transparent);
}
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition:none; } }

/* ------------------------------------------------ selective card artwork
   Each card now uses purposeful artwork with restrained overlays so the row
   remains coherent rather than reading as three competing billboards. */
.today .art img { display:none; }
.today .art { background:#111c33; }
.features .today:nth-child(2) .art { background:#132538; }
.features .today:nth-child(3) .art { background:#1a1b33; }
.today .art::after {
  background:linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(0,0,0,0) 55%);
}
.features .clinic-arrival .art img,
.features .blues-brand .art img,
.features .today:nth-child(3) .art img { display:block; }
.features .clinic-arrival .art img { object-position:center 46%; }
.features .today:nth-child(3) .art img { object-fit:cover; object-position:center; }
.features .clinic-arrival .art::after {
  background:linear-gradient(to bottom, rgba(5,9,18,.04) 0%, rgba(5,9,18,.18) 42%, rgba(5,9,18,.88) 100%);
}
.features .blues-brand .art::after {
  background:linear-gradient(to bottom, rgba(5,9,18,.02) 0%, rgba(5,9,18,.12) 48%, rgba(5,9,18,.78) 100%);
}
.features .today:nth-child(3) .art::after {
  background:linear-gradient(to bottom, rgba(5,9,18,.01) 0%, rgba(5,9,18,.08) 58%, rgba(5,9,18,.48) 100%);
}

/* The three card footers carried the same app icon three times over, which
   read as a row of identical logos rather than as three products. The name
   already says which app it is. */
.today .app { grid-template-columns:1fr auto; }
.today .app .appicon { display:none; }

/* ------------------------------------------------- homepage hero artwork */
/* The right half of the hero was empty. It has been through three answers:
   the Founders landscape photograph, which was the same file .rig already
   used for the device mockups so the picture appeared three times; a drawn
   mountain silhouette, which read as landscape photography rather than
   clinic; and a drawn schedule column, which was honest but plain.

   It is now its own artwork, painted once per theme -- see .hero-art below.
   The inline SVG that used to live in the markup was removed with it. It had
   been left behind when the CSS moved to the photographs, and with its fill
   rules gone it fell back to solid black: a black clock and a stack of grey
   bars sitting on top of the picture.

   Scoped to .hero-band, never .band -- forty-eight pages share that class. */
.hero-band { position:relative; overflow:hidden; }
.hero-band > .wrap { position:relative; z-index:1; }

.hero-art {
  position:absolute; inset:0 0 0 auto;
  width:min(62%, 860px);
  pointer-events:none;
  z-index:0;
  /* The Founders Edition landscape, the same artwork the product wears.
     It replaced an inline SVG of a schedule column: that drawing inherited
     `color` and so needed no second asset, which was the right trade while
     there was no artwork. There is now, in both themes, painted with its
     left side already falling away to nothing so the words have somewhere
     quiet to sit. */
  /* Each page names its own pair through these two variables; everything
     else about the artwork -- size, position, mask, both dark states -- is
     shared. Adding a page is two lines in a modifier class, not a copy of
     this block. These defaults are the homepage's. */
  --hero-light:url("founders-light.webp");
  --hero-dark:url("founders-dark.webp");
  /* Where the crop sits. `cover` fills the panel and throws away the rest,
     so a picture whose subject is low in the frame loses it to the bottom
     edge -- which is what happened on the download page, where the tree was
     cropped away and only sky was left. Per page, like the images. */
  --hero-pos:right center;
  background:var(--hero-light) var(--hero-pos) / cover no-repeat;
  /* The mask does the melting-into-the-page part, left into the text and
     down into the section border, so the artwork never has a visible edge.
     It matters more here than it did for the drawing: a photograph with a
     hard left edge reads as a pasted rectangle. */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 34%, #000 74%),
                     linear-gradient(to bottom, #000 66%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 34%, #000 74%),
                     linear-gradient(to bottom, #000 66%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}

/* Dark theme gets its own painting rather than a filtered one: the dusk
   version is a different picture, not the day one dimmed. Both dark states
   are covered -- the media query for a phone set to dark, and the explicit
   toggle -- because this site supports both and a rule that only handles one
   leaves half the readers looking at a daylit lake on a navy page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-art { background-image:var(--hero-dark); }
}
:root[data-theme="dark"] .hero-art { background-image:var(--hero-dark); }

/* Per page, from here down. Same lake, a different vantage -- the hero and
   the .rig mockups must never show the same frame twice. */
.hero-art--logblues {
  --hero-light:url("hero-logblues-light.webp");
  --hero-dark:url("hero-logblues-dark.webp");
}

.hero-art--download {
  --hero-light:url("hero-download-light.webp");
  --hero-dark:url("hero-download-dark.webp");
  --hero-pos:right bottom;
  /* The download hero is 860x890 -- nearly square -- while the painting is
     1.777 wide, so `cover` scales it by HEIGHT and crops the width. The whole
     image height was already on the page; the tree was not missing, it was
     behind the email-capture card, which covers the lower half of the band.
     Vertical anchoring could never have fixed that, because there was no
     vertical crop to move.
     Ending the artwork above the card is what fixes it: a shorter panel means
     `cover` scales the picture down, and the tree rises into the part of the
     hero anyone actually sees. */
  bottom:auto;
  height:clamp(300px, 42vw, 540px);
}

.hero-art--assistant {
  --hero-light:url("hero-assistant-light.webp");
  --hero-dark:url("hero-assistant-dark.webp");
}

/* On a phone the artwork was hidden entirely. That was right when it was a
   flat drawing that would have sat behind the words as clutter, and wrong
   once it became a painting -- the phone is where most people meet the site,
   and they were getting the plainest version of it.

   It now runs full-bleed behind the hero instead of beside it, because at
   this width there is no beside: the lede uses the whole column. Three things
   keep the text readable on top of it, and all three are needed.

   1. The image is dropped to a low opacity so it reads as atmosphere.
   2. A vertical mask fades it out downward, so it is strongest at the top
      where there is sky and weakest by the time the copy and buttons arrive.
   3. The crop centres rather than hugging the right edge, since the right
      third of these paintings is the busiest part and the whole width is in
      view here. */
@media (max-width:1050px) {
  .hero-art {
    inset:0;
    width:100%;
    /* Do NOT reset --hero-pos here. Setting it to centre overrode the
       per-page anchor and undid the download page's `right bottom`, which is
       the only reason its tree is in frame at all. Each page keeps its own. */
    opacity:.30;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 52%, transparent 92%);
            mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 52%, transparent 92%);
    -webkit-mask-composite:source-over;
            mask-composite:add;
  }
}
@media (max-width:1050px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-art { opacity:.46; }
}
@media (max-width:1050px) {
  :root[data-theme="dark"] .hero-art { opacity:.46; }
}


/* ------------------------------------------------ the Blues mark, assistant */
/* The Blues icon is drawn once per theme, and the notes are part of the
   artwork now. The separate flying-notes SVG that used to sit above this icon
   has gone with it: the mark already has three notes rising out of it, and two
   sets of notes on one icon is not twice the idea, it is a mistake.

   Two <img> rather than one element with a swapped background, because
   .appicon earns its shadow from filter: drop-shadow(), which reads the
   image's alpha channel and so traces the circle instead of boxing it. That
   only works on real image content. Both files are tiny -- 11 and 17 KB. */
.lightonly { display:block; }
.darkonly  { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lightonly { display:none; }
  :root:not([data-theme="light"]) .darkonly  { display:block; }
}
:root[data-theme="dark"] .lightonly { display:none; }
:root[data-theme="dark"] .darkonly  { display:block; }

.appicon--blues { border-radius:50%; }