/* Helios Cloud Suite — page implementation layer.
   nocturne.css is the design system (tokens + primitives) and is imported
   verbatim, unmodified. Everything here is page/section scaffolding built
   from those tokens — layout, macro spacing (arbitrary clamp() values, per
   the system's own pattern: --space-* is a small component-internal scale,
   not a page-section scale), and composition of the primitive classes
   (.btn/.card/.tag/.field/.input) into this site's specific sections. */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-800); border-radius: 99px; }

.wrap { max-width: 1320px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 72px); }

/* — the small monospace meta-label signature used throughout for index
   numbers, eyebrows, timestamps, and stat labels — */
.meta {
  font: 400 11px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--color-neutral-600);
}
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font: 500 10px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-neutral-500); margin-bottom: var(--space-4);
}
.eyebrow-mark { display: block; width: clamp(28px, 6vw, 64px); height: 1px; background: var(--color-accent); }

.display { font: var(--font-heading-weight) clamp(40px, 8.4vw, 100px)/0.97 var(--font-heading); letter-spacing: -.04em; max-width: 17ch; text-wrap: pretty; margin: 0; }
.h1-page { font: var(--font-heading-weight) clamp(34px, 6.6vw, 84px)/0.98 var(--font-heading); letter-spacing: -.04em; max-width: 18ch; margin: 0; }
.h2-section { font: var(--font-heading-weight) clamp(28px, 5vw, 56px)/1.02 var(--font-heading); letter-spacing: -.035em; max-width: 20ch; margin: 0; }
.h3-block { font: var(--font-heading-weight) clamp(22px, 3.6vw, 40px)/1.05 var(--font-heading); letter-spacing: -.03em; max-width: 16ch; margin: 0; }
.lede { font: 300 clamp(15px, 1.7vw, 19px)/1.6 var(--font-body); color: var(--color-neutral-400); max-width: 54ch; margin: var(--space-6) 0 0; text-wrap: pretty; }

/* — section rhythm — */
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section-tight { padding: clamp(28px, 5vw, 56px) 0; }
.section-top { padding-top: clamp(28px, 5vw, 64px); }
.section-divider {
  height: 1px; margin-bottom: clamp(24px, 4vw, 48px);
  background: linear-gradient(90deg, transparent, var(--color-divider) 10%, var(--color-divider) 90%, transparent);
}
.section-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; justify-content: space-between; margin-bottom: clamp(20px, 3vw, 36px); }

/* — header / nav overlay — */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--glass-regular);
  backdrop-filter: blur(var(--blur-regular)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--blur-regular)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--color-divider);
}
/* The layer's Fallback 2 only reaches the Nocturne tiers it declares, not this
   site.css class, and a same-specificity rule there loads earlier in the
   concatenated stylesheet, so it would lose the source-order tie to the rule
   above rather than win it -- this has to live here, after .site-header, to
   actually override it. --color-bg, not --color-surface: the header sat at
   82% --color-bg before glass ever touched it (this file's own history), so
   dropping to solid --color-bg keeps the sticky header reading as the page's
   own ground instead of a card floating over it. */
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--color-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* No blur to fall back on here means a translucent pane is just dim glass
   over whatever scrolls under it -- solid is the only way this stays legible
   without backdrop-filter, same reasoning as the reduced-transparency block
   above. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--color-bg);
  }
}
.site-header .wrap { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); min-height: clamp(56px, 7vw, 68px); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; flex: 0 0 auto; }
.logo-mark { width: 22px; height: 22px; }
.logo-name { font: var(--font-heading-weight) 15px/1 var(--font-heading); letter-spacing: -.02em; }
.header-spacer { flex: 1 1 auto; }
.header-actions { display: flex; align-items: center; gap: clamp(10px, 2vw, 18px); }
.header-signin { font: 400 12.5px/1 var(--font-body); letter-spacing: .04em; color: var(--color-neutral-400); text-decoration: none; white-space: nowrap; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  color: var(--color-text); height: 44px; padding: 0 14px; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--color-accent-600); }
.nav-toggle-bars { display: grid; gap: 4px; }
.nav-toggle-bars span { display: block; width: 16px; height: 1px; background: currentColor; }

