/* ============================================================
   AXIS public site
   Organising idea: the site demonstrates itself. Each of the three
   things AXIS sells is a working instance on the page, inside a
   device, not a paragraph about it. Delete the working samples and
   the page is three paragraphs and a price, which is every agency.
   ============================================================ */

:root{
  --bg:#050505;
  --bg2:#0b0b0a;
  --panel:#0e0e0d;
  --ink:#F4F4F2;
  --dim:rgba(244,244,242,.8);
  --quiet:rgba(244,244,242,.66);
  --faint:rgba(244,244,242,.52);
  --hair:rgba(255,255,255,.1);
  --hair2:rgba(255,255,255,.18);
  --glass:rgba(255,255,255,.05);
  --glass-deep:rgba(255,255,255,.045);
  --accent:#E8FF47;
  --accent-ink:#0A0A05;
  --accent-dim:rgba(232,255,71,.14);
  --ease:cubic-bezier(.32,.72,0,1);
  --spring:cubic-bezier(.34,1.4,.44,1);
  --r-lg:1.4rem;
  --r-md:1rem;
  --r-sm:.65rem;
  --shadow-pop:0 24px 60px -24px rgba(0,0,0,.85);
  --gutter:clamp(1.1rem,4vw,2.5rem);
  --shell:min(1280px, 100% - (2 * var(--gutter)));
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --display:'Clash Display',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --body:'General Sans',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  /* the sample business inside the devices. Content, not surface. */
  --hl-bg:#F6F5F1;
  --hl-ink:#161613;
  --hl-dim:rgba(22,22,19,.66);
  --hl-line:rgba(22,22,19,.12);
  --hl-brand:#1E6B4B;
  --hl-brand-ink:#F6F5F1;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
::selection{background:var(--accent);color:var(--accent-ink)}
a,button,input,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
button{cursor:pointer}

.skip{position:fixed;left:0;top:0;z-index:200;transform:translateY(-150%);background:var(--accent);color:var(--accent-ink);
  padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;font-weight:600;font-size:.85rem;text-decoration:none}
.skip:focus{transform:none}
.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}
/* the fixed navigation and the phone bar cover the edges of the viewport, so
   anchor jumps and focus scrolls keep clear of them */
html{scroll-padding-top:calc(5.5rem + var(--safe-top))}
.noscript{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--panel);border-top:1px solid var(--hair);
  color:var(--dim);font-size:.9rem;padding:.6rem var(--gutter) calc(.6rem + var(--safe-bottom));text-align:center}
html:not(.js) .foot{padding-bottom:calc(120px + var(--safe-bottom))}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.shell{width:var(--shell);margin-inline:auto;position:relative}
main > section,.lower > section{padding:clamp(5rem,10vw,9rem) 0;position:relative}
[id]{scroll-margin-top:calc(5.5rem + var(--safe-top))}

/* ---------- type ladder ---------- */
.eyebrow{
  display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--faint);
}
h1,h2,h3,.fig,.tn,.bw-done-fig,.facts dd,.hl-h,.hl-h2,.hld-h,.hl-big,.bw-title,.cal-day{font-family:var(--display);font-weight:500}
h1{font-size:clamp(2.55rem,5vw,4.1rem);letter-spacing:-.02em;line-height:1.04;max-width:14ch;text-wrap:balance}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.015em;line-height:1.1;text-wrap:balance;max-width:20ch}
h3{font-size:clamp(1.2rem,1.8vw,1.45rem);letter-spacing:-.005em;line-height:1.2}
.sub{font-weight:500;font-size:1.1rem;line-height:1.5;color:var(--dim);max-width:44ch}
.copy{font-weight:400;font-size:1rem;line-height:1.6;color:var(--quiet);max-width:60ch}
.eyebrow + h1,.eyebrow + h2{margin-top:1.25rem}
h1 + .sub,h2 + .sub{margin-top:1.5rem}
.svc-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.svc-head h2{max-width:24ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
  text-decoration:none;border:none;cursor:pointer;border-radius:999px;
  font-weight:600;font-size:.9rem;letter-spacing:.005em;
  padding:.55rem .55rem .55rem 1.25rem;
  --mx:0px;--my:0px;--press:1;
  transform:translate(var(--mx),var(--my)) scale(var(--press));
  transition:background .5s var(--ease), transform .6s var(--spring), box-shadow .5s var(--ease);
  white-space:nowrap;
}
/* under a fine pointer the button leans toward it, and springs back on leave */
.btn.is-mag{transition-duration:.5s,.22s,.5s}
.btn .pip{
  width:2rem;height:2rem;border-radius:999px;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease);
}
.btn .pip svg{fill:currentColor}
.btn:hover .pip{transform:translate(3px,-1px) scale(1.06)}
.btn:active{--press:.98}
.btn-solid{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 22px -10px rgba(232,255,71,.5)}
.btn-solid:hover{background:#EEFF6B;box-shadow:0 10px 28px -10px rgba(232,255,71,.58)}
.btn-solid .pip{background:rgba(0,0,0,.12)}
.btn-solid:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn-ghost{background:var(--glass);color:var(--ink);border:1px solid var(--hair2)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-ghost .pip{background:rgba(255,255,255,.08)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.38;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover .pip{transform:none}
.btn.is-busy{opacity:.7;pointer-events:none}
.btn.is-busy .pip{animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- navigation ---------- */
.nav{
  position:fixed;top:calc(16px + var(--safe-top));left:50%;transform:translateX(-50%);z-index:80;
  width:var(--shell);height:64px;
  display:flex;align-items:center;gap:.5rem;
  padding:0 .5rem 0 1.25rem;border-radius:999px;
  background:rgba(10,10,10,.62);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--hair);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.8);
}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);margin-right:auto;min-height:44px}
.mark svg{display:block;flex:none;fill:var(--accent)}
.mark span{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.16em;transition:color .4s var(--ease)}
.mark:hover span{color:var(--accent)}
.nav-links{display:flex;gap:.1rem;margin-right:.5rem}
.nav-links a{
  display:flex;align-items:center;min-height:44px;color:var(--dim);text-decoration:none;
  font-size:.82rem;font-weight:500;padding:0 .8rem;border-radius:999px;
  transition:color .4s var(--ease), background .4s var(--ease);
}
.nav-links a:hover{color:var(--ink);background:var(--glass)}
.nav-links a:active{transform:scale(.98)}
/* the two lines rest four pixels either side of centre and rotate into a
   cross. Transform only, nothing else moves. */
