/* Stacksmith — pacing pass (loads last, after remix.css).
   Apple's structure and pacing in Stacksmith's materials: one idea per
   screen, big type, wide rhythm, one reveal pattern, one dark moment per
   page, and the home hero: a clean display with the site being changed
   by asking. Tokens only. No new hues outside the device screen. */

:root { --sec-y: 140px; --hero-y: 128px; }
@media (max-width: 700px) { :root { --sec-y: 88px; --hero-y: 72px; } }

/* ---------- page cross-fade (View Transitions, native) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- one reveal pattern, everywhere, once ---------- */
.ss-reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); animation: none; transition: opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1), filter .95s cubic-bezier(.16,1,.3,1); }
.ss-reveal.is-in { opacity: 1; transform: none; filter: blur(0); }
.ss-reveal > * { transition: opacity .95s cubic-bezier(.16,1,.3,1) calc(var(--d, 0) * 70ms), transform .95s cubic-bezier(.16,1,.3,1) calc(var(--d, 0) * 70ms); }
.ss-reveal--visual { transform: scale(.97); transition-duration: .9s; transition-delay: 120ms; }
.ss-reveal--visual.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .ss-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- section openers: centred, one headline, one line ---------- */
.ss-opener { max-width: 860px !important; margin-left: auto; margin-right: auto; text-align: center; }
.ss-opener .ss-section-label { justify-content: center; }
.ss-opener .ss-section-label::before { display: none; }
.ss-opener h1, .ss-opener h2 { max-width: 16ch; margin-left: auto !important; margin-right: auto !important; text-wrap: balance; }
.ss-opener p { max-width: 58ch !important; margin-left: auto !important; margin-right: auto !important; }
.ss-opener + .ss-reveal, .ss-opener + div { margin-top: 64px; }

/* ---------- showcase: segmented control + snap-scrolling gallery ---------- */
.ss-tabs { display: inline-flex; width: max-content; max-width: 100%; margin: 56px auto 28px; padding: 5px; gap: 2px;
  background: var(--paper-sunken); border: 0; box-shadow: none; border-radius: 999px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ss-showwrap { text-align: center; }
.ss-tab { flex: none; font-size: 14px; padding: 10px 18px; color: var(--ink-700); }
.ss-tab[aria-selected="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 1px 3px rgba(26,25,21,.14), 0 4px 12px -6px rgba(26,25,21,.2); }
@media (max-width: 840px) { .ss-tabs { border-radius: 999px; width: 100%; justify-content: flex-start; } .ss-tab { font-size: 13px; padding: 9px 14px; } }

.ss-gallery { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; text-align: left;
  margin: 0 calc(50% - 50vw); padding: 6px 0 12px; scroll-padding: 0; }
.ss-gallery::-webkit-scrollbar { display: none; }
.ss-showpanel, .ss-showpanel[hidden] { display: block !important; flex: 0 0 100%; box-sizing: border-box; padding: 0 var(--gutter); scroll-snap-align: center; scroll-snap-stop: always; animation: none !important; }
.ss-showpanel > .ss-show { max-width: 1200px; margin: 0 auto; }
@media (max-width: 700px) { .ss-showpanel { padding: 0 var(--gutter-mobile); } }
.ss-show { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.ss-show__copy { max-width: 640px; margin: 0 auto; text-align: center; }
.ss-show__copy .ss-section-label { justify-content: center; }
.ss-show__copy .ss-section-label::before { display: none; }
.ss-show__copy h3 { font-size: clamp(30px, 3.4vw, 44px) !important; letter-spacing: -0.03em; }
.ss-show__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; max-width: 860px; margin: 28px auto 0; }
.ss-show__steps li { flex-direction: column; gap: 8px; }
.ss-show__outcome { max-width: 52ch; margin-left: auto !important; margin-right: auto !important; }
.ssx, .ssx--site { max-width: 1040px; width: 100%; margin: 0 auto; }
@media (max-width: 700px) { .ss-show__steps { grid-template-columns: 1fr; gap: 14px; } }

/* arrows flank the segmented control, Apple-style circles */
.ss-tabsrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 56px auto 28px; max-width: 100%; }
.ss-tabsrow .ss-tabs { margin: 0; min-width: 0; }
.ss-tabsrow .ss-paddle { flex: none; }
@media (max-width: 700px) { .ss-tabsrow { gap: 8px; } .ss-tabsrow .ss-paddle { width: 34px; height: 34px; } }
/* a card's scene animates when you arrive on it; other cards rest on their finished frame */
.ss-showpanel:not(.is-current) .ssx, .ss-showpanel:not(.is-current) .ssx * { animation: none !important; }
.ss-paddle { appearance: none; -webkit-appearance: none; width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--paper-sunken); color: var(--ink); display: inline-grid; place-items: center; transition: background .2s, opacity .2s, transform .2s; }
.ss-paddle:hover { background: var(--line-strong); }
.ss-paddle:active { transform: scale(.94); }
.ss-paddle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ss-paddle[disabled] { opacity: .35; cursor: default; }
.ss-paddle svg { width: 18px; height: 18px; }

/* ---------- dark moment: full-bleed ink, edge to edge ---------- */
.ss-dark { position: relative; overflow: hidden; }
.ss-dark + footer { border-top: 0 !important; }

/* ---------- header: client login ---------- */
.site-nav__login { margin-left: 8px; color: var(--ink-500) !important; }

/* ===================================================================
   HOME HERO — the display, the site, the ask
   =================================================================== */
.hx { padding: var(--hero-y) 0 0; text-align: center; overflow: hidden; }
.hx__copy { max-width: 1040px; }
.hx__h1 {
  font-family: var(--font-display); font-size: clamp(42px, 5.5vw, 80px); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: var(--weight-bold); color: var(--ink); margin: 0 auto; max-width: 19ch; text-wrap: balance; font-kerning: normal;
}
.hx__h1 em { font-style: normal; color: var(--forest); }
.hx__sub { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-500); max-width: 54ch; margin: 28px auto 0; }
.hx__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 36px 0 0; }
.hx__stage { position: relative; margin: 80px auto 0; padding: 0 24px 72px; max-width: 1240px; }
@media (max-width: 700px) { .hx__stage { margin-top: 44px; padding: 0 12px 40px; } .hx__actions { flex-direction: column; align-items: center; } }

/* the display: a front-on laptop screen, thin dark bezel, warm aluminium chin.
   Flat and exact like a product render — no perspective, no keyboard. */
.hx-mac { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; }
.hx-mac::after { content: ""; position: absolute; left: 5%; right: 5%; bottom: -26px; height: 48px; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, rgba(26,25,21,.30), rgba(26,25,21,.08) 55%, transparent 78%); filter: blur(8px); }
.hx-mac__lid { position: relative; z-index: 1; background: #0B0B0D; border-radius: clamp(10px, 1.8vw, 22px) clamp(10px, 1.8vw, 22px) 5px 5px; padding: 1.5% 1.5% 1.7%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05), 0 30px 60px -30px rgba(26,25,21,.55); }
.hx-mac__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 11.5%; height: 2.1%; background: #0B0B0D; border-radius: 0 0 9px 9px; z-index: 5; }
.hx-mac__notch::after { content: ""; position: absolute; left: 50%; top: 32%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1E1F24; box-shadow: inset 0 0 0 1px #2C2D33; }
.hx-mac__screen { position: relative; aspect-ratio: 16 / 10; background: var(--paper-raised); border-radius: 5px; overflow: hidden; }
.hx-mac__screen::after { content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none;
  box-shadow: inset 0 0 14px rgba(0,0,0,.35); background: linear-gradient(112deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 24%, transparent 42%); }
.hx-mac__base { position: relative; z-index: 2; height: clamp(9px, 1.4vw, 16px); margin: 0 -1.4%; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, var(--paper-sunken) 0%, var(--line-strong) 55%, var(--ink-300) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(26,25,21,.25); }
.hx-mac__base i { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 13%; height: 42%; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, var(--ink-300), var(--line-strong)); box-shadow: inset 0 -1px 0 rgba(255,255,255,.5); }

/* fixed-size canvas scaled to the glass (JS sets the scale) */
.hx-canvas { position: absolute; left: 0; top: 0; width: var(--cw, 960px); height: calc(var(--cw, 960px) / 1.6); transform-origin: top left; overflow: hidden; background: var(--paper); }

/* the Stacksmith site, in miniature, inside the glass */
.hxs { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: var(--font-sans); color: var(--ink); transition: opacity .45s ease; }
.hxs.is-fade { opacity: 0; }
.hxs__nav { display: flex; align-items: center; gap: 22px; height: 60px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(244,241,233,.9); }
.hxs__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
.hxs__logo svg { display: block; }
.hxs__links { display: inline-flex; gap: 20px; margin-left: auto; font-size: 13.5px; color: var(--ink-700); font-weight: 500; }
.hxs__call { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--on-ink); background: var(--forest); border-radius: 10px; padding: 9px 14px; white-space: nowrap; position: relative;
  opacity: 0; transform: scale(.94) translateY(4px); }
.hxs__call.is-in { animation: hxRise .3s cubic-bezier(.16,1,.3,1) forwards; }
.hxs__hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 60px 22px; gap: 12px; }
.hxs__h1 { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -.035em; line-height: 1.04; max-width: 16ch; text-wrap: balance; display: inline-grid; position: relative; padding: 4px 10px; border-radius: 10px; }
.hxs__h1 span { grid-area: 1 / 1; transition: opacity .22s ease; }
.hxs__h1 .new { opacity: 0; }
.hxs__h1.is-swap .old { opacity: 0; }
.hxs__h1.is-swap .new { opacity: 1; }
.hxs__h1 em { font-style: normal; color: var(--forest); }
.hxs__sub { font-size: 15.5px; line-height: 1.5; color: var(--ink-500); max-width: 46ch; }
.hxs__btns { display: inline-flex; gap: 10px; margin-top: 6px; }
.hxs__btn { font-size: 13.5px; font-weight: 600; border-radius: 10px; padding: 11px 18px; background: var(--forest); color: var(--on-ink); }
.hxs__btn--ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.hxs__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 34px 30px; }
.hxs__card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; text-align: left; }
.hxs__card b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.hxs__card span { font-size: 12.5px; line-height: 1.45; color: var(--ink-500); }
.hx-pulse::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--forest-300); opacity: 0; pointer-events: none; }
.hx-pulse.is-pulse::before { animation: hxPulse .7s ease-out forwards; }

/* the ask: a listening indicator and the words as they arrive */
.hx-ask { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 10; width: min(560px, 68%);
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 12px 18px; border-radius: 14px;
  background: rgba(26,25,21,.86); color: var(--on-ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.35; font-weight: 400;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(244,241,233,.12); box-shadow: inset 0 1px 0 rgba(244,241,233,.10), 0 30px 60px -26px rgba(0,0,0,.65);
  opacity: 0; transition: border-color .18s; }
.hx-ask.is-in { animation: hxFadeIn .5s ease forwards; }
.hx-ask.is-out { animation: hxFadeOut .5s ease forwards; }
.hx-ask.is-flash { border-color: var(--forest-300); }
.hx-ask__txt { display: inline; transition: opacity .24s, transform .24s; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hx-ask.is-lift .hx-ask__txt { opacity: 0; transform: translateY(-6px); }
.hx-ask__caret { display: inline-block; width: 1.5px; height: 1.05em; background: var(--on-ink); margin-left: 1px; vertical-align: -2px; animation: hxCaret 1.06s steps(1) infinite; }
.hx-ask.is-nocaret .hx-ask__caret { display: none; }
.hx-bars { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 28px; height: 24px; flex: none; }
.hx-bars i { display: block; width: 3px; height: 18px; border-radius: 2px; background: var(--mint-on-ink); transform: scaleY(.25); transform-origin: center; transition: transform .1s linear, background-color .3s; }
.hx-bars.is-idle i { animation: hxBreath 2.8s ease-in-out infinite; animation-delay: calc(var(--k) * .18s); }
.hx-bars.is-think i { background: var(--forest-300); }
.hx-done { position: absolute; top: 76px; right: 20px; z-index: 12; display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 10px;
  background: rgba(26,25,21,.86); color: var(--on-ink); font-size: 13px; font-weight: 600; border: 1px solid rgba(244,241,233,.12);
  opacity: 0; transform: translateY(-8px); transition: opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1); }
.hx-done.is-on { opacity: 1; transform: none; }
.hx-done__tick { width: 18px; height: 18px; border-radius: 999px; background: var(--forest); display: inline-grid; place-items: center; }
.hx-done__ts { font-family: var(--font-mono); font-size: 11px; color: var(--on-ink-muted); letter-spacing: .02em; }

@keyframes hxRise { to { opacity: 1; transform: none; } }
@keyframes hxPulse { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hxFadeIn { to { opacity: 1; } }
@keyframes hxFadeOut { to { opacity: 0; } }
@keyframes hxCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hxBreath { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(.42); } }

/* narrow canvas for phones: the miniature reflows, the ask stays legible */
.hx--m .hx-canvas { --cw: 600px; }
.hx--m .hxs__nav { height: 52px; padding: 0 22px; }
.hx--m .hxs__links { display: none; }
.hx--m .hxs__hero { padding: 18px 28px 14px; }
.hx--m .hxs__h1 { font-size: 34px; }
.hx--m .hxs__sub { font-size: 14px; max-width: 40ch; }
.hx--m .hxs__row { grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0 22px 20px; }
.hx--m .hxs__card { padding: 12px 13px; }
.hx--m .hxs__card span { display: none; }
.hx--m .hx-ask { width: 82%; font-size: 15px; bottom: 9%; }

/* reduced motion: land on the finished frame */
@media (prefers-reduced-motion: reduce) {
  .hx-ask, .hx-done { display: none !important; }
  .hxs__call { opacity: 1 !important; transform: none !important; }
  .hxs__h1 .old { opacity: 0 !important; } .hxs__h1 .new { opacity: 1 !important; }
}

/* full-bleed ink sections: drop the decorative network lines (they scale badly edge to edge) */
.ss-dark .ss-net-bg { display: none !important; }

/* phones: the header keeps logo + menu only; the drawer carries the call-to-action */
@media (max-width: 430px) { .site-header .cta-wrap { display: none !important; } }

/* eyebrow labels: Sora sentence case in forest (no uppercase mono on page chrome) */
.ss-section-label { font-family: var(--font-sans) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--forest) !important; }

/* transcription: each word wipes in left to right while it sharpens, overlapping the
   word before it, so the line reads as continuous dictation rather than blocks */
.hx-w { display: inline-block; opacity: 0; filter: blur(5px); transform: translateY(2px) scale(.985);
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 66%); mask-image: linear-gradient(90deg, #000 42%, transparent 66%);
  -webkit-mask-size: 280% 100%; mask-size: 280% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: hxWord .68s cubic-bezier(.22,.8,.2,1) forwards; }
@keyframes hxWord { 35% { opacity: 1; } to { opacity: 1; filter: blur(0); transform: none; -webkit-mask-position: 0 0; mask-position: 0 0; } }

/* services: group headers stack number over title, centred */
.ss-grouphead { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ss-grouphead > span { font-size: clamp(30px, 3vw, 44px) !important; line-height: 1 !important; }
.ss-grouphead h2 { max-width: 20ch; }

/* ===================================================================
   SERVICES — tiles that open into a sheet
   =================================================================== */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 290px; padding: 30px 30px 84px; cursor: pointer;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 24px;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .3s; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.tile:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.tile__ic { width: 56px; height: 56px; border-radius: 16px; background: var(--forest-tint); color: var(--forest); display: grid; place-items: center; }
.tile__ic svg { width: 26px; height: 26px; }
.tile__t { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: 8px 0 0; color: var(--ink); }
.tile__p { font-size: 16px; line-height: 1.55; color: var(--ink-500); margin: 0; }
.tile__more { position: absolute; right: 22px; bottom: 22px; width: 38px; height: 38px; border-radius: 999px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .25s; }
.tile__more svg { width: 18px; height: 18px; }
.tile:hover .tile__more { transform: rotate(90deg); background: var(--forest); }
@media (max-width: 960px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; gap: 14px; } .tile { min-height: 0; padding: 26px 24px 76px; } }

.ss-sheet { width: min(1040px, calc(100% - 32px)); max-height: min(88vh, 940px); margin: auto; border: 0; padding: 0; border-radius: 28px;
  background: var(--paper-raised); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(26,25,21,.55); overflow: auto; overscroll-behavior: contain; }
.ss-sheet::backdrop { background: rgba(26,25,21,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ss-sheet[open] { animation: sheetIn .45s cubic-bezier(.16,1,.3,1); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.ss-sheet__in { position: relative; padding: 56px 56px 52px; }
.ss-sheet__close { position: sticky; top: 0; float: right; margin: -36px -36px 0 0; z-index: 3; width: 42px; height: 42px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--paper-sunken); color: var(--ink); display: grid; place-items: center; transition: background .2s, transform .2s; }
.ss-sheet__close:hover { background: var(--line-strong); } .ss-sheet__close:active { transform: scale(.94); }
.ss-sheet__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ss-sheet__close svg { width: 18px; height: 18px; }
.ss-sheet__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 720px; margin-bottom: 36px; }
.ss-sheet__head > div { margin-bottom: 0 !important; }
.ss-sheet__head h3 { font-size: clamp(32px, 3.6vw, 52px) !important; letter-spacing: -0.03em !important; line-height: 1.04 !important; text-wrap: balance; }
.ss-sheet__head p { max-width: 52ch !important; font-size: 18px !important; line-height: 1.55 !important; margin: 0 !important; }
.ss-sheet__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 30px; border-top: 1px solid var(--line); }
.ss-sheet__demo { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); }
.ss-sheet__demolabel { font-size: 15px; font-weight: 600; color: var(--forest); }
.ss-sheet .ssdemo-panel { max-height: none !important; overflow: visible !important; }
@media (max-width: 760px) { .ss-sheet { border-radius: 20px; max-height: 92vh; } .ss-sheet__in { padding: 44px 22px 32px; } .ss-sheet__close { margin: -26px -6px 0 0; } .ss-sheet__cols { grid-template-columns: 1fr; gap: 22px; } }
html.ss-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ss-sheet[open] { animation: none; } .tile, .tile:hover { transform: none; } }

/* ===================================================================
   HOW WE WORK — the story fills the screen and advances with the scroll
   =================================================================== */
.ss-sheet .ssdemo-panel [style*="font-family:var(--font-mono)"] { font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; }

