/* Hero. The default is Biograph's bottom-left layout (.hero--biograph, set in
   the markup, at the end of this file); ?hero=sequel removes the class for the
   Sequel layout, and ?hero=center swaps it for Lassie's centred layout
   (.hero--center). All three sit on the site-wide frame from frame.css. In the Sequel
   layout the headline sits bottom-left at Sequel's size, max(48px, 4vw),
   weight 500, -0.05em, solid leading, with the two 41px pills under it, and
   Sequel's bottom-right corner: a glass ticker pill over a three-line
   paragraph in a 320px column whose last line sits on the headline's
   baseline. The film is withoctave.com's, unchanged in every layout: the
   hero-human video over its poster, with no filter, under the live grain
   (site.css) and scrim (navigation.css). With reduced motion the film keeps its
   poster, the corner ticker holds still and the count line crossfades. */
body.header-study {
  --hero-edge:var(--study-gutter);
  --hero-foot:clamp(32px,7svh,72px);
  --hero-type:clamp(48px,4vw,96px);
  --hero-type-b:clamp(38.7px,4.4vw,84.5px); /* centred: 63.4px at 1440, 38.7px on phones */
  --hero-button:41px;                    /* Biograph's button height */
  --corner-w:320px;                      /* Sequel's paragraph column */
  --tick-ease:cubic-bezier(.22,1,.36,1);
}
@media (max-width:600px) { body.header-study { --hero-foot:24px; } }

.header-study .hero[data-hero-calm] {
  height:100svh; min-height:100svh; padding:calc(var(--study-nav-height) + 24px) var(--hero-edge) var(--hero-foot);
  display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; text-align:left;
  background:#000; isolation:isolate; overflow:hidden;
}
.header-study [data-hero-calm] .hero-film { inset:0; clip-path:none; }

.header-study [data-hero-calm] .hero-mid { position:relative; z-index:3; width:100%; max-width:none; margin:0; }
.header-study .hero[data-hero-calm] h1 {
  max-width:none; margin:0; color:var(--on-film); text-shadow:none;
  font:500 var(--hero-type)/1 var(--font-sans); letter-spacing:-.05em;
}
.header-study .hero[data-hero-calm] h1 .accent { letter-spacing:-.02em; padding-right:.03em; }
.header-study [data-hero-calm] .hero-lead { display:none; }

.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
/* Biograph's button sizes, as measured on biograph.com: 41px tall, 20px side
   padding and 14px weight 400 type on a 21px line, as fully rounded pills.
   The primary is its light fill, white at 90%, with #27272c text and solid
   white on hover; the glass "See demo" takes the same size. */