.burger{
  display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--hair2);background:var(--glass);
  position:relative;flex:none;
}
.burger span{
  position:absolute;left:13px;top:21px;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .4s var(--ease);
}
.burger span:nth-child(1){transform:translateY(-4px)}
.burger span:nth-child(2){transform:translateY(4px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:70;
  background:rgba(5,5,5,.94);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(5.5rem + var(--safe-top)) var(--gutter) calc(1.5rem + var(--safe-bottom));
  overflow:auto;overscroll-behavior:contain;touch-action:pan-y;
  opacity:0;transition:opacity .4s var(--ease);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu-links{display:flex;flex-direction:column;gap:.1rem;margin-top:auto}
.menu-links a{
  font-family:var(--display);font-weight:500;font-size:clamp(1.75rem,6.5vw,2.3rem);letter-spacing:-.02em;line-height:1.15;
  color:var(--ink);text-decoration:none;padding:.3rem 0;min-height:44px;display:flex;align-items:center;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .4s var(--ease);
}
.menu.is-open .menu-links a{opacity:1;transform:none}
.menu.is-open .menu-links a:nth-child(2){transition-delay:35ms}
.menu.is-open .menu-links a:nth-child(3){transition-delay:70ms}
.menu.is-open .menu-links a:nth-child(4){transition-delay:105ms}
.menu.is-open .menu-links a:nth-child(5){transition-delay:140ms}
.menu.is-open .menu-links a:nth-child(6){transition-delay:175ms}
.menu.is-open .menu-links a:nth-child(7){transition-delay:210ms}
.menu-links a:hover{color:var(--accent)}
.menu-links .menu-cta{color:var(--accent)}
.menu-foot{margin-top:1.5rem;font-size:.9rem;color:var(--faint)}
body.menu-open{overflow:hidden}
/* one blur at a time: the pill drops its own while the menu is open */
body.menu-open .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,10,.9)}

/* ============================================================
   MOTION
   Two curves, transform and opacity only. Four systems.
   1. The hero plays once on load. Each word of the headline rises
      out of its own line, the phone settles, the sample loads inside
      it, and the Book button in the sample asks to be tapped.
   2. Everything below the fold arrives when the visitor reaches it.
      An IntersectionObserver adds is-in at the right point on the
      screen and a transition on the house curve does the rest, with
      a stagger by document order inside each group. Triggered, not
      scrubbed, so a fast flick on a phone never leaves a section
      half faded, and scrolling back never takes it away again.
   3. Seven things are tied to the scroll itself and move exactly as
      far as it does, forwards and back: the hero copy dissolving, the
      phone lifting away at its own speed, the proof figures drifting
      through their band, the process rule, the rule under the last
      step, the seam above the proof, and the rail down the thread.
   4. Interaction. Primary buttons lean toward the pointer, the
      sample's views slide the way they were entered, slots and
      calendar rows cascade in, the confirmation text pops.
   Reduced motion: nothing below is hidden and nothing travels.
   ============================================================ */
