/* GoLaborate / Bright Ambition. Tokens match the approved brand guide. */
:root{--blue:#426bc1;--gold:#eabc50;--cream:#fff9ed;--navy:#223650;--white:#fff;--muted:#526278;--border:#dee4ed;--error:#9b2938;--font:"Manrope",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--white);color:var(--navy);font-family:var(--font);font-size:16px;line-height:1.6}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.62}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button:focus-visible{outline-offset:3px}input,textarea{min-width:0}svg{display:block}p,h1,h2,h3{margin-top:0}h1,h2,h3{line-height:1.12;letter-spacing:-.045em}h1{font-size:clamp(3rem,5.25vw,5rem);font-weight:780;margin-bottom:26px}h2{font-size:clamp(2rem,3.2vw,3rem);font-weight:750}h3{font-size:1.35rem;letter-spacing:-.025em}p{margin-bottom:1rem}a{text-underline-offset:4px}.shell{width:min(1240px,calc(100% - 96px));margin-inline:auto}[hidden]{display:none!important}.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}.skip-link{position:fixed;top:8px;left:16px;z-index:9;background:#fff;padding:12px;transform:translateY(-200%)}.skip-link:focus{transform:none}.preview-note{padding:10px 24px;background:var(--cream);border-bottom:1px solid var(--gold);font-size:13px;text-align:center}.site-header{height:112px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:1.65rem;font-weight:800;letter-spacing:-.06em}.brand-mark{width:39px;height:42px}.site-header nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}.site-header nav a{text-decoration:none;padding-block:12px}.site-header nav a:hover{text-decoration:underline}.header-cta{border:1px solid var(--border);border-radius:28px;padding:11px 22px!important}.hero{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(36px,5vw,84px);align-items:start;padding-top:48px;padding-bottom:80px}.hero-story{padding-top:32px}.descriptor{font-size:15px;font-weight:650;margin-bottom:26px;color:var(--blue)}.hero-copy{font-size:18px;line-height:1.65;max-width:440px;color:var(--muted)}.support-line{display:flex;align-items:center;gap:14px;margin-top:36px}.support-line>span{width:35px;height:4px;background:var(--gold)}.support-line p{font-size:17px;font-weight:700;margin:0}.quiet-note{margin-top:12px;color:var(--muted);font-size:14px}.intake{padding:30px 32px;background:var(--white);border:1px solid var(--border);border-top:5px solid var(--blue);border-radius:19px;box-shadow:0 18px 50px rgba(34,54,80,.065);scroll-margin-top:24px}.intake-header{display:flex;gap:15px;justify-content:space-between;align-items:start}.assistant-label{font-size:13px;color:var(--muted);display:block;margin-bottom:15px}.intake h2{font-size:clamp(1.7rem,2.5vw,2.2rem);line-height:1.16;letter-spacing:-.04em;margin-bottom:20px}.ai-label{font-size:12px;color:var(--blue);border:1px solid #cdd8ed;border-radius:20px;white-space:nowrap;padding:4px 9px}.intro{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:18px}.starters{display:grid;gap:8px;margin-bottom:20px}.starters button{display:flex;align-items:center;gap:11px;border:1px solid var(--border);background:white;color:var(--navy);text-align:left;border-radius:9px;min-height:44px;padding:10px 13px;font-size:14px}.starters button span{font-size:20px;color:var(--blue);line-height:1}.starters button:hover{border-color:var(--blue);background:#f6f8fd}.composer{position:relative;border:1px solid #b9c5d9;border-radius:12px;overflow:hidden}.composer:focus-within{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}.composer textarea{display:block;width:100%;resize:vertical;min-height:110px;max-height:260px;border:0;padding:15px 62px 15px 16px;background:#fafbfd;color:var(--navy);font-size:16px;line-height:1.5;outline:none}.composer textarea::placeholder{color:#63718a}.send-button{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--blue);color:white}.send-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.keyboard-hint{font-size:12px;margin-top:7px;margin-bottom:10px;color:var(--muted)}.chat-actions{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}.text-button{min-height:44px;padding:5px 0;background:none;border:0;font-weight:650;font-size:14px;color:var(--blue);text-decoration:underline;text-underline-offset:4px}.privacy-note{font-size:12px;line-height:1.55;color:var(--muted);border-top:1px solid var(--border);padding-top:16px;margin-top:20px;margin-bottom:0}.privacy-note a{white-space:nowrap}.chat-log{display:grid;gap:12px;max-height:330px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.chat-log:not(:empty){margin-bottom:18px}.message{padding:12px 15px;border-radius:12px;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}.message.user{background:#edf2fb;margin-left:30px}.message.assistant{background:var(--cream);margin-right:15px}.message-label{display:block;font-size:12px;font-weight:700;margin-bottom:5px;color:var(--muted)}.request-status{font-size:14px;margin-top:12px;color:var(--muted)}.request-status:empty{display:none}.error{padding:13px 16px;background:#fff3f2;border:1px solid #edcbc8;border-radius:10px;margin-top:16px}.error p{font-size:14px;color:var(--error);margin-bottom:0}.error .text-button{margin-right:18px;color:var(--error)}.brief-display{margin:20px 0}.brief-item{padding:12px 0;border-bottom:1px solid var(--border)}.brief-item h4{font-size:13px;margin:0 0 5px}.brief-item p{font-size:15px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:1px solid var(--blue);border-radius:26px;padding:12px 23px;background:var(--blue);color:white;font-size:14px;font-weight:650;text-decoration:none}.button:hover{background:#3458a5;border-color:#3458a5}.button.secondary{background:#fff;color:var(--navy);border-color:var(--border)}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.field{margin:14px 0}.field label{display:block;font-size:14px;font-weight:650;margin-bottom:6px}.field label span{font-weight:400;color:var(--muted)}.field input,.field textarea{width:100%;padding:10px 12px;border:1px solid #b9c5d9;border-radius:8px;color:var(--navy);background:#fff;font-size:16px;line-height:1.5}.field textarea{resize:vertical;min-height:78px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;margin:17px 0;cursor:pointer}.check input{flex-shrink:0;accent-color:var(--blue);width:19px;height:19px;margin-top:3px}.muted{color:var(--muted)}.back-button{margin-top:14px}.success-check{width:54px;height:54px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:28px;margin:10px 0 22px;color:var(--blue)}.reference{font-size:14px;font-weight:650}.solutions{background:var(--cream);padding:74px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:44px}.section-heading h2{margin:0}.section-heading>p{max-width:310px;color:var(--muted);margin:0;font-size:17px}.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}.solution-grid article{padding-top:28px;border-top:1px solid #e4d9bf}.solution-icon{color:var(--blue);margin-bottom:24px;width:37px}.solution-icon svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.solution-grid article h3{font-size:23px;margin-bottom:15px}.solution-grid article>p{font-size:15px;color:var(--muted);line-height:1.7;margin-bottom:10px}.process{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-block:86px}.process .descriptor{margin-bottom:18px}.process h2{margin-bottom:22px}.process>div>p:last-child{font-size:17px;color:var(--muted)}.process ol{list-style:none;margin:0;padding:0}.process li{display:flex;gap:22px;padding:6px 0 23px;margin-bottom:20px;border-bottom:1px solid var(--border)}.process li:last-child{border:0;margin:0}.process li>span{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--cream);color:var(--navy);font-weight:700}.process li h3{font-size:21px;margin-bottom:9px}.process li p{font-size:15px;color:var(--muted);margin:0;max-width:355px}.closing{background:#edf2fb;padding:52px 0}.closing>.shell{display:flex;align-items:center;justify-content:space-between;gap:24px}.closing h2{font-size:36px;margin:0}.privacy-section{padding-top:35px}.privacy-section details{font-size:14px;color:var(--muted);max-width:820px}.privacy-section summary{cursor:pointer;min-height:44px;font-weight:600}.privacy-section p{line-height:1.65}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:35px;color:var(--muted);font-size:13px}.site-footer p{margin:0}.brand.small{font-size:20px;color:var(--navy)}
@media(max-width:1050px){.shell{width:calc(100% - 56px)}.hero{gap:32px}.hero h1{font-size:56px}.intake{padding:24px}.ai-label{display:none}.section-heading{gap:30px}.solution-grid{gap:24px}}
@media(max-width:760px){.shell{width:calc(100% - 36px)}.site-header{height:82px;gap:10px}.brand{font-size:23px;gap:7px}.brand-mark{width:30px;height:33px}.site-header nav{gap:0}.site-header nav>a:not(.header-cta){display:none}.header-cta{padding:8px 15px!important;font-size:13px}.hero{grid-template-columns:1fr;gap:25px;padding-top:12px;padding-bottom:44px}.hero-story{padding-top:8px}.descriptor{font-size:13px;margin-bottom:14px}.hero h1{font-size:43px;line-height:1.04;margin-bottom:18px}.hero-copy{font-size:16px;max-width:100%;margin-bottom:15px}.support-line{margin-top:18px}.support-line p{font-size:15px}.quiet-note{display:none}.intake{padding:23px 20px;border-radius:15px}.intake h2{font-size:28px}.ai-label{display:block;font-size:11px}.assistant-label{font-size:12px}.intro{font-size:14px}.section-heading{display:block;margin-bottom:25px}.section-heading h2{margin-bottom:19px}.section-heading p{font-size:16px;max-width:100%}.solutions{padding-block:45px}.solution-grid{grid-template-columns:1fr;gap:28px}.solution-grid article{padding-top:22px}.solution-icon{margin-bottom:17px}.solution-grid article h3{font-size:24px}.process{grid-template-columns:1fr;gap:28px;padding-block:50px}.process h2{font-size:34px}.closing{padding:35px 0}.closing>.shell{align-items:flex-start;flex-direction:column;gap:23px}.closing h2{font-size:30px}.site-footer{flex-wrap:wrap;padding-block:25px}.site-footer p{display:none}.field-pair{grid-template-columns:1fr;gap:0}.preview-note{font-size:12px;padding:8px 15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}


/* ══ Enterprise refinement ═════════════════════════════════════════════════
   JD 2026-09-24: the logo "could be baked into the background or something..
   I want it to look like a very professional site, like an Oracle."

   Appended rather than woven into the minified block above so the original
   stays diffable and this pass can be reverted on its own. Everything here is
   presentation only: no layout is restructured, so the existing responsive
   rules and focus styles continue to apply unchanged.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --ink-deep:#16233a;      /* deeper than --navy, for the anchoring bands */
  --hairline:#e8ecf3;      /* quieter than --border, for structural rules  */
  --blue-deep:#2f56a8;
}

/* ── The mark, baked into the page rather than only worn in the header ──
   Same viewBox crop as the header lockup, so it is the same artwork and
   cannot drift. Decorative only: aria-hidden in markup, behind content via
   isolation+z-index (not a negative z-index on body, which would let it slip
   under the background on some engines). */
.hero{position:relative;isolation:isolate}
.brand-watermark{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  right:-8%;top:-14%;
  width:min(720px,58vw);height:auto;
  opacity:.055;
  filter:grayscale(1);
}
/* Keep every real element above the watermark. */
.hero>.hero-story,.hero>.intake{position:relative;z-index:1}

/* The watermark is decoration. If the visitor has asked for less motion or
   more contrast, or is printing, it only gets in the way. */
@media (prefers-contrast:more){.brand-watermark{display:none}}
@media print{.brand-watermark{display:none}}

/* ── Masthead: a hairline and a thin brand rule read as "established". ── */
.site-header[data-masthead]{
  position:relative;
  border-bottom:1px solid var(--hairline);
}
.site-header[data-masthead]::after{
  content:"";position:absolute;left:0;bottom:-1px;
  width:120px;height:2px;background:var(--blue);
}
.header-cta{
  border-color:var(--blue);color:var(--blue);font-weight:700;
  transition:background-color .15s ease,color .15s ease;
}
.header-cta:hover{background:var(--blue);color:#fff;text-decoration:none}

/* ── Section rhythm: structural rules instead of floating blocks. ── */
.solutions{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.process{border-bottom:1px solid var(--hairline)}

/* ── Closing band: the one place the page speaks with full authority. ──
   Replaces the pale tint with the deep brand navy. */
.closing{background:var(--ink-deep);color:#fff;padding:64px 0}
.closing h2{color:#fff;letter-spacing:-.04em}
.closing .button{
  background:#fff;color:var(--ink-deep);border-color:#fff;font-weight:700;
}
.closing .button:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-deep)}

/* ── Typographic restraint: enterprise pages set headings tighter and
      lead paragraphs looser than consumer pages. ── */
h1{letter-spacing:-.05em}
.hero-copy{font-size:19px;line-height:1.7}
.solution-grid article h3{letter-spacing:-.03em}

/* ── Intake card: squarer and flatter reads more like software, less like a
      marketing widget. ── */
.intake{border-radius:14px;box-shadow:0 1px 2px rgba(22,35,58,.04),0 12px 32px rgba(22,35,58,.07)}

@media(max-width:760px){
  /* On a phone the watermark competes with the headline for the same space. */
  .brand-watermark{width:78vw;right:-24%;top:-6%;opacity:.045}
  .closing{padding:44px 0}
  .site-header[data-masthead]::after{width:72px}
}

/* ══ Masthead search + services grid ═══════════════════════════════════════
   JD 2026-09-24: "put ideation on the site for what we offer as services.
   Look at Oracle.com. We can also have an AI search field at the top."

   Oracle's masthead is a wordmark, one wide bordered search field, and a
   couple of icons -- the search is the primary affordance, not a CTA pill.
   Services are presented as grouped rows of small, uniform, bordered tiles.
   ════════════════════════════════════════════════════════════════════════ */

.site-header[data-masthead]{gap:28px}

.site-search{
  flex:1 1 auto;min-width:0;max-width:620px;
  display:flex;align-items:center;gap:10px;
  border:1px solid #b9c5d9;border-radius:6px;
  background:#fff;padding:0 6px 0 12px;height:46px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.site-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 2px rgba(66,107,193,.18)}
.site-search-icon{
  width:19px;height:19px;flex-shrink:0;
  fill:none;stroke:#63718a;stroke-width:2;stroke-linecap:round;
}
.site-search input{
  flex:1 1 auto;min-width:0;height:100%;
  border:0;outline:none;background:transparent;
  font-size:15px;color:var(--navy);
}
.site-search input::placeholder{color:#7d8aa0}
/* Chrome's native search clear button collides with our submit. */
.site-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.site-search-go{
  flex-shrink:0;border:0;border-radius:4px;
  background:var(--blue);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.2px;
  height:34px;padding:0 16px;
}
.site-search-go:hover{background:#3458a5}

/* ── Services: grouped tile rows ── */
.services{padding:78px 0 84px;border-top:1px solid var(--hairline)}
.services h2{margin-bottom:18px;max-width:18ch}
.services-lede{font-size:18px;line-height:1.7;color:var(--muted);max-width:60ch;margin-bottom:46px}
.service-group{margin-bottom:38px}
.service-group:last-child{margin-bottom:0}
.group-title{
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;padding-bottom:10px;
  border-bottom:1px solid var(--hairline);
}
.tile-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:92px;padding:16px 14px;
  background:#fff;border:1px solid var(--border);border-radius:8px;
  color:var(--navy);font-size:15px;font-weight:650;line-height:1.35;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.tile:hover{
  border-color:var(--blue);color:var(--blue);
  box-shadow:0 6px 18px rgba(34,54,80,.08);transform:translateY(-1px);
}

@media(max-width:1050px){
  .site-search{max-width:none}
  .site-header[data-masthead]{gap:18px}
  .tile-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  /* Oracle drops to a wordmark + full-width search on small screens; the
     masthead wraps onto a second line rather than squeezing the field. */
  .site-header[data-masthead]{height:auto;flex-wrap:wrap;padding-block:14px;gap:12px}
  .site-search{order:3;flex-basis:100%;max-width:none;height:44px}
  .site-search-go{padding:0 13px}
  .site-header nav{order:2;margin-left:auto}
  .services{padding:48px 0 52px}
  .services-lede{font-size:16px;margin-bottom:30px}
  .tile-row{grid-template-columns:1fr;gap:10px}
  .tile{min-height:0;justify-content:flex-start;text-align:left;padding:14px}
}

/* Inline status for the masthead search when the assistant is unreachable. */
.site-search-note{
  flex-basis:100%;margin:6px 0 0;font-size:13px;color:var(--error);
}
.site-search-note:empty{display:none}

/* ══ Stats-engine positioning ══════════════════════════════════════════════
   JD 2026-09-24: "Let us help you build your team!" ... "We need to let people
   know this is a business stats engine for big teams" ... "There are NO images
   here.. Spruce it up."

   The page had no imagery at all, and its only visual was an intake form whose
   backend does not exist. That form is gone; this is what replaces it.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Search guidance. An empty field asks nothing of the visitor. ── */
.search-hints{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:14px 0 0;font-size:13px;color:var(--muted);
}
.search-hints>span{font-weight:650}
.hint{
  border:1px solid var(--border);border-radius:16px;background:#fff;
  color:var(--navy);font-size:13px;padding:6px 13px;min-height:32px;
  transition:border-color .14s ease,color .14s ease,background-color .14s ease;
}
.hint:hover{border-color:var(--blue);color:var(--blue);background:#f6f8fd}

/* ── Hero product visual ── */
.hero-visual{
  position:relative;z-index:1;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  border-top:4px solid var(--blue);
  padding:26px 26px 24px;
  box-shadow:0 1px 2px rgba(22,35,58,.04),0 16px 40px rgba(22,35,58,.08);
}
.glance-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:22px}
.glance-eyebrow{
  display:block;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue);margin-bottom:7px;
}
.glance-head h2{font-size:1.5rem;margin:0;letter-spacing:-.035em}
/* Honesty marker: these figures are representative, not live. */
.glance-tag{
  flex-shrink:0;font-size:11px;font-weight:650;color:var(--muted);
  border:1px solid var(--border);border-radius:20px;padding:4px 10px;white-space:nowrap;
}
.glance-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.stat{border-left:3px solid var(--gold);padding-left:12px}
.stat-n{display:block;font-size:1.6rem;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.stat-l{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}
.glance-bars{
  display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
  align-items:end;height:86px;margin-bottom:8px;
}
.glance-bars span{
  display:block;height:var(--h);border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--blue),#7d99d8);
}
.glance-bars span:last-child{background:linear-gradient(180deg,var(--gold),#f0d08c)}
.glance-caption{font-size:12px;color:var(--muted);margin:0 0 20px}
.glance-tree{
  display:flex;align-items:center;gap:14px;
  border-top:1px solid var(--hairline);padding-top:18px;margin-bottom:20px;
}
.glance-tree svg{width:150px;height:auto;flex-shrink:0;fill:none;stroke:var(--blue);stroke-width:1.6}
.glance-tree circle{fill:#fff}
.glance-tree p{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
.glance-cta{width:100%}

/* ── Industry tiles: icons ── */
.tile{flex-direction:column;gap:11px}
.tile-icon{display:block;width:26px;height:26px;color:var(--blue)}
.tile-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile:hover .tile-icon{color:var(--blue)}

/* ── The mark, behind the industries section too ── */
.services{position:relative;isolation:isolate;overflow:hidden}
.services>.shell{position:relative;z-index:1}
.watermark-left{right:auto;left:-10%;top:auto;bottom:-22%;width:min(560px,46vw);opacity:.045}

/* ── Stats-engine section ── */
.engine{padding:78px 0 84px;background:var(--cream);border-top:1px solid var(--hairline)}
.engine h2{margin-bottom:18px}
.engine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;margin-top:8px}
.engine-grid article{padding-top:22px;border-top:1px solid #e4d9bf}
.engine-grid h3{font-size:19px;margin-bottom:10px;letter-spacing:-.025em}
.engine-grid p{font-size:15px;line-height:1.65;color:var(--muted);margin:0}

@media(max-width:1050px){
  .engine-grid{grid-template-columns:repeat(2,1fr);gap:28px 30px}
  .glance-stats{gap:8px}
  .stat-n{font-size:1.35rem}
}
@media(max-width:760px){
  .search-hints{gap:6px;margin-top:10px}
  .search-hints>span{display:none}
  .hint{font-size:12px;padding:5px 11px}
  .hero-visual{padding:20px 18px}
  .glance-head h2{font-size:1.25rem}
  .glance-stats{grid-template-columns:1fr;gap:10px}
  .stat{border-left-width:3px}
  .stat-n{font-size:1.45rem}
  .glance-bars{height:64px;gap:6px}
  .glance-tree{flex-direction:column;align-items:flex-start;gap:10px}
  .glance-tree svg{width:100%;max-width:220px}
  .engine{padding:48px 0 52px}
  .engine-grid{grid-template-columns:1fr;gap:24px}
  .watermark-left{width:82vw;left:-28%;bottom:-10%}
}

/* ── Hints belong under the masthead, not inside it. ──
   As a flex sibling of .site-search they stole its width (the field collapsed
   to "Ask wh") and pushed the nav onto three lines. Oracle keeps the masthead
   to one tight row; guidance sits beneath it. */
.hints-bar{border-bottom:1px solid var(--hairline);background:#fbfcfe}
.hints-bar .search-hints{margin:0;padding:11px 0}
.site-search{flex:1 1 420px}
@media(max-width:760px){
  .hints-bar{display:none} /* the placeholder is guidance enough on a phone */
}

/* ── Points + progress ──
   JD 2026-09-24: "There needs to be the points system and progress indicator
   too." These sit inside the glance panel, so the existing "Example view" tag
   covers them: representative figures, not live data. */
.glance-progress{border-top:1px solid var(--hairline);padding-top:18px;margin-bottom:20px}
.gp-item{margin-bottom:13px}
.gp-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.gp-label{font-size:13px;color:var(--muted)}
.gp-val{font-size:13px;font-weight:750;color:var(--navy);font-variant-numeric:tabular-nums}
.gp-track{height:7px;border-radius:4px;background:#eef2f8;overflow:hidden}
.gp-track>span{display:block;height:100%;width:var(--w);border-radius:4px;background:linear-gradient(90deg,var(--blue),#7d99d8)}
.gp-item:nth-child(2) .gp-track>span{background:linear-gradient(90deg,var(--gold),#f0d08c)}

.gp-points{
  display:flex;align-items:center;gap:12px;margin-top:16px;
  background:var(--cream);border:1px solid #efe2c6;border-radius:10px;padding:11px 13px;
}
.gp-badge{
  flex-shrink:0;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--gold);color:#fff;
}
.gp-badge svg{width:19px;height:19px;fill:currentColor}
.gp-points strong{display:block;font-size:15px;letter-spacing:-.02em}
.gp-points span{display:block;font-size:12px;color:var(--muted);margin-top:1px}

@media(max-width:760px){
  .gp-label{font-size:12px}
  .gp-points{padding:10px}
}

/* ── Points lead the panel, and never appear as a bare score. ──
   JD 2026-09-24: "The points are not just points, they're incentives to the
   next goal." The number, the goal it is moving toward, the distance left and
   the concrete action to close it all sit in one block, at the top. */
.goal-card{
  display:flex;gap:14px;align-items:flex-start;
  background:linear-gradient(135deg,var(--cream),#fffdf7);
  border:1px solid #efe2c6;border-radius:11px;
  padding:15px 16px;margin-bottom:22px;
}
.goal-badge{
  flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--gold);color:#fff;
}
.goal-badge svg{width:21px;height:21px;fill:currentColor}
.goal-body{flex:1;min-width:0}
.goal-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.goal-points{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.goal-points span{font-size:.82rem;font-weight:650;letter-spacing:0;color:var(--muted);margin-left:3px}
.goal-next{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--navy);background:#fff;border:1px solid #efe2c6;border-radius:20px;
  padding:4px 10px;white-space:nowrap;
}
.goal-card .gp-track{background:#f0e6d0}
.goal-card .gp-track>span{background:linear-gradient(90deg,var(--gold),#e0a93f)}
.goal-note{margin:9px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* Eight capability tiles read better as a 4x2 than a cramped single row. */
.tile-row-8{grid-template-columns:repeat(4,1fr)}

@media(max-width:1050px){.tile-row-8{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .goal-card{padding:13px;gap:11px}
  .goal-points{font-size:1.3rem}
  .goal-top{gap:6px}
  .tile-row-8{grid-template-columns:1fr}
}

/* ── Sovereignty: a brand pillar, not a footnote. ──
   JD 2026-09-24: "Privacy and Data sovereignty are key branding. Your app,
   your social media, your team management, all under YOUR control." */
.sovereignty{background:var(--ink-deep);color:#fff;padding:76px 0 70px;position:relative;overflow:hidden}
.sovereignty .descriptor{color:var(--gold)}
.sov-head{max-width:70ch;margin-bottom:46px}
.sov-head h2{color:#fff;margin-bottom:20px;letter-spacing:-.045em}
.sov-head p{color:rgba(255,255,255,.72);font-size:18px;line-height:1.7;margin:0;max-width:62ch}
.sov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.sov-grid article{padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.sov-grid h3{font-size:18px;color:#fff;margin-bottom:10px;letter-spacing:-.025em}
.sov-grid p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.66);margin:0}
.sov-grid em{color:var(--gold);font-style:normal;font-weight:650}
.sov-foot{margin:42px 0 0;font-size:14px;color:rgba(255,255,255,.6)}
.sov-foot a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

@media(max-width:1050px){.sov-grid{grid-template-columns:repeat(2,1fr);gap:28px}}
@media(max-width:760px){
  .sovereignty{padding:48px 0 46px}
  .sov-head{margin-bottom:30px}
  .sov-head p{font-size:16px}
  .sov-grid{grid-template-columns:1fr;gap:22px}
}

/* ══ Rebuild pass ══════════════════════════════════════════════════════════
   JD 2026-09-24: "I don't see contextual imagery around any of it. This site
   is SOOOOOO plain." / "it scrolls quite a bit and are junior'esque icons."

   Three fixes: real duotone artwork instead of 1.7px hairline glyphs, a
   sovereignty section that leads with the address-book argument and carries an
   actual illustration, and tighter vertical rhythm so the page stops running on.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tighter rhythm. The page had six sections at ~78px top and bottom. ── */
.services{padding:60px 0 64px}
.process{padding-block:62px}
.closing{padding:56px 0}

/* ── Sovereignty: two columns, copy left, artwork right. ── */
.sovereignty{padding:68px 0 64px}
.sov-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.sov-copy h2{color:#fff;margin-bottom:18px;letter-spacing:-.045em}
.sov-lede{color:rgba(255,255,255,.72);font-size:17.5px;line-height:1.68;margin-bottom:14px;max-width:52ch}
.sov-punch{color:#fff;font-weight:650}
.sov-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.sov-list li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:15px;color:rgba(255,255,255,.88);line-height:1.5;
}
/* Gold check, drawn in CSS so it needs no icon font. */
.sov-list li>span{
  flex-shrink:0;position:relative;width:20px;height:20px;border-radius:50%;
  background:var(--gold);margin-top:1px;
}
.sov-list li>span::after{
  content:"";position:absolute;left:6px;top:4.5px;width:5px;height:9px;
  border:solid #1b2336;border-width:0 2.4px 2.4px 0;transform:rotate(45deg);
}
.sov-foot{margin:26px 0 0;font-size:14px;color:rgba(255,255,255,.58)}
.sov-foot a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.sov-art{display:block}
.sov-art svg{width:100%;height:auto;max-width:440px;margin-inline:auto;display:block}

/* ── Platform capability cards with real artwork. ── */
.platform{padding:66px 0 70px;border-top:1px solid var(--hairline)}
.platform h2{margin-bottom:16px}
.platform-lede{font-size:17.5px;line-height:1.7;color:var(--muted);max-width:56ch;margin-bottom:42px}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 36px}
.cap{display:flex;flex-direction:column}
.cap-art{
  display:grid;place-items:center;width:62px;height:62px;border-radius:14px;
  background:linear-gradient(140deg,#f2f5fb,#e7edf8);margin-bottom:16px;
}
.cap-art svg{width:40px;height:40px}
.cap h3{font-size:19px;margin-bottom:9px;letter-spacing:-.025em}
.cap p{font-size:15px;line-height:1.65;color:var(--muted);margin:0}
.cap em{font-style:normal;font-weight:700;color:var(--navy)}

/* ── Industry tiles: artwork, not hairline glyphs. ── */
.tile{min-height:120px;gap:13px;padding:20px 14px}
.tile-art{display:grid;place-items:center;width:44px;height:44px}
.tile-art svg{width:44px;height:44px}
.tile:hover .tile-art{transform:translateY(-1px)}
.tile-art{transition:transform .14s ease}

/* ── Search: chip typing + a working state. ── */
.hint-lead{font-weight:600;color:var(--muted)}
.site-search.is-thinking{border-color:var(--blue);box-shadow:0 0 0 2px rgba(66,107,193,.18)}
.site-search.is-thinking .site-search-go{opacity:.75}
.site-search input{caret-color:var(--blue)}

@media(max-width:1050px){
  .sov-shell{grid-template-columns:1fr;gap:34px}
  .sov-art{order:-1}
  .sov-art svg{max-width:360px}
  .cap-grid{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media(max-width:760px){
  .sovereignty{padding:46px 0 44px}
  .sov-lede{font-size:16px}
  .sov-art svg{max-width:280px}
  .platform{padding:46px 0 48px}
  .platform-lede{font-size:16px;margin-bottom:28px}
  .cap-grid{grid-template-columns:1fr;gap:26px}
  .cap-art{width:54px;height:54px}
  .cap-art svg{width:34px;height:34px}
  .tile{min-height:0;flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;padding:14px}
  .tile-art,.tile-art svg{width:34px;height:34px}
  .services{padding:42px 0 46px}
}

/* The 18ch cap set when this heading was short now forces an ugly three-line
   break on "Whatever you call your team, this is what it runs on." */
.services h2{max-width:none}
.services .descriptor{margin-bottom:14px}

/* ══ Sticky search + drop-down answers ═════════════════════════════════════
   JD 2026-09-24: "I don't want an icon to the bottom right ... A box that
   drops down from that top search is better. Also, if you are scrolling down,
   the search needs to stay fixed at the top."
   ════════════════════════════════════════════════════════════════════════ */

.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hairline);
}
.topbar .site-header[data-masthead]{border-bottom:0;height:88px}
.topbar .hints-bar{border-bottom:0;background:transparent}
.topbar .hints-bar .search-hints{padding:0 0 11px}

/* The panel hangs off the sticky bar, so answers appear under the field. */
.answer-panel{
  border-top:1px solid var(--hairline);
  background:#fff;
  box-shadow:0 24px 48px rgba(22,35,58,.13);
  max-height:min(62vh,560px);
  overflow:auto;overscroll-behavior:contain;
  animation:answerIn .16s ease-out;
}
@keyframes answerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.answer-panel{animation:none}}
.answer-inner{position:relative;padding:22px 0 26px}
.answer-close{
  position:absolute;right:0;top:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);background:#fff;color:var(--muted);
  font-size:20px;line-height:1;display:grid;place-items:center;
}
.answer-close:hover{border-color:var(--blue);color:var(--blue)}
.answer-body{display:grid;gap:16px;max-width:74ch;padding-right:46px}

.ans-q{border-left:3px solid var(--gold);padding-left:13px}
.ans-q-label{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ans-q p{margin:0;font-size:16px;font-weight:650;color:var(--navy)}
.ans-a p{margin:0 0 10px;font-size:16px;line-height:1.65;color:var(--navy)}
.ans-a p:last-child{margin-bottom:0}

.ans-thinking{display:flex;gap:6px;align-items:center;height:22px}
.ans-thinking .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.35;animation:blink 1.1s infinite}
.ans-thinking .dot:nth-child(2){animation-delay:.18s}
.ans-thinking .dot:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.ans-thinking .dot{animation:none;opacity:.5}}

.ans-handoff{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  background:var(--cream);border:1px solid #efe2c6;border-radius:11px;padding:14px;
}
.ans-handoff-p{flex-basis:100%;margin:0 0 3px;font-size:14px;font-weight:650;color:var(--navy)}
.ans-handoff input{
  flex:1 1 170px;min-width:0;height:42px;padding:0 12px;
  border:1px solid #d9cfb4;border-radius:8px;background:#fff;font-size:15px;color:var(--navy);
}
.ans-handoff .button{min-height:42px;flex:0 0 auto}
.ans-handoff-note{flex-basis:100%;margin:0;font-size:13px;color:var(--muted)}
.ans-handoff-note.is-error{color:var(--error)}
.ans-handoff-ok{margin:0;font-size:15px;font-weight:650;color:var(--navy)}

/* Anchors must clear the sticky bar. */
html{scroll-padding-top:150px}

@media(max-width:760px){
  .topbar .site-header[data-masthead]{height:auto;padding-block:11px}
  .answer-panel{max-height:70vh}
  .answer-inner{padding:16px 0 20px}
  .answer-body{padding-right:40px;gap:13px}
  .ans-a p,.ans-q p{font-size:15px}
  html{scroll-padding-top:110px}
}

/* ══ Hero scene + scroll-driven phone ══════════════════════════════════════
   JD 2026-09-24: land on a scene of people together, one with the app open;
   scrolling zooms into the phone, then the phone changes focus per industry.
   The scene's PHOTO SLOT is .scene-photo -- set a background-image on it.
   ════════════════════════════════════════════════════════════════════════ */

.scene{position:relative;min-height:clamp(520px,74vh,760px);display:grid;align-items:center;overflow:hidden;background:var(--ink-deep)}
.scene-photo{
  position:absolute;inset:0;
  background:#16233a center/cover no-repeat;   /* <- drop the photograph here */
}
.scene-figures{position:absolute;inset:0}
.scene-figures svg{width:100%;height:100%;display:block}
/* Keeps a headline legible over ANY photograph. Do not remove when a photo lands. */
.scene-scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,18,32,.93) 0%,rgba(11,18,32,.78) 42%,rgba(11,18,32,.34) 100%);
}
.scene-copy{position:relative;z-index:1;padding-block:56px}
.scene-copy h1{color:#fff;font-size:clamp(2.6rem,5vw,4.4rem);margin-bottom:18px;letter-spacing:-.05em}
.scene-sub{color:var(--gold);font-size:clamp(1.15rem,2vw,1.6rem);font-weight:750;letter-spacing:-.025em;margin-bottom:28px}
.scene-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.button.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.button.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.scene-foot{margin:0;color:rgba(255,255,255,.62);font-size:14.5px;max-width:56ch}

.showcase{padding:70px 0 84px;border-bottom:1px solid var(--hairline)}
.showcase-grid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:clamp(36px,6vw,92px);align-items:start}
.showcase-phone{position:sticky;top:176px}
.phone-cap{margin:14px 0 0;text-align:center;font-size:12px;color:var(--muted)}

.phone{
  position:relative;width:min(300px,100%);margin-inline:auto;aspect-ratio:9/18.6;
  background:#1b2336;border-radius:38px;padding:11px;
  box-shadow:0 26px 60px rgba(22,35,58,.28),0 2px 0 rgba(255,255,255,.12) inset;
}
.phone-notch{position:absolute;left:50%;top:15px;transform:translateX(-50%);width:96px;height:20px;border-radius:12px;background:#0f1626;z-index:2}
.phone-screen{position:relative;height:100%;border-radius:28px;background:#f4f7fc;overflow:hidden}
.scr{
  position:absolute;inset:0;padding:38px 15px 15px;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .34s ease,transform .34s ease;
  display:flex;flex-direction:column;gap:10px;
}
/* One rule per screen. These MUST track the .scr-* class names and the
   data-target values in index.html — when they drifted apart the phone
   rendered completely blank, because no selector matched and every screen
   stayed at opacity:0. */
.phone[data-screen="today"]    .scr-today,
.phone[data-screen="pulse"]    .scr-pulse,
.phone[data-screen="org"]      .scr-org,
.phone[data-screen="post"]     .scr-post,
.phone[data-screen="msgs"]     .scr-msgs,
.phone[data-screen="events"]   .scr-events,
.phone[data-screen="grow"]     .scr-grow,
.phone[data-screen="momentum"] .scr-momentum,
.phone[data-screen="admin"]    .scr-admin{opacity:1;transform:none}

/* Belt and braces: if the observer never fires (or a name drifts again),
   show the first screen rather than an empty handset. */
.phone:not([data-screen]) .scr-today{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.scr{transition:none}}

.scr-top{display:flex;justify-content:space-between;align-items:baseline}
.scr-brand{font-size:13px;font-weight:800;letter-spacing:-.035em;color:var(--navy)}
.scr-tag{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.scr-goal{background:var(--cream);border:1px solid #efe2c6;border-radius:10px;padding:10px}
.scr-goal strong{display:block;font-size:20px;font-weight:800;letter-spacing:-.04em;color:var(--navy)}
.scr-goal strong span{font-size:11px;font-weight:650;color:var(--muted)}
.scr-goal em{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);margin:3px 0 7px}
.scr-track{height:6px;border-radius:3px;background:#f0e6d0;overflow:hidden}
.scr-track>span{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--gold),#e0a93f)}
.scr-goal small{display:block;margin-top:5px;font-size:10.5px;color:var(--muted)}
.scr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.scr-stats div{background:#fff;border-radius:9px;padding:8px 7px}
.scr-stats b{display:block;font-size:15px;letter-spacing:-.03em;color:var(--navy)}
.scr-stats span{display:block;font-size:9.5px;color:var(--muted);margin-top:1px}
.scr-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;align-items:end;height:52px}
.scr-bars i{display:block;height:var(--h);border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--blue),#7d99d8)}
.scr-bars i:last-child{background:linear-gradient(180deg,var(--gold),#f0d08c)}
.scr-cap{font-size:10px;color:var(--muted)}
.scr-tree{width:100%;height:auto;background:#fff;border-radius:10px;padding:8px}
.scr-rows{display:grid;gap:6px}
.scr-row{display:flex;align-items:center;gap:8px;background:#fff;border-radius:9px;padding:8px 9px}
.scr-row i{flex:1;font-style:normal;font-size:11px;color:var(--navy)}
.scr-row b{font-size:12px;color:var(--blue)}
.av{width:19px;height:19px;border-radius:50%;flex-shrink:0}
.av.b{background:#426bc1}.av.g{background:#e0a93f}.av.l{background:#7d99d8}
.scr-hero-num{background:#fff;border-radius:10px;padding:11px}
.scr-hero-num b{display:block;font-size:24px;font-weight:800;letter-spacing:-.045em;color:var(--navy)}
.scr-hero-num span{font-size:10.5px;color:var(--muted)}
.scr-note{margin-top:auto;font-size:10.5px;color:var(--muted);border-top:1px solid #e4eaf4;padding-top:8px}
.scr-feed{display:grid;gap:7px}
.fd{display:flex;gap:8px;align-items:center;background:#fff;border-radius:9px;padding:8px 9px}
.fd b{display:block;font-size:11.5px;color:var(--navy)}
.fd i{font-style:normal;font-size:10px;color:var(--muted)}

.showcase-steps{display:grid;gap:clamp(70px,14vh,150px);padding-block:40px 120px}
.step h2,.step h3{letter-spacing:-.04em;margin-bottom:14px}
.step h3{font-size:clamp(1.5rem,2.6vw,2.05rem)}
.step p{font-size:16.5px;line-height:1.7;color:var(--muted);max-width:50ch;margin-bottom:14px}
.step .descriptor{margin-bottom:12px}
.step .text-button{font-size:15px}

@media(max-width:900px){
  .showcase-grid{grid-template-columns:1fr;gap:26px}
  /* Sticky would trap the phone above the copy on a narrow screen. */
  .showcase-phone{position:static}
  .phone{width:min(260px,72vw)}
  .showcase-steps{gap:46px;padding-block:8px 0}
  .scene-copy{padding-block:44px}
}

/* ══ Overflow containment + a mobile first impression that isn't a wall ═════
   JD 2026-09-24: "this should never horizontally scroll on mobile. The first
   impression is overwhelming. To be forced to read this much absolutely sucks."

   Two separate faults. (1) Decorative absolutely-positioned artwork sat outside
   the viewport with nothing clipping it, so the page scrolled sideways.
   (2) Desktop paragraph lengths were shipped straight to a 390px screen.
   ════════════════════════════════════════════════════════════════════════ */

/* (1) Nothing may ever push the page sideways. Belt and braces: clip at the
   root AND give every section its own containment, because overflow-x on
   <body> alone is silently ignored once a descendant establishes a new
   containing block. */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
main,section,.topbar,.shell{max-width:100%;min-width:0}
section{overflow-x:clip}
/* Decorative art is clipped by its section and can never be the cause. */
.brand-watermark,.scene-figures{max-width:100%;pointer-events:none}
img,svg,video,canvas{max-width:100%}
/* Grid/flex children default to min-width:auto, which is what actually lets a
   long word or a wide child blow out a row. */
.showcase-grid>*,.sov-shell>*,.cap-grid>*,.hero>*{min-width:0}

@media(max-width:760px){
  /* (2) Cut the first screen down to a headline, one line, one action. */
  .scene{min-height:auto}
  .scene-copy{padding-block:34px 36px}
  .scene-copy h1{font-size:clamp(2.1rem,9vw,2.7rem);margin-bottom:12px}
  .scene-sub{font-size:1.05rem;margin-bottom:20px}
  .scene-actions{gap:9px;margin-bottom:0}
  .scene-actions .button{flex:1 1 auto;justify-content:center}
  .scene-foot{display:none}          /* the sub-line already says it */

  /* Long-form paragraphs are desktop reading, not phone reading. */
  .sov-lede:not(.sov-punch){display:none}
  .platform-lede{display:none}
  .step p{font-size:15px}
  .showcase{padding:40px 0 48px}
  .showcase-steps{gap:38px}

  /* The watermark was the widest thing on the page. */
  .brand-watermark{display:none}
}

/* ── Legal pages ── */
.legal-page{padding:44px 0 72px;max-width:min(76ch,calc(100% - 96px))}
.legal-page h1{font-size:clamp(2.2rem,4.5vw,3.2rem);margin-bottom:10px}
.legal-meta{font-size:14px;color:var(--muted);margin-bottom:26px}
.legal-lede{font-size:18px;line-height:1.7;color:var(--navy);background:var(--cream);border:1px solid #efe2c6;border-radius:11px;padding:16px 18px;margin-bottom:34px}
.legal-page h2{font-size:1.35rem;margin:34px 0 10px;letter-spacing:-.03em}
.legal-page h3{font-size:1.02rem;margin:20px 0 6px;color:var(--navy)}
.legal-page p{font-size:16px;line-height:1.72;color:var(--muted);margin-bottom:12px}
.legal-page strong{color:var(--navy)}
.legal-page em{font-style:italic}
.legal-list{margin:0 0 14px;padding-left:20px;display:grid;gap:8px}
.legal-list li{font-size:16px;line-height:1.66;color:var(--muted)}
.legal-contact{background:#f7f9fd;border-left:3px solid var(--blue);padding:14px 16px;border-radius:0 8px 8px 0;color:var(--navy)}
.legal-contact a{color:var(--blue)}
.legal-back{margin-top:38px;padding-top:20px;border-top:1px solid var(--hairline)}
.legal-back a{color:var(--blue);font-weight:650;text-decoration:none}
.legal-back a:hover{text-decoration:underline}
@media(max-width:760px){
  .legal-page{padding:28px 0 48px;max-width:calc(100% - 36px)}
  .legal-lede{font-size:16px;padding:14px}
  .legal-page p,.legal-list li{font-size:15px}
}

/* ── Mobile overflow: the hero headline was the culprit. ──
   `Your address book.` is a forced line (<br>), so it cannot wrap. At
   clamp(...,9vw,2.7rem) it measured wider than a 414px screen minus gutters
   and pushed the page sideways -- which is why the close button and the
   headline both ran off the right edge. Sized to fit the narrowest line box,
   with hyphenation as a backstop for narrower devices still. */
@media(max-width:760px){
  .scene-copy h1{
    font-size:clamp(1.7rem,7.4vw,2.2rem);
    overflow-wrap:break-word;hyphens:auto;
  }
  .scene-sub{font-size:1rem;overflow-wrap:break-word}
  /* The panel's close button must sit inside the gutter, not on the edge. */
  .answer-close{right:2px;top:10px;width:30px;height:30px;font-size:18px}
  .answer-body{padding-right:36px}
}
@media(max-width:380px){
  .scene-copy h1{font-size:1.55rem}
}

/* ══ Nine phone screens ════════════════════════════════════════════════════
   Drawn close to the real surfaces in the app so the page shows what the
   product actually does. Figures are representative — the panel is marked
   "Example view" — and deliberately at the real scale (35 pts at +5 a step,
   not the four-figure number that used to be here).
   ════════════════════════════════════════════════════════════════════════ */

.scr-greet{font-size:15px;font-weight:800;letter-spacing:-.03em;color:var(--navy);margin:0}
.scr-greet.sm{font-size:13px}
.scr-sub{font-size:10.5px;color:var(--muted);margin:0 0 2px}

/* Today */
.scr-wf{background:#fff;border-radius:10px;padding:10px}
.scr-wf-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.scr-wf-head b{font-size:11.5px;color:var(--navy)}
.scr-wf-head span{font-size:9.5px;color:var(--muted)}
.scr-stepper{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.scr-stepper i{flex:1;height:4px;border-radius:2px;background:#e4eaf4}
.scr-stepper i.done{background:var(--blue)}
.scr-stepper i.now{background:var(--gold)}
.scr-stages{display:flex;justify-content:space-between;font-size:8.5px;color:var(--muted)}
.scr-chips{display:flex;flex-wrap:wrap;gap:4px}
.scr-chips span{font-size:9px;border:1px solid var(--border);border-radius:11px;padding:3px 7px;background:#fff;color:var(--navy)}
.scr-askbar{margin-top:auto;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #d9e1ee;border-radius:18px;padding:6px 6px 6px 11px}
.scr-askbar span{flex:1;font-size:9.5px;color:#8b97ab}
.scr-askbar b{font-size:9.5px;background:var(--blue);color:#fff;border-radius:12px;padding:4px 9px}

/* Business pulse */
.scr-move{background:var(--blue);border-radius:10px;padding:11px;color:#fff}
.scr-move-eyebrow{display:block;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.82;margin-bottom:5px}
.scr-move b{display:block;font-size:12.5px;line-height:1.3;margin-bottom:5px}
.scr-move p{margin:0 0 8px;font-size:9.5px;opacity:.82;line-height:1.4}
.scr-move-cta{display:inline-block;font-size:9.5px;font-weight:700;background:#fff;color:var(--blue);border-radius:12px;padding:4px 10px}
.scr-rank{background:#fff;border-radius:10px;padding:10px}
.scr-rank>div:first-child{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.scr-rank span{font-size:9px;color:var(--muted)}
.scr-rank b{font-size:12px;color:var(--navy)}
.scr-rank small{display:block;margin-top:6px;font-size:9px;color:var(--muted)}

/* Organization */
.scr-split{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.scr-split div{background:#fff;border-radius:9px;padding:9px;text-align:center}
.scr-split b{display:block;font-size:17px;letter-spacing:-.04em;color:var(--navy)}
.scr-split span{font-size:9px;color:var(--muted)}

/* Community */
.scr-composer{background:#fff;border-radius:10px;padding:10px}
.scr-composer-in{font-size:10px;color:#8b97ab;border:1px solid #e4eaf4;border-radius:8px;padding:8px 9px;margin-bottom:8px}
.scr-composer-row{display:flex;align-items:center;gap:5px}
.cw{font-size:8.5px;font-weight:650;border-radius:10px;padding:3px 7px;background:#eef2fa;color:var(--navy)}
.cw.live{background:#ffe9ee;color:#c2255c}
.cw.ai{background:#eaf7f0;color:#0d7a4a}
.scr-composer-row b{margin-left:auto;font-size:9.5px;background:var(--blue);color:#fff;border-radius:11px;padding:4px 10px}
.scr-filters{display:flex;gap:4px}
.scr-filters span{font-size:9px;border-radius:11px;padding:3px 8px;background:#fff;color:var(--muted)}
.scr-filters span.on{background:var(--blue);color:#fff;font-weight:650}

/* Messages */
.scr-search{font-size:10px;color:#8b97ab;background:#fff;border-radius:9px;padding:8px 10px}

/* Events */
.scr-make{background:#eef2fa;border-radius:10px;padding:10px}
.scr-make-eyebrow{display:block;font-size:9px;font-weight:700;color:var(--navy);margin-bottom:3px}
.scr-make p{margin:0 0 8px;font-size:9.5px;color:var(--muted);line-height:1.4}
.scr-make-in{display:flex;align-items:center;gap:6px;background:#fff;border-radius:8px;padding:6px 6px 6px 9px}
.scr-make-in i{flex:1;font-style:normal;font-size:9.5px;color:var(--navy)}
.scr-make-in b{font-size:9px;background:var(--blue);color:#fff;border-radius:10px;padding:4px 8px;white-space:nowrap}
.dt{display:grid;place-items:center;width:26px;flex-shrink:0;background:var(--blue);color:#fff;border-radius:7px;padding:3px 0}
.dt b{font-size:11px;line-height:1}
.dt i{font-style:normal;font-size:7px;letter-spacing:.06em}

/* Grow */
.scr-rec{background:#fff;border-radius:10px;padding:10px;position:relative}
.scr-stage{display:inline-block;font-size:8.5px;font-weight:700;background:#eef2fa;color:var(--blue);border-radius:9px;padding:2px 7px;margin-bottom:5px}
.scr-rec b{display:block;font-size:11.5px;color:var(--navy);margin-bottom:3px}
.scr-rec p{margin:0;font-size:9.5px;color:var(--muted);line-height:1.4}
.scr-dur{position:absolute;right:10px;top:10px;font-size:9px;color:var(--muted)}

/* Momentum */
.scr-pts{display:grid;grid-template-columns:auto 1fr;gap:7px}
.scr-pts div{background:#fff;border-radius:9px;padding:9px}
.scr-pts div:first-child b{font-size:20px;letter-spacing:-.04em;color:var(--navy);display:block}
.scr-pts div:last-child b{font-size:11.5px;color:var(--navy);display:block}
.scr-pts span{font-size:9px;color:var(--muted)}

/* Admin */
.scr-rows.tight{gap:4px}
.sw{width:22px;height:13px;border-radius:7px;background:#d9e1ee;flex-shrink:0;position:relative}
.sw.on{background:#12b886}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#fff}
.sw.on::after{left:auto;right:2px}
.scr-rule{background:#fff;border-radius:10px;padding:10px}
.scr-rule p{margin:0;font-size:10px;color:var(--muted);line-height:1.45}
.scr-rule b{color:var(--navy)}
.scr-rule em{font-style:normal;font-weight:700;color:var(--gold)}
.scr-preview{background:var(--cream);border:1px solid #efe2c6;border-radius:10px;padding:9px}
.scr-preview span{display:block;font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.scr-preview b{font-size:11px;color:var(--navy)}
.scr-preview i{float:right;font-style:normal;font-size:10px;font-weight:700;color:var(--gold)}

/* ── Mobile gets the sticky scroll/screen feature too ──
   It used to go position:static below 900px, which killed the whole effect on
   the device most visitors are holding. Instead the phone sticks under the
   masthead and shrinks, and the copy panels scroll past it. */
@media(max-width:900px){
  .showcase-grid{grid-template-columns:1fr;gap:0}
  .showcase-phone{
    position:sticky;
    top:calc(var(--topbar-h,96px) + 8px);
    z-index:2;
    padding-bottom:10px;
    background:linear-gradient(180deg,#fff 78%,rgba(255,255,255,0));
  }
  .phone{width:min(210px,52vw)}
  .phone-cap{margin-top:8px;font-size:11px}
  .showcase-steps{gap:56vh;padding-block:22vh 34vh}
  .step{max-width:none}
}
@media(max-width:760px){
  .showcase-phone{top:74px}
  .phone{width:min(190px,50vw)}
  .showcase-steps{gap:52vh;padding-block:20vh 30vh}
  .step h2,.step h3{font-size:clamp(1.35rem,6vw,1.7rem)}
  .step p{font-size:14.5px}
}

/* ── Conversational follow-ups in the answer panel ──
   The assistant used to answer and stop. It now asks one short question at a
   time and keeps the replies as a brief that travels to the CRM with the
   contact. Everything here is that exchange. */
.ans-q.said{border-left-color:var(--blue)}
.ans-q.said .ans-q-label{color:var(--blue)}

.ans-follow{border-top:1px solid var(--hairline);padding-top:14px}
.ans-follow-q{margin:0 0 11px;font-size:16px;font-weight:650;color:var(--navy);line-height:1.45}
.ans-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ans-chip{
  border:1px solid var(--border);border-radius:16px;background:#fff;
  color:var(--navy);font-size:14px;padding:7px 13px;min-height:34px;
  transition:border-color .14s ease,color .14s ease,background-color .14s ease;
}
.ans-chip:hover{border-color:var(--blue);color:var(--blue);background:#f6f8fd}
.ans-chip.go{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:650}
.ans-chip.go:hover{background:#3458a5}
.ans-inline{display:flex;gap:6px;flex:1 1 260px;min-width:0}
.ans-inline input{
  flex:1 1 auto;min-width:0;height:34px;padding:0 12px;font-size:14px;
  border:1px solid var(--border);border-radius:16px;background:#fff;color:var(--navy);
}
.ans-inline input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(66,107,193,.15)}
.ans-skip{
  display:block;margin-top:11px;background:none;border:0;padding:4px 0;
  font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.ans-skip:hover{color:var(--blue)}

.ans-consent{
  flex-basis:100%;display:flex;gap:9px;align-items:flex-start;
  font-size:13px;line-height:1.45;color:var(--muted);margin-top:2px;cursor:pointer;
}
.ans-consent input{flex-shrink:0;width:16px;height:16px;margin-top:2px;accent-color:var(--blue)}

@media(max-width:760px){
  .ans-follow-q{font-size:15px}
  .ans-chip{font-size:13px;padding:6px 11px}
  .ans-inline{flex-basis:100%}
}

/* The consent row is a flex child of .ans-handoff, so it needs its own
   alignment or the checkbox floats to the centre of the row. */
.ans-handoff .ans-consent{justify-content:flex-start;align-items:flex-start;text-align:left}
.ans-handoff .ans-consent span{flex:1}

/* ══ Mobile showcase ═══════════════════════════════════════════════════════
   JD: "This scroll isn't working right on mobile. There's almost no screen
   real-estate."

   Two attempts failed for the same underlying reason: a 9:18.6 phone bezel is
   the wrong shape to put ON a phone. Width-sizing made it too tall; height-
   sizing made it ~110px wide and the screen content wrapped to shreds.

   So on mobile the bezel is dropped entirely and the screen is shown as a wide
   card. The visitor is already holding a phone — they do not need a picture of
   one. That buys roughly 3x the usable width for the same vertical space.
   ════════════════════════════════════════════════════════════════════════ */

@media(max-width:900px){
  .showcase{padding:20px 0 28px}
  .showcase-grid{grid-template-columns:1fr;gap:0}

  .showcase-phone{
    position:sticky;
    top:62px;                 /* masthead only — hints bar is hidden here */
    z-index:2;
    padding:10px 0 14px;
    background:linear-gradient(180deg,#fff 0,#fff 88%,rgba(255,255,255,0) 100%);
  }

  /* Card, not handset. */
  .phone{
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:auto;
    min-height:0;
    padding:0;
    background:transparent;
    box-shadow:none;
    border-radius:0;
  }
  .phone-notch{display:none}
  .phone-screen{
    position:relative;
    height:auto;
    min-height:34vh;
    max-height:40vh;
    border-radius:14px;
    border:1px solid var(--border);
    box-shadow:0 1px 2px rgba(22,35,58,.05),0 10px 26px rgba(22,35,58,.09);
    overflow:hidden;
  }
  /* Screens are absolutely positioned to cross-fade; the tallest one sets the
     height, so give the container a floor via min-height above. */
  .scr{padding:14px 14px 12px;gap:9px}
  .scr-top{font-size:12px}
  .phone-cap{display:none}

  .showcase-steps{display:block;padding:0 0 24vh}
  .step{
    min-height:60vh;
    display:flex;flex-direction:column;justify-content:center;
    padding-block:3vh;
  }
  .step .descriptor{margin-bottom:8px}
  .step h2,.step h3{font-size:clamp(1.45rem,6.4vw,1.9rem);margin-bottom:10px}
  .step p{font-size:15px;line-height:1.6;margin-bottom:10px;max-width:none}
}

@media(max-width:760px){
  .showcase-phone{top:58px}
  .phone-screen{min-height:32vh;max-height:38vh}
  .step{min-height:56vh}
  .step p{font-size:14.5px}
}

/* Short screens: give the words priority over the picture. */
@media(max-width:900px) and (max-height:700px){
  .phone-screen{min-height:28vh;max-height:32vh}
  .step{min-height:62vh}
}

/* Use the MEASURED masthead height everywhere something sticks beneath it.
   The fallbacks only apply before the script runs. */
@media(max-width:900px){
  .showcase-phone{top:calc(var(--topbar-h, 110px) + 6px)}
}
@media(max-width:760px){
  .showcase-phone{top:calc(var(--topbar-h, 104px) + 6px)}
}
html{scroll-padding-top:calc(var(--topbar-h, 150px) + 12px)}
/* removed: circular — panel sized from a measurement that included the panel */

/* The sticky card's background was a gradient that went transparent inside its
   own box, so the heading scrolling underneath showed through and collided
   with the card. Solid white for the box, and move the fade to a strip BELOW
   it so content still dissolves rather than cutting off hard. */
@media(max-width:900px){
  .showcase-phone{background:#fff;padding-bottom:0}
  .showcase-phone::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:24px;
    background:linear-gradient(180deg,#fff,rgba(255,255,255,0));
    pointer-events:none;
  }
  /* Less dead air between panels — 60vh of centred text left a blank screen
     between each one. */
  .step{min-height:52vh;padding-block:2vh}
  .showcase-steps{padding-bottom:16vh}
}
@media(max-width:760px){
  .step{min-height:50vh}
}

/* ══ Kill the see-through band between the masthead and the sticky card ════
   JD: "the text scrolls under, then behind" — jarring.

   Two causes, both mine:
   1. `top: calc(var(--topbar-h) + 6px)` left a 6px TRANSPARENT gap, and the
      container's own top padding added ~10px more. Copy scrolling past showed
      through that ~16px slot, clipped mid-glyph. The offset now sits flush and
      the breathing room moved INSIDE the container, where its white background
      covers it.
   2. The masthead is translucent (rgba .92 + blur), so text ghosted through it
      too. Opaque on mobile — the blur is a desktop nicety, not worth text
      smearing underneath it on a phone.
   ════════════════════════════════════════════════════════════════════════ */

@media(max-width:900px){
  .topbar{
    background:#fff;                 /* fully opaque: nothing shows through */
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .showcase-phone{
    top:var(--topbar-h, 110px);      /* flush — no transparent gap */
    padding-top:12px;                /* breathing room, but painted white */
    background:#fff;
  }
  /* Cover the sub-pixel seam some browsers leave between two sticky elements. */
  .showcase-phone::before{
    content:"";position:absolute;left:0;right:0;bottom:100%;height:10px;
    background:#fff;pointer-events:none;
  }
}
@media(max-width:760px){
  .showcase-phone{top:var(--topbar-h, 104px)}
}

/* Bottom edge: same class of bug as the top band. Rather than chase which
   pixel leaks, make the sticky block an opaque, isolated layer that always
   paints above the scrolling copy, with white padding under the card so the
   copy dissolves below it instead of touching it. */
@media(max-width:900px){
  .showcase-phone{
    z-index:5;
    isolation:isolate;
    padding-bottom:14px;       /* painted white, so copy can't touch the card */
  }
  .phone-screen{
    background:#f4f7fc;        /* explicitly opaque — never inherit transparency */
    position:relative;
    z-index:1;
  }
  .showcase-phone::after{
    top:100%;height:28px;
    background:linear-gradient(180deg,#fff 0,#fff 35%,rgba(255,255,255,0) 100%);
  }
  /* The copy must never claim a layer above the sticky block. */
  .showcase-steps,.step{position:relative;z-index:0}
}

/* No gradient tail on mobile. A white→transparent fade renders the copy as a
   half-visible ghost while it passes, which is the "scrolls under, then
   behind" effect JD flagged. An opaque edge is what every sticky header does
   and what people read as normal: the text simply goes away. */
@media(max-width:900px){
  .showcase-phone::after{display:none}
  .showcase-phone{padding-bottom:16px}
}

/* The card clips its own screen content at max-height, which left a row sliced
   in half and read as a bug. This fade sits INSIDE the card over its own
   content, so the cut looks deliberate — a screen that continues, not a
   rendering fault. (Unlike the outer fade that was removed: that one sat over
   the page copy and made it ghost.) */
@media(max-width:900px){
  .phone-screen::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:34px;
    background:linear-gradient(180deg,rgba(244,247,252,0),#f4f7fc 82%);
    pointer-events:none;z-index:3;
  }
}

/* Overlap the masthead by 1px instead of abutting it. Two sticky elements that
   meet exactly will show a hairline gap (or a 1px bounce) whenever the browser
   rounds their positions differently — which it does continuously while
   scrolling. The masthead is opaque and sits on a higher layer, so the overlap
   is invisible and the seam can never open. */
@media(max-width:900px){
  .showcase-phone{top:calc(var(--topbar-h, 110px) - 1px)}
}
@media(max-width:760px){
  .showcase-phone{top:calc(var(--topbar-h, 104px) - 1px)}
}

/* Break the other half of the loop: the answer panel must NOT size itself from
   --topbar-h, because the panel is a child of the element that variable
   measures. A plain viewport cap is stable and can never feed back. */
.answer-panel{max-height:min(62vh, 560px)}
@media(max-width:760px){
  .answer-panel{max-height:70vh}
}

/* ══ GROWTH JOURNEY ════════════════════════════════════════════════════════
   ONE continuous shot. The photograph IS the background of the page for the
   whole journey -- a sticky full-bleed stage that never unmounts -- with the
   words floating over it. There are no per-scene cards, frames, captions or
   section rules, because any of those make it feel like page segments rather
   than one camera move.

   Namespaced .jr-* deliberately. The retired hero left .scene/.scene-copy
   rules behind in this file and the storyboard uses those same names, so
   reusing them would inherit the old hero's styling.
   ════════════════════════════════════════════════════════════════════════ */

.jr{position:relative}

/* The rail is pure scroll distance: one viewport per beat, plus one so the
   last beat can finish before the page moves on. */
.jr-rail{height:600vh}
.jr-fixed{position:sticky;top:0;height:100vh;overflow:hidden;background:#0d1626}

/* ── the frames ───────────────────────────────────────────────────────────
   Stacked, not laid out. Only the current one (and the one dissolving in) is
   visible; journey.js drives opacity, so nothing here transitions on its own
   and there is no CSS animation to fight the scroll. */
.jr-shots{position:absolute;inset:0}
.jr-shot{position:absolute;inset:0;margin:0;opacity:0;will-change:opacity}
.jr-shot img{position:absolute;max-width:none;will-change:transform;transform-origin:0 0}

.jr-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.jr-ui{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;
  background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  font-family:var(--font);color:var(--navy);box-shadow:0 2px 14px rgba(8,16,32,.34)}

/* Keeps the headline legible over any frame without flattening the picture. */
.jr-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(9,16,30,.86) 0%,rgba(9,16,30,.55) 26%,
    rgba(9,16,30,.12) 54%,rgba(9,16,30,.30) 100%)}

/* ── the words ────────────────────────────────────────────────────────────
   Over the picture, bottom-left, one beat visible at a time. */
.jr-copy{position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:0 0 clamp(46px,7vh,96px)}
.jr-beat{position:absolute;left:0;right:0;bottom:clamp(46px,7vh,96px);
  opacity:0;will-change:opacity}
.jr-beat-in{width:min(1240px,calc(100% - 96px));margin-inline:auto;max-width:none}
.jr-beat-in>*{max-width:min(640px,100%)}
.jr-chapter{display:block;font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#9fc0ff;margin-bottom:14px}
.jr-beat h1,.jr-beat h2{color:#fff;text-wrap:balance;
  text-shadow:0 2px 24px rgba(4,10,22,.5)}
.jr-beat h1{font-size:clamp(2.4rem,5vw,4.4rem);margin-bottom:16px}
.jr-beat h2{font-size:clamp(2rem,4vw,3.4rem);margin-bottom:14px}
.jr-beat>.jr-beat-in>p{font-size:clamp(16px,1.35vw,20px);line-height:1.6;
  color:rgba(255,255,255,.88);margin-bottom:0}
.jr-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.jr-note{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62);
  margin:16px 0 0;padding-left:12px;border-left:2px solid var(--gold)}

.jr-credit{position:absolute;right:clamp(16px,3vw,34px);bottom:12px;margin:0;
  font-size:11px;color:rgba(255,255,255,.5)}

@media(max-width:1050px){
  .jr-beat-in{width:calc(100% - 44px)}
}
@media(max-width:760px){
  /* Shorter rail so the story does not become a scroll trap on a phone. */
  .jr-rail{height:440vh}
  .jr-beat h1{font-size:34px}
  .jr-beat h2{font-size:29px}
  .jr-beat>.jr-beat-in>p{font-size:15.5px}
  .jr-credit{left:22px;right:22px;text-align:left;font-size:10px}
}

/* Reduced motion: the camera stops. Each beat is a still frame with its words
   -- a coherent sequence, no zoom, no dissolve, nothing moving under a reader
   who asked for that. */
@media(prefers-reduced-motion:reduce){
  .jr-shot img{transform:none!important}
  .jr-shot,.jr-beat{transition:none!important}
}

/* ── the sanitized product UI ─────────────────────────────────────────────
   Written at design scale (a 300x620 "phone"), then projected onto the real
   screen. Being HTML rather than an image it stays crisp at any zoom, which is
   what lets the camera finish on legible text. */
.jr-u-top{display:flex;align-items:center;gap:9px;padding:15px 16px;
  border-bottom:1px solid #e7ecf5;background:#fbfcfe}
.jr-u-mark{width:22px;height:23px;flex:0 0 auto;background:url("./img/gl-mark.webp") center/contain no-repeat}
.jr-u-top b{font-size:16px;letter-spacing:-.03em}
.jr-u-top span{margin-left:auto;font-size:11px;color:var(--muted);
  border:1px solid var(--border);border-radius:11px;padding:2px 8px;white-space:nowrap}
.jr-u-fill{flex:1 1 auto;min-height:0}
.jr-u-video{flex:1 1 auto;margin:16px;min-height:150px;border-radius:14px;display:grid;
  place-content:center;gap:9px;justify-items:center;background:linear-gradient(155deg,#cfdcf3,#9fb6dd)}
.jr-u-video span{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  background:#fff;color:var(--blue);font-weight:750;font-size:20px}
.jr-u-video em{font-style:normal;font-size:14px;font-weight:650;color:#26324a}
.jr-u-video u{text-decoration:none;font-size:12px;color:#33456a}
.jr-u-video.live{background:linear-gradient(155deg,#26365c,#131f36)}
.jr-u-video.live span{background:#d9342b;color:#fff}
.jr-u-video.live em,.jr-u-video.live u{color:#e8eefb}
.jr-u-robin{display:flex;gap:9px;align-items:flex-start;margin:0 16px 14px;padding:12px 13px;
  border:1px solid #d9e3f6;border-radius:12px;background:#f7f9fe;
  font-size:13.5px;line-height:1.45;font-weight:600}
.jr-u-robin i{flex:0 0 auto;width:15px;height:15px;margin-top:1px;border-radius:4px;
  background:linear-gradient(135deg,#5b8def,#2f56a8)}
.jr-u-ctl{display:flex;justify-content:center;gap:18px;padding:6px 0 20px}
.jr-u-ctl i{width:50px;height:50px;border-radius:50%;background:#eef2f8}
.jr-u-ctl i.end{background:#d9342b}
.jr-u-kicker{margin:16px 16px 9px;font-size:13px;font-weight:700;color:var(--muted)}
.jr-u-bar{margin:0 16px;height:8px;border-radius:5px;background:#e7ecf5;overflow:hidden}
.jr-u-bar i{display:block;height:100%;border-radius:5px;background:var(--blue)}
.jr-u-step{margin:12px 16px 4px;font-size:16px;font-weight:750;letter-spacing:-.02em}
.jr-u-row{display:flex;align-items:center;gap:10px;margin:0 16px;padding:11px 0;
  border-bottom:1px solid #eef2f8;font-size:14px}
.jr-u-row.sm{font-size:13px;color:var(--muted)}
.jr-u-row.now{font-weight:700}
.jr-u-row i{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:#eef2f8;color:var(--blue);font-size:12px;font-weight:750;font-style:normal}
.jr-u-row i.ok{background:#e4f3ea;color:#2c7a4b}
.jr-u-row i.ok::before{content:"\2713"}
.jr-u-stat{margin:18px 16px 10px}
.jr-u-stat b{display:block;font-size:44px;letter-spacing:-.045em;line-height:1}
.jr-u-stat span{font-size:13px;color:var(--muted)}
.jr-u-mini{display:flex;gap:10px;margin:0 16px 14px}
.jr-u-mini div{flex:1;border-left:2px solid var(--gold);padding-left:9px}
.jr-u-mini b{display:block;font-size:20px;letter-spacing:-.03em}
.jr-u-mini span{font-size:11px;color:var(--muted)}
.jr-u-msg{display:flex;gap:9px;margin:12px 16px}
.jr-u-msg i{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#edf2fb;color:var(--blue);font-size:11px;font-weight:750;font-style:normal}
.jr-u-msg p{margin:0;font-size:13.5px;line-height:1.45}
.jr-u-cta{margin:0 16px 10px;padding:12px;border-radius:11px;background:var(--blue);color:#fff;
  font-size:13.5px;font-weight:650;text-align:center}
.jr-u-cta.ghost{background:#fff;border:1px solid #d9e3f6;color:var(--blue)}
.jr-u-split{display:flex;height:calc(100% - 54px)}
.jr-u-side{flex:0 0 96px;border-right:1px solid #eef2f8;padding:14px 12px;display:grid;
  gap:12px;align-content:start}
.jr-u-side i{display:block;height:11px;border-radius:4px;background:#e7ecf5}
.jr-u-thread{flex:1;padding:16px;display:grid;gap:10px;align-content:start}
.jr-u-thread p{margin:0;font-size:13px;line-height:1.4;padding:10px 12px;border-radius:12px;max-width:82%}
.jr-u-thread p.them{background:#eef2f8}
.jr-u-thread p.me{background:var(--blue);color:#fff;justify-self:end}

/* The invitation that follows the film. */
.jr-close{text-align:center;max-width:660px;padding-block:56px 60px}
.jr-close p{font-size:19px;line-height:1.5;color:var(--muted);margin-bottom:20px}
@media(max-width:760px){.jr-close{padding-block:40px}.jr-close p{font-size:16px}}


/* ══ ROBIN ════════════════════════════════════════════════════════════════
   Full-viewport conversation opening from the top, per the correction brief.
   Mobile gets the same full-screen treatment, not a shrunken modal. */
.robin{position:fixed;inset:0;z-index:60;background:rgba(18,28,46,.42)}
.robin[hidden]{display:none!important}
.robin-sheet{position:absolute;left:0;right:0;top:0;height:100%;
  display:flex;flex-direction:column;background:#fff;
  transform:translateY(-100%);transition:transform .24s cubic-bezier(.22,.7,.3,1)}
.robin.is-open .robin-sheet{transform:none}
/* Full viewport at every width -- the brief asks for a top-down full-viewport
   conversation, and CC-HANDOFF is explicit that mobile gets the same
   full-screen experience rather than a tiny modal. Only the reading column is
   constrained, because a conversation set across 1440px is unreadable. */
@media(prefers-reduced-motion:reduce){.robin-sheet{transition:none}}
body.robin-open{overflow:hidden}

.robin-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--hairline);flex:0 0 auto}
.robin-id{display:flex;align-items:center;gap:9px;font-size:16px;letter-spacing:-.02em}
.robin-x{border:1px solid var(--border);background:#fff;border-radius:20px;
  min-height:38px;padding:6px 15px;font-size:14px;font-weight:600}
.robin-scroll{flex:1 1 auto;overflow:auto;overscroll-behavior:contain}
.robin-inner{width:min(660px,calc(100% - 44px));margin-inline:auto;padding:26px 0 8px}
.robin-inner h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:10px}
.robin-sub{font-size:16px;color:var(--muted);margin-bottom:22px}

.robin-starters{display:grid;gap:8px;margin-bottom:22px}
.robin-starters button{text-align:left;border:1px solid var(--border);background:#fff;
  border-radius:11px;min-height:46px;padding:11px 15px;font-size:15px;color:var(--navy)}
.robin-starters button:hover{border-color:var(--blue);background:#f6f8fd}

.robin-log{display:grid;gap:15px}
.robin-msg p{margin:0;font-size:15.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.robin-who{display:block;font-size:11px;font-weight:750;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.robin-msg.user{background:#edf2fb;border-radius:13px;padding:13px 15px;margin-left:34px}
.robin-msg.assistant{padding:2px 0 2px 13px;border-left:2px solid var(--gold)}
.robin-msg.is-error p{color:var(--error)}

.robin-brief,.robin-contact{margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline)}
.robin-brief h3,.robin-contact h3{font-size:18px;margin-bottom:6px}
.robin-brief-hint{font-size:13px;color:var(--muted);margin-bottom:11px}
.robin-brief textarea{width:100%;border:1px solid #b9c5d9;border-radius:10px;padding:13px;
  font:inherit;font-size:15px;line-height:1.55;color:var(--navy);resize:vertical}
.robin-fields{display:grid;gap:12px;margin:14px 0}
@media(min-width:620px){.robin-fields{grid-template-columns:1fr 1fr}
  .robin-fields label:nth-child(3){grid-column:1/-1}}
.robin-fields label{display:block;font-size:14px;font-weight:650}
.robin-fields label span{font-weight:400;color:var(--muted)}
.robin-fields input{width:100%;margin-top:5px;padding:11px 12px;border:1px solid #b9c5d9;
  border-radius:9px;font-size:16px;color:var(--navy)}
.robin-check{display:flex;gap:11px;align-items:flex-start;font-size:14px;margin:6px 0 16px;cursor:pointer}
.robin-check input{flex:0 0 auto;width:19px;height:19px;margin-top:2px;accent-color:var(--blue)}
.robin-send{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:26px}
.robin-status{margin:0;font-size:14px;color:var(--muted)}
.robin-status.is-error{color:var(--error)}
.robin-status:empty{display:none}
.robin-ok{font-size:15px;color:var(--muted);margin:0}

.robin-composer{flex:0 0 auto;position:relative;border-top:1px solid var(--hairline);
  padding:14px 22px 16px;background:#fff}
.robin-composer textarea{width:min(660px,100%);margin-inline:auto;display:block;
  border:1px solid #b9c5d9;border-radius:13px;padding:14px 56px 14px 16px;
  font:inherit;font-size:16px;line-height:1.5;color:var(--navy);resize:none;outline:none}
.robin-composer textarea:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.robin-send-btn{position:absolute;right:calc(50% - min(330px,50% - 22px) - 0px);bottom:46px;
  width:40px;height:40px;border:0;border-radius:50%;background:var(--blue);color:#fff;font-size:18px}
.robin-escape{width:min(660px,100%);margin:9px auto 0;text-align:center}
@media(max-width:620px){
  .robin-inner{width:calc(100% - 32px)}
  .robin-composer{padding:12px 16px 14px}
  .robin-send-btn{right:26px;bottom:44px}
}


/* ══ WORDMARK ══════════════════════════════════════════════════════════════
   GoLaborate toggling with eLaborate / eLiberate / GoLiberate / Collaborate.

   FIXED SLOTS. Every character has its own box of constant width, so a letter
   can only flip in place and nothing slides sideways. The words are
   right-aligned on their shared "rate" tail, and a blank is just another glyph
   a slot can hold — which is what gives the leading space in " eLaborate".
   Slot widths are set once in JS from the widest character each slot can hold;
   they never transition, because nothing ever needs to move.

   The flip is a VERTICAL one — top over bottom, like a flip clock. rotateX,
   not rotateY: rotateY spins about the vertical axis, mirrors the glyph
   left-to-right, and reads as a horizontal flip.

   Rotation accumulates and is never reset; the faces take turns being forward.
   No reset, no text swap mid-flight, no reflow inside the motion — that reset
   is what used to look like a second step.

   Slots take the width of the glyph they are SHOWING, not the widest they
   could hold. Sizing to the widest left 'i' (7.0px) in a box cut for 'a'
   (15.2px); a word space in this face is 5.5px, so that 8px of slack read as
   a break — "eLi berate", "Co l Laborate". No alignment fixes a hole wider
   than a space. Width animates on the flip's own curve, so letters glide as
   they turn. The row is right-anchored in a fixed box, which keeps the tail
   ('berate' — most of the word) still and lets the head absorb the slack.

   Colour: capitals carry brand blue, so the camel-case does the branding
   rather than a flat black slab, and it survives the variants (eLiberate keeps
   its L, Collaborate its C).

   This sits in #topbar, whose height drives --topbar-h via a ResizeObserver.
   Fixed slots make the row a constant box, so it cannot disturb that. */
.bw{display:flex;justify-content:flex-end;vertical-align:baseline}
.bw-live{display:inline-flex;white-space:nowrap;perspective:900px;
  color:var(--ink-deep,#16233a)}

.bw-c{position:relative;display:inline-block;text-align:center;
  transform-style:preserve-3d;
  transition:transform .52s cubic-bezier(.45,.05,.2,1),
             width     .52s cubic-bezier(.45,.05,.2,1)}
.bw-f,.bw-bk{position:absolute;left:0;right:0;top:0;backface-visibility:hidden}
.bw-bk{transform:rotateX(180deg)}
/* In flow, invisible, holding the slot's widest character: this is the thing
   that makes the box immovable while the faces turn on top of it. */
.bw-size{visibility:hidden}

.bw-up{color:var(--blue,#426bc1)}

/* The brand row is flex and the logo is shrinkable; without this it gets
   squeezed to width:0 and disappears. */
.brand .brand-mark{flex:0 0 auto}

@media(prefers-reduced-motion:reduce){
  .bw-c{transition:none}
}


/* ══ MASTHEAD ASK ══════════════════════════════════════════════════════════
   JD: the permanent hints strip was "too much real-estate". The suggestions
   now drop under the field on focus instead of occupying a header row.

   display:none when closed is load-bearing, not cosmetic: the topbar
   measurement counts .hints-bar only when offsetParent !== null, so a closed
   panel adds nothing to --topbar-h. Open, it is absolutely positioned and out
   of flow. Neither state can feed the ResizeObserver. */
#topbar .hints-bar{display:none;position:absolute;top:calc(100% - 6px);z-index:40;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 18px 44px rgba(20,32,54,.16);padding:7px;overflow:hidden}
#topbar.ask-open .hints-bar{display:block}
/* The field can be narrow on a small window; the suggestions still need to
   be readable, so the panel has its own floor and is clamped to the
   viewport by ask.js rather than inheriting a cramped field width. */
#topbar .hints-bar{min-width:min(360px,calc(100vw - 28px))}
.hints-bar>.shell{width:auto;margin:0}

.search-hints{display:grid;gap:2px}
.hint-lead{display:block;padding:8px 11px 5px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hints-bar .hint{display:block;width:100%;text-align:left;border:0;background:none;
  border-radius:9px;min-height:40px;padding:10px 11px;font-size:14.5px;color:var(--navy)}
.hints-bar .hint:hover,.hints-bar .hint.is-active{background:#f2f6fd;color:var(--blue)}
.hints-bar .hint[hidden]{display:none}
.hints-bar.is-empty .hint-lead{opacity:.5}