:root{
    --paper:#F6F7F9; --paper-warm:#FFF6EC; --paper-cool:#EAF1F9;
    --ink:#373E4C; --slate:#4A5160; --muted:#8C919A;
    --load:#F28A2E; --recovery:#2C5FA8; --decision:#8C919A;
    --line:rgba(74,81,96,.12); --maxw:680px;
    --font:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:var(--font);color:var(--slate);background:var(--paper);
    line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2{color:var(--ink);font-weight:600;letter-spacing:-.01em;line-height:1.18;margin:0}
  h1{font-size:clamp(1.9rem,6.2vw,3rem)}
  h2{font-size:clamp(1.5rem,4.8vw,2.1rem)}
  p{margin:0}
  /* Section label: orange, uppercase, with a short orange accent dash (matches the
     earlier site's nicer header treatment). inline-flex so it inherits the section's
     text-align — left in normal sections, centered in the hero/join. */
  .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:var(--load);margin:0 0 18px}
  .eyebrow::before{content:'';flex:0 0 auto;width:18px;height:2px;background:var(--load);border-radius:2px}
  /* Hero eyebrow variant: eyebrow formatting, 30% larger, grey, no accent dash.
     Currently unused — the hero's dated eyebrow line was removed — but kept so a
     future hero eyebrow picks up the same treatment. */
  .hero .eyebrow{font-size:.96rem;color:var(--muted)}
  .hero .eyebrow::before{display:none}

  .bar{position:sticky;top:0;z-index:20;background:rgba(246,247,249,.82);
    backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
  .bar .wrap{max-width:none;padding:0 clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between;height:77px}
  .bar-left{display:flex;align-items:center;gap:16px}
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
  .logo-mark{height:34px;width:auto;display:block}
  .logo-word{font-size:26px;font-weight:600;color:var(--slate);letter-spacing:-.01em;line-height:1}
  .bar-divider{width:1px;height:24px;background:var(--line);flex:0 0 auto}
  .bar-tagline{font-size:1.08rem;color:var(--muted);white-space:nowrap}
  .navcta{font-size:1.05rem;font-weight:600;color:var(--ink);background:#F5C242;
    padding:9px 60px;border-radius:9px;text-decoration:none;white-space:nowrap;
    display:inline-flex;align-items:center;justify-content:center;text-align:center;
    transition:transform .15s ease,background .15s ease}
  .navcta:hover{background:#E6AF2E}

  section{padding:84px 0}
  .hero{padding:72px 0 78px;background:radial-gradient(120% 90% at 50% -10%, #ffffff 0%, var(--paper) 58%)}
  .hero .wrap{text-align:center;max-width:900px}
  .warm{background:var(--paper-warm)}
  .cool{background:var(--paper-cool)}

  .hero-mark{height:138px;width:auto;display:block;margin:0 auto 24px}
  /* "Calibra Pro" wordmark — same treatment as the original site's big "Calibra" hero title. */
  .hero-wordmark{font-size:clamp(42px,5.5vw,70px);font-weight:600;letter-spacing:-.01em;
    line-height:1.04;color:var(--ink);margin:0 0 16px}
  .hero h1{max-width:none;margin:0 auto;font-size:clamp(1.85rem,5.4vw,2.85rem);text-wrap:balance}
  .hero .sub,.hero .trustline{font-size:1.12rem}
  .hero .sub{color:var(--slate);margin:22px auto 32px;max-width:58ch;text-wrap:balance}
  .cta{display:flex;width:max-content;max-width:100%;margin:0 auto;align-items:center;justify-content:center;
    text-align:center;background:#F5C242;color:var(--ink);font-weight:600;font-size:1.05rem;
    text-decoration:none;padding:9px 60px;border-radius:9px;
    transition:transform .15s ease,background .15s ease}
  .cta:hover{background:#E6AF2E}
  .trustline{margin-top:22px;font-size:.86rem;color:var(--muted);letter-spacing:.01em}

  .clock{font-weight:600;color:var(--ink);margin:32px 0 22px;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:1px;background:currentColor;
    vertical-align:-0.14em;animation:caret .85s steps(1,end) 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:#fff;border:1px solid var(--line);border-radius:12px;border-left:3px solid var(--muted)}
  .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:600;color:var(--ink);min-width:84px;font-size:.92rem;white-space:nowrap}
  .signal .verdict{color:var(--slate);font-size:.98rem}
  .turn{margin:30px 0 0;font-size:1.18rem;font-weight:600;color:var(--ink);line-height:1.4}

  .lead{font-size:1.1rem;color:var(--slate);margin:20px 0 30px}
  .directive{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
  .directive:last-of-type{border-bottom:1px solid var(--line)}
  .dot{flex:0 0 auto;width:13px;height:13px;border-radius:50%;background:var(--decision);
    margin-top:7px;box-shadow:0 0 0 5px rgba(140,145,154,.14)}
  .dot.d-gold{background:#F5C242;box-shadow:0 0 0 5px rgba(245,194,66,.16)}
  .dot.d-green{background:#4CAF7D;box-shadow:0 0 0 5px rgba(76,175,125,.16)}
  .dot.d-amber{background:#D9731A;box-shadow:0 0 0 5px rgba(217,115,26,.16)}
  .directive p{font-size:1.06rem;color:var(--ink);font-weight:500}
  .note{margin-top:26px;font-size:.95rem;color:var(--muted)}

  .points{margin:30px 0 34px}
  .point{padding:20px 0;border-top:1px solid var(--line)}
  .point:last-child{border-bottom:1px solid var(--line)}
  .point h3{margin:0 0 6px;font-size:1.02rem;color:var(--ink);font-weight:600}
  .point p{color:var(--slate);font-size:.98rem}

  .join .lead{margin-bottom:26px}
  .join .wrap{text-align:center}
  .join form{margin-left:auto;margin-right:auto;text-align:left}
  .join .done,.join .err{margin-left:auto;margin-right:auto}
  form{display:flex;flex-direction:column;gap:12px;max-width:440px}
  input[type=text],input[type=email]{font-family:var(--font);font-size:1rem;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:11px;padding:14px 16px;width:100%}
  input[type=text]:focus,input[type=email]:focus{outline:none;border-color:var(--recovery);box-shadow:0 0 0 3px rgba(44,95,168,.16)}
  .consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--muted);line-height:1.5;cursor:pointer}
  .consent input{flex:0 0 auto;width:16px;height:16px;margin-top:3px;accent-color:var(--recovery)}
  .consent input:focus-visible{outline:2px solid var(--recovery);outline-offset:2px}
  .consent a{color:var(--recovery)}
  /* Platform picker: one-tap segmented toggle (iPhone / Android). Radio inputs are
     visually hidden but focusable; the styled labels are the tap targets. Matches the
     text inputs' border/radius so it reads as one form. */
  .platform{border:0;margin:0;padding:0;min-width:0}
  .platform legend{padding:0;font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:8px}
  .seg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
  .seg label{display:flex;align-items:center;justify-content:center;text-align:center;font-size:1rem;
    color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px 16px;
    cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
  .seg label:hover{border-color:var(--recovery)}
  .seg input:checked + label{border-color:var(--recovery);background:rgba(44,95,168,.06);box-shadow:0 0 0 3px rgba(44,95,168,.16)}
  .seg input:focus-visible + label{outline:2px solid var(--recovery);outline-offset:2px}
  .platform-help{margin-top:8px;font-size:.85rem;color:var(--muted)}
  button{font-family:var(--font);font-size:1.05rem;font-weight:600;color:var(--ink);background:#F5C242;
    border:0;border-radius:11px;padding:15px 20px;cursor:pointer;box-shadow:0 6px 20px rgba(245,194,66,.30);
    transition:transform .15s ease,box-shadow .15s ease}
  button:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(245,194,66,.38)}
  button:disabled{opacity:.6;cursor:default;transform:none;box-shadow:0 6px 20px rgba(245,194,66,.22)}
  .reassure{margin-top:14px;font-size:.85rem;color:var(--muted)}
  .err{display:none;margin-top:14px;font-size:.9rem;color:#9A4A3C;max-width:440px}
  .err a{color:#9A4A3C;text-decoration:underline}
  .done{display:none;font-size:1.05rem;color:var(--ink);font-weight:500;padding:18px 20px;background:#fff;
    border:1px solid var(--line);border-left:3px solid var(--load);border-radius:12px;max-width:440px}

  .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  /* Honeypot: off-screen, untabbable, invisible to people. Bots that fill all fields trip it. */
  .hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
  /* Turnstile only takes layout space on the rare occasion it must show a challenge. */
  #cf-turnstile:not(:empty){margin:4px 0 2px}

  footer{padding:0;border-top:1px solid var(--line);background:var(--paper)}
  footer .wrap{max-width:none;min-height:77px;padding:10px clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}
  .foot-left{display:flex;align-items:center;gap:12px}
  .foot-mark{height:24px;width:auto;display:block;flex:0 0 auto}
  .foot-text{line-height:1.6}
  .foot-text strong{color:var(--slate);font-weight:600}
  /* Wraps because the legal row now carries a fourth item (Calibra Pro App Privacy);
     without this it overflows horizontally on phone widths. */
  .foot-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:center}
  footer a{color:var(--muted)}
  .foot-text a{text-decoration:underline}
  /* "Cookie settings" footer control — re-opens the consent banner. Styled to read as a
     plain footer link (matching the sibling anchors), not a button. */
  .cookie-settings{font:inherit;color:var(--muted);background:none;border:0;padding:0;
    cursor:pointer;line-height:inherit}
  .cookie-settings:hover{text-decoration:underline}

  .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
  .rv.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}.rv,.seq{opacity:1;transform:none;transition:none}
    .cta,button,.navcta{transition:none}
    .clock.typing::after,.signal .src.typing::after,.signal .verdict.typing::after{display:none}}
  @media (max-width:720px){
    .bar-divider,.bar-tagline{display:none}}
  @media (max-width:520px){
    section{padding:64px 0}
    .navcta{padding:9px 20px}
    .signal{flex-direction:column;gap:3px}.signal .src{min-width:0}}

/* ============================================================================
   Additions for the three-surface site: shared 3-link top nav, /product and
   /story surfaces, 404, and the Tuesday card placeholders. The block above is
   the production design system, verbatim, so all surfaces share one visual bar.
   ============================================================================ */

/* Shared top nav: logo left; links + "I want in" CTA + (mobile) menu toggle right */
.bar-right{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px)}
.nav-links a{font-size:1rem;font-weight:600;color:var(--slate);text-decoration:none;white-space:nowrap;transition:color .15s ease}
.nav-links a:hover{color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;padding:10px 4px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle span{position:relative}
.nav-toggle span::before{content:'';position:absolute;top:-6px}
.nav-toggle span::after{content:'';position:absolute;top:6px}
/* The tagline shares the bar with the links + CTA, so hide it (and its divider)
   below 1100px to avoid crowding. */
@media (max-width:1100px){ .bar-divider,.bar-tagline{display:none} }
/* Mobile: collapse the two text links into a toggled dropdown; keep logo + CTA in
   the bar so the primary action stays visible. */
@media (max-width:560px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 10px 20px rgba(55,62,76,.07);
    padding:6px 0;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px clamp(20px,5vw,32px);font-size:1.05rem}
}

/* Quiet inline cross-link ("See what Calibra is", "Why Calibra exists") */
.softlink{display:inline-flex;align-items:center;gap:6px;font-size:1.02rem;font-weight:600;color:var(--recovery);text-decoration:none}
.softlink:hover{text-decoration:underline}

/* Story page: editorial first-person narrative. Narrow reading measure, paced
   whitespace instead of divider rules, two pull-quotes, a quiet warm callout for
   the product line, and a soft centered close. Everything is scoped under .story so
   these names never collide with the homepage (which has its own .turn, .close…). */
.story .read{max-width:780px;margin:0 auto;padding:0 24px}
.story .s-hero{padding:clamp(56px,10vw,116px) 0 clamp(30px,6vw,56px)}
.story .s-hero .eyebrow{margin-bottom:22px}
.story .s-hero h1{max-width:14ch;margin:0 0 18px}
.story .me{font-size:clamp(1.15rem,2.6vw,1.4rem);color:var(--slate);font-weight:500;margin:0}
/* Hero: headline left, campaign image right. Stacks (image above text) under 780px. */
.story .s-hero-grid{display:flex;align-items:center;gap:clamp(28px,5vw,56px)}
.story .s-hero-text{flex:1 1 auto;min-width:0}
.story .s-hero-media{flex:0 0 40%;max-width:40%;margin:0}
.story .s-hero-media img{display:block;width:100%;height:auto;border-radius:16px}
@media (max-width:780px){
  .story .s-hero-grid{flex-direction:column-reverse;align-items:stretch;gap:clamp(20px,6vw,32px)}
  .story .s-hero-media{flex:0 0 auto;max-width:100%}
}
.story .prose{padding-bottom:clamp(28px,6vw,48px)}
.story .prose p{font-size:1.15rem;line-height:1.85;color:var(--slate);margin:0 0 22px}
.story .prose .first{font-size:1.24rem;color:var(--ink)}
.story .beat{margin:clamp(34px,6vw,64px) 0}
.story .beat:first-child{margin-top:0}
.story .beat p:last-child{margin-bottom:0}
.story .pull{margin:clamp(40px,7vw,72px) 0;padding-left:24px;border-left:3px solid var(--load)}
.story .pull p{font-size:clamp(1.4rem,3.2vw,1.95rem);line-height:1.3;color:var(--ink);
  font-weight:600;letter-spacing:-.01em;margin:0;max-width:20ch}
.story .callout{background:var(--paper-warm);border-radius:14px;
  padding:clamp(24px,4vw,36px);margin:clamp(40px,7vw,72px) 0}
.story .callout p{font-size:1.14rem;line-height:1.7;color:var(--ink);font-weight:500;margin:0}
.story .close{text-align:center;padding:clamp(44px,8vw,84px) 0 clamp(60px,9vw,104px)}
.story .close .throughline{font-size:clamp(1.5rem,3.6vw,2.05rem);line-height:1.3;color:var(--ink);
  font-weight:600;letter-spacing:-.01em;margin:0 auto 12px;max-width:36ch;text-wrap:balance}
.story .close .why{font-size:clamp(1.1rem,2.2vw,1.3rem);color:var(--slate);margin:0 auto 26px}

/* 404 */
.notfound{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}
.notfound .wrap{max-width:460px}
.notfound p{margin-top:18px;font-size:1.05rem}

/* Tuesday scene: coda line below the turn (revealed as the final beat) */
.coda{margin-top:14px;color:var(--slate)}

/* ---- /product surface ---------------------------------------------------- */

/* Hero: two columns — copy left, the owned particle-stream campaign still on the
   right (scattered data resolving into the mark). White band so the artwork reads
   as a deliberate framed still rather than a pasted rectangle. */
.product-hero{background:#fff;border-bottom:1px solid var(--line);
  padding:clamp(40px,6vw,72px) 0 clamp(44px,6vw,76px)}
.product-hero .wrap{max-width:1040px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,56px);align-items:center}
.hero-copy .eyebrow{margin-bottom:18px}
.hero-copy h1{margin:0 0 20px}
.hero-lead p{font-size:1.1rem;line-height:1.65;color:var(--slate);margin:0 0 16px;max-width:44ch}
.hero-lead p:last-child{margin-bottom:0}
.hero-actions{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-actions .cta{margin:0}
.quiet-note{color:var(--muted);font-size:.9rem}
.mark-stage{display:flex;justify-content:center;align-items:center}
.mark-stage img{width:100%;height:auto;display:block;border-radius:16px;
  box-shadow:0 18px 50px -24px rgba(32,36,46,.28)}
@media (max-width:780px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .mark-stage{order:-1}
  .hero-lead p{max-width:none}
}

/* Shared wide content column so every section's left edge lines up with the hero;
   running text inside each section stays at a comfortable reading measure. */
.how .wrap,.europe .wrap{max-width:1040px}

/* Wound pull-quote (the line lifted out of "Who it's for"). Pair with .warm. */
.wound{text-align:center}
.wound .wrap{max-width:760px}
.wound .big{margin:0 auto;max-width:24ch;color:var(--ink);font-weight:600;letter-spacing:-.01em;
  line-height:1.16;font-size:clamp(1.7rem,4.4vw,2.6rem)}
.wound .sub{margin:18px auto 0;max-width:34ch;color:var(--slate);font-weight:500;
  font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.45}

/* How it works: numbered steps left, the example readout card right. */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,56px);
  align-items:start;margin-top:40px}
ol.steps{list-style:none;margin:0;padding:0}
ol.steps li{padding:24px 0;border-top:1px solid var(--line)}
ol.steps li:first-child{border-top:0;padding-top:0}
.step-num{font-size:.82rem;font-weight:700;color:var(--load);letter-spacing:.08em}
.step-title{display:block;color:var(--ink);font-weight:600;font-size:1.18rem;
  letter-spacing:-.01em;margin:6px 0 8px}
ol.steps li p{margin:0;color:var(--slate);font-size:1rem;line-height:1.6;max-width:44ch}

/* Example readout card — echoes the homepage signal/done cards: white, hairline
   border, warm answer panel with an orange left accent. */
.readout{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px -24px rgba(32,36,46,.28);position:sticky;top:96px}
.readout .card-top{display:flex;align-items:center;gap:8px;padding:15px 20px;border-bottom:1px solid var(--line)}
.readout .dot{width:10px;height:10px;border-radius:50%;background:#d4d7dd;margin:0;box-shadow:none}
.readout .label{margin-left:8px;color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.02em}
.readout .row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:15px 20px;border-bottom:1px solid var(--line)}
.readout .k{color:var(--ink);font-weight:600;font-size:.95rem}
.readout .v{color:var(--slate);font-size:.95rem;text-align:right}
.readout .answer{background:var(--paper-warm);border-left:3px solid var(--load);padding:18px 20px}
.readout .a-k{display:block;color:var(--load);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:7px}
.readout .answer p{margin:0;color:var(--ink);font-weight:600;font-size:1rem;line-height:1.45}
.readout .card-foot{padding:14px 20px;color:var(--muted);font-size:.84rem;font-style:italic}
@media (max-width:780px){
  .how-grid{grid-template-columns:1fr;gap:28px}
  .readout{position:static}
}

/* Built in Europe: four short point cards. */
.europe .lead{max-width:620px}

.eu-points{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.eu-points .pt{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.eu-points .pt h3{margin:0 0 6px;color:var(--ink);font-size:1rem;font-weight:600;letter-spacing:-.01em}
.eu-points .pt p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
@media (max-width:840px){ .eu-points{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .eu-points{grid-template-columns:1fr} }

/* ---- Merged single-page LP ------------------------------------------------ */

/* Emphasis line (shift + integration sections): orange left accent, echoing the
   readout answer panel and the confirmation card. */
.highlight{margin:26px 0;padding:14px 0 14px 20px;border-left:3px solid var(--load);
  color:var(--ink);font-weight:600;line-height:1.35;letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.4vw,1.45rem)}

/* Section-trailing "I want in" CTA repeated down the page. .cta is margin:0 auto
   (block-centered); this only adds the top breathing room from the copy above it. */
.cta.flow{margin-top:34px}

/* Integration: plain (non-linked) device chips. */
.integration .wrap{max-width:1040px}
.devices{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.devices li{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;color:var(--ink);font-weight:600;font-size:.95rem}

/* Integration: sub-block below the wearables (calendar). Same eyebrow + lead
   treatment as the block above it, separated by section-internal breathing room. */
.int-block{margin-top:48px}
.int-block .lead{max-width:62ch;margin-bottom:0}

/* ---- /solaris — "Solaris x Calibra" conversation page (hidden) ------------- */
/* Article-shaped intro (narrow, left-aligned, no nav) followed by the SAME
   .join.warm waitlist block the root page uses — so only the intro furniture
   needs styling here; the form block inherits the site components as-is. */

.sol{padding:56px 0 72px}
.sol .wrap{text-align:left}

/* Header lockup. Fixed 68px height, width auto. The transparent PNG is already
   cropped to its content, so it scales on its own aspect ratio; the width/height
   attrs on the <img> carry the intrinsic size to reserve space. max-width keeps
   it inside the measure on narrow screens, where 68px tall would otherwise want
   ~473px of width. */
.sol-lockup{margin-bottom:44px}
.sol-lockup img{height:68px;width:auto;max-width:100%;object-fit:contain;object-position:left;display:block}

/* Date / time / place line under the title. */
.sol-meta{margin:14px 0 0;font-size:.95rem;color:var(--muted)}

/* Body copy. Site-wide `p` is margin:0, so paragraph rhythm is set here. */
.sol-body{margin-top:32px}
.sol-body p{margin:0 0 22px}
.sol-body p:last-child{margin-bottom:0}
.sol-body .lead{margin:0 0 22px}
/* Pointer to #join. Cream box with an orange rule, same treatment as the /story
   readout answer, so it reads as a preview of the .join.warm band below; the link
   is semibold --recovery blue so it stands out without becoming a third button. */
.sol-body .sol-offer{background:var(--paper-warm);border-left:3px solid var(--load);
  border-radius:0 10px 10px 0;padding:14px 18px}
.sol-offer a{color:var(--recovery);font-weight:600;white-space:nowrap}
/* Chevron glyph; currentColor so it follows the surrounding text colour. */
.sol-offer-icon{display:inline-block;width:1em;height:1em;margin-left:4px;vertical-align:-.15em}

/* Recording. Responsive 16:9 via aspect-ratio; the eyebrow label sits above it. */
.sol-watch{margin-top:40px}
.sol-watch .eyebrow{margin-bottom:14px}
.sol-video{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink);border-radius:12px;overflow:hidden}
.sol-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Click-to-load preview: local poster, dimmed by a scrim on the button, with the play
   control centred. The button fills the player so the whole preview is the target. */
.sol-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sol-play{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;cursor:pointer;
  background:rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;transition:background .2s}
.sol-play:hover{background:rgba(0,0,0,.4)}
.sol-play:focus-visible{outline:3px solid #fff;outline-offset:-8px}
.sol-play-icon{width:76px;height:76px;border-radius:50%;background:#fff;color:var(--ink);display:flex;
  align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.3);transition:transform .2s}
.sol-play:hover .sol-play-icon,.sol-play:focus-visible .sol-play-icon{transform:scale(1.06)}
.sol-play-icon svg{width:36px;height:36px;margin-left:4px}
.sol-video-note{margin:10px 0 0;font-size:13px;color:#8C919A}
.sol-video-note a{color:inherit;text-decoration:underline}

/* Quotes: 2x2 card grid. Each card is a flex column: quote on top (grows), then a
   photo + name/credit row pinned to the bottom, so attributions line up across a row
   (cards in a grid row stretch to equal height). Single column below 720px. */
.sol-quotes{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.sol-quote{margin:0;display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #E2E5E9;
  border-radius:12px;padding:24px}
.sol-quote blockquote{margin:0 0 20px;max-width:60ch;flex:1 1 auto;font-size:15px;font-style:italic;line-height:1.6;color:#4A5160}
.sol-quote-by{display:flex;align-items:center;gap:12px;text-align:left}
/* The initials span is the fallback and sits under the photo. */
.sol-avatar{position:relative;flex:0 0 48px;width:48px;height:48px;border-radius:50%;overflow:hidden;
  background:var(--paper-cool);color:var(--slate);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.9rem;letter-spacing:.04em}
.sol-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sol-quote figcaption{min-width:0}
.sol-quote-name{display:block;font-size:14px;font-weight:600;font-style:normal;color:#4A5160}
.sol-quote-name a{color:inherit;text-decoration:none;border-radius:2px}
.sol-quote-name a:hover,.sol-quote-name a:focus-visible{color:#2C5FA8;text-decoration:underline}
.sol-quote-name a:focus-visible{outline:2px solid #2C5FA8;outline-offset:2px}
.sol-quote-credit{display:block;margin-top:2px;font-size:13px;color:#8C919A}
/* Full-width card (quote over 200 characters): spans both columns, wider measure so long quotes
   take fewer lines. Attribution row stays below the quote, left aligned. */
.sol-quote--full{grid-column:1 / -1}
.sol-quote--full blockquote{max-width:80ch}
@media (max-width:719px){
  .sol-quotes{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* Sticky offer bar: fixed to the bottom, slides in over 200ms. Hidden state uses visibility
   (delayed until the slide-out ends) so the buttons leave the tab order and the shadow goes
   with it. z-index sits below the cookie banner, which also suppresses the bar while visible
   (see the script in the page). Sizes step up at 720px and 1024px. */
.sol-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:#FDE7CF;
  box-shadow:0 -4px 16px rgba(74,81,96,.12);color:#4A5160;transform:translateY(100%);visibility:hidden;
  transition:transform .2s ease,visibility 0s linear .2s}
.sol-bar.is-on{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s}
.sol-bar[hidden]{display:none}
.sol-bar .wrap{display:flex;align-items:center;gap:12px;min-height:56px;padding-top:8px;padding-bottom:8px}
/* Gift badge: icon sits in a circle 1.6x its size, soft white at 70% opacity. */
.sol-bar-gift{flex:0 0 auto;width:32px;height:32px;margin-right:2px;border-radius:50%;
  background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center}
.sol-bar-gift svg{width:20px;height:20px;display:block}
.sol-bar.first-show .sol-bar-gift{animation:sol-gift-in .3s ease both}
@keyframes sol-gift-in{from{transform:scale(.8)}to{transform:scale(1)}}
.sol-bar-text{margin:0;flex:1 1 auto;min-width:0;font-size:.92rem;line-height:1.4}
.sol-bar-short{display:none}
.sol-bar .sol-bar-cta{flex:0 0 auto;background:#F28A2E;color:#fff;font-size:.92rem;font-weight:600;line-height:1.2;
  padding:9px 18px;border-radius:6px;box-shadow:none;transform:none;transition:background .15s ease}
.sol-bar .sol-bar-cta:hover{background:#E07B22;box-shadow:none;transform:none}
.sol-bar .sol-bar-close{flex:0 0 32px;width:32px;height:32px;padding:0;border-radius:50%;background:transparent;
  color:#4A5160;box-shadow:none;transform:none;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease}
.sol-bar .sol-bar-close:hover{background:rgba(74,81,96,.1);box-shadow:none;transform:none}
.sol-bar .sol-bar-close svg{width:16px;height:16px}
.sol-bar button:focus-visible{outline:2px solid #2C5FA8;outline-offset:2px}
@media (max-width:719px){
  .sol-bar-long{display:none}
  .sol-bar-short{display:inline}
}
/* 720px to 1023px: 68px bar, 16px semibold text, 24px glyph. */
@media (min-width:720px){
  .sol-bar .wrap{min-height:68px}
  .sol-bar-gift{width:38.4px;height:38.4px}
  .sol-bar-gift svg{width:24px;height:24px}
  .sol-bar-text{font-size:16px;font-weight:600}
  .sol-bar .sol-bar-cta{font-size:16px}
}
/* 1024px and wider: 80px bar, 18px semibold single-line text, 28px glyph. The line needs about
   1015px of content (text alone measures ~755px), so a 960px cap cannot hold it on one line:
   the content area runs to 1080px with tight side padding, and the text truncates with an
   ellipsis rather than wrapping or overlapping the button if a viewport is ever too narrow. */
@media (min-width:1024px){
  .sol-bar .wrap{max-width:1080px;height:80px;min-height:0;padding:0 12px;gap:8px}
  .sol-bar-gift{width:44.8px;height:44.8px;margin-right:6px}
  .sol-bar-gift svg{width:28px;height:28px}
  .sol-bar-text{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sol-bar .sol-bar-cta{font-size:18px;padding:14px 28px}
  /* 20px icon in a 40px hit area; pull the empty hit-area margin outside the content edge. */
  .sol-bar .sol-bar-close{flex-basis:40px;width:40px;height:40px;margin-right:-10px}
  .sol-bar .sol-bar-close svg{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .sol-bar,.sol-bar.is-on{transition:none}
  .sol-bar.first-show .sol-bar-gift{animation:none}
}

/* Two stacked leads above the form (root has one); keep them on the same rhythm. */
.solaris .join .lead + .lead{margin-top:-8px}
/* "Claim your two months" lead-in between the leads and the form: larger bold
   --recovery blue, centred by .join .wrap, with extra room above so it reads as
   the start of the form rather than a third lead. Chevron follows currentColor. */
.sol-claim{margin:12px 0 22px;font-size:1.35rem;font-weight:700;line-height:1.3;color:var(--recovery)}
.sol-claim .sol-offer-icon{width:1.1em;height:1.1em;margin-left:6px;vertical-align:-.2em}

@media (max-width:560px){
  .sol{padding:36px 0 52px}
  /* 68px tall wants ~473px of width, wider than the measure on a phone. Let it
     scale to the column instead of letterboxing inside a fixed-height box. */
  .sol-lockup{margin-bottom:34px}
  .sol-lockup img{height:auto;width:100%;max-width:420px}
}

/* Floating call to action (homepage). Fixed to the bottom, slides in over 200ms; visibility is
   delayed so the button leaves the tab order once hidden. Sits below the cookie banner. */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:#F5C242;
  box-shadow:0 -4px 16px rgba(74,81,96,.14);color:var(--ink);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:12px;min-height:56px;padding-top:8px;padding-bottom:8px}
.cta-bar-text{margin:0;flex:1 1 auto;min-width:0;font-size:.95rem;font-weight:600;line-height:1.4}
.cta-bar .cta-bar-btn{flex:0 0 auto;background:var(--ink);color:#fff;font-size:.95rem;font-weight:600;line-height:1.2;
  padding:9px 22px;border-radius:8px;box-shadow:none;transform:none;transition:background .15s ease}
.cta-bar .cta-bar-btn:hover{background:#000;box-shadow:none;transform:none}
.cta-bar button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (min-width:720px){
  .cta-bar .wrap{min-height:68px}
  .cta-bar-text,.cta-bar .cta-bar-btn{font-size:1rem}
}
@media (min-width:1024px){
  .cta-bar .wrap{min-height:76px}
  .cta-bar-text,.cta-bar .cta-bar-btn{font-size:1.1rem}
  .cta-bar .cta-bar-btn{padding:12px 30px}
}
@media (prefers-reduced-motion:reduce){ .cta-bar,.cta-bar.is-on{transition:none} }

/* Built in Europe: centred block, justified lead, 2x2 cards (single column on small phones). */
.europe .wrap{text-align:center}
.europe .lead{margin-left:auto;margin-right:auto}
.eu-points{grid-template-columns:1fr 1fr;max-width:680px;margin-left:auto;margin-right:auto}
.eu-points .pt{text-align:center}
@media (max-width:480px){ .eu-points{grid-template-columns:1fr} }

/* Integration and calendar: centred block, both leads the same size and width, like Built in Europe. */
.integration .wrap{text-align:center}
.integration .lead,.int-block .lead{max-width:620px;margin-left:auto;margin-right:auto}
.devices{justify-content:center}
.integration .highlight{max-width:620px;margin-left:auto;margin-right:auto;text-align:left}

/* Body paragraphs on the homepage: justified, last line left. Hero, the "You've done everything
   right" block, card labels and the form block are deliberately left alone. */
.who .lead,.scene .lead,.integration .lead,.europe .lead,.how ol.steps li p,.scene .directive p,.points .point p{
  text-align:justify;text-align-last:left;hyphens:auto}

/* Section eyebrows stay left aligned like the rest of the page, even where the block below is centred. */
.integration .eyebrow,.europe .eyebrow{display:flex}

/* Eyebrows share the left edge of the centred 620px text column below them. */
.integration .eyebrow,.europe .eyebrow{max-width:620px;margin-left:auto;margin-right:auto}