:root{
    --ink:#222323;
    --muted:#6E7673;
    --faint:#878E8A;
    --ease-out:cubic-bezier(0,0,.2,1);
    --ease-reveal:cubic-bezier(.16,1,.3,1);
    --t-hover:.18s;
    --t-press:.12s;
    --t-reveal:.7s;
    --page:#F9F8F5; /* lassie's warm paper (measured live 12 Aug), replacing the cool #F2F2F5 */
    --surface:#EAEAEF;
    --line:#E3E3E9;
    --accent:#1C1D26;      /* interactive ink - buttons and controls, never a brand hue */
    --accent-ink:#ffffff;
    --accent-hover:#2C2E3C;
    --state:#0F7A50;       /* semantic only: a positive product state inside mocks */
    --badge:#D84222;       /* one warm accent - badge only */
    --radius-card:16px;
    --radius-frame:24px;
    --page-max:1120px;
    --page-gutter:24px;
    --nav-rail-h:72px;
    --nav-pill-h:64px;
    --nav-enter:100;
    --nav-leave:100;
    --nav-inset-top:12px;
    --quint:cubic-bezier(.22,1,.36,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* clip, not hidden: hidden on html/body breaks position:sticky on the nav */
  html{overflow-x:clip;background:#101116}
  body{overflow-x:clip;position:relative}  /* relative so the absolute blooms are contained and clipped */
  @media (prefers-reduced-motion: no-preference){
    html{scroll-behavior:smooth}
    /* iOS pans the visual viewport when its keyboard opens. Native focus
       movement must not inherit the page's decorative smooth scrolling. */
    html.entry-focus{scroll-behavior:auto}
  }
  body{
    background:var(--page);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    font-size:17px;line-height:1.5;
  }
  h1,h2{text-wrap:balance}
  .sub,.body,.band .statement,.fineprint,.draft p,.msg{text-wrap:pretty}
  ::selection{background:rgba(139,146,214,.22)}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:7px}
  .skip-link{position:absolute;left:16px;top:12px;z-index:80;padding:10px 14px;background:#fff;color:var(--ink);text-decoration:none;border-radius:8px;transform:translateY(-160%)}
  .skip-link:focus{transform:none}
  summary:focus:not(:focus-visible){outline:none}
  #how,#demo,#call{scroll-margin-top:calc(var(--nav-inset-top) + var(--nav-pill-h) + 18px)}
  .bloom,.bloom-low{display:none}
  .hero, .band, section.feature, .close-band, footer{position:relative;z-index:1}
  .wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter)}
  .narrow{max-width:720px;margin:0 auto}

  /* One Octave glass object. The mark and client link sit directly on the
     material; only the primary action is filled. This keeps the useful compact
     intent without borrowing Lassie's segmented navigation language. */
  .site-nav{
    position:fixed;top:max(16px,calc(env(safe-area-inset-top) + 10px));left:50%;right:auto;z-index:50;
    width:max-content;height:52px;transform:translateX(-50%);
    border:0;border-radius:0;background:none;background-image:none;
    box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    pointer-events:none;
  }
  .site-nav nav{
    position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-start;
    width:max-content;max-width:calc(100vw - 32px);height:52px;margin:0;padding:5px;gap:2px;
    border:1px solid rgba(255,255,255,.16);border-radius:20px;
    background:linear-gradient(135deg,rgba(18,20,22,.64),rgba(18,20,22,.42));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 30px rgba(6,8,10,.16);
    -webkit-backdrop-filter:blur(22px) saturate(1.12);backdrop-filter:blur(22px) saturate(1.12);
    transition:background-color .45s var(--ease-out),box-shadow .45s var(--ease-out);
  }
  .site-nav nav>*{position:relative;z-index:1}
  .site-nav a,.site-nav button{pointer-events:auto}
  .wordmark{display:inline-flex;align-items:center;font-size:21px;font-weight:600;letter-spacing:-0.01em;text-decoration:none;color:inherit}
  .wordmark-mark{display:none;width:27px;height:27px;overflow:visible}
  .wordmark-mark path{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round}
  .nav-right{display:flex;align-items:center;gap:28px}
  .nav-link{color:var(--ink);text-decoration:none;font-size:15px;transition:color var(--t-hover) var(--ease-out)}
  .nav-link:hover{color:var(--muted)}
  footer .nav-link{font-size:13.5px;color:var(--muted)}
  .pill{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--accent);color:var(--accent-ink);
    border:none;border-radius:999px;padding:10px 20px;
    font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;
    transition:background var(--t-hover) var(--ease-out),transform var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease-out);
  }
  .pill:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 18px rgba(28,29,38,.20)}
  .pill:active{transform:translateY(0) scale(.985);box-shadow:none;transition-duration:var(--t-press)}
  .pill.big{padding:13px 26px;font-size:16px}
  .site-nav .wordmark,.site-nav .nav-right>a{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    flex:none;height:42px;min-height:42px;padding:0 13px;border:0;border-radius:14px;
    background:transparent;color:rgba(255,255,255,.92);font-size:14px;font-weight:400;line-height:14px;
    letter-spacing:normal;text-decoration:none;white-space:nowrap;box-shadow:none;
    transition:background-color .25s ease,color .25s ease;
  }
  .site-nav .wordmark{width:42px;padding:0;color:#fff}
  .site-nav .wordmark:hover,.site-nav .client-login-link:hover{
    background:rgba(255,255,255,.09);color:#fff;transform:none;box-shadow:none;
  }
  .site-nav .wordmark-mark{display:block;flex:none;width:24px;height:24px}
  .site-nav .nav-right{display:flex;align-items:center;gap:0;margin:0}
  .site-nav .nav-right>a.client-login-link{
    background:transparent;color:rgba(255,255,255,.82);
  }
  .site-nav .pill{
    padding:0 16px;background:#F9F8F5;color:#17181A;font-weight:500;
  }
  .site-nav .pill:hover{background:#fff;color:#17181A;transform:none;box-shadow:none}
  .cta-compact{display:none}
  .site-nav a:focus-visible{outline-color:#fff;outline-offset:2px}@media (max-width:1023px){
    .site-nav .nav-right{display:flex}}
  @media (max-width:720px){
    .site-nav nav{height:52px;padding:5px;gap:2px}
    .site-nav .nav-right{display:flex;align-items:center;gap:0;margin:0}
    .site-nav .nav-right .client-login-link{display:inline-flex}
    .site-nav .nav-right>a{padding-left:10px;padding-right:10px;font-size:12.5px}
    .site-nav .pill{padding-left:12px;padding-right:12px}
    .cta-full{display:none}.cta-compact{display:inline}}
  @media (max-width:374px){
    .site-nav .nav-right>a{font-size:11.5px;padding-left:8px;padding-right:8px}
    .site-nav .pill{padding-left:9px;padding-right:9px}
  }
  @media (max-width:560px){}

  h1, h2, .band .statement{
    font-family:ui-serif,"New York",Iowan Old Style,Palatino,Georgia,serif;
    font-weight:400;
  }
  h1 em, h2 em, .band .statement em{font-style:italic;font-weight:400}
  h1{
    font-size:clamp(44px,7.4vw,68px);
    line-height:1.04;letter-spacing:-0.012em;
    max-width:860px;margin:0 auto 26px;
  }
  .sub{
    font-size:clamp(19px,2.6vw,24px);line-height:1.35;color:var(--ink);
    max-width:680px;margin:0 auto 28px;font-weight:400;
  }

  /* A compact 16px entry surface with invariant geometry. iOS already pans its
     visual viewport to expose a focused field; changing width at the same time
     makes that necessary movement read as a layout jump. */
  .start{
    display:flex;align-items:center;justify-content:space-between;
    width:370px;max-width:100%;height:56px;margin:0 auto;padding:6px;
    background:#fff;border:1px solid var(--line);border-radius:16px;
    box-shadow:0 2px 10px rgba(41,42,64,.05);
    transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out),background-color .3s var(--ease-out);
  }
  /* .rv sets its own transition for the reveal, so retain the quiet focus
     material change alongside it at higher specificity. */
  .start.rv{
    transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out),
               opacity var(--t-reveal) var(--ease-reveal),transform var(--t-reveal) var(--ease-reveal);
    transition-delay:0s,0s,var(--d,0s),var(--d,0s);
  }
  /* The field clears the UA focus ring, so the pill has to carry the indicator.
     A border tint alone measured under the 3:1 focus-appearance floor; the ring
     below is the same house treatment at a weight that actually reads. */
  .start:focus-within{border-color:#9BA0B4;
    box-shadow:0 6px 22px rgba(41,42,64,.10),0 0 0 3px rgba(41,42,64,.30)}
  /* One soft ring when Get started delivers the visitor here, then silence. */
  .start.is-hinted{animation:start-hint 1.5s var(--ease-out) .15s 1}
  @keyframes start-hint{0%{box-shadow:0 0 0 0 rgba(245,240,231,0)}
    32%{box-shadow:0 0 0 6px rgba(245,240,231,.30)}
    100%{box-shadow:0 0 0 0 rgba(245,240,231,0)}}
  @media(prefers-reduced-motion:reduce){.start.is-hinted{animation:none}}
  .start-nojs{margin:10px 0 0;font-size:13px;color:rgba(255,255,255,.72)}
  .start-nojs a{color:inherit}
  /* The pill is 56px with 6px padding, so its inner band is 44px. The field
     took only its 24px line box, leaving most of the pill untappable; stretching
     it fills that band. The field is transparent, so nothing looks different. */
  .start input{
    flex:1;min-width:0;width:100%;align-self:stretch;border:0;background:transparent;outline:none;
    font:inherit;font-size:16px;padding:0 14px;color:var(--ink);
  }
  .start input::placeholder{color:var(--faint)}
  .start button{
    position:relative;
    flex:none;border:0;cursor:pointer;font-family:inherit;
    height:40px;padding:0 14px;border-radius:12px;font-size:13.5px;font-weight:500;
    background:var(--accent);color:#fff;white-space:nowrap;
    transition:background var(--t-hover) var(--ease-out);
  }
  /* The button reads at 40px by design. Its hit area is carried out to the
     44px minimum by an overlay that paints nothing and takes no layout room. */
  .start button::after{content:"";position:absolute;inset:-2px 0;border-radius:inherit}
  .start button:hover{background:var(--accent-hover)}
  .start button:active{transform:scale(.985)}

  /* on the ink band, the same object in Lassie's own treatment: translucent and blurred */
  .start-dark{
    background:rgba(227,221,207,.20);border-color:rgba(255,255,255,.10);box-shadow:none;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  /* Engagement is answered in the house cream: the glass brightens a step and
     one soft ring settles around the pill, on film and on the warm room alike. */
  /* The cream ring was declared at .14 alpha, below perception over the film.
     Same ring, raised to a weight that actually reads as a focus indicator. */
  .start-dark:focus-within{border-color:rgba(245,240,231,.72);background:rgba(236,230,216,.28);
    box-shadow:0 0 0 3px rgba(245,240,231,.52)}
  .start-dark input{color:#fff}
  .start-dark input::placeholder{color:rgba(255,255,255,.55)}
  .start-dark button{background:#fff;color:var(--accent)}
  .start-dark button:hover{background:#EDEEF2}
  @media (max-width:720px){
    .start{width:342px;max-width:100%}
    .start input{padding:0 8px;font-size:16px}
    .start button{padding:0 12px;font-size:12.5px}
  }



  /* the open room: a breath, not a ritual. The paper arrives at ordinary
     height. A whisper of the ring is already there. The ink is tied directly
     to the mark's own travel through the viewport, so every increment is made
     by the reader's thumb and reverses exactly with it. */
  .brand-room{--brand-progress:1;background:
    radial-gradient(ellipse 72% 24% at 50% 100%,rgba(151,157,160,.075),transparent 72%),
    linear-gradient(to bottom,var(--page) 0%,var(--page) 74%,#ECEAE5 100%);
    color:var(--ink);text-align:center;position:relative;
    overflow:hidden;padding:calc(138px + 8svh) 24px calc(200px + 12svh)}
  .brand-room .brand-mark,.brand-room h2{position:relative}
  .brand-room .brand-mark{width:92px;height:92px;margin:0 auto 48px;display:grid;place-items:center;isolation:isolate}
  .brand-room .brand-mark::before{content:"";position:absolute;z-index:-1;pointer-events:none;
    width:330px;height:245px;border-radius:50%;
    background:
      radial-gradient(ellipse 48% 45% at 36% 54%,rgba(226,125,94,.36),transparent 72%),
      radial-gradient(ellipse 46% 43% at 65% 43%,rgba(246,187,117,.31),transparent 74%),
      radial-gradient(ellipse 39% 39% at 56% 70%,rgba(177,112,137,.22),transparent 76%);
    filter:blur(24px) saturate(.96);opacity:calc(.18 + var(--brand-progress)*.74);
    transform:scale(calc(.84 + var(--brand-progress)*.16));transform-origin:50% 50%;will-change:opacity,transform}
  .brand-room .ring{width:100%;height:100%;display:block;position:relative;overflow:visible;transform-origin:50% 50%}
  .brand-room .ring-ghost,.brand-room .ring-ink{fill:none;stroke:var(--ink);stroke-width:8;stroke-linecap:round}
  .brand-room .ring-ghost{stroke-width:7;opacity:0}
  /* Do not announce the mark with a clipped arc at the bottom of the previous
     viewport. Motion sets this only after the complete 74px mark is inside the
     reading window, then resolves it beneath the drawn stroke. */
  .brand-room.is-ready .ring-ghost{opacity:var(--brand-ghost,0)}
  .sparklet{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
    filter:drop-shadow(0 0 2.5px rgba(225,151,95,.64));will-change:opacity,transform}
  .sparklet-one{--spark-delay:0ms;fill:#B76749}
  .sparklet-two{--spark-delay:22ms;fill:#DEA363}
  .sparklet-three{--spark-delay:40ms;fill:#9F7A86}
  .sparklet-four{--spark-delay:12ms;fill:#C77B57}
  .sparklet-five{--spark-delay:34ms;fill:#E7B47B}
  .sparklet-six{--spark-delay:52ms;fill:#A8818C}
  .brand-room.is-complete .brand-sparkles .sparklet{
    animation:micro-spark .68s cubic-bezier(.22,1,.36,1) var(--spark-delay) both}
  @keyframes micro-spark{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1)}
    66%{opacity:.58;transform:scale(.82)}100%{opacity:0;transform:scale(.55)}}
  .brand-room h2{color:var(--ink);font-size:clamp(32px,5vw,54px);font-weight:400;
    max-width:18ch;margin:0 auto;line-height:1.12;letter-spacing:-.03em;
    display:flex;flex-direction:column;align-items:center}
  .brand-line{display:block;white-space:nowrap}
  .brand-line-inner{display:block}
  .brand-room h2.scrub{opacity:0;filter:blur(5px);will-change:opacity,filter}
  /* beat 4 - the turn. 01health's orbit at their true scale (measured live):
     ground #0D0D0D, rings rgba(245,240,231,.08) 1px and BIGGER than the viewport
     (you are inside them), a 1.7-viewport pinned runway, upright system labels
     and illustrative fictional portraits riding the orbits. The final problem
     card now opens into this exact ground before the rings arrive. */
  /* The orbit owns one continuous stage. It begins edge-to-edge over paper,
     then the same stage contracts around the finished blue dashboard so the
     next section is revealed by geometry rather than a clipped colour break. */
  /* Keep the backing ground identical to the full-screen stage. Mobile Safari
     can resolve 100svh and innerHeight a few pixels apart while its chrome is
     visible; a paper backing turns that harmless difference into a white seam. */
  .orbit-room{background:#0D0D0D;position:relative}
  .orb-dwell{height:220svh;position:relative}
  .orb-pin{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden;
    display:grid;place-items:center;background:#0D0D0D}
  /* Paper appears only when the stage deliberately starts its final reverse
     takeover. Before then every layer under the orbit is the same near-black. */
  .orbit-room.orbit-framed,.orbit-room.orbit-framed .orb-pin{background:var(--page)}
  /* The stage morphs by width/height/border-radius/box-shadow. None of those
     are compositable, so naming them in will-change reserved nothing and only
     advertised the wrong intent. translateZ(0) already gives it its layer. */
  .orb-stage{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;
    background:#0D0D0D;border-radius:0;transform:translateZ(0)}
  .orb{position:absolute;left:50%;top:50%;width:125vmax;height:125vmax;
    transform:translate(-50%,-50%);will-change:opacity,transform}
  /* The apparent line-weight variation is a 1px base plus short 1.25px
     gradient arcs, not six differently styled circles. vector-effect keeps both
     widths honest when this oversized SVG expands on a phone. */
  .oc{fill:none;stroke:rgba(245,240,231,.08);stroke-width:1;vector-effect:non-scaling-stroke}
  .oa{fill:none;stroke-width:1.25;stroke-linecap:round;vector-effect:non-scaling-stroke;
    pointer-events:none}
  .ol{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
    font-size:11px;font-weight:400;fill:rgba(245,240,231,.55);letter-spacing:.02em;
    dominant-baseline:middle}
  .orb-sats{position:absolute;inset:0;pointer-events:none}
  /* The .orb-sat rules that stood here described an earlier satellite that the
     .orb-pat portrait chips replaced. Nothing in the markup or the runtime has
     carried that class since, and one of the rules was still reserving a
     compositor layer for it. */
  .orb-pat{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:9999px;
    border:1px solid rgba(250,247,242,.62);background:#232424;overflow:hidden;
    box-shadow:0 0 0 7px rgba(245,240,231,.045),0 12px 28px rgba(0,0,0,.32);
    will-change:transform}
  .orb-pat img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.03)}
  .orb-pat:after{content:"";position:absolute;inset:0;border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  /* Both copy states occupy this same centred stage. The background may morph,
     but the typography must not jump, scale or acquire a new vertical anchor. */
  .orb-center,.orb-blue-copy{position:absolute;inset:0;text-align:center;padding:0 22px;
    display:grid;grid-template-rows:120px 112px;align-content:center;justify-items:center}
  .orb-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(212,206,191,.55);display:block;margin-bottom:22px}
  /* The reference hierarchy, translated into Octave's own faces and reduced one
     tier: smaller muted italic, larger medium sans, then compact reading copy. */
  .orbit-room h2{margin:0 0 20px;line-height:1;letter-spacing:0;
    display:flex;flex-direction:column;align-items:center;align-self:end;gap:3px}
  .orbit-room h2 .oi{display:block;font-family:ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;
    font-style:italic;font-weight:400;font-size:clamp(30px,3vw,38px);line-height:1.12;
    letter-spacing:-.02em;color:#D4CEBF}
  .orbit-room h2 .os2{display:block;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",
    "Segoe UI",Inter,Roboto,sans-serif;font-style:normal;font-weight:500;
    font-size:clamp(38px,4vw,48px);line-height:1.06;letter-spacing:-.025em;color:#F5F0E7}
  .js .orbit-room h2 .os2{color:transparent;background-image:linear-gradient(90deg,
    #F5F0E7 0% 45%,rgba(245,240,231,.18) 55% 100%);background-size:200% 100%;
    background-position:100% 0;-webkit-background-clip:text;background-clip:text}
  .orb-center p,.orb-blue-copy p{color:#D4CEBF;font-size:15px;line-height:1.65;
    max-width:400px;margin:0 auto;align-self:start}

  /* The original black orbit remains the first state. This blue layer is
     progressively composited over it during the second half of the dwell. */
  .orb-dwell{height:320svh}
  .orb-pin{isolation:isolate}
  /* The final problem card, its stage and this pin use one invariant black.
     The hand-off is geometry and content only, never a visible colour event. */
  .orb{z-index:2}.orb-sats{z-index:3}.orb-center{z-index:4;will-change:opacity,transform,filter}
  .orb-blue{position:absolute;z-index:1;inset:-2%;overflow:hidden;pointer-events:none;opacity:0;
    --px:0px;--py:0px;--sy:0px;will-change:opacity,transform;
    background:radial-gradient(72% 72% at 7% 29%,rgba(38,131,143,.54),transparent 69%),
      radial-gradient(58% 62% at 92% 76%,rgba(35,104,118,.48),transparent 72%),
      linear-gradient(158deg,#070B18 0%,#091724 37%,#12343F 69%,#518E96 112%)}
  .orb-blue:before{content:"";position:absolute;inset:-12px;opacity:.72;
    background-image:radial-gradient(circle,rgba(235,247,247,.16) .42px,transparent .72px);
    background-size:10px 10px;
    -webkit-mask-image:radial-gradient(ellipse 82% 74% at 50% 48%,#000 0 56%,transparent 95%);
    mask-image:radial-gradient(ellipse 82% 74% at 50% 48%,#000 0 56%,transparent 95%);
    transform:translate(var(--px),calc(var(--py) + var(--sy)));transition:transform .3s ease-out}
  .orb-blue-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .orb-blue-lines path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
  .obl-base{stroke:rgba(226,243,244,.12);stroke-width:1}
  .obl-run{stroke-dasharray:5 175;stroke-dashoffset:-100;
    animation:obl-travel 6.4s linear var(--delay,0s) infinite;animation-play-state:paused}
  .orbit-room.orbit-live .obl-run{animation-play-state:running}
  .obl-glow{stroke:rgba(236,252,252,.82);stroke-width:2.8;filter:blur(7px)}
  .obl-core{stroke:#ECFAF9;stroke-width:1.65}
  @keyframes obl-travel{to{stroke-dashoffset:80}}
  .orb-blue-copy{z-index:5;opacity:0;pointer-events:none;will-change:opacity}
  .orb-blue-final{position:absolute;z-index:5;inset:0;display:grid;place-items:center;
    padding:0;text-align:center;opacity:0;filter:blur(8px);
    transform:none;pointer-events:none;will-change:opacity,filter}
  /* Size the compatibility field for the stage's final framed width from its
     first frame. It therefore stays on the same coordinates while the blue
     room contracts around it, including at intermediate tablet widths. */
  .orb-systems-lockup{display:flex;flex-direction:column;align-items:center;
    width:min(780px,calc(90vw - 32px))}
  .orb-blue-final p{margin:0;max-width:780px;color:#D4CEBF;
    font:italic 400 clamp(30px,3vw,38px)/1.12 ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;
    letter-spacing:-.025em}
  .orb-blue-final strong{display:block;margin-top:4px;color:#F5F0E7;
    font:500 clamp(38px,4vw,58px)/1.04 -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;
    letter-spacing:-.035em}
  /* A field of systems drawn from the clinic workflow interviews. It is a
     compatibility landscape, not a partner-badge rail: no boxes, no equalised
     tiles and deliberately varied optical sizes. */
  .orb-system-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:center;justify-items:center;column-gap:clamp(24px,3.5vw,48px);row-gap:25px;
    width:min(100%,760px);margin-top:34px;padding-top:30px;border-top:1px solid rgba(235,247,247,.16)}
  .system-mark{--mark-size:18px;min-width:0;display:flex;align-items:center;justify-content:center;
    gap:8px;color:rgba(245,240,231,.86);font:500 var(--mark-size)/1 -apple-system,BlinkMacSystemFont,
    "SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;letter-spacing:-.02em;white-space:nowrap}
  .system-mark svg{display:block;flex:0 0 auto;width:calc(var(--mark-size)*1.08);height:calc(var(--mark-size)*1.08)}
  .system-mark>img{display:block;width:auto;max-width:100%;height:24px;object-fit:contain}
  .system-mark--primary{--mark-size:20px;color:#F5F0E7}
  .system-mark--quiet{--mark-size:16px;color:rgba(245,240,231,.68)}
  .system-mark--semble>img{height:28px}.system-mark--cliniko>img{height:25px}
  .mark-highlevel{font-weight:650;letter-spacing:-.045em}
  .mark-zoom-svg{width:46px!important;height:16px!important}
  .mark-klaviyo{font-weight:650;letter-spacing:-.045em}.mark-stripe{font-weight:650;letter-spacing:-.055em}
  .mark-zapier{font-weight:620}.mark-workato{font-weight:620;letter-spacing:-.04em}
  .mark-pabau{font-weight:650;letter-spacing:-.035em}.mark-heydoc{font-weight:650;letter-spacing:-.04em}
  .mark-acuity{font-family:ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;font-weight:500}
  @media(max-width:720px){
    .orb-dwell{height:320svh}
    .orb-blue-copy{padding:0 22px}
    /* The stage finishes at 92vw. Give the inner lockup that final width from
       the start, so its three columns never reflow while the outer room frames
       or unframes. A 12px total inset leaves a quiet edge at the final size. */
    .orb-blue-final{padding:0}
    .orb-systems-lockup{width:min(346px,calc(92vw - 12px));max-width:none}
    .orb-blue-final p{font-size:27px}.orb-blue-final strong{font-size:37px}
    .orb-system-logos{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:13px;row-gap:20px;
      width:100%;margin-top:24px;padding-top:22px}
    .system-mark{--mark-size:14px;gap:6px}.system-mark--primary{--mark-size:16px}.system-mark--quiet{--mark-size:13px}
    .system-mark svg{width:16px;height:16px}.system-mark--semble>img{height:21px}
    .system-mark--cliniko>img{height:19px}.mark-zoom-svg{width:36px!important;height:13px!important}
    .orb-blue:before{background-size:6px 6px;opacity:.6}
  }
  @media(prefers-reduced-motion:reduce){
    .orb-stage{width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important}
    .orb-blue{opacity:1!important;transform:none!important}.orb-center{opacity:0!important}
    .orb-blue-copy{opacity:0!important}
    .orb-blue-final{opacity:1!important;filter:none!important;transform:none!important}
    .orb,.orb-sats{opacity:0!important}
    .obl-run{animation:none;stroke-dashoffset:28;opacity:.35}
  }

  /* The dashboard now opens into one continuous blue product room. The three
     steps live inside it, so the answer does not fall through to paper before
     it has been explained. */
  .approach-simple{position:relative;z-index:3;margin-top:-1px;overflow:hidden;color:#F5F0E7;
    padding:0 28px clamp(120px,12vw,176px);
    background:radial-gradient(72% 64% at 8% 18%,rgba(38,131,143,.48),transparent 70%),
      radial-gradient(58% 62% at 94% 76%,rgba(35,104,118,.42),transparent 72%),
      linear-gradient(180deg,#12343F 0%,#0B2430 24%,#07131F 62%,#0D2C35 100%)}
  .approach-simple:before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
    background-image:radial-gradient(circle,rgba(235,247,247,.14) .42px,transparent .72px);
    background-size:10px 10px;opacity:.58;
    -webkit-mask-image:radial-gradient(ellipse 88% 84% at 50% 44%,#000 0 54%,transparent 96%);
    mask-image:radial-gradient(ellipse 88% 84% at 50% 44%,#000 0 54%,transparent 96%)}
  .approach-wrap{position:relative;z-index:1;width:min(1420px,100%);margin:0 auto}
  .approach-simple h2{max-width:none;margin:0 auto clamp(54px,6vw,82px);text-align:center;
    font-family:ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;
    color:#F5F0E7;font-size:clamp(46px,5vw,72px);line-height:1;font-weight:400;letter-spacing:-.035em}
  .approach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .approach-card{min-width:0}
  .as-visual{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:30px;
    background:#F0ECE4;border:1px solid rgba(28,29,29,.04);padding:clamp(24px,2.6vw,40px);
    display:flex;align-items:center;justify-content:center}
  .as-visual:before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(60% 55% at 50% 50%,rgba(255,255,255,.72),transparent 76%)}
  .as-label{position:absolute;right:22px;top:20px;color:#99958D;font-size:8px;
    line-height:1;letter-spacing:.12em;text-transform:uppercase}
  .approach-card h3{margin:25px 0 8px;font-size:clamp(21px,2vw,27px);line-height:1.18;
    color:#F5F0E7;letter-spacing:-.02em;font-weight:540}
  .approach-card p{margin:0;max-width:42ch;color:#B8C5C4;font-size:16px;line-height:1.5}
  /* the artwork rides inside its own layer so the float engine can zoom and dim
     it the way Lassie treats the film inside each box; layout passes through */
  .as-inner{position:relative;z-index:1;width:100%;height:100%;display:flex;
    align-items:center;justify-content:center;flex-direction:inherit;gap:inherit}

  .as-sheet{position:relative;z-index:1;width:min(330px,92%);border-radius:17px;background:#fff;
    border:1px solid rgba(28,29,29,.06);box-shadow:0 18px 48px rgba(39,37,32,.08);padding:17px}
  .as-sheet-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;
    border-bottom:1px solid #ECEAE5;font-size:11px}
  .as-sheet-head b{font-weight:650}.as-sheet-head span{color:#9A968E}
  .as-row{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;
    min-height:43px;border-bottom:1px solid #F0EEE9;font-size:11px}
  .as-row:last-child{border-bottom:0}
  .as-row i{width:7px;height:7px;border-radius:50%;background:#BDB8AF}
  .as-row b{font-weight:540}.as-row small{font-size:9px;color:#99958D}
  .as-audit .as-row:nth-child(2) i{background:#C58B6A}
  .as-tag{position:absolute;z-index:2;left:50%;bottom:11%;transform:translateX(-50%);
    padding:7px 10px;border-radius:999px;background:#E4EFEA;color:#2D7256;
    font-size:9px;font-weight:650;white-space:nowrap;box-shadow:0 8px 22px rgba(39,37,32,.08)}

  .as-workflow{flex-direction:column;gap:22px}
  .as-node{position:relative;z-index:1;width:min(310px,88%);display:flex;align-items:center;gap:12px;
    min-height:62px;padding:12px 14px;border-radius:15px;background:#fff;
    border:1px solid rgba(28,29,29,.06);box-shadow:0 14px 40px rgba(39,37,32,.07)}
  .as-node:not(:last-of-type):after{content:"";position:absolute;left:50%;top:100%;width:1px;height:23px;
    background:#CFCAC0}
  .as-node i{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-style:normal;
    background:#E9E6DF;color:#4B4945;font-size:9px;font-weight:650}
  .as-node b{display:block;font-size:11.5px;font-weight:620}
  .as-node small{display:block;margin-top:2px;color:#99958D;font-size:9.5px}
  .as-node strong{margin-left:auto;color:#2D7256;font-size:9px;font-weight:650}
  .as-workflow .as-node:nth-of-type(3){background:#252626;color:#fff}
  .as-workflow .as-node:nth-of-type(3) i{background:#F5F0E7;color:#252626}
  .as-workflow .as-node:nth-of-type(3) small{color:#C9C5BC}
  .as-workflow .as-node:nth-of-type(3) strong{color:#CFE5DB}

  .as-measure .as-sheet{padding-bottom:14px}
  .as-measure .as-row{grid-template-columns:1fr auto}
  .as-measure .as-row b{display:flex;align-items:center;gap:9px}
  .as-measure .as-row b:before{content:"";width:18px;height:18px;border-radius:50%;background:#E8E6E0}
  .as-measure .as-row small{color:#2D7256;font-weight:650}
  .as-loop{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;
    border-top:1px solid #ECEAE5;color:#99958D;font-size:9px}
  .as-loop b{display:flex;align-items:center;gap:6px;color:#2D7256;font-weight:650}
  .as-loop b:before{content:"↻";font-size:15px;line-height:1}

  /* Lassie's three floating boxes, from their shipped timeline rather than a
     re-imagining: the stage pins while the three squares hold the centre of
     the screen. Each box rests at scale .95, ten percent low, artwork at 1.2;
     it settles to identity as it takes the front, stacks back fifteen percent
     smaller and twelve percent lower per depth with the artwork dimmed to .3
     then .1, and flies out a full viewport upward when finished. Descriptions
     ride in from half their height; from 1280px they hang beside the square,
     alternating left, right, left - Lassie's own order - and below 1280px they
     sit above it. The engine below owns every transform; this block only sets
     the stage. No JS, or reduced motion, keeps the calm three-tile grid. */
  @media (prefers-reduced-motion: no-preference){
    .approach-simple.float-on{padding:0}
    .approach-simple.float-on .approach-head{padding:clamp(110px,11vw,168px) 28px 0}
    .approach-simple.float-on .approach-dwell{height:calc(100svh + 250vh)}
    .approach-simple.float-on .approach-stage{position:sticky;top:0;height:100svh;
      display:block;overflow:visible}
    .approach-simple.float-on .approach-card{position:absolute;left:50%;top:50%;
      width:min(84vw,440px);margin:0;transform:translate(-50%,-50%)}
    .approach-simple.float-on .approach-card:nth-child(1){z-index:3}
    .approach-simple.float-on .approach-card:nth-child(2){z-index:2}
    .approach-simple.float-on .approach-card:nth-child(3){z-index:1}
    .approach-simple.float-on .as-visual{will-change:transform}
    .approach-simple.float-on .as-inner{will-change:transform,opacity}
    .approach-simple.float-on .as-desc{position:absolute;left:0;right:0;bottom:100%;
      margin-bottom:24px;opacity:0;will-change:transform,opacity}
    .approach-simple.float-on .as-desc h3{margin:0 0 6px}
    .approach-simple.float-on .as-desc p{max-width:none}
    @media (min-width:1024px){
      .approach-simple.float-on .approach-dwell{height:calc(100svh + 300vh)}
      .approach-simple.float-on .approach-card{width:min(50vh,480px)}
    }
    @media (min-width:1280px){
      .approach-simple.float-on .approach-dwell{height:calc(100svh + 220vh)}
      .approach-simple.float-on .approach-card{width:min(58vh,520px)}
      .approach-simple.float-on .as-desc{left:auto;right:auto;bottom:auto;
        top:calc(50% + 4.5rem);width:25.7rem;margin-bottom:0}
      .approach-simple.float-on .approach-card:nth-child(odd) .as-desc{right:100%;margin-right:2.8rem}
      .approach-simple.float-on .approach-card:nth-child(even) .as-desc{left:100%;margin-left:3rem}
    }
  }
  @media(max-width:720px){
    .orb-dwell{height:320svh}
    .orb{width:170vmax;height:170vmax}
    .ol{font-size:10.5px}
    .orb-pat{width:46px;height:46px}
    .orb-center{max-width:none;padding:0 20px}
    .orbit-room h2{gap:2px;margin-bottom:18px}
    .orbit-room h2 .oi{font-size:26px;line-height:1.12;letter-spacing:-.02em}
    .orbit-room h2 .os2{font-size:34px;line-height:1.06;letter-spacing:-.025em}
    .orb-center p{font-size:14px;line-height:1.65;max-width:330px}
    .approach-simple{padding:0 18px 104px}
    .approach-simple:before{background-size:6px 6px;opacity:.48}
    .approach-simple h2{font-size:44px;margin-bottom:46px}
    .approach-grid{grid-template-columns:1fr;gap:54px}
    .as-visual{border-radius:23px;padding:25px}
    .approach-card h3{margin-top:20px;font-size:23px}
    .approach-card>p{font-size:15px}
  }
  /* After the blue product room, the method becomes deliberately editorial:
     one hierarchy and four substantial steps replace the previous product tiles. */
  .approach-simple.approach-editorial{position:relative;z-index:4;margin-top:-1px;overflow:hidden;
    /* The exit air is split evenly around the closing tick: this padding is one
       half, and .spine-close's margin (plus the band's 20px inset) is the other. */
    padding:clamp(112px,9vw,154px) clamp(24px,4vw,64px) calc((clamp(132px,11vw,188px) + 20px)/2);
    background:
      radial-gradient(ellipse 62% 24% at 12% 0,rgba(18,52,63,.055),transparent 74%),
      #F9F8F5;color:#202222}
  .approach-editorial:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
    background-image:radial-gradient(circle,rgba(32,34,34,.16) .38px,transparent .68px);
    background-size:12px 12px;
    -webkit-mask-image:linear-gradient(to bottom,#000,transparent 31%);
    mask-image:linear-gradient(to bottom,#000,transparent 31%)}
  .approach-editorial .approach-wrap{position:relative;z-index:1;width:min(1320px,100%);margin:0 auto}
  .approach-editorial .approach-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.62fr);
    column-gap:clamp(48px,7vw,110px);row-gap:28px;align-items:end;padding-bottom:clamp(58px,6vw,84px);
    border-bottom:1px solid rgba(32,34,34,.14)}
  .approach-kicker{grid-column:1/-1;margin:0;color:#72736E;font-family:ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;
    font-size:17px;line-height:1;font-style:italic;letter-spacing:-.01em}
  .approach-editorial h2{grid-column:1;margin:0;max-width:900px;text-align:left;color:#202222;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
    font-size:clamp(46px,4.7vw,66px);font-weight:500;line-height:1.01;letter-spacing:-.048em}
  .approach-editorial h2 em{display:block;font-family:ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;
    font-weight:400;font-style:italic;letter-spacing:-.035em}
  .approach-lede{grid-column:2;margin:0 0 4px;max-width:43ch;color:#555957;font-size:clamp(16px,1.35vw,19px);
    line-height:1.55;letter-spacing:-.012em}
  .approach-editorial .approach-grid{display:block;margin:0}
  .approach-editorial .approach-card{display:grid;grid-template-columns:58px minmax(280px,.72fr) minmax(400px,1fr);
    gap:clamp(28px,4.4vw,72px);align-items:center;min-width:0;padding:clamp(54px,6vw,82px) 0;
    border-bottom:1px solid rgba(32,34,34,.14)}
  .approach-number{align-self:start;padding-top:5px;color:#71716C;font-family:ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;
    font-size:17px;font-style:italic;letter-spacing:-.01em}
  .approach-editorial .as-desc{min-width:0}
  .approach-editorial .as-desc h3{margin:0 0 17px;color:#202222;font-size:clamp(27px,2.5vw,35px);
    line-height:1.07;font-weight:520;letter-spacing:-.034em;text-wrap:balance}
  .approach-editorial .as-desc p{max-width:48ch;margin:0;color:#555957;font-size:clamp(16px,1.35vw,18px);
    line-height:1.56;letter-spacing:-.01em}
  .approach-editorial .as-visual{position:relative;min-width:0;height:220px;aspect-ratio:auto;overflow:hidden;
    border-radius:26px;border:1px solid rgba(32,34,34,.08);padding:clamp(26px,3vw,40px);
    display:flex;align-items:center;justify-content:center;background:
      radial-gradient(ellipse 72% 85% at 72% 20%,rgba(255,255,255,.74),transparent 70%),
      linear-gradient(145deg,#EEEAE2,#E7E3DA);box-shadow:0 24px 72px rgba(48,45,38,.055)}
  .approach-editorial .as-visual:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;
    background-image:radial-gradient(circle,rgba(32,34,34,.18) .42px,transparent .72px);
    background-size:10px 10px;
    -webkit-mask-image:radial-gradient(ellipse 76% 88% at 50% 50%,#000,transparent 86%);
    mask-image:radial-gradient(ellipse 76% 88% at 50% 50%,#000,transparent 86%)}
  .approach-editorial .as-label{position:absolute;z-index:2;top:19px;right:21px;color:#888882;
    font-size:8px;line-height:1;letter-spacing:.12em;text-transform:uppercase}
  /* Four isolated motion studies. They sit directly on the paper rather than
     inside SaaS cards; the three line studies follow scroll in both directions
     while the operational ticker loops only when its row is actually seen. */
  .approach-editorial .as-visual.method-motion{height:180px;padding:0;overflow:visible;
    border:0;border-radius:0;background:none;box-shadow:none}
  .approach-editorial .as-visual.method-motion:before,.method-motion .as-label{display:none}
  .method-motion svg{display:block;width:100%;height:100%;overflow:visible}
  .method-motion text{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif}

  .method-route-base,.method-route-draw,.method-proof-old,.method-proof-new,
  .method-impact-axis,.method-impact-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
  .method-route-base{stroke:rgba(32,34,34,.16);stroke-width:1.15}
  .method-route-draw{stroke:#202222;stroke-width:1.55;stroke-dasharray:1;stroke-dashoffset:0}
  .method-route-node circle{fill:#F9F8F5;stroke:rgba(32,34,34,.3);stroke-width:1.2}
  .method-route-node,.method-proof-node,.method-impact-tag{transform-box:fill-box;transform-origin:center}
  .method-route-node.is-key circle{fill:#202222;stroke:#202222}
  .method-route-node text{fill:#656863;font-size:12px;font-weight:520;text-anchor:middle}
  .method-route-node.is-key text{fill:#202222}
  .js .method-review:not(.is-active) .method-route-draw{stroke-dashoffset:1}
  .js .method-review:not(.is-active) .method-route-node{opacity:0;transform:translateY(6px)}
  .js .method-review.is-active .method-route-draw{animation:method-line-draw 1.05s cubic-bezier(.22,1,.36,1) both}
  .js .method-review.is-active .method-route-node{animation:method-node-in .44s cubic-bezier(.22,1,.36,1) var(--node-delay) both}

  .method-auto{width:min(100%,360px);margin-inline:auto;display:grid!important;
    grid-template-columns:34px minmax(150px,220px) auto;
    align-items:center!important;justify-content:center!important;gap:12px;color:#202222}
  .auto-orb{position:relative;width:32px;height:32px}
  .auto-orb svg{width:32px;height:32px;transform:rotate(-90deg)}
  .auto-track,.auto-progress{fill:none;stroke-width:1.8}
  .auto-track{stroke:rgba(32,34,34,.15)}
  .auto-progress{stroke:#202222;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
  .auto-cursor{fill:#202222;opacity:.22;transform:rotate(90deg) scale(.82);
    transform-origin:20px 20px;transform-box:view-box}
  .auto-slot{position:relative;height:30px;min-width:0;overflow:hidden}
  .auto-task{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;
    color:#3E4140;font-size:13.5px;font-weight:520;letter-spacing:-.012em;opacity:0;transform:translateY(100%)}
  .auto-task:first-child{opacity:1;transform:none}
  .auto-state{color:#2D7256;font-size:8.5px;font-weight:650;letter-spacing:.075em;text-transform:uppercase}
  .js .method-auto.is-inview .auto-task{animation:auto-task-turn 9.6s cubic-bezier(.22,1,.36,1) var(--task-delay) infinite both}
  .js .method-auto.is-inview .auto-progress{animation:auto-ring-run 3.2s cubic-bezier(.22,1,.36,1) infinite both}
  .js .method-auto.is-inview .auto-cursor{animation:auto-cursor-drift 3.2s cubic-bezier(.22,1,.36,1) infinite both}
  .js .method-auto.is-inview .auto-state{animation:auto-state-in 3.2s cubic-bezier(.22,1,.36,1) infinite both}

  .method-proof-old{stroke:rgba(32,34,34,.18);stroke-width:1.15;stroke-dasharray:5 7}
  .method-proof-new{stroke:#202222;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
  .method-proof-node circle{fill:#F9F8F5;stroke:rgba(32,34,34,.28);stroke-width:1.2}
  .method-proof-node text{fill:#656863;font-size:12px;font-weight:520;text-anchor:middle}
  .method-proof-node.is-approved circle{fill:#2D7256;stroke:#2D7256}
  .method-proof-node.is-approved text{fill:#2D7256;font-weight:620}
  .method-proof-halo{fill:none;stroke:#2D7256;stroke-width:1;opacity:.18}
  .js .method-proof-motion:not(.is-active) .method-proof-old,
  .js .method-proof-motion:not(.is-active) .method-proof-new{stroke-dasharray:1;stroke-dashoffset:1}
  .js .method-proof-motion:not(.is-active) .method-proof-node,.js .method-proof-motion:not(.is-active) .method-proof-halo{opacity:0}
  .js .method-proof-motion.is-active .method-proof-old{animation:method-line-draw .66s cubic-bezier(.22,1,.36,1) both}
  .js .method-proof-motion.is-active .method-proof-new{animation:method-line-draw .86s cubic-bezier(.22,1,.36,1) .42s both}
  .js .method-proof-motion.is-active .method-proof-node{animation:method-node-in .42s cubic-bezier(.22,1,.36,1) var(--node-delay) both}
  .js .method-proof-motion.is-active .method-proof-halo{animation:method-halo .42s cubic-bezier(.22,1,.36,1) 1.28s both}

  .method-impact-axis{stroke:rgba(32,34,34,.13);stroke-width:1}
  .method-impact-line{stroke-width:1.65;stroke-dasharray:1;stroke-dashoffset:0}
  .method-impact-line.revenue{stroke:#202222}.method-impact-line.hours{stroke:#657B7A}
  .method-impact-label{fill:#555957;font-size:12px;font-weight:540}
  .method-impact-note{fill:#8A8A84;font-size:10px;letter-spacing:.03em;text-transform:uppercase}
  .method-impact-end{fill:#2D7256;stroke:#F9F8F5;stroke-width:4;transform-box:fill-box;transform-origin:center}
  .method-impact-tag{fill:#2D7256;font-size:10px;font-weight:650;letter-spacing:.06em;text-transform:uppercase}
  .method-impact-figure{fill:#202222;font-size:13.5px;font-weight:640;letter-spacing:-.01em;
    transform-box:fill-box;transform-origin:center}
  .js .method-impact-motion:not(.is-active) .method-impact-line{stroke-dashoffset:1}
  .js .method-impact-motion:not(.is-active) .method-impact-end{opacity:0;transform:scale(.3)}
  .js .method-impact-motion:not(.is-active) .method-impact-tag,
  .js .method-impact-motion:not(.is-active) .method-impact-figure{opacity:0;transform:translateY(5px)}
  .js .method-impact-motion.is-active .method-impact-line.revenue{animation:method-line-draw 1.08s cubic-bezier(.22,1,.36,1) both}
  .js .method-impact-motion.is-active .method-impact-line.hours{animation:method-line-draw 1.22s cubic-bezier(.22,1,.36,1) .12s both}
  .js .method-impact-motion.is-active .method-impact-end{animation:method-end-in .4s cubic-bezier(.22,1,.36,1) 1.12s both}
  .js .method-impact-motion.is-active .method-impact-figure{animation:method-node-in .42s cubic-bezier(.22,1,.36,1) 1.18s both}
  .js .method-impact-motion.is-active .method-impact-tag{animation:method-node-in .42s cubic-bezier(.22,1,.36,1) 1.3s both}

  @keyframes method-line-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes method-node-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes method-end-in{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
  @keyframes method-halo{0%{opacity:0;transform:scale(.55);transform-origin:center}
    60%{opacity:.24;transform:scale(1.15);transform-origin:center}100%{opacity:.18;transform:scale(1);transform-origin:center}}
  /* Three labels share one 9.6s loop, each delayed by a third of it. The old
     window closed at 28.9% and the next opened at its own 4.4% - a third of a
     cycle later - leaving the slot empty for ~0.2s every turn. Holding each
     label to 33.33% makes its exit and the next label's entrance the same
     moment, so the slot crossfades instead of blinking. */
  @keyframes auto-task-turn{0%{opacity:0;transform:translateY(100%)}3.4%,33.33%{opacity:1;transform:none}36.73%,100%{opacity:0;transform:translateY(-30%)}}
  @keyframes auto-ring-run{0%{stroke-dashoffset:1;transform:rotate(0deg);transform-origin:center}
    62%{stroke-dashoffset:.08;transform:rotate(250deg);transform-origin:center}
    74%,100%{stroke-dashoffset:0;transform:rotate(270deg);transform-origin:center}}
  @keyframes auto-cursor-drift{0%,12%{opacity:.18;transform:rotate(90deg) translate(-1px,1px) scale(.78)}
    46%,68%{opacity:.72;transform:rotate(90deg) translate(1px,-1px) scale(.9)}
    78%,100%{opacity:.26;transform:rotate(90deg) translate(1px,-1px) scale(.84)}}
  @keyframes auto-state-in{0%,55%{opacity:.32}72%,88%{opacity:1}100%{opacity:.32}}
  @media(hover:hover) and (pointer:fine){
    .approach-editorial .as-visual:not(.method-motion){transition:transform 300ms cubic-bezier(.22,1,.36,1),
      border-color 300ms cubic-bezier(.22,1,.36,1),box-shadow 300ms cubic-bezier(.22,1,.36,1)}
    .approach-editorial .approach-card:hover .as-visual:not(.method-motion){transform:translateY(-4px) scale(1.008);
      border-color:rgba(32,34,34,.14);box-shadow:0 30px 82px rgba(48,45,38,.085)}
  }
  @media(max-width:1023px){
    .approach-editorial .approach-head{grid-template-columns:1fr}
    .approach-kicker,.approach-editorial h2,.approach-lede{grid-column:1}
    .approach-lede{max-width:56ch}
    .approach-editorial .approach-card{grid-template-columns:48px minmax(0,1fr);gap:22px 30px}
    .approach-editorial .as-visual{grid-column:2;height:210px}
  }
  @media(max-width:720px){
    .approach-simple.approach-editorial{padding:92px 20px 68px}
    .spine.spine-close{margin-bottom:52px}
    .approach-editorial .approach-head{row-gap:23px;padding-bottom:48px}
    .approach-kicker{font-size:15px}
    .approach-editorial h2{font-size:clamp(36px,10.5vw,43px);line-height:1.02;letter-spacing:-.044em}
    .approach-lede{font-size:15.5px;line-height:1.52}
    .approach-editorial .approach-card{grid-template-columns:34px minmax(0,1fr);gap:15px 17px;padding:43px 0}
    .approach-number{font-size:15px}
    .approach-editorial .as-desc h3{margin-bottom:12px;font-size:25px;line-height:1.06}
    .approach-editorial .as-desc p{font-size:15px;line-height:1.5}
    .approach-editorial .as-visual{grid-column:1/-1;height:190px;margin-top:9px;border-radius:22px;padding:25px 18px}
    .approach-editorial .as-visual.method-motion{height:158px;margin-top:4px;padding:0}
    .approach-editorial .as-label{top:15px;right:16px}
    .method-auto{width:min(100%,330px);grid-template-columns:30px minmax(0,1fr) auto;gap:10px}
    .auto-orb,.auto-orb svg{width:30px;height:30px}
    .auto-task{font-size:13px}
    .auto-state{font-size:8px}
  }
  @media(max-width:340px){
    .method-auto{grid-template-columns:30px minmax(0,1fr)}
    .auto-state{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    .approach-editorial .as-visual{transition:none!important;transform:none!important}
    .method-motion *{animation:none!important;transition:none!important}
  }
  @media (max-width:720px){
    /* Enough room for the mark to breathe without creating a dead runway.
       The cap also ensures its first painted frame is a complete circle on
       short and tall phones alike. */
    .brand-room{padding:clamp(112px,16svh,148px) 24px calc(170px + 11svh)}
    .brand-room .brand-mark{width:74px;height:74px;margin-bottom:38px}
    .brand-room .brand-mark::before{width:300px;height:230px}
  }
  @media (prefers-reduced-motion: reduce){
    .js .orbit-room h2 .os2{color:#F5F0E7;background:none;animation:none}
    .brand-room h2.scrub{opacity:1;filter:none}
    .sparklet{animation:none!important;opacity:0!important}
  }
  /* One quiet question at a time. The form borrows the conversational restraint
     of Typeform without importing another brand's chrome. */
  dialog.fn-d{
    border:0;padding:0;background:var(--page);color:var(--ink);max-width:none;
    width:100%;height:100%;max-height:none;margin:0;position:fixed;inset:0;overflow:hidden
  }
  dialog.fn-d::backdrop{background:var(--page)}
  body.fn-open{overflow:hidden}
  .fn-c{height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column;text-align:left;position:relative;
    background:radial-gradient(ellipse 44% 38% at 48% 48%,rgba(224,156,126,.055),transparent 72%),
      radial-gradient(ellipse 38% 42% at 82% 88%,rgba(171,157,183,.025),transparent 74%),var(--page)}
  .fn-head{height:68px;flex:none;display:flex;align-items:center;justify-content:space-between;
    padding:0 clamp(22px,3vw,36px);position:relative;z-index:2}
  .fn-mark{display:block;width:26px;height:26px;color:rgba(34,35,35,.82)}
  .fn-mark path{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round}
  .fn-close{
    position:relative;
    width:34px;height:34px;border:0;background:transparent;color:var(--muted);font:inherit;
    font-size:25px;font-weight:300;line-height:1;cursor:pointer;padding:0;display:grid;place-items:center
  }
  /* The only pointer route out of a full-screen dialog, drawn at 34px. The glyph
     keeps its size; the hit area is carried out to 44px by an overlay that
     paints nothing and takes no layout room. */
  .fn-close::after{content:"";position:absolute;inset:-5px;border-radius:50%}
  .fn-close:hover{color:var(--ink)}
  .fn-main{flex:1;min-height:0;overflow:auto;padding:0 clamp(24px,5vw,56px);display:flex;position:relative;z-index:1}
  .fn-flow{--fn-enter-y:6px;width:min(100%,660px);margin:auto;
    padding:clamp(28px,5vh,52px) 0 max(104px,14vh)}
  .fn-flow[data-direction="back"]{--fn-enter-y:-6px}
  .fn-meta{min-height:28px;margin:0 0 22px;display:flex;align-items:center;justify-content:space-between;gap:24px}
  .fn-count{color:var(--faint);font-size:11.5px;font-weight:550;letter-spacing:.16em;
    line-height:1;text-transform:uppercase;font-variant-numeric:tabular-nums}
  .fn-step{display:none}.fn-step.on{display:block;animation:fn-step-in .28s cubic-bezier(.22,.61,.36,1) both}
  @keyframes fn-step-in{from{opacity:0;transform:translateY(var(--fn-enter-y))}to{opacity:1;transform:none}}
  .fn-q{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;font-weight:450;
    font-size:clamp(40px,3.4vw,46px);line-height:1.09;letter-spacing:-.035em;margin:0 0 36px;text-wrap:balance}
  .fn-q:focus{outline:none}
  .fn-single{display:block;position:relative;width:min(100%,560px);border-bottom:1px solid rgba(34,35,35,.18)}
  .fn-single:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);
    transform:scaleX(0);transform-origin:left center;transition:transform .28s cubic-bezier(.22,.61,.36,1)}
  .fn-single:focus-within:after{transform:scaleX(1)}
  .fn-choices{display:grid;gap:8px;counter-reset:fn-choice}
  .fn-choice{counter-increment:fn-choice;position:relative;width:100%;min-height:48px;display:flex;align-items:center;padding:10px 13px;
    border:1px solid rgba(34,35,35,.22);border-radius:4px;background:rgba(34,35,35,.015);color:var(--ink);font:inherit;
    font-size:15.5px;text-align:left;cursor:pointer;transition:border-color .14s ease,background .14s ease}
  .fn-choice:before{content:counter(fn-choice,upper-alpha);width:24px;height:24px;display:grid;place-items:center;flex:none;margin-right:12px;
    border:1px solid rgba(34,35,35,.28);border-radius:3px;font-size:11px;font-weight:600;color:var(--muted)}
  .fn-choice:hover{border-color:rgba(34,35,35,.46);background:rgba(34,35,35,.035)}
  .fn-choice[aria-checked="true"]{border-color:var(--ink);background:rgba(34,35,35,.045)}
  .fn-choice[aria-checked="true"]:before{border-color:var(--ink);background:var(--ink);color:var(--page)}
  .fn-d input,.fn-d textarea,.fn-d select{
    width:100%;min-width:0;border:0;background:transparent;color:var(--ink);padding:14px 0 12px;
    font:inherit;font-size:clamp(23px,2vw,28px);line-height:1.35;outline:none;border-radius:0
  }
  .fn-d select{appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 10px) 50%,calc(100% - 5px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  /* The rule that reads as this field's underline sits on the wrapper, so the
     three-row textarea left 96px of blank between a one-line placeholder and
     the line - it read as a floating rule rather than as the field. Start at a
     single line like every other step; site-app.js grows it as text is typed. */
  .fn-d textarea{height:calc(1.35em + 26px);min-height:calc(1.35em + 26px);
    overflow:hidden;resize:none}
  .fn-d input::placeholder,.fn-d textarea::placeholder{color:rgba(34,35,35,.36)}
  .fn-actions{width:min(100%,560px);margin-top:28px;display:flex;align-items:center;gap:14px}
  .fn-next{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:118px;height:48px;
    padding:0 18px;border:0;border-radius:12px;background:var(--ink);color:var(--page);font:inherit;
    font-size:14px;font-weight:600;cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .18s ease}
  .fn-next:after{content:"→";font-size:15px;font-weight:450;line-height:1;transform:translateY(-.5px)}
  .fn-next:hover:not(:disabled){background:#000;transform:translateY(-1px)}
  .fn-next:disabled{background:rgba(34,35,35,.09);color:rgba(34,35,35,.38);cursor:not-allowed}
  .fn-back{border:0;background:transparent;padding:4px 0;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer}
  .fn-back:before{content:"←";display:inline-block;margin-right:6px}
  .fn-back:hover{color:var(--ink)}.fn-back[hidden]{display:none}
  .fn-enter-hint{font-size:12px;line-height:1;color:var(--faint);white-space:nowrap}
  .fn-note{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
  .fn-submit-error{margin:14px 0 0;color:#7E3D34;font-size:12.5px;line-height:1.5}
  .fn-submit-error a{color:inherit;text-underline-offset:3px}.fn-submit-error[hidden]{display:none}
  @media (max-width:720px){
    .fn-head{height:60px;padding:0 20px}.fn-mark{width:24px;height:24px}
    .fn-main{padding:0 24px}.fn-flow{padding:22px 0 max(76px,env(safe-area-inset-bottom))}
    .fn-meta{margin-bottom:18px}.fn-q{font-size:32px;line-height:1.11;margin-bottom:30px}
    .fn-choice{min-height:46px;font-size:15px}.fn-d input,.fn-d select,.fn-d textarea{font-size:22px;padding:12px 0 10px}
    .fn-d textarea{height:calc(1.35em + 22px);min-height:calc(1.35em + 22px)}
    .fn-enter-hint{display:none}
  }
  @media (max-height:650px){.fn-flow{margin:0 auto;padding:24px 0 56px}}
  @media (prefers-reduced-motion:reduce){.fn-step.on{animation:none}.fn-single:after{transition:none}.fn-booking-frame{animation:none}}
  .start-dark{background:rgba(227,221,207,.20);border-color:rgba(255,255,255,.10);box-shadow:none}
  /* The cream ring was declared at .14 alpha, below perception over the film.
     Same ring, raised to a weight that actually reads as a focus indicator. */
  .start-dark:focus-within{border-color:rgba(245,240,231,.72);background:rgba(236,230,216,.28);
    box-shadow:0 0 0 3px rgba(245,240,231,.52)}
  .start-dark input{color:#fff}
  .start-dark input::placeholder{color:rgba(255,255,255,.80)}
  .start-dark .pill.big{background:#fff;color:var(--accent)}
  /* Safari and Chromium paint a yellow user-agent layer behind autofilled
     values. Clip that paint to the glyphs so the glass surface stays intact. */
  .start input:-webkit-autofill,
  .start input:-webkit-autofill:hover,
  .start input:-webkit-autofill:focus,
  .start input:autofill{
    -webkit-background-clip:text;background-clip:text;
    transition:background-color 99999s ease-out,color 99999s ease-out;
  }
  .start-dark input:-webkit-autofill,
  .start-dark input:-webkit-autofill:hover,
  .start-dark input:-webkit-autofill:focus,
  .start-dark input:autofill{-webkit-text-fill-color:#fff;caret-color:#fff}




  /* the play control: an affordance, not a banner */

  /* Full-viewport film ground, centred editorial type, and the entry field
     lifted clear of both the picture edge and mobile browser chrome. */
  .hero{
    position:relative;height:100svh;height:100dvh;min-height:560px;width:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    overflow:hidden;text-align:center;padding:96px 24px 150px;
  }
  .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  /* Legibility is local, not global. A flat top-to-bottom ramp put its weakest
     point (.32 at 42%) inside the headline block, which spans 36-52% of hero
     height once the h1 wraps to three lines on a phone. This is a shaped pocket
     under the type, ramps for the nav and the foot, and a thin global veil.
     Superseded again after checking Legora, whose hero is also full-bleed with
     white type over it: they place the type LOW, in the naturally dark foot of
     the frame, and darken only the bottom. A centred pocket darkens the middle,
     which is where every composition puts its subject - it protected the type by
     destroying the picture. Type now sits at ~75% and the ramp is bottom-weighted,
     so the upper frame keeps full brightness and colour.
     12 Aug STUDY OVERRIDE (against lassie.ai): type moves back to centre.
     Legibility returns as a soft radial pocket behind .hero-mid only - low alpha,
     local, so the frame keeps its top brightness. If the centre pocket reads as
     "destroying the picture" again, the answer is grading the real film's midframe
     darker, not moving the type back down. */
  .hero-scrim{position:absolute;inset:0;z-index:2;
    background:
      linear-gradient(0deg,
        rgba(16,17,22,.80) 0px, rgba(16,17,22,.74) 170px, rgba(16,17,22,.66) 300px,
        rgba(16,17,22,.54) 430px, rgba(16,17,22,.30) 545px, rgba(16,17,22,.10) 640px,
        rgba(16,17,22,0) 720px),
      linear-gradient(180deg, rgba(16,17,22,.56) 0px, rgba(16,17,22,.22) 96px, rgba(16,17,22,0) 190px),
      linear-gradient(rgba(16,17,22,.06), rgba(16,17,22,.06))}

  /* Grain marries the built machinery to the generated footage, so it is applied
     to the composite at device resolution rather than baked into the encode,
     where it costs bitrate and the encoder half destroys it anyway. Overlay is
     the silver-halide curve: no modulation at pure black or pure white. */
  .grain{position:absolute;inset:-160px;z-index:1;pointer-events:none;
    background-image:url("/octave-grain.png");
    background-repeat:repeat;background-size:96px 96px;
    mix-blend-mode:overlay;opacity:.055}
  .hero-mid{position:relative;z-index:3;max-width:820px;
    opacity:var(--hero-copy-opacity,1);will-change:auto}
  .hero-mid: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%)}
  @media (prefers-reduced-motion: no-preference){
    .hero h1,.hero-lead,.hero .tk,.hero-foot{animation:hero-in .42s var(--ease-reveal) both}
  }
  @keyframes hero-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .hero h1{color:#fff;margin:0 0 40px;font-size:clamp(38px,6.2vw,58px);line-height:1.06;
    text-shadow:0 1px 2px rgba(0,0,0,.38), 0 2px 24px rgba(0,0,0,.28)}
  .hero-lead{max-width:620px;font-size:17px;line-height:1.48;color:rgba(255,255,255,.88);margin:0 auto 10px;
    letter-spacing:.001em;text-shadow:0 1px 2px rgba(0,0,0,.45);text-wrap:balance}
  .hero-foot{position:absolute;left:0;right:0;bottom:max(96px,10svh);z-index:3;padding:0 24px}
  .hero-foot .start{width:min(calc(370px - var(--hero-entry-narrow,0px)),100%)}
  /* The desktop film eventually retreats 76px from the bottom. Whatever the
     window's width or height, the 56px entry surface keeps clear air above
     that future edge, so the paper shelf can rise without ever crowding it. */
  @media (min-width:1024px){
    .hero-foot{bottom:clamp(120px,13svh,156px)}
  }
  /* After 100px the full-bleed film becomes an inset card. Its lower edge
     retreats a little farther than its top and sides, leaving a deliberate
     paper shelf while the copy and email form stay on the unchanged layout. */
  .hero{background:var(--page)}
  .hero-film{position:absolute;inset:0;z-index:0;pointer-events:none;contain:layout paint;transform:translateZ(0);
    background:#101116 center/cover no-repeat url('/octave-os-hero-poster-16x9-v5.jpg')}
  @media (prefers-reduced-motion: no-preference){
    .hero.hero-retreat-ready .hero-film{
      clip-path:var(--hero-clip,inset(0px round 0px));
      will-change:clip-path;
    }
  }


  @media (max-width:720px){
    .hero{height:max(100svh,520px);height:max(100lvh,520px);min-height:0;padding:84px 20px 146px}
    .hero-film{background-image:url('/octave-os-hero-poster-9x195-v5-720.webp')}
    .hero h1{margin-bottom:30px}
    .tk b{font-size:13.5px;gap:8px}
    /* Safari's collapsed chrome removes the lvh/dvh difference. The scroll
       engine therefore adds --hero-foot-lift in lockstep with the film's
       52px lower retreat, preserving a real gap instead of letting the form
       straddle the clipped edge. */
    .hero-foot{bottom:calc(max(calc(env(safe-area-inset-bottom) + 30px),calc(100lvh - 100dvh + 48px)) + var(--hero-foot-lift,0px))}
    .hero-foot .start{width:min(calc(342px - var(--hero-entry-narrow,0px)),100%)}
  }

  /* evidence band */
  .band .statement{
    font-size:clamp(25px,3.7vw,36px);line-height:1.32;letter-spacing:-0.006em;
    max-width:840px;margin:0 auto;text-align:center;
  }
  .band .statement .dim{color:var(--faint)}

  /* sections */
  section.feature{padding:150px 0 0;text-align:center}
  section.feature.last{padding-bottom:150px}
  .kicker{font-size:13px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
  h2{
    font-size:clamp(33px,4.7vw,50px);line-height:1.14;letter-spacing:-0.008em;
    max-width:700px;margin:0 auto 20px;
  }
  .body{
    font-size:clamp(18px,2.2vw,21px);line-height:1.45;color:var(--muted);
    max-width:620px;margin:0 auto 48px;
  }
  .body b{color:var(--ink);font-weight:500}

  /* the spine: the narrator's pen. Exactly 1:1 with the thumb, no phrasing anywhere,
     so the ink head sits still on the reading line while the document moves past it.
     --h is load-bearing: the engine uses element height as the span and the CSS uses
     --h as the travel, so any drift puts the node off the reading line. */
  .spine{--h:104px;height:var(--h);position:relative;width:1px;margin:0 auto;z-index:1;pointer-events:none}
  .spine.short{--h:74px}
  /* The tick before the closing band hangs at the midpoint of the pause: the
     section above carries half the air as padding, this margin plus the warm
     band's 20px inset carries the other half. */
  .spine.spine-close{margin:0 auto calc((clamp(132px,11vw,188px) + 20px)/2 - 20px)}
  .spine i{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--line)}
  .spine b{position:absolute;left:0;top:0;width:1px;height:100%;
    background:linear-gradient(180deg,#4A4F60 0%,#4A4F60 88%,rgba(74,79,96,0) 100%);
    transform-origin:top center;transform:scaleY(var(--p,1))}
  .spine s{position:absolute;left:50%;top:0;width:5px;height:5px;border-radius:50%;
    background:var(--page);border:1px solid #9AA1B8;
    transform:translate3d(-50%,-50%,0) translateY(calc(var(--p,1) * var(--h)));
    opacity:clamp(0, calc(var(--p,1) * 3), 1)}
  .spine s:after{content:"";position:absolute;inset:1px;border-radius:50%;background:#4A4F60;
    transform:scale(clamp(0, calc((var(--p,1) - .92) * 13), 1))}
  @media (max-width:720px){
    .spine{--h:70px}
    .spine.short{--h:52px}
  }

  /* Closing CTA: Lassie's warm, atmospheric simplicity translated into an
     original Octave colour field. One image card contains mark, line and form. */
  .close-band{position:relative;margin:0;padding:20px 5vw;text-align:center;
    background:linear-gradient(180deg,#F9F8F5 0%,#fff 100%);overflow:hidden}
  /* Same corner as the systems panel the reader has just left: the orbit stage
     closes to targetRadius in site-motion.js, 40 on desktop and 30 on a phone.
     The two full-bleed scenes are the same object at different temperatures, so
     they carry the same radius rather than two nearby values. */
  .close-scene{position:relative;width:100%;max-width:1320px;max-height:876px;
    aspect-ratio:1664/876;margin:0 auto;overflow:hidden;border-radius:40px;background:#E7A071}
  .close-scene img,.close-scene-shade,.close-scene-content{position:absolute;inset:0}
  .close-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 54%;border-radius:inherit}
  .close-scene-shade{background:
    radial-gradient(ellipse 72% 62% at 50% 46%,rgba(78,31,27,.30),rgba(78,31,27,.46) 74%),
    linear-gradient(180deg,rgba(71,27,24,.26),rgba(71,27,24,.52))}
  .close-scene-content{display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:36px 24px;color:#FFF9F2}
  .close-mark{display:block;width:120px;height:120px;margin:0 auto 32px;color:#FFF9F2;
    filter:drop-shadow(0 2px 16px rgba(72,26,22,.18))}
  .close-mark path{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round}
  .close-band h2{margin:0 0 24px;color:#FFF9F2;text-shadow:0 2px 22px rgba(72,26,22,.18);
    font-family:ui-serif,"New York",Iowan Old Style,Palatino,Georgia,serif;
    font-size:clamp(42px,4.05vw,58px);font-weight:400;line-height:1.05;letter-spacing:-.035em}
  .close-band h2 em{font-style:italic}
  .close-band .start{width:275px;height:56px;margin-top:16px;padding:6px;border-radius:16px;
    background:rgba(76,31,27,.25);border-color:rgba(255,249,242,.28);
    -webkit-backdrop-filter:blur(16px) saturate(1.08);backdrop-filter:blur(16px) saturate(1.08);
    box-shadow:0 12px 34px rgba(72,26,22,.12)}
  .close-band .start:focus-within{border-color:rgba(255,249,242,.7);box-shadow:0 12px 34px rgba(72,26,22,.16)}
  .close-band .start input{padding:0 16px;color:#FFF9F2}
  /* Measured at 3.07:1 over the warm photograph, under the 4.5 body floor.
     The same cream, carried at a weight that reads against the picture. */
  .close-band .start input::placeholder{color:rgba(255,249,242,.78)}
  .close-band .start button{height:40px;padding:0 14px;border-radius:12px;background:#FFF9F2;color:#6F3329;font-size:13px}
  .close-band .start button:hover{background:#fff;color:#59271F}
  .fineprint{font-size:14px;color:#666D6A;margin-top:22px;line-height:1.6}

  footer{padding:56px 0 64px;font-size:13.5px;color:var(--muted)}
  .foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
  .foot-brand .fm{display:block;font-weight:600;color:var(--ink);font-size:15px;letter-spacing:-0.01em}
  .foot-what{display:block;color:var(--muted);margin-top:4px}
  .foot-clinics{display:block;max-width:430px;color:var(--faint);margin-top:8px;
    font-size:11.5px;line-height:1.5}
  .foot-links{display:flex;gap:26px;padding-top:2px}
  .foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px;padding-top:14px;
    border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
  .foot-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  @media (max-width:720px){
    footer{padding:44px 0 52px}
    .foot-top{flex-direction:column;gap:18px}
    .foot-links{gap:18px;flex-wrap:wrap;padding-top:0}
    .foot-legal{gap:5px 0;flex-direction:column;margin-top:20px;padding-top:18px}
  }

  /* reveal */
  .rv{opacity:1;transform:none;transition:opacity var(--t-reveal) var(--ease-reveal),transform var(--t-reveal) var(--ease-reveal);transition-delay:var(--d,0s)}
  .js .rv.pending{opacity:0;transform:translateY(12px)}
  @media (prefers-reduced-motion: reduce){
    .rv,.js .rv.pending{opacity:1 !important;transform:none !important;transition:none !important}
    *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
  }

  @media (max-width:720px){
    .funnel{grid-template-columns:repeat(2,1fr)}
    .hero{padding-top:64px}
    .close-band{padding:16px 4vw}
    .close-scene{max-height:465px;aspect-ratio:362/463;border-radius:30px}
    .close-scene img{border-radius:inherit}
    .close-scene-content{padding:28px 18px}
    .close-mark{width:64px;height:64px;margin-bottom:24px}
    .close-band h2{margin-bottom:16px;font-size:36px;line-height:1.05;letter-spacing:-.025em}
    section.feature{padding-top:88px}
    section.feature.last{padding-bottom:72px}
    .row .when{display:none}
    .row{gap:10px;padding:10px 14px}
    .rows-head{padding:9px 14px;flex-wrap:wrap;row-gap:3px;font-size:9.5px}
    .rows-head span:first-child{white-space:nowrap}
    .rows-head span:last-child{flex-basis:100%}
    .row{flex-wrap:wrap;align-items:center;row-gap:5px}
    .row .who{min-width:0;flex:none}
    .row .chip{margin-left:auto}
    .row .what{flex-basis:100%;order:3;white-space:normal;overflow:visible;text-overflow:clip;font-size:12.5px;line-height:1.35}
    .hero{padding-top:56px}
    .draft-note{flex-basis:100%;margin-left:0;order:4}
    .hero-ctas{flex-direction:column;gap:18px}
    .sub{line-height:1.45}
    .band .statement{line-height:1.4}
  }

  .cap{font-size:12.5px;line-height:1.5;color:var(--faint);text-align:center;max-width:460px;margin:14px auto 0}
  .chan{font-size:12px;line-height:1.5;color:var(--faint);text-align:center;max-width:520px;margin:14px auto 0}
  .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}




  .view{display:none}
  .is-doc .bloom,.is-doc .bloom-low{display:none}
  .view.on{display:block}
  .view[hidden]{display:none!important}
  .fn-done{display:none;width:min(100%,610px);margin:auto;padding:40px 0 80px}
  .fn-done.on{display:block}
  .fn-done h2{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;font-weight:450;font-size:clamp(30px,3vw,36px);line-height:1.16;letter-spacing:-.025em;margin:0 0 16px}
  .fn-done p{font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 24px}
  .fn-booking{display:block;margin:0 0 26px}
  .fn-booking[hidden]{display:none}
  /* The hairline is what the frame is before Calendly paints inside it: an
     intended panel rather than a hole in the page. It opens on the same rise
     the questions used, so the calendar arrives rather than appears. */
  .fn-booking-frame{display:block;width:100%;height:clamp(560px,72vh,860px);border-radius:6px;
    border:1px solid rgba(34,35,35,.10);background:rgba(34,35,35,.02);color-scheme:light;
    animation:fn-step-in .28s cubic-bezier(.22,.61,.36,1) both}
  .fn-booking-frame[hidden]{display:none}
  .fn-booking-reveal{margin-right:16px}
  .fn-booking-reveal[hidden]{display:none}
  .fn-booking-open{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin-right:16px}
  .fn-booking-open[hidden]{display:none}
  .fn-booking-aside{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--faint)}
  .fn-booking-aside a{color:var(--muted);text-underline-offset:3px}
  .fn-booking-aside[hidden]{display:none}
  .fn-done-close{margin-left:0;padding-left:0;vertical-align:middle}
  /* document views: the notes and the privacy page, same shell as the landing page */
  .doc{max-width:720px;margin:0 auto;padding:104px 24px 90px}
  .doc h1{font-family:ui-serif,"New York",Iowan Old Style,Palatino,Georgia,serif;font-weight:400;
    font-size:clamp(32px,5vw,44px);line-height:1.14;letter-spacing:-0.012em;margin-bottom:14px;text-wrap:balance}
  .doc h1 em{font-style:italic}
  .doc .stand{font-size:19px;line-height:1.5;color:var(--muted);margin-bottom:40px;text-wrap:pretty}
  .doc h2{font-family:ui-serif,"New York",Iowan Old Style,Palatino,Georgia,serif;font-weight:400;
    font-size:24px;line-height:1.25;margin:38px 0 12px;letter-spacing:-0.008em}
  .doc p{margin:0 0 18px;text-wrap:pretty}
  .doc a{color:var(--ink)}
  .doc .small{font-size:13.5px;color:var(--faint);line-height:1.6}
  .doc hr{border:0;border-top:1px solid var(--line);margin:44px 0}
  .doc .idx{display:block;margin-bottom:30px;text-decoration:none;color:inherit}
  .doc h1 + .idx{margin-top:36px}
  .doc .idx h2{margin:0 0 6px}
  .doc .idx p{margin:0;color:var(--muted);font-size:15.5px}
  .doc .idx:hover h2{color:var(--muted)}
  .backlink{display:inline-block;margin-bottom:30px;font-size:14.5px;color:var(--muted);text-decoration:none}
  .backlink:hover{color:var(--ink)}

  /* invite-only client boundary. This is deliberately a real destination rather
   than a decorative modal: one calm card, no public sign-up, no invented SSO.
   The form stores and transmits nothing until authentication is connected. */
body.is-portal .site-nav,body.is-portal footer,body.is-portal>.bloom,body.is-portal>.bloom-low{display:none}
.portal-view{position:relative;z-index:100;background:#F7F6F2}
.portal-shell{min-height:100svh;display:grid;place-items:center;padding:96px 24px 72px;
  background:#F7F6F2;position:relative}
.portal-card{width:min(100%,480px);background:#fff;border:1px solid #E8E5DE;
  border-radius:24px;padding:50px 46px 38px;text-align:center;
  box-shadow:0 28px 80px rgba(34,35,35,.065),0 2px 10px rgba(34,35,35,.025),
             inset 0 1px 0 rgba(255,255,255,.9)}
.portal-mark{display:block;width:54px;height:54px;margin:0 auto 23px;color:var(--ink)}
.portal-mark path{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round}
.portal-card h1{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;
  font-size:30px;line-height:1.16;font-weight:500;letter-spacing:-.022em;margin:0 0 11px;color:var(--ink)}
.view h1[tabindex="-1"]:focus{outline:none}
.portal-intro{font-size:15.5px;color:var(--muted);margin:0 0 30px}
.portal-form{text-align:left}
.portal-field{display:block;position:relative;margin:0 0 18px}
.portal-field span{position:absolute;left:15px;top:-9px;padding:0 7px;background:#fff;
  color:var(--ink);font-size:14px;line-height:18px;z-index:1}
.portal-field input{display:block;width:100%;height:64px;border:1.5px solid #8E918F;
  border-radius:14px;background:#fff;padding:15px 17px 10px;color:var(--ink);
  font:inherit;font-size:17px;outline:none;transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.portal-field input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(34,35,35,.07)}
.portal-continue{display:flex;align-items:center;justify-content:center;width:100%;height:60px;
  border:0;border-radius:12px;background:#151616;color:#fff;font:inherit;font-size:16px;
  font-weight:500;cursor:pointer;transition:transform .18s var(--ease-out),background .18s var(--ease-out)}
.portal-continue{text-decoration:none}
.portal-continue:hover{background:#252626;transform:translateY(-1px)}
.portal-continue:active{transform:scale(.992)}
.portal-invite{font-size:12.5px;line-height:1.5;color:var(--faint);margin:20px auto 0;max-width:36ch}
.portal-help{display:inline-block;margin-top:17px;color:var(--muted);font-size:13px;
  text-decoration:none;border-bottom:1px solid var(--line)}
.portal-help:hover{color:var(--ink)}
.portal-legal{position:absolute;left:20px;right:20px;bottom:24px;text-align:center;
  color:#A0A39F;font-size:11.5px;letter-spacing:.01em}
.portal-gate h2{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;
  font-size:28px;line-height:1.2;font-weight:520;letter-spacing:-.02em;margin:0 0 14px}
.portal-gate p{font-size:16px;line-height:1.55;color:var(--muted);margin:0 auto 26px;max-width:36ch}
.portal-return{border:0;background:none;color:var(--muted);font:inherit;font-size:14px;
  cursor:pointer;margin-top:18px;padding:4px;border-bottom:1px solid var(--line)}
.portal-return:hover{color:var(--ink)}

/* The threshold moment: the Octave ring draws clockwise, glints at its
   endpoint, holds for one breath, then gives the card the room. */
.portal-interstitial{position:fixed;inset:0;z-index:220;display:grid;place-items:center;
  background:#F8F5F1;visibility:hidden;pointer-events:none}
.portal-loader{position:relative;isolation:isolate;width:min(84vw,420px);height:min(64vw,300px);
  min-height:250px;display:grid;place-items:center;color:var(--ink)}
.portal-loader::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse 48% 45% at 36% 54%,rgba(226,125,94,.36),transparent 72%),
    radial-gradient(ellipse 46% 43% at 65% 43%,rgba(246,187,117,.31),transparent 74%),
    radial-gradient(ellipse 39% 39% at 56% 70%,rgba(177,112,137,.22),transparent 76%);
  filter:blur(24px) saturate(.96);opacity:0;transform:scale(.84);transform-origin:50% 50%}
.portal-loader svg{position:relative;z-index:1;display:block;width:112px;height:112px;margin:0 auto;
  overflow:visible;filter:drop-shadow(0 16px 32px rgba(34,35,35,.08))}
.portal-loader .portal-ring-stroke{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;
  stroke-dasharray:220;stroke-dashoffset:220}
/* The curtain now breathes in as well as out: a short opening fade so the
   moment after the click resolves instead of popping fully formed. */
/* While the curtain is up it is opaque and covers the whole view, so it must
   also absorb the pointer. Leaving it transparent to clicks let the sign-in
   form beneath it be operated blind for the full 2.55s. */
.portal-view.is-entering .portal-interstitial{visibility:visible;pointer-events:auto;
  animation:portal-curtain 2.55s var(--ease-reveal) both}
.portal-view.is-entering .portal-loader::before{animation:portal-aura-in 1.25s cubic-bezier(.22,1,.36,1) .04s both}
.portal-view.is-entering .portal-loader svg{animation:portal-breathe 1.45s cubic-bezier(.22,1,.36,1) .08s both}
.portal-view.is-entering .portal-ring-stroke{animation:portal-ring-draw 1.35s cubic-bezier(.22,1,.36,1) .1s both}
.portal-view.is-entering .portal-sparkles .sparklet{
  animation:micro-spark .4s cubic-bezier(.22,1,.36,1) calc(1.45s + var(--spark-delay)) both}
.portal-view.is-entering .portal-card{animation:portal-card-in .62s var(--ease-reveal) 2.0s both}
@keyframes portal-curtain{0%{opacity:0}9%,86%{opacity:1}100%{opacity:0}}
@keyframes portal-ring-draw{0%{stroke-dashoffset:220;opacity:.28}100%{stroke-dashoffset:0;opacity:1}}
@keyframes portal-aura-in{0%{opacity:.18;transform:scale(.84)}72%,100%{opacity:.92;transform:scale(1)}}
@keyframes portal-breathe{0%{transform:scale(.94)}72%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes portal-card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:560px){
  .portal-shell{padding:52px 18px 68px;place-items:center}
  .portal-card{border-radius:22px;padding:42px 24px 32px}
  .portal-card h1{font-size:28px}.portal-intro{font-size:15px;margin-bottom:28px}
  .portal-mark{width:50px;height:50px;margin-bottom:21px}
  .portal-legal{bottom:20px;font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .portal-interstitial{display:none!important}
  .portal-card{animation:none!important}
}

/* One held problem statement hands directly into the orbit. */
.problem-sequence{position:relative;z-index:3;background:var(--page);color:var(--ink)}
/* One decisive problem statement replaces the former three-card diagnosis.
   It reads as a single 01Health-scale thought, then the same black object
   becomes the ground of the orbit. */
.problem-dwell{position:relative;padding:clamp(70px,9vw,136px) 0;background:var(--page)}
.problem-pin{position:relative;min-height:min(100svh,900px);display:grid;place-items:center;overflow:hidden}
.problem-major-card{--problem-detail:1;position:relative;isolation:isolate;overflow:hidden;
  flex:0 0 auto;display:flex;align-items:flex-end;
  width:min(calc(100vw - 80px),1080px);height:min(66svh,700px);min-height:520px;
  padding:clamp(42px,5.6vw,76px);color:#F3F1EB;background:#0D0D0D;
  border:1px solid rgba(243,241,235,.065);border-radius:46px;
  box-shadow:0 20px 58px rgba(23,25,25,.08);transform:translate3d(0,0,0);
  transform-origin:50% 50%;backface-visibility:hidden;contain:paint}
.problem-major-card::before{content:"";position:absolute;z-index:-2;inset:-10%;pointer-events:none;
  background-image:radial-gradient(circle,rgba(243,241,235,.18) 0 1px,transparent 1.25px);
  background-size:18px 18px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 76% 82% at 28% 58%,#000 0,rgba(0,0,0,.9) 44%,transparent 88%);
  mask-image:radial-gradient(ellipse 76% 82% at 28% 58%,#000 0,rgba(0,0,0,.9) 44%,transparent 88%);
  opacity:calc(.20 * var(--problem-detail))}
.problem-major-copy{position:relative;z-index:2;width:min(900px,88%)}
.problem-major-title{display:flex;flex-direction:column;align-items:flex-start;margin:0;
  font-size:clamp(56px,6.8vw,98px);line-height:.96;letter-spacing:-.047em;text-wrap:balance}
.problem-major-title span{display:block}
.problem-major-title .problem-major-turn{font-family:ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;
  font-style:italic;font-weight:400;letter-spacing:-.035em}
/* The turn of the sentence inks in with the thumb, the same sweep the
   operating-layer line uses later. Without motion it stays solid cream.
   The ghost clone lives in body, outside .problem-motion, so it is named
   here explicitly - without it the ghost's turn renders solid mid-sweep. */
.problem-motion .problem-major-title .problem-major-turn,
.problem-major-title-ghost .problem-major-turn{color:transparent;
  background-image:linear-gradient(90deg,#F3F1EB 0% 45%,rgba(243,241,235,.16) 55% 100%);
  background-size:200% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;opacity:.04}
.problem-major-title-ghost{position:fixed!important;z-index:8;margin:0;color:#F3F1EB;
  pointer-events:none;visibility:hidden;opacity:0;will-change:opacity}
.problem-major-copy p{max-width:600px;margin:clamp(24px,3vw,36px) 0 0;color:rgba(243,241,235,.66);
  font-size:clamp(17px,1.45vw,21px);line-height:1.48;letter-spacing:-.008em;text-wrap:balance}
.problem-workflow{max-width:900px;margin:clamp(24px,3vw,36px) 0 0;padding-top:18px;
  border-top:1px solid rgba(243,241,235,.13)}
.problem-workflow-label{display:block;margin-bottom:13px;color:rgba(243,241,235,.44);font-size:10px;
  font-weight:600;line-height:1;letter-spacing:.15em;text-transform:uppercase}
.problem-workflow ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:0;padding:0;list-style:none}
.problem-workflow li{display:flex;align-items:center;color:rgba(243,241,235,.82);font-size:clamp(12px,1vw,14px);
  line-height:1.35;white-space:nowrap}
.problem-workflow li:not(:last-child)::after{content:"";width:18px;height:1px;margin:0 10px;
  background:linear-gradient(90deg,rgba(243,241,235,.18),rgba(243,241,235,.48));box-shadow:8px 0 0 -0.25px rgba(243,241,235,.48)}
.problem-boundary{max-width:720px!important;margin-top:18px!important;color:rgba(243,241,235,.78)!important;
  font-size:clamp(13px,1.05vw,15px)!important}
.problem-sequence.problem-motion .problem-dwell{height:185svh;padding:0}
.problem-sequence.problem-motion .problem-pin{position:sticky;top:0;height:100svh;height:100dvh;min-height:0}
/* The pin clips the card's 2px safety bleed, so the card's painted bottom lands
   exactly on the dwell's bottom - a fractional boundary the compositor rounds
   independently from the orbit's top. Behind both is the page's warm paper, and
   when the two layers round the same fraction opposite ways the device row that
   straddles the boundary is painted by neither, so the paper shows through as a
   bright hairline travelling up the black room while the orbit enters. Worst at
   DPR 3, where the row is a third of a CSS pixel. The card's own border was
   faded away for this same seam on 17 Aug; this is the background half of it.
   This bar sat at bottom:0 until 18 Aug, which could not work: it ended on the
   very fraction it was guarding, so it only ever covered the dwell side. It has
   to straddle the boundary instead, and overlap is free because the orbit's top
   is the identical black and carries no content for the first several pixels.
   The contained state sits a full viewport above this edge, so the paper it
   rests on is untouched. */
.problem-sequence.problem-motion .problem-dwell::after{content:"";position:absolute;
  left:0;right:0;bottom:-3px;height:6px;background:#0D0D0D;pointer-events:none}
.problem-sequence.problem-motion .problem-major-card{will-change:transform,border-radius}
.problem-sequence.problem-motion .problem-major-copy{will-change:transform}
.problem-sequence.problem-motion .problem-major-title,
.problem-sequence.problem-motion .problem-major-copy>p,
.problem-sequence.problem-motion .problem-workflow{will-change:opacity,transform}
@media(max-width:720px){
  .problem-dwell{padding:58px 0 92px}
  .problem-pin{min-height:78svh}
  .problem-major-card{width:calc(100vw - 48px);height:min(62svh,550px);min-height:0;
    padding:30px 14px 30px 27px;border-radius:26px}
  .problem-major-copy{width:100%}
  .problem-major-title{font-size:clamp(39px,10.5vw,49px);line-height:.98;letter-spacing:-.043em}
  .problem-major-copy p{max-width:none;margin-top:22px;font-size:15px;line-height:1.48;text-wrap:pretty}
  .problem-workflow{margin-top:20px;padding-top:14px}
  .problem-workflow-label{margin-bottom:11px;font-size:9px}
  .problem-workflow ol{display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;counter-reset:workflow}
  .problem-workflow li{position:relative;padding-left:16px;font-size:11.5px;white-space:normal}
  .problem-workflow li::before{counter-increment:workflow;content:counter(workflow,decimal-leading-zero);
    position:absolute;left:0;color:rgba(243,241,235,.34);font-size:8px;letter-spacing:.05em}
  .problem-workflow li:not(:last-child)::after{display:none}
  .problem-boundary{margin-top:15px!important;font-size:12px!important;line-height:1.42!important}
  .problem-major-card::before{background-size:15px 15px;
    -webkit-mask-image:radial-gradient(ellipse 94% 76% at 28% 60%,#000 0,rgba(0,0,0,.88) 42%,transparent 90%);
    mask-image:radial-gradient(ellipse 94% 76% at 28% 60%,#000 0,rgba(0,0,0,.88) 42%,transparent 90%)}
  .problem-sequence.problem-motion .problem-dwell{height:170svh}
}
@media(max-width:390px) and (max-height:680px){
  .problem-major-card{height:78svh;padding:24px 22px}
  .problem-major-title{font-size:34px}
  .problem-major-copy>p{margin-top:14px;font-size:13px}
  .problem-workflow{margin-top:14px;padding-top:11px}.problem-workflow-label{margin-bottom:8px}
  .problem-workflow ol{gap:5px 12px}.problem-workflow li{font-size:10.5px}
  .problem-boundary{margin-top:11px!important;font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){
  .problem-major-card{width:min(calc(100vw - 80px),1080px)!important;height:min(66svh,700px)!important;
    border-radius:46px!important;box-shadow:0 20px 58px rgba(23,25,25,.08)!important;
    transform:translate3d(0,0,0)!important}
  .problem-major-title,.problem-major-copy>p,.problem-workflow{opacity:1!important;transform:none!important;filter:none!important}
}
@media(max-width:720px) and (prefers-reduced-motion:reduce){
  .problem-major-card{width:calc(100vw - 48px)!important;height:min(62svh,550px)!important;border-radius:26px!important}
}

/* The implementation argument resolves with the scroll instead of crossing a
   binary viewport threshold. Nothing is hidden without JS, and reduced-motion
   keeps the complete static reading order below. */
.approach-scroll-reveal{
  --approach-meta-reveal:0;
  --approach-title-reveal:0;
  --approach-body-reveal:0;
}
.approach-scroll-reveal .approach-kicker,
.approach-card.approach-scroll-reveal .approach-number{
  opacity:var(--approach-meta-reveal);
  transform:translate3d(0,calc(7px * (1 - var(--approach-meta-reveal))),0);
}
.approach-head.approach-scroll-reveal h2,
.approach-card.approach-scroll-reveal .as-desc h3{
  opacity:var(--approach-title-reveal);
  transform:translate3d(0,calc(13px * (1 - var(--approach-title-reveal))),0);
  filter:blur(calc(4px * (1 - var(--approach-title-reveal))));
}
.approach-head.approach-scroll-reveal .approach-lede,
.approach-card.approach-scroll-reveal .as-desc p{
  opacity:var(--approach-body-reveal);
  transform:translate3d(0,calc(10px * (1 - var(--approach-body-reveal))),0);
  filter:blur(calc(3px * (1 - var(--approach-body-reveal))));
}
.approach-scroll-reveal .approach-kicker,
.approach-card.approach-scroll-reveal .approach-number,
.approach-head.approach-scroll-reveal h2,
.approach-card.approach-scroll-reveal .as-desc h3,
.approach-head.approach-scroll-reveal .approach-lede,
.approach-card.approach-scroll-reveal .as-desc p{will-change:opacity,transform,filter}
@media(prefers-reduced-motion:reduce){
  .approach-scroll-reveal .approach-kicker,
  .approach-card.approach-scroll-reveal .approach-number,
  .approach-head.approach-scroll-reveal h2,
  .approach-card.approach-scroll-reveal .as-desc h3,
  .approach-head.approach-scroll-reveal .approach-lede,
  .approach-card.approach-scroll-reveal .as-desc p{
    opacity:1!important;transform:none!important;filter:none!important
  }
}

/* The orbit is static by default for no-JS and reduced-motion readers. Its
   deliberately longer runway is enabled only by the orbit controller. */
.orb-dwell{height:auto}.orb-pin{position:relative;top:auto;height:min(100svh,860px);height:min(100dvh,860px)}
.orbit-room.orbit-motion .orb-dwell{height:500svh}
.orbit-room.orbit-motion .orb-pin{position:sticky;top:0;height:100svh;height:100dvh}
@media(max-width:720px){
  .orbit-room.orbit-motion .orb-dwell{height:540svh}
}
@media(prefers-reduced-motion:reduce){
  .orb-dwell{height:auto!important}.orb-pin{position:relative!important;top:auto!important;
    height:min(100svh,860px)!important;height:min(100dvh,860px)!important;background:#0D0D0D!important}
  .orb-blue,.orb-blue-copy,.orb-blue-final{display:none!important}
  /* The setup call that establishes the orbit's geometry also writes each ring
     group's entrance opacity inline. Without motion that entrance never runs,
     so the groups have to be restored here alongside the layers that already
     were, or the room resolves black and ringless. */
  .orb,.orb-sats,.orb-center,.ol,.orb-g{opacity:1!important}
  .orb-g{transform:none!important}
  .orb-center{transform:none!important;filter:none!important}
}

/* Selected final-pass refinements. Motion-bearing properties are promoted only
   while their section is close to the viewport; the shared runtime adds and
   removes .motion-near. */
.site-nav{
  --nav-retreat:0px;
  transform:translate3d(-50%,var(--nav-retreat),0);
  visibility:visible;
  transition:transform .5s var(--ease-out),opacity .38s var(--ease-out),visibility 0s linear;
}
/* The retreat is the quiet direction: it drifts away a beat slower than it
   returns, and the fade tracks the slide instead of vanishing ahead of it. */
/* pointer-events alone left the rail in the tab order while it sat 96px off
   screen at zero opacity, so keyboard focus could land on an invisible control.
   visibility steps to hidden only after the slide has finished, so the retreat
   still animates and the return is immediate. */
.site-nav.is-retreated{--nav-retreat:calc(-100% - 44px);opacity:0;pointer-events:none;
  visibility:hidden;
  transition:transform .56s var(--ease-out),opacity .4s var(--ease-out),visibility 0s linear .56s}

/* Clinic systems lead; general workflow tools recede. Optical sizes are kept
   close enough to scan as one field without turning the marks into equal tiles. */
.system-mark[data-system="Semble"]{order:1}
.system-mark[data-system="Cliniko"]{order:2}
.system-mark[data-system="Acuity Scheduling"]{order:3}
.system-mark[data-system="HighLevel"]{order:4}
.system-mark[data-system="HubSpot"]{order:5}
.system-mark[data-system="WhatsApp"]{order:6}
.system-mark[data-system="Stripe"]{order:7}
.system-mark[data-system="Google Sheets"]{order:8}
.system-mark[data-system="Zapier"]{order:9}
.system-mark[data-system="Workato"]{order:10}
.system-mark[data-system="Klaviyo"]{order:11}
.system-mark[data-system="Zoom"]{order:12}
.system-mark{min-height:28px}
.system-mark>img{height:22px}
.system-mark--semble>img{height:24px}.system-mark--cliniko>img{height:22px}

/* Portraits are atmosphere, not implied customer proof. */
.orb-pat{width:44px;height:44px;opacity:.68;border-color:rgba(250,247,242,.34);
  box-shadow:0 0 0 5px rgba(245,240,231,.025),0 9px 22px rgba(0,0,0,.22)}
.orb-pat img{filter:saturate(.42) contrast(.96) brightness(.90)}

/* Shorter approach, longer orbit: the statement hands off to the orbit sooner,
   then the orbit keeps the room while it circles. */
/* Pinned travel shortened 62svh -> 44svh on 17 Aug. The motion beats are
   expressed as fractions of this travel, so they keep their proportions and
   their order; the whole statement simply costs the reader less scroll to get
   through. The 100dvh term is the pin's own height and is structural - a
   sticky object shorter than its runway never pins at all - but since 19 Aug
   the card's exit runs hidden beneath the orbit room (see below), so the term
   no longer costs the reader any visible scroll. */
.problem-sequence.problem-motion .problem-dwell{height:calc(100dvh + 44svh)}
.orbit-room.orbit-motion .orb-dwell{height:490svh}

/* The statement's exit used to cost a full viewport of static black: after
   the turn inked in, the full-viewport sticky card needed 100dvh of scroll to
   clear, the orbit could not arrive during it, and audit-2026-08-17 measured
   the stretch at exactly 1.00 viewport with only the held headline on screen.
   The call came from the screen on 19 Aug: delete the scroll. The orbit room
   is pulled up by exactly the card's exit and stacked above the statement
   (which holds z-index:3), so the room's ground is already pinned the moment
   the statement's pin releases, and the card leaves underneath it, unseen.
   The headline ghost is the held line through this hand-off; it lives in
   body at z-index:8 so the room's ink cannot bury it. The room must stay
   unpainted until its pin actually sticks: before that its box overlaps the
   statement's paper approach, where any paint would cover the contained card.
   .orbit-stuck is written from scroll geometry in site-motion.js, and both
   flips happen while the completed black room fills the viewport, so neither
   is visible. Reduced motion never adds .orbit-motion and keeps plain flow. */
.orbit-room.orbit-motion{margin-top:-100dvh;z-index:4}
.orbit-room.orbit-motion:not(.orbit-stuck),
.orbit-room.orbit-motion:not(.orbit-stuck) .orb-pin,
.orbit-room.orbit-motion:not(.orbit-stuck) .orb-stage{background:transparent}

/* The implementation diagrams should be quiet, but never faint enough to look
   disabled on a bright display. */
.method-route-base{stroke:rgba(32,34,34,.24)}
.method-route-node circle,.method-proof-node circle{stroke:rgba(32,34,34,.42)}
.method-route-node text,.method-proof-node text{fill:#4E5250}
.method-proof-old{stroke:rgba(32,34,34,.28)}
.method-impact-axis{stroke:rgba(32,34,34,.21)}
.method-impact-note{fill:#717570}

/* Keep compositor reservations local to nearby motion. */
.brand-room .brand-mark::before,.sparklet,.brand-room h2.scrub,
.orb-stage,.orb,.orb-pat,.orb-center,.orb-blue,.orb-blue-copy,.orb-blue-final,
.problem-sequence.problem-motion .problem-major-card,
.problem-sequence.problem-motion .problem-major-copy,
.problem-sequence.problem-motion .problem-major-title,
.problem-sequence.problem-motion .problem-major-copy>p,
.grain,.hero.hero-retreat-ready .hero-film{will-change:auto}
.brand-room.motion-near .brand-mark::before,
.brand-room.motion-near .sparklet,.brand-room.motion-near h2.scrub{will-change:opacity,transform,filter}
.problem-sequence.motion-near .problem-major-card{will-change:transform,border-radius}
.problem-sequence.motion-near .problem-major-copy{will-change:transform}
/* The ghost moved to body on 19 Aug, out of reach of the section's
   motion-near scoping; its base rule carries will-change:opacity instead -
   one fixed headline is the cheapest layer on the page. */
.orbit-room.motion-near .orb,.orbit-room.motion-near .orb-pat{will-change:opacity,transform}
.orbit-room.motion-near .orb-center,.orbit-room.motion-near .orb-blue,
.orbit-room.motion-near .orb-blue-copy,.orbit-room.motion-near .orb-blue-final{will-change:opacity,transform,filter}
.hero.motion-near .hero-mid{will-change:opacity}
.hero.motion-near.hero-retreat-ready .hero-film{will-change:clip-path}

@media(max-width:720px){
  .site-nav nav{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(6,8,10,.12);
    -webkit-backdrop-filter:blur(16px) saturate(1.06);backdrop-filter:blur(16px) saturate(1.06);
    background:linear-gradient(135deg,rgba(18,20,22,.56),rgba(18,20,22,.38));
  }
  .problem-sequence.problem-motion .problem-dwell{height:calc(100dvh + 42svh)}
  .orbit-room.orbit-motion .orb-dwell{height:525svh}
  .system-mark{min-height:22px}.system-mark>img{height:18px}
  .system-mark--semble>img{height:20px}.system-mark--cliniko>img{height:18px}
}

/* A phone turned sideways has desktop width but almost no vertical room.
   Keep the same cinematic sequence, using the compact geometry so its fixed
   copy, navigation and compatibility field never collide or reflow. */
@media(min-width:721px) and (max-height:520px){
  .problem-major-card{width:min(calc(100vw - 64px),860px);height:min(72svh,300px);min-height:0;
    padding:28px 34px;border-radius:30px}
  .problem-major-title{font-size:46px;line-height:.96}
  .problem-sequence.problem-motion .problem-dwell{height:calc(100dvh + 52svh)}
  .orb-blue-final{padding:0}
  .orb-systems-lockup{width:min(720px,calc(92vw - 32px));max-width:none}
  .orb-blue-final p{font-size:23px}.orb-blue-final strong{font-size:32px}
  .orb-system-logos{column-gap:20px;row-gap:14px;margin-top:18px;padding-top:16px}
  .system-mark{--mark-size:14px;min-height:20px;gap:6px}
  .system-mark--primary{--mark-size:16px}.system-mark--quiet{--mark-size:13px}
  .system-mark>img{height:18px}.system-mark--semble>img{height:20px}.system-mark--cliniko>img{height:18px}
}

/* Reduced motion keeps the answer intact in source order: a complete black
   orbit followed by a complete, readable blue systems panel. */
@media(prefers-reduced-motion:reduce){
  .orb-pin{height:auto!important;overflow:visible!important;display:block!important}
  .orb-stage{display:grid!important;grid-template-rows:min(100svh,860px) min(82svh,760px);
    width:100%!important;height:auto!important;overflow:hidden!important;background:#0D0D0D!important}
  .orb,.orb-sats{display:block!important;opacity:1!important;top:min(50svh,430px)!important}
  .orb-sats{top:0!important;height:min(100svh,860px)!important}
  .orb-center{display:grid!important;inset:0 0 auto!important;height:min(100svh,860px)!important;
    opacity:1!important;transform:none!important;filter:none!important}
  .orb-blue,.orb-blue-copy{display:none!important}
  .orb-blue-final{position:relative!important;inset:auto!important;grid-row:2;display:grid!important;
    min-height:min(82svh,760px);opacity:1!important;filter:none!important;transform:none!important;
    background:radial-gradient(72% 72% at 7% 29%,rgba(38,131,143,.54),transparent 69%),
      radial-gradient(58% 62% at 92% 76%,rgba(35,104,118,.48),transparent 72%),
      linear-gradient(158deg,#070B18 0%,#091724 37%,#12343F 69%,#518E96 112%)}
  .orb-blue-final:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.56;
    background-image:radial-gradient(circle,rgba(235,247,247,.16) .42px,transparent .72px);
    background-size:10px 10px}
}

/* The film element only ever receives its source and poster from script. With
   script off it stays an empty <video>, which Chrome paints as an opaque box
   over the designed still and dresses with its own transport controls. The
   poster already lives on .hero-film underneath, so the empty element goes. */
.no-js .hero-bg{display:none!important}

.no-js .orb-pin{height:auto!important;overflow:visible!important;display:block!important}
.no-js .orb-stage{display:grid!important;grid-template-rows:min(100svh,860px) min(82svh,760px);
  width:100%!important;height:auto!important;overflow:hidden!important;background:#0D0D0D!important}
.no-js .orb,.no-js .orb-sats{display:block!important;opacity:1!important;top:min(50svh,430px)!important}
.no-js .orb-sats{top:0!important;height:min(100svh,860px)!important}
.no-js .orb-center{display:grid!important;inset:0 0 auto!important;height:min(100svh,860px)!important;
  opacity:1!important;transform:none!important;filter:none!important}
.no-js .orb-blue,.no-js .orb-blue-copy{display:none!important}
.no-js .orb-blue-final{position:relative!important;inset:auto!important;grid-row:2;display:grid!important;
  min-height:min(82svh,760px);opacity:1!important;filter:none!important;transform:none!important;
  background:radial-gradient(72% 72% at 7% 29%,rgba(38,131,143,.54),transparent 69%),
    radial-gradient(58% 62% at 92% 76%,rgba(35,104,118,.48),transparent 72%),
    linear-gradient(158deg,#070B18 0%,#091724 37%,#12343F 69%,#518E96 112%)}

/* NOT FIXED HERE - landscape phones cannot fit the hero as designed.
   At 390px tall the budget is: rail 58 + headline 111 + lead 23 + form 56 +
   the film's 52px retreat inset + clearance, against 390px of screen. The entry
   pill therefore sits below the fold. Shrinking the hero to the real viewport
   was tried and reverted: it put the form below the film's own clipped edge
   (-34px) and left the copy passing behind the rail with no room to fade,
   which the browser QA catches. Fixing this needs a design call - smaller
   landscape type, a shallower film inset on short viewports, or accepting the
   scroll. See audit-2026-08-17. */

/* Windows High Contrast and other forced-colour modes flatten author colours to
   the system palette. Two things here do not survive that automatically. */
@media (forced-colors: active){
  /* The brand mark is a hairline drawing whose stroke inherits a author colour;
     force-adjusted it can land within a shade of Canvas. Name a system colour. */
  .brand-room .ring-ghost,.brand-room .ring-ink{stroke:CanvasText}
  /* The partner wordmarks are light artwork that only reads against the dark
     panel it is drawn on. Force-adjusting the panel to Canvas removes that
     ground and the marks disappear, so this lockup keeps its own colours. */
  .orb-blue-final,.orb-systems-lockup,.system-mark,.system-mark>img{forced-color-adjust:none}
}

/* The legal documents served as SPA views had no print styles of their own -
   only the standalone dpa.html/gdpr.html did, via legal.css. Printing /privacy
   or /terms carried the floating nav pill and the whole marketing footer onto
   the page. Same treatment as legal.css, applied to the in-page views. */
@media print{.view:not(.on){display:none!important}
  .doc{max-width:none;padding:0;color:#000}
  .doc h1{font-size:40px;margin-bottom:42px}
  .doc h2{break-after:avoid}
  .doc p,.doc li{orphans:3;widows:3}
  html,body{background:#fff!important}
}

/* The method diagrams draw their type in SVG user units inside a fixed 560-unit
   viewBox, so labels scale down with the box: on a phone that box renders at
   0.50-0.63 of its viewBox, putting 10-13.5px type on screen at 5-8.4px.
   These are the largest sizes that stay collision-free inside that viewBox,
   measured per breakpoint. They lift the smallest label from 5.0px to 6.5px at
   320px and from 6.3px to 8.8px at 390px, which is a real gain but still short
   of legible. Going further makes labels collide and overflow the box: the
   remaining fix is a mobile layout for these diagrams - respaced nodes, wrapped
   labels or a taller viewBox - not a larger type size. See audit-2026-08-17. */
@media (max-width:720px){
  .method-route-node text,.method-proof-node text,.method-impact-label{font-size:16px}
  .method-impact-note,.method-impact-tag{font-size:14px}
  .method-impact-figure{font-size:18px}
}
@media (max-width:420px){
  .method-route-node text,.method-proof-node text,.method-impact-label{font-size:14px}
  .method-impact-note,.method-impact-tag{font-size:12px}
  .method-impact-figure{font-size:15px}
}

/* NOT FIXED - landscape phones cannot fit the hero as composed. At 390px tall
   the budget is rail 58 + headline 111 + lead 23 + form 56 + the film's own
   bottom gutter + clearance, against 390px of screen, so the entry pill sits
   below the fold. Two attempts on 17 Aug: shrinking the hero to the viewport
   put the form below the film's clipped edge; additionally shrinking the film's
   gutter left the form only 12px inside the picture, the copy still passing
   behind the rail with no room to fade, and - decisively - the max-height rule
   fired on portrait phones when the soft keyboard shrank the viewport, clipping
   the form there instead. The browser QA catches all of it. This needs smaller
   landscape type or a different landscape composition, not a fit. */

/* 9 Sep 2026: the two statement sections are one scroll-driven canvas (tusi.js), the mechanism behind tribe.ai's hero. Paper ground, the site serif, reduced-motion safe. */
.tusi{position:relative;height:308vh;height:308svh;margin:0;background:var(--page)}
.tusi-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;pointer-events:none}
.tusi-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform}
.tusi-cta{position:absolute;left:0;right:0;bottom:64px;display:flex;justify-content:center;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .6s cubic-bezier(.625,.05,0,1),transform .6s cubic-bezier(.625,.05,0,1)}
.tusi-cta.on{opacity:1;transform:none;transition-delay:.3s;pointer-events:auto}
.tusi-cta.off{opacity:0;transform:translateY(-14px);transition-delay:0s}
.tusi-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;padding:10px 24px;border-radius:6px;color:#F9F8F5;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.05em;text-transform:uppercase;transition:padding-right .45s cubic-bezier(.625,.05,0,1),color .45s cubic-bezier(.625,.05,0,1)}
.tusi-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:6px;background:var(--accent);transition:inset .45s cubic-bezier(.625,.05,0,1),background-color .45s cubic-bezier(.625,.05,0,1)}
.tusi-btn:hover{color:#06141B;padding-right:26px}
.tusi-btn:hover::before{inset:-4px;background:#65D9EE}
.tusi-btn:active::before{inset:-2px;transition-duration:.15s;transition-timing-function:ease-out}
.tusi-btn .arrow{display:inline-block;width:0;height:1em;overflow:hidden;vertical-align:middle;transition:width .45s cubic-bezier(.625,.05,0,1)}
.tusi-btn:hover .arrow{width:calc(1em - 2px)}
.tusi-btn .arrow svg{display:block;width:1em;height:1em;margin-left:2px}
/* the first beat's bottom: the caption line, the strip of systems, the scroll-down button; all three go when the page moves (700ms / 500ms, as tribe.ai) */
.tusi-caption{position:absolute;left:0;right:0;bottom:108px;margin:0;padding:0 24px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.tusi-foot{position:absolute;left:0;right:0;bottom:32px;max-width:1360px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:32px;transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.tusi.moved .tusi-caption{opacity:0;transform:translateY(-4px)}
.tusi.moved .tusi-foot{opacity:0;transform:translateY(-4px);pointer-events:none}
.tusi-strip{display:flex;align-items:center;gap:0 44px;min-width:0;overflow:hidden;white-space:nowrap;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(34,35,35,.42)}
.tusi-strip span{flex:none}
.tusi-strip-label{font-weight:500;letter-spacing:.08em;color:rgba(34,35,35,.34);margin-right:8px}
.tusi-scroll{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:999px;border:1px solid rgba(34,35,35,.15);background:none;color:rgba(34,35,35,.7);cursor:pointer;pointer-events:auto;transform:translateX(12.5px);transition:color .2s,border-color .2s}
.tusi-scroll:hover{border-color:#65D9EE;color:#0A99C3}
.tusi-scroll svg{height:16px;width:auto;transform:rotate(90deg)}
@media (max-width:1023px){.tusi-foot{padding:0 20px;justify-content:center}.tusi-strip{display:none}.tusi-scroll{transform:none}}
@media (max-width:767px){.tusi-cta{bottom:56px}.tusi-caption{bottom:120px;font-size:12px;line-height:16px}.tusi-foot{bottom:16px}.tusi-scroll{width:30px;height:30px}.tusi-scroll svg{height:10px}}
@media (prefers-reduced-motion:reduce){.tusi-cta,.tusi-btn,.tusi-btn::before,.tusi-btn .arrow{transition:none}}
/* Lenis (smooth wheel on pointer devices, tusi.js starts it) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}