@keyframes rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:translateY(56px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lift{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes word-rise{from{transform:translateY(130%)}to{transform:none}}
@keyframes draw-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes bloom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes hero-exit{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-56px)}}
@keyframes lift-away{from{transform:none}to{transform:translateY(var(--drift,-64px))}}
@keyframes drift-through{from{transform:translateY(36px)}to{transform:translateY(-36px)}}
@keyframes ken{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes cue{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* a split word: a mask, and the word inside it that rises out. The
   padding and the negative margin are the same size, so the mask clears
   ascenders and descenders without changing the line. */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em 0 .18em;margin:-.08em 0 -.18em}
.wi{display:inline-block}

@media (prefers-reduced-motion: no-preference){
  /* 2. arrivals. --d is the group stagger, set by the observer from
     document order, 65ms a step, never past 390ms. */
  html.js .sv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease), transform .9s var(--ease);transition-delay:var(--d,0ms)}
  html.js .sv-left{transform:translateX(-32px)}
  html.js .sv-right{transform:translateX(32px)}
  html.js .sv-settle{transform:translateY(56px) scale(.96);transition-duration:1s}
  html.js .sv.is-in{opacity:1;transform:none}
  /* words of a heading rise out of their lines 38ms apart. The offset is
     capped at the twelfth word so a long sentence is readable inside a
     second and a half. */
  html.js .wv .wi{transform:translateY(130%);transition:transform .85s var(--ease);transition-delay:calc(var(--d,0ms) + min(var(--i,0), 12) * 38ms)}
  html.js .wv.is-in .wi{transform:none}
  /* what sits inside a frame arrives just after the frame */
  html.js .rung .fig{opacity:0;transform:translateY(.25em) scale(.94);transition:opacity .9s var(--ease) .12s, transform .9s var(--ease) .12s}
  html.js .rung.is-in .fig{opacity:1;transform:none}
  html.js .track .tn{opacity:0;transform:translateY(.2em);transition:opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s}
  html.js .track .is-in .tn{opacity:1;transform:none}
  html.js .lead .field,html.js .lead .when,html.js .lead .lead-actions{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
  html.js .lead.is-in .field,html.js .lead.is-in .when,html.js .lead.is-in .lead-actions{opacity:1;transform:none}
  html.js .lead.is-in .bez-core > :nth-child(1){transition-delay:.2s}
  html.js .lead.is-in .bez-core > :nth-child(2){transition-delay:.26s}
  html.js .lead.is-in .bez-core > :nth-child(3){transition-delay:.32s}
  html.js .lead.is-in .bez-core > :nth-child(4){transition-delay:.38s}
  html.js .lead.is-in .bez-core > :nth-child(5){transition-delay:.44s}
  html.js .lead.is-in .bez-core > :nth-child(7){transition-delay:.5s}
  html.js .facts dd{opacity:0;transform:translateY(.2em) scale(.94);transition:opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s}
  html.js .facts .is-in dd{opacity:1;transform:none}
  /* the numbered markers pop onto the sample once its frame has settled */
  html.js .browser .mk{opacity:0}
  html.js .browser.is-in .mk{animation:pop .5s var(--spring) both;animation-delay:calc(var(--d,0ms) + 760ms + var(--i,0) * 70ms)}
  /* the thread: a dot lights on the rail as each message arrives */
  html.js .msg::before{transform:scale(.3);opacity:0;transition:transform .5s var(--spring) .3s, opacity .3s var(--ease) .3s}
  html.js .msg.is-in::before{transform:none;opacity:1}

  /* 3. scrubbed. Seven animations, and no more, are on the scroll
     itself. A scrubbed range is linear where it maps distance, because
     the visitor's hand is the easing; the rules that draw use the curve. */
  @supports (animation-timeline: scroll()){
    html.js:not(.no-sda) .hero-copy{animation:hero-exit both var(--ease);animation-timeline:scroll(root);animation-range:0px 72vh}
    html.js:not(.no-sda) .hero-demo{animation:lift-away both linear;animation-timeline:scroll(root);animation-range:0px 100vh}
  }
  @supports (animation-timeline: view()){
    html.js:not(.no-sda) .facts{animation:drift-through both linear;animation-timeline:view();animation-range:cover 0% cover 100%}
    html.js:not(.no-sda) .track::before,html.js:not(.no-sda) .track li.is-big::before{
      transform-origin:left;animation:draw-x both var(--ease);animation-timeline:view();animation-range:cover 0% cover 32%;
    }
    html.js:not(.no-sda) .lower{border-top-color:transparent}
    html.js:not(.no-sda) .lower::before{
      content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--hair2);z-index:1;
      transform-origin:left;animation:draw-x both var(--ease);animation-timeline:view();animation-range:cover 0% cover 6%;
    }
    html.js:not(.no-sda) .msgs::before{transform-origin:top;animation:draw-y both var(--ease);animation-timeline:view();animation-range:cover 8% cover 72%}
  }
  .lower{position:relative}

  /* 1. the hero, once. The text waits for the fonts (is-live); the phone
     and the photograph inside it, the largest paint on the page, start
     from load and never wait. Everything is released by hero-done so that
     returning to the sample's home view later never replays the sequence. */
  html.js:not(.hero-done) .hero-copy > *,html.js:not(.hero-done) .demo-cap{opacity:0}
  html.js:not(.hero-done) .hero-copy h1.is-split{opacity:1}
  html.js:not(.hero-done) .hero-copy h1.is-split .wl .wi{transform:translateY(130%)}
  html.js:not(.hero-done) .device{animation:settle 1.1s var(--ease) .15s both}
  html.js:not(.hero-done) .hl-view[data-phone-view="home"] .hl-rating,
  html.js:not(.hero-done) .hl-view[data-phone-view="home"] .hl-h,
  html.js:not(.hero-done) .hl-view[data-phone-view="home"] .hl-p,
  html.js:not(.hero-done) .hl-view[data-phone-view="home"] .hl-book,
  html.js:not(.hero-done) .hl-view[data-phone-view="home"] .hl-list{opacity:0}
  html.js.is-live:not(.hero-done) .hero-copy .eyebrow{animation:rise .8s var(--ease) 40ms both}
  html.js.is-live:not(.hero-done) .hero-copy h1.is-split .wl .wi{animation:word-rise .95s var(--ease) both;animation-delay:calc(120ms + var(--i,0) * 48ms)}
  html.js.is-live:not(.hero-done) .hero-copy .sub{animation:rise .8s var(--ease) .56s both}
  html.js.is-live:not(.hero-done) .hero-copy .cta-row{animation:rise .8s var(--ease) .68s both}
  html.js.is-live:not(.hero-done) .demo-cap{animation:rise .8s var(--ease) .6s both}
  html.js.is-live:not(.hero-done) .hl-view[data-phone-view="home"] .hl-rating{animation:lift .5s var(--ease) .75s both}
  html.js.is-live:not(.hero-done) .hl-view[data-phone-view="home"] .hl-h{animation:lift .5s var(--ease) .81s both}
  html.js.is-live:not(.hero-done) .hl-view[data-phone-view="home"] .hl-p{animation:lift .5s var(--ease) .87s both}
  html.js.is-live:not(.hero-done) .hl-view[data-phone-view="home"] .hl-book{animation:lift .5s var(--ease) .95s both}
  html.js.is-live:not(.hero-done) .hl-view[data-phone-view="home"] .hl-list{animation:lift .5s var(--ease) 1.03s both}
  /* the sample asks to be tapped: three rings off the Book button, then
     quiet. Gone at the first touch. */
  html.js .device.is-cue .hl-view[data-phone-view="home"] .hl-book::after{animation:cue 1.6s var(--ease) 3}
  /* the photographs inside the samples drift, 24 seconds a pass, only
     while their frame is on screen */
  html.js .device.is-vis .hl-hero img{animation:ken 24s var(--ease) infinite alternate}
  html.js .browser.is-vis .hld-img{animation:ken 28s var(--ease) infinite alternate}

  /* 4. interaction */
  .hl-view.is-on .hl-tick{animation:pop .55s var(--spring) .12s both}
  .bw-slots button,.hl-slots button{animation:lift .45s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
  .cal-rows.is-fresh li{animation:lift .45s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
  .sms-bubble.is-live{animation:bloom .5s var(--spring) both}
  .remind.is-live{animation:lift .5s var(--ease) .1s both}
  .bw-done:not([hidden]){animation:lift .55s var(--ease) both}
  .lead.is-sent .form-status{animation:lift .55s var(--ease) both}
  .faq-list details[open] .faq-a{animation:lift .35s var(--ease) both}

  /* the thread while it is being played */
  html.js .thread.is-playing .msg{transition:none;opacity:0;transform:translateX(-16px)}
  html.js .thread.is-playing .msg.out{transform:translateX(16px)}
  html.js .thread.is-playing .msg.sys{transform:none}
  html.js .thread.is-playing .msg.is-in{opacity:1;transform:none;transition:opacity .45s var(--ease), transform .45s var(--ease)}
  html.js .thread.is-playing .msg.typing-row{opacity:1;transform:none}
}

/* the sheen across a primary button, pointer devices only */
.btn-solid{position:relative;overflow:hidden}
.btn-solid::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:34%;
  background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:skewX(-16deg);opacity:0;pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .btn-solid:hover::after{opacity:1;transform:translateX(420%) skewX(-16deg);transition:transform .65s var(--ease), opacity .2s var(--ease)}
}

/* the navigation once the hero has gone */
.nav{transition:background .4s var(--ease), border-color .4s var(--ease)}
.nav.is-scrolled{background:rgba(10,10,10,.86);border-color:var(--hair2)}
.nav-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}

/* ---------- hero ---------- */
.hero{padding-top:calc(clamp(8rem,14vw,11rem) + var(--safe-top));padding-bottom:0;min-height:100dvh;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(2rem,5vw,5rem);align-items:center;width:var(--shell)}
/* the scrubbed layers paint above what follows, so nothing after them is
   promoted to keep the order (see stitch/web/layers.js) */
