/* Calibra site theme (November 2026 redesign): home, /partners, /solaris.
   /story and 404 keep /styles.css. Legal pages carry their own styles.
   The DM Sans faces, the header and the footer live in /chrome.css, shared with /story. */

:root{
  --ink:#1B2433; --body:#4A5160; --bg:#F7F8FA; --card:#FDFDFC;
  --border:#DDE3EC; --border-soft:#C9D6E8;
  --blue:#2C5FA8; --orange:#F28A2E; --orange-text:#B4560F;
  --warm:#FFF4E8; --soft-blue:#E9F0F8; --muted:#6B7280;
  --maxw:1200px; --gutter:clamp(16px,4vw,40px);
  --r-card:20px; --r-panel:32px;
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--body);background:var(--bg);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
p{margin:0}
h1,h2,h3{color:var(--ink);margin:0;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.08}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.12}
h3{font-size:1.15rem;line-height:1.3;letter-spacing:-.01em}
h1 .b,h2 .b{color:var(--blue)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
section{padding:clamp(56px,7.5vw,96px) 0;scroll-margin-top:84px}
.anchor{display:block;position:relative;top:-84px;visibility:hidden}

.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:var(--blue);font-size:15px;font-weight:700;letter-spacing:3px;text-transform:uppercase;line-height:1.3}
.eyebrow::before{content:'';flex:0 0 auto;width:24px;height:2px;background:var(--orange)}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;max-width:62ch}
.lead + .lead{margin-top:16px}
.stack > * + *{margin-top:20px}
.sub{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.55;color:var(--body);max-width:52ch}
.muted{color:var(--muted)}

/* Reveal on scroll. Only hidden when JS is running (html.js), so no-JS readers see everything. */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}

/* Buttons in page bodies (the header's own button styles are in /chrome.css). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:1rem;
  line-height:1.2;padding:12px 22px;border-radius:12px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,transform .15s ease}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#0F1622}
.btn-orange{background:var(--orange);color:var(--ink)}
.btn-orange:hover{background:#E07B22}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--soft-blue)}

/* ---- Layout helpers ----------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.split.top{align-items:start}
@media (max-width:880px){ .split{grid-template-columns:minmax(0,1fr)} }
.head{max-width:760px;margin-bottom:clamp(32px,4vw,48px)}
.head .lead{margin-top:18px}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:clamp(20px,2.4vw,28px)}
.card h3{margin-bottom:6px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:980px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .grid-3{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){ .grid-2,.grid-4{grid-template-columns:minmax(0,1fr)} }

/* ---- Phone panel: warm top half, soft blue bottom half; phone anchored to the top and
   cropped by the panel's bottom edge. ------------------------------------------------- */
.phone-panel{position:relative;overflow:hidden;border-radius:var(--r-panel);
  background:linear-gradient(to bottom,var(--warm) 0 50%,var(--soft-blue) 50% 100%);
  aspect-ratio:1/1.08;display:flex;justify-content:center;align-items:flex-start;padding-top:clamp(28px,5%,48px)}
.phone-panel picture{display:block;width:78%;max-width:440px;flex:0 0 auto}
.phone-panel img{width:100%;height:auto}
.phone-panel.tall{aspect-ratio:1/1.22}
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.phones .phone-panel{aspect-ratio:1/1.2}
@media (max-width:640px){ .phones{grid-template-columns:minmax(0,1fr)} }

/* ---- Hero --------------------------------------------------------------------------- */
.hero{padding-top:clamp(40px,6vw,80px)}
.hero h1{margin-bottom:22px}
.hero .sub{margin-bottom:28px}
.badge{display:inline-block;line-height:0;border-radius:9px}
.badge img{height:50px;width:auto}
/* App Store badge with its QR code. The QR is for desktop visitors only: it shows from
   880px up on devices with a fine pointer, and stays hidden (and, being lazy, unloaded)
   on phones and tablets, where the badge is the better path. */
.get-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.qr{display:none;margin:0;align-items:center;gap:14px}
.qr img{box-sizing:content-box;width:80px;height:80px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:12px}
.qr figcaption{max-width:13ch;font-size:.92rem;line-height:1.35;color:var(--muted)}
@media (min-width:880px) and (hover:hover) and (pointer:fine){ .qr{display:flex} }
.platform-line{margin-top:18px;font-size:1rem}
.platform-line a{font-weight:600;color:var(--blue)}