.story { position: relative; margin-top: 72px; height: min(86vh, 820px); min-height: 640px; overflow: hidden; background: var(--paper-raised); }
.story__dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the deck loses every bit of its old chrome: no card, no orbs, no grain, no sweep */
.story .hw-deck { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.story .hw-deck::before, .story .hw-deck::after, .story .hw-deck__stage::before, .story .hw-deck__stage::after { display: none; }
.story .hw-deck__stage { position: absolute; inset: 0; min-height: 0; box-shadow: none; }
.story .hwd-scene { padding: 56px 40px 150px; gap: 20px; }
/* builds run a little quicker than the old timer deck */
.story .hwd-el { transition-delay: calc(var(--d, 0s) * .85); }
/* scene type */
.hs-label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-500); }
.hs-label b { color: var(--forest); font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-line { font-family: var(--font-display); font-size: clamp(30px, 4.2vw, 58px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); margin: 0; max-width: 16ch; text-wrap: balance; }
.hs-line em { font-style: normal; color: var(--forest); }
.hs-note { font-size: 15px; color: var(--ink-500); }
.hs-note--live { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--forest-900); }
.hs-note--live i { width: 8px; height: 8px; border-radius: 999px; background: var(--forest); animation: ssPulse 2.2s infinite; }
/* app icons drawn inline */
.ai { display: block; width: 28px; height: 28px; flex: none; border-radius: 7px; }
.ai--gmail { border-radius: 0; }
/* clean white cards, hairline, one soft shadow */
.hs-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; text-align: left; box-shadow: 0 1px 2px rgba(26,25,21,.04), 0 24px 50px -30px rgba(26,25,21,.25); }
.hs-row { display: flex; gap: 18px; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-top: 8px; }
.hs-event { width: 340px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.hs-event__head { display: flex; align-items: center; gap: 12px; }
.hs-event__head .ai { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 2px 6px rgba(26,25,21,.18); }
.hs-event__head b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); } .hs-event__head span { font-size: 13px; color: var(--ink-500); }
.hs-event__body { display: flex; gap: 12px; align-items: stretch; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hs-event__bar { width: 3px; border-radius: 2px; background: var(--forest); flex: none; }
.hs-event__body b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); } .hs-event__body span { font-size: 12.5px; color: var(--ink-500); }
.hs-event__people { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-500); }
.hs-event__people > span:last-child { margin-left: 6px; }
.hs-av { width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 600; color: #fff; }
.hs-av--ink { background: var(--ink); } .hs-av--forest { background: var(--forest); margin-left: -8px; box-shadow: 0 0 0 2px #fff; }
.hs-notes { width: 300px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.hs-notes__k { font-size: 12px; font-weight: 600; color: var(--ink-400); }
.hs-notes b { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.hs-notes__line { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-700); padding: 7px 0; border-top: 1px solid var(--line); }
.hs-notes__line i { width: 8px; height: 8px; border-radius: 999px; background: var(--forest); flex: none; }
.hs-plan { width: min(460px, 100%); padding: 6px 0 4px; margin-top: 8px; }
.hs-plan__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 12px; border-bottom: 1px solid var(--line); }
.hs-plan__head b { font-size: 15px; font-weight: 600; color: var(--ink); } .hs-plan__head span { font-size: 12.5px; color: var(--ink-400); }
.hs-plan__row { display: grid; grid-template-columns: 28px 1fr 22px; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.hs-plan__row:last-child { border-bottom: 0; }
.hs-plan__row span { font-size: 15px; color: var(--ink-700); text-align: left; }
.hs-check { width: 22px; height: 22px; border-radius: 999px; background: var(--forest); color: #fff; display: grid; place-items: center; }
.hs-thread { width: min(420px, 100%); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hs-thread__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.hs-thread__head div { flex: 1; } .hs-thread__head b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); } .hs-thread__head span { font-size: 12px; color: var(--ink-400); }
.hs-thread__head em { font-style: normal; font-size: 12px; color: var(--ink-400); }
.hs-thread__meta { font-size: 11.5px; color: var(--ink-400); text-align: right; padding-right: 4px; }
.hs-bubble { max-width: 84%; font-size: 14px; line-height: 1.45; padding: 9px 13px; border-radius: 18px; }
.hs-bubble--out { align-self: flex-end; background: var(--forest); color: #fff; border-bottom-right-radius: 5px; }
.hs-bubble--in { align-self: flex-start; background: var(--paper-sunken); color: var(--ink); border-bottom-left-radius: 5px; }
.hs-bubble--typing { align-self: flex-end; display: inline-flex; gap: 4px; background: var(--paper-sunken); padding: 11px 13px; border-bottom-right-radius: 5px; }
.hs-bubble--typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-400); animation: ssTyping 1s infinite; }
.hs-bubble--typing i:nth-child(2) { animation-delay: .15s; } .hs-bubble--typing i:nth-child(3) { animation-delay: .3s; }
.hwd-scene.is-on .hs-bubble--typing { animation: hsTypingGone .01s linear calc(var(--d) * .85 + 1.2s) forwards; }
@keyframes hsTypingGone { to { opacity: 0; height: 0; padding: 0; margin: -8px 0 0; } }
.hs-flow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.hs-node { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 124px; }
.hs-node .ai { width: 62px; height: 62px; border-radius: 16px; box-shadow: 0 10px 24px -12px rgba(26,25,21,.45), 0 1px 2px rgba(26,25,21,.12); }
.hs-node .ai--gmail { width: 62px; height: 62px; border-radius: 16px; background: #fff; padding: 14px; box-sizing: border-box; }
.hs-node span { font-size: 14px; font-weight: 600; color: var(--ink-700); }
.hs-link { width: 44px; height: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; margin-bottom: 32px; }
.hs-link b { display: block; height: 100%; background: var(--forest); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.16,1,.3,1) calc(var(--d, 0s) * .85 + .15s); }
.hwd-scene.is-on .hs-link b { transform: scaleX(1); }
.hs-stack { display: flex; flex-direction: column; gap: 10px; width: min(440px, 100%); margin-top: 8px; }
.hs-notif { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; text-align: left; box-shadow: 0 1px 2px rgba(26,25,21,.04), 0 20px 40px -28px rgba(26,25,21,.3); }
.hs-notif .ai { width: 38px; height: 38px; border-radius: 10px; }
.hs-notif .ai--gmail { padding: 9px; box-sizing: border-box; background: #fff; }
.hs-notif b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); } .hs-notif div span { font-size: 13px; color: var(--ink-500); }
.hs-notif em { font-style: normal; font-size: 12px; color: var(--ink-400); align-self: flex-start; }
@media (min-width: 1100px) { .story .hs-row, .story .hs-plan, .story .hs-thread, .story .hs-flow, .story .hs-stack { zoom: 1.12; } }
/* HUD: chapter bars along the foot fill on the timer; tap one to jump */
.story__hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 var(--gutter) 34px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.story__chapters { display: flex; gap: 12px; width: min(920px, 100%); }
.story__ch { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; cursor: pointer; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--ink-400); text-align: left; font-family: inherit; transition: color .35s; }
.story__ch i { display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(26,25,21,.12); position: relative; overflow: hidden; }
.story__ch i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.story__ch b { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.story__ch span { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-top: -8px; }
.story__ch:hover { color: var(--ink-700); }
.story__ch.is-done { color: var(--ink-700); } .story__ch.is-done i::after { transform: scaleX(1); }
.story__ch.is-on { color: var(--ink); } .story__ch.is-on b { color: var(--forest); } .story__ch.is-on i::after { animation: chFill var(--dur, 5s) linear forwards; }
@keyframes chFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story__ch:focus-visible { outline: none; } .story__ch:focus-visible i { box-shadow: var(--shadow-focus); }
.story.is-paused .story__ch.is-on i::after { animation-play-state: paused; }
@media (max-width: 700px) {
  .story { margin-top: 48px; height: 78vh; min-height: 600px; }
  .story .hwd-scene { padding: 40px 18px 130px; gap: 14px; }
  .hs-line { font-size: clamp(28px, 8vw, 40px); }
  .hs-event, .hs-notes { width: 100%; padding: 14px 16px; }
  .hs-node { width: 70px; gap: 8px; } .hs-node .ai, .hs-node .ai--gmail { width: 46px; height: 46px; border-radius: 13px; padding: 10px; } .hs-node span { font-size: 11.5px; }
  .hs-link { width: 12px; margin-bottom: 26px; }
  .story__hud { padding: 0 var(--gutter-mobile) 26px; gap: 20px; }
  .story__chapters { gap: 6px; }
  .story__ch b { display: none; }
  .story__ch span { display: none; font-size: 14px; margin-top: -4px; white-space: nowrap; }
  .story__ch.is-on span { display: block; }
}
@media (prefers-reduced-motion: reduce) { .story__ch.is-on i::after { animation: none; transform: scaleX(1); } .hs-note--live i, .hs-bubble--typing i { animation: none; } }

/* ---------- a day with the system: tall cards in the "Get to know Mac" idiom ---------- */
.moments { margin-top: 56px; }
.moments__strip { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
  padding: 14px calc(50vw - 50%) 24px; scroll-padding: 0 calc(50vw - 50%); }
.moments__strip::-webkit-scrollbar { display: none; }
@media (min-width: 1248px) { .moments__strip { padding-left: calc(50vw - 600px + var(--gutter)); padding-right: calc(50vw - 600px + var(--gutter)); scroll-padding: 0 calc(50vw - 600px + var(--gutter)); } }
.moment { position: relative; flex: 0 0 405px; height: 740px; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 1px 2px rgba(26,25,21,.04);
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1); }
.moment:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -32px rgba(26,25,21,.35), 0 10px 20px -14px rgba(26,25,21,.14); }
.moment__top { padding: 30px 30px 0; }
.moment__head { display: flex; align-items: center; justify-content: space-between; }
.moment__head .ai { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 2px 8px rgba(26,25,21,.16); }
.moment__head .ai--gmail { padding: 10px; box-sizing: border-box; background: #fff; border: 1px solid var(--line); }
.moment__t { font-size: 15px; font-weight: 600; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.moment__eyebrow { display: block; font-size: 14px; font-weight: 600; color: var(--ink-500); margin-top: 24px; }
.moment__title { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; margin: 6px 0 0; color: var(--ink); text-wrap: balance; }
/* the phone: dark body, foot runs off the card */
.ph { margin: auto auto 0; width: 300px; height: 388px; flex: none; padding: 9px 9px 0; background: #0B0B0D; border-radius: 46px 46px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 -14px 44px -26px rgba(0,0,0,.55); position: relative; }
.ph::before { content: ""; position: absolute; left: -3px; top: 96px; width: 3px; height: 30px; border-radius: 2px 0 0 2px; background: #1c1c1f; box-shadow: 0 48px 0 #1c1c1f; }
.ph::after { content: ""; position: absolute; right: -3px; top: 130px; width: 3px; height: 48px; border-radius: 0 2px 2px 0; background: #1c1c1f; }
.ph__screen { position: relative; height: 100%; background: #fff; border-radius: 38px 38px 0 0; overflow: hidden; padding: 52px 12px 0; color: #1A1915; font-size: 12px; }
.ph-sb { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 10px 24px 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-sb__r { display: inline-flex; align-items: center; gap: 5px; }
.ph-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; } .ph-sig b { width: 3px; background: currentColor; border-radius: 1px; }
.ph-sig b:nth-child(1) { height: 4px; } .ph-sig b:nth-child(2) { height: 6px; } .ph-sig b:nth-child(3) { height: 8px; } .ph-sig b:nth-child(4) { height: 10px; }
.ph-wifi { display: inline-flex; }
.ph-bat { width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 4px; padding: 1.5px; opacity: .9; position: relative; }
.ph-bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 3.5px; background: currentColor; border-radius: 0 1px 1px 0; }
.ph-bat b { display: block; height: 100%; width: 78%; background: currentColor; border-radius: 1.5px; }
.ph-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 999px; background: #0B0B0D; }
/* lock screen: an iOS-style wallpaper */
.ph__screen--lock { color: #fff; background:
  radial-gradient(70% 55% at 18% 12%, #FFB340 0%, rgba(255,179,64,0) 60%),
  radial-gradient(60% 50% at 85% 20%, #FF5E7A 0%, rgba(255,94,122,0) 60%),
  radial-gradient(70% 60% at 75% 85%, #6E5BFF 0%, rgba(110,91,255,0) 62%),
  radial-gradient(60% 55% at 15% 80%, #2CC1FF 0%, rgba(44,193,255,0) 62%),
  linear-gradient(180deg, #B24BFF, #3A1E8F); }
.lk { display: flex; flex-direction: column; align-items: center; margin: 8px -4px 0; }
.lk__date { font-size: 13px; font-weight: 500; opacity: .95; }
.lk__time { font-family: var(--font-display); font-size: 64px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.lk__n { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; width: 100%; margin-top: 26px; padding: 11px 12px; border-radius: 20px; background: rgba(255,255,255,.72); color: #1A1915; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -16px rgba(0,0,0,.45); }
.lk__n .ai { width: 36px; height: 36px; border-radius: 9px; }
.lk__n div { min-width: 0; } .lk__n b { display: block; font-size: 12.5px; font-weight: 600; } .lk__n span { display: block; font-size: 11.5px; color: #3A3935; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lk__n .lk__n-t { font-weight: 600; color: #1A1915; }
.lk__n em { font-style: normal; font-size: 11px; color: #6b6a65; align-self: flex-start; }
/* Gmail inbox */
.gm { display: flex; flex-direction: column; gap: 6px; margin: 0 -2px; }
.gm__search { display: flex; align-items: center; gap: 8px; background: #F1F3F4; border-radius: 999px; padding: 9px 12px; font-size: 13px; color: #5f6368; }
.gm__search i { margin-left: auto; width: 24px; height: 24px; border-radius: 999px; background: #1A73E8; color: #fff; font-style: normal; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.gm__k { font-size: 11px; font-weight: 600; color: #5f6368; padding: 8px 6px 2px; }
.gm__row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 8px 6px; border-radius: 12px; }
.gm__row.is-unread { background: #F2F6FC; }
.gm__row i { width: 34px; height: 34px; border-radius: 999px; color: #fff; font-style: normal; font-size: 14px; font-weight: 600; display: grid; place-items: center; }
.gm__row div { min-width: 0; } .gm__row b { display: block; font-size: 12.5px; font-weight: 500; color: #3c4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm__row .gm__subj { font-size: 12px; } .gm__row span { display: block; font-size: 11.5px; color: #5f6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm__row.is-unread b { font-weight: 700; color: #202124; }
.gm__row em { font-style: normal; font-size: 11px; color: #5f6368; } .gm__row.is-unread em { color: #202124; font-weight: 600; }
/* Stacksmith app */
.ap { display: flex; flex-direction: column; gap: 8px; margin: 0 -2px; }
.ap__nav { display: flex; align-items: center; gap: 8px; color: #0A84FF; padding: 2px 2px 8px; }
.ap__nav b { flex: 1; text-align: center; font-size: 14px; font-weight: 600; color: #1A1915; } .ap__nav span { font-size: 11px; color: #8e8e93; }
.ap__row { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; background: #F2F2F7; border-radius: 12px; padding: 10px 12px; }
.ap__ok { width: 24px; height: 24px; border-radius: 999px; background: #34C759; color: #fff; display: grid; place-items: center; }
.ap__row b { display: block; font-size: 13px; font-weight: 600; } .ap__row span { font-size: 11.5px; color: #6e6e73; }
.ap__pass { margin-top: 4px; text-align: center; font-size: 13px; font-weight: 600; color: #fff; background: #1A1915; border-radius: 12px; padding: 11px; }
/* Messages */
.im { display: flex; flex-direction: column; gap: 6px; }
.im__head { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: -14px 0 6px; font-size: 11px; color: #1A1915; }
.im__head i { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(160deg, #A9A9AE, #7C7C82); color: #fff; font-style: normal; font-size: 16px; font-weight: 600; display: grid; place-items: center; }
.im__head b { font-weight: 500; display: inline-flex; align-items: center; gap: 2px; }
.im__meta { font-size: 10.5px; color: #8e8e93; text-align: center; }
.im__meta--r { text-align: right; padding-right: 4px; margin-top: -2px; }
.im__b { max-width: 86%; font-size: 13px; line-height: 1.4; padding: 8px 12px; border-radius: 18px; }
.im__b--out { align-self: flex-end; background: #34C759; color: #fff; border-bottom-right-radius: 5px; }
.im__b--in { align-self: flex-start; background: #E9E9EB; color: #1A1915; border-bottom-left-radius: 5px; }
.im__b.is-dim { opacity: .55; }
/* Google business + review */
.gr { display: flex; flex-direction: column; gap: 10px; margin: 0 -2px; }
.gr__biz b { display: block; font-size: 17px; font-weight: 600; color: #202124; letter-spacing: -0.01em; } .gr__biz span { font-size: 12px; color: #5f6368; }
.gr__stars { color: #FBBC04; font-style: normal; letter-spacing: 1px; font-size: 12px; }
.gr__stars--big { font-size: 15px; letter-spacing: 2px; }
.gr__tabs { display: flex; gap: 16px; font-size: 12.5px; color: #5f6368; border-bottom: 1px solid #E8EAED; }
.gr__tabs span { padding: 6px 0 8px; } .gr__tabs .is-on { color: #1A73E8; font-weight: 600; box-shadow: inset 0 -3px 0 #1A73E8; }
.gr__card { display: flex; flex-direction: column; gap: 5px; padding: 4px 0; }
.gr__who { display: flex; align-items: center; gap: 8px; }
.gr__who i { width: 30px; height: 30px; border-radius: 999px; background: #7C4DFF; color: #fff; font-style: normal; font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.gr__who b { display: block; font-size: 12.5px; color: #202124; } .gr__who span { font-size: 11px; color: #5f6368; }
.gr__when { font-size: 11px; color: #5f6368; margin-top: -4px; }
.gr__card p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #3c4043; }
/* the "+" and its sheet */
.moment__more { position: absolute; right: 18px; bottom: 18px; z-index: 3; width: 38px; height: 38px; border-radius: 999px; border: 0; cursor: pointer; background: var(--ink); color: var(--paper); display: grid; place-items: center;
  box-shadow: 0 6px 16px -8px rgba(26,25,21,.6); transition: transform .2s, background .2s; }
.moment__more:hover { transform: scale(1.06); background: var(--ink-700); } .moment__more:active { transform: scale(.96); }
.moment__more:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ss-sheet--moment { width: min(620px, calc(100% - 32px)); }
.ss-sheet--moment .ss-sheet__in { padding: 48px 48px 44px; }
.ss-sheet--moment .ss-sheet__k { font-size: 14px; font-weight: 600; color: var(--forest); }
.ss-sheet--moment h3 { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.03em; line-height: 1.08; margin: 12px 0 16px; color: var(--ink); text-wrap: balance; }
.ss-sheet--moment p { font-size: 17px; line-height: 1.6; color: var(--ink-500); margin: 0 0 18px; }
.ss-sheet--moment ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ss-sheet--moment li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--ink-700); line-height: 1.5; padding-top: 10px; border-top: 1px solid var(--line); }
.ss-sheet--moment li::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--forest); flex: none; margin-top: 7px; }
.moments__nav { display: flex; align-items: center; justify-content: flex-end; margin-top: 4px; }
.moments__paddles { display: inline-flex; gap: 10px; }
@media (max-width: 700px) { .moments__strip { gap: 14px; padding-left: 11vw; padding-right: 11vw; scroll-padding: 0; } .moment { flex-basis: 78vw; height: 660px; scroll-snap-align: center; } .moment__top { padding: 24px 24px 0; } .moment__title { font-size: 25px; } .ph { width: 268px; height: 340px; } .ss-sheet--moment .ss-sheet__in { padding: 44px 22px 32px; } }
@media (prefers-reduced-motion: reduce) { .moment, .moment:hover { transform: none; } }

/* ---------- three stages: big lifted cards, app-style icons ---------- */
.ss-showwrap--lift .ss-show { transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1); }
.ss-showwrap--lift .ss-show:hover { transform: translateY(-8px); box-shadow: 0 2px 6px -2px rgba(26,25,21,.06), 0 44px 80px -36px rgba(26,25,21,.32); }
.ssx--hw { min-height: 540px; display: grid; place-items: center; padding: 56px; border-radius: 28px; }
.hwv { width: 100%; max-width: 760px; }
.hwv--notes { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.hwv__card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.hwv__card b { font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.hwv__card--ink { background: var(--ink); color: var(--on-ink); border-color: transparent; box-shadow: 0 24px 40px -28px rgba(26,25,21,.6); }
.hwv__card--ink b { color: var(--on-ink); }
.hwv__eyebrow { font-size: 13px; font-weight: 600; color: var(--forest); }
.hwv__card--ink .hwv__eyebrow { color: var(--mint-on-ink); }
.hwv__sub { font-size: 14.5px; color: var(--on-ink-muted); }
.hwv__line { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--ink-700); padding: 11px 0; border-top: 1px solid var(--line); }
.hwv__line i { width: 9px; height: 9px; border-radius: 999px; background: var(--forest); flex: none; }
.hwv--flow { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; position: relative; padding-bottom: 52px; }
.hwv__node { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 128px; }
.hwv__node i { width: 76px; height: 76px; border-radius: 22px; color: #fff; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--ic-a, #4A4740), var(--ic-b, var(--ink))); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.1), 0 16px 28px -14px var(--ic-b, var(--ink)); }
.hwv__node i svg { width: 30px; height: 30px; }
.hwv__node--blue  { --ic-a: #5A8AD0; --ic-b: #3A6BB4; }
.hwv__node--mint  { --ic-a: #7FBF9B; --ic-b: #2C6E4B; }
.hwv__node--amber { --ic-a: #D99A3E; --ic-b: #B07A1E; }
.hwv__node--gold  { --ic-a: #D4B24A; --ic-b: #A97E14; }
.hwv__node span { font-size: 14px; font-weight: 600; color: var(--ink-700); text-align: center; }
.hwv__link { width: 44px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 34px; }
.hwv__link b { display: block; height: 100%; width: 100%; background: var(--forest); transform: scaleX(0); transform-origin: left; animation: hwvFill .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay: inherit; }
.hwv__stamp { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 15px; font-weight: 600; color: var(--forest); }
@keyframes hwvFill { to { transform: scaleX(1); } }
.hwv--feed { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.hwv__row { display: grid; grid-template-columns: 10px 1fr auto; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 15px 18px; }
.hwv__row i { width: 9px; height: 9px; border-radius: 999px; background: var(--forest); }
.hwv__row b { font-size: 15.5px; font-weight: 600; color: var(--ink); } .hwv__row span { font-size: 13.5px; color: var(--ink-400); }
.hwv__live { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--forest-900); justify-content: center; }
.hwv__live i { width: 8px; height: 8px; border-radius: 999px; background: var(--forest); animation: ssPulse 2.2s infinite; }
@media (max-width: 700px) { .ssx--hw { padding: 24px; min-height: 0; border-radius: 24px; } .hwv--notes { grid-template-columns: 1fr; } .hwv__node { width: 78px; gap: 10px; } .hwv__node i { width: 52px; height: 52px; border-radius: 15px; } .hwv__node i svg { width: 22px; height: 22px; } .hwv__node span { font-size: 12px; } .hwv__link { width: 14px; margin-bottom: 28px; } .hwv--flow { padding-bottom: 44px; } .hwv__row { grid-template-columns: 10px 1fr; row-gap: 2px; } .hwv__row span { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .ss-showwrap--lift .ss-show, .ss-showwrap--lift .ss-show:hover { transform: none; } }

/* ===================================================================
   PASS 8 — the same MacBook everywhere, the phone for the app scenes,
   the platform on a MacBook for the three stages
   =================================================================== */
/* a touch more MacBook: silver rim on the lid, deeper chin, cleaner base */
.hx-mac__lid { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, var(--paper)), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05), 0 30px 60px -30px rgba(26,25,21,.55); }
.hx-mac__base { height: clamp(10px, 1.5vw, 17px); margin: 0 -1.8%; border-radius: 0 0 14px 14px; }
/* the hero site: app icons on the cards */
.hxs__card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.hxs__card .ai { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(26,25,21,.16); }
.hxs__card .ai--gmail { padding: 7px; box-sizing: border-box; background: #fff; }
.hx--m .hxs__card .ai { width: 24px; height: 24px; margin-bottom: 4px; }
/* a MacBook inside a showcase / stage card */
.ssx--mac { padding: 36px 36px 0 !important; overflow: hidden; min-height: 0 !important; justify-content: flex-start; align-items: center; }
.ssx--mac .hx-mac { max-width: 820px; margin-bottom: -2px; }
.hx-mac--sm .hx-mac__lid { border-radius: 12px 12px 3px 3px; padding: 1.5% 1.5% 1.7%; }
.hx-mac--sm .hx-mac__notch { width: 12%; }
.hx-mac--sm .hx-mac__base { height: 12px; }
/* the site assembles on arrival (Websites card) */
.ssx--site .hxs__call { opacity: 1; transform: none; }
.ssx--site [data-i="1"] { animation-delay: .15s; }
.ssx--site [data-i="2"] { animation-delay: .5s; }
.ssx--site [data-i="3"] { animation-delay: .8s; }
.ssx--site [data-i="4"] { animation-delay: 1.05s; }
.ssx--site [data-i="5"] { animation-delay: 1.4s; }
.ssx--site .hxs__card:nth-child(2)[data-i="5"] { animation-delay: 1.55s; }
.ssx--site .hxs__card:nth-child(3)[data-i="5"] { animation-delay: 1.7s; }
.ssx--site [data-i="7"] { animation-name: hxRiseFrom; animation-delay: 2.3s; }
@keyframes hxRiseFrom { from { opacity: 0; transform: scale(.94) translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .ssx--mac { padding: 20px 14px 0 !important; } }

/* ---------- app scenes on the phone ---------- */
.ssx--ph { justify-content: flex-end !important; align-items: center; padding: 44px 24px 0 !important; min-height: 620px; overflow: hidden;
  background: linear-gradient(180deg, #F8F5EE 0%, #EDE8DD 100%) !important; }
.ssx--ph .ph { margin: 0 auto; width: 330px; height: 560px; border-radius: 50px 50px 0 0; }
.ssx--ph .ph__screen { border-radius: 41px 41px 0 0; padding-top: 56px; font-size: 13px; }
.ph__screen--ink { background: #111; color: #F4F1E9; }
.ph__screen--ink .ph-sb { color: #F4F1E9; }
/* an iOS notification banner dropping in at the top of the screen */
.ph-banner { position: absolute; top: 48px; left: 10px; right: 10px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 22px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 30px -14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.6); color: #1A1915; animation-name: phDrop !important; }
.ph-banner .ai { width: 38px; height: 38px; border-radius: 10px; }
.ph-banner div { min-width: 0; } .ph-banner b { display: block; font-size: 12.5px; font-weight: 600; } .ph-banner span { display: block; font-size: 11.5px; color: #3A3935; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-banner .ph-banner__t { font-weight: 600; color: #1A1915; }
.ph-banner em { font-style: normal; font-size: 11px; color: #6b6a65; align-self: flex-start; }
@keyframes phDrop { from { opacity: 0; transform: translateY(-30px) scale(.96); } to { opacity: 1; transform: none; } }
/* messages */
.ssx--ph .im__head { margin-top: -6px; }
.ssx--enq [data-i="1"] { animation-delay: .4s; } .ssx--enq [data-i="2"] { animation-delay: 1.5s; } .ssx--enq [data-i="3"] { animation-delay: 2.2s; } .ssx--enq [data-i="4"] { animation-delay: 3s; }
/* google reviews */
.gr__owner { margin-top: 6px; padding: 10px 12px; border-left: 3px solid #E8EAED; }
.gr__owner b { display: block; font-size: 12px; font-weight: 600; color: #202124; } .gr__owner span { font-size: 11px; color: #5f6368; } .gr__owner p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: #3c4043; }
.gr__stars--big .st { display: inline-block; font-style: normal; animation-name: ssxStar !important; }
.ssx--rev [data-i="1"] { animation-delay: .2s; } .ssx--rev [data-i="2"] { animation-delay: .7s; }
.ssx--rev .st:nth-child(1) { animation-delay: 1.2s; } .ssx--rev .st:nth-child(2) { animation-delay: 1.35s; } .ssx--rev .st:nth-child(3) { animation-delay: 1.5s; } .ssx--rev .st:nth-child(4) { animation-delay: 1.65s; } .ssx--rev .st:nth-child(5) { animation-delay: 1.8s; }
.ssx--rev [data-i="4"] { animation-delay: 2.8s; }
/* gmail message */
.gm__bar { display: flex; align-items: center; gap: 8px; color: #444746; padding: 0 2px 10px; } .gm__bar span { flex: 1; } .gm__bar i { display: block; width: 22px; height: 22px; } .gm__bar .ai { width: 22px; height: 18px; border-radius: 0; }
.gm__subject { display: block; font-size: 18px; font-weight: 500; color: #1f1f1f; letter-spacing: -0.01em; margin-bottom: 12px; line-height: 1.25; }
.gm__from { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; margin-bottom: 12px; }
.gm__from i { width: 36px; height: 36px; border-radius: 999px; color: #fff; font-style: normal; font-size: 15px; font-weight: 600; display: grid; place-items: center; }
.gm__from b { display: block; font-size: 13px; font-weight: 600; color: #1f1f1f; } .gm__from span { font-size: 11.5px; color: #5f6368; }
.gm__body { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: #1f1f1f; }
.gm__btn { display: inline-block; font-size: 13px; font-weight: 600; color: #fff; background: #B07A1E; border-radius: 10px; padding: 10px 16px; }
.ssx--rep [data-i="1"] { animation-delay: .2s; } .ssx--rep [data-i="2"] { animation-delay: .6s; } .ssx--rep [data-i="3"] { animation-delay: 1.1s; } .ssx--rep [data-i="4"] { animation-delay: 2.6s; }
/* safari + chat widget */
.sf { display: flex; flex-direction: column; height: 100%; margin: 0 -12px; }
.sf__bar { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 12px 10px; padding: 9px 12px; border-radius: 12px; background: #EDEDF0; font-size: 12.5px; color: #1A1915; }
.sf__lock { font-size: 10px; }
.sf__page { padding: 0 16px 10px; display: flex; flex-direction: column; gap: 8px; }
.sf__brand { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.sf__page i { display: block; height: 9px; border-radius: 5px; background: #ECEAE4; width: 80%; } .sf__page i.w2 { width: 55%; }
.cw { margin: 6px 12px 0; background: #fff; border: 1px solid #E5E3DC; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px -18px rgba(26,25,21,.35); display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; flex: 1; }
.cw__head { display: flex; align-items: center; gap: 8px; padding: 11px 2px 10px; border-bottom: 1px solid #ECEAE4; margin-bottom: 4px; }
.cw__head i { width: 8px; height: 8px; border-radius: 999px; background: #34C759; } .cw__head b { font-size: 12.5px; font-weight: 600; } .cw__head span { margin-left: auto; font-size: 11px; color: #8e8e93; }
.cw__b { max-width: 84%; font-size: 12.5px; line-height: 1.45; padding: 8px 12px; border-radius: 16px; animation-name: ssxPop !important; }
.cw__b--in { align-self: flex-end; background: #1A1915; color: #F4F1E9; border-bottom-right-radius: 5px; transform-origin: bottom right; }
.cw__b--out { align-self: flex-start; background: #F2F2F7; color: #1A1915; border-bottom-left-radius: 5px; transform-origin: bottom left; }
.cw__input { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #8e8e93; border: 1px solid #E5E3DC; border-radius: 999px; padding: 9px 12px; }
.cw__input i { width: 24px; height: 24px; border-radius: 999px; background: var(--forest); color: #fff; display: grid; place-items: center; }
.ssx--bot [data-i="1"] { animation-delay: .15s; } .ssx--bot [data-i="2"] { animation-delay: .8s; } .ssx--bot [data-i="3"] { animation-delay: 1.7s; } .ssx--bot [data-i="4"] { animation-delay: 2.6s; } .ssx--bot [data-i="5"] { animation-delay: 3.5s; }
/* the call screen */
.cl { display: flex; flex-direction: column; align-items: center; height: 100%; text-align: center; position: relative; }
.cl__top { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; }
.cl__av { width: 62px; height: 62px; border-radius: 999px; background: rgba(255,255,255,.1); display: grid; place-items: center; margin-bottom: 8px; } .cl__av .ai { width: 30px; height: 30px; border-radius: 8px; }
.cl__top b { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .cl__top span { font-size: 12px; color: rgba(244,241,233,.6); } .cl__top em { font-style: normal; font-size: 13px; color: rgba(244,241,233,.8); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cl__wave { display: flex; align-items: center; gap: 4px; height: 26px; flex: none; min-height: 26px; margin: 14px 0 10px; }
.cl__wave i { width: 4px; height: 24px; border-radius: 2px; background: #7FBF9B; transform: scaleY(.25); animation: clWave 1.1s ease-in-out infinite; }
.cl__wave i:nth-child(2n) { animation-delay: .15s; } .cl__wave i:nth-child(3n) { animation-delay: .3s; } .cl__wave i:nth-child(5n) { animation-delay: .45s; }
@keyframes clWave { 0%, 100% { transform: scaleY(.25); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
.cl__cap { margin: 0 8px 6px; font-size: 12.5px; line-height: 1.45; color: rgba(244,241,233,.7); }
.cl__cap--ai { color: #F4F1E9; }
.cl__logged { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; margin: 6px 4px 0; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); text-align: left; }
.cl__logged i { width: 24px; height: 24px; border-radius: 999px; background: #34C759; color: #fff; display: grid; place-items: center; }
.cl__logged b { display: block; font-size: 12.5px; font-weight: 600; } .cl__logged span { font-size: 11px; color: rgba(244,241,233,.6); }
.cl__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; margin-top: auto; padding-top: 18px; }
.cl__grid span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10.5px; color: rgba(244,241,233,.85); }
.cl__grid i { width: 56px; height: 56px; border-radius: 999px; background: rgba(255,255,255,.14); display: grid; place-items: center; color: #fff; }
.cl__end { width: 60px; height: 60px; border-radius: 999px; background: #FF3B30; display: grid; place-items: center; margin: 14px 0 -20px; }
.ssx--rec [data-i="2"] { animation-delay: .5s; } .ssx--rec [data-i="3"] { animation-delay: 1.2s; } .ssx--rec [data-i="4"] { animation-delay: 2.1s; } .ssx--rec [data-i="5"] { animation-delay: 3s; }
@media (max-width: 700px) { .ssx--ph { padding: 24px 12px 0 !important; min-height: 0; } .ssx--ph .ph { width: 290px; height: 500px; } }

/* ---------- three stages: the platform on a MacBook ---------- */
.ssx--hw.ssx--mac { display: flex; min-height: 0; padding: 40px 40px 0 !important; border-radius: 28px; }
.pf { position: absolute; inset: 0; display: grid; grid-template-columns: 200px 1fr; background: #FBFAF6; color: var(--ink); font-family: var(--font-sans); text-align: left; }
.pf__side { display: flex; flex-direction: column; gap: 4px; padding: 22px 16px; background: #F4F1E9; border-right: 1px solid var(--line); }
.pf__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; padding: 4px 10px 18px; }
.pf__nav { font-size: 13px; font-weight: 500; color: var(--ink-500); padding: 8px 10px; border-radius: 9px; }
.pf__nav.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(26,25,21,.06); }
.pf__client { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); padding: 6px 10px; }
.pf__client i { width: 22px; height: 22px; border-radius: 999px; background: var(--forest); color: #fff; font-style: normal; font-size: 11px; display: grid; place-items: center; }
.pf__main { padding: 26px 30px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pf__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf__head b { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.pf__pill { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--forest-900); background: var(--forest-tint); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.pf__pill--ink { color: var(--ink-700); background: var(--paper-sunken); }
.pf__k { font-size: 12px; font-weight: 600; color: var(--ink-400); }
.pf__cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.pf__doc { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.pf__item { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.pf__item.is-first { border-color: var(--forest-tint-2); background: var(--forest-tint); }
.pf__item .ai { width: 30px; height: 30px; border-radius: 8px; }
.pf__item b { display: block; font-size: 13.5px; font-weight: 600; } .pf__item span { font-size: 12px; color: var(--ink-500); }
.pf__item em { font-style: normal; font-size: 12px; color: var(--ink-400); }
.pf__badge { font-size: 11.5px; font-weight: 600; color: #fff !important; background: var(--forest); border-radius: 999px; padding: 4px 9px; }
.pf__notes { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.pf__notes p { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-700); padding: 6px 0; border-top: 1px solid var(--line); }
.pf__notes p:first-of-type { border-top: 0; }
.pf__notes p i { width: 7px; height: 7px; border-radius: 999px; background: var(--forest); flex: none; }
.pf__notes-out { display: block !important; font-size: 12.5px !important; color: var(--ink-500) !important; line-height: 1.45; }
.pf__canvas { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 20px;
  background-image: radial-gradient(rgba(26,25,21,.10) 1px, transparent 1px); background-size: 18px 18px; }
.pf__node { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; padding: 14px 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 24px -16px rgba(26,25,21,.35); text-align: center; }
.pf__node .ai { width: 40px; height: 40px; border-radius: 11px; } .pf__node .ai--gmail { padding: 10px; box-sizing: border-box; background: #fff; border: 1px solid var(--line); }
.pf__node b { font-size: 13px; font-weight: 600; } .pf__node span { font-size: 11px; color: var(--ink-400); }
.pf__wire { width: 36px; height: 2px; background: var(--line-strong); overflow: hidden; flex: none; }
.pf__wire b { display: block; height: 100%; background: var(--forest); transform: scaleX(0); transform-origin: left; animation: hwvFill .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay: inherit; }
.pf__toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-700); }
.pf__toggle i { width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .3s; }
.pf__toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s; }
.pf__toggle[data-i] { animation-name: pfToggle !important; animation-duration: .01s !important; animation-fill-mode: both !important; }
@keyframes pfToggle { from { --on: 0; } to { --on: 1; } }
.ss-showpanel.is-current .pf__toggle i { animation: pfToggleBg .3s 3.4s forwards; } .ss-showpanel.is-current .pf__toggle i::after { animation: pfToggleKnob .3s 3.4s forwards; }
.ss-showpanel:not(.is-current) .pf__toggle i { background: #34C759; } .ss-showpanel:not(.is-current) .pf__toggle i::after { transform: translateX(16px); }
@keyframes pfToggleBg { to { background: #34C759; } } @keyframes pfToggleKnob { to { transform: translateX(16px); } }
.pf__foot { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-400); }
.pf__live { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--forest-900); }
.pf__live i { width: 8px; height: 8px; border-radius: 999px; background: var(--forest); animation: ssPulse 2.2s infinite; }
.pf__feed { display: flex; flex-direction: column; gap: 8px; }
.pf__row { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; }
.pf__row .ai { width: 32px; height: 32px; border-radius: 9px; } .pf__row .ai--gmail { padding: 8px; box-sizing: border-box; background: #fff; border: 1px solid var(--line); }
.pf__row b { display: block; font-size: 13.5px; font-weight: 600; } .pf__row div span { font-size: 12px; color: var(--ink-500); }
.pf__t { font-size: 12px; color: var(--ink-400); min-width: 44px; text-align: right; }
.ssx--hw [data-i="1"] { animation-delay: .1s; } .ssx--hw [data-i="2"] { animation-delay: .35s; } .ssx--hw [data-i="3"] { animation-delay: .7s; } .ssx--hw [data-i="4"] { animation-delay: 1.05s; } .ssx--hw [data-i="5"] { animation-delay: 1.4s; }
.ssx--hw [data-i="6"] { animation-delay: 1.75s; } .ssx--hw [data-i="7"] { animation-delay: 2.1s; } .ssx--hw [data-i="8"] { animation-delay: 2.45s; } .ssx--hw [data-i="9"] { animation-delay: 2.8s; } .ssx--hw [data-i="10"] { animation-delay: 3.3s; }
@media (max-width: 700px) { .ssx--hw.ssx--mac { padding: 18px 10px 0 !important; } }

/* ===================================================================
   PASS 9 — the platform is the product
   =================================================================== */
/* hero actions: one pill, one text link with a chevron (Apple's pairing) */
.hx-btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 30px; border-radius: 999px; background: var(--forest); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s; box-shadow: 0 1px 2px rgba(26,25,21,.12); }
.hx-btn:hover { background: var(--forest-700); color: #fff; box-shadow: 0 10px 24px -14px rgba(44,110,75,.7); transform: translateY(-1px); }
.hx-btn:active { transform: translateY(0) scale(.98); }
.hx-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hx-link { display: inline-flex; align-items: center; gap: 4px; padding: 16px 8px; font-size: 17px; font-weight: 600; color: var(--forest); text-decoration: none; letter-spacing: -0.01em; }
.hx-link svg { transition: transform .2s; } .hx-link:hover svg { transform: translateX(3px); } .hx-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hx__actions { gap: 22px; align-items: center; }
/* the hero screen: the site sits inside the platform, sidebar on the left */
.hxs--pf { display: grid; grid-template-columns: 172px 1fr; }
.hxs--pf .hxs__site { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.hxs--pf .hxs__nav { padding: 0 26px; }
.hxs--pf .hxs__hero { padding: 22px 40px 18px; }
.hxs--pf .hxs__h1 { font-size: 40px; }
.hxs--pf .hxs__row { padding: 0 26px 24px; gap: 12px; }
.hxs--pf .hxs__card { padding: 13px 14px 14px; } .hxs--pf .hxs__card span { font-size: 12px; }
.hxs__side { order: -1; display: flex; flex-direction: column; gap: 3px; padding: 18px 12px 16px; background: #F4F1E9; border-right: 1px solid var(--line); font-family: var(--font-sans); }
.hxs__pflogo { display: block; padding: 2px 10px 16px; color: var(--ink); }
.hxs__pfnav { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--ink-500); padding: 8px 10px; border-radius: 9px; }
.hxs__pfnav i { display: inline-flex; color: var(--ink-400); }
.hxs__pfnav.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(26,25,21,.06); } .hxs__pfnav.is-on i { color: var(--forest); }
.hxs__octo { margin-top: auto; display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.hxs__octo .octo { width: 36px; height: 36px; grid-row: 1 / 3; }
.hxs__octo b { font-size: 13px; font-weight: 600; color: var(--ink); } .hxs__octo span { font-size: 11px; color: var(--ink-400); }
.hxs__pub { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--forest-900); padding: 10px 10px 0; }
.hxs__pub i { width: 7px; height: 7px; border-radius: 999px; background: var(--forest); animation: ssPulse 2.2s infinite; }
.hx--m .hxs--pf { grid-template-columns: 1fr; } .hx--m .hxs__side { display: none; }
.hx--m .hxs--pf .hxs__hero { padding: 18px 28px 14px; } .hx--m .hxs--pf .hxs__h1 { font-size: 34px; } .hx--m .hxs--pf .hxs__row { padding: 0 22px 20px; gap: 10px; }
.octo { display: block; width: 32px; height: 32px; flex: none; }

/* ---------- platform screens on the MacBook ---------- */
.ssx--pf .pf { grid-template-columns: 176px 1fr; }
.ssx--pf .pf__main { padding: 22px 26px; gap: 14px; }
/* Build: chat on the left, the site appearing on the right */
.pb { flex: 1; display: grid; grid-template-columns: 300px 1fr; gap: 16px; min-height: 0; }
.pb__chat { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.pb__msg { font-size: 13px; line-height: 1.45; padding: 9px 12px; border-radius: 14px; max-width: 92%; }
.pb__msg--me { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.pb__msg--ai { align-self: flex-start; display: grid; grid-template-columns: 26px 1fr; gap: 8px; background: var(--paper-sunken); color: var(--ink); border-bottom-left-radius: 4px; }
.pb__msg--ai .octo { width: 26px; height: 26px; }
.pb__typing { align-self: flex-start; display: inline-flex; gap: 4px; background: var(--paper-sunken); border-radius: 14px; padding: 10px 12px; margin-top: auto; }
.pb__typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-400); animation: ssTyping 1s infinite; } .pb__typing i:nth-child(2) { animation-delay: .15s; } .pb__typing i:nth-child(3) { animation-delay: .3s; }
.pb__preview { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
/* the client site in miniature */
.pv { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--paper); }
.pv__nav { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(244,241,233,.9); }
.pv__logo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink); } .pv__logo svg { height: 13px; width: 17px; }
.pv__links { display: inline-flex; gap: 8px; margin-left: auto; } .pv__links i { width: 26px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.pv__cta { font-size: 10.5px; font-weight: 600; color: #fff; background: var(--forest); border-radius: 7px; padding: 6px 10px; }
.pv__hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 14px 24px; }
.pv__hero b { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); max-width: 14ch; } .pv__hero b em { font-style: normal; color: var(--forest); }
.pv__hero > span { font-size: 11px; line-height: 1.45; color: var(--ink-500); max-width: 34ch; }
.pv__btn { font-style: normal; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--forest); border-radius: 7px; padding: 7px 12px; margin-top: 4px; }
.pv__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px 16px; } .pv__row i { display: block; height: 42px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
/* Octo: pages list + the assistant */
.po { flex: 1; display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.po__pages { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.po__page { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: var(--ink-700); padding: 9px 11px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); }
.po__page.is-new { border-color: var(--forest-tint-2); background: var(--forest-tint); color: var(--ink); font-weight: 600; } .po__page em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--forest); }
.po__chat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.po__head { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.po__head .octo { width: 34px; height: 34px; } .po__head b { display: block; font-size: 13.5px; font-weight: 600; } .po__head span { font-size: 11.5px; color: var(--ink-400); }
.po__step { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-size: 12.5px; font-weight: 500; color: var(--ink-700); padding: 7px 11px 7px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); }
.po__step i { width: 20px; height: 20px; border-radius: 999px; background: var(--forest); color: #fff; font-style: normal; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.po__input { margin-top: auto; font-size: 12.5px; color: var(--ink-400); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; }
/* Ask: the site with an ask bar over it */
.pk { flex: 1; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pk__site { position: absolute; inset: 0; }
.pk__h1 { display: inline-grid; } .pk__h1 span { grid-area: 1 / 1; } .pk__h1 .new { opacity: 0; }
@keyframes pkOut { to { opacity: 0; } } @keyframes pkIn { to { opacity: 1; } }
.pk__ask { position: absolute; left: 9%; right: 9%; bottom: 18px; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 14px; background: rgba(26,25,21,.88); color: var(--paper); font-size: 13.5px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); animation-name: phDrop !important; }
.pk__bars { display: inline-flex; align-items: center; gap: 3px; height: 20px; } .pk__bars i { width: 3px; height: 14px; border-radius: 2px; background: var(--mint-on-ink); animation: hxBreath 1.4s ease-in-out infinite; }
.pk__bars i:nth-child(2) { animation-delay: .15s; } .pk__bars i:nth-child(3) { animation-delay: .3s; } .pk__bars i:nth-child(4) { animation-delay: .45s; } .pk__bars i:nth-child(5) { animation-delay: .6s; }
.pk__done { position: absolute; top: 54px; right: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--paper); background: rgba(26,25,21,.88); border-radius: 10px; padding: 7px 11px; }
.pk__done i { width: 16px; height: 16px; border-radius: 999px; background: var(--forest); color: #fff; display: grid; place-items: center; } .pk__done i svg { width: 10px; height: 10px; }
/* Analytics */
.pan { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.pan__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pan__card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.pan__card span { font-size: 12px; font-weight: 600; color: var(--ink-400); } .pan__card b { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .pan__card em { font-style: normal; font-size: 11.5px; color: var(--ink-500); }
.pan__cols { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.pan__chart { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 10px; display: flex; flex-direction: column; }
.pan__bars { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; min-height: 90px; padding-top: 12px; }
.pan__bars i { display: block; height: calc(var(--h) * 100%); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--forest-300), var(--forest)); transform-origin: bottom; }
.ss-showpanel.is-current .pan__bars i { animation: panBar .7s cubic-bezier(.16,1,.3,1) both; }
.ss-showpanel.is-current .pan__bars i:nth-child(1) { animation-delay: 1.6s; } .ss-showpanel.is-current .pan__bars i:nth-child(2) { animation-delay: 1.7s; } .ss-showpanel.is-current .pan__bars i:nth-child(3) { animation-delay: 1.8s; } .ss-showpanel.is-current .pan__bars i:nth-child(4) { animation-delay: 1.9s; } .ss-showpanel.is-current .pan__bars i:nth-child(5) { animation-delay: 2s; } .ss-showpanel.is-current .pan__bars i:nth-child(6) { animation-delay: 2.1s; } .ss-showpanel.is-current .pan__bars i:nth-child(7) { animation-delay: 2.2s; }
@keyframes panBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.pan__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 6px; font-size: 10.5px; color: var(--ink-400); text-align: center; }
.pan__journeys { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.pan__j { display: flex; align-items: center; gap: 6px; font-size: 11.5px; } .pan__j b { font-weight: 600; color: var(--ink-700); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.pan__j i { flex: 1; height: 1.5px; background: var(--line-strong); min-width: 8px; }
.ssx--pf [data-i="1"] { animation-delay: .1s; } .ssx--pf [data-i="2"] { animation-delay: .4s; } .ssx--pf [data-i="3"] { animation-delay: 1s; } .ssx--pf [data-i="4"] { animation-delay: 1.6s; } .ssx--pf [data-i="5"] { animation-delay: 2s; }
.ssx--pf [data-i="6"] { animation-delay: 2.4s; } .ssx--pf [data-i="7"] { animation-delay: 2.8s; } .ssx--pf [data-i="8"] { animation-delay: 3.3s; } .ssx--pf [data-i="9"] { animation-delay: 3.8s; }
@media (max-width: 700px) { .hx__actions { gap: 8px; } .hx-btn { width: 100%; max-width: 320px; } }

/* ===================================================================
   PASS 10 — Octo is the face of the platform; richer build; real analytics
   =================================================================== */
/* Octo, drawn in SVG (apple.js injects the drawing into every [data-octo]) */
.octo { display: inline-block; width: 32px; height: 32px; flex: none; }
.octo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.octo--big { width: clamp(200px, 24vw, 300px); height: clamp(200px, 24vw, 300px); }
.octo--live .octo__body { animation: octoBob 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
.octo--live .octo__arm-l { animation: octoWave 2.8s ease-in-out infinite; transform-origin: 44px 122px; }
.octo--live .octo__arm-r { animation: octoSway 3.6s ease-in-out infinite; transform-origin: 156px 122px; }
.octo--live .octo__legs { animation: octoLegs 3.2s ease-in-out infinite; transform-origin: 100px 165px; }
.octo--live .octo__pupils { animation: octoBlink 4.6s ease-in-out infinite; transform-origin: 100px 84px; }
.octo.is-wave .octo__arm-l { animation: octoBigWave .9s ease-in-out 2; }
@keyframes octoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes octoWave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes octoBigWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-24deg); } 75% { transform: rotate(12deg); } }
@keyframes octoSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
@keyframes octoLegs { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(-3deg); } }
@keyframes octoBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) { .octo--live * { animation: none !important; } }

/* the hero: Octo sits at the foot of the laptop and offers a hand */
.hx__stage { position: relative; padding-bottom: 150px !important; }
.hx-octo { position: absolute; right: max(12px, calc(50% - 600px)); bottom: 10px; z-index: 12; display: flex; align-items: flex-end; gap: 12px; }
.hx-octo__char { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; cursor: pointer; width: 132px; height: 132px; border-radius: 999px; transition: transform .25s; }
.hx-octo__char:hover { transform: translateY(-4px) scale(1.03); } .hx-octo__char:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hx-octo__char .octo { width: 100%; height: 100%; filter: drop-shadow(0 18px 24px rgba(26,25,21,.28)); }
.hx-octo__bubble { position: absolute; right: 124px; bottom: 26px; width: min(320px, 70vw); padding: 16px 16px 14px; border-radius: 20px 20px 4px 20px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 50px -24px rgba(26,25,21,.4), 0 2px 6px rgba(26,25,21,.06); animation: octoPop .4s cubic-bezier(.16,1,.3,1); transform-origin: bottom right; }
.hx-octo__bubble[hidden] { display: none; }
@keyframes octoPop { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.hx-octo__txt { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); min-height: 1.5em; }
.hx-octo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hx-octo__chips button, .oc__chips button { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--forest-900); background: var(--forest-tint); border: 1px solid var(--forest-tint-2); border-radius: 999px; padding: 7px 12px; transition: background .2s, transform .2s; }
.hx-octo__chips button:hover, .oc__chips button:hover { background: var(--forest-tint-2); transform: translateY(-1px); }
.hx-octo__go { display: inline-flex; align-items: center; gap: 3px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--forest); text-decoration: none; }
.hx-octo__go[hidden] { display: none; } .hx-octo__go:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .hx__stage { padding-bottom: 120px !important; } .hx-octo { right: 8px; bottom: 6px; } .hx-octo__char { width: 92px; height: 92px; } .hx-octo__bubble { right: 84px; bottom: 10px; width: min(280px, calc(100vw - 116px)); } }

/* Build card: shared chat + progress chrome (the site itself is .bs, PASS 14) */
.pb--rich { grid-template-columns: 250px 1fr; }
.pb__input { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-400); border: 1px solid var(--line); border-radius: 999px; padding: 9px 8px 9px 13px; background: var(--paper); }
.pb__input i { width: 24px; height: 24px; border-radius: 999px; background: var(--forest); color: #fff; display: grid; place-items: center; }
.pb__msg--ai .octo { width: 26px; height: 26px; }
.pv__prog { position: absolute; top: 46px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--ink-700); background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px 5px 7px; box-shadow: 0 6px 16px -10px rgba(26,25,21,.4); }
.pv__prog i { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--forest-tint-2); border-top-color: var(--forest); animation: pvSpin .9s linear infinite; }
.pv__prog--done { color: var(--forest-900); } .pv__prog--done i { border: 0; background: var(--forest); color: #fff; display: grid; place-items: center; animation: none; } .pv__prog--done i svg { width: 9px; height: 9px; }
.ss-showpanel.is-current .pv__prog:not(.pv__prog--done) { animation-name: ssxIn, pvHide !important; animation-duration: .55s, .01s; animation-delay: 2.1s, 5.9s; animation-fill-mode: both, forwards; }
.ss-showpanel:not(.is-current) .pv__prog:not(.pv__prog--done) { display: none; }
@keyframes pvSpin { to { transform: rotate(360deg); } } @keyframes pvHide { to { opacity: 0; visibility: hidden; } }
@keyframes pvIn { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Meet Octo: the character, alive, next to a chat you can actually use */
.ssx--octo { display: grid !important; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center; min-height: 540px; padding: 40px 48px !important; }
.oc__char { position: relative; display: grid; place-items: center; }
.oc__char .octo { filter: drop-shadow(0 30px 30px rgba(26,25,21,.22)); }
.oc__shadow { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); width: 56%; height: 22px; border-radius: 999px; background: radial-gradient(50% 50% at 50% 50%, rgba(26,25,21,.22), transparent 70%); animation: ocShadow 3.2s ease-in-out infinite; }
@keyframes ocShadow { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; } 50% { transform: translateX(-50%) scaleX(.86); opacity: .7; } }
.oc { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 16px; min-height: 460px; box-shadow: 0 1px 2px rgba(26,25,21,.04), 0 24px 50px -30px rgba(26,25,21,.3); text-align: left; }
.oc__head { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.oc__head .octo { width: 36px; height: 36px; } .oc__head b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); } .oc__head span { font-size: 12.5px; color: var(--ink-400); }
.oc__log { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow: auto; max-height: 260px; scrollbar-width: thin; }
.oc__msg { max-width: 88%; font-size: 14px; line-height: 1.5; padding: 10px 14px; border-radius: 16px; animation: mmPop .35s cubic-bezier(.16,1,.3,1); }
.oc__msg--ai { align-self: flex-start; background: var(--paper-sunken); color: var(--ink); border-bottom-left-radius: 4px; }
.oc__msg--me { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.oc__msg--typing { display: inline-flex; gap: 4px; padding: 12px 14px; } .oc__msg--typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-400); animation: ssTyping 1s infinite; } .oc__msg--typing i:nth-child(2) { animation-delay: .15s; } .oc__msg--typing i:nth-child(3) { animation-delay: .3s; }
.oc__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oc__input { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 4px 4px 14px; background: var(--paper); }
.oc__input input { flex: 1; border: 0; background: none; font-family: inherit; font-size: 14px; color: var(--ink); outline: none; min-width: 0; }
.oc__input button { appearance: none; -webkit-appearance: none; width: 32px; height: 32px; border-radius: 999px; border: 0; background: var(--forest); color: #fff; display: grid; place-items: center; cursor: pointer; }
.oc__input button:hover { background: var(--forest-700); }
@media (max-width: 760px) { .ssx--octo { grid-template-columns: 1fr; gap: 12px; padding: 24px 16px !important; min-height: 0; } .octo--big { width: 170px; height: 170px; } .oc { min-height: 0; } .oc__log { max-height: 220px; } }

/* Analytics: the real dashboard, in miniature */
.an { position: absolute; inset: 0; display: grid; grid-template-columns: 196px 1fr; background: #f7f6f3; color: #17181c; font-family: var(--font-sans); text-align: left; }
.an__rail { background: #0f1424; color: #e8ebf3; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.an__site { display: block; font-size: 13px; font-weight: 600; padding: 4px 10px 14px; } .an__site em { display: block; font-style: normal; font-size: 10.5px; font-weight: 400; color: #8b93a8; margin-top: 2px; }
.an__k { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8b93a8; padding: 10px 10px 4px; }
.an__nav { padding: 6px 10px; border-radius: 8px; color: #8b93a8; } .an__nav.is-on { background: #1c3b7a; color: #fff; font-weight: 500; }
.an__live { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #8b93a8; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.06); border-radius: 999px; padding: 5px 10px; align-self: flex-start; }
.an__live i { width: 6px; height: 6px; border-radius: 999px; background: #0ca30c; animation: ssPulse 2.2s infinite; }
.an__main { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.an__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.an__head b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; } .an__head span { font-size: 11.5px; color: #6f7380; }
.an__range { font-size: 11.5px; color: #4b4f58; background: #fff; border: 1px solid #e7e5e0; border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.an__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.an__stat { position: relative; background: #fff; border: 1px solid rgba(23,24,28,.07); border-radius: 12px; padding: 12px 14px 10px; box-shadow: 0 1px 2px rgba(23,24,28,.04), 0 2px 8px rgba(23,24,28,.05); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.an__lbl { font-size: 11px; color: #6f7380; } .an__stat b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.an__delta { align-self: flex-start; font-size: 10px; font-weight: 500; color: #087a2c; background: rgba(8,122,44,.08); border-radius: 999px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.an__stat em { font-style: normal; font-size: 10.5px; color: #6f7380; }
.an__spark { position: absolute; right: 10px; bottom: 8px; width: 70px; height: 22px; opacity: .9; } .an__spark svg { width: 100%; height: 100%; }
.an__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
.an__panel { background: #fff; border: 1px solid rgba(23,24,28,.07); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(23,24,28,.04), 0 2px 8px rgba(23,24,28,.05); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.an__ph b { display: block; font-size: 13px; font-weight: 600; } .an__ph span { font-size: 10.5px; color: #6f7380; }
.an__chart { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 92px; padding: 6px 0 0; }
.an__chart i { display: block; height: calc(var(--h) * 100%); border-radius: 4px 4px 2px 2px; background: #2a78d6; opacity: .85; transform-origin: bottom; }
.ss-showpanel.is-current .an__chart i { animation: panBar .6s cubic-bezier(.16,1,.3,1) both 2.3s; }
.an__line { position: absolute; inset: 6px 0 0 0; width: 100%; height: calc(100% - 6px); }
.an__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; font-size: 9.5px; color: #6f7380; text-align: center; }
.an__ins { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.45; color: #4b4f58; } .an__ins i { flex: none; width: 8px; height: 8px; border-radius: 999px; background: #eda100; margin-top: 4px; } .an__ins b { font-weight: 600; color: #17181c; }
.an__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 11.5px; align-items: baseline; }
.an__row span { color: #17181c; } .an__row span em { font-style: normal; font-size: 10px; color: #6f7380; margin-left: 6px; } .an__row b { font-weight: 500; color: #4b4f58; font-variant-numeric: tabular-nums; }
.an__row i { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: #f5f4f0; position: relative; overflow: hidden; }
.an__row i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, #2a78d6 78%, #fff), #2a78d6); transform-origin: left; }
.ss-showpanel.is-current .an__row i::after { animation: hwvFill .7s cubic-bezier(.2,.7,.2,1) both 3s; }

.hx-octo__chips[hidden], .oc__chips[hidden] { display: none; }

/* ===================================================================
   PASS 11 — orange Octo, the gallery scrolls freely, colour on the moment cards
   =================================================================== */
/* a horizontal gallery must never trap the vertical wheel */
.ss-gallery { overflow-y: hidden; overscroll-behavior-y: auto; }
/* Octo: hop on click, eyes on a wrapper so they can follow the pointer */
.octo__look { transition: transform .12s linear; }
.octo.is-hop .octo__body { animation: octoHop .6s cubic-bezier(.3,1.4,.5,1) 1; }
@keyframes octoHop { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-18px) scale(.96, 1.06); } 60% { transform: translateY(0) scale(1.04, .94); } 100% { transform: translateY(0) scale(1, 1); } }
.octo--live { cursor: pointer; }
/* his greeting bubble on the Meet Octo stage */
.oc__char { position: relative; }
.oc__say { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: min(300px, 90%); padding: 12px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink); text-align: left;
  box-shadow: 0 20px 40px -24px rgba(26,25,21,.35), 0 2px 6px rgba(26,25,21,.05); animation: octoPop .4s cubic-bezier(.16,1,.3,1); z-index: 2; }
.oc__say[hidden] { display: none; }
.oc__say::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.oc__say span { min-height: 1.5em; display: block; }
.ssx--octo .oc__char { padding-top: 70px; }
@media (max-width: 760px) { .oc__say { position: relative; left: auto; top: auto; transform: none; width: 100%; margin-top: 10px; order: 1; } .oc__say::after { display: none; } .ssx--octo .oc__char { padding-top: 0; display: flex; flex-direction: column; align-items: center; } }
/* the explainer card with Octo peeking */
.ss-spot--octo { position: relative; }
.ss-spot--octo > .octo { position: absolute; top: -6px; right: 14px; width: 74px; height: 74px; }

/* moments: the current card is unmistakable; the others rest back */
.moments__strip { scroll-snap-type: x mandatory; }
.moment { transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1), opacity .45s; }
.moment:not(.is-on) { opacity: .62; transform: scale(.965); }
.moment:not(.is-on):hover { transform: scale(.975) translateY(-3px); opacity: .8; }
.moment.is-on { box-shadow: 0 30px 60px -32px rgba(26,25,21,.35), 0 10px 20px -14px rgba(26,25,21,.14); }
.moments__nav { justify-content: space-between; }
.moments__dots { display: inline-flex; gap: 7px; align-items: center; }
.moments__dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--line-strong); transition: background .3s, transform .3s, width .3s; }
.moments__dots i.is-on { background: var(--ink); width: 22px; }
/* colour on the cards: a wash of iOS-style light at the top, white below the fold */
.moment:nth-child(1) { background: radial-gradient(70% 50% at 12% 0%, rgba(255,179,64,.55), transparent 60%), radial-gradient(60% 45% at 92% 8%, rgba(255,94,122,.42), transparent 60%), linear-gradient(180deg, rgba(255,214,190,.5) 0%, #fff 58%); }
.moment:nth-child(2) { background: radial-gradient(70% 50% at 10% 0%, rgba(44,193,255,.45), transparent 60%), radial-gradient(60% 45% at 92% 10%, rgba(127,191,155,.55), transparent 60%), linear-gradient(180deg, rgba(200,236,224,.55) 0%, #fff 58%); }
.moment:nth-child(3) { background: radial-gradient(70% 50% at 14% 0%, rgba(93,247,119,.45), transparent 60%), radial-gradient(60% 45% at 90% 12%, rgba(255,214,10,.42), transparent 60%), linear-gradient(180deg, rgba(214,242,214,.55) 0%, #fff 58%); }
.moment:nth-child(4) { background: radial-gradient(70% 50% at 12% 0%, rgba(178,75,255,.42), transparent 60%), radial-gradient(60% 45% at 92% 10%, rgba(44,193,255,.45), transparent 60%), linear-gradient(180deg, rgba(226,214,255,.55) 0%, #fff 58%); }
.moment:nth-child(5) { background: radial-gradient(70% 50% at 12% 0%, rgba(255,159,10,.5), transparent 60%), radial-gradient(60% 45% at 92% 8%, rgba(255,94,122,.4), transparent 60%), linear-gradient(180deg, rgba(255,226,200,.55) 0%, #fff 58%); }
.moment:nth-child(6) { background: radial-gradient(70% 50% at 12% 0%, rgba(66,133,244,.42), transparent 60%), radial-gradient(60% 45% at 92% 10%, rgba(251,188,4,.45), transparent 60%), linear-gradient(180deg, rgba(214,228,255,.55) 0%, #fff 58%); }
@media (prefers-reduced-motion: reduce) { .moment:not(.is-on) { transform: none; } .octo.is-hop .octo__body { animation: none; } }

/* ===================================================================
   PASS 12 — live backgrounds, Octo on hover, strip reach, story blend
   =================================================================== */
/* Octo lifts and waves when the pointer is on him */
.octo--live { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.octo--live:hover { transform: translateY(-10px) rotate(-2deg); }
.octo--live:hover .octo__arm-l { animation: octoBigWave .9s ease-in-out infinite; }
.octo--live:hover .octo__arm-r { animation: octoBigWaveR .9s ease-in-out infinite; }
@keyframes octoBigWaveR { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(24deg); } 75% { transform: rotate(-12deg); } }
.hx-octo__char:hover .octo { transform: translateY(-6px) rotate(-2deg); }

/* the phone strip can reach its last cards: trailing room equal to a viewport minus one card */
.moments__strip::after { content: ""; flex: 0 0 calc(100% - 405px); }
@media (max-width: 700px) { .moments__strip::after { display: none; } }   /* phones centre each card: the side padding does the job */

/* the presentation blends into the page instead of sitting on a white slab */
.story::before, .story::after { content: ""; position: absolute; left: 0; right: 0; height: 140px; z-index: 1; pointer-events: none; }
.story .hwd-scene, .story__hud, .story__cue { position: absolute; z-index: 4; }
.story::before { top: 0; background: linear-gradient(180deg, var(--paper), transparent); }
.story::after { bottom: 0; background: linear-gradient(0deg, var(--paper), transparent); }
.story .story__hud { z-index: 4; }

/* the ground behind every device: white falling to paper, one soft brand glow behind the
   device, and a quiet highlight that follows the pointer. No grid, no drift. */
.ss-showpanel .ssx.ssx--live { position: relative; overflow: hidden; isolation: isolate; --mx: 50%; --my: 40%;
  background: linear-gradient(180deg, #ffffff 0%, #F8F6F1 100%) !important; }
.ss-showpanel .ssx.ssx--live::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 45% at 50% 62%, rgba(127,191,155,.32), transparent 70%), radial-gradient(40% 30% at 50% 100%, rgba(26,25,21,.06), transparent 70%); }
.ss-showpanel .ssx.ssx--live::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(320px 320px at var(--mx) var(--my), rgba(255,255,255,.7), transparent 70%); transition: opacity .3s; }
.ss-showpanel .ssx.ssx--live > * { position: relative; z-index: 1; }
/* devices gain a touch more presence on the live ground */
.ssx--live .hx-mac { filter: drop-shadow(0 30px 40px rgba(26,25,21,.22)); }
.ssx--live .ph { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 -14px 44px -26px rgba(0,0,0,.55), 0 30px 60px -30px rgba(26,25,21,.45); }

/* the richer Stacksmith site on the Websites card */
.hxs--rich .hxs__hero { padding: 24px 60px 16px; gap: 12px; position: relative; }
.hxs--rich .hxs__hero::before { content: ""; position: absolute; left: 50%; top: 20%; width: 520px; height: 220px; transform: translateX(-50%); border-radius: 999px; background: radial-gradient(50% 50% at 50% 50%, rgba(127,191,155,.35), transparent 70%); filter: blur(30px); z-index: -1; }
.hxs__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--forest-900); background: var(--forest-tint); border: 1px solid var(--forest-tint-2); border-radius: 999px; padding: 6px 12px; }
.hxs__eyebrow i { width: 7px; height: 7px; border-radius: 999px; background: var(--forest); animation: ssPulse 2.2s infinite; }
.hxs--rich .hxs__h1 { font-size: 42px; max-width: 18ch; }
.hxs--rich .hxs__h1 em { background: linear-gradient(90deg, var(--forest), #5E9B7C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hxs--rich .hxs__btn { border-radius: 999px; padding: 11px 20px; }
.hxs--rich .hxs__card { background: rgba(255,255,255,.85); border-color: rgba(26,25,21,.08); box-shadow: 0 10px 30px -22px rgba(26,25,21,.35); border-radius: 14px; }
.hxs__strip { display: flex; justify-content: space-between; align-items: center; padding: 12px 34px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-400); }
.hxs__strip span:first-child { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--forest-900); }
.hxs__strip i { width: 6px; height: 6px; border-radius: 999px; background: var(--forest); }
.hxs--rich .hxs__row { padding: 0 34px 18px; }

/* ===================================================================
   PASS 13 — the Stacksmith site on the Websites card, richer platform screens
   =================================================================== */
/* the site in miniature: a real page that scrolls up once it has built */
.sw { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; background: #fff; color: var(--ink); font-family: var(--font-sans); }
.ss-showpanel.is-current .sw { animation: swScroll 3s cubic-bezier(.2,.7,.2,1) 5.4s forwards; }
@keyframes swScroll { to { transform: translateY(-330px); } }
.sw__nav { display: flex; align-items: center; gap: 22px; height: 58px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.86); }
.sw__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.sw__links { display: inline-flex; gap: 20px; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-700); }
.sw__cta { font-size: 12.5px; font-weight: 600; color: var(--paper); background: var(--ink); border-radius: 999px; padding: 9px 16px; }
.sw__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 80px 26px; position: relative; }
.sw__hero::before { content: ""; position: absolute; left: 50%; top: 10%; width: 560px; height: 240px; transform: translateX(-50%); border-radius: 999px; background: radial-gradient(50% 50% at 50% 50%, rgba(127,191,155,.32), transparent 70%); filter: blur(34px); z-index: 0; }
.sw__hero > * { position: relative; z-index: 1; }
.sw__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--forest-900); background: var(--forest-tint); border: 1px solid var(--forest-tint-2); border-radius: 999px; padding: 6px 12px; }
.sw__eyebrow i { width: 7px; height: 7px; border-radius: 999px; background: var(--forest); animation: ssPulse 2.2s infinite; }
.sw__h1 { font-family: var(--font-display); font-size: 46px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; max-width: 16ch; text-wrap: balance; }
.sw__h1 em { font-style: normal; background: linear-gradient(90deg, var(--forest), #5E9B7C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sw__sub { font-size: 15.5px; line-height: 1.5; color: var(--ink-500); max-width: 52ch; }
.sw__btns { display: inline-flex; align-items: center; gap: 18px; margin-top: 4px; }
.sw__btn { font-style: normal; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--forest); border-radius: 999px; padding: 12px 22px; }
.sw__link { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--forest); }
.sw__window { margin: 6px 90px 0; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(26,25,21,.35), 0 2px 6px rgba(26,25,21,.06); overflow: hidden; }
.sw__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #F4F1E9; border-bottom: 1px solid var(--line); }
.sw__bar i { width: 9px; height: 9px; border-radius: 999px; background: #E5E1D6; } .sw__bar i:nth-child(1) { background: #FF5F57; } .sw__bar i:nth-child(2) { background: #FEBC2E; } .sw__bar i:nth-child(3) { background: #28C840; }
.sw__bar span { margin: 0 auto; font-size: 10.5px; color: var(--ink-400); background: #fff; border-radius: 6px; padding: 3px 34px; }
.sw__app { display: grid; grid-template-columns: 120px 1fr; min-height: 210px; }
.sw__app aside { display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; background: #F4F1E9; border-right: 1px solid var(--line); font-size: 11px; color: var(--ink-500); }
.sw__app aside span { padding: 6px 9px; border-radius: 7px; } .sw__app aside .is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(26,25,21,.06); }
.sw__main { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sw__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sw__kpis div { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 1px; }
.sw__kpis span { font-size: 10px; color: var(--ink-400); } .sw__kpis b { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; } .sw__kpis em { font-style: normal; font-size: 9.5px; font-weight: 600; color: #087a2c; }
.sw__chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 64px; }
.sw__chart i { display: block; height: calc(var(--h) * 100%); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--forest-300), var(--forest)); }
.sw__octo { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-700); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 6px; align-self: flex-start; }
.sw__octo .octo { width: 22px; height: 22px; }
.sw__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 34px 60px 26px; }
.sw__feat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; text-align: left; }
.sw__feat .ai { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 6px; box-shadow: 0 1px 3px rgba(26,25,21,.16); }
.sw__feat b { font-size: 14px; font-weight: 600; } .sw__feat span { font-size: 12px; line-height: 1.45; color: var(--ink-500); }
.sw__foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 34px 18px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-400); }
.sw__foot span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); font-size: 13px; }
.sw [data-i] { animation-name: pvIn !important; }
.ssx--site [data-i="5"] { animation-delay: 1.6s; } .ssx--site [data-i="6"] { animation-delay: 2.2s; } .ssx--site .sw__feat:nth-child(2)[data-i="6"] { animation-delay: 2.35s; } .ssx--site .sw__feat:nth-child(3)[data-i="6"] { animation-delay: 2.5s; } .ssx--site [data-i="7"] { animation-delay: 2.8s; }

/* phone extras */
.ph-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: #087a2c; background: rgba(8,122,44,.08); border-radius: 999px; padding: 5px 10px; }
.ph-chip svg { width: 11px; height: 11px; }
.cw__card { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; align-self: flex-start; max-width: 90%; background: #fff; border: 1px solid #E5E3DC; border-radius: 12px; padding: 9px 11px; }
.cw__card .ai { width: 30px; height: 30px; border-radius: 8px; } .cw__card b { display: block; font-size: 12px; font-weight: 600; } .cw__card span { font-size: 11px; color: #6e6e73; }
.ssx--enq [data-i="5"] { animation-delay: 3.8s; } .ssx--rev [data-i="5"] { animation-delay: 3.6s; } .ssx--rep [data-i="5"] { animation-delay: 3.4s; } .ssx--bot [data-i="6"] { animation-delay: 4.3s; }

/* richer platform screens */
.pf__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pf__meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--ink-700); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px 5px 6px; }
.pf__meta .ai { width: 18px; height: 18px; border-radius: 5px; }
.pf__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--forest); margin-left: 4px; } .pf__dot--amber { background: #eda100; }
.pf--map .pf__cols { grid-template-columns: 1.45fr 1fr; }
.pf__stack { display: flex; flex-direction: column; gap: 12px; }
.pf__timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.pf__timeline span { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-400); }
.pf__timeline i { display: block; height: 4px; border-radius: 2px; background: var(--line); } .pf__timeline .is-done i { background: var(--forest); } .pf__timeline .is-on i { background: linear-gradient(90deg, var(--forest) 55%, var(--line) 55%); } .pf__timeline .is-on, .pf__timeline .is-done { color: var(--ink); }
.pf__bar { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12px; align-items: baseline; margin-top: 4px; }
.pf__bar span { color: var(--ink-700); } .pf__bar b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pf__bar i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--paper-sunken); position: relative; overflow: hidden; }
.pf__bar i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--forest-300), var(--forest)); transform-origin: left; }
.ss-showpanel.is-current .pf__bar i::after { animation: hwvFill .7s cubic-bezier(.2,.7,.2,1) both 1.6s; }
.pf__build { flex: 1; display: grid; grid-template-columns: 150px 1fr 170px; gap: 12px; min-height: 0; }
.pf__palette, .pf__log { display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.pf__pal { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; color: var(--ink-700); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.pf__pal .ai { width: 18px; height: 18px; border-radius: 5px; } .pf__pal-ic { font-style: normal; width: 18px; text-align: center; font-size: 12px; }
.pf__palette .pf__k + .pf__k, .pf__palette .pf__pal + .pf__k { margin-top: 8px; }
.pf__canvas--rich { flex-direction: column; justify-content: center; gap: 18px; padding: 20px 14px; }
.pf__lane { display: flex; align-items: center; justify-content: center; gap: 0; }
.pf__lane--2 { opacity: .92; }
.pf__canvas--rich .pf__node { width: 122px; padding: 10px 8px; gap: 5px; } .pf__canvas--rich .pf__node .ai { width: 32px; height: 32px; border-radius: 9px; } .pf__canvas--rich .pf__node b { font-size: 11.5px; } .pf__canvas--rich .pf__node span { font-size: 10px; }
.pf__node--if { background: var(--paper); border-style: dashed; border-color: var(--line-strong); } .pf__node--if b { color: var(--ink-700); }
.pf__canvas--rich .pf__wire { width: 26px; }
.pf__log p { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: 11px; color: var(--ink-700); padding: 5px 0; border-top: 1px solid var(--line); }
.pf__log p:first-of-type { border-top: 0; } .pf__log em { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); }
.pf__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pf__kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.pf__kpi span { font-size: 11px; color: var(--ink-400); } .pf__kpi b { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .pf__kpi em { font-style: normal; font-size: 11px; color: var(--forest-900); font-weight: 600; }
.ssx--hw [data-i="10"] { animation-delay: 3.3s; }
/* Build canvas fits its three columns */
.pf__build { grid-template-columns: 136px minmax(0, 1fr) 156px; }
.pf__canvas--rich { min-width: 0; padding: 16px 10px; }
.pf__canvas--rich .pf__node { width: 96px; padding: 9px 6px; } .pf__canvas--rich .pf__node .ai { width: 28px; height: 28px; } .pf__canvas--rich .pf__node b { font-size: 10.5px; } .pf__canvas--rich .pf__node span { font-size: 9px; }
.pf__canvas--rich .pf__wire { width: 16px; }
.pf__palette { padding: 10px; } .pf__pal { font-size: 10.5px; padding: 5px 7px; }
.pf__build { grid-template-columns: 120px minmax(0, 1fr) 140px; gap: 10px; }
.pf__canvas--rich .pf__node { width: 92px; } .pf__canvas--rich .pf__wire { width: 14px; } .pf__lane { min-width: 0; }
.pf__log { padding: 10px; } .pf__log p { font-size: 10.5px; } .pf__log em { font-size: 9.5px; }

/* ===================================================================
   PASS 14 — Octo beside the laptop, the belt of businesses, the built site
   =================================================================== */
/* hero actions: the pill keeps white text under the pointer (tokens.css recolours every a:hover) */
.hx-btn, .hx-btn:hover, .hx-btn:focus-visible { color: #fff; }

/* hero: the laptop stays centred at full size. From 1400px Octo stands in the right gutter,
   feet at the laptop's base, and his bubble hangs beneath him (below the base line, never on
   the glass). Narrower screens keep him at the foot with the bubble to his left. */
@media (min-width: 1400px) {
  .hx__stage { padding-bottom: 224px !important; }
  .hx-octo { position: absolute; right: clamp(-150px, calc(640px - 50vw), -80px); bottom: 208px; flex-direction: column; align-items: flex-end; gap: 0; }
  .hx-octo__char { order: 1; }
  .hx-octo__bubble { order: 2; position: absolute; top: calc(100% + 12px); right: 0; bottom: auto; width: 300px; border-radius: 20px 4px 20px 20px; transform-origin: top right; }
  .hx-octo__bubble::after { content: ""; position: absolute; right: 24px; top: -8px; width: 15px; height: 15px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); border-radius: 3px 0 0 0; }
  @keyframes octoPop { from { opacity: 0; transform: translateY(-8px) scale(.94); } }
}
@media (max-width: 1399px) {
  .hx__stage { padding-bottom: 208px !important; }
  .hx-octo { bottom: 0; }
  .hx-octo__bubble { bottom: 0; }
}

/* ---------- Build card: the site is the canvas; the chat floats over its corner ---------- */
.pb--canvas { display: block; position: relative; }
.pb--canvas .pb__preview { position: absolute; inset: 0; border-radius: 14px; background: #fff; }
.pb--canvas .pb__chat { position: absolute; left: 12px; bottom: 12px; width: 236px; z-index: 6; gap: 8px; padding: 10px;
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(26,25,21,.1); border-radius: 18px;
  box-shadow: 0 24px 50px -28px rgba(26,25,21,.5), 0 2px 6px rgba(26,25,21,.06); }
.pb--canvas .pb__msg { font-size: 12px; line-height: 1.4; padding: 8px 11px; max-width: 100%; }
.pb--canvas .pb__msg--ai { background: rgba(244,241,233,.9); }
.pb--canvas .pb__input { margin-top: 0; background: #fff; font-size: 12px; padding: 7px 7px 7px 12px; }
.pb--canvas .pb__input i { width: 22px; height: 22px; }
.pb--canvas .pv__prog { top: auto; bottom: 14px; right: 14px; }
/* once the site is ready the two messages tuck away and the composer stays */
.ss-showpanel.is-current .pb--canvas .pb__msg { animation-name: pvIn, pbTuck !important; animation-duration: .5s, .45s; animation-fill-mode: both, forwards; animation-timing-function: cubic-bezier(.16,1,.3,1), ease; }
.ss-showpanel.is-current .pb--canvas .pb__msg--me { animation-delay: .3s, 7.6s; } .ss-showpanel.is-current .pb--canvas .pb__msg--ai { animation-delay: 1.1s, 7.7s; }
.ss-showpanel:not(.is-current) .pb--canvas .pb__msg { display: none; }
@keyframes pbTuck { to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; overflow: hidden; } }
.pb--canvas .pb__msg { max-height: 200px; }

/* the built site (Brennan Tiling): a real page at 732px, scrolls up once it is ready */
.bs { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; background: #fff; color: var(--ink); font-family: var(--font-sans); text-align: left; }
.ss-showpanel.is-current .pb--canvas .bs { animation: bsScroll 15s cubic-bezier(.45,.05,.4,.95) 8.2s forwards; }
/* the Ready chip steps aside once the page starts to scroll */
.ss-showpanel.is-current .pb--canvas .pv__prog--done { animation-name: ssxIn, pvHide !important; animation-duration: .55s, .4s; animation-delay: 6s, 10s; animation-fill-mode: both, forwards; }
.ss-showpanel:not(.is-current) .pb--canvas .pv__prog--done { opacity: 1; }
@keyframes bsScroll { to { transform: translateY(calc(-1 * var(--bs-h, 1000px))); } }
.bs [data-i] { animation-name: pvIn !important; }
.bs__nav { position: relative; z-index: 4; display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 24px; white-space: nowrap; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(26,25,21,.07); }
.bs__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
.bs__logo i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(160deg, #4A4740, var(--ink)); color: var(--paper); font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.bs__links { display: inline-flex; gap: 14px; margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--ink-700); flex: none; }
.bs__navr { display: inline-flex; align-items: center; gap: 8px; }
.bs__cta { flex: none; font-size: 11.5px; font-weight: 600; color: var(--paper); background: var(--ink); border-radius: 999px; padding: 8px 13px; }
.bs__cta--call { background: var(--forest); color: #fff; }
.bs__hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 44px 60px 0; }
.bs__hero::before { content: ""; position: absolute; left: 50%; top: 40px; width: 620px; height: 260px; transform: translateX(-50%); border-radius: 999px; background: radial-gradient(50% 50% at 50% 50%, rgba(127,191,155,.28), transparent 70%); filter: blur(36px); z-index: 0; pointer-events: none; }
.bs__hero > * { position: relative; z-index: 1; }
.bs__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--forest-900); background: var(--forest-tint); border: 1px solid var(--forest-tint-2); border-radius: 999px; padding: 5px 11px; }
.bs__eyebrow i { width: 6px; height: 6px; border-radius: 999px; background: var(--forest); }
.bs__h1 { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; max-width: 15ch; text-wrap: balance; }
.bs__h1 em { font-style: normal; background: linear-gradient(90deg, var(--forest), #5E9B7C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bs__sub { font-size: 14px; line-height: 1.5; color: var(--ink-500); max-width: 46ch; }
.bs__btns { display: inline-flex; align-items: center; gap: 10px; margin-top: 2px; }
.bs__btn { font-style: normal; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--forest); border-radius: 999px; padding: 11px 20px; box-shadow: 0 8px 18px -12px rgba(44,110,75,.9); }
.bs__btn--ghost { background: rgba(255,255,255,.7); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; }
.bs__trust { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.bs__trust svg { width: 14px; height: 14px; } .bs__trust b { color: var(--ink); font-weight: 600; } .bs__trust i { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-300); }
/* the hero shot: a finished bathroom wall in large-format stone, seen straight on */
.bs__shot { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin-top: 18px; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(26,25,21,.5), 0 2px 6px rgba(26,25,21,.08); background: #D9D2C3; }
.stone { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bs__shot::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, rgba(255,255,255,.28) 0%, transparent 38%, transparent 70%, rgba(26,25,21,.12) 100%), linear-gradient(180deg, transparent 55%, rgba(26,25,21,.22) 100%); pointer-events: none; }
.bs__tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 14px 30px -18px rgba(26,25,21,.5); font-size: 11px; color: var(--ink-700); text-align: left; }
.bs__tag b { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink); } .bs__tag span { display: block; font-size: 10.5px; color: var(--ink-500); }
.bs__tag--tl { left: 16px; top: 16px; } .bs__tag--br { right: 16px; bottom: 16px; font-weight: 500; }
.bs__tag svg { width: 16px; height: 16px; flex: none; }
.bs__stars { display: inline-flex; gap: 1px; color: #FBBC04; } .bs__stars svg { width: 10px; height: 10px; }
/* numbers */
.bs__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 38px 60px 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bs__nums div { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.bs__nums div + div { border-left: 1px solid var(--line); }
.bs__nums b { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; } .bs__nums b em { font-style: normal; color: #FBBC04; font-size: 22px; vertical-align: 4px; margin-left: 2px; }
.bs__nums span { font-size: 11.5px; color: var(--ink-500); }
/* sections */
.bs__sec { padding: 44px 60px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.bs__k { font-size: 12px; font-weight: 600; color: var(--forest); }
.bs__h2 { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.bs__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; margin-top: 18px; }
.bs__card { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; text-align: left; transition: transform .3s; }
.bs__img { display: block; aspect-ratio: 4 / 3; border-radius: 12px; margin-bottom: 8px; position: relative; overflow: hidden; background: #D9D2C3; }
.bs__card b { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0 4px; } .bs__card span { font-size: 11.5px; line-height: 1.45; color: var(--ink-500); padding: 0 4px; }
.bs__card em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--forest); padding: 4px 4px 2px; }
/* our work: one wide tile, two tall */
.bs__work { display: grid; grid-template-columns: 2.1fr 1fr 1fr; gap: 12px; width: 100%; margin-top: 18px; }
.bs__job { position: relative; aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden; background: #D9D2C3; box-shadow: 0 24px 40px -30px rgba(26,25,21,.5); }
.bs__job--wide { aspect-ratio: auto; }
.bs__job > span { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-align: left; }
.bs__job b { font-size: 11.5px; font-weight: 600; color: var(--ink); } .bs__job span span { font-size: 10px; color: var(--ink-500); }
/* reviews */
.bs__reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; margin-top: 18px; }
.bs__review { display: flex; flex-direction: column; gap: 6px; padding: 14px 15px; background: #fff; border: 1px solid var(--line); border-radius: 16px; text-align: left; }
.bs__review > svg { width: 16px; height: 16px; } .bs__review .bs__stars svg { width: 11px; height: 11px; }
.bs__review p { margin: 2px 0 4px; font-size: 11.5px; line-height: 1.5; color: var(--ink-700); } .bs__review b { font-size: 11.5px; font-weight: 600; } .bs__review > span { font-size: 10px; color: var(--ink-400); }
/* the ink section: how a job runs */
.bs__sec--ink { margin: 44px 28px 0; padding: 40px 40px 40px; background: var(--ink); color: var(--paper); border-radius: 22px; }
.bs__sec--ink .bs__k { color: var(--mint-on-ink, #7FBF9B); } .bs__sec--ink .bs__h2 { color: var(--paper); }
.bs__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; margin-top: 16px; }
.bs__steps div { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 14px 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; }
.bs__steps i { width: 24px; height: 24px; border-radius: 999px; background: var(--forest); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; margin-bottom: 2px; }
.bs__steps b { font-size: 13px; font-weight: 600; } .bs__steps span { font-size: 11px; line-height: 1.45; color: rgba(244,241,233,.66); }
/* quote */
.bs__quote { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; text-align: left; padding: 48px 60px 0; }
.bs__qcopy { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .bs__qcopy .bs__sub { max-width: 34ch; }
.bs__phone { font-size: 12px; color: var(--ink-500); margin-top: 6px; } .bs__phone b { color: var(--ink); font-weight: 600; }
.bs__form { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 50px -36px rgba(26,25,21,.4); }
.bs__field { font-size: 11.5px; color: var(--ink-400); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.bs__field--ta { min-height: 54px; }
.bs__form .bs__btn { text-align: center; margin-top: 2px; }
.bs__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 44px; padding: 16px 28px 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-400); }
/* the build: chat first, then the page assembles top to bottom, then the whole thing scrolls */
.ssx--pf .pb--canvas [data-i="3"] { animation-delay: 2.1s; } .ssx--pf .pb--canvas [data-i="4"] { animation-delay: 2.5s; } .ssx--pf .pb--canvas [data-i="5"] { animation-delay: 3s; }
.ssx--pf .pb--canvas [data-i="6"] { animation-delay: 3.5s; } .ssx--pf .pb--canvas [data-i="7"] { animation-delay: 3.9s; }
.ssx--pf .pb--canvas .bs__card:nth-child(2)[data-i="7"] { animation-delay: 4.05s; } .ssx--pf .pb--canvas .bs__card:nth-child(3)[data-i="7"] { animation-delay: 4.2s; }
.ssx--pf .pb--canvas [data-i="8"] { animation-delay: 4.5s; } .ssx--pf .pb--canvas .bs__job:nth-child(2)[data-i="8"] { animation-delay: 4.65s; } .ssx--pf .pb--canvas .bs__job:nth-child(3)[data-i="8"] { animation-delay: 4.8s; }
.ssx--pf .pb--canvas [data-i="9"] { animation-delay: 5s; } .ssx--pf .pb--canvas [data-i="10"] { animation-delay: 5.3s; } .ssx--pf .pb--canvas .bs__review:nth-child(2)[data-i="10"] { animation-delay: 5.45s; } .ssx--pf .pb--canvas .bs__review:nth-child(3)[data-i="10"] { animation-delay: 5.6s; }
.ssx--pf .pb--canvas [data-i="11"] { animation-delay: 5.7s; } .ssx--pf .pb--canvas [data-i="12"] { animation-delay: 5.9s; }
.ssx--pf .pb--canvas [data-i="13"] { animation-delay: 6s; } .ssx--pf .pb--canvas [data-i="14"] { animation-delay: 6.3s; }
/* Change by asking: the same site sits under the ask bar; the headline swaps and a second button rises into the nav */
.pk .bs { position: absolute; inset: 0; overflow: hidden; }
.pk .rt { min-height: 100%; }
.bs--ask .bs__hero { padding-top: 38px; }
.pk .pk__done { top: auto; bottom: 72px; right: 14px; }
.bs .bs .pk__h1 { display: inline-grid; justify-items: center; } .bs .pk__h1 span { grid-area: 1 / 1; }

/* ===================================================================
   PASS 15 — numerals in Sora, phone, FAQ, Octo unclipped, Stripe-style grounds
   =================================================================== */
/* step numbers and card labels: Sora, not mono (the mono numerals read as machine-made) */
.ss-show__steps li b { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0; color: var(--forest); font-variant-numeric: tabular-nums; padding-top: 0; }
.ss-num { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--forest); font-variant-numeric: tabular-nums; }
/* Octo on the third "Three things" card may rise above the card edge */
.ss-spot--octo { overflow: visible; }
.ss-spot--octo::before { border-radius: var(--radius-lg); }
.ss-spot--octo > .octo { z-index: 2; }

/* the galleries lose the white card. Each visual stands on a full-bleed ground in the Stripe
   idiom: a soft angled band of forest tint, mint and sand across paper, dissolving into the page
   at the top and bottom, one glow behind the device, a highlight under the pointer. */
.ss-showwrap .ss-showpanel { padding: 0; }
.ss-showwrap .ss-showpanel > .ss-show { max-width: none; background: transparent; box-shadow: none; border: 0; padding: 0; gap: 34px; }
.ss-showwrap .ss-show__copy { padding: 0 var(--gutter); }
.ss-showwrap--lift .ss-show, .ss-showwrap--lift .ss-show:hover { transform: none; box-shadow: none; }
.ss-showwrap .ssx, .ss-showwrap .ssx--site { max-width: none; width: 100%; border: 0; border-radius: 0; }
.ss-showwrap .ss-showpanel .ssx.ssx--live { background: linear-gradient(180deg, var(--paper) 0%, #FAF8F2 24%, #F8F5EE 76%, var(--paper) 100%) !important; }
.ss-showwrap .ss-showpanel .ssx.ssx--live::before {
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(244,241,233,0) 22%, rgba(244,241,233,0) 78%, var(--paper) 100%),
    radial-gradient(34% 40% at 50% 62%, rgba(255,255,255,.85), transparent 72%),
    linear-gradient(172deg, rgba(228,237,230,0) 30%, #E4EDE6 30.3%, #D3E3D9 46%, #E9EBDD 56%, #EFE6D2 66%, rgba(239,230,210,0) 66.3%),
    linear-gradient(176deg, rgba(214,229,219,0) 58%, rgba(214,229,219,.7) 58.3%, rgba(236,231,217,.6) 78%, rgba(236,231,217,0) 78.3%),
    transparent; }
.ss-showwrap .ss-showpanel .ssx.ssx--live::after { display: none; }
.ss-showwrap .ssx--mac { padding-top: 56px !important; }
.ss-showwrap .ssx--ph { min-height: 660px; padding-top: 64px !important; }
@media (max-width: 700px) { .ss-showwrap .ss-showpanel > .ss-show { gap: 24px; } .ss-showwrap .ss-showpanel .ssx.ssx--live::before { background-size: auto; } .ss-showwrap .ssx--ph { min-height: 0; padding-top: 32px !important; } }
/* the Meet Octo stage stands on the same ground as the devices (it is not a live ground) */
.ss-showwrap .ssx--octo { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--paper) 0%, #FAF8F2 24%, #F8F5EE 76%, var(--paper) 100%) !important; border: 0; }
.ss-showwrap .ssx--octo::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(244,241,233,0) 22%, rgba(244,241,233,0) 78%, var(--paper) 100%),
    linear-gradient(172deg, rgba(228,237,230,0) 30%, #E4EDE6 30.3%, #D3E3D9 46%, #E9EBDD 56%, #EFE6D2 66%, rgba(239,230,210,0) 66.3%),
    linear-gradient(176deg, rgba(214,229,219,0) 58%, rgba(214,229,219,.7) 58.3%, rgba(236,231,217,.6) 78%, rgba(236,231,217,0) 78.3%),
    transparent; }
.ss-showwrap .ssx--octo > * { position: relative; z-index: 1; }

/* ===================================================================
   PASS 16 — bubble over Octo's shoulder, full phones, living skies
   =================================================================== */
/* hero ≥1400: the bubble sits above Octo, off his top-right, and stays under the laptop's base */
@media (min-width: 1400px) {
  .hx__stage { padding-bottom: 350px !important; }
  .hx-octo { bottom: 4px; }
  .hx-octo__bubble { top: auto; bottom: calc(100% + 12px); right: -8px; width: 290px; border-radius: 20px 20px 4px 20px; transform-origin: bottom right; }
  .hx-octo__bubble::after { top: auto; bottom: -8px; right: 24px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0 0 3px 0; }
  @keyframes octoPop { from { opacity: 0; transform: translateY(8px) scale(.94); } }
}

/* galleries: nothing is confined any more. Phones are whole (rounded foot), laptops keep room
   under the base, and the stage grows to fit whatever stands on it. */
.ss-showwrap .ssx--ph { min-height: 0; padding: 64px 24px 72px !important; justify-content: center !important; }
.ss-showwrap .ssx--ph .ph { height: 640px; border-radius: 50px; padding-bottom: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 50px 90px -46px rgba(26,25,21,.55), 0 2px 8px rgba(26,25,21,.12); }
.ss-showwrap .ssx--ph .ph__screen { border-radius: 41px; }
.ss-showwrap .ssx--ph .cl__end { margin-bottom: 18px; }
.ss-showwrap .ssx--mac { padding-bottom: 64px !important; } .ss-showwrap .ssx--mac .hx-mac { margin-bottom: 0; }
@media (max-width: 700px) { .ss-showwrap .ssx--ph { padding: 40px 12px 48px !important; } .ss-showwrap .ssx--ph .ph { height: 560px; } }

/* the sky: a low-res canvas of drifting colour behind each visual, blurred up, masked so it still
   dissolves into the page top and bottom; it leans toward the pointer (driver in apple.js) */
.ss-showpanel .ssx.ssx--live > .ssx__sky, .ss-showwrap .ssx--octo > .ssx__sky { position: absolute; z-index: 0; left: -8%; top: -8%; width: 116%; height: 116%; pointer-events: none; opacity: .95;
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 30%, #000 70%, transparent 92%); mask-image: linear-gradient(180deg, transparent 8%, #000 30%, #000 70%, transparent 92%); }
/* the platform gallery wears a warmer sky: sand and stone bands with one mint note */
.ss-showwrap[data-sky="platform"] .ss-showpanel .ssx.ssx--live::before, .ss-showwrap[data-sky="platform"] .ssx--octo::before {
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(244,241,233,0) 22%, rgba(244,241,233,0) 78%, var(--paper) 100%),
    radial-gradient(34% 40% at 50% 62%, rgba(255,255,255,.85), transparent 72%),
    linear-gradient(168deg, rgba(239,230,210,0) 28%, #EFE6D2 28.3%, #E8DFCB 44%, #ECE7D9 56%, #DCEAE1 68%, rgba(220,234,225,0) 68.3%),
    linear-gradient(178deg, rgba(232,225,211,0) 60%, rgba(232,225,211,.75) 60.3%, rgba(214,229,219,.5) 80%, rgba(214,229,219,0) 80.3%),
    transparent; }

/* cards in a gallery sit level: apple.js measures the tallest copy block and the tallest stage
   and every card takes those heights, so swiping never changes the device's line */
.ss-showwrap .ss-show__copy { min-height: var(--copy-h, auto); }
.ss-showwrap .ssx { min-height: var(--stage-h, auto) !important; justify-content: center !important; align-items: center; }
.ss-showwrap .ssx--mac { padding-top: 60px !important; padding-bottom: 60px !important; }
.ss-showwrap .ssx--ph { padding-top: 64px !important; padding-bottom: 64px !important; }
.ss-showwrap .ssx--octo .oc__char { padding-top: 124px; }   /* room for the greeting bubble above his head */

/* ===================================================================
   PASS 17 — copy beside the device, devices centred, the More card in the light
   =================================================================== */
/* the More card: pills in a glass panel on the same ground as everything else */
.ss-showwrap .ssx--cloud { display: flex; align-items: center; justify-content: center; min-height: 600px; padding: 64px 24px !important; }
.ssx-cloudcard { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; width: min(560px, 100%); padding: 28px 30px 30px; border-radius: 26px;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 1px 2px rgba(26,25,21,.05), 0 40px 80px -48px rgba(26,25,21,.45); }
.ssx-cloudcard__k { font-size: 13px; font-weight: 600; color: var(--forest); }
.ssx-cloudcard .ssx-cloudwrap { max-width: none; margin: 0; justify-content: flex-start; gap: 10px; }
.ss-showwrap .ssx-tagx { color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(26,25,21,.05), 0 10px 24px -18px rgba(26,25,21,.35); font-size: 13px; padding: 9px 15px; }
.ss-showwrap .ssx-tagx:nth-child(3n)   { border-color: var(--forest-tint-2); }
.ss-showwrap .ssx-tagx:nth-child(3n+1) { border-color: #EBDDBF; }
.ss-showwrap .ssx-tagx:nth-child(3n+2) { border-color: #D5DEE9; }

/* the Meet Octo stage: Octo and a narrower chat, as one centred pair */
.ss-showwrap .ssx--octo { grid-template-columns: 240px 440px; justify-content: center; gap: 36px; padding: 56px 24px !important; }
.ss-showwrap .ssx--octo .octo--big { width: 240px; height: 240px; }
.ss-showwrap .ssx--octo .oc { min-height: 440px; }
.ss-showwrap .ssx--octo .oc__say { width: 280px; top: 0; }

/* from 1240px the copy sits on the left and the device stays centred in the viewport */
@media (min-width: 1240px) {
  .ss-showwrap .ss-showpanel { --dev-w: 640px; }
  .ss-showwrap .ss-showpanel:has(.ssx--ph) { --dev-w: 330px; }
  .ss-showwrap .ss-showpanel:has(.ssx--octo) { --dev-w: 716px; }
  .ss-showwrap .ss-showpanel:has(.ssx--gpt) { --dev-w: 400px; }
  .ss-showwrap .ss-showpanel:has(.ssx--cloud) { --dev-w: 560px; }
  .ss-showwrap .ss-showpanel > .ss-show { display: block; position: relative; }
  .ss-showwrap .ss-show__copy { position: absolute; z-index: 3; left: var(--gutter); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; text-align: left;
    width: min(440px, calc(50vw - var(--dev-w) / 2 - var(--gutter) - 36px)); min-height: 0; }
  .ss-showwrap .ss-show__copy .ss-section-label { justify-content: flex-start; }
  .ss-showwrap .ss-show__copy h3 { font-size: clamp(26px, 2.1vw, 32px) !important; margin: 10px 0 8px; }
  .ss-showwrap .ss-show__what { font-size: 15px; line-height: 1.55; }
  .ss-showwrap .ss-show__steps { grid-template-columns: 1fr; gap: 10px; margin: 18px 0 0; max-width: none; }
  .ss-showwrap .ss-show__steps li { flex-direction: row; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.45; }
  .ss-showwrap .ss-show__steps li b { font-size: 12.5px; min-width: 20px; }
  .ss-showwrap .ss-show__outcome { font-size: 14.5px; margin-top: 16px; padding-top: 14px; }
  .ss-showwrap .ss-show__copy > p:not([class]) { font-size: 12.5px !important; line-height: 1.5 !important; margin-top: 10px !important; }
  .ss-showwrap .ssx--mac .hx-mac { max-width: var(--dev-w); }
  .ss-showwrap .ssx--gpt .ssx-gpt { width: var(--dev-w); max-width: 100%; margin: 0 auto; }
}
/* below 1240 the copy stacks above the visual again; devices start on one line with any spare stage room below them */
@media (max-width: 1239px) { .ss-showwrap .ssx { justify-content: flex-start !important; } .ss-showwrap .ssx--ph { padding-top: 40px !important; } }

/* ===================================================================
   PASS 18 — Octo beside the keyboard; copy hugs the device
   =================================================================== */
/* hero ≥1400: the laptop is 1000px so the gutter holds Octo (feet on the base line, beside the
   keyboard) and a narrow bubble above his head; the stage ends 72px under the laptop */
@media (min-width: 1400px) {
  .hx__stage .hx-mac { max-width: 1000px; }
  .hx__stage { padding-bottom: 72px !important; }
  .hx-octo { right: -24px; bottom: 78px; }
  .hx-octo__bubble { width: 176px; right: -62px; bottom: calc(100% + 10px); padding: 14px 13px 12px; border-radius: 18px 18px 4px 18px; }
  .hx-octo__bubble::after { right: 20px; }
  .hx-octo__txt { font-size: 14px; }
  .hx-octo__chips { gap: 5px; margin-top: 10px; } .hx-octo__chips button { font-size: 12.5px; padding: 6px 10px; }
}
@media (min-width: 1600px) {
  .hx-octo { right: -60px; }
  .hx-octo__bubble { width: 230px; right: -98px; }
}
/* galleries ≥1240: the copy's right edge sits 28px from the centred device */
@media (min-width: 1240px) {
  .ss-showwrap .ss-show__copy { left: auto; right: calc(50% + var(--dev-w) / 2 + 28px); width: min(400px, calc(50% - var(--dev-w) / 2 - 28px - 24px)); }
}

/* ===================================================================
   PASS 19 — the hero is the editor: describe, Octo plans and builds, ask and it changes
   =================================================================== */
.he { position: absolute; inset: 0; display: flex; flex-direction: column; background: #F7F5EF; color: var(--ink); font-family: var(--font-sans); text-align: left; transition: opacity .5s ease; }
.he.is-fade { opacity: 0; }
.he__bar { flex: none; height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-500); }
.he__lights { display: inline-flex; gap: 6px; } .he__lights i { width: 10px; height: 10px; border-radius: 999px; background: #E5E1D6; }
.he__lights i:nth-child(1) { background: #FF5F57; } .he__lights i:nth-child(2) { background: #FEBC2E; } .he__lights i:nth-child(3) { background: #28C840; }
.he__crumb { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; background: var(--paper); font-weight: 500; } .he__crumb b { color: var(--ink); font-weight: 600; }
.he__url { margin: 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; background: var(--paper); opacity: 0; transition: opacity .5s; }
.he__url i { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-300); } .he__url b { color: var(--ink); font-weight: 600; } .he__url em { font-style: normal; font-weight: 600; color: var(--forest); }
.he.is-ready .he__url { opacity: 1; } .he__url-l { display: none; } .he.is-live .he__url-a { display: none; } .he.is-live .he__url-l { display: inline; font-weight: 600; color: var(--forest-900); } .he.is-live .he__url i { background: var(--forest); animation: ssPulse 2.2s infinite; }
.he__devs { display: inline-flex; gap: 8px; color: var(--ink-400); }
.he__body { flex: 1; display: flex; min-height: 0; }
.he__canvas { flex: 1; position: relative; min-width: 0; overflow: hidden; background:
  radial-gradient(60% 50% at 50% 38%, #E6EEE8 0%, rgba(230,238,232,0) 70%), radial-gradient(40% 40% at 86% 90%, #EFE6D2 0%, rgba(239,230,210,0) 70%), radial-gradient(40% 40% at 10% 90%, #FFFFFF 0%, rgba(255,255,255,0) 70%), #F5F2EA; }
/* the prompt card */
.he__prompt { position: absolute; left: 50%; top: 50%; width: min(560px, 82%); transform: translate(-50%, -50%); padding: 14px; border-radius: 24px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 1px 2px rgba(26,25,21,.05), 0 44px 80px -46px rgba(26,25,21,.5); transition: opacity .5s ease, transform .5s ease; }
.he.is-built .he__prompt { opacity: 0; transform: translate(-50%, -50%) scale(.96); pointer-events: none; }
.he__ta { position: relative; min-height: 118px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: 18px; line-height: 1.4; color: var(--forest-900); letter-spacing: -0.01em; }
.he__ph { position: absolute; left: 18px; top: 16px; color: var(--ink-400); } .he__ph[hidden] { display: none; }
.he__caret { display: inline-block; width: 1.5px; height: 1.05em; background: var(--forest-900); margin-left: 1px; vertical-align: -3px; animation: hxCaret 1.06s steps(1) infinite; }
.he__prow { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 0; }
.he__pico { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-500); } .he__pico .octo { width: 24px; height: 24px; }
.he__go { display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--forest); border-radius: 999px; padding: 10px 18px; box-shadow: 0 8px 18px -12px rgba(44,110,75,.9); transition: transform .18s, background .2s; }
.he__go.is-hit { transform: scale(.94); background: var(--forest-700); }
/* the site forming on the canvas */
.he__site { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; filter: blur(18px); transform: translateY(0) scale(.985); transform-origin: top center;
  transition: opacity 1.1s ease, filter 1.4s ease, transform 1.3s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.he.is-forming .he__site { opacity: .55; filter: blur(12px); }
.he.is-ready .he__site { opacity: 1; filter: blur(0); transform: none; }
.he.is-work .he__site { transform: translateY(var(--he-scroll, -600px)); }
.he.is-theme .he__site { transform: none; }
.he__site .bs { position: relative; }
.ed [data-work] { max-height: 0; padding-top: 0; overflow: hidden; opacity: 0; transform: translateY(16px); transition: max-height .9s cubic-bezier(.16,1,.3,1), padding .9s cubic-bezier(.16,1,.3,1), opacity .7s ease .2s, transform .8s cubic-bezier(.16,1,.3,1) .1s; }
.ed.is-work [data-work] { max-height: 720px; padding-top: 48px; opacity: 1; transform: none; }
.ed .pk__h1 { display: inline-grid; justify-items: center; } .ed .pk__h1 span { grid-area: 1 / 1; transition: opacity .3s ease; } .ed .pk__h1 .new { opacity: 0; }
.ed.is-swap .pk__h1 .old { opacity: 0; } .ed.is-swap .pk__h1 .new { opacity: 1; }
/* "punchier": the new headline is not a quiet italic swap, it grows into a bold upright line that
   reads even on a phone's 768px canvas; the old line keeps its own look while it fades */
.ed .pk__h1 { transition: font-size .55s cubic-bezier(.16,1,.3,1), line-height .55s cubic-bezier(.16,1,.3,1); }
.ed.is-swap .pk__h1 { font-style: normal; font-weight: 700; font-size: clamp(26px, 5.6cqw, 42px); line-height: 1.02; letter-spacing: -0.03em; color: var(--rt-ink); }
.ed.is-swap .pk__h1 .old { font-style: italic; font-weight: 400; }
.ed.is-swap .pk__h1 .new em { font-style: italic; font-weight: 700; }
.ed .pk__call { opacity: 0; transform: translateY(6px) scale(.94); transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.ed.is-call .pk__call { opacity: 1; transform: none; }
.he .bs__btn, .he .bs__cta, .he .bs__k, .he .bs__eyebrow, .he .bs__card em, .he .bs__nums b em, .he .bs__steps i, .he .bs__logo i { transition: background-color .7s ease, color .7s ease, border-color .7s ease; }
.he.is-theme .bs { --forest: #17422D; --forest-700: #113322; --forest-900: #0E2A1C; --forest-tint: #DCE8DF; --forest-tint-2: #C6DACC; }
.he.is-theme .bs__cta { background: #17422D; } .he.is-theme .bs__logo i { background: linear-gradient(160deg, #2C6E4B, #17422D); }
.he.is-theme .bs__h1 em { background: linear-gradient(90deg, #17422D, #2C6E4B); -webkit-background-clip: text; background-clip: text; }
.he.is-theme .bs__hero::before { background: radial-gradient(50% 50% at 50% 50%, rgba(44,110,75,.34), transparent 70%); }
.he__chip { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--forest-900); background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 7px; box-shadow: 0 6px 16px -10px rgba(26,25,21,.4);
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.he__chip i { width: 16px; height: 16px; border-radius: 999px; background: var(--forest); color: #fff; display: grid; place-items: center; }
.he.is-ready .he__chip { opacity: 1; transform: none; }
/* Octo's panel slides in from the right */
.he__octo { flex: none; width: 0; overflow: hidden; background: #fff; border-left: 1px solid transparent; transition: width .65s cubic-bezier(.16,1,.3,1), border-color .4s; }
.he.is-open .he__octo { width: 264px; border-left-color: var(--line); }
.he__oin { width: 264px; height: 100%; display: flex; flex-direction: column; }
.he__ohead { flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.he__ohead .octo { width: 26px; height: 26px; } .he__ohead b { font-weight: 600; } .he__ohead > span { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-400); } .he__ohead > span i { width: 6px; height: 6px; border-radius: 999px; background: #28C840; }
.he__log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.he__msg { animation: pvIn .45s cubic-bezier(.16,1,.3,1) both; font-size: 12px; line-height: 1.45; flex: none; }
.he__me { align-self: flex-end; max-width: 92%; padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--paper); }
.he__ai { align-self: flex-start; max-width: 94%; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: #F4F1E9; color: var(--ink); }
.he__typing { display: inline-flex; gap: 4px; padding: 10px 12px; } .he__typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-400); animation: ssTyping 1s infinite; } .he__typing i:nth-child(2) { animation-delay: .15s; } .he__typing i:nth-child(3) { animation-delay: .3s; }
.he__card { align-self: stretch; padding: 10px 12px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px -16px rgba(26,25,21,.35); }
.he__card b { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.he__spin { width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--forest-tint-2); border-top-color: var(--forest); animation: pvSpin .9s linear infinite; flex: none; }
.he__card.is-done .he__spin { animation: none; border: 0; background: var(--forest); position: relative; } .he__card.is-done .he__spin::after { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.he__card ul { list-style: none; margin: 0; padding: 0; } .he__card li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-500); padding: 4px 0; }
.he__card li i { width: 12px; height: 12px; border-radius: 999px; border: 1.5px solid var(--line-strong); flex: none; position: relative; transition: background .25s, border-color .25s; }
.he__card li.is-done { color: var(--ink); } .he__card li.is-done i { background: var(--forest); border-color: var(--forest); } .he__card li.is-done i::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.he__input { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.he__field { position: relative; min-height: 38px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); font-size: 12px; line-height: 1.4; color: var(--ink); }
.he__inph { position: absolute; left: 12px; top: 10px; color: var(--ink-400); } .he__inph[hidden] { display: none; }
.he__caret--in { height: 1em; background: var(--ink); vertical-align: -2px; opacity: 0; } .he.is-typing .he__caret--in { opacity: 1; }
.he__tools { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--ink-400); padding: 0 4px; }
.he__send { width: 24px; height: 24px; border-radius: 999px; background: var(--forest); color: #fff; display: grid; place-items: center; transition: transform .18s; } .he__send.is-hit { transform: scale(.88); }
/* phones: the panel floats over the canvas */
.hx--m .he__prompt { width: 88%; } .hx--m .he__ta { font-size: 15px; min-height: 100px; }
.hx--m .he__url { display: none; }

/* bigger laptops in every gallery */
@media (min-width: 1240px) { .ss-showwrap .ss-showpanel { --dev-w: 760px; } }
@media (min-width: 1600px) { .ss-showwrap .ss-showpanel { --dev-w: 860px; } }

/* ===================================================================
   PASS 20 — the demo client site in the editorial idiom (wordmark, photography, serif)
   =================================================================== */
.rt { container-type: inline-size; --rt-ink: #17422D; --rt-ink-2: #2C6E4B; --rt-bg: #F6F1E4; --rt-bg-2: #EFE6CF; --rt-text: #1A1915; --rt-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  position: relative; display: block; width: 100%; background: var(--rt-bg); color: var(--rt-text); font-family: var(--font-sans); text-align: left; overflow: hidden; transition: background-color .7s ease; }
.rt__strip { display: flex; align-items: center; justify-content: center; gap: 12px; height: 26px; background: var(--rt-ink); color: #fff; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; transition: background-color .7s; }
.rt__strip i { width: 3px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.6); }
.rt__nav { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 28px; }
.rt__links { display: inline-flex; align-items: center; gap: 18px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-text); }
.rt__links--r { gap: 14px; }
.rt__pill { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; background: var(--rt-ink); border-radius: 999px; padding: 7px 13px; transition: background-color .7s; }
.rt__pill--call { background: var(--rt-ink-2); }
.rt__hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; padding: 6px 28px 0; align-items: start; }
.rt__l { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rt__wordmark { font-family: var(--rt-serif); font-weight: 600; font-size: 12.6cqw; line-height: .86; letter-spacing: -0.045em; color: var(--rt-ink); transition: color .7s; }
.rt__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rt figure { margin: 0; position: relative; overflow: hidden; border-radius: 6px; background: var(--rt-bg-2); }
.rt__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt__ph { aspect-ratio: 4 / 5; }
.rt__r { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.rt__tag { font-family: var(--rt-serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 3.8cqw, 27px); line-height: 1.12; letter-spacing: -0.015em; color: var(--rt-text); }
.rt__tag em { font-style: italic; font-weight: 600; color: var(--rt-ink); transition: color .7s; }
.rt__sub { font-size: 12px; line-height: 1.5; color: #4A4740; max-width: 34ch; }
.rt__tall { aspect-ratio: 4 / 5; margin-top: 4px !important; }
.rt__tall figcaption { position: absolute; left: 12px; bottom: 12px; }
.rt__btn { font-style: normal; display: inline-block; font-size: 11px; font-weight: 600; color: var(--rt-text); background: #fff; border-radius: 999px; padding: 8px 13px; box-shadow: 0 8px 20px -12px rgba(0,0,0,.5); }
.rt__btn--solid { color: #fff; background: var(--rt-ink); box-shadow: none; text-align: center; transition: background-color .7s; }
.rt__trust { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #4A4740; } .rt__trust svg { width: 13px; height: 13px; } .rt__trust b { color: var(--rt-text); }
.rt__cats { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 34px 28px 8px; font-family: var(--rt-serif); font-size: 26px; letter-spacing: -0.01em; color: var(--rt-ink-2); transition: color .7s; }
.rt__cats em { font-style: italic; font-weight: 600; color: var(--rt-ink); } .rt__cats i { font-style: normal; font-size: 14px; color: var(--rt-ink); }
.rt__row, .rt__grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 22px 28px 0; }
.rt__card .rt__img { aspect-ratio: 4 / 3; }
.rt__card figcaption { display: flex; flex-direction: column; gap: 3px; padding: 10px 2px 0; }
.rt__card figcaption span { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-ink-2); transition: color .7s; }
.rt__card figcaption b { font-family: var(--rt-serif); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; line-height: 1.2; }
.rt__card figcaption em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--rt-ink); text-decoration: underline; text-underline-offset: 3px; }
.rt__card { background: transparent !important; border-radius: 0 !important; overflow: visible !important; } .rt__card .rt__img { border-radius: 6px; }
.rt__work { padding-top: 48px; }
.rt__head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.rt__k { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-ink-2); transition: color .7s; } .rt__k--light { color: rgba(255,255,255,.7); }
.rt__h2 { font-family: var(--rt-serif); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; line-height: 1.05; color: var(--rt-text); }
.rt__grid3 { padding-top: 18px; }
.rt__story { margin: 48px 0 0; padding: 44px 60px; background: var(--rt-ink); color: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; transition: background-color .7s; }
.rt__story p { margin: 0; font-family: var(--rt-serif); font-weight: 400; font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; max-width: 24ch; }
.rt__story p em { font-style: italic; font-weight: 600; color: #F3EBC9; }
.rt__nums { display: flex; gap: 40px; margin-top: 8px; } .rt__nums div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rt__nums b { font-family: var(--rt-serif); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; } .rt__nums span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.rt__reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 40px 28px 0; }
.rt__review { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; background: #fff; border-radius: 8px; } .rt__review > svg { width: 15px; height: 15px; }
.rt__stars { display: inline-flex; gap: 1px; color: #FBBC04; } .rt__stars svg { width: 11px; height: 11px; }
.rt__review p { margin: 2px 0 4px; font-family: var(--rt-serif); font-size: 14px; line-height: 1.4; color: var(--rt-text); } .rt__review b { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #6E6A62; }
.rt__quote { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding: 48px 28px 0; }
.rt__quote > div:first-child { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rt__form { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #fff; border-radius: 10px; }
.rt__form > span { font-size: 11.5px; color: #8A867C; background: var(--rt-bg); border-radius: 8px; padding: 10px 12px; } .rt__form .rt__ta { min-height: 52px; }
.rt__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 44px; padding: 16px 28px 18px; border-top: 1px solid rgba(26,25,21,.12); font-size: 11px; color: #6E6A62; }
.rt__foot b { font-family: var(--rt-serif); font-weight: 600; font-size: 14px; color: var(--rt-ink); }
/* the Change-by-asking card shows the top of the site; the headline swaps and Book a call rises */
.rt .pk__h1 { display: inline-grid; } .rt .pk__h1 span { grid-area: 1 / 1; }
/* the theme ask: warm terracotta, the client's van */
.ed.is-theme .rt { --rt-ink: #7A3A22; --rt-ink-2: #A65A3A; --rt-bg: #F7EEE2; --rt-bg-2: #EEDFCB; }
.ed.is-theme .rt__story p em { color: #F6D9B8; }

/* ===================================================================
   PASS 21 — Systems opener: copy beside a live morning of notifications, a rail of the nine
   =================================================================== */
.sy__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.sy__copy .ss-section-label { justify-content: flex-start; }
.sy__cta { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.sy__live { position: relative; min-height: 470px; padding: 26px 26px 28px; border-radius: 30px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 55% at 50% 30%, #E6EEE8 0%, rgba(230,238,232,0) 70%), radial-gradient(45% 45% at 88% 88%, #EFE6D2 0%, rgba(239,230,210,0) 70%), radial-gradient(40% 40% at 8% 90%, #fff 0%, rgba(255,255,255,0) 70%), #F7F4EC; }
.sy__live::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(170deg, rgba(228,237,230,0) 36%, #E4EDE6 36.3%, #D3E3D9 52%, #EFE6D2 66%, rgba(239,230,210,0) 66.3%); opacity: .8; }
.sy__cap { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-500); margin-bottom: 16px; }
.sy__cap i { width: 8px; height: 8px; border-radius: 999px; background: var(--forest); animation: ssPulse 2.2s infinite; }
.sy__stack { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.sy__note { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px rgba(26,25,21,.05), 0 18px 40px -26px rgba(26,25,21,.45); animation: phDrop .55s cubic-bezier(.16,1,.3,1) both; transition: opacity .5s, transform .5s; }
.sy__note .ai { width: 40px; height: 40px; border-radius: 11px; } .sy__note .ai--gmail { padding: 9px; box-sizing: border-box; background: #fff; box-shadow: 0 1px 3px rgba(26,25,21,.16); }
.sy__note div { min-width: 0; } .sy__note b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); } .sy__note span { display: block; font-size: 12.5px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy__note em { font-style: normal; font-size: 12px; color: var(--ink-400); align-self: flex-start; font-variant-numeric: tabular-nums; }
.sy__note:nth-child(4) { opacity: .55; } .sy__note:nth-child(5) { opacity: .25; } .sy__note:nth-child(n+6) { display: none; }
.sy__rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 56px; }
.sy__chip { appearance: none; -webkit-appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); box-shadow: 0 1px 2px rgba(26,25,21,.05); transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s; }
.sy__chip:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(26,25,21,.4); border-color: var(--forest-tint-2); } .sy__chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sy__chip .ai, .sy__mono { width: 26px; height: 26px; border-radius: 8px; flex: none; } .sy__chip .ai--gmail { padding: 6px; box-sizing: border-box; background: #fff; box-shadow: 0 1px 3px rgba(26,25,21,.16); }
.sy__mono { display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: -0.02em; color: #fff; background: linear-gradient(160deg, #4A4740, var(--ink)); }
.sy__mono--forest { background: linear-gradient(160deg, #5E9B7C, var(--forest)); } .sy__mono--paper { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-display); }
@media (max-width: 960px) { .sy__grid { grid-template-columns: 1fr; gap: 36px; } .sy__live { min-height: 0; padding: 20px 18px 22px; border-radius: 24px; } .sy__note:nth-child(n+4) { display: none; } .sy__rail { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; scrollbar-width: none; margin-top: 36px; } .sy__rail::-webkit-scrollbar { display: none; } .sy__chip { flex: none; } }
@media (prefers-reduced-motion: reduce) { .sy__note { animation: none; } }

/* phones: Meet Octo stacks; the editor's Octo panel becomes a bottom sheet over the canvas */
@media (max-width: 760px) {
  .ss-showwrap .ssx--octo { grid-template-columns: 1fr; gap: 12px; padding: 28px 16px !important; }
  .ss-showwrap .ssx--octo .oc { width: 100%; min-height: 0; }
  .ss-showwrap .ssx--octo .oc__char { padding-top: 0; }
}
.hx--m .he__octo { position: static; order: -1; width: 0; height: auto; border: 0; border-right: 1px solid transparent; border-radius: 0; box-shadow: none; transition: width .6s cubic-bezier(.16,1,.3,1), border-color .4s; }
.hx--m .he.is-open .he__octo { width: 196px; border-right-color: var(--line); }
.hx--m .he__oin { width: 196px; }
.hx--m .he__ohead { height: 36px; padding: 0 10px; } .hx--m .he__log { padding: 8px; gap: 6px; } .hx--m .he__msg { font-size: 10.5px; } .hx--m .he__card li { padding: 2px 0; font-size: 10.5px; } .hx--m .he__input { padding: 8px; }

/* ===================================================================
   PASS 22 — Change by asking runs five real asks; the demo site reflows in narrow canvases
   =================================================================== */
.pk .rt { bottom: auto; height: auto; min-height: 100%; overflow: visible; transition: transform 1.2s cubic-bezier(.45,.05,.4,.95), background-color .7s ease; }
.pk.is-work .rt { transform: translateY(var(--he-scroll, -500px)); }
.pk.is-theme .rt { transform: none; }
.pk .pk__done { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.pk .pk__done.is-on { opacity: 1; transform: none; }
.pk .pk__txt { white-space: nowrap; overflow: hidden; text-overflow: clip; }
/* the hours strip and the rating badge are the second and fifth asks */
.rt__hours { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rt-ink); background: var(--rt-bg-2); }
.rt__hours i { width: 3px; height: 3px; border-radius: 999px; background: var(--rt-ink); opacity: .5; }
.ed [data-hours] { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s cubic-bezier(.16,1,.3,1), opacity .5s ease .1s; }
.ed.is-hours [data-hours] { max-height: 30px; height: 30px; opacity: 1; }
.rt__rate { display: none; align-items: center; gap: 6px; color: #F3EBC9; } .rt__rate i { width: 3px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.6); }
.ed.is-rating [data-rate] { display: inline-flex; animation: pvIn .5s cubic-bezier(.16,1,.3,1) both; }
/* narrow canvases (the phone hero, the Change card): the site reflows to one column */
@container (max-width: 560px) {
  .rt__nav { padding: 0 16px; height: 38px; } .rt__links { gap: 10px; font-size: 9px; } .rt__links--r { gap: 8px; } .rt__pill { font-size: 9.5px; padding: 6px 10px; }
  .rt__strip { font-size: 9px; gap: 8px; }
  .rt__hero { grid-template-columns: 1fr; gap: 14px; padding: 4px 16px 0; }
  /* one column: the headline sits right under the wordmark, where the phone's glass shows it,
     not below the photo pair where a change would go unseen */
  .rt__l, .rt__r { display: contents; }
  .rt__wordmark { order: 1; } .rt__tag { order: 2; } .rt__pair { order: 3; } .rt__sub { order: 4; } .rt__tall { order: 5; } .rt__trust { order: 6; }
  .rt__wordmark { font-size: 22cqw; }
  .rt__tag { font-size: 20px; } .rt__tall { aspect-ratio: 16 / 10; }
  .ed.is-swap .pk__h1 { font-size: 34px; }
  .rt__cats { font-size: 18px; gap: 10px; padding: 24px 16px 4px; }
  .rt__row, .rt__grid3, .rt__reviews { grid-template-columns: 1fr 1fr; gap: 10px; padding-left: 16px; padding-right: 16px; }
  .rt__reviews .rt__review:nth-child(3) { display: none; }
  .rt__story { padding: 32px 20px; } .rt__story p { font-size: 22px; } .rt__nums { gap: 22px; }
  .rt__quote { grid-template-columns: 1fr; gap: 16px; padding: 32px 16px 0; }
  .rt__foot { flex-direction: column; gap: 4px; align-items: flex-start; padding: 14px 16px; }
}
/* stacked galleries: every stage starts its device at the same 40px, so swiping never steps */
@media (max-width: 1239px) { .ss-showwrap .ssx, .ss-showwrap .ssx--mac, .ss-showwrap .ssx--ph, .ss-showwrap .ssx--octo, .ss-showwrap .ssx--cloud { padding-top: 40px !important; } .ss-showwrap .ssx--gpt .ssx-gpt { margin-top: 0; } }
.pk__ask { max-width: 600px; left: 6%; right: 6%; font-size: 13px; }

/* ===================================================================
   PASS 22 — no tension: horizontal strips never hold the page
   =================================================================== */
/* Trackpad and mouse: the strips are not scroll areas at all. The browser then never latches a
   wheel gesture to them, so up/down always moves the page; apple.js turns a sideways gesture
   into one card. Tabs, paddles and dots still page them (scrollTo works on overflow:hidden).
   Touch devices keep native swiping with snap. */
@media (hover: hover) and (pointer: fine) {
  .ss-gallery, .moments__strip, .ss-tabs { overflow-x: hidden; overflow-y: hidden; scroll-snap-type: none; }
}
/* CSS smooth scrolling on a snap strip can stall an iOS swipe between cards; JS asks for
   smooth explicitly where it wants it */
.ss-gallery, .moments__strip { scroll-behavior: auto; overscroll-behavior-y: auto; touch-action: pan-x pan-y; }
.moments__strip { overflow-y: hidden; }

/* the demo client site on a phone-sized canvas: a nav that fits, nothing wraps or climbs */
@container (max-width: 560px) {
  .rt__strip { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; padding: 0 10px; }
  .rt__nav { padding: 0 14px; height: 40px; gap: 10px; }
  .rt__links { flex: none; white-space: nowrap; gap: 9px; font-size: 8.5px; letter-spacing: .1em; }
  .rt__links--r { gap: 6px; }
  .rt__links--r > span:not(.rt__pill) { display: none; }
  .rt__pill { flex: none; white-space: nowrap; font-size: 9px; padding: 5px 9px; line-height: 1.2; }
  .rt__wordmark { font-size: 19.5cqw; }
  .rt__hours { font-size: 8.5px; gap: 8px; white-space: nowrap; overflow: hidden; }
}
@container (max-width: 400px) {
  .rt__links:first-child > span { display: none; }
  .rt__links:first-child::before { content: ""; width: 14px; height: 10px; border-top: 1.6px solid var(--rt-text); border-bottom: 1.6px solid var(--rt-text); box-shadow: inset 0 3.4px 0 -1.8px var(--rt-text); }
  .rt__hours span:nth-child(3), .rt__hours i:nth-child(4) { display: none; }
}

/* stacked galleries: the strip's height follows the card on screen (apple.js sets it), and the
   copy-to-device gap and the section's tail tighten so nothing floats in open space */
.ss-gallery { transition: height .55s cubic-bezier(.16,1,.3,1); }
/* stacked layouts: the device comes FIRST, so every card's device starts on the same line
   under the tabs whatever the length of its copy, and the copy below takes its natural height */
@media (max-width: 1239px) {
  .ss-show { gap: 28px; }
  .ss-showwrap .ss-show > .ssx { order: -1; }
  .ss-showwrap .ss-show__copy { min-height: 0; padding-bottom: 6px; }
  .ss-showwrap .ss-show__copy .ss-show__outcome { margin-bottom: 0; }
}
@media (max-width: 760px) {
  .ss-show { gap: 22px; }
  .ss-showwrap .ssx--mac { padding-top: 28px !important; padding-bottom: 44px !important; }
  /* a tighter shadow on phones, so the stage's edge never cuts it into a hard line */
  .ssx--live .hx-mac { filter: drop-shadow(0 12px 16px rgba(26,25,21,.2)); }
  .hx-mac::after { bottom: -14px; height: 28px; }
  .ss-showwrap .ssx--ph { padding-top: 36px !important; padding-bottom: 36px !important; }
  .ss-showwrap .ssx--octo { padding-top: 28px !important; padding-bottom: 18px !important; }
  #platform { padding-top: 32px !important; padding-bottom: 64px !important; }
}

/* demo site cards: the image keeps its 4:3 and the caption stays inside the card, so a wrapped
   row (two columns on a phone) never lets a caption run into the section below */
.rt__card { align-self: start; }
.rt__card .rt__img { height: auto; }

/* ===================================================================
   PASS 22b — phone pass: hero Octo in flow, soft grounds, footer, tinted section
   =================================================================== */
/* hero on phones: Octo and his bubble sit in the flow under the laptop (bubble left, Octo right),
   never absolutely placed over the next section */
@media (max-width: 700px) {
  .hx__stage { padding-bottom: 28px !important; }
  .hx-octo { position: static; display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 10px; margin: 16px 0 0; padding: 0 4px; }
  .hx-octo__bubble { position: static; order: 0; flex: 1 1 auto; width: auto; max-width: none; border-radius: 20px 20px 4px 20px; transform-origin: bottom right; text-align: left; }
  .hx-octo__bubble::after { display: none; }
  .hx-octo__char { order: 1; flex: none; width: 84px; height: 84px; }
  .hx-octo__char .octo { filter: drop-shadow(0 10px 14px rgba(26,25,21,.22)); }
}
/* stacked galleries: the angled sand/mint bands read as hard wedges on a narrow stage, so the
   ground becomes soft pools of the same colours */
@media (max-width: 1239px) {
  .ss-showwrap .ss-showpanel .ssx.ssx--live::before {
    background:
      linear-gradient(180deg, var(--paper) 0%, rgba(244,241,233,0) 22%, rgba(244,241,233,0) 78%, var(--paper) 100%),
      radial-gradient(60% 45% at 50% 60%, rgba(255,255,255,.8), transparent 75%),
      radial-gradient(70% 55% at 20% 30%, #E4EDE6, transparent 70%),
      radial-gradient(70% 55% at 85% 70%, #EFE6D2, transparent 70%),
      radial-gradient(60% 50% at 50% 100%, rgba(214,229,219,.7), transparent 70%),
      transparent; }
  .ss-showwrap[data-sky="platform"] .ss-showpanel .ssx.ssx--live::before, .ss-showwrap[data-sky="platform"] .ssx--octo::before {
    background:
      linear-gradient(180deg, var(--paper) 0%, rgba(244,241,233,0) 22%, rgba(244,241,233,0) 78%, var(--paper) 100%),
      radial-gradient(60% 45% at 50% 60%, rgba(255,255,255,.8), transparent 75%),
      radial-gradient(70% 55% at 18% 28%, #EFE6D2, transparent 70%),
      radial-gradient(70% 55% at 85% 72%, #E8DFCB, transparent 70%),
      radial-gradient(60% 50% at 50% 100%, rgba(214,229,219,.6), transparent 70%),
      transparent; }
}
/* footer on phones: the two "What we do" columns stack as one list without a hole between them */
@media (max-width: 700px) { footer [style*="gap:40px"] { gap: 0 !important; } }
/* the tinted "first month" section dissolves into the page instead of starting on a hard line */
section[style*="background:var(--paper-tint)"] { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-tint) 14%, var(--paper-tint) 86%, var(--paper) 100%) !important; }
/* laptop screens on phones run a 768px canvas (apple.js, .hx-canvas--narrow): the analytics
   dashboard's rail slims and its four stat tiles go two by two */
.hx-canvas--narrow .an { grid-template-columns: 150px 1fr; }
.hx-canvas--narrow .an__stats { grid-template-columns: repeat(2, 1fr); }
.hx-canvas--narrow .an__main { padding: 16px 16px; gap: 12px; }
/* pointer devices: the tab bar is not wheel-scrollable any more, so every pill must fit —
   a touch tighter on wide bars (eight systems) */
@media (hover: hover) and (pointer: fine) and (min-width: 841px) { .ss-tab { padding: 10px 14px; font-size: 13.5px; } }
@media (hover: hover) and (pointer: fine) and (max-width: 1100px) { .ss-tabs { overflow-x: auto; } }
/* touch: the strip's height snaps to the settled card at once — an easing height on a scroller
   would still be moving if the next swipe starts inside the half second */
@media (hover: none), (pointer: coarse) { .ss-gallery { transition: none; } }
/* phones: the dot field and the sky canvases are not created at all (apple.js) */
@media (hover: none), (pointer: coarse) { .story__dots, .ssx__sky { display: none !important; } }

/* Build screen on a 768px phone canvas: the rail, Triggers and Run log columns go slim so the
   white canvas gets the width its two lanes of boxes need — nothing sits over the palette or
   behind the log any more */
.hx-canvas--narrow .pf--build { grid-template-columns: 148px 1fr; }
.hx-canvas--narrow .pf--build .pf__side { padding: 18px 10px; } .hx-canvas--narrow .pf--build .pf__client { font-size: 11px; padding: 6px 6px; gap: 6px; white-space: nowrap; } .hx-canvas--narrow .pf--build .pf__nav { font-size: 12px; padding: 7px 9px; }
.hx-canvas--narrow .pf--build .pf__main { padding: 18px 14px; gap: 12px; }
.hx-canvas--narrow .pf__build { grid-template-columns: 82px minmax(0, 1fr) 104px; gap: 8px; }
.hx-canvas--narrow .pf__palette { padding: 8px; gap: 4px; } .hx-canvas--narrow .pf__pal { font-size: 9.5px; padding: 4px 5px; gap: 5px; } .hx-canvas--narrow .pf__palette .pf__k { font-size: 9px; }
.hx-canvas--narrow .pf__canvas--rich { padding: 12px 6px; gap: 12px; }
.hx-canvas--narrow .pf__canvas--rich .pf__node { width: 74px; padding: 7px 4px; gap: 3px; } .hx-canvas--narrow .pf__canvas--rich .pf__node .ai { width: 22px; height: 22px; border-radius: 7px; }
.hx-canvas--narrow .pf__canvas--rich .pf__node b { font-size: 9px; line-height: 1.2; } .hx-canvas--narrow .pf__canvas--rich .pf__node span { font-size: 8px; line-height: 1.25; }
.hx-canvas--narrow .pf__canvas--rich .pf__wire { width: 8px; }
.hx-canvas--narrow .pf__log { padding: 8px; gap: 2px; } .hx-canvas--narrow .pf__log .pf__k { font-size: 9px; }
.hx-canvas--narrow .pf__log p { grid-template-columns: 1fr; gap: 1px; font-size: 9.5px; line-height: 1.3; padding: 4px 0; } .hx-canvas--narrow .pf__log em { font-size: 8.5px; }