.hero-copy{padding-bottom:clamp(3rem,6vw,5rem);position:relative;z-index:1}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}
/* the phone crosses the shell's right edge and overhangs the seam below */
.hero-demo{position:relative;z-index:2;justify-self:end;display:grid;justify-items:end;gap:1rem;width:min(100%,460px);margin-right:-2rem;margin-bottom:-4.5rem}
.demo-cap{width:min(100%,440px);font-size:.9rem;line-height:1.5;color:var(--faint)}
.demo-cap strong{color:var(--ink);font-weight:600}

/* ---------- the phone. Outer shell, inner core, concentric radii. ---------- */
.device{
  border-radius:2.9rem;padding:.55rem;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid var(--hair2);
  box-shadow:var(--shadow-pop), 0 0 0 1px rgba(0,0,0,.6) inset;
  width:min(100%,440px);
}
.device-core{
  position:relative;border-radius:calc(2.9rem - .55rem);
  background:var(--hl-bg);color:var(--hl-ink);
  overflow:hidden;aspect-ratio:9 / 18.2;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35);
}
.device-island{position:absolute;top:.7rem;left:50%;transform:translateX(-50%);width:5.6rem;height:1.5rem;border-radius:999px;background:#0b0b0a;z-index:3}

/* the sample site, phone width. Volt is invisible on the sample's cream, so
   focus inside either sample is drawn in the sample's own ink. */
.hl :focus-visible,.hld :focus-visible{outline-color:var(--hl-ink)}
.hl{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--body);color:var(--hl-ink);line-height:1.45}
.hl-bar{display:flex;align-items:center;justify-content:space-between;padding:3rem 1rem .7rem;border-bottom:1px solid var(--hl-line);flex:none}
.hl-logo{font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1;letter-spacing:.01em;display:flex;flex-direction:column;gap:.15rem}
.hl-logo em{font-style:normal;font-weight:400;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hl-dim)}
.hl-call{
  min-height:44px;min-width:44px;padding:0 1rem;border-radius:999px;border:none;
  background:var(--hl-ink);color:var(--hl-bg);font-weight:600;font-size:.8rem;
  transition:transform .16s var(--spring), background .4s var(--ease);
}
.hl-call:hover{background:#2a2a26}
.hl-call:active{transform:scale(.97)}
.hl-views{position:relative;flex:1;min-height:0;overflow:hidden}
.hl-view{position:absolute;inset:0;overflow:auto;padding-bottom:1rem;
  opacity:0;transform:translateX(calc(24px * var(--dir,1)));transition:opacity .45s var(--ease), transform .45s var(--ease);pointer-events:none}
.hl-view.is-on{opacity:1;transform:none;pointer-events:auto}
.hl-view[hidden]{display:none}
.hl-hero{overflow:hidden}
.hl-hero img{width:100%;aspect-ratio:4 / 3;object-fit:cover;background:var(--hl-line);transform-origin:50% 40%}
.hl-body{padding:.9rem 1rem 0}
.hl-rating{display:flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:500;color:var(--hl-dim)}
.hl-stars{display:inline-flex;gap:1px;color:var(--hl-brand)}
.hl-stars svg{width:.8rem;height:.8rem;fill:currentColor}
.hl-h{font-size:1.45rem;line-height:1.08;letter-spacing:-.015em;margin-top:.55rem}
.hl-p{font-size:.84rem;color:var(--hl-dim);margin-top:.5rem}
.hl-book{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:.9rem;
  border-radius:999px;border:none;background:var(--hl-brand);color:var(--hl-brand-ink);
  font-weight:600;font-size:.9rem;position:relative;
  transition:transform .16s var(--spring), background .4s var(--ease);
}
.hl-book::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid var(--hl-brand);opacity:0;pointer-events:none}
.hl-book:hover{background:#1a5e42}
.hl-book:active{transform:scale(.98)}
.hl-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.4rem .6rem;margin-top:1rem;font-size:.78rem;color:var(--hl-dim)}
.hl-list li{padding:.45rem .6rem;border:1px solid var(--hl-line);border-radius:var(--r-sm)}
.hl-view[data-phone-view="book"],.hl-view[data-phone-view="done"]{padding:.9rem 1rem 1rem}
.hl-back{
  display:inline-flex;align-items:center;gap:.35rem;min-height:44px;min-width:44px;
  padding:.3rem .6rem;margin:-.3rem 0 0 -.6rem;
  background:none;border:none;color:var(--hl-dim);font-size:.78rem;font-weight:500;
}
.hl-back svg{fill:currentColor}
.hl-back:hover{color:var(--hl-ink)}
.hl-h2{font-size:1.3rem;line-height:1.1;letter-spacing:-.01em;margin-top:.3rem}
.hl-days{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.hl-days button,.hl-slots button{
  border:1px solid var(--hl-line);background:transparent;color:var(--hl-ink);border-radius:var(--r-sm);
  font-size:.78rem;font-weight:500;min-height:44px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .16s var(--spring);
}
.hl-days button{flex:1 1 30%;padding:.35rem .5rem;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.hl-days button small{font-size:.68rem;color:var(--hl-dim);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.hl-days button[aria-pressed="true"],.hl-slots button[aria-pressed="true"]{background:var(--hl-ink);color:var(--hl-bg);border-color:var(--hl-ink)}
.hl-days button[aria-pressed="true"] small{color:rgba(246,245,241,.7)}
.hl-days button:hover,.hl-slots button:hover{border-color:var(--hl-ink)}
.hl-days button:active,.hl-slots button:active{transform:scale(.97)}
.hl-slots{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.7rem}
.hl-slots button[disabled]{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.hl-slots button[disabled]:hover{border-color:var(--hl-line)}
.hl-slots .empty{grid-column:1 / -1;font-size:.78rem;color:var(--hl-dim);padding:.6rem 0}
.hl-confirm{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:.9rem;
  border-radius:999px;border:none;background:var(--hl-brand);color:var(--hl-brand-ink);font-weight:600;font-size:.9rem;
  transition:transform .16s var(--spring), opacity .3s var(--ease);
}
.hl-confirm[disabled]{opacity:.35;cursor:not-allowed}
.hl-confirm:not([disabled]):active{transform:scale(.98)}
.hl-tick{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;background:var(--hl-brand);color:var(--hl-brand-ink);margin-top:1.25rem}
.hl-tick svg{fill:currentColor}
.hl-big{font-size:1.15rem;line-height:1.2;margin-top:.5rem;letter-spacing:-.01em}
.hl-toast,.hld-toast{
  position:absolute;left:.8rem;right:.8rem;bottom:.8rem;z-index:4;
  background:var(--hl-ink);color:var(--hl-bg);font-size:.78rem;line-height:1.35;
  padding:.7rem .9rem;border-radius:var(--r-md);
  opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.hl-toast,.hld-toast{pointer-events:none}
.hl-toast.is-on,.hld-toast.is-on{opacity:1;transform:none}

/* ---------- website builds ---------- */
.web-grid{display:grid;grid-template-columns:minmax(0,30fr) minmax(0,70fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.notes{list-style:none;display:grid;gap:0;position:sticky;top:calc(6.5rem + var(--safe-top))}
.notes li{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.25rem 0;position:relative}
.notes li + li{border-top:1px solid var(--hair)}
.notes li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--accent);opacity:0;transition:opacity .5s var(--ease)}
.notes li:hover::after,.notes li:focus-within::after{opacity:.85}
.notes li:first-child::after{display:none}
.notes h3{font-size:1.1rem;margin-bottom:.35rem}
.notes p{font-size:.95rem;color:var(--quiet);line-height:1.55}
.n,.mk{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);
  font-family:var(--display);font-weight:600;font-size:.85rem;line-height:1;
}
.mk{width:22px;height:22px;font-size:.78rem;margin-right:.5rem;vertical-align:middle}

.browser{
  border-radius:var(--r-lg);padding:.45rem;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--hair2);box-shadow:var(--shadow-pop);
}
.browser-chrome{display:flex;align-items:center;justify-content:center;padding:.35rem .5rem .7rem}
.browser-chrome .url{font-size:.74rem;color:var(--faint);background:rgba(0,0,0,.35);border:1px solid var(--hair);border-radius:999px;padding:.28rem 1rem;letter-spacing:.01em}
.browser-core{border-radius:calc(var(--r-lg) - .45rem);background:var(--hl-bg);color:var(--hl-ink);overflow:hidden;box-shadow:inset 0 1px 1px rgba(255,255,255,.35)}

.hld{position:relative;font-family:var(--body);line-height:1.45;container-type:inline-size}
.hld-nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 1.5rem;border-bottom:1px solid var(--hl-line)}
.hld-logo{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.01em;white-space:nowrap}
.hld-call{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem 0 .5rem;border-radius:999px;border:none;background:var(--hl-ink);color:var(--hl-bg);font-weight:600;font-size:.82rem;white-space:nowrap;
  transition:transform .16s var(--spring), background .4s var(--ease)}
.hld-call:hover{background:#2a2a26}
.hld-call:active{transform:scale(.97)}
.hld-call-short{display:none}
.hld-hero{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:2rem;align-items:center;padding:2.2rem 1.5rem 1.8rem}
.hld-eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--hl-brand)}
.hld-h{font-size:clamp(1.6rem,4cqw,2.6rem);line-height:1.05;letter-spacing:-.02em;margin-top:.7rem}
.hld-p{font-size:.92rem;color:var(--hl-dim);margin-top:.8rem;max-width:36ch}
.hld-ctas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.hld-book{display:inline-flex;align-items:center;min-height:44px;padding:0 1.2rem 0 .6rem;border-radius:999px;border:none;background:var(--hl-brand);color:var(--hl-brand-ink);font-weight:600;font-size:.88rem;
  transition:transform .16s var(--spring), background .4s var(--ease)}
.hld-book:hover{background:#1a5e42}
.hld-book:active{transform:scale(.98)}
.hld-rating{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.8rem;font-weight:500;color:var(--hl-dim)}
.hld-pic{overflow:hidden;border-radius:var(--r-md);background:var(--hl-line)}
.hld-img{width:100%;aspect-ratio:4 / 3;object-fit:cover;transform-origin:50% 45%}
.hld-strip{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hl-line)}
.hld-strip li{padding:.9rem 1.5rem;font-size:.8rem;font-weight:500;color:var(--hl-dim);border-right:1px solid var(--hl-line)}
.hld-strip li:last-child{border-right:none}
/* the sample site answers to the width of its frame, not the viewport */
@container (max-width: 700px){
  .hld-hero{grid-template-columns:1fr;padding:1.4rem 1rem 1.2rem;gap:1.25rem}
  .hld-pic{order:-1}
  .hld-nav{padding:.8rem 1rem;gap:.75rem}
}
@container (max-width: 440px){
  .hld-logo{white-space:normal;line-height:1.05;font-size:.92rem;min-width:0}
  .hld-call-full{display:none}
  .hld-call-short{display:inline}
  .hld-strip{grid-template-columns:1fr 1fr}
  .hld-strip li:nth-child(2){border-right:none}
  .hld-strip li:nth-child(n+3){border-top:1px solid var(--hl-line)}
}

/* ---------- double bezel, the surface device on the dark ground ---------- */
.bez{border-radius:2rem;padding:.45rem;background:rgba(255,255,255,.028);border:1px solid var(--hair)}
.bez-core{border-radius:calc(2rem - .45rem);background:linear-gradient(160deg,var(--glass-deep),rgba(255,255,255,.012));box-shadow:inset 0 1px 1px rgba(255,255,255,.10);padding:clamp(1.25rem,3vw,2rem)}

/* ---------- booking ---------- */
.book-grid{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.bw-top{margin-bottom:1.5rem}
.bw-title{font-size:1.5rem;letter-spacing:-.01em;line-height:1.1}
.bw-sub{font-size:.9rem;color:var(--faint);margin-top:.35rem}
.bw-label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--faint);margin-bottom:.75rem;display:block}
.bw-jobs{border:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.bw-jobs legend{float:left;width:100%}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{
  display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:999px;
  border:1px solid var(--hair2);background:transparent;color:var(--dim);font-size:.9rem;font-weight:500;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip input:checked + span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.chip:hover span{border-color:var(--ink)}
.bw-block{margin-bottom:1.5rem}
.bw-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
.bw-days button,.bw-slots button{
  min-height:48px;border-radius:var(--r-sm);border:1px solid var(--hair);background:transparent;color:var(--ink);
  font-size:.9rem;font-weight:500;line-height:1.15;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .16s var(--spring);
}
.bw-days button small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--faint)}
.bw-days button:hover,.bw-slots button:hover{border-color:var(--hair2);background:var(--glass)}
.bw-days button:active,.bw-slots button:active{transform:scale(.97)}
.bw-days button[aria-pressed="true"],.bw-slots button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bw-days button[aria-pressed="true"] small{color:rgba(10,10,5,.62)}
.bw-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.bw-slots button[disabled]{opacity:.32;text-decoration:line-through;cursor:not-allowed}
.bw-slots button[disabled]:hover{border-color:var(--hair);background:transparent}
.bw-slots .empty{grid-column:1 / -1;font-size:.9rem;color:var(--faint);padding:.4rem 0}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--dim);margin-bottom:.5rem}
.field input,.field textarea{
  width:100%;min-height:48px;padding:.7rem .95rem;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.36);background:rgba(0,0,0,.28);color:var(--ink);font-size:1rem;line-height:1.4;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{resize:vertical;min-height:7rem}