/* ---- Who it's for ------------------------------------------------------------------- */
/* Full-bleed white band with hairlines; content stays in the 1200px container. Two
   columns that stack at phone width: copy left, capacity card and the two lines right. */
.who{background:#FFFFFF;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:56px;align-items:start}
.who h2{max-width:22ch;margin-bottom:24px}
.who .card{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:32px}
.who .card .lead{max-width:none}
.who .held{margin-top:32px;font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.who .held + p{margin-top:8px;color:var(--body);font-size:1.1rem}

/* ---- The problem (kept from the live site, restyled) -------------------------------- */
.warm{background:var(--warm)}
/* Grey band with hairlines, two columns in the 1200px container (64px gap, top-aligned),
   stacking at phone width. Home: scene left, answer right. /partners reuses it. */
.scene{background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}
.scene-b > :first-child{margin-top:0}
/* Closing rows under both columns: full width, 40px above the callout. */
.scene-tail{margin-top:40px}
.scene-tail > *{max-width:none}
.scene-tail > .highlight:first-child{margin-top:0}
.who + .scene{border-top:0} /* Who it's for already draws that hairline */
@media (max-width:880px){ .scene-grid{grid-template-columns:minmax(0,1fr);gap:40px} }
.scene h2{margin-bottom:8px}
.clock{font-weight:700;color:var(--ink);margin:28px 0 18px;font-size:1.05rem;min-height:1.6em}
.ct{display:inline-block}
.clock.typing::after,.signal .src.typing::after,.signal .verdict.typing::after{
  content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:caret .9s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.seq{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.seq.in{opacity:1;transform:none}
.signal{display:flex;gap:14px;align-items:baseline;padding:15px 18px;margin:10px 0;background:var(--card);
  border:1px solid var(--border);border-left:4px solid var(--muted);border-radius:12px}
.signal.c-red{border-left-color:#E05252}
.signal.c-gold{border-left-color:#F5C242}
.signal.c-amber{border-left-color:#D9731A}
.signal.c-green{border-left-color:#4CAF7D}
.signal .src{font-weight:700;color:var(--ink);min-width:150px;font-size:.95rem;white-space:nowrap}
.signal .verdict{color:var(--body);font-size:1rem}
.turn{margin:30px 0 0;font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1.4}
.coda{margin-top:14px}
.scene .lead{margin-top:28px;max-width:none}
.directives{margin-top:24px}
.directive{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(27,36,51,.1)}
.directive:last-child{border-bottom:1px solid rgba(27,36,51,.1)}
.dot{flex:0 0 auto;width:13px;height:13px;border-radius:50%;margin-top:7px}
.dot.d-gold{background:#F5C242;box-shadow:0 0 0 5px rgba(245,194,66,.18)}
.dot.d-green{background:#4CAF7D;box-shadow:0 0 0 5px rgba(76,175,125,.18)}
.dot.d-amber{background:#D9731A;box-shadow:0 0 0 5px rgba(217,115,26,.18)}
.directive p{font-size:1.08rem;color:var(--ink);font-weight:500}
/* Production's emphasis line: same size, weight, line height and spacing. */
.highlight{margin:26px 0;padding:14px 0 14px 20px;border-left:3px solid var(--orange);color:var(--ink);font-weight:600;
  line-height:1.35;letter-spacing:-.01em;font-size:clamp(1.15rem,2.4vw,1.45rem)}
.scene .highlight + .lead{margin-top:0}
.scene .lead + .lead{margin-top:16px}
@media (max-width:560px){ .signal{flex-direction:column;gap:3px}.signal .src{min-width:0} }
/* No JS: show the scene's text directly (the typed copy lives in .vh). */
html:not(.js) .seq{opacity:1;transform:none}
html:not(.js) .clock .vh,html:not(.js) .signal .vh{position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible;white-space:normal}

/* ---- How it works ------------------------------------------------------------------- */
.signal-card h3{display:flex;align-items:center;gap:10px}
.signal-card h3::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.signal-card p{color:var(--body)}
.weighs{margin-top:24px;font-size:1.1rem;color:var(--ink);font-weight:500}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--card);
  border:1px solid var(--border-soft);font-weight:600;font-size:.95rem;color:var(--ink)}
.chip::before{content:'';width:9px;height:9px;border-radius:50%}
.chip.aligned::before{background:#C4962C}
.chip.loaded::before{background:var(--orange)}
.chip.stretched::before{background:#C2412D}
.chips .note{color:var(--muted);font-size:.98rem}
.steps{list-style:none;margin:clamp(48px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps li{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:clamp(20px,2.4vw,28px)}
.step-num{display:block;font-size:.95rem;font-weight:700;color:var(--orange-text);letter-spacing:2px;margin-bottom:10px}
.steps h3{margin-bottom:8px}
@media (max-width:760px){ .steps{grid-template-columns:minmax(0,1fr)} }

/* ---- When signals disagree (dark band) ---------------------------------------------- */
.dark{background:var(--ink);color:#C9D2DF}
.dark .eyebrow{color:#9DB8E0}
.dark h2{color:#fff;max-width:26ch}
.dark h2 .b{color:#9DB8E0}
.dark .split{align-items:center}
.readout{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;color:var(--body);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);max-width:520px;width:100%;justify-self:end}
.readout .card-top{display:flex;align-items:center;gap:8px;padding:15px 20px;border-bottom:1px solid var(--border)}
.readout .dot{width:10px;height:10px;margin:0;background:#D4D7DD;box-shadow:none}
.readout .label{margin-left:8px;color:var(--muted);font-size:.85rem;font-weight:600}
.readout .row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:14px 20px;border-bottom:1px solid var(--border)}
.readout .k{color:var(--ink);font-weight:600;font-size:.96rem}
.readout .v{font-size:.96rem;text-align:right}
.readout .answer{background:var(--warm);border-left:3px solid var(--orange);padding:18px 20px}
.readout .a-k{display:block;color:var(--orange-text);font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.readout .answer p{color:var(--ink);font-weight:600;line-height:1.45}
.readout .card-foot{padding:14px 20px;color:var(--muted);font-size:.86rem;font-style:italic}
@media (max-width:880px){ .readout{justify-self:start} }

/* ---- Ticks -------------------------------------------------------------------------- */
.ticks{list-style:none;margin:24px 0 0;padding:0}
.ticks li{position:relative;padding:12px 0 12px 36px;border-top:1px solid var(--border);color:var(--ink);font-weight:500}
.ticks li:last-child{border-bottom:1px solid var(--border)}
.ticks li::before{content:'';position:absolute;left:4px;top:17px;width:16px;height:9px;border-left:2.5px solid var(--blue);
  border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}

/* ---- Your week ---------------------------------------------------------------------- */
.cool{background:var(--soft-blue)}
/* The intro spans the full width of the two phone panels below it, so its edges match
   theirs (the shared .head and .lead caps would stop it short of the right panel). */
#week .head,#week .head .lead,#data .head,#data .head .lead{max-width:none}
.reads{margin-top:16px}
.reads .card h3{font-size:1rem;letter-spacing:2px;text-transform:uppercase}
.reads .yes h3{color:var(--blue)}
.reads .no h3{color:var(--orange-text)}
.reads .card p{color:var(--ink)}
.cal-note{margin-top:20px;color:var(--body);font-size:17px;line-height:1.6;max-width:none}

/* ---- Integrations ------------------------------------------------------------------- */
.white{background:#FFFFFF}
.pill-groups{margin-top:28px;display:grid;gap:20px}
.pill-label{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--blue)}
.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pill{background:#fff;border:1px solid var(--border);border-radius:999px;font-size:15px;line-height:1.3;padding:8px 16px;color:var(--ink)}
.pill-note{margin-top:24px;color:var(--body);font-size:1.05rem}
/* A frameless screen (no device bezel, rounded corners already in the PNG) is shown whole,
   not cropped: 340px wide, centred both ways, 48px above and below, and the panel's height
   follows the image instead of the fixed aspect ratio the cutouts use. */
.phone-panel:has(.frame-flat){aspect-ratio:auto;align-items:center;padding:48px 0}
.phone-panel picture:has(.frame-flat){width:min(340px,calc(100% - 32px));max-width:none}

/* ---- Your data ---------------------------------------------------------------------- */
.callout{margin-top:24px;background:var(--warm);border:1px solid #F3D3B0;border-radius:var(--r-card);padding:clamp(20px,2.6vw,28px)}
.callout h3{margin-bottom:6px}
.callout p{color:var(--ink)}

/* ---- Get the app -------------------------------------------------------------------- */
.get-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--border)}
.get-panel > div{padding:clamp(28px,4vw,52px)}
.get-main{background:var(--warm)}
.get-main h2{margin-bottom:16px}
.get-main .lead{margin-bottom:26px}
.android{background:var(--soft-blue);scroll-margin-top:80px}
.android h3{font-size:1.4rem;margin-bottom:8px}
@media (max-width:880px){ .get-panel{grid-template-columns:minmax(0,1fr)} }

form{margin-top:20px}
.field{display:block;width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--border-soft);
  border-radius:12px;padding:13px 15px}
.field:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:.95rem;line-height:1.5;color:var(--ink);cursor:pointer}
.consent input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#cf-turnstile:empty{display:none}
#cf-turnstile{margin-top:14px}
form .btn{margin-top:18px}
.err,.done{display:none;margin-top:16px;font-size:.98rem;line-height:1.5}
.err{color:#A3361E}
.done{color:var(--ink);font-weight:500;background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:14px 16px}

/* ---- Floating bar (home and /solaris) ----------------------------------------------
   Production's behaviour: slides up once the hero App Store badge has scrolled out of
   view, hides while #get or the footer is on screen or the cookie banner is up. */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--ink);box-shadow:0 -4px 16px rgba(27,36,51,.18);
  transform:translateY(100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
.cta-bar.is-on{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s}
.cta-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding-top:12px;padding-bottom:12px}
.cta-bar-text{margin:0;flex:1 1 auto;min-width:0;color:#F7F8FA;font-size:1.08rem;font-weight:600;line-height:1.35}
.cta-bar-actions{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.cta-bar-badge{display:block;line-height:0;border-radius:8px}
.cta-bar-badge img{height:40px;width:auto}
.cta-bar-android{color:#C9D6E8;font-weight:600;text-decoration:underline;white-space:nowrap}
.cta-bar a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:700px){
  .cta-bar-text{display:none}
  .cta-bar .wrap{justify-content:center;min-height:0;height:64px;padding-top:12px;padding-bottom:12px}
}
@media (prefers-reduced-motion:reduce){ .cta-bar,.cta-bar.is-on{transition:none} }

/* ---- Partners ----------------------------------------------------------------------- */
.stack-panel{border-radius:var(--r-panel);background:linear-gradient(to bottom,var(--warm) 0 50%,var(--soft-blue) 50% 100%);
  padding:clamp(20px,3vw,36px);display:grid;gap:14px}
.stack-panel .card{box-shadow:0 18px 40px -28px rgba(27,36,51,.4)}
.stack-panel .card h3{font-size:1.05rem}
.role{border-radius:var(--r-card);padding:clamp(22px,3vw,32px)}
.role h3{font-size:1.3rem}
.role .role-sub{margin:4px 0 16px;font-weight:600}
.role ul{margin:0;padding:0;list-style:none}
.role li{padding:10px 0;border-top:1px solid rgba(255,255,255,.14)}
.role.navy{background:var(--ink);color:#DDE4EE}
.role.navy h3{color:#fff}
.role.navy .role-sub{color:#9DBBE6}
.role.soft{background:var(--soft-blue);border:1px solid var(--border-soft);color:var(--ink)}
.role.soft .role-sub{color:var(--blue)}
.role.soft li{border-top-color:var(--border-soft)}
.close-panel{background:var(--ink);color:#C9D2DF;border-radius:var(--r-panel);padding:clamp(32px,5vw,64px)}
.close-panel h2{color:#fff;margin-bottom:16px}
.close-panel .lead{margin-bottom:28px;color:#C9D2DF}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.seq{opacity:1;transform:none;transition:none}
  .clock.typing::after,.signal .src.typing::after,.signal .verdict.typing::after{display:none}
  .btn{transition:none}
}

/* FAQ (home). Native details/summary, all collapsed. Markup is generated from src/faq.json. */
.faq{max-width:820px;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;list-style:none;
  color:var(--ink);font-weight:600;font-size:1.08rem;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:0 0 auto;width:10px;height:10px;margin-right:4px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.faq details[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq summary:hover{color:var(--blue)}
.faq details > p{padding:0 0 22px;max-width:62ch;line-height:1.6}
.faq-more{border-bottom:0!important}
.faq-more > summary{color:var(--blue)}
.faq-more-list{border-top:1px solid var(--border)}
.faq-more-list details:last-child{border-bottom:0}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}