.hero-actions .pill { border-radius:var(--radius-pill); }
.hero-actions .hero-primary {
  height:var(--hero-button); padding:0 20px; border:0; background:rgba(255,255,255,.9); color:#27272c;
  font:400 14px/21px var(--font-sans); letter-spacing:normal; transition:background-color .2s ease;
}
.hero-actions .hero-primary:hover { background:#fff; }
/* Broccoli's "Talk to us" arrow, nudged on hover. */
.hero-actions .hero-primary { gap:6px; padding-right:16px; }
.pill-arrow { flex:none; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.hero-primary:hover .pill-arrow { transform:translateX(2px); }
.hero-actions .hero-secondary { height:var(--hero-button); padding:0 20px 0 13px; font:400 14px/21px var(--font-sans); }
@media (prefers-reduced-motion:no-preference) {
  .hero-actions,.hero-corner,.hero-ticker { animation:hero-in .42s var(--ease-reveal) .08s both; }
}

/* ---- Sequel's corner: ticker pill and paragraph ---- */
.hero-corner {
  position:absolute; right:0; z-index:3; width:var(--corner-w);
  display:flex; flex-direction:column; align-items:flex-start; gap:28px;
  /* The paragraph's last baseline sits on the headline's, above the buttons, the
     two-line subline and the text block's gaps; the paragraph's baseline is
     6.6px above its own foot. */
  bottom:calc(var(--hero-button) + var(--ink-g2) - var(--lead-tail) + var(--lead-lines) * var(--lead-lh) + var(--h1-size) * var(--ink-g1) - var(--lead-cap-off) - 6.6px);
}
.ticker-pill {
  display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 20px 0 12px;
  border:1px solid var(--glass-border); border-radius:var(--radius-pill); background:var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); box-shadow:var(--glass-shadow);
  color:#fff; font:500 14px/21px var(--font-sans); letter-spacing:normal; white-space:nowrap;
}
.ticker-status { position:relative; flex:none; width:19px; height:19px; }
.ticker-status svg { position:absolute; inset:0; width:19px; height:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.ticker-spinner { stroke-width:2; animation:ticker-spin .9s steps(8) infinite; transition:opacity .2s ease,transform .3s ease; }
.ticker-tick { stroke-width:2.2; opacity:0; transform:scale(.6); transition:opacity .2s ease,transform .4s var(--tick-ease); }
.ticker-tick path { stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .36s ease .06s; }
.ticker-pill.is-done .ticker-spinner { opacity:0; transform:scale(.6); }
.ticker-pill.is-done .ticker-tick { opacity:1; transform:none; }
.ticker-pill.is-done .ticker-tick path { stroke-dashoffset:0; }
@keyframes ticker-spin { to { transform:rotate(360deg); } }
/* One line at a time; the window's width eases to each new line. */
.ticker-window { position:relative; display:block; overflow:hidden; transition:width .55s var(--tick-ease); }
.ticker-window { height:21px; }
.ticker-line { position:absolute; left:0; top:0; white-space:nowrap; transition:transform .55s var(--tick-ease),opacity .4s ease; }
.ticker-line.is-next { transform:translateY(90%); opacity:0; transition:none; }
.ticker-line.is-leaving { transform:translateY(-90%); opacity:0; }
.hero-corner-copy { max-width:var(--corner-w); margin:0; color:rgba(255,255,255,.94); font:400 17.6px/24.64px var(--font-sans); letter-spacing:normal; text-wrap:pretty; }

/* ---- Centred layout (?hero=center): Lassie's hero ---- */
.hero-ticker { display:none; }
.header-study .hero--center[data-hero-calm] { justify-content:center; padding-bottom:22svh; }
.hero--center .hero-corner { display:none; }
.header-study .hero--center .hero-mid { position:static; display:flex; flex-direction:column; align-items:center; text-align:center; }
.header-study .hero--center .hero-mid > * { position:relative; z-index:3; }
/* Biograph's headline setting: weight 400, -0.02em. */
.header-study .hero--center[data-hero-calm] h1 { font-size:var(--hero-type-b); font-weight:400; line-height:.95; letter-spacing:-.02em; text-align:center; }
.header-study .hero--center[data-hero-calm] h1 .hero-line { display:block; }
/* withoctave.com's scrim darkens the edges and the foot, not the centre, and some of its
   shots are bright there. So the centred type carries site.css's own devices for centred
   type over this film: its hero shadow, and the soft radial pocket it draws behind the
   copy (.hero-mid:before, which the live page keeps switched off). */
.header-study .hero--center[data-hero-calm] h1 { text-shadow:0 1px 2px rgba(0,0,0,.38),0 2px 24px rgba(0,0,0,.28); }
.header-study .hero--center[data-hero-calm] h1::before {
  content:""; position:absolute; inset:-90px -140px; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 58% at 50% 52%,rgba(16,17,22,.42),rgba(16,17,22,.18) 55%,rgba(16,17,22,0) 78%);
}
.hero--center .hero-ticker {
  display:flex; align-items:center; justify-content:center; gap:10px; margin:28px 0 0;
  color:rgba(255,255,255,.8); font:400 17px/24px var(--font-sans); letter-spacing:normal;
  text-shadow:0 1px 2px rgba(0,0,0,.38),0 2px 24px rgba(0,0,0,.28);
}

/* Count line. Dots and words share one cube face (/opening/restrained.js).
   The stage is the line plus about 40% so the roll can turn without being
   sliced into strips. Perspective sits on that stage, centred on the row.
   At rest the face has no transform, so the type stays crisp. */
.hero-ticker { --ticker-h:24px; }
@media (prefers-reduced-motion:no-preference) {
  .hero-ticker[data-cube-ticker] { animation:ticker-fade .42s var(--ease-reveal) .08s both; }
}
@keyframes ticker-fade { from { opacity:0; } to { opacity:1; } }
@keyframes ticker-out { from { opacity:1; } to { opacity:0; } }
.ticker-loader {
  flex:none; display:grid; grid-template-columns:repeat(3, 3px); grid-template-rows:repeat(3, 3px);
  gap:2.5px; width:14px; height:14px; color:inherit;
}
.ticker-loader i {
  width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.15;
  animation:ticker-snake 1.1s ease-in-out infinite;
}
.ticker-loader i.is-hub { opacity:0; animation:none; }
.ticker-loader i:nth-child(1) { animation-delay:0s; }
.ticker-loader i:nth-child(2) { animation-delay:-.9625s; }
.ticker-loader i:nth-child(3) { animation-delay:-.825s; }
.ticker-loader i:nth-child(4) { animation-delay:-.1375s; }
.ticker-loader i:nth-child(6) { animation-delay:-.6875s; }
.ticker-loader i:nth-child(7) { animation-delay:-.275s; }
.ticker-loader i:nth-child(8) { animation-delay:-.4125s; }
.ticker-loader i:nth-child(9) { animation-delay:-.55s; }
@keyframes ticker-snake {
  0% { opacity:.9; animation-timing-function:ease-in-out; }
  14% { opacity:.62; animation-timing-function:ease-in-out; }
  28% { opacity:.32; animation-timing-function:ease-in-out; }
  42% { opacity:.18; animation-timing-function:ease-in-out; }
  52%, 80% { opacity:.15; animation-timing-function:ease-in-out; }
  90% { opacity:.38; animation-timing-function:ease-in-out; }
  100% { opacity:.9; }
}
.hero-ticker { contain:layout paint; isolation:isolate; }
.hero-ticker-stage {
  display:block; position:relative; width:max-content; height:calc(var(--ticker-h) * 1.4);
  max-width:100%; overflow:hidden; perspective:700px; perspective-origin:center center;
}
.header-study [data-hero-calm] .hero-ticker-stage { max-width:calc(100vw - 2 * var(--hero-edge) - 28px); }
.hero-ticker-scene {
  display:block; position:absolute; left:0; right:0; top:50%; width:100%; height:var(--ticker-h);
  margin-top:calc(var(--ticker-h) / -2); transform-style:preserve-3d; text-align:left;
}
.hero-ticker-face {
  position:absolute; inset:0; display:flex; align-items:center; gap:8px; height:var(--ticker-h);
  backface-visibility:hidden; transform:translate3d(0,0,0);
}
.hero-ticker-face:only-child { transform:none; }
.hero-ticker-face:only-child { position:relative; }
/* Mid-grey base, about 45% white, with a narrow pure-white band. Stops
   outside the band are that same base, so the line stays readable and the
   band is the only thing that brightens. 250% size makes the 44–56% peak
   about 30% of the line. */
.hero-ticker-line {
  --ticker-ink:rgba(255,255,255,.45);
  height:var(--ticker-h); line-height:var(--ticker-h); white-space:nowrap;
  -webkit-font-smoothing:antialiased;
  color:var(--ticker-ink);
  background-image:linear-gradient(90deg,
    rgba(255,255,255,.45) 0%,
    rgba(255,255,255,.45) 44%,
    rgba(255,255,255,.72) 47%,
    #fff 50%,
    rgba(255,255,255,.72) 53%,
    rgba(255,255,255,.45) 56%,
    rgba(255,255,255,.45) 100%);
  background-size:250% 100%; background-repeat:no-repeat; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ticker-shimmer 1.8s linear infinite;
}
.hero-ticker.is-rolling .hero-ticker-line,
.hero-ticker.is-held .hero-ticker-line {
  animation:none; background-position:100% 0;
}
@keyframes ticker-shimmer {
  from { background-position:100% 0; }
  to { background-position:0% 0; }
}
.header-study .hero--center .hero-actions { position:absolute; left:var(--hero-edge); right:var(--hero-edge); bottom:32px; z-index:3; justify-content:center; margin:0; }

/* Before the headline and the corner would meet, the corner joins the column under the buttons. */
@media (max-width:960px) {
  .hero-corner { position:static; width:auto; max-width:var(--corner-w); margin-top:28px; gap:20px; }
}
@media (max-width:600px) {
  .header-study .hero[data-hero-calm] h1 .hero-line { display:block; }
  .hero-corner { margin-top:24px; gap:16px; }
  .hero-corner-copy { font-size:16px; line-height:22.4px; }
  .header-study .hero--center[data-hero-calm] { padding-bottom:19svh; }
  .hero--center .hero-ticker { --ticker-h:18px; margin-top:20px; font-size:14px; line-height:18px; gap:8px; }
  .header-study .hero--center .hero-actions { bottom:16px; }
}
/* Very narrow phones: the two pills stack full width. */
@media (max-width:359px) {
  .hero-actions { flex-direction:column; align-items:stretch; }
}

/* ---- The bottom-left text block (the Biograph and Sequel layouts), as Biograph's ----
   The headline, then the subline on two lines (62ch, balanced; three on
   phones), then the buttons, in one compact block. The gaps are Biograph's ink gaps, measured on
   biograph.com at 1440, 1280, 1024 and 390: from the headline's baseline to the
   subline's cap tops 0.45 of the headline size from 1200px (30.6px at 68px),
   0.433 from 810px and 0.585 below; from the subline's last baseline to the
   buttons 29px from 1400px, 27px from 1200px and 22px below. The subline is
   18px/27px at 70% white from 1400px, 16px/24px below, and 15px/22.5px on
   phones, where that keeps it to three lines at 390. Hanken Grotesk sits lower
   in its line boxes than Biograph's faces: its cap tops are 7px (6px, 5px)
   into the subline's line box and its last baseline 7px (6.5px) above the
   box's foot, and the headline's baseline is 0.141em above its box (0.167em at
   Sequel's solid leading). The margins below subtract those, so the gaps a
   reader sees match Biograph's. */
.header-study .hero[data-hero-calm]:not(.hero--center) {
  --lead-size:18px; --lead-lh:27px; --lead-cap-off:7px; --lead-tail:7px; --lead-lines:2;
  --ink-g1:.45; --ink-g2:29px; --h1-size:var(--hero-type); --h1-base-off:.167;
}
@media (max-width:1399.98px) { .header-study .hero[data-hero-calm]:not(.hero--center) { --lead-size:16px; --lead-lh:24px; --lead-cap-off:6px; --ink-g2:27px; } }
@media (max-width:1199.98px) { .header-study .hero[data-hero-calm]:not(.hero--center) { --ink-g1:.433; --ink-g2:22px; } }
@media (max-width:809.98px) { .header-study .hero[data-hero-calm]:not(.hero--center) { --ink-g1:.585; } }
@media (max-width:600px) { .header-study .hero[data-hero-calm]:not(.hero--center) { --lead-size:15px; --lead-lh:22.5px; --lead-cap-off:5px; --lead-tail:6.5px; } }
.header-study .hero[data-hero-calm]:not(.hero--center) .hero-lead {
  display:block; max-width:62ch; margin:calc(var(--h1-size) * (var(--ink-g1) - var(--h1-base-off)) - var(--lead-cap-off)) 0 0;
  color:rgba(255,255,255,.7); text-align:left; text-shadow:none; text-wrap:balance;
  font:400 var(--lead-size)/var(--lead-lh) var(--font-sans); letter-spacing:normal;
}
.header-study .hero[data-hero-calm]:not(.hero--center) .hero-actions { margin-top:calc(var(--ink-g2) - var(--lead-tail)); }
/* Below 768px the subline is only its first sentence, which wraps to two lines at 390. */
@media (max-width:767.98px) {
  .hero-lead .hero-lead-more { display:none; }
}

/* ---- Biograph's layout (the default, and ?hero=biograph), after biograph.com ----
   The text block above, with Biograph's headline setting about 12% smaller than
   Biograph's own: 60px from 1200px, 51px from 810px and 36px below (68, 58 and
   41px there), weight 400, 0.95 leading, -0.02em. The buttons sit 50px
   above the hero's foot (40px below 1200px). The count ticker sits bottom-right,
   where Biograph keeps its stats row, as one line in its stat type (14px/21px,
   weight 500, white), centred on the buttons with its right edge on the frame.
   Below 810px the ticker joins the column, and the gap under the buttons
   matches the gap under the subline. From 810px up the line stays on the
   right, centred on the button row. */
.header-study .hero--biograph[data-hero-calm] { --hero-type-bio:60px; --hero-foot:50px; }
@media (max-width:1199.98px) { .header-study .hero--biograph[data-hero-calm] { --hero-type-bio:51px; --hero-foot:40px; } }
@media (max-width:809.98px) { .header-study .hero--biograph[data-hero-calm] { --hero-type-bio:36px; } }
.header-study .hero[data-hero-calm].hero--biograph { --h1-size:var(--hero-type-bio); --h1-base-off:.141; }
.hero--biograph .hero-corner { display:none; }
.header-study .hero--biograph[data-hero-calm] h1 { font-size:var(--hero-type-bio); font-weight:400; line-height:.95; letter-spacing:-.02em; }
.hero--biograph .hero-ticker {
  --ticker-h:21px; position:absolute; right:0;
  /* The line is centred in the stage, so centring the stage on the buttons
     centres the line on the button row. */
  bottom:calc((var(--hero-button) - var(--ticker-h) * 1.4) / 2);
  margin:0;
  display:block; color:#fff; font:500 14px/21px var(--font-sans); letter-spacing:normal;
}
body.header-study:has([data-hero-calm]) { background:#fff; }
.header-study .hero .hero-actions { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:auto; max-width:100%; }
.header-study .hero[data-hero-calm] .hero-scrim {
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.42) 0, rgba(0,0,0,.72) 150px, #000 300px);
  mask-image:linear-gradient(to top, rgba(0,0,0,.42) 0, rgba(0,0,0,.72) 150px, #000 300px);
}
.hero--biograph .hero-ticker { transition:opacity 200ms ease; }
@media (max-width:809.98px) {
  .header-study .hero[data-hero-calm] { padding-left:22px; padding-right:22px; }
  .header-study .hero--biograph .hero-mid { display:flex; flex-direction:column; align-items:flex-start; }
  .hero--biograph .hero-ticker {
    position:static; order:1;
    margin-top:calc(var(--ink-g2) - var(--lead-tail) - var(--ticker-h) * 0.2);
  }
  .header-study .hero.is-email-error .hero-ticker { animation:ticker-out 200ms ease forwards; }
}
@media (prefers-reduced-motion:reduce) {
  .ticker-spinner { animation:none; }
  .ticker-window,.ticker-line { transition:none; }
  .ticker-loader i { animation:none; opacity:.15; }
  .ticker-loader i:nth-child(1) { opacity:.9; }
  .ticker-loader i:nth-child(4) { opacity:.5; }
  .ticker-loader i:nth-child(7) { opacity:.28; }
  .ticker-loader i.is-hub { opacity:0; }
  .hero-ticker-line { animation:none; background-image:none; color:rgba(255,255,255,.7); -webkit-text-fill-color:rgba(255,255,255,.7); }
}

/* Founder film. A warm band on the white page, centred like a product
   video block: tag, two-line title, subline, two pills, then the frame.
   See demo scrolls the band to the top of the viewport, under the frosted nav. */
#founder-video { scroll-margin-top:0; }
.founder {
  position:relative; z-index:2; background:#f6f5f1; color:#27272c;
  min-height:100svh; text-align:center;
  padding:clamp(96px, 11vw, 132px) var(--frame-gutter) clamp(72px, 8vw, 112px);
  font-family:var(--font-sans);
}
.founder-inner { max-width:1100px; margin:0 auto; }
.founder-tag {
  display:inline-flex; align-items:center; margin:0 0 22px; padding:5px 10px;
  border-radius:var(--radius-pill); background:rgba(39,39,44,.06);
  color:#27272c; font:400 12px/1.3 var(--font-sans);
}
.founder h2 {
  width:100%; max-width:16em; margin:0 auto; margin-inline:auto;
  text-align:center; text-wrap:balance;
  font:400 clamp(32px, 3.4vw, 46px)/1.1 var(--font-sans);
  letter-spacing:-.03em; color:#27272c;
}
.founder h2 span { display:block; text-align:center; }
.founder h2 .accent { letter-spacing:-.02em; padding-right:.04em; }
.founder-lead {
  max-width:560px; margin:18px auto 0; color:#6d7077;
  font:400 16px/1.5 var(--font-sans);
}
.founder-actions { display:flex; justify-content:center; flex-wrap:nowrap; gap:10px; margin-top:28px; }
.founder-talk, .founder-about {
  display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px;
  border-radius:var(--radius-pill); font:400 14px/1 var(--font-sans); text-decoration:none; white-space:nowrap;
}
.founder-talk { border:1px solid #27272c; background:#27272c; color:#fff; }
.founder-talk:hover { background:#000; border-color:#000; }
.founder-about { border:1px solid rgba(39,39,44,.18); background:#fff; color:#27272c; }
.founder-about:hover { background:#f3f1ec; }
.founder-talk:focus-visible, .founder-about:focus-visible { outline:2px solid #27272c; outline-offset:3px; }
.founder-frame {
  position:relative; width:min(1100px, 100%); margin:clamp(56px, 7vw, 84px) auto 0;
  aspect-ratio:16/9; overflow:hidden; border-radius:16px;
  background:#e8e2d6;
}
.founder-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.founder-label {
  position:absolute; z-index:1; top:22px; left:50%; transform:translateX(-50%);
  margin:0; padding:6px 12px; border-radius:var(--radius-pill); white-space:nowrap;
  background:rgba(32,33,35,.72); color:#fff;
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  font:400 14px/1.2 var(--font-sans);
  text-shadow:0 1px 12px rgba(0,0,0,.25);
}
.founder-play {
  position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%, -50%);
  display:grid; place-items:center; width:64px; height:64px; padding:0; cursor:pointer;
  border:0; border-radius:50%; background:#fff; color:#27272c;
  box-shadow:0 8px 24px rgba(60,50,40,.16);
}
.founder-play svg { width:18px; height:18px; fill:#27272c; margin-left:2px; }
.founder-play:hover { background:#fff; box-shadow:0 10px 28px rgba(60,50,40,.22); }
.founder-play:focus { outline:none; }
.founder-play:focus-visible { outline:2px solid #27272c; outline-offset:3px; }
.founder-play[aria-disabled="true"] { cursor:default; }
.founder-frame.is-playing .founder-play,
.founder-frame.is-playing .founder-label,
.founder-frame.is-playing .founder-poster { display:none; }
.founder-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#e4ddd2; }
@media (max-width:809.98px) {
  .founder { padding-left:20px; padding-right:20px; }
  .founder h2 { font-size:36px; }
  .founder-frame { width:100%; }
  .founder-label { top:16px; }
}
@media (max-width:600px) {
  .founder-play { width:56px; height:56px; }
}
@media (prefers-reduced-motion:reduce) {
  #founder-video { scroll-behavior:auto; }
}