.field input::placeholder,.field textarea::placeholder{color:rgba(244,244,242,.5)}
.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.45)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(0,0,0,.4)}
.field.is-bad input,.field.is-bad textarea{border-color:#f87171}
/* the error line always holds its space, so clearing an error never moves the
   button a visitor is about to press */
.err{display:block;min-height:1.25em;visibility:hidden;font-size:.8rem;line-height:1.25;color:#f87171;margin-top:.5rem}
.field.is-bad .err{visibility:visible}
.bw-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}
.bw-note{font-size:.82rem;color:var(--faint)}
.bw-done[hidden]{display:none}
.bw-done{padding-top:.5rem}
.bw-done-fig{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.015em;line-height:1.1;margin:.5rem 0 .75rem}
.bw-done .btn{margin-top:1.25rem}
.book.is-done .bw-jobs,.book.is-done .bw-block,.book.is-done .bw-actions{display:none}

.book-side{display:grid;gap:1.25rem;position:sticky;top:calc(6.5rem + var(--safe-top))}
.cal{border-radius:var(--r-md);overflow:hidden;background:rgba(0,0,0,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.10)}
.cal-day{padding:.75rem 1rem;font-size:1.05rem;border-bottom:1px solid var(--hair);color:var(--ink)}
.cal-rows{list-style:none}
.cal-rows li{display:grid;grid-template-columns:5.2rem 1fr;align-items:center;min-height:44px;border-top:1px solid var(--hair);font-size:.85rem}
.cal-rows li:first-child{border-top:none}
.cal-rows time{padding:0 1rem;color:var(--faint);font-variant-numeric:tabular-nums;font-size:.78rem;white-space:nowrap}
.cal-rows .ev{margin:.3rem .6rem .3rem 0;padding:.35rem .7rem;border-radius:var(--r-sm);font-weight:500;line-height:1.3}
.cal-rows .ev.free{color:var(--faint);font-weight:400}
.cal-rows .ev.busy{background:rgba(255,255,255,.07);color:var(--quiet)}
.cal-rows .ev.new{background:var(--accent);color:var(--accent-ink);font-weight:600}
.cal-rows .ev.new small{display:block;font-weight:500;font-size:.72rem;opacity:.75}
.sms{border-radius:var(--r-md);padding:1rem;background:rgba(0,0,0,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.10)}
.sms-label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--faint);margin-bottom:.75rem}
.sms-bubble{display:inline-block;background:rgba(255,255,255,.08);border-radius:var(--r-md) var(--r-md) var(--r-md) .25rem;padding:.7rem .95rem;font-size:.92rem;line-height:1.5;color:var(--dim);max-width:100%}
.sms-bubble.is-live{background:var(--accent-dim);color:var(--ink);border:1px solid rgba(232,255,71,.35)}
.remind{font-size:.88rem;color:var(--faint);padding-left:1rem;position:relative}
.remind::before{content:"";position:absolute;left:0;top:.45em;width:1px;height:.9em;background:var(--accent);opacity:.75}
.remind.is-live{color:var(--dim)}

