/* ===================================================================
   Squiid: layout mirrors sohub.digital (see NOTES.md)
   =================================================================== */
:root {
  --bg: #F0F6F8;
  --black: #1E232C;
  --deep: #0C1016;
  --surface: #1E242C;
  --grey: #A5ABAD;
  --soft: #D9E0E3;
  --white: #F0F6F8;
  --ease: cubic-bezier(.22, .68, 0, 1);
  --ease-over: cubic-bezier(.22, .68, 0, 1.5);
  --px: 1rem;
}
@media (min-width: 768px)  { :root { --px: 2rem; } }
@media (min-width: 1024px) { :root { --px: 3rem; } }
@media (min-width: 1280px) { :root { --px: 5rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: #000; scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: rgba(30,35,44,.45) transparent; }
/* text highlight: the hero card's pink */
::selection { background: #ff78cd; color: #0C1016; }
::-moz-selection { background: #ff78cd; color: #0C1016; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--black);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; cursor: pointer; }
h1, h2, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide-mobile { display: none !important; }
@media (min-width: 1024px) { .hide-mobile { display: flex !important; } }

/* ------------------------------------------------------------------
   Pill buttons
   ------------------------------------------------------------------ */
.pill {
  position: relative; display: inline-flex; align-items: center; gap: .7rem;
  height: 3rem; padding: 0 1.15rem 0 1.45rem; border-radius: 999px;
  border: 1px solid transparent; user-select: none; text-decoration: none; cursor: pointer;
  font: 500 .95rem/1 Inter, sans-serif; letter-spacing: -0.01em; text-transform: none; white-space: nowrap;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
@media (min-width: 1024px) { .pill { height: 3.25rem; padding: 0 1.25rem 0 1.6rem; font-size: 1rem; } }
.pill-label { padding: 0; font: inherit; letter-spacing: inherit; text-transform: none; }
/* the arrow: a bare glyph that steps forward on hover */
.pill-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; overflow: hidden; }
.ico { display: block; width: 100%; transition: transform .35s var(--ease); }
.ico svg { display: block; width: 100%; }
.ico-b { display: none; }
.pill:hover .ico { transform: translateX(3px); }

/* on dark ground: a hairline capsule that fills white on hover */
.pill-light, .pill-surface, .pill-outline { background: transparent; border-color: rgba(240,246,248,.28); color: var(--white); }
.pill-light:hover, .pill-surface:hover, .pill-outline:hover { background: var(--white); border-color: var(--white); color: var(--deep); }
/* on light ground: solid ink that hollows out on hover */
.pill-dark, .pill-black { background: var(--deep); border-color: var(--deep); color: var(--white); }
.pill-dark:hover, .pill-black:hover { background: transparent; color: var(--deep); }
/* the icon colours are inherited now; these classes stay for the markup */
.pill-icon-light, .pill-icon-surface, .pill-icon-dark, .pill-icon-darker, .pill-icon-outline { background: none; color: inherit; }

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.header-glass {
  position: fixed; left: 0; right: 0; top: 0; height: 5.25rem; z-index: 996; pointer-events: none;
  background: rgba(240, 246, 248, .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(30, 35, 44, .06);
  opacity: 0; transform: translateY(-100%); transition: opacity .4s ease, transform .35s var(--ease);
}
@media (min-width: 1024px) { .header-glass { height: 6rem; } }
.is-scrolled .header-glass { opacity: 1; transform: translateY(0); }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 997;
  pointer-events: none;
  transition: transform .35s var(--ease);
  padding: 1.5rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 1024px) { .site-header { padding: 1.5rem 4.5rem 1.5rem 3rem; align-items: flex-start; } }
/* hide on scroll down, come back on scroll up (main.js toggles the class) — so the footer wordmark
   and the menu are never sat on by the fixed header at the bottom of a page */
.is-header-hidden .site-header, .is-header-hidden .header-glass { transform: translateY(-110%); }
@media (prefers-reduced-motion: reduce) {
  .site-header, .header-glass { transition: none; }
}
.header-logo {
  pointer-events: auto; display: flex; align-items: center; gap: .6rem;
  color: var(--deep); transition: filter .25s ease;
}
.header-logo:hover { filter: brightness(1.1); }
.header-logo img {
  display: block; width: 2.5rem; height: 2.5rem; border-radius: 999px; object-fit: cover;
  filter: drop-shadow(0 3px 8px rgba(12, 16, 22, .22));
}
@media (min-width: 1024px) { .header-logo img { width: 2.75rem; height: 2.75rem; } }
.header-wordmark {
  font-weight: 600; font-size: 2rem; line-height: 1; letter-spacing: -0.06em;
}
@media (min-width: 1024px) { .header-wordmark { font-size: 2.2rem; } }
.header-right { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-end; }
.header-buttons { display: flex; align-items: center; gap: .75rem; pointer-events: auto; position: relative; z-index: 4; }
.header-login { font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--deep); padding: .6rem 1rem; border-radius: 999px; background: rgba(30,35,44,.06); transition: background-color .2s; }
.header-login:hover { background: rgba(30,35,44,.08); }
.has-hero-video:not(.is-scrolled) .header-login { color: var(--white); background: rgba(255,255,255,.14); }
.has-hero-video:not(.is-scrolled) .header-login:hover { background: rgba(255,255,255,.12); }
/* The way in, beside the way back in. Filled, so of the two it reads as the one
   to press; the "+" is a plain glyph, not an icon. */
.header-signup { display: inline-flex; align-items: center; gap: .32rem; font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--white); background: var(--deep); padding: .6rem 1rem; border-radius: 999px; white-space: nowrap; transition: background-color .2s; }
.header-signup:hover { background: #1E242C; }
.header-signup-plus { line-height: 1; font-weight: 500; opacity: .8; }
/* Over the hero video the pair inverts, the same way .header-login does. */
.has-hero-video:not(.is-scrolled) .header-signup { color: var(--deep); background: var(--white); }
.has-hero-video:not(.is-scrolled) .header-signup:hover { background: rgba(255,255,255,.86); }
/* Phones: the pill shrinks to the "+" alone, so logo, both pills and the menu
   button still sit on one line. */
@media (max-width: 640px) {
  .header-buttons { gap: .5rem; }
  .header-signup { width: 2.5rem; height: 2.5rem; padding: 0; gap: 0; justify-content: center; }
  .header-signup-text { display: none; }
  .header-signup-plus { font-size: 1.2rem; font-weight: 400; opacity: 1; }
}
.icon-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px; padding: 0;
  transition: background-color .25s ease, filter .25s ease;
}
@media (min-width: 1024px) { .icon-btn { width: 2.75rem; height: 2.75rem; } }
.icon-btn:hover { filter: brightness(1.08); }
.icon-btn svg { display: block; width: 44%; }
.icon-btn-dark { background: var(--deep); color: var(--white); }
.icon-btn .ico-dots { width: 40%; }
.icon-btn .ico-close { display: none; width: 46%; }
.menu-open .icon-btn .ico-dots { display: none; }
.menu-open .icon-btn .ico-close { display: block; }

/* hover bubble under the icon buttons */
.tip {
  position: absolute; top: calc(100% + .7rem); left: 50%;
  left: 0; right: 0; margin: 0 auto; width: max-content; opacity: 0; pointer-events: none;
  background: var(--deep); color: var(--white);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  padding: .35rem .7rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(12, 16, 22, .18);
}
.tip::before {
  content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-top: 0; border-bottom-color: var(--deep);
}

/* ---------- menu: a compact dropdown under the header buttons ---------- */
.header-right { position: relative; }
.site-menu {
  position: absolute; right: 0; top: calc(100% + .75rem); width: 34rem; max-width: calc(100dvw - 2rem);
  z-index: 30; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right;
  transition: opacity .22s ease, transform .28s var(--ease), visibility 0s linear .28s;
}
.menu-open .site-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .22s ease, transform .32s var(--ease), visibility 0s; }
@media (max-width: 1023px) {
  .site-menu { position: fixed; left: 1rem; right: 1rem; top: 4.5rem; width: auto; max-width: none; }
}
.menu-panel {
  background: var(--deep); color: var(--white); border-radius: 1.25rem; padding: 1rem;
  box-shadow: 0 30px 80px -30px rgba(12,16,22,.6), 0 1px 0 rgba(255,255,255,.06) inset;
  display: flex; flex-direction: column; gap: .75rem;
}
.menu-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: .5rem; }
@media (max-width: 480px) { .menu-cols { grid-template-columns: 1fr; } }
.menu-col { display: flex; flex-direction: column; gap: .15rem; }
.menu-label { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); padding: .5rem .75rem .35rem; }
.menu-item {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .6rem .75rem; border-radius: .75rem; color: var(--white);
  transition: background-color .18s ease;
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.menu-item-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.menu-item-sub { font-size: .8rem; color: var(--grey); line-height: 1.3; }
.menu-foot { display: flex; gap: .5rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.08); }
.menu-btn {
  flex: 1; text-align: center; font-size: .9rem; font-weight: 600; letter-spacing: -0.01em;
  padding: .7rem 1rem; border-radius: 999px; background: var(--white); color: var(--deep);
  transition: filter .2s ease, background-color .2s ease;
}
.menu-btn:hover { filter: brightness(1.05); }
.menu-btn-ghost { background: rgba(255,255,255,.08); color: var(--white); }
.menu-btn-ghost:hover { background: rgba(255,255,255,.14); filter: none; }

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.home-hero { position: relative; width: 100%; height: 40vh; }
/* trailer background: only shown once the video can play (body.has-hero-video) */
.hero-video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; opacity: 0; pointer-events: none; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,22,.35) 0%, rgba(12,16,22,.1) 40%, rgba(12,16,22,.65) 100%); }
.has-hero-video .home-hero { height: 100vh; background: var(--deep); }
.has-hero-video .hero-video-wrap { opacity: 1; }
.has-hero-video .hero-render { display: none; }
.glass-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none;
  clip-path: url(#heroClip);
  filter: url(#glassWarp) blur(2.5px) saturate(1.7) brightness(1.5) contrast(1.08);
}
.glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.has-hero-video .glass-video { display: block; }
/* hero text is solid white over the video (the glass treatment is off; .glass-video stays hidden) */
.has-hero-video .glass-video { display: none; }
.has-hero-video .hero-wordmark { color: var(--white); }
.has-hero-video .hero-tagline { color: var(--white); }
.has-hero-video .hero-wordmark-wrap { filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.has-hero-video .header-glass { background: rgba(12,16,22,.55); border-bottom-color: rgba(255,255,255,.08); }
.has-hero-video.is-scrolled .header-glass { background: rgba(240,246,248,.62); border-bottom-color: rgba(30,35,44,.06); }
.has-hero-video:not(.is-scrolled) .header-wordmark { color: var(--white); }
@media (min-width: 1024px) { .home-hero { height: 100vh; } }
.hero-render {
  position: absolute; z-index: 1; width: 34vw; right: 5%; bottom: 4%;
  will-change: transform;
}
@media (min-width: 1024px) { .hero-render { right: 8%; bottom: 0; width: 32vw; } }
.hero-wordmark-wrap {
  position: absolute; display: flex; flex-direction: column; gap: 1.5rem;
  bottom: 4%; left: var(--px); right: var(--px);
}
/* desktop: the wordmark's d sits centred between the header icons and the MCP card; the card itself stays at 9vh */
@media (min-width: 1024px) { .hero-wordmark-wrap { bottom: 6%; gap: .5rem; } } /* desktop: the wordmark sits a touch lower, closer to the tagline */
.hero-wordmark { display: block; width: 100%; color: var(--black); line-height: 0; opacity: 0; } /* hidden until main.js lifts it once Inter is in, so the fallback-font paint never shows */
.hero-tagline {
  font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.025em;
  position: relative; z-index: 3; color: var(--black);
}
@media (min-width: 1024px) { .hero-tagline { font-size: 3.5rem; white-space: nowrap; } }
.statement, .hw-title, .who-title, .section-head p { text-wrap: pretty; }
.mask-line { display: block; overflow: clip; padding: .1em 0 .22em; margin: -.1em 0 -.22em; }
.hero-in-line { display: block; will-change: transform; transform: translateY(110%); }


/* ------------------------------------------------------------------
   Section heads (label + statement)
   ------------------------------------------------------------------ */
.section-head { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) { .section-head { gap: 2.5rem; } }
.section-label { font-size: 1rem; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0; transform: translateY(4rem); }
@media (min-width: 768px)  { .section-label { font-size: 1.125rem; } }
@media (min-width: 1024px) { .section-label { font-size: 1.25rem; } }
@media (min-width: 1536px) { .section-label { font-size: 1.5rem; } }
.statement {
  color: var(--black); line-height: 1; font-weight: 600; letter-spacing: -0.075em;
  font-size: 1.875rem;
}
@media (min-width: 768px)  { .statement { font-size: 3rem; } }
@media (min-width: 1024px) { .statement { font-size: 3.75rem; } }
@media (min-width: 1280px) { .statement { font-size: 4.5rem; } }
@media (min-width: 1536px) { .statement { font-size: 7rem; } }
.statement .w { display: inline-block; color: var(--grey); }
.statement .w.h-word { color: var(--grey); }
.statement .w.on { color: var(--black); }
.statement .w.h-word.on { color: #5b6166; }

/* ------------------------------------------------------------------
   "How it works": the projects grid
   ------------------------------------------------------------------ */
.home-projects {
  margin-top: 6rem; position: relative; width: 100%;
  display: flex; flex-direction: column; padding: 0 var(--px) 4rem;
}
@media (min-width: 1024px) { .home-projects { padding-bottom: 8rem; } }
.projects-grid {
  margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; width: 100%;
}
@media (min-width: 1024px) { .projects-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.project-card {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 1rem; display: flex; flex-direction: column;
  background: var(--deep); color: var(--white);
  will-change: transform, opacity; cursor: default;
}
.project-title-div {
  position: absolute; z-index: 2; left: 1rem; bottom: 1rem; width: 100%;
  display: flex; align-items: center; overflow: hidden;
}
@media (min-width: 1024px) { .project-title-div { left: 2rem; bottom: 2rem; } }
.arrow-svg { display: none; width: 2.25rem; transform: translateX(-100%); transition: transform .4s var(--ease); color: var(--white); }
@media (min-width: 1024px) { .arrow-svg { display: block; } }
.arrow-svg svg { display: block; width: 100%; }
.project-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.05em; color: var(--white); transition: transform .4s var(--ease); }
@media (min-width: 1024px) { .project-title { font-size: 3rem; letter-spacing: -0.075em; } }

.project-gradient { position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,.45), transparent); }
.project-visual { position: absolute; inset: 0; z-index: 0; padding: 1.25rem 1.25rem 7rem; display: flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .project-card { aspect-ratio: 16 / 11; } .project-visual { padding: 1.5rem 2rem 9rem; } }

/* shared Bklit-style panel inside the dark cards */
.project-visual { background: #0a0a0a; align-items: stretch; }
.bk-badge {
  font-size: .7em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #cfcfcf; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .3rem .6rem; white-space: nowrap;
}

/* card 1: service icon marquee */
.visual-shop { align-items: center; }
.catalog { height: auto; padding: .8rem 1rem; justify-content: center; align-items: center; text-align: center; gap: .6rem; overflow: hidden; }
@media (min-width: 1024px) { .catalog { padding: .9rem 1.25rem; } }
.catalog-head { display: flex; flex-direction: column; gap: .15rem; }
.catalog-rows { width: 100%; display: flex; flex-direction: column; gap: .5rem; }
.mq { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display: flex; gap: .5rem; width: max-content; will-change: transform; }
.mq-tile {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: 26%;
  background: linear-gradient(180deg, #1f1f1f, #121212); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
@media (min-width: 1024px) { .mq-tile { width: 2.75rem; height: 2.75rem; } }
.mq-tile img { width: 50%; height: 50%; display: block; }
.app-ico {
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 26%;
  background: linear-gradient(180deg, #1f1f1f, #121212); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.app-ico img, .app-ico svg { width: 52%; height: 52%; display: block; }
.app-mono { font: 700 .7rem/1 Inter, sans-serif; color: #fff; letter-spacing: -0.02em; }

/* card 2: editor window */
.code-win { padding: 0; overflow: hidden; gap: 0; justify-content: flex-start; }
.code-bar {
  display: flex; align-items: center; gap: .75rem; padding: .55rem .85rem;
  background: #141414; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .75em; color: #8a8a8a;
}
.code-dots { display: flex; gap: .35rem; }
.code-dots i { width: .6rem; height: .6rem; border-radius: 999px; background: #ff5f57; }
.code-dots i:nth-child(2) { background: #febc2e; }
.code-dots i:nth-child(3) { background: #28c840; }
.code-tab { color: #e6e6e6; font-weight: 600; background: #0d0d0d; border: 1px solid rgba(255,255,255,.1); border-radius: .4rem; padding: .2rem .6rem; }
.code-meta { margin-left: auto; }
.code {
  margin: 0; padding: .6rem 1rem .6rem 0; counter-reset: line; overflow: hidden; white-space: normal;
  font: 500 .7rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #d4d4d4;
}
@media (min-width: 1024px) { .code { font-size: .78rem; } }
.ln { display: block; padding-left: 3rem; position: relative; white-space: pre; min-height: 1.5em; }
.ln::before {
  counter-increment: line; content: counter(line);
  position: absolute; left: 0; width: 2rem; text-align: right; color: #4a4a4a;
}
.ln-active { background: linear-gradient(90deg, rgba(143,227,193,.14), transparent 70%); }
.caret { display: inline-block; width: .55em; height: 1.1em; vertical-align: -0.2em; margin-left: .15em; background: #8fe3c1; }
#liveKey { font-variant-ligatures: none; }
.code-meta { display: inline-flex; align-items: center; gap: .4rem; }
.live-dot { width: .45rem; height: .45rem; border-radius: 999px; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.c-cm { color: #6a6a6a; font-style: italic; }
.c-key { color: #8fe3c1; }
.c-op { color: #9a9a9a; }
.c-str { color: #f2e6a0; }
.c-dead { color: #4f4f4f; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }

/* card 4: bill: Bklit-style area chart (bklit.com) */
.visual-bill { background: #0a0a0a; align-items: center; }
.visual-bill .bk-card { height: auto; }
.bk-card {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: .5rem; min-height: 0;
  border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; padding: .9rem 1rem .8rem;
  background: #0d0d0d; color: #fafafa; font-size: .8rem;
}
@media (min-width: 1024px) { .bk-card { padding: 1.1rem 1.25rem 1rem; font-size: .9rem; } }
.bk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bk-title { display: block; font-weight: 600; letter-spacing: -0.01em; }
.bk-sub { display: block; color: #8a8a8a; font-size: .85em; margin-top: .15rem; }
.bk-total { font-weight: 600; font-size: 1.2em; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bk-chart { width: 100%; height: 5.5rem; display: block; overflow: visible; }
@media (min-width: 1024px) { .bk-chart { height: 5.5rem; } }
.bk-axis { display: flex; justify-content: space-between; color: #7a7a7a; font-size: .7em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .04em; }
.bk-note { color: #8a8a8a; font-size: .8em; margin-top: .1rem; }
.bk-dot { filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.bk-foot { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.08); }
.bk-pill { font-size: .7em; font-weight: 600; color: #d6d6d6; background: #161616; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: .3rem .6rem; white-space: nowrap; }

/* ------------------------------------------------------------------
   Services: pinned card stack
   ------------------------------------------------------------------ */
.home-services { display: flex; flex-direction: column; padding: 0 var(--px); }
.service-items-wrapper {
  margin-top: 4rem; width: 100%; position: relative;
  display: flex; flex-direction: column; gap: 2rem;
}
@media (min-width: 1024px) {
  /* sticky, not pinned: the compositor holds the stack in place, so there is no snap at either end */
  .service-items-wrapper { margin-top: 8rem; display: block; aspect-ratio: 16 / 7.5; height: auto; position: sticky; top: 12vh; }
}
.service-item {
  background: var(--card); width: 100%; border-radius: 2rem;
  padding: 2.5rem 1.5rem; display: flex; flex-direction: column; gap: 2rem;
  clip-path: inset(0);
}
@media (min-width: 1024px) {
  .service-item { position: absolute; inset: 0 auto auto 0; aspect-ratio: 16 / 7; height: auto; border-radius: 3rem; padding: 3rem 3.25rem; flex-direction: row; align-items: stretch; gap: 3rem; }
  .service-copy { justify-content: center; }
}
@media (min-width: 1536px) { .service-item { padding: 4rem 4.5rem; gap: 4rem; } }
/* the four statement cards: a full-bleed photo of the squid, one big line of type */
.fit-card { padding: 0; overflow: hidden; background: #0C1016; aspect-ratio: 16 / 9; min-height: 18rem; }
/* below the pinned stack the cards flow in a column and need their own positioning context;
   from 1024px up the stack rule makes them absolute, and this must not override it */
@media (max-width: 1023px) { .fit-card { position: relative; } }
@media (min-width: 1024px) { .fit-card { aspect-ratio: 16 / 7; min-height: 0; } }
@media (min-width: 1536px) { .fit-card { padding: 0; } }
.fit-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fit-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,9,13,.78) 0%, rgba(6,9,13,.25) 45%, rgba(6,9,13,0) 70%); }
.fit-title { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; margin: 0; color: var(--white); font-weight: 600; letter-spacing: -0.05em; line-height: .95; font-size: 2.75rem; text-shadow: 0 10px 40px rgba(0,0,0,.5); }
@media (min-width: 1024px) { .fit-title { left: 3.25rem; right: 3.25rem; bottom: 3rem; font-size: 6rem; } }
@media (min-width: 1536px) { .fit-title { left: 4.5rem; bottom: 4rem; font-size: 8rem; } }
.service-copy { display: flex; flex-direction: column; gap: 1.25rem; flex: 1 1 0; min-width: 0; }
.service-num { font-size: .85rem; font-weight: 600; letter-spacing: .12em; color: var(--grey); }
.service-title { font-size: 3rem; line-height: .95; letter-spacing: -0.05em; font-weight: 400; }
@media (min-width: 1024px) { .service-title { font-size: 5rem; } }
@media (min-width: 1536px) { .service-title { font-size: 7rem; } }
.t-white { color: #fff; }
.t-grey { color: var(--grey); }
.service-p { color: #fff; font-size: 1.05rem; line-height: 1.45; max-width: 34rem; }
@media (min-width: 1536px) { .service-p { font-size: 1.25rem; } }
.service-tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; user-select: none; }
.tag { background: var(--tag); color: var(--white); font-size: .8rem; padding: .45rem .9rem; border-radius: 999px; white-space: nowrap; }
.service-visual { flex: 0 0 auto; width: 100%; perspective: 1200px; display: flex; }
@media (min-width: 1024px) { .service-visual { width: 50%; } }
.service-visual .bk-card {
  height: 100%; width: 100%; font-size: .9rem; padding: 1.25rem 1.5rem; gap: .75rem;
  justify-content: space-between; box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
@media (min-width: 1024px) { .service-visual .bk-card { font-size: 1rem; padding: 1.5rem 1.75rem; } }
@media (min-width: 1536px) { .service-visual .bk-card { font-size: 1.15rem; padding: 2rem 2.25rem; } }
.service-visual .bk-head { align-items: center; }
.service-visual .bk-title { font-size: 1.15em; }

/* 01 account */
.acct { gap: .8rem; }
.acct-head { display: flex; align-items: center; gap: .8rem; }
.acct-avatar { width: 2.6rem; height: 2.6rem; flex: none; }
.acct-id { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.acct-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.acct-stats > div { display: flex; flex-direction: column; gap: .15rem; background: #141414; border: 1px solid rgba(255,255,255,.08); border-radius: .6rem; padding: .55rem .7rem; }
.svc-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.svc-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; background: #141414; border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; padding: .7rem .4rem; }
.svc-tile .app-ico { width: 2rem; height: 2rem; box-shadow: none; background: #0d0d0d; }
.svc-name { font-size: .72em; color: #cfcfcf; white-space: nowrap; }
.svc-tile .live-dot { position: absolute; top: .5rem; right: .5rem; }
.app-eye { background: none; border: 0; }
.app-eye img { width: 100%; height: 100%; }

/* 02 key */
.keycard { gap: .7rem; }
.keycard-key { display: flex; align-items: center; gap: .75rem; font: 600 1.05em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8fe3c1; background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); border-radius: .6rem; padding: .6rem .8rem; letter-spacing: .02em; }
.key-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.key-copy { font: 600 .7em/1 Inter, sans-serif; color: #cfcfcf; text-transform: uppercase; letter-spacing: .06em; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .3rem .55rem; }
.key-rows { display: flex; flex-direction: column; gap: .4rem; }
.key-row { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: .6rem; background: #141414; border: 1px solid rgba(255,255,255,.08); border-radius: .6rem; padding: .45rem .7rem; }
.ico-row { display: flex; gap: .3rem; }
.ico-sm { width: 1.6rem; height: 1.6rem; border-radius: 999px; box-shadow: none; background: #0d0d0d; }
.ico-sm img { width: 55%; height: 55%; }
.kc-label { font-size: .7em; color: #8a8a8a; text-transform: uppercase; letter-spacing: .06em; }
.kc-val { font-weight: 600; }
.kc-meta { font-size: .75em; color: #8a8a8a; white-space: nowrap; }
.rotation { display: flex; flex-direction: column; gap: .35rem; }
.rotation-head { display: flex; justify-content: space-between; align-items: center; }
.rotation-bar { height: .45rem; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.rotation-bar i { display: block; height: 100%; width: var(--p); border-radius: 999px; background: linear-gradient(90deg, #8fe3c1, #3ddc84); }
.audit { display: flex; flex-direction: column; font: 500 .74em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #b5b5b5; border-top: 1px solid rgba(255,255,255,.08); padding-top: .4rem; }
.audit-row { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .6rem; }
.audit-row span:first-child { color: #6a6a6a; }
.ok { color: #3ddc84; }

/* 03 invoice */
.inv-row { flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .4rem .25rem; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 1.05em; }
.inv-row .app-ico { width: 2.2rem; height: 2.2rem; border-radius: 30%; box-shadow: none; }
.inv-row .app-mono { font-size: .8em; }
.inv-amt { font-variant-numeric: tabular-nums; }
.inv-total { border-bottom: 0; font-weight: 700; }

/* 04 dashboard */
.dash-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 1280px) { .dash-tiles { grid-template-columns: repeat(4, 1fr); } }
.dash-val { font-weight: 600; font-size: 1.5em; letter-spacing: -0.03em; }
.dash-chart { flex: 1; height: auto; min-height: 5rem; margin-top: .25rem; }

/* ------------------------------------------------------------------
   Pricing
   ------------------------------------------------------------------ */
.home-pricing { display: flex; flex-direction: column; padding: 8rem var(--px) 0; gap: 3rem; }
@media (min-width: 1024px) { .home-pricing { gap: 4rem; } }

.price-how { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1024px) { .price-how { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.how-step { background: var(--soft); border-radius: 1.5rem; padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 1024px) { .how-step { padding: 2rem; border-radius: 2rem; } }
.how-num { font-size: .8rem; font-weight: 600; letter-spacing: .12em; color: #6b7378; }
.how-title { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; }
@media (min-width: 1024px) { .how-title { font-size: 1.6rem; } }
.how-step p { color: #4b5257; font-size: 1rem; line-height: 1.5; }

.price-calc {
  background: var(--deep); color: var(--white); border-radius: 1.5rem; padding: 1.5rem;
  display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: end;
}
@media (min-width: 1024px) { .price-calc { grid-template-columns: 1fr auto; padding: 2rem 2.5rem; border-radius: 2rem; gap: 2.5rem; } }
.calc-field { display: flex; flex-direction: column; gap: .6rem; }
.calc-label { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; color: var(--grey); }
.calc-label output { font-size: 1.6rem; font-weight: 600; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calc-scale { display: flex; justify-content: space-between; font-size: .75rem; color: #6a6f73; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#calcUsage { -webkit-appearance: none; appearance: none; width: 100%; height: .5rem; border-radius: 999px; background: linear-gradient(90deg, #8fe3c1 var(--fill, 9%), rgba(255,255,255,.14) var(--fill, 9%)); outline: none; }
#calcUsage::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #fff; border: 3px solid var(--deep); box-shadow: 0 0 0 2px #8fe3c1, 0 6px 16px rgba(0,0,0,.5); cursor: grab; }
#calcUsage::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #fff; border: 3px solid var(--deep); box-shadow: 0 0 0 2px #8fe3c1; cursor: grab; }
.stepper { display: inline-flex; align-items: center; gap: .25rem; background: #1E242C; border-radius: 999px; padding: .25rem; }
.step-btn { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--deep); color: #fff; font-size: 1.25rem; line-height: 1; transition: background-color .2s; }
.step-btn:hover { background: #2a323c; }
.stepper output { min-width: 3rem; text-align: center; font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-subs { grid-column: 1 / -1; }
.sub-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sub-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .45rem .6rem; border-radius: 999px;
  background: #1E242C; color: #c9cfd3; font-size: .85rem; font-weight: 500; border: 1px solid rgba(255,255,255,.1);
  transition: background-color .2s, border-color .2s, color .2s;
}
.sub-chip img { width: 1rem; height: 1rem; opacity: .7; }
.sub-chip em { font-style: normal; color: var(--grey); }
.sub-chip.is-on { background: rgba(143,227,193,.14); border-color: rgba(143,227,193,.5); color: #fff; }
.sub-chip.is-on img { opacity: 1; }
.sub-chip.is-on em { color: #8fe3c1; }
.calc-note { grid-column: 1 / -1; color: var(--grey); font-size: .85rem; margin: 0; }
.fee-sub { display: inline-block; margin-top: .2rem; font-size: .85em; color: #6b7378; }
.price-card-dark .fee-sub { color: var(--grey); }

.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; perspective: 1200px; }
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } }
.price-card {
  position: relative; border-radius: 1.75rem; background: var(--soft); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem;
  will-change: transform, opacity; transform-style: preserve-3d;
}
@media (min-width: 1024px) { .price-card { padding: 2.25rem; border-radius: 2.25rem; } }
.price-card-dark { background: var(--deep); color: var(--white); }
/* "Most popular" pill: the hero MCP card's oil-stained glass, shrunk to pill size.
   Reuses heroOilDrift / heroSpecWander / heroSpecBreathe (defined with .hero-card-glass). */
.price-flag {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2;
  overflow: hidden; isolation: isolate;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: .35rem .65rem;
  background: linear-gradient(152deg, rgba(20,26,34,.92) 0%, rgba(8,11,16,.96) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(180%) brightness(.6);
  backdrop-filter: blur(12px) saturate(180%) brightness(.6);
  border: 1px solid rgba(240,246,248,.22);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.06);
}
.price-flag .flag-text { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.price-flag::before, .price-flag::after { content: ""; position: absolute; pointer-events: none; }
.price-flag::before {
  inset: -70%;
  background:
    radial-gradient(60% 55% at 22% 30%, rgba(255,120,205,.85) 0%, rgba(255,120,205,0) 62%),
    radial-gradient(55% 60% at 78% 26%, rgba(110,225,255,.80) 0%, rgba(110,225,255,0) 64%),
    radial-gradient(62% 52% at 68% 78%, rgba(255,214,130,.78) 0%, rgba(255,214,130,0) 62%),
    radial-gradient(52% 58% at 26% 82%, rgba(150,130,255,.78) 0%, rgba(150,130,255,0) 64%),
    conic-gradient(from 210deg at 45% 55%, rgba(255,120,205,.5), rgba(110,225,255,.5), rgba(255,214,130,.5), rgba(150,130,255,.5), rgba(130,255,205,.45), rgba(255,120,205,.5));
  filter: blur(7px) saturate(150%);
  mix-blend-mode: screen; opacity: .72; will-change: transform, filter;
  animation: heroOilDrift 27s cubic-bezier(.5,.05,.5,.95) infinite;
}
.price-flag::after {
  inset: -40%;
  background:
    radial-gradient(38% 22% at 30% 40%, rgba(255,255,255,.50) 0%, rgba(255,255,255,.16) 35%, rgba(255,255,255,0) 70%),
    radial-gradient(26% 14% at 72% 62%, rgba(255,255,255,.34) 0%, rgba(255,230,250,.10) 40%, rgba(255,255,255,0) 72%);
  filter: blur(4px);
  mix-blend-mode: screen; opacity: .7; will-change: transform, opacity;
  animation:
    heroSpecWander 17s cubic-bezier(.65,.02,.32,.98) infinite alternate,
    heroSpecBreathe 7s cubic-bezier(.6,0,.4,1) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .price-flag::before { animation: none; transform: translate3d(0,0,0) rotate(24deg) scale(1.2); }
  .price-flag::after  { animation: none; transform: translate3d(4%, -6%, 0) rotate(-10deg) skewX(-8deg) scaleX(1.3) scaleY(.8); opacity: .6; }
}
.price-flag ~ .price-top { padding-right: 7.5rem; }
.price-top { display: flex; flex-direction: column; gap: .2rem; }
.price-name { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; }
.price-for { font-size: .9rem; color: #6b7378; }
.price-card-dark .price-for { color: var(--grey); }
.price-amt { font-size: 3.25rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; display: flex; align-items: baseline; gap: .4rem; }
@media (min-width: 1024px) { .price-amt { font-size: 3.75rem; } }
.price-amt small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: #6b7378; }
.price-card-dark .price-amt small { color: var(--grey); }
.price-fee { font-size: 1rem; color: #4b5257; }
.price-card-dark .price-fee { color: #c9cfd3; }
.price-fee strong { font-weight: 600; color: inherit; }
.price-example { font-size: .9rem; line-height: 1.45; color: #4b5257; padding: .9rem 1rem; border-radius: 1rem; background: rgba(12,16,22,.06); margin: 0; }
.price-card-dark .price-example { color: #c9cfd3; background: rgba(255,255,255,.06); }
.price-total { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; border-radius: 1rem; background: rgba(12,16,22,.06); }
.price-card-dark .price-total { background: rgba(255,255,255,.06); }
.price-card .kc-label { color: #6b7378; }
.price-card-dark .kc-label { color: var(--grey); }
.total-val { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.total-break { font-size: .85rem; color: #6b7378; }
.price-card-dark .total-break { color: var(--grey); }
.price-card ul { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .98rem; flex: 1; }
.price-card li { display: flex; gap: .5rem; align-items: flex-start; }
.price-card li::before { content: "✳"; color: #8a9196; flex: none; }
.price-card-dark li::before { color: #8fe3c1; }
.price-cta { align-self: flex-start; margin-top: .5rem; }
/* ---- what you pay / example month ---- */
.pay-label { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6b7378; }
.price-card-dark .pay-label { color: var(--grey); }
.price-pay { display: flex; flex-direction: column; gap: .1rem; }
.pay-row {
  display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, auto); column-gap: .75rem; align-items: baseline;
  padding: .6rem 0; border-top: 1px solid rgba(30,35,44,.12);
}
.price-pay .pay-label + .pay-row { border-top: 0; padding-top: .45rem; }
.price-card-dark .pay-row { border-color: rgba(255,255,255,.14); }
.pay-k { font-size: .9rem; color: #4b5257; line-height: 1.3; }
.price-card-dark .pay-k { color: #c9cfd3; }
.pay-v { font-size: .95rem; font-weight: 600; text-align: right; line-height: 1.3; min-width: 0; overflow-wrap: break-word; }
.pay-sub { grid-column: 1 / -1; font-size: .8rem; color: #6b7378; margin-top: .2rem; }
.price-card-dark .pay-sub { color: var(--grey); }
.price-receipt { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem; border-radius: 1rem; background: rgba(12,16,22,.06); }
.price-card-dark .price-receipt { background: rgba(255,255,255,.06); }
.rc-line { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; font-size: .88rem; color: #4b5257; font-variant-numeric: tabular-nums; }
.price-card-dark .rc-line { color: #c9cfd3; }
.rc-line span:last-child { flex: none; }
.rc-total { border-top: 1px solid rgba(30,35,44,.15); padding-top: .45rem; margin-top: .15rem; font-size: 1rem; font-weight: 600; color: inherit; }
.price-card-dark .rc-total { border-color: rgba(255,255,255,.18); color: #fff; }

/* ---- custom (full width) ---- */
.price-card-custom { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
/* the squid checks in: a wide looping clip behind the card; he surfaces in the clear middle between
   the copy and the form, and a veil on both sides keeps every word and field readable */
.custom-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; }
/* the copy on the left and the form on the right get their own shade; the middle, where the
   squid surfaces, is left clear */
.custom-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(12,16,22,.88) 0%, rgba(12,16,22,.55) 30%, rgba(12,16,22,.05) 48%, rgba(12,16,22,.05) 62%, rgba(12,16,22,.6) 80%, rgba(12,16,22,.85) 100%),
  linear-gradient(to bottom, rgba(12,16,22,.35), rgba(12,16,22,0) 40%); }
.price-card-custom > .custom-copy, .price-card-custom > .price-contact { position: relative; z-index: 1; }
.price-card-custom .price-contact { background: rgba(12,16,22,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 1024px) { .price-card-custom { grid-template-columns: 1fr minmax(20rem, 26rem); gap: 3rem; padding: 2.5rem; } }
.custom-copy { display: flex; flex-direction: column; gap: 1rem; }
.price-contact { display: flex; flex-direction: column; gap: .7rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 1.25rem; padding: 1.25rem; }
.contact-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
.contact-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.contact-field > span { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.contact-field input, .contact-field select {
  width: 100%; min-width: 0; font: inherit; font-size: .95rem; color: #fff; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14); border-radius: .75rem; padding: .6rem .75rem; appearance: none; -webkit-appearance: none;
}
.contact-field select { background-image: linear-gradient(45deg, transparent 50%, #c9cfd3 50%), linear-gradient(135deg, #c9cfd3 50%, transparent 50%); background-position: right 1rem center, right .7rem center; background-size: .3rem .3rem, .3rem .3rem; background-repeat: no-repeat; padding-right: 2rem; }
.contact-field select option { color: #14181f; }
.contact-field input::placeholder { color: #767c82; }
.contact-field input:focus, .contact-field select:focus { outline: none; border-color: #8fe3c1; background: rgba(255,255,255,.1); }
.contact-row { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 420px) { .contact-row { grid-template-columns: 1.4fr 1fr; } }
.price-contact .price-cta { margin-top: .3rem; }
.contact-foot { margin: 0; font-size: .8rem; color: var(--grey); }

.price-faq { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1024px) { .price-faq { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.faq-item { border-top: 1px solid rgba(30,35,44,.15); padding-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.faq-q { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.faq-item p { color: #4b5257; font-size: .98rem; line-height: 1.5; }

/* ------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------ */
.home-cta { position: relative; width: 100%; padding: 5rem var(--px) 2rem; }
@media (min-width: 1024px) { .home-cta { padding: 8rem var(--px) 3rem; } }
.cta-panel {
  background: var(--deep); color: var(--white); border-radius: 2rem; padding: 2.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 2.5rem; overflow: hidden; position: relative;
  will-change: transform, opacity;
}
@media (min-width: 1024px) { .cta-panel { border-radius: 3rem; padding: 4.5rem 5rem; flex-direction: row; align-items: center; gap: 4rem; } }
.cta-panel::before { content: ""; position: absolute; inset: auto -20% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 999px; background: radial-gradient(circle, rgba(143,227,193,.14), transparent 60%); pointer-events: none; }
.cta-panel.has-video::before { display: none; }
.cta-video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.cta-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-video-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,16,22,.92) 0%, rgba(12,16,22,.7) 40%, rgba(12,16,22,.15) 75%, rgba(12,16,22,.05) 100%); }
@media (max-width: 1023px) { .cta-video-shade { background: linear-gradient(180deg, rgba(12,16,22,.9) 0%, rgba(12,16,22,.75) 60%, rgba(12,16,22,.4) 100%); } }
.home-cta:has(.cta-panel.has-video) { padding: 0; margin-top: 4rem; }
.cta-panel.has-video { border-radius: 0; min-height: 100vh; width: 100%; padding: 6rem var(--px); display: flex; align-items: center; }
@media (min-width: 1024px) { .cta-panel.has-video { padding: 6rem var(--px); } }
.cta-panel.has-video .cta-copy { z-index: 1; max-width: 44rem; }
.cta-panel.has-video .cta-video-wrap { border-radius: 0; }
.cta-copy { display: flex; flex-direction: column; gap: 1.25rem; flex: 1 1 0; min-width: 0; position: relative; }
.cta-label { transform: none; }
.cta-title { font-weight: 600; font-size: 2.75rem; line-height: 1; letter-spacing: -0.05em; display: flex; flex-direction: column; color: #fff; }
@media (min-width: 768px)  { .cta-title { font-size: 3.75rem; } }
@media (min-width: 1280px) { .cta-title { font-size: 4.75rem; } }
.cta-title .mask-line:last-child .cta-line { color: var(--grey); }
.cta-line { display: block; will-change: transform; transform: translateY(110%); }
.cta-sub { color: #c9cfd3; font-size: 1.05rem; line-height: 1.5; max-width: 32rem; }
@media (min-width: 1024px) { .cta-sub { font-size: 1.2rem; } }
.cta-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .5rem; }
.cta-visual { position: relative; flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
@media (min-width: 1024px) { .cta-visual { width: 42%; } }
.cta-eye { position: relative; width: 6rem; height: 6rem; display: block; }
@media (min-width: 1024px) { .cta-eye { width: 8.5rem; height: 8.5rem; } }
.cta-eye img { position: relative; width: 100%; height: 100%; display: block; filter: drop-shadow(0 14px 30px rgba(0,0,0,.7)); }
.cta-env { width: 100%; font-size: .85rem; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.cta-env .code { white-space: normal; }

/* ------------------------------------------------------------------
   Footer: info bar, then the wordmark with the squid as the page's end
   ------------------------------------------------------------------ */
.site-footer { width: 100%; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; padding-top: 2rem; background: var(--white); }
@media (min-width: 1024px) { .site-footer { gap: 4rem; padding-top: 6rem; } }
.footer-info {
  margin: 0 var(--px); background: var(--deep); color: var(--white); border-radius: 1.5rem;
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem;
}
@media (min-width: 1024px) { .footer-info { padding: 1.75rem 2.5rem 1.4rem; border-radius: 2rem; } }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
@media (min-width: 1280px) { .footer-row { flex-wrap: nowrap; } }
.footer-links .pill, .go-up { height: 2.75rem; padding: 0 1rem 0 1.25rem; font-size: .9rem; gap: .55rem; }
.footer-links { gap: .6rem; }
.footer-row .footer-social { margin-left: auto; }
.footer-row .go-up { margin-left: 0; }
/* legal links live inside the dark card, so the footer keeps its original height and position */
.footer-info .footer-legal {
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; padding: .9rem 0 0; margin: 0;
  border-top: 1px solid rgba(255,255,255,.08); font-size: .8rem; color: var(--grey);
}
.footer-info .footer-legal a, .footer-info .footer-legal button { color: var(--grey); background: none; padding: 0; font: inherit; cursor: pointer; }
.footer-info .footer-legal a:hover, .footer-info .footer-legal button:hover { color: var(--white); }
.footer-brand { display: flex; flex-direction: column; gap: .55rem; margin-right: auto; flex: 0 0 auto; }
.footer-brand .footer-title { margin-bottom: .35rem; }
.footer-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
@media (min-width: 1024px) { .footer-title { font-size: 1.9rem; } }
.footer-sub { color: var(--grey); font-size: .95rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .footer-sub { white-space: nowrap; } }
.footer-links { display: none; align-items: center; gap: .75rem; }
@media (min-width: 1024px) { .footer-links { display: flex; } }
.footer-social { display: flex; align-items: center; gap: .75rem; }
@media (min-width: 1024px) { .footer-social { gap: 1rem; } }
.social-btn {
  background: #1E232C; color: #fff; padding: .7rem; border-radius: 999px;
  transition: background-color .2s ease-out;
}
.social-btn:hover { background: #434f65; }
.social-btn span { display: flex; align-items: center; justify-content: center; width: 1rem; }
@media (min-width: 1024px) { .social-btn span { width: 1.2rem; } }
.social-btn svg { width: 100%; display: block; }
.social-sep { display: block; width: 1rem; color: #555; }
.social-sep svg { display: block; width: 100%; }

.footer-mark { position: relative; overflow: hidden; line-height: 0; margin-top: 1rem; aspect-ratio: 810 / 256; height: auto; }
.footer-wordmark { display: block; width: 100%; color: var(--deep); }
.footer-elem {
  position: absolute; left: 47%; bottom: -34%; width: 24%; transform: translateX(-50%);
  z-index: 2; will-change: transform; pointer-events: none;
}

/* ---------- The whole stack: one dark panel, a row per layer, glossy tiles per service ---------- */
.home-lineup { display: flex; flex-direction: column; padding: 8rem var(--px) 8rem; gap: 3rem; }
@media (min-width: 1024px) { .home-lineup { gap: 4rem; } }
.stack { position: relative; overflow: hidden; border-radius: 1.5rem; background: var(--deep); color: var(--white); }
@media (min-width: 1024px) { .stack { border-radius: 2rem; } }
.stack::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 40% at 85% 0%, rgba(169,255,189,.10), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(255,120,205,.08), transparent 70%); }
.stack-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; padding: 1.5rem 1.5rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (min-width: 1024px) { .stack-head { padding: 2rem 2.5rem 1.5rem; } }
.stack-head .how-num { color: var(--grey); }
.stack-count { margin-left: auto; display: flex; gap: 1.25rem; font-size: .8rem; color: #c9cfd3; letter-spacing: .02em; }
.stack-count b { color: var(--white); font-weight: 600; }
.stack-row { position: relative; display: grid; grid-template-columns: 1fr; gap: .75rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.07); }
@media (min-width: 768px) { .stack-row { grid-template-columns: 11rem 1fr; align-items: center; gap: 1.5rem; padding: 1.15rem 2rem; } }
@media (min-width: 1024px) { .stack-row { grid-template-columns: 13rem 1fr; padding: 1.25rem 2.5rem; } }
.stack-row:last-of-type { border-bottom: 0; }
.stack-layer { display: flex; flex-direction: column; gap: .2rem; }
.stack-layer b { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.stack-layer small { font-size: .78rem; color: var(--grey); }
.stack-tiles { display: flex; flex-wrap: wrap; gap: .6rem; }
.stack-tile {
  display: inline-flex; align-items: center; gap: .7rem; padding: .45rem .95rem .45rem .45rem; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--white); text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.stack-tile:hover { background: rgba(255,255,255,.07); border-color: rgba(169,255,189,.35); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 0 0 1px rgba(169,255,189,.12) inset; }
.stack-tile .app-ico { width: 2.35rem; height: 2.35rem; flex: none; }
.stack-tile .app-ico.mono { font: 700 .75rem/1 Inter, sans-serif; color: var(--white); letter-spacing: .02em; }
.stack-tile > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.stack-tile strong { font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; white-space: nowrap; }
.stack-tile small { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--grey); white-space: nowrap; }
.stack-tile small::before { content: ""; width: .4rem; height: .4rem; border-radius: 999px; background: #8a8a8a; }
.stack-tile[data-status="instant"] small::before { background: #3ddc84; box-shadow: 0 0 8px rgba(61,220,132,.6); }
.stack-tile[data-status="provisioned"] small::before { background: #f2c94c; box-shadow: 0 0 8px rgba(242,201,76,.5); }
.stack-tile[data-status="own"] small::before { background: #c9cfd3; }
.stack-foot { position: relative; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; padding: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
@media (min-width: 1024px) { .stack-foot { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.5rem 2.5rem; gap: 2rem; } }
.stack-foot-text { color: #c9cfd3; font-size: 1rem; line-height: 1.5; max-width: 60ch; }
.stack-foot-text strong { color: var(--white); font-weight: 600; }
.stack-foot .pill { flex: none; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; font-size: .78rem; color: var(--grey); }
.stack-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.stack-legend i { width: .4rem; height: .4rem; border-radius: 999px; background: #8a8a8a; }
.stack-legend i.instant { background: #3ddc84; } .stack-legend i.provisioned { background: #f2c94c; } .stack-legend i.own { background: #c9cfd3; }

/* ---------- Hero: tagline + MCP card row ---------- */
/* the wrapper adds no box of its own, so the wordmark + tagline stack is exactly what it was before the card */
.hero-bottom { display: contents; }
/* ---------- Hero: MCP install card: smoked oil-slick glass ----------
   The card itself keeps only opacity/transform (GSAP owns those, see main.js).
   Everything that moves lives on .hero-card-glass and its two pseudo layers. */
.hero-card {
  position: relative; z-index: 3; align-self: flex-start; isolation: isolate;
  display: flex; flex-direction: column; gap: .9rem;
  width: min(100%, 30rem); flex: none;
  padding: 1.1rem 1.1rem 1.1rem; border-radius: 1.25rem; overflow: hidden;
  background: linear-gradient(152deg, rgba(20,26,34,.52) 0%, rgba(8,11,16,.66) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(.55);
  backdrop-filter: blur(20px) saturate(180%) brightness(.55);
  border: 1px solid rgba(240,246,248,.16);
  color: var(--white);
  box-shadow:
    0 28px 70px rgba(0,0,0,.45),
    0 2px 10px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.06);
  opacity: 0; transform: translateY(16px); will-change: transform, opacity;
}
@media (min-width: 1024px) { .hero-card { padding: 1.2rem 1.2rem 1.2rem; border-radius: 1.5rem; gap: .8rem; } }
/* no video (still poster / reduced motion): the hero behind is light, so the smoke has to carry the contrast */
body:not(.has-hero-video) .hero-card {
  background: linear-gradient(152deg, rgba(16,21,28,.86) 0%, rgba(6,9,13,.93) 100%);
  border-color: rgba(240,246,248,.12);
}

/* the moving layers: iridescent thin-film sheen + wandering oily specular pools */
.hero-card-glass { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.hero-card-glass::before, .hero-card-glass::after { content: ""; position: absolute; pointer-events: none; }
.hero-card-glass::before {
  inset: -70%;
  background:
    radial-gradient(60% 55% at 22% 30%, rgba(255,120,205,.85) 0%, rgba(255,120,205,0) 62%),
    radial-gradient(55% 60% at 78% 26%, rgba(110,225,255,.80) 0%, rgba(110,225,255,0) 64%),
    radial-gradient(62% 52% at 68% 78%, rgba(255,214,130,.78) 0%, rgba(255,214,130,0) 62%),
    radial-gradient(52% 58% at 26% 82%, rgba(150,130,255,.78) 0%, rgba(150,130,255,0) 64%),
    radial-gradient(48% 44% at 50% 52%, rgba(130,255,205,.62) 0%, rgba(130,255,205,0) 66%),
    conic-gradient(from 210deg at 45% 55%, rgba(255,120,205,.5), rgba(110,225,255,.5), rgba(255,214,130,.5), rgba(150,130,255,.5), rgba(130,255,205,.45), rgba(255,120,205,.5));
  filter: blur(20px) saturate(140%);
  mix-blend-mode: screen;
  opacity: .38;
  will-change: transform, filter;
  animation: heroOilDrift 27s cubic-bezier(.5,.05,.5,.95) infinite;
}
.hero-card-glass::after {
  /* two soft specular pools with a faint thin-film fringe; they wander on their own paths,
     stretch and skew as they go, and their timings are co-prime so the loop never shows */
  inset: -40%;
  background:
    radial-gradient(38% 22% at 30% 40%, rgba(255,255,255,.50) 0%, rgba(255,255,255,.16) 35%, rgba(255,255,255,0) 70%),
    radial-gradient(26% 14% at 72% 62%, rgba(255,255,255,.34) 0%, rgba(255,230,250,.10) 40%, rgba(255,255,255,0) 72%),
    radial-gradient(16% 9% at 55% 30%, rgba(190,255,245,.28) 0%, rgba(190,255,245,0) 70%);
  filter: blur(9px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation:
    heroSpecWander 17s cubic-bezier(.65,.02,.32,.98) infinite alternate,
    heroSpecBreathe 7s cubic-bezier(.6,0,.4,1) infinite alternate;
}
@keyframes heroOilDrift {
  0%   { transform: translate3d(-7%, -5%, 0) rotate(0deg)   scale(1.10); filter: blur(20px) saturate(140%) hue-rotate(0deg); }
  23%  { transform: translate3d( 5%, -8%, 0) rotate(70deg)  scale(1.26); filter: blur(24px) saturate(150%) hue-rotate(60deg); }
  41%  { transform: translate3d( 9%,  4%, 0) rotate(160deg) scale(1.18); filter: blur(22px) saturate(160%) hue-rotate(170deg); }
  62%  { transform: translate3d(-3%,  9%, 0) rotate(230deg) scale(1.36); filter: blur(28px) saturate(150%) hue-rotate(230deg); }
  81%  { transform: translate3d(-9%,  1%, 0) rotate(300deg) scale(1.16); filter: blur(21px) saturate(145%) hue-rotate(310deg); }
  100% { transform: translate3d(-7%, -5%, 0) rotate(360deg) scale(1.10); filter: blur(20px) saturate(140%) hue-rotate(360deg); }
}
@keyframes heroSpecWander {
  0%   { transform: translate3d(-22%, -14%, 0) rotate(-18deg) skewX(-14deg) scaleX(1.35) scaleY(.75); }
  18%  { transform: translate3d(  6%, -22%, 0) rotate( -4deg) skewX( -6deg) scaleX(1.10) scaleY(.95); }
  37%  { transform: translate3d( 24%,  -2%, 0) rotate( 14deg) skewX( 10deg) scaleX(1.55) scaleY(.65); }
  52%  { transform: translate3d( 14%,  18%, 0) rotate( 26deg) skewX( 18deg) scaleX(1.05) scaleY(1.05); }
  71%  { transform: translate3d(-10%,  24%, 0) rotate(  9deg) skewX(  2deg) scaleX(1.45) scaleY(.70); }
  86%  { transform: translate3d(-26%,   8%, 0) rotate(-12deg) skewX(-10deg) scaleX(1.20) scaleY(.90); }
  100% { transform: translate3d(-12%, -18%, 0) rotate(-24deg) skewX(-18deg) scaleX(1.60) scaleY(.60); }
}
@keyframes heroSpecBreathe {
  0%   { opacity: .55; filter: blur(9px); }
  35%  { opacity: .95; filter: blur(7px); }
  60%  { opacity: .70; filter: blur(12px); }
  100% { opacity: 1;   filter: blur(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card-glass::before { animation: none; transform: translate3d(0,0,0) rotate(24deg) scale(1.2); }
  .hero-card-glass::after  { animation: none; transform: translate3d(4%, -6%, 0) rotate(-10deg) skewX(-8deg) scaleX(1.3) scaleY(.8); opacity: .75; }
}

/* content sits above the sheen layers */
.hero-card-copy, .hero-cmd, .hero-tabs, .hero-card-head { position: relative; z-index: 1; }

.hero-card-copy { display: flex; flex-direction: column; gap: .35rem; }
.hero-card-label { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(240,246,248,.88); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.hero-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.hero-card-help { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 1px solid rgba(240,246,248,.28); background: rgba(240,246,248,.06); color: #D9E0E3; font-size: .78rem; font-weight: 600; line-height: 1; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.hero-card-help:hover, .hero-card-help:focus-visible { background: var(--white); border-color: var(--white); color: var(--deep); outline: none; }
.hero-card-text { font-size: .88rem; line-height: 1.4; color: #D3DADE; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
@media (min-width: 1024px) { .hero-card-text { font-size: .92rem; } }
.hero-card-text code { font: 500 .88em/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(240,246,248,.16); padding: .1em .35em; border-radius: .35em; color: var(--white); }
.hero-cmd {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .6rem .55rem .9rem; border-radius: 999px;
  background: rgba(6,9,13,.62); border: 1px solid rgba(240,246,248,.16);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  color: var(--white); font: 500 .8rem/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (min-width: 1024px) { .hero-cmd { font-size: .76rem; padding: .6rem .6rem .6rem .9rem; gap: .7rem; } .hero-cmd-copy { font-size: .75rem; padding: .5rem .9rem; } .hero-cmd-copy svg { width: 1rem; height: 1rem; } }
.hero-cmd-prompt { color: var(--grey); }
/* one line, always: the box never grows with the command; COPY puts the full text on the clipboard */
.hero-cmd-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit; line-height: 1; }
.hero-cmd-prompt { flex: none; white-space: nowrap; }
.hero-cmd-copy {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  padding: .4rem .7rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--white); color: var(--deep); font: 600 .7rem/1 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  transition: background .3s, transform .3s;
}
.hero-cmd-copy:hover { background: #fff; transform: scale(1.04); }
.hero-cmd-copy svg { width: .85rem; height: .85rem; }
.hero-cmd-copy .ico-check { display: none; }
.hero-cmd.is-copied .hero-cmd-copy .ico-copy { display: none; }
.hero-cmd.is-copied .hero-cmd-copy .ico-check { display: block; }

/* hero card: agent tabs */
.hero-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: -.25rem; }
.hero-tab { border: 1px solid rgba(240,246,248,.24); background: rgba(240,246,248,.05); color: #D3DADE; font: 600 .7rem/1 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: .42rem .7rem; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.hero-tab:hover { border-color: rgba(240,246,248,.5); background: rgba(240,246,248,.1); }
.hero-tab.is-on { background: var(--white); border-color: var(--white); color: var(--deep); }

/* desktop: the card is pinned to the bottom-right of the wrap so the wordmark and tagline keep their original height and position */
/* bottom edge sits on the tagline's baseline: with line-height 1 the 3.5rem Inter line leaves 8px of descender below the caps */
@media (min-width: 1024px) { .hero-card { position: absolute; right: 0; bottom: .5rem; } }
.footer-entity { color: var(--grey); font-size: .8rem; letter-spacing: -0.01em; white-space: nowrap; opacity: .8; }



/* ---------- How it works: card headings, terminal, plan, quote ---------- */
.project-heading { display: flex; flex-direction: column; gap: .4rem; padding-right: 1.5rem; }
.project-sub { font-size: .85rem; line-height: 1.4; color: #c9cfd3; max-width: 34ch; }
@media (min-width: 1024px) { .project-sub { font-size: .95rem; } .project-heading { padding-right: 3rem; } }
.project-title-div { align-items: flex-end; }
.project-gradient { height: 65%; background: linear-gradient(to top, rgba(0,0,0,.72), transparent); }

.visual-install, .visual-plan, .visual-quote { align-items: flex-start; }
.term .ln { white-space: pre-wrap; padding-left: 1rem; }
.term .ln::before { content: none; }
.term-out { color: #bdbdbd; }

.plan { gap: .6rem; height: auto; }
.chat-msg { border-radius: .8rem; padding: .5rem .75rem; font-size: .88em; line-height: 1.35; }
.chat-user { align-self: flex-end; max-width: 94%; background: #1d1d1d; border: 1px solid rgba(255,255,255,.1); min-height: 3.6em; }
.chat-sq { align-self: stretch; background: transparent; padding: 0 .1rem; display: flex; flex-direction: column; gap: .4rem; }
.plan-rows { display: flex; flex-direction: column; gap: .3rem; }
.chat-sq { flex: 1; }
.plan-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .22rem .4rem; font-size: .9em; border-radius: .6rem; background: #141414; border: 1px solid rgba(255,255,255,.06); will-change: transform, opacity; }
.plan-row .app-ico { width: 1.9rem; height: 1.9rem; border-radius: 30%; box-shadow: none; }
.plan-row > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; }
.plan-row small, .inv-row small { display: block; font-weight: 400; color: #8a8a8a; font-size: .8em; }
.inv-row > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.15; }

/* step 02: swapping the assistant model. Both states live in the DOM and cross-fade, so the
   timeline's jump-to-end fallback and reduced motion land on the swapped, locked stack. */
.plan-row span.plan-morph, .plan-lock span.plan-morph { display: grid; min-width: 0; }
.plan-morph > * { grid-area: 1 / 1; min-width: 0; }
.plan-row .plan-morph-txt > span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; }
.plan-row [data-plan-ico-b], .plan-row [data-plan-txt-b], .plan-lock [data-plan-lock-b] { opacity: 0; }
/* every badge carries a padlock that the lock step fades in */
.plan-row .bk-badge { display: inline-flex; align-items: center; gap: .3em; }
.plan-badge-lock { display: inline-block; opacity: 0; width: .52em; height: .42em; border: 1px solid currentColor; border-radius: .06em; position: relative; flex: none; }
.plan-badge-lock::before { content: ""; position: absolute; left: .09em; right: .09em; top: -.26em; height: .28em; border: 1px solid currentColor; border-bottom: 0; border-radius: .14em .14em 0 0; }
.plan-lock {
  align-self: flex-start; margin-top: .1rem; padding: .28rem .7rem; border-radius: 999px;
  background: var(--white); color: var(--deep); font: 600 .9em/1.2 Inter, sans-serif; opacity: 0;
}
.plan-lock-morph > span { display: inline-flex; align-items: center; gap: .3rem; justify-content: center; white-space: nowrap; }
.plan-padlock { display: inline-block; width: .5em; height: .42em; border: 1px solid currentColor; border-radius: .08em; position: relative; }
.plan-padlock::before { content: ""; position: absolute; left: .08em; right: .08em; top: -.26em; height: .28em; border: 1px solid currentColor; border-bottom: 0; border-radius: .16em .16em 0 0; }
/* the popover is anchored to the row by the timeline and may overlay the composer */
.plan-swap {
  position: absolute; left: 0; top: 0; z-index: 3; width: max-content; max-width: 78%;
  display: flex; flex-direction: column; gap: .12rem; padding: .35rem;
  border-radius: .55rem; background: #1b1b1b; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 38px rgba(0,0,0,.7); opacity: 0; transform-origin: 0 0; pointer-events: none;
}
.plan-swap-head { padding: .1rem .35rem .25rem; color: #8a8a8a; font-size: .85em; }
.plan-swap-opt { display: flex; align-items: center; gap: .4rem; padding: .22rem .35rem; border-radius: .35rem; color: #e6e6e6; white-space: nowrap; }
.plan-swap-opt img { width: .95rem; height: .95rem; display: block; }
.plan-swap-opt b { margin-left: auto; padding-left: .6rem; color: #8fe3c1; font-size: .9em; opacity: 0; }
.plan-cursor { position: absolute; left: 0; top: 0; z-index: 4; width: .75rem; height: auto; fill: #f5f5f5; stroke: #101010; stroke-width: 1; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
@media (min-width: 1024px) { .plan-cursor { width: .85rem; } }

.quote { gap: .5rem; height: auto; }
.quote-rows { display: flex; flex-direction: column; }
.quote .inv-row { font-size: .85em; padding: .22rem .25rem; gap: .6rem; }
.quote .inv-row .app-ico { width: 1.7rem; height: 1.7rem; }
.quote .inv-row small { font-size: .75em; }
.quote-progress { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .25rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .75em; color: #bdbdbd; }
.qp-step { display: inline-flex; align-items: center; gap: .35rem; }
.qp-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #3a3a3a; }
.qp-dot.is-done { background: #3ddc84; }
.qp-dot.is-live { background: #f2e6a0; box-shadow: 0 0 8px #f2e6a0; }

/* ---------- How it works: alternating rows, visual one side, words the other ---------- */
.hw-steps { margin-top: 4rem; display: flex; flex-direction: column; gap: 3rem; width: 100%; }
@media (min-width: 1024px) { .hw-steps { gap: 5rem; margin-top: 5rem; } }
.hw-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; }
@media (min-width: 1024px) {
  .hw-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; }
  /* even rows flip, and the column widths flip with them so every visual is the same size */
  .hw-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .hw-row:nth-child(even) .hw-visual { order: 2; }
  .hw-row:nth-child(even) .hw-copy { order: 1; justify-self: end; padding-right: 2rem; }
  .hw-row:nth-child(odd) .hw-copy { padding-left: 2rem; }
}
.hw-visual.project-card { aspect-ratio: 16 / 10; border-radius: 1.25rem; }
.hw-visual .project-visual { padding: 1.25rem; align-items: stretch; }
@media (min-width: 1024px) { .hw-visual .project-visual { padding: 1.75rem; } }
.hw-visual .project-gradient { display: none; }
.hw-copy { display: flex; flex-direction: column; gap: .9rem; min-width: 0; max-width: 30rem; }
.hw-num { font: 600 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; color: #6b7378; }
.hw-title { font-size: 2rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; color: var(--black); margin: 0; }
@media (min-width: 1024px) { .hw-title { font-size: 2.9rem; } }
.hw-text { font-size: 1.05rem; line-height: 1.55; color: #4b5257; }
@media (min-width: 1024px) { .hw-text { font-size: 1.15rem; } }
/* centre the panel inside each visual; the agent hub keeps filling its card */
.hw-visual .visual-install, .hw-visual .visual-plan, .hw-visual .visual-quote { align-items: center; }
.hw-visual .visual-install .bk-card, .hw-visual .visual-quote .bk-card { height: auto; }
.hw-visual .visual-plan { align-items: stretch; }
.hw-visual .visual-plan .bk-card { height: 100%; justify-content: flex-start; }
/* phones: the visual card sizes to its panel instead of clipping it */
@media (max-width: 1023px) {
  .hw-visual.project-card { aspect-ratio: auto; }
  .hw-visual .project-visual { position: relative; inset: auto; }
}

/* ---------- How it works: alternating rows, visual one side, words the other ---------- */
.hw-steps { margin-top: 4rem; display: flex; flex-direction: column; gap: 3rem; width: 100%; }
@media (min-width: 1024px) { .hw-steps { gap: 5rem; margin-top: 5rem; } }
.hw-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; }
@media (min-width: 1024px) {
  .hw-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; }
  /* even rows flip, and the column widths flip with them so every visual is the same size */
  .hw-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .hw-row:nth-child(even) .hw-visual { order: 2; }
  .hw-row:nth-child(even) .hw-copy { order: 1; justify-self: end; padding-right: 2rem; }
  .hw-row:nth-child(odd) .hw-copy { padding-left: 2rem; }
}
.hw-visual.project-card { aspect-ratio: 16 / 10; border-radius: 1.25rem; }
.hw-visual .project-visual { padding: 1.25rem; align-items: stretch; }
@media (min-width: 1024px) { .hw-visual .project-visual { padding: 1.75rem; } }
.hw-visual .project-gradient { display: none; }
.hw-copy { display: flex; flex-direction: column; gap: .9rem; min-width: 0; max-width: 30rem; }
.hw-num { font: 600 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; color: #6b7378; }
.hw-title { font-size: 2rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; color: var(--black); margin: 0; }
@media (min-width: 1024px) { .hw-title { font-size: 2.9rem; } }
.hw-text { font-size: 1.05rem; line-height: 1.55; color: #4b5257; }
@media (min-width: 1024px) { .hw-text { font-size: 1.15rem; } }
/* centre the panel inside each visual; the agent hub keeps filling its card */
.hw-visual .visual-install, .hw-visual .visual-plan, .hw-visual .visual-quote { align-items: center; }
.hw-visual .visual-install .bk-card, .hw-visual .visual-quote .bk-card { height: auto; }
.hw-visual .visual-plan { align-items: stretch; }
.hw-visual .visual-plan .bk-card { height: 100%; justify-content: flex-start; }
/* phones: the visual card sizes to its panel instead of clipping it */
@media (max-width: 1023px) {
  .hw-visual.project-card { aspect-ratio: auto; }
  .hw-visual .project-visual { position: relative; inset: auto; }
}

/* ---------- Step 01: a macOS terminal being opened, the command pasted and run ---------- */
.hw-visual .visual-install { padding: 0; align-items: stretch; }
.mac-scene {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit;
  background: #1a1030;
  font-size: .8rem;
}
/* macOS-style wallpaper: soft colour fields, blurred like the Sonoma / Sequoia defaults */
.mac-scene::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 45% at 18% 28%, #ff8a5c 0%, rgba(255,138,92,0) 70%),
    radial-gradient(45% 50% at 78% 22%, #ff5fa2 0%, rgba(255,95,162,0) 70%),
    radial-gradient(50% 55% at 70% 85%, #4f7dff 0%, rgba(79,125,255,0) 70%),
    radial-gradient(45% 50% at 22% 88%, #7a3cff 0%, rgba(122,60,255,0) 70%),
    linear-gradient(160deg, #2a1650 0%, #120a2a 100%);
  filter: blur(28px) saturate(1.15);
}
.mac-scene > * { position: relative; z-index: 1; }
.mac-menubar {
  position: absolute !important; top: 0; left: 0; right: 0; height: 1.5rem; padding: 0 .75rem;
  display: flex; align-items: center; gap: .8rem; font-size: .68em; color: rgba(255,255,255,.85);
  background: rgba(20,24,34,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mac-app { font-weight: 700; }
.mac-menu { opacity: .75; }
.mac-clock { margin-left: auto; opacity: .85; font-variant-numeric: tabular-nums; }
.mac-window {
  position: absolute !important; left: 7%; right: 7%; top: 16%; bottom: 22%;
  display: flex; flex-direction: column; overflow: hidden;
  background: #0d0d0d; border-radius: .7rem; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.6);
  transform-origin: 50% 120%; will-change: transform, opacity;
}
.mac-win-title { margin: 0 auto; color: #9a9a9a; font-weight: 600; transform: translateX(-1.1rem); }
.mac-term { flex: 1; padding: .55rem .8rem; }
.mac-term .ln { padding-left: 0; }
.term-cmd { color: #f2f2f2; }
.mac-out { opacity: 0; }
.term-caret2 { opacity: 0; }
.mac-keyhint {
  position: absolute; right: .8rem; bottom: .7rem; opacity: 0; transform: translateY(6px);
  font: 600 .7em/1 Inter, sans-serif; letter-spacing: .04em; color: var(--deep);
  background: var(--white); border-radius: .4rem; padding: .35rem .55rem; box-shadow: 0 6px 14px rgba(0,0,0,.4);
}
.mac-dock {
  position: absolute !important; left: 50%; bottom: .55rem; transform: translateX(-50%);
  display: flex; gap: .45rem; padding: .35rem .5rem; border-radius: .9rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.dock-ico { position: relative; width: 1.7rem; height: 1.7rem; border-radius: .45rem; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
@media (min-width: 1024px) { .dock-ico { width: 2rem; height: 2rem; border-radius: .55rem; } }
.dock-app { background: linear-gradient(180deg, #262626, #141414); border: 1px solid rgba(255,255,255,.14); }
.dock-app img { width: 58%; height: 58%; }
.dock-sep { width: 1px; align-self: stretch; margin: .15rem .1rem; background: rgba(255,255,255,.25); }
.dock-term { background: #1c1c1e; border: 1px solid rgba(255,255,255,.25); }
.dock-term::before { content: ">_"; font: 700 .6em/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; }
.dock-ico.is-open::after { content: ""; position: absolute; left: 50%; bottom: -.32rem; width: .2rem; height: .2rem; border-radius: 999px; background: rgba(255,255,255,.85); transform: translateX(-50%); }

/* ---------- Who it's for ---------- */
.home-who { display: flex; flex-direction: column; padding: 0 var(--px) 8rem; gap: 3rem; }
@media (min-width: 1024px) { .home-who { gap: 4rem; } }
.who-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.who-grid > * { flex: 1 1 100%; min-width: 0; }
@media (min-width: 1024px) { .who-grid { gap: 1.5rem; } .who-grid > * { flex-basis: calc(50% - .75rem); } }
/* two persona scenes: a first build being handed its keys, and ten bills becoming one */
.who-pane { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 1024px) { .who-pane { gap: 1.6rem; } }
.who-title { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; margin: 0; }
@media (min-width: 1024px) { .who-title { font-size: 2.1rem; } }
.who-copy { display: flex; flex-direction: column; gap: .7rem; }
.who-copy p { color: #4b5257; font-size: 1.02rem; line-height: 1.55; max-width: 46ch; }
.who-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.who-pill { font-size: .78rem; font-weight: 500; letter-spacing: .01em; color: #4b5257; background: var(--soft); border: 1px solid rgba(30,35,44,.08); border-radius: 999px; padding: .3rem .7rem; white-space: nowrap; }

/* the dark stage each scene plays on: the same slot shape as the step cards */
.who-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 1.25rem; background: var(--deep); color: var(--white);
  font-family: Inter, sans-serif; font-size: .66rem;
}
@media (min-width: 1024px) { .who-stage { font-size: .82rem; } }
/* a faint dot grid plus a soft glow so the stage never reads as flat black */
.who-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: .9rem .9rem;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 55%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 95% at 50% 55%, #000 30%, transparent 78%);
}
.who-stage::after {
  content: ""; position: absolute; left: 50%; bottom: -34%; z-index: 0; pointer-events: none;
  width: 92%; height: 78%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(61,220,132,.18), rgba(61,220,132,0) 72%);
}
.who-stage > * { position: relative; z-index: 1; }

/* ---- A: napkin idea -> typed line -> services provisioned -> the key ---- */
.who-stage-a { display: flex; flex-direction: column; justify-content: center; gap: .55rem; padding: .9rem 1rem; background: #0a0a0a; }
@media (min-width: 1024px) { .who-stage-a { padding: 1.4rem 1.6rem; gap: .8rem; } }
.who-note { display: none; } /* the sentence lives here for main.js; the typed agent line is the only thing shown */
.who-agent { display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; border-radius: .5rem; background: #141414; border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.who-agent-ico { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: .35rem; background: #202020; border: 1px solid rgba(255,255,255,.1); flex: none; }
.who-agent-ico img { width: 60%; height: 60%; display: block; }
.who-agent-line { min-width: 0; color: #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-caret { width: .07rem; height: 1.05em; background: #8fe3c1; margin-left: .1rem; vertical-align: -0.15em; }
.who-fan { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.who-fan > :last-child { grid-column: 1 / -1; }
.who-svc {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .4rem;
  padding: .26rem .42rem; min-width: 0;
  border-radius: .5rem; border: 1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.015);
  color: #7a7a7a; transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.who-svc .app-ico { width: 1.35rem; height: 1.35rem; border-radius: 30%; box-shadow: none; opacity: .45; filter: grayscale(1); transition: opacity .3s ease, filter .3s ease; }
.who-svc-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.who-svc-txt b { font-weight: 600; color: #b6bbbe; transition: color .3s ease; }
.who-svc-txt small { font-size: .82em; color: #6d7276; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; }
.who-svc-tick { display: inline-flex; align-items: center; justify-content: center; width: .9rem; height: .9rem; border-radius: 999px; background: #3ddc84; color: #06170d; font-size: .68em; font-weight: 700; transform: scale(0); flex: none; }
.who-svc.is-on { border-style: solid; border-color: rgba(61,220,132,.42); background: rgba(61,220,132,.07); }
.who-svc.is-on .app-ico { opacity: 1; filter: none; }
.who-svc.is-on .who-svc-txt b { color: #eef6f2; }
.who-svc.is-on .who-svc-txt small { color: #8fd8b2; }
.who-svc.is-on .who-svc-tick { transform: scale(1); transition: transform .35s cubic-bezier(.2,1.4,.4,1); }
.who-key {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem;
  padding: .4rem .6rem; border-radius: .55rem; border: 1px solid rgba(61,220,132,.4); background: rgba(61,220,132,.07);
  opacity: 0; transform: translateY(6px);
}
.who-key-glow { position: absolute; inset: -40% -8%; border-radius: 999px; background: radial-gradient(60% 120% at 50% 50%, rgba(61,220,132,.28), rgba(61,220,132,0) 70%); pointer-events: none; }
.who-key-label, .who-key-code, .who-key-ready { position: relative; }
.who-key-label { color: #a8a8a8; white-space: nowrap; }
.who-key-code { font: 500 .95em/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-key-ready { color: #3ddc84; font-weight: 600; font-size: .9em; letter-spacing: .04em; text-transform: uppercase; }

/* ---- B: a scattered pile of provider bills snapping into one Squiid invoice ---- */
.who-stage-b { background: #0a0a0a; }
.who-pile, .who-inv { position: absolute; left: 50%; top: 50%; }
.who-pile { z-index: 1; }
.who-pile { width: 1px; height: 1px; }
.who-bill {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  width: max-content; padding: .4rem .7rem; border-radius: 999px;
  background: linear-gradient(180deg, #1c1c1c, #131313); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.55); color: #cfcfcf; font-weight: 500; line-height: 1;
}
.who-bill img { width: .9rem; height: .9rem; display: block; }
.who-bill em { font-style: normal; color: #8a8a8a; font-variant-numeric: tabular-nums; margin-left: .15rem; }
.who-inv {
  z-index: 2; width: 82%;
  display: flex; flex-direction: column; gap: .3rem;
  padding: .6rem .7rem .55rem; border-radius: .7rem;
  background: rgba(15,15,15,.97); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 60px rgba(0,0,0,.8); opacity: 0;
}
.who-inv-head { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
.who-inv-head img { width: 1rem; height: 1rem; border-radius: 999px; }
.who-inv-proj { color: #7a7a7a; font-weight: 400; }
.who-inv-head .bk-badge { margin-left: auto; font-size: .62em; padding: .2rem .5rem; }
.who-inv-rows { display: grid; grid-template-columns: 1fr 1fr; gap: .02rem .9rem; }
.who-inv-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .35rem; padding: .16rem 0; border-top: 1px solid rgba(255,255,255,.06); min-width: 0; }
.who-inv-row img { width: .85rem; height: .85rem; display: block; }
.who-inv-row > span { color: #cfcfcf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-inv-row em { font-style: normal; color: #8a8a8a; font-variant-numeric: tabular-nums; }
.who-inv-total-row { display: flex; align-items: baseline; gap: .5rem; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.14); color: #8a8a8a; }
.who-inv-total { margin-left: auto; color: var(--white); font-size: 1.9em; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.who-inv-foot { display: flex; align-items: center; gap: .35rem; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.08); color: #cfcfcf; }
/* phones: the stage is only ~214px tall, so every band of scene A gets tighter */
@media (max-width: 640px) {
  .who-stage-a { padding: .5rem .55rem; gap: .3rem; }
  .who-agent { padding: .25rem .4rem; gap: .35rem; }
  .who-agent-ico { width: 1.05rem; height: 1.05rem; }
  .who-fan { gap: .22rem; }
  .who-svc { padding: .18rem .34rem; gap: .3rem; }
  .who-svc .app-ico { width: 1.05rem; height: 1.05rem; }
  .who-svc-tick { width: .78rem; height: .78rem; }
  .who-key { padding: .26rem .45rem; gap: .35rem; }
  .who-inv { width: 90%; padding: .45rem .5rem .4rem; gap: .2rem; }
  .who-inv-rows { gap: 0 .5rem; }
  .who-inv-row { padding: .1rem 0; }
  .who-inv-total { font-size: 1.5em; }
  .who-bill { font-size: .88em; padding: .18rem .34rem; }
}


/* step 01: the first caret is a plain block (hidden after return); only the final prompt's caret blinks */
.hw-copy .hw-cmd { align-self: stretch; width: 100%; max-width: 100%; min-width: 0; margin-top: .25rem; opacity: 1; transform: none; font-size: .82rem; }
@media (min-width: 1024px) { .hw-copy .hw-cmd { font-size: .86rem; } }
/* the step-01 pill carries the hero card's oil-slick glass; the sheen layers sit under the text */
.hw-copy .hw-cmd { isolation: isolate; overflow: hidden; background: linear-gradient(152deg, rgba(30,38,48,.96) 0%, rgba(10,14,19,.98) 100%); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(240,246,248,.14); }
.hw-copy .hw-cmd > :not(.hero-card-glass) { position: relative; z-index: 1; }

/* ---------- The deep end: a hidden full-viewport page under the footer ---------- */
.deep-end { position: relative; height: 0; overflow: hidden; background: #02060c; }
.deep-open .deep-end { height: 100vh; height: 100svh; }
.deep-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.deep-end::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22vh; z-index: 1; background: linear-gradient(to bottom, rgba(240,246,248,1), rgba(240,246,248,0)); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
/* the big flickering "Let's Ship", same treatment as the hero wordmark; it is the way to sign up */
.deep-word { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(88vw, 64rem); transform: translate(-50%, -50%); color: var(--white); line-height: 0; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); text-decoration: none; }
.deep-word .ds-l { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .deep-word .ds-l { opacity: 1; } }
/* the glow breathes in and out slowly */
.deep-word { transition: filter 1.4s ease; }
.deep-word:hover { filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)) drop-shadow(0 0 34px rgba(255,255,255,.32)); transition: filter 1.1s ease; }
/* the present under the word, and Squiddy's 8-bit message once it is opened */
.deep-gift { position: absolute; left: 50%; top: calc(50% + min(88vw, 64rem) * 0.16); z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .deep-gift { opacity: 1; } }
.deep-present { width: 4rem; height: 4rem; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); animation: deepBob 2.4s ease-in-out infinite; transition: transform .25s ease; }
@media (min-width: 1024px) { .deep-present { width: 5rem; height: 5rem; } }
.deep-present:hover { transform: scale(1.08); }
.deep-present svg { width: 100%; height: 100%; display: block; }
@keyframes deepBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.4rem; } }
@media (prefers-reduced-motion: reduce) { .deep-present { animation: none; } }
.deep-gift.is-open .deep-present { display: none; }
.deep-gift { width: min(92vw, 34rem); }
.deep-bubble { display: flex; align-items: flex-end; gap: .75rem; width: 100%; }
/* phones: the bubble takes the width and Squiddy sits under its tail */
@media (max-width: 640px) {
  .deep-bubble { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .deep-bubble-text { width: 100%; margin: 0; }
  .deep-squiddy { order: 2; width: 4.25rem; height: 4.25rem; margin-left: .5rem; }
}
.deep-bubble[hidden] { display: none; }
.deep-squiddy { width: 5.5rem; height: 5.5rem; flex: none; image-rendering: pixelated; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
@media (min-width: 1024px) { .deep-squiddy { width: 7rem; height: 7rem; } }
.deep-bubble-text {
  position: relative; margin: 0 0 1.25rem; padding: .9rem 1rem; background: #0b1017; color: #f0f6f8;
  border: 3px solid #f0f6f8; box-shadow: 0 0 0 3px #0b1017, 6px 6px 0 3px #0b1017;
  font: 400 .62rem/1.9 "Press Start 2P", ui-monospace, monospace; letter-spacing: .01em; image-rendering: pixelated;
}
@media (min-width: 1024px) { .deep-bubble-text { font-size: .72rem; padding: 1rem 1.2rem; } }
.deep-bubble-text b { font-weight: 400; color: #f0f6f8; text-shadow: 0 0 6px rgba(240,246,248,.6); }
.deep-code { position: relative; font: inherit; color: #a3b08a; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .3em; }
.deep-code:hover { color: #c8d4b0; }
/* the pixel tooltip: "Copy", then "Copied" */
.deep-code::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + .6rem); transform: translateX(-50%); padding: .35rem .5rem; background: #f0f6f8; color: #0b1017; font-size: .7em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; box-shadow: 3px 3px 0 0 #0b1017; }
.deep-code:hover::after, .deep-code.is-copied::after { opacity: 1; }
/* 16-bit confetti when the present pops */
.deep-confetti { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; z-index: 3; }
.deep-confetti i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; display: block; }
/* pixel tail pointing at Squiddy */
/* a 6px-cell staircase off the bottom-left corner: white outline cells and dark fill cells, drawn
   with one box-shadow so it sits flush on the bubble's own border and reads as one outline */
.deep-bubble-text::before {
  content: ""; position: absolute; left: -3px; bottom: -3px; width: 6px; height: 6px; background: #f0f6f8;
  box-shadow:
    -6px 0 0 #f0f6f8, -12px 0 0 #f0f6f8, -18px 0 0 #f0f6f8,
    -18px -6px 0 #f0f6f8, -12px -6px 0 #0b1017, -6px -6px 0 #0b1017, 0 -6px 0 #0b1017,
    -12px -12px 0 #f0f6f8, -6px -12px 0 #0b1017, 0 -12px 0 #0b1017,
    -6px -18px 0 #f0f6f8, 0 -18px 0 #0b1017;
}
/* while the deep end fills the viewport the header steps out of the way */
.deep-in .site-header, .deep-in .header-glass { opacity: 0; pointer-events: none; transition: opacity .4s ease; }

/* ---------- Wordmark easter egg: 16-bit squids peek up from behind the word (squids.js) ---------- */
.squid-host { position: relative; isolation: isolate; cursor: pointer; }
.header-wordmark.squid-host { display: inline-block; }
.squid-word { display: inline-block; }
.squid-peek { position: absolute; left: -3%; right: -3%; top: -160%; z-index: 1; overflow: hidden; pointer-events: none; } /* above the text (and any selection highlight), clipped exactly at the letter tops */
.squid-peek img { position: absolute; bottom: 0; display: block; image-rendering: pixelated; will-change: transform; user-select: none; }

/* ---------- Step 04: the hub. The Squiid eye in the middle, every agent floating around it in
   space, tethers plugged into the underside of each one, beads of light flowing back to the eye,
   and the eye pulsing the mint green of the film. Geometry and the lines live in main.js. ---------- */
.hw-visual .visual-build { padding: 0; align-items: stretch; }
.hub {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 82%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 12%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 84%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 90%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(60% 55% at 50% 50%, #101821 0%, #070a0e 70%, #050608 100%);
}
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-tether { fill: none; stroke: rgba(214,196,142,.55); stroke-width: 1.4; stroke-linecap: round; }
.hub-plug { fill: #a9ffbd; opacity: 0; }
.hub-bead { fill: #b4ffc6; }
.hub-bead-core { fill: #f2fff5; }
.hub-app {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 30%; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #171a1f, #0d0f13); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  will-change: transform; transition: box-shadow .6s ease, border-color .6s ease, filter .6s ease;
}
@media (min-width: 1024px) { .hub-app { width: 3rem; height: 3rem; } }
.hub-app img { width: 50%; height: 50%; display: block; opacity: .38; filter: grayscale(1); transition: opacity .6s ease, filter .6s ease; }
.hub-app.is-lit { border-color: rgba(169,255,189,.35); box-shadow: 0 8px 18px rgba(0,0,0,.55), 0 0 22px rgba(169,255,189,.22), inset 0 1px 0 rgba(255,255,255,.1); }
.hub-app.is-lit img { opacity: 1; filter: none; }
.hub-eye { position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; transform: translate(-50%, -50%); z-index: 2; }
@media (min-width: 1024px) { .hub-eye { width: 5.5rem; height: 5.5rem; } }
.hub-eye img { position: relative; z-index: 2; width: 100%; height: 100%; display: block; border-radius: 999px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }

/* ---------- Step 03: the Squiid checkout, then provisioning in the same window ---------- */
.hw-visual .visual-quote { padding: 0; align-items: stretch; }
@media (max-width: 1023px) { .hw-visual .visual-quote { aspect-ratio: 16 / 11; } }
.ck-window { display: flex; flex-direction: column; width: 100%; height: 100%; background: #0b0b0b; color: #e6e6e6; font-size: .62rem; overflow: hidden; border-radius: inherit; font-family: Inter, sans-serif; }
@media (min-width: 1024px) { .ck-window { font-size: .68rem; } }
.ck-chrome { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; padding: .5rem .7rem; background: #111; border-bottom: 1px solid rgba(255,255,255,.08); }
.ck-url { display: inline-flex; align-items: center; gap: .35rem; justify-self: center; padding: .22rem .7rem; border-radius: .4rem; background: #1b1b1b; color: #a8a8a8; white-space: nowrap; font-size: .95em; min-width: 46%; justify-content: center; }
.ck-lock { width: .45rem; height: .55rem; border: 1px solid #7a7a7a; border-radius: .1rem .1rem .15rem .15rem; position: relative; }
.ck-lock::before { content: ""; position: absolute; left: .07rem; right: .07rem; top: -.28rem; height: .3rem; border: 1px solid #7a7a7a; border-bottom: 0; border-radius: .2rem .2rem 0 0; }
.ck-body { flex: 1; display: grid; grid-template-columns: 46% 1fr; min-height: 0; }
@media (max-width: 640px) { .ck-body { grid-template-columns: 1fr; } .ck-body .ck-summary { display: none; } }
.ck-summary { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .9rem .7rem; background: #0f0f0f; border-right: 1px solid rgba(255,255,255,.08); min-width: 0; }
.ck-brand { display: flex; align-items: center; gap: .4rem; font-weight: 600; margin-bottom: .35rem; }
.ck-brand img { width: 1.1rem; height: 1.1rem; border-radius: 999px; }
.ck-brand .bk-badge { margin-left: auto; font-size: .62em; padding: .2rem .5rem; }
.ck-brand .bk-badge.is-paid { color: #3ddc84; border-color: rgba(61,220,132,.45); }
.ck-pay-label { color: #8a8a8a; }
.ck-total { font-size: 1.9em; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: .4rem; }
.ck-lines { display: flex; flex-direction: column; }
.ck-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .28rem 0; border-top: 1px solid rgba(255,255,255,.06); font-size: .95em; }
.ck-line > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.2; font-weight: 500; min-width: 0; }
.ck-line small { font-weight: 400; color: #8a8a8a; font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-line .app-ico { width: 1.5rem; height: 1.5rem; border-radius: 30%; box-shadow: none; }
.ck-line .app-mono { font-size: .75em; }
.ck-amt { font-variant-numeric: tabular-nums; color: #d6d6d6; }
.ck-foot { margin-top: auto; padding-top: .5rem; color: #6f6f6f; font-size: .85em; }
.ck-main { position: relative; min-width: 0; min-height: 0; }
.ck-form, .ck-provision { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .45rem; padding: .8rem .9rem .7rem; }
.ck-provision { opacity: 0; pointer-events: none; }
.ck-wallet { display: flex; align-items: center; justify-content: center; gap: .2rem; padding: .42rem; border-radius: .4rem; background: #fff; color: #000; border: 0; font: 600 1.05em/1 Inter, sans-serif; }
.ck-wallet-mark { font-size: 1.15em; line-height: 1; }
.ck-or { display: flex; align-items: center; gap: .5rem; color: #7a7a7a; font-size: .9em; }
.ck-or::before, .ck-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.ck-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ck-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ck-field-label { color: #a8a8a8; font-size: .9em; }
.ck-field-box { display: flex; align-items: center; gap: .3rem; padding: .36rem .5rem; border: 1px solid rgba(255,255,255,.14); border-radius: .35rem; background: #141414; color: #f0f0f0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; min-height: 1.75em; }
.ck-field-box.is-focus { border-color: rgba(255,255,255,.45); box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.ck-placeholder { color: #6a6a6a; }
.ck-typed:not(:empty) + .ck-placeholder { display: none; }
.ck-caret { display: none; width: .08rem; height: 1.05em; background: #f0f0f0; margin: 0; vertical-align: -0.15em; }
.ck-field-box.is-focus .ck-caret { display: inline-block; }
.ck-card-brand { display: none; width: 1.3em; height: .9em; border-radius: .12rem; background: linear-gradient(135deg, #1a1f71, #2a5bd7); position: relative; flex: none; }
.ck-card-brand::after { content: "VISA"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 .5em/1 Inter, sans-serif; color: #fff; letter-spacing: .02em; font-style: italic; }
.ck-card-brand.is-on { display: block; }
.ck-select { justify-content: space-between; }
.ck-chev { color: #8a8a8a; line-height: 0; margin-top: -.3em; }
.ck-pay { position: relative; overflow: hidden; margin-top: .15rem; padding: .48rem; border-radius: .4rem; border: 0; background: #635bff; color: #fff; font: 600 1.05em/1 Inter, sans-serif; }
.ck-pay-fill { position: absolute; inset: 0; background: rgba(255,255,255,.22); transform: scaleX(0); transform-origin: left; }
.ck-pay-text { position: relative; }
.ck-pay.is-pressed { transform: scale(.985); }
.ck-terms { color: #6f6f6f; font-size: .85em; line-height: 1.35; text-align: center; }
.ck-prov-head { display: flex; align-items: center; gap: .55rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.ck-prov-head > div { display: flex; flex-direction: column; line-height: 1.2; }
.ck-prov-check { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: #3ddc84; color: #06170d; font-weight: 700; font-size: 1.1em; transform: scale(0); }
.ck-prov-title { font-weight: 600; font-size: 1.1em; }
.ck-prov-sub { color: #8a8a8a; }
.ck-prov-rows { display: flex; flex-direction: column; gap: .3rem; }
.ck-prov { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .28rem .45rem; border-radius: .5rem; background: #141414; border: 1px solid rgba(255,255,255,.07); opacity: 0; transform: translateY(6px); }
.ck-prov > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.2; font-weight: 500; min-width: 0; }
.ck-prov small { font-weight: 400; color: #8a8a8a; font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-prov .app-ico { width: 1.5rem; height: 1.5rem; border-radius: 30%; box-shadow: none; }
.ck-prov-state { position: relative; width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.ck-spin { position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.14); border-top-color: #e6e6e6; animation: ckSpin .9s linear infinite; opacity: 0; }
.ck-tick { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #3ddc84; color: #06170d; font-size: .75em; font-weight: 700; transform: scale(0); }
.ck-prov.is-live .ck-spin { opacity: 1; }
.ck-prov.is-done .ck-spin { opacity: 0; animation: none; }
.ck-prov.is-done .ck-tick { transform: scale(1); transition: transform .35s cubic-bezier(.2,1.4,.4,1); }
.ck-prov.is-done small { color: #3ddc84; }
@keyframes ckSpin { to { transform: rotate(360deg); } }
.ck-key { margin-top: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .4rem .55rem; border-radius: .5rem; border: 1px solid rgba(61,220,132,.35); background: rgba(61,220,132,.06); opacity: 0; transform: translateY(6px); }
.ck-key-label { color: #a8a8a8; white-space: nowrap; }
.ck-key-code { font: 500 .95em/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-key-ready { color: #3ddc84; font-weight: 600; font-size: .9em; letter-spacing: .04em; text-transform: uppercase; }
/* the "connect the MCP" nudge under the key: same dark-terminal chrome as the rows above */
.ck-mcp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .3rem .35rem .3rem .55rem; border-radius: .5rem; border: 1px solid rgba(255,255,255,.1); background: #141414; opacity: 0; transform: translateY(6px); }
.ck-mcp-label { color: #a8a8a8; white-space: nowrap; font-size: .9em; letter-spacing: .04em; }
.ck-mcp-text { color: #8a8a8a; font-size: .85em; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-mcp-btn { flex: none; padding: .28rem .6rem; border-radius: 999px; border: 0; background: #f0f0f0; color: #0c1016; font: 600 .82em/1 Inter, sans-serif; white-space: nowrap; }
/* phones: the summary column is hidden, so the provisioning panel has to fit the whole window */
@media (max-width: 640px) {
  .ck-form, .ck-provision { gap: .25rem; padding: .5rem .6rem .3rem; }
  .ck-prov-head { padding-bottom: .15rem; gap: .4rem; }
  .ck-prov-title { font-size: 1em; }
  .ck-prov-check { width: 1.4rem; height: 1.4rem; }
  .ck-prov-rows { gap: .2rem; }
  .ck-prov { padding: .14rem .4rem; }
  .ck-prov small { font-size: .78em; }
  .ck-prov .app-ico { width: 1.1rem; height: 1.1rem; }
  .ck-key { padding: .26rem .45rem; }
  .ck-mcp { padding: .2rem .28rem .2rem .45rem; }
  .ck-mcp-btn { padding: .24rem .5rem; font-size: .78em; }
  .ck-mcp-text { font-size: .8em; }
}
@media (prefers-reduced-motion: reduce) { .ck-spin { animation: none; } }

/* ---------- Step 04: the shipped booking page, and the customer's phone beside it ---------- */
.hw-visual .visual-build { padding: 0; align-items: stretch; }
@media (max-width: 1023px) { .hw-visual .visual-build { aspect-ratio: 16 / 10; } }
.sh-scene { position: relative; width: 100%; height: 100%; min-height: 0; font-family: Inter, sans-serif; }
.sh-window {
  position: absolute; left: 0; top: 0; width: 82%; height: 92%;
  display: flex; flex-direction: column; overflow: hidden;
  background: #0b0b0b; color: #e6e6e6; font-size: .6rem;
  border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0 0 .6rem 0;
}
@media (min-width: 1024px) { .sh-window { font-size: .68rem; } }
.sh-chrome { padding: .4rem .6rem; }
.sh-page { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .4rem; padding: .5rem .7rem .6rem; background: #fbfbfa; color: #16191d; }
@media (min-width: 1024px) { .sh-page { gap: .5rem; padding: .7rem .9rem .8rem; } }
.sh-top { display: flex; align-items: center; gap: .6rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(20,25,30,.09); }
.sh-brand { font-weight: 600; letter-spacing: -0.01em; }
.sh-links { display: flex; gap: .55rem; margin-left: auto; color: #7b8288; font-style: normal; }
.sh-links i { font-style: normal; }
@media (max-width: 640px) { .sh-links { display: none; } }
.sh-hero { display: flex; flex-direction: column; gap: .1rem; }
.sh-h1 { font-size: 1.85em; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.sh-h2 { color: #6d747a; line-height: 1.3; }
.sh-field { display: flex; flex-direction: column; gap: .2rem; }
.sh-label { font-size: .88em; font-weight: 500; color: #7b8288; letter-spacing: .02em; }
.sh-opts { display: flex; gap: .3rem; flex-wrap: wrap; }
.sh-opt {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
  padding: .24rem .5rem; border-radius: .4rem; border: 1px solid rgba(20,25,30,.14); background: #fff;
  color: #3a4046; font-weight: 500; white-space: nowrap; line-height: 1.15;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.sh-opt b { font-size: .82em; font-weight: 500; color: #8b9298; }
.sh-opt.is-hot { border-color: rgba(20,25,30,.34); }
.sh-opt.is-on { background: #16191d; border-color: #16191d; color: #fff; }
.sh-opt.is-on b { color: rgba(255,255,255,.62); }
.sh-summary { display: flex; align-items: baseline; gap: .4rem; margin-top: auto; padding-top: .4rem; border-top: 1px solid rgba(20,25,30,.09); }
.sh-summary b { font-weight: 600; }
.sh-summary span { color: #7b8288; white-space: nowrap; }
.sh-pay {
  position: relative; overflow: hidden; margin-top: .1rem; padding: .45rem; border: 0; border-radius: .4rem;
  background: #16191d; color: #fff; font: 600 1.05em/1 Inter, sans-serif; text-align: center;
}
.sh-pay-fill { position: absolute; inset: 0; background: rgba(255,255,255,.22); transform: scaleX(0); transform-origin: left; }
.sh-pay-text { position: relative; }
.sh-pay.is-pressed { transform: scale(.985); }
.sh-pay.is-paid { background: #0f7a45; }
.sh-strip { display: flex; align-items: center; gap: .4rem; padding: .3rem .6rem; background: #111; border-top: 1px solid rgba(255,255,255,.08); color: #cfcfcf; opacity: 0; }
.sh-strip img { width: .9rem; height: .9rem; border-radius: 999px; flex: none; }
.sh-strip-name { font-weight: 600; white-space: nowrap; }
.sh-strip-meta { display: inline-flex; align-items: center; gap: .3rem; color: #8a8a8a; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-strip-meta::before { content: "\00b7"; color: #4a4a4a; }
/* the customer's phone, cut off by the bottom edge so it reads as a device beside the window */
.sh-phone {
  position: absolute; right: 1.5%; bottom: 5%; height: 66%; aspect-ratio: 1 / 2;
  padding: .22rem; border-radius: .9rem; background: linear-gradient(180deg, #2a2a2a, #121212);
  border: 1px solid rgba(255,255,255,.16); box-shadow: -14px 12px 34px rgba(0,0,0,.6);
  opacity: 0; font-size: .48rem;
}
@media (min-width: 1024px) { .sh-phone { font-size: .56rem; } }
.sh-screen { width: 100%; height: 100%; border-radius: .72rem; background: #0e0e10; overflow: hidden; display: flex; flex-direction: column; gap: .3rem; padding: .3rem .28rem; }
.sh-screen-top { display: flex; align-items: center; justify-content: space-between; color: #cfcfcf; font-weight: 600; padding: 0 .12rem; }
.sh-bars { display: inline-flex; align-items: flex-end; gap: .06rem; }
.sh-bars i { width: .1rem; background: #cfcfcf; border-radius: .05rem; }
.sh-bars i:nth-child(1) { height: .18rem; }
.sh-bars i:nth-child(2) { height: .26rem; }
.sh-bars i:nth-child(3) { height: .34rem; }
.sh-msg { display: flex; flex-direction: column; gap: .08rem; }
.sh-msg-from { color: #e6e6e6; font-weight: 600; }
.sh-msg-num { color: #7a7a7a; }
.sh-msg-bubble { margin-top: .18rem; align-self: flex-start; max-width: 96%; padding: .3rem .4rem; border-radius: .55rem .55rem .55rem .12rem; background: #2c6bed; color: #fff; line-height: 1.25; }
/* phones: the window loses the sub-headline and the recap so the whole booking flow still fits */
@media (max-width: 640px) {
  .sh-window { width: 81%; height: 96%; font-size: .56rem; }
  .sh-chrome { padding: .26rem .5rem; }
  .sh-page { gap: .16rem; padding: .28rem .42rem .32rem; }
  .sh-top { padding-bottom: .16rem; }
  .sh-h1 { font-size: 1.3em; }
  .sh-h2, .sh-summary { display: none; }
  .sh-label { font-size: .84em; }
  .sh-opt { padding: .12rem .3rem; }
  .sh-pay { padding: .26rem; }
  .sh-strip { padding: .22rem .45rem; }
  .sh-strip-meta { display: none; }
  .sh-phone { right: 1%; bottom: 4%; height: 64%; aspect-ratio: 1 / 1.62; font-size: .42rem; }
}

/* ---------- Step 01: the Claude app, Code tab ---------- */
.hw-visual .visual-install { padding: 0; align-items: stretch; }
@media (max-width: 1023px) { .hw-visual .visual-install { aspect-ratio: 16 / 11; } }
.cl-window { display: grid; grid-template-columns: 31% 1fr; width: 100%; height: 100%; background: #262624; color: #e8e6e3; font-size: .62rem; overflow: hidden; border-radius: inherit; font-family: Inter, sans-serif; }
@media (min-width: 1024px) { .cl-window { font-size: .68rem; } }
@media (max-width: 640px) { .cl-window { grid-template-columns: 1fr; } .cl-side { display: none; } }
.cl-side { display: flex; flex-direction: column; gap: .7rem; padding: .55rem .6rem; background: #1f1e1d; border-right: 1px solid rgba(255,255,255,.07); min-width: 0; }
.cl-side-top { display: flex; align-items: center; justify-content: space-between; }
.cl-side-icons { display: flex; gap: .35rem; }
.cl-side-icons i { width: .55rem; height: .55rem; border-radius: .15rem; background: #4a4845; }
.cl-nav { display: flex; flex-direction: column; gap: .3rem; }
.cl-nav-item { display: flex; align-items: center; gap: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-nav-item b { display: inline-flex; align-items: center; justify-content: center; width: .95em; height: .95em; border-radius: 999px; background: #3a3936; font-weight: 500; font-size: .9em; }
.cl-nav-item em { font-style: normal; font-size: .75em; background: #3a3936; border-radius: .25rem; padding: .05rem .3rem; color: #c9c6c1; }
.cl-muted { color: #8f8c86; }
.cl-group { display: flex; flex-direction: column; gap: .28rem; margin-top: .2rem; }
.cl-group-head { display: flex; justify-content: space-between; font-size: .85em; letter-spacing: .06em; color: #8f8c86; }
.cl-group-head b { font-weight: 500; }
.cl-sess { position: relative; padding: .22rem .4rem .22rem 1rem; border-radius: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d6d3ce; }
.cl-sess::before { content: ""; position: absolute; left: .3rem; top: 50%; width: .3rem; height: .3rem; border-radius: 999px; border: 1px solid #6b6864; transform: translateY(-50%); }
.cl-sess.is-on { background: #33322f; color: #fff; }
.cl-user { margin-top: auto; display: flex; align-items: center; gap: .4rem; color: #d6d3ce; }
.cl-user em { font-style: normal; color: #8f8c86; }
.cl-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; border-radius: 999px; background: #3a3936; font-size: .8em; font-weight: 600; }
.cl-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cl-head { display: flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.cl-head-ico { width: .9em; height: .9em; border-radius: .2rem; background: #4f7dff; }
.cl-head-title { font-weight: 600; }
.cl-badge { font-size: .8em; background: #3a3936; color: #c9c6c1; border-radius: .3rem; padding: .1rem .4rem; }
.cl-thread { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: .7rem .8rem; min-height: 0; overflow: hidden; }
.cl-user-msg { align-self: flex-end; max-width: 88%; background: #33322f; border-radius: .7rem; padding: .45rem .6rem; line-height: 1.35; opacity: 0; }
.cl-tools { color: #8f8c86; opacity: 0; }
.cl-tools b { font-weight: 500; }
.cl-ai { margin: 0; line-height: 1.4; color: #e8e6e3; opacity: 0; }
.cl-ai code { font: inherit; color: #e8e6e3; background: #3a3936; border-radius: .2rem; padding: 0 .25rem; }
.cl-link { color: #e8e6e3; text-decoration: underline; text-underline-offset: 2px; }
.cl-spark { color: #d97757; font-size: 1.2em; opacity: 0; }
.cl-compose { padding: .5rem .7rem .55rem; display: flex; flex-direction: column; gap: .35rem; }
.cl-repo { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem; border: 1px solid rgba(255,255,255,.1); border-radius: .5rem .5rem 0 0; background: #2d2c2a; color: #c9c6c1; }
.cl-diff { margin-left: auto; opacity: 0; }
.cl-diff b { color: #6fcf7a; font-weight: 500; }
.cl-diff i { color: #f0655b; font-style: normal; }
.cl-pr { border: 1px solid rgba(255,255,255,.14); border-radius: .35rem; padding: .1rem .45rem; }
.cl-input { position: relative; display: flex; align-items: center; min-height: 2.1em; padding: .4rem .6rem; border: 1px solid rgba(255,255,255,.14); border-radius: 0 0 .5rem .5rem; background: #2d2c2a; }
.cl-input-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cl-placeholder { color: #8f8c86; }
.cl-input .cl-caret { flex: none; background: #e8e6e3; width: .08rem; }
.cl-foot { display: flex; gap: .7rem; color: #8f8c86; font-size: .9em; }
.cl-foot-r { margin-left: auto; }


/* ---------- Step 02: Cursor's chat, the project described and the stack proposed ---------- */
.hw-visual .visual-plan { padding: 0; align-items: stretch; }
@media (max-width: 1023px) { .hw-visual .visual-plan { aspect-ratio: 16 / 11; } }
.cu-window { display: grid; grid-template-columns: 30% 1fr; width: 100%; height: 100%; background: #0b0b0b; color: #e6e6e6; font-size: .62rem; overflow: hidden; border-radius: inherit; font-family: Inter, sans-serif; }
@media (min-width: 1024px) { .cu-window { font-size: .68rem; } }
@media (max-width: 640px) { .cu-window { grid-template-columns: 1fr; } .cu-side { display: none; } }
.cu-side { display: flex; flex-direction: column; gap: .7rem; padding: .55rem .6rem; background: #0f0f0f; border-right: 1px solid rgba(255,255,255,.08); min-width: 0; }
.cu-side-top { display: flex; align-items: center; justify-content: space-between; }
.cu-side-ico { width: .7rem; height: .55rem; border: 1px solid #5a5a5a; border-radius: .12rem; }
.cu-nav { display: flex; flex-direction: column; gap: .35rem; color: #d0d0d0; }
.cu-nav-item { padding-left: 1rem; position: relative; white-space: nowrap; }
.cu-nav-item::before { content: ""; position: absolute; left: 0; top: 50%; width: .55rem; height: .55rem; border: 1px solid #6a6a6a; border-radius: .12rem; transform: translateY(-50%); }
.cu-repos { display: flex; flex-direction: column; gap: .3rem; }
.cu-repos-head { color: #8a8a8a; margin-bottom: .1rem; }
.cu-repo { color: #d0d0d0; padding-left: 1rem; position: relative; white-space: nowrap; }
.cu-repo::before { content: ""; position: absolute; left: 0; top: 50%; width: .6rem; height: .45rem; border: 1px solid #7a7a7a; border-radius: .1rem; transform: translateY(-50%); }
.cu-chat { display: flex; justify-content: space-between; gap: .4rem; padding: .18rem .35rem .18rem 1.2rem; border-radius: .3rem; color: #bdbdbd; white-space: nowrap; overflow: hidden; }
.cu-chat em { font-style: normal; color: #7a7a7a; }
.cu-chat.is-on { background: #1c1c1c; color: #fff; }
.cu-side-foot { margin-top: auto; display: flex; align-items: center; gap: .5rem; }
.cu-dot { width: .9rem; height: .9rem; border-radius: 999px; background: #2a2a2a; }
.cu-slider { flex: 1; height: .18rem; border-radius: 999px; background: #2e2e2e; }
.cu-gear { width: .7rem; height: .7rem; border-radius: 999px; border: 1px solid #6a6a6a; }
.cu-main { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cu-head { padding: .45rem .8rem; color: #d0d0d0; font-weight: 500; }
.cu-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; padding: .3rem .8rem .45rem; min-height: 0; overflow: hidden; }
.cu-user { background: #1a1a1a; border: 1px solid rgba(255,255,255,.12); border-radius: .5rem; padding: .4rem .55rem; line-height: 1.3; color: #e6e6e6; opacity: 0; font-size: .95em; }
.cu-thought { color: #8a8a8a; opacity: 0; }
.cu-ai { display: flex; flex-direction: column; gap: .4rem; opacity: 0; }
.cu-ai p { margin: 0; line-height: 1.4; }
.cu-ai .plan-rows { gap: .2rem; }
.cu-ai .plan-row { padding: .12rem .35rem; font-size: .84em; }
.cu-ai .plan-row .app-ico { width: 1.45rem; height: 1.45rem; }
.cu-ai .plan-row { background: #151515; border-color: rgba(255,255,255,.08); }
.cu-meta { display: flex; gap: .55rem; color: #7a7a7a; font-size: .95em; opacity: 0; }
.cu-compose { padding: 0 .8rem .5rem; display: flex; flex-direction: column; gap: .35rem; }
.cu-changes { align-self: flex-start; padding: .2rem .5rem; border: 1px solid rgba(255,255,255,.12); border-radius: .35rem; color: #d0d0d0; opacity: 0; }
.cu-changes b { color: #6fcf7a; font-weight: 500; }
.cu-changes i { font-style: normal; color: #8a8a8a; margin-left: .2rem; }
.cu-input { padding: .45rem .6rem; border: 1px solid rgba(255,255,255,.14); border-radius: .5rem; background: #111; }
.cu-input-row { display: flex; align-items: flex-end; gap: .4rem; }
.cu-plus { color: #8a8a8a; font-weight: 500; line-height: 1.35; }
/* wraps like a real composer and grows to three lines, then keeps the newest line in view */
.cu-input-text { flex: 1; min-width: 0; max-height: calc(1.35em * 3); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; line-height: 1.35; }
.cu-line { display: block; }
.cu-line > * { display: inline; }
.cu-input-text .plan-typed { white-space: pre-wrap; overflow-wrap: anywhere; }
.plan-placeholder { color: #7a7a7a; }
.cu-input .plan-caret { display: inline-block; vertical-align: -0.15em; background: #e6e6e6; width: .08rem; height: 1.05em; margin-left: .05em; }
.cu-model { margin-left: auto; color: #9a9a9a; white-space: nowrap; }
.cu-bar { display: flex; gap: 1rem; color: #9a9a9a; font-size: .95em; }