/* ============================================================
   Ragnarok AI — 1:1 rebuild of deslopify.framer.website
   Design canvas: 1200 x 8661, lavender #F3F3F9 on white body
   ============================================================ */

:root {
  --ink: #201f32;
  --ink-heading: #1f1f32;
  --gray: #4d5564;
  --blue: #262ef2;
  --blue-soft: #6e73fa;
  --line: #e3e2e5;
  --bg: #ffffff; /* v2 direction: pure white page */
  --card-gray: #e4e4f0;
  --fill: #e5eaff;
  --sans: "Inter", sans-serif;
  --grotesk: "Inter", sans-serif; /* body sans everywhere per client */
  --serif: "Lora", serif;
  --jakarta: "Plus Jakarta Sans", "Inter", sans-serif; /* v2 hero direction */
  --hero-navy: #263850;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; }
a { text-decoration: none; color: inherit; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

.canvas {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 0;
  background: var(--bg);
  overflow: visible;
}
/* uniform vertical rhythm: 200px between sections */
.hero-zone, .why-us, .intelligence, .showcase, .hiw, .bento,
.pricing-sec, .unfold, .testimonials { margin-bottom: 200px; }
/* exception: the Cal frame hands off tightly into the burn footer */
.testimonials { margin-bottom: 56px; }

/* eyebrow tag — template style: ⟪ icon Label ⟫ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}
.tag::before, .tag::after {
  content: '';
  width: 10px;
  height: 13px;
  flex-shrink: 0;
  image-rendering: pixelated;
  background-size: 100% 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.012 13.188" overflow="visible"><path d="M 3.164 13.188 L 0 6.314 L 3.01 0 L 4.116 0 L 1.162 6.314 L 4.27 13.188 Z M 8.906 13.188 L 5.742 6.314 L 8.752 0 L 9.858 0 L 6.904 6.314 L 10.012 13.188 Z" fill="rgba(31,38,50,0.4)"/></svg>');
}
.tag::after { transform: scaleX(-1); }
.tag img {
  width: 24px;
  height: 24px;
  margin-right: -4px; /* icon-to-text gap is 8px in the template, brackets get 12px */
}
h2 .blue { color: var(--blue); }

/* ---------- shared: badge with ⟪ ⟫ brackets ---------- */
.badge {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min-content;
  white-space: nowrap;
}
.bracket {
  width: 10px;
  height: 13px;
  flex-shrink: 0;
  image-rendering: pixelated;
  background-size: 100% 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.012 13.188" overflow="visible"><path d="M 3.164 13.188 L 0 6.314 L 3.01 0 L 4.116 0 L 1.162 6.314 L 4.27 13.188 Z M 8.906 13.188 L 5.742 6.314 L 8.752 0 L 9.858 0 L 6.904 6.314 L 10.012 13.188 Z" fill="rgba(31,38,50,0.4)"/></svg>');
}
.bracket.flip { transform: scaleX(-1); }
.badge-body {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--grotesk);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.badge-body img { width: 24px; height: 24px; }

/* ---------- shared: dark button ---------- */
.btn-dark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  background: var(--ink);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
/* hover: gentle lift + a skewed shine sweeping across the pill */
.btn-dark:hover { transform: translateY(-2px); }
.btn-dark::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -45%;
  width: 34%;
  background: linear-gradient(105deg, #ffffff00, #ffffff2e 45%, #ffffff59 50%, #ffffff2e 55%, #ffffff00);
  transform: skewX(-16deg) translateX(-60%);
  transition: transform .01s;
  pointer-events: none;
}
.btn-dark:hover::after {
  transform: skewX(-16deg) translateX(480%);
  transition: transform .65s cubic-bezier(.35, .8, .25, 1);
}
.btn-dark-label {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: #fff;
  white-space: pre;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}
.btn-dark { flex-direction: row; gap: 0; }
.btn-arrow {
  width: 16px; height: 16px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.btn-arrow img { width: 16px; height: 16px; flex-shrink: 0; transition: transform .35s cubic-bezier(.3,.7,.2,1); }
.btn-arrow img:last-child { position: absolute; left: -16px; }
.btn-dark:hover .btn-arrow img { transform: translateX(16px); }
.btn-block { width: 100%; }

/* ============ NAV ============ */
/* ink bar, fixed; condenses (narrower, tighter) once you scroll */
.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  /* lives outside the zoomed .canvas, so it sizes against the real viewport */
  width: min(980px, calc(100vw - 40px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* v2 direction: transparent bar over the hero sky, ink content */
  padding: 10px 0;
  background: transparent;
  border-radius: 16px;
  box-shadow: none;
  z-index: 100;
  transition:
    width .55s cubic-bezier(.22,1,.36,1),
    padding .55s cubic-bezier(.22,1,.36,1),
    top .4s cubic-bezier(.22,1,.36,1),
    background .35s,
    box-shadow .35s,
    border-radius .4s;
}
.nav-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.nav-logo img {
  width: 36px;
  height: 36px;
  /* brand mark stays its native near-black on the light bar */
}
.nav-logo span {
  font-family: var(--jakarta);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  transition: opacity .3s, max-width .5s cubic-bezier(.22,1,.36,1);
}
.nav-links { display: flex; align-items: center; }
.nav-links a {
  font-family: var(--jakarta);
  font-size: 15px;
  font-weight: 500;
  color: #5c6674;
  padding: 8px 14px;
  white-space: nowrap;
  transition: color .2s, padding .55s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  flex-shrink: 0;
  padding: 10px 20px;
  background: var(--ink);
  color: #fff;
  font-family: var(--jakarta);
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 10px;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), padding .55s cubic-bezier(.22,1,.36,1);
}
.nav-cta:hover { transform: scale(1.05); }
/* scrolled: condense into a frosted white pill so it reads on any section */
.nav.condensed {
  width: min(640px, calc(100vw - 40px));
  top: 12px;
  padding: 7px 8px 7px 14px;
  border-radius: 14px;
  background: #ffffffd6;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -20px #201f3240;
}
.nav.condensed .nav-links a { padding: 8px 8px; }
.nav.condensed .nav-cta { padding: 8px 14px; }
/* condensed: mark only, wordmark collapses away */
.nav.condensed .nav-logo span { opacity: 0; max-width: 0; }

/* ============ HERO ============ */
/* v2 direction: full-bleed soft-sky photo, left-aligned Plus Jakarta hero */
.hero-zone { position: relative; height: 1130px; }
.hero-zone::before {
  content: '';
  position: absolute;
  top: 0;
  height: 1130px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  /* sun layers first (they paint on top of the sky photo, under content):
     iOS-Weather-style hot core + warm bloom + spectral halo + lens ghost */
  background:
    radial-gradient(340px 340px at 150px 105px, #ffffff 0%, #ffffff 12%, #fffffff2 21%, #ffffffb8 33%, #ffffff00 62%),
    radial-gradient(500px 500px at 150px 105px, #ffffff00 42%, #ffe2b447 56%, #ffb9c940 66%, #bcd9ff4d 76%, #ffffff00 90%),
    radial-gradient(640px 640px at 150px 105px, #fff3d24d 0%, #ffffff00 58%),
    radial-gradient(950px 950px at 150px 105px, #7fb2e600 24%, #7fb2e64a 52%, #86b4e42e 74%, #86b4e400 95%),
    linear-gradient(180deg, #ffffff00 58%, var(--bg) 96%),
    url('assets/hero-sky.jpg') center top / cover no-repeat;
  pointer-events: none;
}
/* ASCII paper plane behind the hero headline (from the template's CTA section) */
.ascii-plane {
  position: absolute;
  left: 50%;
  top: 96px;
  translate: -50% 0;
  width: 1000px;
  height: 562px;
  pointer-events: none;
  mask-image: radial-gradient(55% 55% at 50% 50%, #000 30%, #0000 100%);
  -webkit-mask-image: radial-gradient(55% 55% at 50% 50%, #000 30%, #0000 100%);
}
/* ASCII clouds flanking section headings (same pattern as .ascii-thumb in hiw) */
.head-clouds {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1200px;
  height: 0;
  translate: -50% -50%;
  pointer-events: none;
}
.ascii-cloud {
  position: absolute;
  width: 470px;
  height: 470px;
  top: -235px;
  mask-image: radial-gradient(50% 50%, #000 0%, #00000073 57.3%, #0000 100%);
  -webkit-mask-image: radial-gradient(50% 50%, #000 0%, #00000073 57.3%, #0000 100%);
}
.ascii-cloud.left { left: -190px; }
.ascii-cloud.right { right: -190px; scale: -1 1; }
.showcase-head, .bento-head, .pricing-head, .testi-head { position: relative; }
.hero {
  position: absolute;
  top: 141px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  /* aligned with the fixed nav's logo; --heroPad is computed by the zoom-fit
     script (110px is the exact value for full-size desktop layouts) */
  padding-left: var(--heroPad, 110px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-align: left;
}
/* two-part announcement pill */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 20px 7px 7px;
  border-radius: 999px;
  background: #ffffff85;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px -14px #1b2a4a33;
}
.hero-pill-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px -4px #1b2a4a2e;
  font-family: var(--jakarta);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--hero-navy);
}
.hero-pill-chip img { width: 20px; height: 20px; border-radius: 6px; }
.hero-pill-text {
  font-family: var(--jakarta);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #3d4c63;
}
.hero-pill-text .hpt-short { display: none; }
.hero-heading { width: 100%; position: relative; }
/* app-icon stickers flanking the headline (Claude left, App Store right) */
.hero-heading h1, .hero-heading .type-line { position: relative; z-index: 1; }
.hero-ico {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  /* physically-plausible shadow: contact layer + geometric ramp of ever
     softer, farther, fainter diffuse layers (overhead light) */
  --shadow-ramp:
    0 1px 1px #0f0f360f,
    0 2px 2px #0f0f360d,
    0 4px 5px #0f0f360c,
    0 9px 10px #0f0f360b,
    0 18px 22px #0f0f360a,
    0 34px 42px #0f0f360a;
  box-shadow: var(--shadow-ramp);
  z-index: 0;
}
.hero-ico {
  border-radius: 21%; /* iOS squircle-ish; crops the official artwork */
  overflow: hidden;
}
.hero-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the App Store SVG carries its own rounded corners — oversize it a touch so
   the container's crop defines the shape instead */
.hero-ico-app img { scale: 1.06; }
.hero-ico-claude {
  left: -50px;
  top: -10px;
  rotate: -9deg;
}
.hero-ico-app {
  right: -50px;
  bottom: -4px;
  rotate: 9deg;
  /* extra bounce shadow tinted by the blue tile */
  box-shadow: var(--shadow-ramp), 0 12px 26px -10px #1470e93d;
}
.hero-heading { margin-top: 26px; }
/* H1 spec from reference: Plus Jakarta ExtraBold 64 / 115% / -4% */
.hero h1, .type-line {
  font-family: var(--jakarta);
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--hero-navy);
}
.type-line {
  min-height: 74px;
  white-space: nowrap;
}
/* typed characters: pop in with a blur-settle, selection paints per-char */
.type-line .tch {
  display: inline-block;
  white-space: pre;
  padding: 5px 0 9px;
  margin: -5px 0 -9px;
  animation: tch-in .3s cubic-bezier(.2, .9, .3, 1.35) both;
}
@keyframes tch-in {
  from { opacity: 0; transform: translateY(16px) scale(1.35) rotate(4deg); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.type-line .tch.sel { background: #d7e8fb; }
/* testimonial line skips the selection highlight (hero keeps it) */
.testi-big .type-line .tch.sel { background: transparent; }
/* editor caret: chunky rounded bar, blinks while idle, solid while working */
.type-cursor {
  display: inline-block;
  width: 9px;
  height: 64px;
  margin-left: 5px;
  border-radius: 2.5px;
  background: #4e9af1;
  vertical-align: -8px;
  animation: blink 1.1s steps(2) infinite;
}
.type-cursor.solid { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
/* body spec from reference: Plus Jakarta Medium 18 / 26 / -1% */
.hero-sub {
  margin-top: 12px;
  font-family: var(--jakarta);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: #515e76;
  max-width: 350px;
}
.hero .btn-dark {
  margin-top: 30px;
  padding: 15px 26px;
  border-radius: 999px;
  /* slight white inner shadow: lit top edge + faint inner rim */
  box-shadow:
    inset 0 1.5px 0 #ffffff47,
    inset 0 0 12px #ffffff14;
}

/* ============ HERO PHONE TICKER ============ */
.hero-ticker-wrap {
  --split: 49.5575%;
  position: absolute;
  /* 72px gap between the hero CTA and the ticker's overhanging pills */
  top: 577px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  height: 536px;
}
.ticker-gray {
  pointer-events: none;
  clip-path: inset(-40px calc(100% - var(--split)) -40px 0);
  z-index: 1;
}
.ticker {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  overflow: clip;
  cursor: grab;
  user-select: none;
}
.ticker:active { cursor: grabbing; }
/* hero tickers: headroom inside the clip box so the edge pills' overhang
   AND the arc lift (edge cards rise ~64px on the curve) survive
   overflow: clip (-70 + 90 = the original 20px visual offset) */
.hero-ticker-wrap .ticker { top: -70px; padding-top: 90px; }
/* roomier spacing between hero cards (base track gap is 30px) */
.hero-ticker-wrap .ticker-track { gap: 46px; }
.ticker-track {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  will-change: transform;
}
.phone-card {
  position: relative;
  width: 251px;
  aspect-ratio: 0.527027;
  border-radius: 32px;
  background: #fff; /* v2 direction: white cards over the sky fade */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.phone-frame {
  width: 203px;
  aspect-ratio: 0.461095;
  border-radius: 24px;
  border: 3px solid #ededed;
  overflow: clip;
  box-shadow: 0 20px 40px -20px #0f0f3612;
}
.phone-frame img { width: 100%; height: 100%; object-fit: cover; }
/* before/after label pill — straddles the card's top edge; the bg-colored
   ring notches it out of the container frame */
.ba-pill {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  padding: 5px 12px;
  background: #fff;
  border: 3px solid var(--bg);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}
.ticker-gray .ba-pill { color: var(--gray); }

.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.hero-overlay-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--split) - 8px);
  width: 16px;
  background: #fff;
  border-radius: 24px;
  backdrop-filter: blur(42px);
  box-shadow: 0 0 0 1.60714px #0161970a, 0 51.4286px 38.5714px -19.2857px #004b760f, 0 17.6786px 6.42857px #00527603, 0 9.64286px 6.42857px #00527605, 0 4.82143px 4.82143px #003d7608, 0 1.60714px 1.60714px #003d760a;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}
.hero-overlay-circles {
  position: absolute;
  top: 50%; left: var(--split);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
  background: #fff6;
  border-radius: 85px;
  padding: 11.88px;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 0 .85px #01619705;
}
.circle-mid {
  background: #fff9;
  border-radius: 85px;
  padding: 15.27px;
  box-shadow: 0 .85px 1px #003d760a, 0 5.09px 4px #00537605, 0 0 0 .85px #0161970a;
}
.circle-core {
  width: 58px; height: 58px;
  border-radius: 85px;
  display: grid;
  place-items: center;
  background: var(--blue);
  box-shadow: inset 0 16.48px 58.2857px -8.24px #ffffff29, inset 0 1.03px 1.21429px #ffffff29, inset 0 2.06px 4.85714px -1.03px #ffffff1f, 0 1.03px 1.21429px #07011308, 0 2.06px 2.42857px -1.03px #07011308, 0 4.12px 4.85714px -2.06px #07011308, 0 6.18px 7.28571px -3.09px #07011308, 0 10.3px 12.1429px -5.15px #07011308, 0 16.48px 19.4286px -6.18px #07011308;
}
.circle-core svg { width: 55%; height: 55%; }

/* ============ WHY CHOOSE US + LOGOS ============ */
.why-us {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.logo-flips {
  width: 713px;
  height: 130px;
  display: flex;
  align-items: center;
}
.logo-flip {
  flex: 1;
  min-width: 0;
  /* clip window = exactly one logo, no padding — overflow clips at the padding
     box, so any padding here shows slices of the neighboring stack items */
  height: 56px;
  overflow: clip;
  display: flex;
  justify-content: center;
}
.logo-flip-stack {
  display: flex;
  flex-direction: column;
  width: 120px;
  flex-shrink: 0;
}
.logo-flip-stack img {
  width: 120px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
  margin-bottom: 10px;
}

/* ============ ASCII CANVASES ============ */
.ascii-gear {
  position: absolute;
  top: -233px;
  left: 50%;
  transform: translateX(-50%);
  width: 687px;
  height: 687px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 60%);
  z-index: 0;
}

/* ============ INTELLIGENCE SCROLL-JACK (features 1) ============ */
.intelligence {
  position: relative;
  height: 2700px;
  /* above .ai-wave (z 50) so the pinned content is never tinted by the glow */
  z-index: 60;
}
.intelligence-sticky {
  --p: 0;
  --glow: 0;
  --r: 0;
  --bgr: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 24px;
  overflow: visible;
}
.intelligence-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 494px;
  margin: 0 auto 56px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.intelligence-head h2,
.pricing-head h2,
.showcase-head h2,
.hiw-head-content h2 {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1em;
  color: var(--ink-heading);
}
.iphone-stage {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iphone {
  position: relative;
  height: calc(100% - 28px);
  max-height: 600px;
  aspect-ratio: 300 / 650;
  width: auto;
  transform: scale(calc(0.94 + 0.06 * min(1, var(--p) * 5)));
  z-index: 2;
}
.iphone-screens {
  position: absolute;
  inset: var(--screen-inset, 0px);
  border-radius: var(--screen-radius, 44px);
  overflow: hidden;
  border: 10px solid #1c1c1e;
  box-shadow: 0 0 0 2px #b9bcc4, 0 40px 80px -30px #0f0f3640;
  background: #000;
}
.iphone-frame {
  position: absolute;
  inset: var(--frame-inset, -2%);
  width: calc(100% - 2 * var(--frame-inset, -2%));
  height: calc(100% - 2 * var(--frame-inset, -2%));
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}
/* real mockup present → hide the CSS bezel */
.iphone.has-frame .iphone-screens {
  border: 0;
  box-shadow: none;
  inset: var(--screen-inset, 4.5% 6.5%);
  border-radius: var(--screen-radius, 34px);
}
.screen-warp {
  position: absolute;
  inset: -14px;
}
.screen-warp.rippling {
  filter: url(#ai-ripple);
  will-change: filter;
}
.iphone-screen {
  /* inset compensates the warp layer's -14px overscan so the app art
     renders at true screen size (no zoom); the margin is ripple headroom */
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  object-fit: cover;
}
.screen-shimmer { inset: 14px !important; }
.screen-new {
  -webkit-mask-image: linear-gradient(0deg, #000 calc(var(--r) * 1.5% - 35%), transparent calc(var(--r) * 1.5% - 5%));
  mask-image: linear-gradient(0deg, #000 calc(var(--r) * 1.5% - 35%), transparent calc(var(--r) * 1.5% - 5%));
}
.screen-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, #ffffff42 46%, #b9c0ff55 50%, #ffffff42 54%, transparent 70%);
  background-size: 260% 260%;
  background-position: calc(120% - var(--p) * 240%) 0;
  opacity: calc(var(--glow) * 0.9);
  pointer-events: none;
  mix-blend-mode: screen;
}
/* full-viewport Apple-Intelligence edge glow */
.ai-wave {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: var(--glow, 0);
  visibility: hidden;
  overflow: clip;
  /* screen-aligned mask keeps the center clear while the lobes rotate inside */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, transparent 48%, #000 96%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, transparent 48%, #000 96%);
}
.ai-wave.on { visibility: visible; }
/* big soft color lobes on oversized square layers that rotate with scroll;
   hue-rotate runs on top so the palette travels while the lobes orbit */
.ai-wave::before,
.ai-wave::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 165vmax; height: 165vmax;
  margin: -82.5vmax 0 0 -82.5vmax;
}
/* v2 palette: the site's veil colors (sky blue, blush, lavender, peach)
   instead of the Siri RGB set — no hue-rotate, so the hues never drift
   into greens; the lobes still orbit with scroll for the motion */
.ai-wave::before {
  background:
    radial-gradient(42vmax 34vmax at 26% 50%, #a9adf5e6, transparent 68%),
    radial-gradient(44vmax 36vmax at 74% 44%, #f2b8c0d9, transparent 70%),
    radial-gradient(42vmax 34vmax at 40% 68%, #a8cdf0d9, transparent 68%),
    radial-gradient(46vmax 38vmax at 64% 66%, #c3aef2e6, transparent 70%),
    radial-gradient(36vmax 30vmax at 52% 30%, #f7d9c4b3, transparent 70%),
    radial-gradient(34vmax 28vmax at 33% 33%, #efa9d2b3, transparent 68%);
  transform: rotate(calc(var(--ang, 0deg) * 0.15));
  filter: blur(46px);
}
.ai-wave::after {
  background:
    radial-gradient(58vmax 48vmax at 70% 55%, #b39deb99, transparent 72%),
    radial-gradient(54vmax 46vmax at 33% 38%, #f2b8c08c, transparent 72%),
    radial-gradient(56vmax 48vmax at 50% 70%, #8fbde98c, transparent 72%);
  transform: rotate(calc(var(--ang, 0deg) * -0.1));
  filter: blur(90px);
  opacity: .85;
}

.float-card {
  --m: 0;
  position: absolute;
  width: 276px;
  -webkit-mask-image: linear-gradient(105deg, #000 calc(var(--m) * 160% - 30%), transparent calc(var(--m) * 160%));
  mask-image: linear-gradient(105deg, #000 calc(var(--m) * 160% - 30%), transparent calc(var(--m) * 160%));
  translate: 0 calc((1 - var(--m)) * 24px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 20px 30px -18px #004b760f, 0 2px 4px #003d760a;
  z-index: 3;
}
.float-card-left { top: 21%; left: 120px; }
.float-card-right { top: 55%; right: 137px; }
.float-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px 4px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4.9px;
  padding: 2.45px 9.8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  line-height: 150%;
  color: var(--ink);
  white-space: pre;
}
.chip img { width: 16px; height: 16px; }
.float-card-text { padding: 20px 18px; }
.float-card-text h4 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-heading);
  margin-bottom: 6px;
}
.float-card-text p {
  font-size: 15px;
  line-height: 150%;
  color: var(--gray);
}

/* ---- v2 direction: pink veil, Jakarta heading, reference cards, state toggle ---- */
.intelligence .ascii-gear, .intelligence .head-clouds { display: none; }
.intelligence-sticky::before {
  content: '';
  position: absolute;
  top: 110px;
  bottom: -40px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  /* stretched, not cropped — keeps the pre-baked soft alpha edges.
     hue-shifted from the source red into a soft mint (process keeps the
     red original, testimonials wears the orange shift) */
  background: url('assets/intelligence-bg.jpg') center / 100% 100% no-repeat;
  filter: hue-rotate(150deg) saturate(0.9);
  pointer-events: none;
  z-index: 0;
}
.intelligence-head { gap: 16px; }
.bento-head { gap: 16px; }
.intelligence-head .tag,
.bento-head .tag,
.testi-head .tag,
.showcase-head .tag {
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--jakarta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hero-navy);
  box-shadow: 0 8px 20px -10px #59232a24, 0 1px 2px #59232a14;
  gap: 0;
}
.intelligence-head .tag::before,
.intelligence-head .tag::after,
.bento-head .tag::before,
.bento-head .tag::after,
.testi-head .tag::before,
.testi-head .tag::after,
.showcase-head .tag::before,
.showcase-head .tag::after { content: none; }
.intelligence-head .tag img,
.bento-head .tag img,
.testi-head .tag img,
.showcase-head .tag img { display: none; }
.intelligence-head h2,
.bento-head h2,
.showcase-head h2 {
  font-family: var(--jakarta);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--hero-navy);
}
.intelligence-head .blue,
.bento-head .blue,
.showcase-head .blue { color: var(--hero-navy); }
.float-card { border-radius: 16px; border-color: #efecf3; }
.float-card .chip {
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--jakarta);
  font-size: 13px;
  font-weight: 600;
  color: var(--hero-navy);
}
.float-card .chip img { width: 14px; height: 14px; }
.float-card-text h4 {
  font-family: var(--jakarta);
  font-size: 17px;
  font-weight: 700;
  color: var(--hero-navy);
}
.float-card-text p {
  font-family: var(--jakarta);
  font-size: 13.5px;
  line-height: 1.45;
}
/* segmented state pills straddling the phone's bottom edge; the light thumb
   slides (and resizes) from "Triage Time" to "Getting Sh*t Done" as the
   screen morph runs — driven per-frame from the scroll-jack */
.stage-toggle {
  position: absolute;
  left: 50%;
  bottom: -19px;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  background: #15151d;
  border-radius: 999px;
  box-shadow: 0 16px 34px -14px #10122e66;
  white-space: nowrap;
  z-index: 4;
}
.stage-toggle-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 100px;
  background: #cfe3fa;
  border-radius: 999px;
  will-change: transform, width;
}
.st-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  font-family: var(--jakarta);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffffd6;
  transition: color .25s;
}
.st-item svg { width: 14px; height: 14px; }
.st-item.on { color: var(--hero-navy); }

/* ============ V2 PROCESS SCROLL-JACK (replaces hiw) ============ */
.process { position: relative; height: 3400px; margin-bottom: 200px; }
.process-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* the red veil from section 2, full-bleed behind the pinned stage */
.process-sticky::before {
  content: '';
  position: absolute;
  top: 30px;
  bottom: -50px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  background: url('assets/intelligence-bg.jpg') center / 100% 100% no-repeat;
  pointer-events: none;
}
.proc-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* --- phone --- */
.proc-phone {
  position: relative;
  /* sized to the viewport so pills + heading always fit below the pin */
  height: min(490px, 52vh);
  aspect-ratio: 1 / 2;
  width: auto;
  background: #fdfbf6;
  border-radius: 46px;
  padding: 12px;
  box-shadow: 0 34px 70px -34px #4a1e1e40, 0 2px 8px #4a1e1e14;
  z-index: 2;
}
.proc-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: #fff;
}
.proc-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* after screen: bottom-up wipe when step 3 lands */
.proc-after {
  clip-path: inset(100% 0 0 0);
  transition: clip-path .8s cubic-bezier(.7, 0, .2, 1);
}
[data-step="2"] .proc-after { clip-path: inset(0 0 0 0); }
/* scanning sheet: loops bottom-to-top while step 2 is active */
.proc-scan {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
[data-step="1"] .proc-scan { opacity: 1; }
.proc-scan::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 46%;
  top: 100%;
  background: linear-gradient(180deg, #ffffff00, #7c9dff24 40%, #a5c8ff59 78%, #ffffffcc 100%);
  border-bottom: 3px solid #cfe3fa;
  filter: drop-shadow(0 6px 14px #9db8ff66);
  animation: proc-scan 2.2s linear infinite;
}
@keyframes proc-scan {
  from { top: 100%; }
  to { top: -50%; }
}
@media (prefers-reduced-motion: reduce) {
  .proc-scan::before { animation: none; top: 30%; }
}
/* --- app icons: hide behind the phone, slide out during the scan step --- */
.proc-ico {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 66px;
  height: 66px;
  border-radius: 17px;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 40px -18px #4a1e1e4d;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.45);
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
}
.proc-ico img { width: 100%; height: 100%; object-fit: cover; }
.pi-app img { scale: 1.06; }
.pi-figma svg { width: 30px; height: 45px; }
.pi-gpt svg { width: 34px; height: 34px; }
[data-step="1"] .pi-claude { opacity: 1; transform: translate(calc(-50% - 222px), calc(-50% - 116px)) rotate(-9deg) scale(1); }
[data-step="1"] .pi-app { opacity: 1; transform: translate(calc(-50% + 222px), calc(-50% - 82px)) rotate(8deg) scale(1); }
[data-step="1"] .pi-figma { opacity: 1; transform: translate(calc(-50% - 208px), calc(-50% + 78px)) rotate(-6deg) scale(1); }
[data-step="1"] .pi-gpt { opacity: 1; transform: translate(calc(-50% + 212px), calc(-50% + 106px)) rotate(7deg) scale(1); }
/* --- floating cards --- */
.proc-req, .proc-testi {
  position: absolute;
  width: 232px;
  background: #fff;
  border: 1px solid #f0ece4;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 22px 44px -24px #4a1e1e38;
  z-index: 3;
  opacity: 0;
  transition: opacity .4s, transform .55s cubic-bezier(.2, .9, .3, 1.2);
}
.proc-req { left: -138px; top: 62px; transform: translateY(22px) rotate(-4deg); }
[data-step="0"] .proc-req { opacity: 1; transform: translateY(0) rotate(-3deg); }
/* step-1 companions: the client's repo + design doc, staggered in */
.proc-git, .proc-md {
  position: absolute;
  background: #fff;
  border: 1px solid #f0ece4;
  border-radius: 16px;
  box-shadow: 0 22px 44px -24px #4a1e1e38;
  z-index: 3;
  opacity: 0;
  transition: opacity .4s, transform .55s cubic-bezier(.2, .9, .3, 1.2);
}
.proc-git {
  right: -152px;
  top: 96px;
  width: 208px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  transform: translateY(22px) rotate(5deg);
}
[data-step="0"] .proc-git { opacity: 1; transform: translateY(0) rotate(3deg); transition-delay: .07s, .07s; }
.proc-git svg { width: 27px; height: 27px; flex-shrink: 0; }
.proc-git-text strong { display: block; font-family: var(--jakarta); font-size: 13px; font-weight: 700; color: var(--hero-navy); }
.proc-git-text span { font-size: 11.5px; color: var(--gray); }
.proc-md {
  left: -112px;
  bottom: 110px;
  width: 186px;
  padding: 13px 15px;
  transform: translateY(22px) rotate(-5deg);
}
[data-step="0"] .proc-md { opacity: 1; transform: translateY(0) rotate(-2deg); transition-delay: .14s, .14s; }
.proc-md-head { display: flex; align-items: center; gap: 7px; }
.proc-md-head svg { width: 15px; height: 15px; color: var(--hero-navy); }
.proc-md-head strong { font-family: var(--jakarta); font-size: 13px; font-weight: 700; color: var(--hero-navy); }
.proc-md .proc-req-lines { margin-top: 10px; }
.proc-md .proc-req-lines span:nth-child(2) { width: 84%; }
.proc-req .sa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--jakarta);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hero-navy);
}
.proc-req .sa-chip svg { width: 14px; height: 14px; }
.proc-req-lines { margin-top: 12px; display: grid; gap: 7px; }
.proc-req-lines span { height: 8px; border-radius: 4px; background: #eeebe3; }
.proc-req-lines span:last-child { width: 64%; }
.proc-testi { right: -146px; bottom: 106px; transform: translateY(22px) rotate(4deg); }
[data-step="2"] .proc-testi { opacity: 1; transform: translateY(0) rotate(3deg); }
.proc-testi-head { display: flex; align-items: center; gap: 9px; }
.proc-testi-head img { width: 34px; height: 34px; border-radius: 50%; }
.proc-testi-head strong { display: block; font-family: var(--jakarta); font-size: 13px; font-weight: 700; color: var(--hero-navy); }
.proc-testi-head span { font-size: 11.5px; color: var(--gray); }
.proc-testi-head em { margin-left: auto; font-style: normal; font-size: 12px; color: #f5a623; letter-spacing: 1px; }
.proc-testi p { margin-top: 9px; font-family: var(--jakarta); font-size: 12.5px; line-height: 1.45; color: #515e76; }
/* --- step pills straddling the phone bottom --- */
.proc-pills {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  margin-top: -35px;
  background: #101016;
  border-radius: 999px;
  box-shadow: 0 16px 34px -14px #10101659;
  white-space: nowrap;
  z-index: 4;
}
.proc-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 110px;
  background: #fdf4dd;
  border-radius: 999px;
  transition: transform .5s cubic-bezier(.3, 1.3, .4, 1), width .5s cubic-bezier(.3, 1.3, .4, 1);
}
.proc-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  gap: 7px;
  padding: 9px 0;
  font-family: var(--jakarta);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffffd6;
  transition: color .3s;
}
.proc-pill svg { width: 14px; height: 14px; }
.proc-pill.on { color: var(--hero-navy); }
/* --- step heading: masked line reveal --- */
.proc-heads {
  position: relative;
  width: min(720px, 90vw);
  height: 128px;
  margin-top: 36px;
}
.proc-h {
  position: absolute;
  inset: 0;
  text-align: center;
  font-family: var(--jakarta);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.18;
  color: var(--hero-navy);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.proc-h.on { opacity: 1; transition-delay: .05s; }
.proc-h .lm { display: block; overflow: hidden; }
.proc-h .lm span {
  display: block;
  transform: translateY(112%);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.proc-h.on .lm span { transform: none; }
.proc-h.on .lm:nth-child(2) span { transition-delay: .09s; }

/* ============ SHOWCASE (gallery toggle) ============ */
.showcase {
  position: relative;
  width: var(--vwz, 100vw);
  margin-left: calc((100% - var(--vwz, 100vw)) / 2);
  overflow-x: clip;
}
.showcase-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.showcase-head {
  width: 494px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: 2;
  text-align: center;
}
.showcase-head .blue { color: var(--hero-navy); } /* v2: both lines navy */
.showcase-body {
  width: 1281px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.pill-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  /* solid-enough tint so the toggle (and its white thumb) reads against the
     pale sky bg — the old #fff6 wash was invisible */
  background: #dde3eeb8;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px #0161970f, 0 10px 24px -16px #0f2c5426;
  z-index: 3;
}
.pill-thumb {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: 0;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 1px 1px #003d760a, 0 6px 4px #00537605, 0 0 0 1px #0161970a;
  transition: left .55s cubic-bezier(.34,1.56,.64,1), width .55s cubic-bezier(.34,1.56,.64,1);
}
.pill {
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 500;
  color: var(--gray);
  opacity: .4;
  transition: opacity .25s;
}
.pill { position: relative; z-index: 1; }
.pill.active { opacity: 1; }
.showcase-ticker-wrap {
  position: relative;
  width: var(--vwz, 100vw);
  height: 586px;
}
.showcase-ticker-wrap .ticker { top: 0; left: 0; right: 0; }
.shot-card {
  width: 290px;
  height: 518px;
  background: var(--card-gray);
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-icons {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: max-content;
  height: 92px;
  background: var(--bg);
  border-radius: 22px;
  backdrop-filter: blur(7px);
  padding: 7.85px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8.74px;
  z-index: 2;
}
.app-icon {
  background: #fff9;
  border-radius: 16px;
  padding: 8.53px;
  box-shadow: 0 .86px 1px #003d760a, 0 5.25px 4px #00537605, 0 0 0 .86px #0161970a;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.app-icon:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 8px 18px -6px #003d7626, 0 0 0 .86px #0161970a;
}
.app-icon:active { transform: translateY(-1px) scale(.94); }
/* two icon docks — the pill toggle swaps which one shows */
.app-icons[data-mode="store"] { display: none; }
.showcase-ticker-wrap.mode-store .app-icons[data-mode="design"] { display: none; }
.showcase-ticker-wrap.mode-store .app-icons[data-mode="store"] { display: flex; }
.app-icon img {
  width: 59px; height: 59px;
  border-radius: 15px;
  opacity: .55;
  transition: opacity .35s;
}
.app-icon.sel img { opacity: 1; }
.app-icon.pop { animation: icon-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes icon-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14) translateY(-3px); }
  100% { transform: scale(1); }
}
/* project ticker layers: blur-crossfade between sets */
.showcase-ticker-wrap .ticker.proj {
  --tint: grayscale(0);
  opacity: 0;
  pointer-events: none;
  filter: blur(16px) var(--tint);
  transform: scale(1.05) translateY(12px);
  transition: opacity .5s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.showcase-ticker-wrap .ticker.proj.active {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0px) var(--tint);
  transform: none;
}
.showcase-caption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.showcase-caption .bracket { margin-top: 0; }
.showcase-caption p {
  width: 337px;
  font-family: var(--grotesk);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  text-align: center;
  color: var(--ink);
}

/* ============ HOW IT WORKS ============ */
.hiw {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 1020px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hiw-header {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 40px 40px 0;
  overflow: hidden;
}
.hiw-head-content {
  position: relative;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  z-index: 2;
}
.hiw-sub {
  width: 80%;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6em;
  color: var(--gray);
}
.steps-pointer {
  width: 71%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
}
.step-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-tab-pill {
  padding: 8px 16px;
  font-family: var(--grotesk);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 110%;
  color: var(--ink);
  opacity: .4;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all .3s;
  background: transparent;
}
.step-tab.active .step-tab-pill {
  opacity: 1;
  background: #fff;
  border-color: var(--line);
}
.step-line {
  width: 1px;
  height: 85px;
  background: var(--line);
}
.steps-panel {
  width: 100%;
  display: flex;
  border: 1px solid var(--line);
}
.steps-left {
  flex: 1;
  height: 400px;
  overflow: clip;
  position: relative;
}
.steps-left-track {
  display: flex;
  flex-direction: column;
  transition: transform .7s cubic-bezier(.65,0,.35,1);
}
.step-content {
  position: relative;
  height: 400px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  flex-shrink: 0;
}
.step-content h3 {
  position: relative;
  z-index: 3;
  font-family: var(--grotesk);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink-heading);
}
.step-content p {
  position: relative;
  z-index: 3;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--gray);
}
.step-progress {
  position: absolute;
  top: -1px; bottom: -1px; left: 0;
  width: 0%;
  background: var(--fill);
  z-index: 1;
}
.step-content.running .step-progress {
  animation: fillacross var(--step-dur, 6s) linear forwards;
}
@keyframes fillacross { from { width: 0%; } to { width: 100%; } }

.steps-right {
  flex: 1;
  height: 400px;
  border-left: 1px solid var(--line);
  position: relative;
  overflow: clip;
  background: var(--card-gray); /* match the ticker card backgrounds */
}
/* right panel slides between adjacent steps (same motion as the left track);
   JS swaps to a quick fade-cut only when a non-adjacent tab is clicked */
.steps-right-track {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .7s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.step-anim {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* step 1 visual: plan card */
.step-plan-card {
  width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 30px -18px #004b760f, 0 2px 4px #003d760a;
}
.plan-lines { display: flex; flex-direction: column; gap: 10px; }
.plan-lines span {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--bg);
}
.plan-lines span:nth-child(2) { width: 80%; }
.plan-lines span:nth-child(3) { width: 60%; }

/* step 2 visual: orbit */
.orbit {
  position: relative;
  width: 360px;
  height: 360px;
}
.orbit-ring {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.ring-1 { inset: 0; }
.ring-2 { inset: 45px; }
.ring-3 { inset: 90px; }
.orbit-set {
  position: absolute;
  animation: orbitspin 40s linear infinite;
}
.set-1, .set-2 { inset: 0; }
.set-3, .set-4 { inset: 45px; animation-duration: 32s; animation-direction: reverse; }
.set-5 { inset: 90px; animation-duration: 26s; }
@keyframes orbitspin { to { transform: rotate(360deg); } }
.orbit .tool {
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  padding: 7px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 1px #003d760a, 0 4px 6px #00537608, 0 0 0 1px #0161970a;
  transform: translate(-50%,-50%) rotate(var(--a)) translateX(calc(50cqw)) rotate(calc(-1 * var(--a)));
}
.orbit-set { container-type: size; }
.orbit .tool img { width: 14px; height: 14px; }
.orbit-logo {
  position: absolute;
  top: calc(50% - 30.5px);
  left: calc(50% - 30.5px);
  width: 61px; height: 61px;
  background: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 1px #003d760a, 0 6px 8px #00537608, 0 0 0 1px #0161970a;
}
.orbit-logo img { width: 36px; height: 36px; border-radius: 8px; }

/* step 3 visual: execution monitor */
.monitor {
  width: 349px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding-top: 11.46px;
  display: flex;
  flex-direction: column;
  gap: 7.64px;
  box-shadow: 0 20px 30px -18px #004b760f, 0 2px 4px #003d760a;
  overflow: hidden;
}
.monitor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}
.monitor-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.monitor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #fe00001a;
  font-size: 12px;
  line-height: 150%;
  color: red;
}
.dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: red;
  display: inline-block;
}
.dot.green { background: #0c9618; }
.monitor-line { height: 1px; background: var(--line); }
.monitor-table {
  padding: 0 8px;
  display: flex;
  flex-direction: column;
}
.m-row { display: flex; }
.m-row .m-cell {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.2;
  color: #201f3280;
}
.m-row.m-head .m-cell {
  padding: 5px 10px;
  font-weight: 500;
  color: var(--ink);
}
.m-ico { display: inline-flex; width: 10px; height: 10px; }
.m-ico.spin { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.monitor-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  font-size: 12px;
  line-height: 150%;
  color: #0c9618;
  background: #e5ffe9;
}

/* ---- step visuals v2: before+request → wobble build → after+testimonial ---- */
.sa-stage { position: absolute; inset: 0; }
.sa-phone {
  position: absolute;
  left: 50%;
  top: 26px;
  translate: -50% 0;
  width: 212px;
  height: calc(100% - 26px);
  /* natural iPhone silver bezel */
  border: 4px solid #dadade;
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #f5f5f7, 0 30px 50px -30px #0f0f3640;
}
.sa-phone img { width: 100%; display: block; }
.sa1-box {
  position: absolute;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  width: 296px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 34px -20px #0f0f3633, 0 2px 5px #003d760a;
}
.sa-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
}
.sa-chip svg { width: 16px; height: 16px; color: #8a8a98; }
.sa1-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sa1-lines span { height: 10px; border-radius: 999px; background: #ececf4; }
.sa1-lines span:last-child { width: 68%; }
/* step 2 — claude × app store wobble + slack-style change comments */
.sa2-tiles {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -58%;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sa2-tile {
  width: 66px;
  height: 66px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 26px -12px #0f0f3642, 0 2px 5px #0f0f361f;
  animation: sa-wobble 2.8s ease-in-out infinite;
}
.sa2-tile img { width: 100%; height: 100%; object-fit: cover; scale: 1.02; }
.sa2-app { animation-delay: -1.4s; }
.sa2-x { font-size: 20px; font-weight: 600; color: #b9bcd0; }
@keyframes sa-wobble {
  0%, 100% { transform: rotate(-5deg) translateY(2px); }
  50% { transform: rotate(5deg) translateY(-4px); }
}
.sa2-comment {
  position: absolute;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  width: 208px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px 12px 12px 12px;
  box-shadow: 0 14px 26px -16px #0f0f362e, 0 2px 4px #003d760a;
  opacity: 0;
  animation: sa-comment 6.6s ease-in-out infinite;
}
.sa2-comment i { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; margin-top: 1px; }
.sa2-c1 i { background: #6e73fa; }
.sa2-c2 i { background: #f7b500; }
.sa2-c3 i { background: #20a684; }
.sa2-comment strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-heading); }
.sa2-comment span { font-size: 11.5px; color: var(--gray); }
.sa2-c1 { left: 26px; top: 34px; }
.sa2-c2 { right: 22px; top: 116px; animation-delay: 2.2s; }
.sa2-c3 { left: 40px; bottom: 40px; animation-delay: 4.4s; }
@keyframes sa-comment {
  0% { opacity: 0; translate: 0 10px; }
  6%, 58% { opacity: 1; translate: 0 0; }
  70%, 100% { opacity: 0; translate: 0 -6px; }
}
/* step 3 — after + testimonial */
.sa3-testi {
  position: absolute;
  left: 50%;
  bottom: 20px;
  translate: -50% 0;
  width: 312px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 14px;
  box-shadow: 0 18px 34px -20px #0f0f3633, 0 2px 5px #003d760a;
}
.sa3-head { display: flex; align-items: center; gap: 10px; }
.sa3-head img { width: 30px; height: 30px; border-radius: 50%; background: #e5eaff; }
.sa3-head div { display: flex; flex-direction: column; line-height: 1.25; }
.sa3-head strong { font-size: 13px; font-weight: 600; color: var(--ink-heading); }
.sa3-head span { font-size: 11.5px; color: var(--gray); }
.sa3-head em { margin-left: auto; font-style: normal; font-size: 12px; letter-spacing: 1px; color: #f5a623; }
.sa3-testi p { margin-top: 9px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.step-anim.active .sa1-box,
.step-anim.active .sa3-testi { animation: sa-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sa-pop {
  0% { opacity: 0; translate: -50% 14px; }
  100% { opacity: 1; translate: -50% 0; }
}

/* ============ FEATURES BENTO ============ */
.bento {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 1100px;
}
.bento-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  margin-bottom: 56px;
}
.bento-head h2 {
  /* v2 direction: Jakarta navy, matching the other redesigned section heads */
  font-family: var(--jakarta);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--hero-navy);
}
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.bento-card {
  min-width: 0;
  height: 420px;
  background: #fff;
  border-radius: 40px;
  padding: 36px 36px 0;
  overflow: clip;
  position: relative;
  box-shadow: 0 0 0 1.60714px #0161970a, 0 40px 50px -30px #004b760f, 0 4px 8px #003d7608;
}
.bento-cap {
  margin: 2px auto 0;
  max-width: 82%;
  text-align: center;
  font-size: 16.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--gray);
}
.bento-cap strong { font-weight: 600; color: var(--ink-heading); }
.bento-stage {
  position: absolute;
  inset: 96px 0 78px;
}
.bento-pill {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 28px -16px #0f0f3629, 0 2px 4px #003d760a;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  z-index: 3;
}
.pill-ico { width: 19px; height: 19px; color: var(--ink); flex-shrink: 0; }
.pill-figma { width: 18px; height: 18px; }
.bento-pill-r {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  color: var(--gray);
}
.pill-chev { width: 12px; height: 12px; color: #a1a1b0; }
.bento-pill .spark { color: #5a52e0; font-size: 15px; }
.pill-purple { border-color: #6e73fa42; background: #fdfdff; }
.pill-purple, .pill-purple .bento-pill-r { color: #5a52e0; }
/* fanned screens */
.fan { position: absolute; inset: 0; }
.fan img {
  position: absolute;
  width: 150px;
  aspect-ratio: 0.461095;
  object-fit: cover;
  object-position: top;
  border-radius: 18px;
  border: 4px solid #fff;
  box-shadow: 0 24px 44px -20px #0f0f3633, 0 4px 10px #0f0f3614;
}
.fan .f1 { left: 56px; top: 46px; rotate: -13deg; }
.fan .f2 { right: 60px; top: 22px; rotate: 11deg; }
.fan .f3 { left: 50%; top: 58px; translate: -50% 0; rotate: -3deg; width: 168px; z-index: 2; }

/* --- bento v3: template's "Smart Organization Engine" folder grid +
   "Instant Workflow Generation" AI prompt card --- */
.b3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
/* ---- v2 bento: lavender veil, tall-left card + two stacked right cards ---- */
.bento { position: relative; }
.bento .head-clouds { display: none; }
.bento::before {
  content: '';
  position: absolute;
  top: -80px;
  bottom: -100px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  /* bottom-anchored + oversized: the image's rough top edge crops away */
  background: url('assets/bento-bg.jpg') center bottom / 100% 118% no-repeat;
  pointer-events: none;
}
.bento-head, .bv2-grid { position: relative; z-index: 1; }
.bv2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 28px;
  width: 1040px;
  margin: 0 auto;
}
.bv2-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 26px;
  padding: 30px 32px;
  overflow: clip;
  box-shadow: 0 26px 48px -32px #2a1a5e21, 0 2px 6px #2a1a5e0a;
}
.bv2-tall { grid-row: 1 / 3; }
.bv2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jakarta);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f5bd9;
  margin-bottom: 14px;
}
.bv2-eyebrow svg { width: 15px; height: 15px; }
.bv2-h {
  font-family: var(--jakarta);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--hero-navy);
}
.bv2-tall .bv2-h { max-width: 400px; }
.bv2-side .bv2-eyebrow { margin: 0 auto 12px; }
.bv2-side .bv2-h { font-size: 23px; text-align: center; max-width: 330px; margin: 0 auto; }
.bv2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.bv2-chips span {
  padding: 7px 14px;
  border-radius: 999px;
  background: #f1eff7;
  font-family: var(--jakarta);
  font-size: 13px;
  font-weight: 600;
  color: #43415e;
}
/* "just a screen for now": flush to the card's bottom edge, cropped by it */
.bv2-screen {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  justify-content: center;
}
.bv2-screen img {
  /* relative so it paints above the positioned halo pseudo */
  position: relative;
  width: 318px;
  border-radius: 42px 42px 0 0;
  box-shadow: 0 -18px 44px -24px #2a1a5e40;
  margin-bottom: -30px;
}
/* transplanted illustrations: breathing room, scaled down from full width */
.bv2-side .b3-folders {
  margin: 44px auto 0;
  position: relative;
  width: 82%;
  column-gap: 8px;
  row-gap: 10px;
}
.bv2-side .b3-prompt {
  margin: 34px auto 0;
  position: relative;
  width: 86%;
}
.bv2-side .b3-avatar { width: 74px; height: 74px; margin-bottom: -24px; }
/* folder watermark: solid white fill, no gray-stroke ghost, no breathe */
.bv2-side .b3-folder-r {
  filter: brightness(0) invert(1);
  opacity: 1;
  animation: none;
}
/* mild lavender halo behind each illustration, echoing the section veil */
.bv2-screen { position: relative; }
.bv2-screen::before,
.bv2-side .b3-folders::before,
.bv2-side .b3-prompt::before {
  content: '';
  position: absolute;
  inset: -10% -8%;
  background: radial-gradient(62% 56% at 50% 46%, #b9a5ec38 0%, #c9b8f01c 55%, transparent 78%);
  filter: blur(26px);
  pointer-events: none;
}
.b3-card {
  position: relative;
  background: #e8e8f1; /* muted lavender panel fill (from reference mockup), flat */
  border-radius: 40px;
  padding: 38px 40px 44px;
  overflow: clip;
}
.b3-head h3 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-heading);
  margin-bottom: 8px;
}
.b3-head p {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--gray);
  max-width: 92%;
}
/* folder grid — fluid 4-up, symmetric inside the card padding */
.b3-folders {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  column-gap: 10px;
  row-gap: 12px;
}
.b3-folder {
  position: relative;
  width: 100%;
  aspect-ratio: 533 / 729;
  background: url('assets/folder-shape.png') center / 100% 100% no-repeat;
}
.b3-folder-name {
  position: absolute;
  left: 10%;
  top: 7%;
  padding-left: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fc);
}
.b3-folder-r {
  position: absolute;
  left: 50%;
  top: 48%;
  translate: -50% -50%;
  width: 56%;
  height: auto;
  opacity: 0.1; /* the new mark is near-black — fade it to a watermark */
  animation: mark-breathe 5.5s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}
/* ambient life: a wave drifts across the folder grid while each watermark
   breathes — staggered negative delays so everything starts mid-phase */
.b3-folder { animation: folder-float 5.5s ease-in-out infinite var(--fd, 0s); }
.b3-folder:nth-child(1) { --fd: 0s; }
.b3-folder:nth-child(2) { --fd: -0.7s; }
.b3-folder:nth-child(3) { --fd: -1.4s; }
.b3-folder:nth-child(4) { --fd: -2.1s; }
.b3-folder:nth-child(5) { --fd: -2.8s; }
.b3-folder:nth-child(6) { --fd: -3.5s; }
.b3-folder:nth-child(7) { --fd: -4.2s; }
.b3-folder:nth-child(8) { --fd: -4.9s; }
@keyframes folder-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@keyframes mark-breathe {
  0%, 100% { opacity: 0.09; scale: 1; rotate: 0deg; }
  50% { opacity: 0.17; scale: 1.12; rotate: -8deg; }
}
.b3-folder-count {
  position: absolute;
  right: 6%;
  bottom: 26%;
  padding: 3px 7px;
  font-size: 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--fc) 13%, #fff);
  border-radius: 6px;
  white-space: nowrap;
}
/* AI prompt visual */
.b3-prompt {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.b3-avatar {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(145deg, #575cf8, #3136f3);
  display: grid;
  place-items: center;
  margin-bottom: -30px;
}
.b3-avatar::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: #ffffff8a;
  z-index: -1;
}
.b3-avatar { background: none; }
.b3-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.b3-promptbox {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 22px;
  padding: 20px 20px 18px;
  box-shadow: 0 22px 40px -24px #0f0f3624, 0 2px 6px #003d760a;
}
.b3-ph {
  min-height: 54px;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: #8a8a98;
}
.b3-caret {
  display: inline-block;
  width: 1.5px;
  height: 15px;
  margin-left: 2px;
  background: var(--ink);
  vertical-align: -2px;
  animation: b3blink 1.1s steps(2) infinite;
}
@keyframes b3blink { 50% { opacity: 0; } }
.b3-prompt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.b3-model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  color: var(--ink);
}
.b3-model svg { width: 17px; height: 17px; color: var(--ink); }
.b3-actions { display: inline-flex; align-items: center; gap: 8px; }
.b3-attach, .b3-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.b3-attach { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.b3-attach svg { width: 18px; height: 18px; }
.b3-send { background: var(--blue); color: #fff; }
.b3-send svg { width: 15px; height: 15px; }
.b3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
}
.b3-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
  box-shadow: 0 2px 5px #0f0f360a;
}
.b3-chip svg { width: 17px; height: 17px; color: #8a8a98; flex-shrink: 0; }

/* --- bento v2: Attio-style 2-column composition (record rows + empty-state cards
   + fake multiplayer cursors) --- */
.b2-grid {
  display: grid;
  /* minmax(0,…) so the art SVGs' intrinsic width can't unbalance the columns */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.b2-col { display: flex; flex-direction: column; gap: 24px; }
.b2-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
}
.b2-row.is-selected {
  background: #edeffe;
  border: 1.5px solid var(--blue);
  padding: 21.5px;
}
.b2-ico {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #f5f5f7;
  border: 1px solid #e7e7ec;
  border-radius: 16px;
  color: #8a8a98;
}
.b2-ico svg { width: 28px; height: 28px; }
.is-selected .b2-ico { background: #e2e5fd; border-color: #c9cdfa; color: var(--blue); }
.b2-row-txt { min-width: 0; }
.b2-row-txt strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-heading);
  margin-bottom: 2px;
}
.b2-row-txt span { font-size: 15.5px; letter-spacing: -0.005em; color: var(--gray); }
.b2-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fafafc;
  border: 1px solid #ebebf2;
  border-radius: 28px;
  padding: 44px 40px;
}
.b2-art { color: var(--blue); max-width: 100%; height: auto; }
.b2-card h3 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-heading);
  margin: 26px 0 8px;
}
.b2-card p { font-size: 16.5px; line-height: 1.5; letter-spacing: -0.005em; color: var(--gray); }
.b2-btn {
  margin-top: 26px;
  padding: 13px 26px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 13px;
}
/* fake multiplayer cursors */
.b2-cursor {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}
.b2-cursor svg { width: 20px; height: 20px; flex-shrink: 0; }
.b2-cursor em {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  padding: 5px 11px;
  border-radius: 9px;
  white-space: nowrap;
}
.b2-cursor-yellow { left: -12px; bottom: -30px; flex-direction: row-reverse; }
.b2-cursor-yellow svg { color: #f7b500; translate: -3px -12px; scale: -1 1; }
.b2-cursor-yellow em { background: #f7b500; }
.b2-cursor-pink { right: 34px; bottom: -30px; }
.b2-cursor-pink svg { color: #f9549b; translate: -3px -12px; }
.b2-cursor-pink em { background: #f9549b; }
.bento-phone {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: 200px;
  aspect-ratio: 0.461095;
}
.event-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 30px -16px #0f0f3626, 0 2px 4px #003d760a;
  white-space: nowrap;
  z-index: 2;
}
.event-pill img { width: 28px; height: 28px; border-radius: 50%; background: #e5eaff; }
.event-pill-txt { display: flex; flex-direction: column; }
.event-pill-txt strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.event-pill-txt span { font-size: 12.5px; color: var(--gray); margin-top: 1px; }
.event-pill.p1 { left: 22px; top: 62px; rotate: -2deg; }
.event-pill.p2 { right: 22px; top: 158px; rotate: 2deg; }
.ascii-vane {
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 270px;
  height: 270px;
  mask-image: radial-gradient(60% 60% at 50% 45%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000 40%, transparent 100%);
}
.track-note {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 168px;
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: #6e73fa12;
  border: 1px solid #6e73fa42;
  border-radius: 16px;
  z-index: 2;
}
.track-note .spark { color: #5a52e0; font-size: 16px; line-height: 1.3; }
.track-note strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #5a52e0;
  margin-bottom: 4px;
}
.track-note p { font-size: 14.5px; line-height: 1.5; color: #8a84d8; }

/* delivery timeline visual */
.delivery-visual {
  position: absolute;
  inset: 0 36px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.delivery-track {
  position: relative;
  height: 4px;
  background: #ececf1;
  border-radius: 2px;
}
.delivery-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 2px;
  background: var(--blue-soft);
  animation: delivery-run 6s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes delivery-run {
  0% { width: 0; opacity: 1; }
  45% { width: 66.6%; opacity: 1; }
  78% { width: 66.6%; opacity: 1; }
  92% { width: 66.6%; opacity: 0; }
  100% { width: 0; opacity: 0; }
}
.delivery-track i {
  position: absolute;
  top: 50%;
  left: var(--x);
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  background: #e3e2e5;
  border-radius: 50%;
}
.delivery-days {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--gray);
}
.delivery-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 12px 24px -14px #0f0f3626, 0 2px 4px #003d760a;
}
/* figma file visual */
.figma-card {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 30px -16px #0f0f3620, 0 2px 4px #003d760a;
}
.figma-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eff0f5;
}
.figma-logo { width: 30px; height: 30px; flex-shrink: 0; }
.figma-file-txt { display: flex; flex-direction: column; min-width: 0; }
.figma-file-txt strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.figma-file-txt span { font-size: 12.5px; color: var(--gray); margin-top: 1px; }
.figma-rows { margin-top: 6px; }
.figma-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--gray);
}
.figma-row i {
  width: 12px; height: 12px;
  border: 1.5px solid #b9b9c9;
  border-radius: 3px;
  flex-shrink: 0;
}
.figma-row em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: #5a52e0;
  background: #6e73fa1a;
  padding: 2px 8px;
  border-radius: 6px;
}
.figma-row.hot {
  background: #6e73fa0d;
  color: var(--ink);
  font-weight: 500;
}
.figma-row.hot i { border-color: #6e73fa; }

/* ============ PRICING ============ */
.pricing-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pricing-head {
  width: 415px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  margin-bottom: 56px;
}
.pricing-cards {
  display: flex;
  gap: 24px;
}
.price-card {
  width: 380px;
  background: #fff;
  border-radius: 24px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 0 0 1.60714px #0161970a, 0 51.4286px 38.5714px -19.2857px #004b760f, 0 17.6786px 6.42857px #00527603, 0 9.64286px 6.42857px #00527605, 0 4.82143px 4.82143px #003d7608, 0 1.60714px 1.60714px #003d760a;
}
.price-top {
  padding: 14px 18px 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.price-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.price-title-row h3 {
  flex: 1;
  font-family: var(--grotesk);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 110%;
  color: var(--ink-heading);
}
.price-chip {
  padding: 2px 10px;
  border-radius: 6px;
  background: #262ef21a;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.price-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--gray);
}
.price-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.price-currency {
  font-family: var(--grotesk);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.4;
  color: var(--ink);
}
.price-num {
  font-family: var(--grotesk);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.price-period {
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--gray);
  line-height: 1.6;
}
.price-list {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.price-point {
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-point .tick {
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.price-point p {
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--gray);
}

.plan-card {
  width: 494px;
  background: #fff;
  border-radius: 24px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 0 0 1.60714px #0161970a, 0 51.4286px 38.5714px -19.2857px #004b760f, 0 17.6786px 6.42857px #00527603, 0 9.64286px 6.42857px #00527605, 0 4.82143px 4.82143px #003d7608, 0 1.60714px 1.60714px #003d760a;
}
.plan-card.dark { background: var(--ink); }
.plan-top {
  padding: 14px 18px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.plan-card > .btn-dark { border-radius: 16px; }
.plan-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-name-row h3 {
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 110%;
  color: var(--ink-heading);
}
.dark .plan-name-row h3 { color: var(--hero-navy); } /* v2: dark card went white */
.plan-desc {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--gray);
}
.dark .plan-desc { color: #b9bcd0; }
.plan-priceline { margin-top: 8px; }
.plan-price {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.plan-price em {
  font-style: normal;
  font-size: 18px;
  vertical-align: 15px;
  margin-right: 2px;
  color: #b9bcd0;
}
.plan-price small {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: #b9bcd0;
}
.plan-list {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dark .plan-list {
  background: #ffffff08;
  border-color: #ffffff14;
}
.plan-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.plan-item .tick {
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plan-item p {
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--gray);
}
.dark .plan-item p { color: #c8cbdd; }
.btn-book {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  background: #fff;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: background .2s;
}
.btn-book:hover { background: #eceaf4; }
/* ---- configurator controls (light card) ---- */
.cfg-chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
}
.cfg-priceline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 4px;
}
.cfg-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray);
  margin-bottom: 8px;
}
.cfg-price {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--blue);
}
.cfg-slider {
  position: relative;
  height: 36px;
  cursor: pointer;
  touch-action: none;
}
/* coordinates are inset by the knob's half-width so the knob at 0% sits
   flush with the card's content edge instead of overhanging it */
.cfg-track {
  position: absolute;
  top: 50%; left: 16px; right: 16px;
  height: 4px;
  transform: translateY(-50%);
  background: #ececf1;
  border-radius: 2px;
}
.cfg-dot {
  position: absolute;
  top: 50%; left: calc(16px + (100% - 32px) * var(--x) / 100);
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  background: #e3e2e5;
  border-radius: 50%;
}
.cfg-knob {
  position: absolute;
  top: 50%; left: calc(16px + (100% - 32px) * var(--x) / 100);
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 3.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 2px 6px #0f0f3620;
  transition: left .25s cubic-bezier(.3,.7,.2,1);
  z-index: 2;
}
.cfg-urgent {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 8px;
  cursor: pointer;
  user-select: none;
}
.cfg-switch { position: relative; display: inline-block; }
.cfg-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cfg-switch-ui {
  display: block;
  width: 46px; height: 26px;
  background: #e3e2e5;
  border-radius: 15px;
  position: relative;
  transition: background .25s;
}
.cfg-switch-ui::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px #0f0f3626;
  transition: left .25s cubic-bezier(.3,.7,.2,1);
}
.cfg-switch input:checked + .cfg-switch-ui { background: var(--blue); }
.cfg-switch input:checked + .cfg-switch-ui::after { left: 23px; }
.cfg-urgent-label { font-size: 14px; font-weight: 600; color: var(--gray); transition: color .25s; }
.cfg-urgent-label em {
  font-style: normal;
  font-weight: 700;
  color: var(--hero-navy);
  background: #f1eff7;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 4px;
  font-size: 12px;
}
.cfg-urgent.on .cfg-urgent-label { color: var(--hero-navy); }
.cfg-urgent.on .cfg-urgent-label { color: var(--ink); }

/* ---- plan icon chip ---- */
.plan-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.plan-ico svg { width: 22px; height: 22px; }
.dark .plan-ico {
  background: #ffffff0f;
  border-color: #ffffff1f;
  color: #fff;
}
/* subtle icon loops: screens gently shuffle apart; cycle arrows half-turn
   every few seconds (icon is 180°-symmetric, so the loop is seamless) */
.plan-ico svg rect, .plan-ico svg path {
  transform-box: fill-box;
  transform-origin: center;
}
.plan-card:not(.dark) .plan-ico svg rect { animation: screen-front 4.5s ease-in-out infinite; }
.plan-card:not(.dark) .plan-ico svg path { animation: screen-back 4.5s ease-in-out infinite; }
@keyframes screen-front {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-1.2px, 1.2px); }
}
@keyframes screen-back {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1.4px, -1.4px); }
}
.dark .plan-ico svg { animation: cycle-turn 4.2s infinite; }
@keyframes cycle-turn {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 1.35, .4, 1); }
  30% { transform: rotate(180deg); }
  100% { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-ico svg, .plan-ico svg rect, .plan-ico svg path, .t-orbit-spin { animation: none !important; }
}

/* ---- monthly / weekly segmented toggle ---- */
.sub-toggle {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 4px;
  background: #ffffff0f;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  margin-top: 2px;
}
.sub-thumb {
  position: absolute;
  top: 4px; bottom: 4px;
  left: 4px; width: 0;
  background: #fff;
  border-radius: 7px;
  transition: left .5s cubic-bezier(.34,1.56,.64,1), width .5s cubic-bezier(.34,1.56,.64,1);
}
.sub-opt {
  position: relative;
  z-index: 1;
  padding: 6px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: #b9bcd0;
  transition: color .3s;
}
.sub-opt.active { color: var(--ink); }
.plan-price.bump { animation: price-bump .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes price-bump {
  0% { transform: scale(1); }
  45% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ============ UNFOLD GALLERY (grid-scroll 1:1) ============ */
.unfold { height: calc(100vh + 1500px); }
.unfold-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unfold-grid {
  position: relative;
  width: 1180px;
  height: 865px;
}
.u-tile {
  position: absolute;
  width: 220px;
  height: 275px;
  border-radius: 12px;
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
}
.u-tile img { width: 100%; height: 100%; object-fit: cover; }
.u-tile.u-hero { z-index: 2; }

/* ============ TESTIMONIALS (phone + tweet ticker) ============ */
.testimonials {
  position: relative;
  height: 1390px;
  z-index: 3;
}
/* orange veil: the red section-2 texture, hue-shifted warm */
.testimonials::before {
  content: '';
  position: absolute;
  top: -60px;
  height: 1040px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  background: url('assets/intelligence-bg.jpg') center / 100% 100% no-repeat;
  filter: hue-rotate(32deg) saturate(1.1);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  pointer-events: none;
}
.testi-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  z-index: 2;
}
.testi-head h2 {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1em;
  color: var(--ink-heading);
}
.testi-phone {
  position: absolute;
  left: 50%;
  top: 360px;
  transform: translateX(-50%);
  width: 220px;
  height: 452px;
  background: #111214;
  border-radius: 34px;
  padding: 8px;
  box-shadow: 0 40px 80px -30px #0f0f3633;
}
.testi-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 18px;
  background: #0b0b0d;
  border-radius: 12px;
  z-index: 3;
}
.testi-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 27px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.testi-orbit {
  position: relative;
  width: 100%;
  height: 300px;
  margin-top: -55px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-ring {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  border: 1px solid #c9cbf0;
  border-radius: 50%;
}
.t-ring-1 { width: 160px; height: 160px; }
.t-ring-2 { width: 230px; height: 230px; }
@property --oa {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}
.t-orbit-spin {
  position: absolute;
  inset: 0;
  animation: orbit-angle 70s linear infinite;
}
@keyframes orbit-angle { from { --oa: 0deg; } to { --oa: 360deg; } }
.t-av {
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: #e5eaff;
  box-shadow: 0 3px 8px #0f0f3618, 0 0 0 2px #fff;
  transform: translate(-50%, -50%) rotate(calc(var(--ta) + var(--oa, 0deg))) translateX(115px) rotate(calc(-1 * (var(--ta) + var(--oa, 0deg))));
}
.t-av.inner {
  width: 26px; height: 26px;
  transform: translate(-50%, -50%) rotate(calc(var(--ta) - var(--oa, 0deg))) translateX(80px) rotate(calc(-1 * (var(--ta) - var(--oa, 0deg))));
}
.testi-orbit h3 {
  position: relative;
  font-family: var(--grotesk);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: center;
  color: var(--ink);
  z-index: 2;
}
.testi-progress {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 4px;
  border-radius: 3px;
  background: #ececf1;
  overflow: hidden;
}
.testi-progress span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--blue-soft);
  animation: t-progress 8s ease-in-out infinite alternate;
}
@keyframes t-progress { from { width: 22%; } to { width: 82%; } }

.tweet-ticker-wrap {
  position: absolute;
  top: 546px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  height: 200px;
  z-index: 3;
}
.tweet-ticker-wrap .ticker {
  top: 0;
  /* arc mode: cards rise/tilt above the baseline, so only clip horizontally */
  overflow-x: clip;
  overflow-y: visible;
}
.tweet-ticker-wrap .ticker-track { align-items: flex-end; }
.tweet {
  width: 280px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e9e9ef;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 24px 48px -24px #0f0f3629;
}
.tweet-head {
  display: flex;
  gap: 10px;
  align-items: center;
}
.tweet-head img {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #e5eaff;
}
.tweet-who {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.tweet-who strong {
  font-size: 14px;
  font-weight: 600;
  color: #0f1419;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tweet-who span { font-size: 12.5px; color: #536471; }
.tweet-who a { color: #1d9bf0; font-weight: 600; cursor: pointer; }
.x-logo {
  width: 18px; height: 18px;
  fill: #0f1419;
  flex-shrink: 0;
  align-self: flex-start;
}
.tweet-text {
  font-size: 14px;
  line-height: 1.45;
  color: #0f1419;
  margin-top: 10px;
}
.tweet-media {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e9e9ef;
}
.tweet-media img { width: 100%; height: 140px; object-fit: cover; }
.tweet-reply-block {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eff1f3;
}
.tweet-reply-block img { width: 32px; height: 32px; border-radius: 50%; background: #e5eaff; }
.tweet-reply-block strong { font-size: 13px; color: #0f1419; }
.tweet-reply-block p { font-size: 13.5px; color: #0f1419; line-height: 1.4; margin-top: 2px; }
.tweet-foot {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
  font-size: 12.5px;
  color: #536471;
}
.t-like {
  display: inline-flex;
  align-items: center;
  color: #f91880;
  font-weight: 600;
}
.t-like svg { width: 14px; height: 14px; fill: #f91880; margin-right: 4px; }
.t-reply, .t-copy { cursor: pointer; }

.cal-frame {
  position: absolute;
  top: 774px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 600px;
  background: #fff;
  border-radius: 36px;
  padding: 20px;
  box-shadow: 0 0 0 1.6px #0161970a, 0 40px 60px -30px #004b7614, 0 4px 10px #003d760a;
  z-index: 4;
}
.cal-mid {
  width: 100%;
  height: 100%;
  border: 1px solid #ececf1;
  border-radius: 22px;
  background: #fbfbfd;
  padding: 20px;
}
.cal-inner {
  width: 100%;
  height: 100%;
  border: 1px solid #e9e9ef;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.cal-inner iframe {
  width: 100%;
  /* cal.com's month embed wastes ~96px of empty space above the calendar;
     oversize the iframe and pull it up so .cal-inner clips the dead band */
  height: calc(100% + 96px);
  margin-top: -96px;
  border: 0;
  display: block;
}


/* ============ reveal-on-scroll ============ */
/* uses `translate` (not `transform`) so it composes with translateX(-50%) centering */
.reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .9s cubic-bezier(.22,1,.36,1), translate .9s cubic-bezier(.22,1,.36,1);
}
.reveal.in {
  opacity: 1;
  translate: 0 0;
}


/* ============ BURN-REVEAL FOOTER ============ */
.burnwrap {
  --band: min(100vh, 900px);
  height: calc(var(--band) + 700px);
  width: var(--vwz, 100vw);
  margin-left: calc((100% - var(--vwz, 100vw)) / 2);
}
.burn-sticky {
  position: sticky;
  top: calc(100vh - var(--band));
  height: var(--band);
  overflow: hidden;
}
#burn-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.site-footer {
  position: absolute;
  inset: 0;
  background: var(--ink);
  overflow: hidden;
}
.ascii-footer {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 35%, transparent 100%);
  pointer-events: none;
}
.footer-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 max(48px, calc((100% - 1100px) / 2)) 26px;
}
.footer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 64px;
}
.footer-mono {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #63667e;
}
.footer-mono span { color: #fff; font-weight: 500; }
.footer-book { padding: 14px 24px; font-size: 16px; border-radius: 8px; margin-top: 6px; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.footer-col h5 {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7d8098;
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 14.5px;
  color: #c8cbdd;
  padding: 5px 0;
  transition: color .2s;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid #ffffff14;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: #7d8098;
}


/* ============ RESPONSIVE ============ */
/* svh: pinned stages track the *small* viewport so mobile URL-bar show/hide
   never causes layout jumps mid-pin */
@supports (height: 100svh) {
  /* --vhz (set by fit() while the canvas is zoom-scaled) = real viewport height
     in zoomed-canvas units — plain svh would be multiplied by the zoom factor
     and shorten every pinned stage, riding the phone up instead of centering */
  .intelligence-sticky { height: var(--vhz, 100svh); max-height: 1000px; }
  .unfold-sticky { height: var(--vhz, 100svh); }
  .unfold { height: calc(var(--vhz, 100svh) + 1500px); }
  .burnwrap { --band: min(var(--vhz, 100svh), 900px); }
  .burn-sticky { top: calc(var(--vhz, 100svh) - var(--band)); }
}

/* reduced motion: kill the decorative loops; content stays fully visible */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; translate: 0 0; }
  .delivery-fill, .testi-progress span, .orbit-set, .screen-shimmer,
  .b3-caret, .type-cursor, .app-icon.pop, .plan-price.bump, .sa2-tile,
  .b3-folder, .b3-folder-r {
    animation: none !important;
  }
  .sa2-comment { animation: none !important; opacity: 1 !important; }
}

/* ============ MOBILE (<768px) — real reflow, zoom off ============ */
/* ============ ABOUT: designer file card (scrapbook elements, our theme) ============ */
.about {
  position: relative;
  margin-bottom: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about::before {
  content: '';
  position: absolute;
  top: -120px;
  bottom: -120px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  background: url('assets/hero-sky.jpg') center / cover no-repeat;
  /* long ramps: the sky breathes in and out instead of edging in */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 300px, #000 calc(100% - 240px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 300px, #000 calc(100% - 240px), transparent);
  pointer-events: none;
}
.about-bg {
  /* contained watercolor halo behind the card, not full-bleed: a soft
     circular fade — corners (and the generator watermark) dissolve away */
  position: absolute;
  top: 200px;
  left: 50%;
  translate: -50% 0;
  width: 1060px;
  height: 700px;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(52% 52% at 50% 50%, #000 46%, transparent 74%);
  mask-image: radial-gradient(52% 52% at 50% 50%, #000 46%, transparent 74%);
  pointer-events: none;
}
.about-head, .about-stage { position: relative; z-index: 1; }
.about-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 72px;
}
.about-head .tag {
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--jakarta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hero-navy);
  box-shadow: 0 8px 20px -10px #23315924, 0 1px 2px #23315914;
}
.about-head .tag::before, .about-head .tag::after { content: none; }
.about-head h2 {
  font-family: var(--jakarta);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--hero-navy);
}
.about-head .blue { color: var(--hero-navy); }
.about-stage {
  position: relative;
  width: 760px;
}
/* the paper file card */
.about-card {
  position: relative;
  width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 10px;
  padding: 62px 46px 44px;
  rotate: -1.2deg;
  box-shadow: 0 34px 64px -34px #23315942, 0 3px 10px #23315914;
  /* punched-hole strip: real transparent holes along the top (mask), the
     section's blue veil shows through them like the reference sheet */
  -webkit-mask-image:
    radial-gradient(circle 8px at 26px 20px, transparent 7.5px, #000 8px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle 8px at 26px 20px, transparent 7.5px, #000 8px),
    linear-gradient(#000, #000);
  -webkit-mask-size: 52px 40px, 100% calc(100% - 40px);
  mask-size: 52px 40px, 100% calc(100% - 40px);
  -webkit-mask-position: 0 0, 0 40px;
  mask-position: 0 0, 0 40px;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
}
/* crumpled-paper grain over the whole sheet */
.about-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
  pointer-events: none;
}
.ac-top {
  text-align: center;
  font-family: var(--jakarta);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a93a6;
  border-top: 1px solid #e2e6ef;
  border-bottom: 1px solid #e2e6ef;
  padding: 9px 0;
  margin-bottom: 26px;
}
.ac-field { margin-bottom: 22px; }
.ac-field label, .ac-col label {
  display: block;
  font-family: var(--jakarta);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9aa3b5;
  border-bottom: 1px solid #e2e6ef;
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.ac-name {
  font-family: var(--jakarta);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #263850;
  text-align: center;
  padding: 2px 0 14px;
  border-bottom: 1px solid #e2e6ef;
}
.ac-blurb {
  font-family: var(--jakarta);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
  color: #515e76;
  text-align: center;
  padding: 0 8px;
}
.ac-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 26px;
}
.ac-col ul { list-style: none; }
.ac-col li {
  font-family: var(--jakarta);
  font-size: 13px;
  font-weight: 600;
  color: #44506a;
  padding: 4px 0;
  border-bottom: 1px dashed #e4e8f1;
}
/* paperclip hooked over the card's top edge */
.about-clip {
  position: absolute;
  top: -26px;
  left: 118px;
  width: 34px;
  height: 70px;
  rotate: 8deg;
  filter: drop-shadow(0 3px 3px #2a251426);
  z-index: 2;
}
/* snapshot photos, taped on at angles */
.about-photo {
  position: absolute;
  background: #fff;
  padding: 10px 10px 14px;
  border-radius: 3px;
  box-shadow: 0 22px 44px -24px #2a251447, 0 2px 6px #2a25141c;
  z-index: 2;
}
.about-photo img { display: block; border-radius: 2px; }
.ap-1 { top: -34px; right: -10px; rotate: 5deg; }
.ap-1 img { width: 148px; height: 148px; object-fit: cover; }
.ap-2 { bottom: -46px; left: -26px; rotate: -7deg; }
.ap-2 img { width: 150px; height: 118px; object-fit: cover; object-position: top; }
.ap-3 { bottom: -40px; right: -20px; rotate: 6deg; }
.ap-3 img { width: 126px; height: 152px; object-fit: cover; object-position: top; }
.tape {
  position: absolute;
  top: -12px;
  left: 50%;
  translate: -50% 0;
  width: 86px;
  height: 26px;
  background: #ffffff70;
  border-left: 1px dashed #ffffffa6;
  border-right: 1px dashed #ffffffa6;
  box-shadow: 0 1px 3px #2a251418;
  backdrop-filter: blur(1px);
  rotate: -4deg;
  z-index: 3;
}
.tape-r { rotate: 5deg; }
/* doodle critters: line-art cousins of the jar marbles */
.about-doodle { position: absolute; opacity: 0.85; }
.ad-1 { width: 84px; top: -58px; left: -64px; rotate: -10deg; }
.ad-2 { width: 90px; bottom: -30px; right: -78px; rotate: 9deg; }
.ad-3 { width: 100px; top: 46%; right: -108px; rotate: -6deg; opacity: 0.6; }

/* ---- v2 testimonials: Apple-style statement head, third line types ---- */
.testi-head h2.testi-big {
  font-family: var(--jakarta);
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.16;
  color: var(--hero-navy);
  text-align: center;
}
.testi-big em { font-style: normal; }
.testi-big .tb-line { display: block; white-space: nowrap; }
.testi-big .tb-gray { color: #e79a62; } /* warm apricot, sits with the orange veil */
.tb-ico {
  display: inline-block;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  overflow: hidden;
  vertical-align: -9px;
  margin: 0 10px;
  box-shadow: 0 12px 26px -10px #1470e94d;
}
.tb-ico img { display: block; width: 100%; height: 100%; scale: 1.06; }

/* ---- v2 footer: marble jar easter egg (content/bg design TBD) ---- */
/* reveal footer: fixed behind the page; .page-cover scrolls over it and its
   bottom margin (synced to footer height by JS) exposes it at the end */
.page-cover {
  position: relative;
  z-index: 2;
  background: var(--bg);
  margin-bottom: var(--footer-h, 780px);
}
.footer-v2 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 90px 20px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
/* blue sky veil behind the jar, same treatment as the section veils */
.footer-v2::before {
  content: '';
  position: absolute;
  top: -20px;
  bottom: 0;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  /* same sun as the hero: hot core + warm bloom + spectral halo + azure
     deepening, stacked over the shared sky photo */
  background:
    radial-gradient(430px 430px at 150px 105px, #ffffff 0%, #ffffff 12%, #fffffff2 21%, #ffffffb8 33%, #ffffff00 62%),
    radial-gradient(500px 500px at 150px 105px, #ffffff00 42%, #ffe2b447 56%, #ffb9c940 66%, #bcd9ff4d 76%, #ffffff00 90%),
    radial-gradient(640px 640px at 150px 105px, #fff3d24d 0%, #ffffff00 58%),
    radial-gradient(950px 950px at 150px 105px, #7fb2e600 24%, #7fb2e64a 52%, #86b4e42e 74%, #86b4e400 95%),
    url('assets/hero-sky.jpg') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 60px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 60px), transparent);
  pointer-events: none;
}
.footer-v2 > * { position: relative; z-index: 1; }
/* weather layer: above the scene, never blocks the jar or picker */
.rain-canvas {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.jar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.jar-title {
  font-family: var(--jakarta);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hero-navy);
}
.jar-sub {
  margin-top: 8px;
  font-family: var(--jakarta);
  font-size: 14.5px;
  font-weight: 500;
  color: #6b7385;
}
.jar-stage {
  position: relative;
  width: 377px;
  height: 356px;
  margin-top: 26px;
}
#jar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* the user-designed Jar.svg, split around the canvas so marbles sit
   inside the glass: body + floor shadow behind, stroke/sheens/cap in front */
.jar-under, .jar-over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* celebration layer: extends past the stage so confetti can fly free */
#jar-fx {
  position: absolute;
  inset: -160px -180px -30px;
  width: calc(100% + 360px);
  height: calc(100% + 190px);
  pointer-events: none;
  z-index: 5;
}
.jar-stage.party .jar-under,
.jar-stage.party #jar-canvas,
.jar-stage.party .jar-over {
  animation: jar-party 1s ease both;
  transform-origin: 50% 92%;
}
@keyframes jar-party {
  0% { transform: none; }
  18% { transform: rotate(-3.2deg) scale(1.025); }
  38% { transform: rotate(2.6deg) scale(1.015); }
  58% { transform: rotate(-1.7deg); }
  78% { transform: rotate(1deg); }
  100% { transform: none; }
}
.jar-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.jar-pick {
  width: 46px;
  height: 46px;
  padding: 7px;
  border-radius: 50%;
  background: #f3f1f7;
  border: 2px solid transparent;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, background .2s;
}
.jar-pick img { width: 100%; height: 100%; display: block; }
.jar-pick:hover { transform: translateY(-3px) scale(1.08); }
.jar-pick.on { border-color: var(--hero-navy); background: #fff; transform: scale(1.1); }
.jar-drop {
  margin-top: 18px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--jakarta);
  font-size: 15px;
  font-weight: 600;
  box-shadow: inset 0 1.5px 0 #ffffff47, inset 0 0 12px #ffffff14;
  transition: transform .2s;
}
.jar-drop:hover:not(:disabled) { transform: scale(1.04); }
.jar-drop:disabled { opacity: .45; cursor: default; }
.jar-note {
  margin-top: 10px;
  font-family: var(--jakarta);
  font-size: 13px;
  font-weight: 500;
  color: #8a8fa3;
  min-height: 18px;
}
.fv2-copy {
  font-family: var(--jakarta);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #a7adba;
}

/* every stretched veil fades in/out vertically — no hard box-edge cuts */
.intelligence-sticky::before,
.process-sticky::before,
.bento::before,
.pricing-sec::before {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}

/* intelligence veil stays hidden until the toggle lands on its 2nd state,
   then a feathered radial mask wipes out from behind the phone to reveal it
   (--bgr 0→1, driven by the scroll-jack in script.js §7b) */
.intelligence-sticky::before {
  opacity: min(1, var(--bgr, 1) * 8);
  -webkit-mask-image:
    radial-gradient(120% 75% at 50% 50%, #000 calc(var(--bgr, 1) * 145% - 35%), transparent calc(var(--bgr, 1) * 145% + 5%)),
    linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(120% 75% at 50% 50%, #000 calc(var(--bgr, 1) * 145% - 35%), transparent calc(var(--bgr, 1) * 145% + 5%)),
    linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  mask-composite: intersect;
}

/* ---- v2 pricing: blue veil, narrow Jakarta cards with art headers ---- */
.pricing-sec { position: relative; }
.pricing-sec::before {
  content: '';
  position: absolute;
  top: -60px;
  bottom: -80px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  /* oversized + centered: both rough edges of the source crop away */
  background: url('assets/pricing-bg2.jpg') center / 104% 128% no-repeat;
  pointer-events: none;
}
.pricing-head, .pricing-cards { position: relative; z-index: 1; }
.pricing-head .tag {
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--jakarta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hero-navy);
  box-shadow: 0 8px 20px -10px #23315924, 0 1px 2px #23315914;
  gap: 0;
}
.pricing-head .tag::before, .pricing-head .tag::after { content: none; }
.pricing-head .tag img { display: none; }
.pricing-head h2 {
  font-family: var(--jakarta);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--hero-navy);
}
.pricing-head .blue { color: var(--hero-navy); }
.pricing-head { width: 520px; gap: 16px; }
.plan-card {
  width: 400px;
  padding: 24px;
  gap: 18px;
}
.plan-top { padding: 0; }
/* watercolor art header, flush to the card's top edge; the source images
   fade to white at their bottom, melting into the card body */
.plan-art {
  position: relative;
  height: 192px;
  margin: -24px -24px 0;
  border-radius: 24px 24px 0 0;
  flex-shrink: 0;
  /* NO overflow here: it would clip the seal's drop-shadow into a hard line.
     The video clips inside its own wrapper instead. */
}
.plan-art-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}
.plan-art-light { background: url('assets/plan-art-blue.jpg') center top / cover no-repeat; }
/* animated art: the video sits over the still, fading out at the bottom so
   it melts into the white card the way the baked image fade did */
.plan-art-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 24px 24px 0 0;
  /* zoom crops the generator watermark; the mask starts dissolving high and
     runs long through a heavily blurred wavy edge, like the stills' baked
     fade — no envelope line survives the blur */
  scale: 1.18;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 368' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.5' stop-color='%23fff'/%3E%3Cstop offset='0.97' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath filter='url(%23b)' fill='url(%23g)' d='M0,0 H800 V240 C720,285 620,235 520,262 C430,286 340,230 250,255 C160,278 70,242 0,268 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 368' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.5' stop-color='%23fff'/%3E%3Cstop offset='0.97' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath filter='url(%23b)' fill='url(%23g)' d='M0,0 H800 V240 C720,285 620,235 520,262 C430,286 340,230 250,255 C160,278 70,242 0,268 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.plan-art.has-video { background-image: none;
}
.plan-art-dark { background: url('assets/plan-art-purple.jpg') center top / cover no-repeat; }
/* scalloped seal: two stacked rounded squares, one rotated 45° */
.plan-seal {
  position: absolute;
  left: 26px;
  bottom: 10px;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
}
.plan-seal .seal-shape {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  fill: var(--seal, #4f83ea);
  filter: drop-shadow(0 12px 20px #1b2a4a3d);
}
.plan-seal svg:not(.seal-shape) { position: relative; z-index: 1; width: 30px; height: 30px; color: #fff; }
.plan-art-light .plan-seal { --seal: #4f83ea; }
.plan-art-dark .plan-seal { --seal: #8a55e8; }
/* the seal carries the card icon now — drop the old inline one */
.plan-card .plan-ico { display: none; }
/* the subscription card goes white too (one blue card, one purple card) */
.plan-card.dark { background: #fff; }
.dark .plan-name-row h3 { color: var(--hero-navy); }
.dark .plan-desc { color: var(--gray); }
.dark .cfg-chip {
  background: #f1eff7;
  border-color: transparent;
  color: #43415e;
}
.plan-price { color: var(--hero-navy); }
.plan-price em, .plan-price small { color: var(--gray); }
.dark .plan-list {
  background: #f7f9fd;
  border-color: var(--line);
}
.dark .plan-item p { color: var(--ink); }
.dark .sub-toggle {
  background: #f0f1f6;
  border-color: var(--line);
}
.dark .sub-thumb { box-shadow: 0 2px 8px #1b2a4a24, 0 0 0 1px var(--line); }
.dark .sub-opt { color: #8a8fa3; }
.dark .sub-opt.active { color: var(--ink); }
.btn-book {
  background: var(--ink);
  color: #fff;
  font-family: var(--jakarta);
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: inset 0 1.5px 0 #ffffff47, inset 0 0 12px #ffffff14;
}
.plan-name-row h3, .price-title-row h3 {
  font-family: var(--jakarta);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hero-navy);
}
.plan-desc, .plan-item p, .cfg-chip, .cfg-label, .cfg-urgent-label {
  font-family: var(--jakarta);
}
.plan-desc { font-size: 14px; }
.plan-price, .cfg-price { font-family: var(--jakarta); font-weight: 700; letter-spacing: -0.03em; }
/* unboxed feature list: per-item icons under a small label */
.plan-list, .dark .plan-list {
  background: none;
  border: 0;
  padding: 0 2px;
}
.plan-list-label {
  font-family: var(--jakarta);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #6b7385;
  margin-bottom: -4px;
}
.plan-item .pico {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.plan-item .pico svg { width: 100%; height: 100%; }

@media (max-width: 767px) {
  .canvas { width: 100%; }
  .hero-zone, .why-us, .intelligence, .showcase, .hiw, .bento,
  .pricing-sec, .unfold, .testimonials { margin-bottom: 110px; }
  .testimonials { margin-bottom: 40px; }

  /* --- nav: logo + CTA only (links are placeholder routes) --- */
  .nav { width: calc(100% - 40px); top: 12px; }
  .nav.condensed { width: calc(100% - 40px); top: 8px; }
  .nav-links { display: none; }

  /* --- hero --- */
  .hero { top: 128px; width: calc(100% - 40px); padding-left: 0; }
  /* one line on mobile: shorter copy, no wrapping */
  .hero-pill { flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
  .hero-pill-text { font-size: 12px; }
  .hero-pill-text .hpt-full { display: none; }
  .hero-pill-text .hpt-short { display: inline; }
  .hero-pill-chip { flex-shrink: 0; }
  .hero h1, .type-line { font-size: clamp(30px, 8.7vw, 38px); }
  .hero-heading { margin-top: 20px; }
  .type-line { min-height: 44px; }
  .type-cursor { width: 6px; height: 38px; vertical-align: -5px; margin-left: 3px; }
  .tb-ico { width: 30px; height: 30px; border-radius: 8px; vertical-align: -5px; margin: 0 5px; }
  .testi-head h2.testi-big { font-size: clamp(28px, 7.6vw, 36px); }
  .hero-sub { font-size: 16px; max-width: 100%; }
  .hero .btn-dark { margin-top: 22px; }
  .btn-dark-label { font-size: 16px; }
  .hero-zone { height: 830px; }
  .hero-ticker-wrap { top: 505px; height: 300px; }
  .hero-ticker-wrap .ticker-track,
  .showcase-ticker-wrap .ticker-track { gap: 14px; }
  .phone-card { width: min(34vw, 136px); border-radius: 18px; }
  .ba-pill { padding: 3px 8px; font-size: 9px; border-width: 2px; }
  .phone-frame { width: min(27vw, 108px); border-radius: 13px; border-width: 2px; }
  .hero-overlay-bar { width: 12px; border-radius: 18px; }
  .hero-overlay-circles { padding: 7px; }
  .circle-mid { padding: 8px; }
  .circle-core { width: 38px; height: 38px; }

  /* --- heading blocks --- */
  .head-clouds { display: none; }
  .intelligence-head h2, .pricing-head h2, .showcase-head h2,
  .hiw-head-content h2, .bento-head h2, .testi-head h2 {
    font-size: clamp(30px, 8.2vw, 36px);
  }
  .tag { font-size: 14px; gap: 10px; }
  .tag img { width: 20px; height: 20px; margin-right: -3px; }

  /* --- why us: single row, smaller logos --- */
  .logo-flips { width: 100%; height: auto; }
  .logo-flip { flex: 1; height: 36px; }
  .logo-flip-stack { width: 78px; }
  .logo-flip-stack img { width: 78px; height: 36px; margin-bottom: 8px; }

  /* --- intelligence scroll-jack: one card under the phone, its text swaps
     at the morph instead of a second masked card --- */
  .intelligence { height: 2200px; }
  /* dvh tracks the real visible height as Safari's bar collapses, so the
     pinned stage stays centered instead of riding high (svh = bar-visible
     height, which is shorter than the screen mid-scroll) */
  .intelligence-sticky { height: 100dvh; padding: 20px 0; }
  /* phone GPUs: one glow layer at a lighter blur instead of two huge ones */
  .ai-wave::after { display: none; }
  .ai-wave::before { filter: blur(30px); }
  .intelligence-head { width: calc(100% - 40px); }
  .ascii-gear { width: 100vw; height: 100vw; top: -22vw; }
  .iphone-stage { flex-direction: column; justify-content: center; }
  /* fixed share of the real viewport: the phone + card cluster fills the
     stage instead of floating high with dead space below */
  .iphone { flex: 0 0 auto; min-height: 0; height: 58dvh; max-height: 560px; }
  .float-card-right { display: none; }
  .float-card-left {
    position: static;
    margin-top: -14px;
    width: min(76vw, 300px);
    z-index: 3;
  }
  .float-card .float-card-chips,
  .float-card .float-card-text { transition: opacity .18s ease; }
  .float-card.fc-swap .float-card-chips,
  .float-card.fc-swap .float-card-text { opacity: 0; }
  .chip { font-size: 13px; }
  .stage-toggle { bottom: -15px; }
  .st-item { font-size: 11.5px; padding: 6px 10px; gap: 5px; }
  .st-item svg { width: 12px; height: 12px; }
  .float-card-text { padding: 14px 14px; }
  .float-card-text p { font-size: 13px; }

  /* --- showcase --- */
  .showcase-head { width: calc(100% - 40px); }
  .showcase-body { width: 100%; gap: 24px; }
  .showcase-ticker-wrap { height: min(96vw, 400px); }
  .shot-card {
    width: min(46vw, 190px);
    height: auto;
    aspect-ratio: 290 / 518;
    border-radius: 20px;
  }
  .shot-card .phone-frame { width: 72%; border-radius: 14px; }
  .app-icons { scale: 0.85; transform-origin: bottom center; }

  /* --- how it works --- */
  /* --- v2 process scroll-jack --- */
  .process { height: 2600px; }
  .process-sticky { height: 100dvh; max-height: none; }
  .proc-phone { width: 240px; height: 480px; border-radius: 44px; padding: 11px; }
  .proc-screen { border-radius: 34px; }
  .proc-ico { width: 48px; height: 48px; border-radius: 13px; }
  .pi-figma svg { width: 22px; height: 33px; }
  .pi-gpt svg { width: 25px; height: 25px; }
  [data-step="1"] .pi-claude { transform: translate(calc(-50% - 128px), calc(-50% - 172px)) rotate(-9deg) scale(1); }
  [data-step="1"] .pi-app { transform: translate(calc(-50% + 128px), calc(-50% - 138px)) rotate(8deg) scale(1); }
  [data-step="1"] .pi-figma { transform: translate(calc(-50% - 118px), calc(-50% + 128px)) rotate(-6deg) scale(1); }
  [data-step="1"] .pi-gpt { transform: translate(calc(-50% + 118px), calc(-50% + 152px)) rotate(7deg) scale(1); }
  .proc-req { left: -12px; top: 56px; width: 200px; }
  .proc-git { right: -14px; top: 120px; width: 186px; }
  .proc-md { left: -14px; bottom: 96px; width: 168px; }
  .proc-testi { right: -12px; bottom: 96px; width: 200px; }
  .proc-pill { font-size: 11px; width: 106px; padding: 7px 0; gap: 5px; }
  .proc-pill svg { width: 12px; height: 12px; }
  .proc-heads { height: 84px; margin-top: 24px; }
  .proc-h { font-size: 27px; }

  .hiw { width: calc(100% - 40px); }
  .hiw-header { padding: 24px 12px 0; gap: 40px; }
  .hiw-sub { width: 100%; font-size: 16px; }
  .steps-pointer { width: 100%; }
  .steps-panel { flex-direction: column; }
  /* heading-only process cards on mobile */
  .steps-left { flex: none; width: 100%; height: 140px; }
  .step-content { height: 140px; padding: 20px 24px; justify-content: center; }
  .step-content h3 { font-size: 22px; }
  .step-content p { display: none; }
  .steps-right {
    flex: none;
    width: 100%;
    height: 340px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .sa-phone { width: 186px; top: 20px; border-width: 3px; border-radius: 30px 30px 0 0; }
  .sa1-box { width: min(84%, 272px); bottom: 18px; }
  .sa2-comment { width: 178px; }
  .sa2-c1 { left: 10px; top: 22px; }
  .sa2-c2 { right: 8px; top: 112px; }
  .sa2-c3 { left: 18px; bottom: 26px; }
  .sa3-testi { width: min(86%, 284px); bottom: 16px; }

  /* --- bento --- */
  .bento { width: calc(100% - 40px); }
  .b3-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .b3-card { height: auto; padding: 28px 24px; }
  .bv2-grid { width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .bv2-tall { grid-row: auto; }
  .bv2-h { font-size: 22px; }
  .bv2-side .bv2-h { font-size: 20px; }
  .bv2-card { padding: 24px 20px; }
  .bv2-screen img { width: min(70vw, 260px); }
  .b3-head h3 { font-size: 21px; }
  .b3-head p { max-width: 100%; font-size: 15px; }
  /* symmetric on mobile: 3 fluid columns × 2 rows (folders 7-8 dropped),
     no right-edge bleed */
  .b3-folders {
    margin-top: 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    column-gap: 10px;
    row-gap: 12px;
  }
  .b3-folder:nth-child(n+7) { display: none; }
  .b3-folder-name { font-size: 10px; }
  .b3-folder-count { font-size: 9px; padding: 2px 6px; }
  .b3-prompt { margin-top: 8px; }
  .b3-ph { font-size: 15px; min-height: 46px; }
  .b3-chips { gap: 8px; }
  .b3-chip { font-size: 13.5px; padding: 9px 12px; }

  /* --- pricing --- */
  .pricing-head { width: calc(100% - 40px); }
  .pricing-cards { flex-direction: column; width: calc(100% - 40px); }
  .price-card, .plan-card { width: 100%; }

  /* --- unfold gallery: dropped entirely on mobile --- */
  .unfold { display: none; }

  /* --- testimonials: Cal frame tucks 12px under the phone and runs tall
     enough to show the whole booking widget --- */
  /* --- about card --- */
  .about-stage { width: calc(100% - 8px); }
  .about-card { width: min(92%, 420px); padding: 54px 24px 30px; }
  .about-head h2 { font-size: clamp(30px, 8.2vw, 36px); }
  .ac-name { font-size: 24px; }
  .ap-1 { top: -30px; right: -4px; }
  .ap-1 img { width: 96px; height: 96px; }
  .ap-2 { bottom: -34px; left: -6px; }
  .ap-2 img { width: 104px; height: 82px; }
  .ap-3 { bottom: -30px; right: -4px; }
  .ap-3 img { width: 88px; height: 106px; }
  .about-clip { left: 44px; }
  /* the fixed-width watercolor halo overflowed the viewport sideways, which
     made phones zoom the whole layout out to fit (the "broken" mobile view) */
  .about-bg { width: 100%; }
  /* taped photos + doodles hang off the card by design; past the viewport
     edge they'd re-trigger the zoom-out, so trim them at the section edge
     (x only — the vertical overhangs stay visible) */
  .about { overflow-x: clip; }
  /* same story: the confetti canvas extends 180px past each side of the jar,
     and the jar stage itself is 2px wider than the smallest phones */
  .jar-block { overflow-x: clip; }
  /* keep the 377:356 stage ratio, just smaller — full-width the jar dwarfed
     the phone screen and pushed the picker + button below the fold */
  .jar-stage { width: 260px; height: 245px; }
  .ad-1 { left: -6px; top: -64px; width: 62px; }
  .ad-2 { right: -8px; width: 66px; }
  .ad-3 { display: none; }

  .testimonials { height: 1510px; }
  .testi-head { width: calc(100% - 40px); }
  .testi-phone { top: 210px; }
  .tweet-ticker-wrap { top: 420px; }
  .cal-frame {
    top: 650px;
    width: calc(100% - 40px);
    height: 800px;
    padding: 10px;
    border-radius: 24px;
  }
  .cal-mid { padding: 10px; border-radius: 16px; }

  /* --- footer --- */
  .burnwrap { height: calc(var(--band) + 500px); }
  .footer-inner { padding: 0 20px 20px; }
  .footer-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
  .footer-mono { font-size: 28px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-bottom { margin-top: 40px; }
  .ascii-footer { width: 140vw; height: 80vw; }
}