/* ---------- automations, the thread ---------- */
.thread{max-width:44rem}
.msgs{list-style:none;display:grid;gap:1rem;position:relative;padding-left:1.5rem}
.msgs::before{content:"";position:absolute;left:3px;top:.7rem;bottom:.7rem;width:1px;background:var(--hair2);z-index:1}
.msg{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;align-items:start;position:relative}
.msg::before{content:"";position:absolute;left:-1.5rem;top:.72rem;width:7px;height:7px;border-radius:999px;background:var(--accent)}
.msg time{font-size:.8rem;color:var(--faint);letter-spacing:.02em;padding-top:.5rem;font-variant-numeric:tabular-nums;line-height:1.3}
.bubble{padding:.85rem 1.05rem;border-radius:var(--r-md);font-size:.95rem;line-height:1.55;max-width:34rem}
.who{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:.35rem}
.msg.in .bubble{background:rgba(255,255,255,.07);color:var(--dim);border-top-left-radius:.25rem}
.msg.in .who{color:var(--faint)}
.msg.out .bubble{background:var(--accent-dim);color:var(--ink);border:1px solid rgba(232,255,71,.28);border-top-left-radius:.25rem}
.msg.out .who{color:var(--accent)}
.msg.sys .bubble{background:transparent;border:1px dashed var(--hair2);color:var(--faint);font-size:.86rem}
.thread-foot [hidden]{display:none}
.typing{display:inline-flex;gap:.3rem;padding:.2rem 0}
.typing i{width:6px;height:6px;border-radius:999px;background:var(--accent);animation:pulse 1.6s var(--ease) infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
.thread-foot{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--hair)}
.thread-note{font-size:.82rem;color:var(--faint);max-width:44ch}

/* ---------- process, one track, the last stop carries the width ---------- */
.track{list-style:none;display:grid;grid-template-columns:minmax(0,20fr) minmax(0,20fr) minmax(0,20fr) minmax(0,40fr);gap:0;position:relative}
.track::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);z-index:1}
/* each step is painted on its own (contain), so the rule that draws
   along its top never costs the sections below a layer */
.track li{padding:2rem 2rem 0 0;position:relative;contain:paint}
.track li::before{content:"";position:absolute;left:0;top:0;height:3px;width:2.5rem;background:var(--accent);z-index:1}
.track li.is-big::before{width:100%}
.tn{display:block;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--faint);font-variant-numeric:tabular-nums}
.track h3{margin-top:1.5rem}
.track p{color:var(--quiet);margin-top:.5rem;max-width:30ch}
.track li.is-big p{max-width:44ch}
.tt{display:inline-block;margin-top:1rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--faint)}
.track li.is-big .tn{color:var(--accent)}
.track li.is-big .tt{color:var(--accent)}