.nav-overlay {
  position: fixed; inset: 0; z-index: 95; background: var(--color-bg);
  opacity: 0; transform: translateY(-14px); pointer-events: none;
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
  overflow-y: auto;
}
.nav-overlay.is-open { opacity: 1; transform: none; pointer-events: auto; }
.nav-overlay-top { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); min-height: clamp(56px, 7vw, 68px); padding-bottom: clamp(24px, 5vw, 48px); }
.nav-overlay-close {
  background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  color: var(--color-text); height: 44px; padding: 0 16px; cursor: pointer;
  font: 500 10px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
}
.nav-overlay-close:hover { border-color: var(--color-accent-600); }
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; }
.nav-list a {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline;
  gap: clamp(10px, 3vw, 26px); padding: clamp(12px, 2vw, 20px) 0;
  border-top: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none;
}
.nav-list li:last-child a { border-bottom: 1px solid var(--color-divider); }
.nav-list a:hover { color: var(--color-accent-300); }
.nav-list .nav-num { font: 400 11px/1 ui-monospace, monospace; color: var(--color-neutral-600); }
.nav-list .nav-title { font: var(--font-heading-weight) clamp(28px, 5.2vw, 58px)/1 var(--font-heading); letter-spacing: -.03em; }
.nav-list .nav-hint { font: 400 11px/1 ui-monospace, monospace; color: var(--color-neutral-600); }
.nav-overlay-footer {
  display: flex; flex-wrap: wrap; gap: clamp(12px, 3vw, 32px); align-items: center; justify-content: space-between;
  padding: clamp(24px, 5vw, 48px) 0; font: 400 11px/1.6 ui-monospace, monospace; color: var(--color-neutral-600);
}
.motion-toggle { display: inline-flex; align-items: center; gap: var(--space-3); }
.motion-toggle-btn { display: inline-flex; gap: 2px; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); padding: 2px; }
.motion-toggle-btn button { min-height: 32px; padding: 0 var(--space-4); border: none; background: transparent; color: var(--color-neutral-400); border-radius: 4px; cursor: pointer; font-size: 12px; }
.motion-toggle-btn button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); }
body.nav-open { overflow: hidden; }

/* — hero — */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 48px); align-items: flex-end; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 4vw, 44px); }
.hero-meta { display: flex; flex-wrap: wrap; gap: clamp(16px, 4vw, 48px); justify-content: space-between; margin: clamp(28px, 5vw, 56px) 0 clamp(14px, 2vw, 20px); }
/* `max-width: 100%` is load-bearing, not tidying.

   `aspect-ratio` combined with `min-height` transfers the minimum height
   into a width through the ratio: 220px at 21/9 is 513.3px. With no upper
   bound on the width, that transferred size beat the 444px the containing
   block actually offers, so on a phone the hero image was wider than the
   page, dragged the document out to 538px against a 494px viewport, and the
   whole site had to be pinched out to read. It is not a *minimum* width
   doing this — `min-width: 0` was tried and changed nothing, because the
   width is being computed from the ratio rather than clamped by a floor.
   Only an upper bound stops it.

   Measured at a 390px window (444px of content width):
     as shipped        w=513.3  h=220.0   overflows
     max-width:100%    w=444.0  h=220.0   fits
     min-height:0      w=444.0  h=190.3   fits, but loses the floor

   The clamp keeps the min-height doing its job: the box becomes 444x220
   rather than a 190px letterbox sliver, so the ratio still governs wherever
   there is room for it and gives way where there is not. */
.hero-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 21 / 9; min-height: 220px; max-width: 100%; }
.hero-media img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.hero-media-fade { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 92%, transparent), transparent 55%); }
.img-placeholder {
  display: flex; align-items: flex-end; padding: var(--space-4);
  background: repeating-linear-gradient(135deg, var(--color-surface) 0 10px, var(--color-neutral-900) 10px 20px);
  color: var(--color-neutral-500); font: 400 11px/1.4 ui-monospace, monospace; width: 100%; height: 100%;
}
.img-placeholder-square { aspect-ratio: 1; }

/* — link-arrow — */
.link-arrow { display: inline-flex; align-items: center; gap: 6px; }