/* ---------- lower ground ---------- */
.lower{background:var(--bg2);border-top:1px solid var(--hair)}

/* ---------- proof, one band ---------- */
.proof-h{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.25;letter-spacing:-.012em;max-width:36ch;margin-top:1.25rem}
.proof-row{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(2rem,4vw,4rem);align-items:end;margin-top:2.5rem}
.facts{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:flex-end;position:relative;z-index:1}
.facts dt{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--faint)}
.facts dd{font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;letter-spacing:-.02em;margin-top:.5rem;font-variant-numeric:tabular-nums;color:transparent;
  background:linear-gradient(180deg,var(--accent) 10%,var(--ink) 80%);-webkit-background-clip:text;background-clip:text}

/* ---------- price, the ladder ---------- */
.price{overflow:clip}
.ladder{list-style:none;display:grid;gap:0}
.rung{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:clamp(1.5rem,4vw,4rem);padding:clamp(2rem,4vw,3rem) 0;position:relative;border-top:1px solid var(--hair)}
.rung-2{margin-left:6%}
.rung-3{margin-left:12%}
.rung-fig{position:relative}
.fig{display:block;font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* the one figure that matters is lit the same way as the proof numerals */
.rung-1 .fig{font-size:clamp(3.4rem,8vw,6rem);color:transparent;background:linear-gradient(180deg,var(--accent) 10%,var(--ink) 80%);-webkit-background-clip:text;background-clip:text}
.rung-2 .fig,.rung-3 .fig{font-size:clamp(2.2rem,4.4vw,3.2rem);color:var(--dim)}
.fig-note{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--faint);margin-top:.75rem}
.rung h3{margin-bottom:.75rem}
.incl{list-style:none;display:grid;gap:.5rem;max-width:52ch}
.incl li{color:var(--quiet);font-size:1rem;line-height:1.55;padding-left:1.25rem;position:relative}
.incl li::before{content:"";position:absolute;left:2px;top:.42em;width:1px;height:.86em;background:var(--accent);opacity:.75}
.rung-note{margin-top:1.25rem;color:var(--dim);font-size:1rem;font-weight:500;max-width:52ch}
.rung .btn{margin-top:1.5rem}

/* ---------- questions ---------- */
.faq-list{max-width:52rem}
.faq-list details{border-top:1px solid var(--hair)}
.faq-list details:last-child{border-bottom:1px solid var(--hair)}
.faq-list summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:1.25rem 0;font-family:var(--display);font-weight:500;font-size:1.2rem;letter-spacing:-.005em;line-height:1.25;color:var(--ink);
  transition:color .4s var(--ease);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::marker{content:""}
.fq{width:26px;height:26px;padding:6px;border-radius:999px;border:1px solid var(--hair2);fill:var(--ink);flex:none;
  transition:transform .4s var(--ease), border-color .4s var(--ease), fill .4s var(--ease)}
.faq-list summary:hover{color:var(--accent)}
.faq-list details[open] .fq{transform:rotate(45deg);border-color:var(--accent);fill:var(--accent)}
.faq-a{padding:0 0 1.5rem;max-width:56ch}
.faq-a p{color:var(--quiet);line-height:1.6}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.contact h2{margin-bottom:1.25rem}
.contact-facts{margin-top:2.5rem;display:grid;gap:1rem}
.contact-facts dt{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--faint)}
.contact-facts dd{margin-top:.25rem;color:var(--dim);font-size:1rem}
.contact-facts a{display:inline-block;padding:.7rem 0;margin:-.7rem 0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair2);text-underline-offset:.22em;transition:text-decoration-color .4s var(--ease), color .4s var(--ease)}
.contact-facts a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.lead .field + .field{margin-top:1rem}
.when{margin-top:1.5rem;margin-bottom:0}
.when .bw-slots{margin-bottom:0}
.when .bw-days{margin-bottom:1.25rem}
.hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.lead-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.form-status{font-size:.9rem;color:var(--dim);max-width:34ch;line-height:1.45}
.form-status a{color:var(--ink)}
.form-status.is-bad{color:#f87171}
.form-status.is-good{color:var(--accent)}
.lead.is-sent .field,.lead.is-sent .when,.lead.is-sent [data-lead-submit]{display:none}
.lead.is-sent .form-status{font-size:1.05rem;max-width:40ch}

/* ---------- footer ---------- */
.foot{padding:2.5rem 0 calc(3.5rem + var(--safe-bottom));position:relative}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair)}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.foot-row p{font-size:.82rem;color:var(--faint)}
.foot-row p a{display:inline-block;padding:.75rem 0;margin:-.75rem 0;color:var(--dim);text-decoration:none}
.foot-row p a:hover{color:var(--accent)}
.foot-row .mark span{font-size:.85rem}
.foot-row .mark{min-height:44px;margin-right:0}
.foot-note{width:100%;max-width:60ch}

/* ---------- sticky call to action, phones only ---------- */
.stick{display:none}

/* ---------- the not found page ---------- */
.nf{min-height:100dvh;padding-top:0}
.nf-eyebrow{margin-top:3rem}