/* — product tile grid (home) — */
.tile-grid { display: grid; gap: clamp(12px, 2vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tile {
  text-align: left; cursor: pointer; text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  overflow: hidden; color: var(--color-text); display: flex; flex-direction: column;
}
.tile:hover { border-color: var(--color-accent-600); }
.tile-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-body { padding: clamp(16px, 2vw, 24px); display: grid; gap: 8px; }
.tile-body .meta { color: var(--color-neutral-600); }
.tile-title { font: var(--font-heading-weight) clamp(17px, 1.8vw, 22px)/1.2 var(--font-heading); letter-spacing: -.02em; }
.tile-body p { font: 300 14px/1.6 var(--font-body); color: var(--color-neutral-400); margin: 0; }

/* — stat band (deck ground; only place --color-section is used) — */
.stat-band { background: linear-gradient(160deg, var(--color-section), var(--color-section-glow)); padding: clamp(48px, 7vw, 104px) 0; }
.stat-grid { display: grid; gap: clamp(24px, 4vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); text-align: center; }
.stat-number { font: var(--font-heading-weight) clamp(40px, 6vw, 76px)/1 var(--font-heading); letter-spacing: -.04em; display: block; }
.stat-label { font: 400 11px/1.6 ui-monospace, monospace; color: var(--color-accent-200); margin-top: 8px; }

/* — sticky process column — */
.process-grid { display: grid; gap: clamp(24px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.process-sticky { position: sticky; top: clamp(100px, 12vw, 140px); }
.process-steps { display: grid; gap: 0; }
.process-step { display: grid; grid-template-columns: 48px 1fr; gap: clamp(12px, 2vw, 24px); padding: clamp(18px, 3vw, 30px) 0; border-top: 1px solid var(--color-divider); }
.process-step:last-child { border-bottom: 1px solid var(--color-divider); }
.process-step-num { font: 400 11px/1.6 ui-monospace, monospace; color: var(--color-accent-400); }
.process-step h3 { font: var(--font-heading-weight) clamp(19px, 2.2vw, 26px)/1.2 var(--font-heading); letter-spacing: -.02em; margin: 0; }
.process-step p { font: 300 14.5px/1.7 var(--font-body); color: var(--color-neutral-400); margin: 8px 0 0; max-width: 48ch; }

/* — fixed 2x2 feature/info card grid — */
.feature-grid-2x2 { display: grid; gap: clamp(10px, 1.6vw, 22px); grid-template-columns: repeat(2, 1fr); }
.feature-card { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: transparent; }
.feature-mark { display: block; width: 18px; height: 18px; border: 1px solid var(--color-accent); margin-bottom: clamp(18px, 3vw, 28px); }
.feature-mark.round { border-radius: 99px; }
.feature-mark.rotated { border-radius: 3px; transform: rotate(45deg); }
.feature-mark.dashed { border-style: dashed; border-radius: 99px; }
.feature-card .card-title { font-size: 15.5px; letter-spacing: -.01em; }
.feature-card p { font: 300 14px/1.7 var(--font-body); color: var(--color-neutral-400); margin: 10px 0 0; }

/* — products page: jump tabs + per-product blocks — */
.tab-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x proximity; }
.tab-row .btn { scroll-snap-align: start; white-space: nowrap; font-size: 12.5px; }
.product-block-head { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); align-items: center; }
.product-shot { flex: 0 1 240px; min-width: 160px; max-width: 280px; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; }
.product-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-copy { flex: 1 1 320px; min-width: 0; }
.product-copy .lede { margin-top: clamp(10px, 2vw, 16px); }
.product-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 2.5vw, 22px); }

/* — pricing: one markup, swipe-row narrow / grid wide — */
.pricing-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: clamp(10px, 1.4vw, 16px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 18px; }
@media (min-width: 900px) {
  .pricing-row { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-x: visible; }
}
.plan-card { scroll-snap-align: center; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 14px; }
.plan-card-featured { background: linear-gradient(165deg, var(--color-accent-900), var(--color-surface)); border-color: var(--color-accent-600); box-shadow: var(--shadow-md); }
.plan-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* The featured treatment is defined here, in full, keyed on the class — not
   split between this file and inline styles on whichever card happens to be
   featured in the markup. site.js reassigns .plan-card-featured at runtime
   when the portal reports a different most-popular tier, and inline styles
   cannot move with it: the tier that lost the class kept the accent type and
   the tier that gained it never got it. Every part of the look lives on the
   class so the whole thing moves as one. */
.plan-card-featured .plan-code { color: var(--color-accent-300); }
.plan-card-featured .plan-features { color: var(--color-neutral-200); }
.plan-card-featured .hr {
  background: linear-gradient(to right,
    transparent, var(--color-accent-800) 48px,
    var(--color-accent-800) calc(100% - 48px), transparent);
}
/* Every head reserves the badge's height whether or not it carries one, so
   the plan name, price and rule below sit on the same line across all five
   cards. The badged card is otherwise ~12px taller at the top and its whole
   column reads as misaligned against its neighbours — visible on the shipped
   page, where "Premium" sat lower than "Basic" and "Business".

   The pill takes an explicit height rather than inheriting a line box from
   .tag's padding, because that box depends on the inherited body line-height
   and cannot be matched by a min-height here without guessing at it. .tag is
   an inline-flex with align-items:center, so a fixed height centres the label
   in it exactly. */