/* ============================================================
   MOTION, reduced
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .sv,html.js .wi,html.js .mk,html.js .rung .fig,html.js .track .tn,html.js .facts dd,html.js .lead .field,html.js .lead .when,html.js .lead .lead-actions{opacity:1;transform:none;transition:none;animation:none}
  html.js .msg::before{opacity:1;transform:none;transition:none}
  html.js .thread.is-playing .msg{opacity:1;transform:none;transition:none}
  html.js .hero-copy,html.js .hero-demo,html.js .facts,html.js .track::before,html.js .track li.is-big::before,html.js .lower::before,html.js .msgs::before,html.js .hl-hero img,html.js .hld-img,html.js .hl-book::after,html.js .device{animation:none}
  .bw-slots button,.hl-slots button,.hl-days button,.bw-days button,.cal-rows.is-fresh li,.sms-bubble.is-live,.remind.is-live,.bw-done:not([hidden]),.lead.is-sent .form-status,.hl-view.is-on .hl-tick{animation:none}
  .btn{--mx:0px;--my:0px}
  /* the hero is simply present: same selectors as the sequence, so they win */
  html.js:not(.hero-done) .hero-copy > *,html.js:not(.hero-done) .demo-cap,html.js:not(.hero-done) .hero-copy h1.is-split .wl .wi,
  html.js:not(.hero-done) .hl-view[data-phone-view="home"] .hl-rating,html.js:not(.hero-done) .hl-view[data-phone-view="home"] .hl-h,
  html.js:not(.hero-done) .hl-view[data-phone-view="home"] .hl-p,html.js:not(.hero-done) .hl-view[data-phone-view="home"] .hl-book,
  html.js:not(.hero-done) .hl-view[data-phone-view="home"] .hl-list{opacity:1;transform:none;animation:none}
  html.js.is-live:not(.hero-done) .hero-copy .eyebrow,html.js.is-live:not(.hero-done) .hero-copy h1.is-split .wl .wi,html.js.is-live:not(.hero-done) .hero-copy .sub,
  html.js.is-live:not(.hero-done) .hero-copy .cta-row,html.js.is-live:not(.hero-done) .demo-cap{animation:none}
  .btn-solid::after{display:none}
  .faq-list details[open] .faq-a{animation:none}
  .btn,.btn .pip,.notes li::after,.nav-links a,.hl-view,.menu,.menu-links a,.burger span,.hl-toast,.hld-toast,.fq,.stick{transition:none}
  .menu.is-open .menu-links a{transition-delay:0ms}
  .btn.is-busy .pip,.typing i{animation:none}
  .menu-links a{opacity:1;transform:none}
  .stick{transform:none;opacity:0;visibility:hidden}
  .stick.is-on{opacity:1;visibility:visible}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .web-grid{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
  .rung-2{margin-left:3%}
  .rung-3{margin-left:6%}
  .hero-demo{margin-right:0}
}

@media (max-width:900px){
  .nav{width:calc(100% - (2 * var(--gutter)));height:58px;padding:0 .45rem 0 1rem;top:calc(12px + var(--safe-top))}
  .nav-links{display:none}
  .nav-cta{display:none}
  .burger{display:block}
  main > section,.lower > section{padding:4.5rem 0}
  .hero{min-height:0;padding-top:calc(6.5rem + var(--safe-top));display:block}
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero-copy{padding-bottom:0}
  h1{max-width:14ch}
  .hero-demo{justify-self:center;justify-items:center;width:100%;max-width:440px;margin-right:0;margin-bottom:0;--drift:-40px}
  .demo-cap{text-align:center;max-width:36ch}
  .device{width:min(100%,380px)}
  .web-grid{grid-template-columns:1fr}
  .notes{position:static;order:2}
  .browser{order:1}
  .book-grid{grid-template-columns:1fr}
  .book-side{position:static}
  html.js .sv-left,html.js .sv-right{transform:translateY(32px)}
  html.js .sv.is-in{transform:none}
  .msg{grid-template-columns:1fr;gap:.3rem}
  .msg time{padding-top:0}
  .track{grid-template-columns:1fr;gap:0}
  .track::before{display:none}
  .track li{padding:1.5rem 0}
  .track li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair)}
  .track li::before{width:2.5rem}
  .track li.is-big::before{width:6rem}
  .track h3{margin-top:1rem}
  .proof-row,.contact-grid{grid-template-columns:1fr;gap:2rem}
  .facts{justify-content:flex-start}
  .rung{grid-template-columns:1fr;gap:1.25rem}
  .rung-2,.rung-3{margin-left:0}
  .foot-row{flex-direction:column;align-items:flex-start;gap:.75rem}
  html{scroll-padding-bottom:calc(6rem + var(--safe-bottom))}
  .stick{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:.75rem var(--gutter) calc(.75rem + var(--safe-bottom));
    background:linear-gradient(180deg,rgba(5,5,5,0),rgba(5,5,5,.94) 45%);
    transform:translateY(110%);visibility:hidden;
    transition:transform .5s var(--ease), visibility 0s .5s;
  }
  .stick[hidden]{display:block}
  .stick.is-on{transform:none;visibility:visible;transition-delay:0s}
  .stick .btn{width:100%;justify-content:space-between}
}

@media (max-width:560px){
  .nav{height:56px;padding:0 .4rem 0 .85rem}
  .mark span{font-size:.8rem;letter-spacing:.12em}
  .mark svg{width:20px;height:20px}
  .sub-more{display:none}
  .bw-days{gap:.375rem}
  .bw-days button{min-height:52px;font-size:.82rem}
  .bw-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .when .bw-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bw-jobs .chip{flex:1 1 auto}
  .bw-jobs .chip span{width:100%;justify-content:center}
  .cal-rows li{grid-template-columns:5rem 1fr}
  .cal-rows time{padding:0 .7rem}
  .bez-core{padding:1.1rem}
  .cta-row .btn{width:100%;justify-content:space-between}
  /* the sample sits directly under the headline on a phone, so the link to it is noise */
  .cta-row .btn-ghost{display:none}
  .facts{gap:1.5rem}
}

@media (max-width:420px){
  .btn{font-size:.85rem}
  .device{width:100%}
  .hl-bar{padding-top:2.6rem}
  .hl-hero img{aspect-ratio:16 / 10}
}

@media (max-width:360px){
  .bw-days{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* after the phone block so it wins: under reduced motion the bar appears, it
   never travels */
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .stick{transition:none;transform:none;opacity:0;visibility:hidden}
  .stick.is-on{opacity:1;visibility:visible}
}

@media (min-width:901px){
  .hero-copy{padding-top:2rem}
  /* the sticky columns paint above what follows them, so the browser never lifts a section to keep the order */
  .notes,.book-side{z-index:1}
}

/* ---------- print ---------- */
@media print{
  :root{--ink:#111;--dim:#333;--quiet:#333;--faint:#555;--hair:#bbb;--hair2:#999}
  body{background:#fff;color:#111}
  .nav,.menu,.skip,.stick,.noscript,.btn,.thread-foot,.bw-actions,.when{display:none}
  .lower{background:#fff}
  .bez,.browser,.device{border-color:#bbb;box-shadow:none;background:none}
  .bez-core,.browser-core{background:none;box-shadow:none}
  .device-core{aspect-ratio:auto;min-height:32rem}
  h1,h2,h3,.fig,.tn,.facts dd{color:#111;background:none;-webkit-text-fill-color:#111}
  html.js .sv,html.js .wi,html.js .rung .fig,html.js .track .tn,html.js .facts dd,html.js .lead .field,html.js .lead .when,html.js .lead .lead-actions,html.js .hero-copy{opacity:1;transform:none;animation:none}
  main > section,.lower > section{padding:32px 0}
  .hero{min-height:0;padding-top:0}
  a{color:#111;text-decoration:none}
  .faq-list details{display:block}
  .faq-a{display:block}
}