.plan-head { min-height: 20px; }
.plan-head .plan-badge { flex: 0 0 auto; height: 20px; padding-block: 0; }
.plan-code { font: 400 10px/1 ui-monospace, monospace; color: var(--color-neutral-600); white-space: nowrap; }
.plan-name { font: var(--font-heading-weight) clamp(22px, 2.4vw, 28px)/1 var(--font-heading); letter-spacing: -.02em; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price strong { font: var(--font-heading-weight) clamp(28px, 3vw, 38px)/1 var(--font-heading); letter-spacing: -.03em; }
.plan-price span { font: 400 11px/1 ui-monospace, monospace; color: var(--color-neutral-500); }
.plan-card .hr { margin: 0; }
.plan-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font: 300 13.5px/1.5 var(--font-body); color: var(--color-neutral-300); flex: 1 1 auto; }
.plan-features li.excluded { color: var(--color-neutral-600); }
.pricing-hint { margin-top: clamp(8px, 1vw, 12px); }

/* — support — */
.help-grid { display: grid; gap: clamp(12px, 2vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.help-card { padding: clamp(18px, 2.5vw, 28px); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); }
.help-card .meta { color: var(--color-neutral-600); }
.help-card h3 { font: var(--font-heading-weight) 15.5px/1.3 var(--font-heading); margin: 10px 0 0; }
.help-card p { font: 300 14px/1.7 var(--font-body); color: var(--color-neutral-400); margin: 8px 0 0; }
.contact-band { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.contact-band h2 { font: var(--font-heading-weight) clamp(19px, 2.4vw, 28px)/1.2 var(--font-heading); letter-spacing: -.02em; margin: 0; }
.contact-band p { font: 300 14px/1.7 var(--font-body); color: var(--color-neutral-400); margin: 8px 0 0; }

/* — sign up — */
.signup-grid { display: grid; gap: clamp(18px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.step-indicator { display: flex; gap: var(--space-3); }
.step-dot { flex: 1; height: 3px; border-radius: 99px; background: var(--color-divider); }
.step-dot.is-active, .step-dot.is-done { background: var(--color-accent); }
.form-error { color: #e08a8a; font-size: 13px; }
.step-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 16px; }
.step-tabs .btn { font-size: 12px; white-space: nowrap; }
.step-tabs .btn[aria-current="step"] { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.signup-form-card { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); }
.field-split { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.signup-hint { font: 400 11px/1.6 ui-monospace, monospace; color: var(--color-neutral-600); }
.signup-side { padding: clamp(20px, 3vw, 32px); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); display: grid; gap: 12px; }
.signup-side-row { display: flex; justify-content: space-between; font: 400 12px/1.6 ui-monospace, monospace; color: var(--color-neutral-400); }
.signup-summary { display: grid; gap: 8px; font: 300 14px/1.6 var(--font-body); color: var(--color-neutral-300); }

/* — shop / cart — */
.shop-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; justify-content: space-between; }
.shop-grid { display: grid; gap: clamp(12px, 2vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.product-card { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.product-card-media { position: relative; aspect-ratio: 4 / 3; }
.product-card-body { padding: clamp(16px, 2vw, 24px); display: grid; gap: 8px; flex: 1 1 auto; }
.product-card-name { font: var(--font-heading-weight) clamp(16px, 1.8vw, 20px)/1.3 var(--font-heading); letter-spacing: -.02em; margin-top: 4px; }
.product-card-blurb { font: 300 13.5px/1.6 var(--font-body); color: var(--color-neutral-400); margin: 0; }
.product-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.product-card-price { font: var(--font-heading-weight) clamp(20px, 2vw, 24px)/1 var(--font-heading); letter-spacing: -.02em; }
.shop-empty { grid-column: 1 / -1; padding: clamp(24px, 4vw, 40px); border: 1px dashed var(--color-divider); border-radius: var(--radius-lg); color: var(--color-neutral-400); }

.cart-fab { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 70; }
.scrim { position: fixed; inset: 0; z-index: 96; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.scrim.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 97; width: min(420px, 100%);
  background: var(--color-bg); border-left: 1px solid var(--color-divider);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.cart-drawer.is-open { transform: none; }
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: clamp(16px, 3vw, 22px); border-bottom: 1px solid var(--color-divider); }
.cart-drawer-head span { font: var(--font-heading-weight) 15px/1 var(--font-heading); letter-spacing: -.01em; }
.cart-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: clamp(12px, 3vw, 18px); }
.cart-empty { font: 300 14px/1.7 var(--font-body); color: var(--color-neutral-500); padding: 24px 4px; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--color-divider); }
.cart-line-name { font: 500 13.5px/1.3 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-line-price { font: 400 11px/1.6 ui-monospace, monospace; color: var(--color-neutral-500); }
.cart-stepper { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cart-stepper button { min-height: 30px; min-width: 30px; padding: 0; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; font-size: 14px; }
.cart-stepper span { font: 400 12.5px/1 ui-monospace, monospace; min-width: 1.5ch; text-align: center; }
.cart-drawer-footer { padding: clamp(16px, 3vw, 22px); border-top: 1px solid var(--color-divider); display: grid; gap: 12px; }
.cart-subtotal { display: flex; justify-content: space-between; font: var(--font-heading-weight) 15px/1 var(--font-heading); }

/* — about — */
.about-grid { display: grid; gap: clamp(12px, 2vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* — workspace (portal) shell — */
.workspace-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.workspace-avatar { width: 30px; height: 30px; border-radius: 99px; background: var(--color-accent-800); display: grid; place-items: center; font: 500 12px/1 var(--font-body); }
.workspace-tabs { display: flex; gap: 8px; overflow-x: auto; margin: clamp(18px, 3vw, 28px) 0; padding-bottom: 10px; border-bottom: 1px solid var(--color-divider); }
.workspace-tabs .btn { white-space: nowrap; font-size: 12.5px; }
.workspace-tabs .btn[aria-current="page"] { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.workspace-grid { display: grid; gap: clamp(12px, 2vw, 18px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.workspace-card { padding: clamp(16px, 2vw, 22px); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); }
.workspace-card-title { font: 500 10px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--color-neutral-500); }
.workspace-quick { padding: clamp(16px, 2vw, 22px); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); display: grid; gap: 10px; }
.storage-value { font: var(--font-heading-weight) clamp(22px, 2.6vw, 30px)/1 var(--font-heading); letter-spacing: -.03em; margin-top: 12px; }
.storage-value span { font: 400 11px/1 ui-monospace, monospace; color: var(--color-neutral-500); }
.storage-bar { height: 4px; border-radius: 99px; background: var(--color-neutral-800); margin-top: 12px; overflow: hidden; }
.storage-bar-fill { height: 100%; background: var(--color-accent); }

/* — privacy / prose — */
.prose-wrap { max-width: 900px; }
.prose { display: grid; gap: clamp(28px, 4vw, 44px); font: 300 15px/1.75 var(--font-body); color: var(--color-neutral-300); }
.prose h2 { font: var(--font-heading-weight) clamp(19px, 2vw, 24px)/1.3 var(--font-heading); letter-spacing: -.01em; margin: 0 0 12px; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.prose strong { color: var(--color-neutral-200); font-weight: 500; }

/* — global closing CTA + footer — */
.cta-section { border-top: 1px solid var(--color-divider); }
.cta-grid { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); align-items: flex-end; justify-content: space-between; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.site-footer { padding: clamp(36px, 6vw, 72px) 0 clamp(28px, 4vw, 48px); border-top: 1px solid var(--color-divider); }
.footer-grid { display: grid; gap: clamp(20px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.footer-col-title { font: 500 10px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--color-neutral-500); margin-bottom: 16px; }
.footer-links { display: grid; gap: 9px; font: 300 13.5px/1.4 var(--font-body); }
.footer-links a { color: var(--color-text); text-decoration: none; }
.footer-links a:hover { color: var(--color-accent-300); }
.footer-bottom { max-width: 1320px; margin: clamp(28px, 5vw, 56px) auto 0; padding-inline: clamp(20px, 5vw, 72px); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font: 400 11px/1.6 ui-monospace, monospace; color: var(--color-neutral-600); }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--color-accent-300); }

/* — scroll reveal — site.js observes each [data-reveal] element and adds
   .is-visible once it scrolls on screen, which plays this animation; the
   html.js-anim rule is just the pre-reveal starting state. */
html.js-anim [data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal].is-visible { animation: reveal-in .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms) backwards; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* — responsive — */
@media (max-width: 900px) {
  .hero-grid, .process-grid, .product-block-head { grid-template-columns: 1fr; }
  .process-sticky { position: static; }
  .feature-grid-2x2, .about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tile-grid, .shop-grid, .help-grid, .footer-grid { grid-template-columns: 1fr; }
  .field-split { grid-template-columns: 1fr; }
  .cart-drawer { width: 100%; }
}