/* ============================================================
   bMail  ·  bmail.gg
   Concept 1 brand, four colours only.
   2026 language: bento composition, spatial depth with frosted
   glass, pinned scroll storytelling, animated gradient borders,
   cursor spotlights, film grain, oversized type.
   Only transform and opacity are ever animated.
   ============================================================ */

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --shift { syntax: "<percentage>"; initial-value: 0%; inherits: false; }

:root {
  --yellow: #F0B90B;
  --yellow-lift: #ffd75e;   /* a tint of the brand yellow, not a new hue */
  --black: #181A1F;
  --ink: #121419;
  --obsidian: #2A313D;
  --white: #FFFFFF;
  --alert: #FF3B30;

  /* Body copy sat at 55% over a near black ground, which reads as washed out. */
  --t-70: rgba(255, 255, 255, 0.86);
  --t-55: rgba(255, 255, 255, 0.68);
  --t-35: rgba(255, 255, 255, 0.46);
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.20);

  /* The brand book uses obsidian as a PANEL colour. Held at 42% alpha it just
     muddied into the black. These are real, opaque surfaces built from it. */
  --surface: #22272F;
  --surface-2: #2A313D;
  --surface-3: #333B49;

  --font: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --shell: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--white);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain, the texture layer of the spatial look.
   Deliberately static and exactly viewport sized. An oversized fixed layer
   being transform-animated behind blurring elements forces the compositor to
   re-rasterise every backdrop each frame, which blanks the viewport on real
   hardware. The texture reads the same standing still. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.defs { position: absolute; width: 0; height: 0; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
.shell-wide { max-width: 1240px; }
.mono { font-family: var(--mono); }
::selection { background: var(--yellow); color: var(--black); }

/* ---------------- type ---------------- */
h1 {
  font-weight: 800;
  font-stretch: 115%;
  font-size: clamp(3.2rem, 7.4vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h2 {
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 em { font-style: normal; }

/* Gradient type, a sweep of the brand yellow through its own tint.
   Static by default: clipping a gradient to glyphs repaints on every frame it
   moves, so only the single hero accent animates. Six headings all sweeping
   forever is a frame budget spent where nobody is looking. */
.grad {
  background: linear-gradient(100deg, var(--yellow) 10%, var(--yellow-lift) 50%, var(--yellow) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .grad {
  background-size: 220% 100%;
  background-position: var(--shift) 0;
  animation: flow 7s linear infinite;
}
@keyframes flow { to { --shift: 220%; } }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 20px;
}
.pulse {
  width: 7px; height: 7px;
  background: var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(240, 185, 11, 0.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 185, 11, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(240, 185, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 185, 11, 0); }
}
.lede { font-size: 1.14rem; line-height: 1.65; color: var(--t-70); max-width: 46ch; }

/* headline character reveal */
.chars { perspective: 800px; }
.chars .line { display: block; }
.chars .word { display: inline-block; white-space: nowrap; }
.chars .ch { display: inline-block; transform-origin: 50% 100%; will-change: transform, opacity; }
.chars.animate .ch {
  opacity: 0;
  transform: translateY(0.42em) rotateX(-78deg);
  animation: charIn 0.72s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes charIn { to { opacity: 1; transform: none; } }

/* ---------------- buttons ---------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 650;
  font-size: 0.94rem;
  padding: 14px 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s;
  will-change: transform;
}
.btn-primary { background: var(--yellow); color: var(--black); }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover { box-shadow: 0 14px 40px rgba(240, 185, 11, 0.3); }
.btn-lg { padding: 18px 44px; font-size: 1.02rem; }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---------------- nav ---------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(24, 26, 31, 0.7);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 76px; }
.nav-progress {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--yellow), var(--yellow-lift));
  transform-origin: 0 50%;
  transform: scaleX(0);
  box-shadow: 0 0 12px rgba(240, 185, 11, 0.7);
}
@supports (animation-timeline: scroll()) {
  .nav-progress { animation: grow linear both; animation-timeline: scroll(root block); }
  @keyframes grow { to { transform: scaleX(1); } }
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.brand-mark { width: 30px; height: 30px; color: var(--yellow); display: inline-flex; flex-shrink: 0; transition: transform 0.5s var(--ease); }
.brand:hover .brand-mark { transform: rotateY(180deg); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { display: inline-flex; font-size: 1.14rem; }
/* The wordmark is supplied artwork rather than type, so it is sized against the
   old font-size to keep the lockup proportions the nav was built around. */
.brand-name .word { height: 0.82em; width: auto; fill: currentColor; display: block; }
.nav-links { display: flex; gap: 34px; }
.nav-links a { position: relative; color: var(--t-55); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.15s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--yellow);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-burger { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-burger span { width: 22px; height: 1.5px; background: var(--white); }

/* ================= HERO ================= */
.hero { position: relative; padding: 96px 0 0; overflow: hidden; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.75; pointer-events: none; }
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 72% 32%, rgba(240, 185, 11, 0.10), transparent 70%),
    linear-gradient(180deg, transparent 55%, var(--black) 96%);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding-bottom: 40px; }
.hero h1 { margin-bottom: 26px; }
.hero .lede { margin-bottom: 40px; }

.claim { display: flex; align-items: stretch; gap: 10px; max-width: 520px; }
.claim-box {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  background: rgba(18, 20, 25, 0.8);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 0 18px;
  transition: border-color 0.2s, box-shadow 0.3s;
}
.claim-box:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(240,185,11,0.14), 0 0 40px rgba(240,185,11,0.1); }
.claim-box input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--white); font-family: var(--mono); font-size: 0.97rem; padding: 16px 0; }
.claim-box input::placeholder { color: var(--t-35); }
.claim-suffix { color: var(--yellow); font-family: var(--mono); font-size: 0.92rem; user-select: none; }
.claim-msg { min-height: 26px; margin-top: 14px; font-size: 0.88rem; color: var(--t-55); }
.claim-msg.ok { color: var(--yellow); }
.claim-msg.bad { color: var(--alert); }

/* 3D mark */
.hero-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.stage { width: min(360px, 80vw); aspect-ratio: 1; perspective: 900px; perspective-origin: 50% 45%; }
.rig { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: turn 16s ease-in-out infinite alternate; will-change: transform; }
@keyframes turn {
  from { transform: rotateX(16deg) rotateY(-26deg); }
  to   { transform: rotateX(6deg) rotateY(26deg); }
}
.plate { position: absolute; inset: 0; transform-style: preserve-3d; }
.plate svg { width: 100%; height: 100%; overflow: visible; }
.plate svg path { fill: var(--yellow); filter: drop-shadow(0 0 22px rgba(240,185,11,0.35)); }
.plate-top  { transform: translateZ(34px); animation: floatA 6s ease-in-out infinite; }
.plate-midL { transform: translateZ(12px); animation: floatB 6s ease-in-out infinite 0.4s; }
.plate-midR { transform: translateZ(12px); animation: floatB 6s ease-in-out infinite 0.4s; }
.plate-body { transform: translateZ(-16px); animation: floatA 6s ease-in-out infinite 0.8s; }
.plate-body svg path { fill: var(--yellow-lift); }
@keyframes floatA { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes floatB { 0%,100% { translate: 0 0; } 50% { translate: 0 6px; } }
.halo { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(240,185,11,0.28), transparent 68%); transform: translateZ(-90px); filter: blur(14px); }
.ring { position: absolute; inset: 4%; border: 1px solid rgba(240,185,11,0.28); border-radius: 50%; transform-style: preserve-3d; }
.ring-a { animation: spinRing 14s linear infinite; }
.ring-b { inset: 14%; opacity: 0.6; animation: spinRing 20s linear infinite reverse; }
@keyframes spinRing { from { transform: rotateX(78deg) rotateZ(0deg); } to { transform: rotateX(78deg) rotateZ(360deg); } }

/* product */
.product { position: relative; margin: 64px auto 0; perspective: 1600px; }
.product-inner {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset, 0 -50px 130px rgba(240,185,11,0.06) inset, 0 50px 120px rgba(0,0,0,0.65);
  will-change: transform;
}
.product.live .product-inner { transition: transform 0.12s linear; }
.product-glow { position: absolute; left: 10%; right: 10%; bottom: -40px; height: 120px; background: radial-gradient(ellipse at center, rgba(240,185,11,0.18), transparent 70%); filter: blur(20px); pointer-events: none; }
@supports (animation-timeline: view()) {
  .product-inner { animation: liftIn linear both; animation-timeline: view(); animation-range: entry 5% cover 42%; }
  @keyframes liftIn {
    from { transform: rotateX(26deg) scale(0.92); opacity: 0.4; }
    to   { transform: rotateX(4deg) scale(1); opacity: 1; }
  }
}
.product-chrome { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--ink); }
.p-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--obsidian); }
.p-url { margin-left: 12px; font-size: 0.72rem; color: var(--t-55); background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 4px; padding: 4px 14px; }
.p-net { margin-left: auto; font-size: 0.66rem; color: var(--yellow); letter-spacing: 0.06em; }
.product-body { display: grid; grid-template-columns: 190px 300px 1fr; min-height: 430px; font-size: 0.8rem; }
.p-side { border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--ink); }
.p-brand { display: flex; align-items: center; gap: 8px; padding: 2px 6px 16px; }
.p-brand .p-word { height: 11px; width: auto; fill: currentColor; display: block; }
.p-mark { width: 16px; height: 16px; color: var(--yellow); }
.p-new { background: var(--yellow); color: var(--black); font-weight: 650; text-align: center; border-radius: 4px; padding: 9px 0; margin-bottom: 12px; font-size: 0.78rem; }
.p-nav { display: flex; align-items: center; gap: 9px; color: var(--t-55); padding: 9px 8px; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; }
.p-nav svg { width: 14px; height: 14px; }
.p-nav.on { color: var(--white); border-left-color: var(--yellow); background: rgba(42,49,61,0.5); }
.p-nav.on svg { color: var(--yellow); }
.p-nav i { font-style: normal; margin-left: auto; color: var(--yellow); border: 1px solid rgba(240,185,11,0.4); border-radius: 3px; font-size: 0.62rem; padding: 0 6px; }
.p-me { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.p-me b { color: var(--yellow); font-size: 0.74rem; font-weight: 650; }
.p-me span { color: var(--t-35); font-size: 0.64rem; }
.p-list { border-right: 1px solid var(--line); }
.p-row { padding: 14px 16px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; transition: background 0.2s; }
.p-row.on { background: rgba(42,49,61,0.5); border-left-color: var(--yellow); }
.p-row.muted { opacity: 0.6; }
.p-row-top { display: flex; justify-content: space-between; gap: 10px; }
.p-row-top b { font-weight: 650; font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row-top span { color: var(--t-35); font-size: 0.68rem; }
.p-row-sub { color: var(--t-55); font-size: 0.74rem; margin-top: 3px; }
.p-chip { display: inline-block; margin-top: 8px; font-size: 0.6rem; color: var(--yellow); border: 1px solid rgba(240,185,11,0.4); border-radius: 3px; padding: 2px 8px; }
.p-read { padding: 22px 26px; display: flex; flex-direction: column; }
.p-subject { font-weight: 750; font-size: 1.05rem; letter-spacing: -0.01em; }
.p-meta { color: var(--t-35); font-size: 0.66rem; margin: 6px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.p-text { color: var(--t-70); font-size: 0.82rem; line-height: 1.7; max-width: 52ch; margin-bottom: 14px; }
.p-line { height: 7px; border-radius: 2px; background: rgba(255,255,255,0.07); margin-bottom: 9px; }
.w70 { width: 70%; } .w45 { width: 45%; }
.p-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; color: var(--t-35); font-size: 0.66rem; border-top: 1px solid var(--line); padding-top: 12px; }
.p-lock { width: 12px; height: 12px; color: var(--yellow); }

.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 1px solid var(--line); padding-top: 40px; }
.figure dt { font-size: 1.7rem; font-weight: 500; color: var(--yellow); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figure dd { color: var(--t-55); font-size: 0.86rem; margin-top: 6px; max-width: 24ch; }
.wallets { color: var(--t-35); font-size: 0.84rem; padding: 28px 0 110px; }

/* ================= SECTION SHELL ================= */
.section { padding: 120px 0; position: relative; }
.section-tint { background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { max-width: 760px; margin-bottom: 56px; }

/* Every section is titled the way the footer signs off: an oversized outlined
   word with its number set small beside it. One device, used consistently, is
   what makes a page feel designed rather than assembled. */
.sec-word {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 22px;
}
.sec-word i {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--yellow);
  flex-shrink: 0;
}
.sec-word span {
  font-size: clamp(2rem, 5.4vw, 4.4rem);
  font-weight: 800;
  font-stretch: 120%;
  letter-spacing: -0.035em;
  line-height: 0.86;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  user-select: none;
}
.sec-head h2 { margin-bottom: 20px; }
.sec-sub { color: var(--t-70); font-size: 1.02rem; line-height: 1.7; max-width: 58ch; }

/* ================= BENTO ================= */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* Frosted panels are painted, not sampled. Against a flat dark ground a layered
   gradient is visually indistinguishable from a real backdrop blur and costs
   nothing, where a dozen live backdrop-filters cost a repaint of everything
   behind them on every scroll frame. */
.cell {
  position: relative;
  background: linear-gradient(158deg, var(--surface-2) 0%, var(--surface) 62%);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 28px 30px;
  overflow: hidden;
  /* a lit top edge plus a real drop shadow is what makes a panel sit ON the page
     instead of dissolving into it */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
}
.cell:hover {
  transform: translateY(-5px);
  border-color: rgba(240, 185, 11, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 26px 60px rgba(0, 0, 0, 0.55);
}
.cell-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 18px;
}
.cell-tag::before {
  content: "";
  width: 14px; height: 2px;
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(240, 185, 11, 0.7);
}

/* animated gradient border, revealed on hover */
.beam::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), transparent 62%, var(--yellow) 78%, var(--yellow-lift) 85%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
/* The sweep runs ONLY while hovered. Animating a @property angle repaints the
   whole conic gradient every frame, and leaving it running on every card at
   opacity 0 burns the frame budget for something nobody can see. */
.beam:hover::before { opacity: 1; animation: spinBeam 4s linear infinite; }
@keyframes spinBeam { to { --angle: 360deg; } }

/* cursor spotlight */
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(240, 185, 11, 0.12), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s;
}
.spot:hover::after { opacity: 1; }

/* identity bento cells */
.cell-hero { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
/* Stacked rather than inline: the local part is user supplied and can be any
   length up to 32 characters, so a single line would always eventually overflow. */
.addr-big {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.addr-name { font-size: clamp(1.9rem, 4.2vw, 3.1rem); color: var(--white); max-width: 100%; }
.addr-suffix { font-size: clamp(1rem, 1.9vw, 1.45rem); color: var(--yellow); margin-top: 4px; }
.addr-meta { font-size: 0.75rem; color: var(--t-35); }
.addr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 26px; }
.chip { font-size: 0.72rem; color: var(--t-70); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 15px; background: rgba(255,255,255,0.06); }
.cell-shine {
  position: absolute;
  top: -60%; right: -30%;
  width: 70%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(240,185,11,0.16), transparent 65%);
  pointer-events: none;
}
/* the mark, huge and ghosted, so the flagship cell is never empty */
.cell-watermark {
  position: absolute;
  right: -8%; bottom: -14%;
  width: 58%;
  color: var(--yellow);
  opacity: 0.06;
  pointer-events: none;
}
.verify {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid rgba(240, 185, 11, 0.3);
  border-radius: 10px;
  background: rgba(240, 185, 11, 0.08);
}
.verify-mark {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
}
.verify-mark svg { width: 17px; height: 17px; }
.verify b { display: block; font-size: 0.95rem; }
.verify span { color: var(--t-55); font-size: 0.83rem; }

.cell-record { grid-column: span 2; }
.rec { display: flex; flex-direction: column; gap: 2px; }
.rec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 10px; margin: 0 -10px; border-radius: 6px; border-bottom: 1px solid var(--line); transition: background 0.2s; }
.rec-row:hover { background: rgba(255, 255, 255, 0.05); }
.rec-row:last-child { border-bottom: none; }
.rec-row span { color: var(--t-35); font-size: 0.8rem; }
.rec-row b { font-size: 0.8rem; font-weight: 500; color: var(--yellow); }
.rec-note { color: var(--t-55); font-size: 0.82rem; margin-top: 14px; }

.cell-price { display: flex; flex-direction: column; }
.price-num { font-size: 2.6rem; font-weight: 800; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px; color: var(--white); }
.cell-price p { color: var(--t-55); font-size: 0.86rem; }

.cell-wide { grid-column: span 4; }
.safe-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.safe b { display: block; font-size: 0.95rem; margin-bottom: 8px; }
.safe p { color: var(--t-55); font-size: 0.86rem; }

/* stamps bento */
.bento-stamps .cell-stamp { grid-column: span 2; grid-row: span 3; display: flex; flex-direction: column; }
.bento-stamps .cell-rule { grid-column: span 2; }
.cell-rule b { display: block; font-size: 1.05rem; margin-bottom: 9px; letter-spacing: -0.01em; }
.cell-rule p { color: var(--t-55); font-size: 0.88rem; }
.stamp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.stamp-amt { font-size: 0.68rem; color: var(--yellow); border: 1px solid rgba(240,185,11,0.4); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.stamp-from { font-size: 0.84rem; color: var(--white); margin-bottom: 8px; }
.stamp-body { color: var(--t-70); font-size: 0.94rem; margin-bottom: 22px; }
.stamp-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stamp-tab { background: none; border: none; color: var(--t-55); font-family: var(--font); font-weight: 600; font-size: 0.86rem; padding: 14px 0; cursor: pointer; transition: color 0.2s; }
.stamp-tab + .stamp-tab { border-left: 1px solid var(--line); }
.stamp-tab:hover { color: var(--white); }
.stamp-tab.on { color: var(--yellow); }
.stamp-ink { position: absolute; bottom: -1px; left: 0; width: 50%; height: 2px; background: var(--yellow); box-shadow: 0 0 12px rgba(240,185,11,0.7); transition: transform 0.4s var(--ease); }
.stamp-ink.right { transform: translateX(100%); }

/* the escrow actually travels along a track */
/* margin auto lets the track absorb the card's slack, so the escrow line floats
   centred instead of leaving a dead gap under it */
.flowline { display: flex; align-items: center; gap: 12px; padding: 22px 0 16px; margin: auto 0; }
.flow-end { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-35); white-space: nowrap; }
.flow-track { position: relative; flex: 1; height: 1px; background: var(--line-2); }
/* The runner spans the track, so translating it by 100% moves exactly one track
   width. Animating the dot's `left` instead would force a layout on every
   frame, which is the thing this whole stylesheet is trying not to do. */
.flow-run {
  position: absolute;
  inset: 0;
  animation: travelDot 2.6s var(--ease) infinite;
  will-change: transform, opacity;
}
.flowline.reverse .flow-run { animation-name: travelBack; }
.flow-dot {
  position: absolute; top: 50%; left: 0;
  width: 9px; height: 9px;
  background: var(--yellow);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 14px rgba(240,185,11,0.8);
}
@keyframes travelDot {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes travelBack {
  0% { transform: translateX(100%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
/* the escrow readout fills what used to be dead space in the tall card */
.escrow-state {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
  background: rgba(0, 0, 0, 0.24);
}
.es-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.es-row:last-child { border-bottom: none; }
.es-row span { color: var(--t-35); font-size: 0.79rem; }
.es-row b { color: var(--yellow); font-size: 0.79rem; font-weight: 500; }
.stamp-out { color: var(--t-55); font-size: 0.88rem; }

/* ================= PINNED STORY ================= */
.story { padding: 120px 0 140px; position: relative; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.story-sticky { position: sticky; top: 140px; }
.scene {
  position: relative;
  aspect-ratio: 1 / 0.92;
  background: linear-gradient(158deg, var(--surface-2) 0%, var(--surface) 64%);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 30px 70px rgba(0,0,0,0.5);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.scene-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(240,185,11,0.16), transparent 62%),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 34px 100%;
  transition: opacity 0.6s;
}
.frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.scene[data-step="0"] .frame-0,
.scene[data-step="1"] .frame-1,
.scene[data-step="2"] .frame-2,
.scene[data-step="3"] .frame-3 { opacity: 1; transform: none; }
.frame-icon { width: 40px; height: 40px; color: var(--yellow); filter: drop-shadow(0 0 18px rgba(240,185,11,0.5)); }
.frame-title { font-weight: 750; font-stretch: 108%; font-size: 1.4rem; letter-spacing: -0.02em; }
.frame-note { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-35); }

.sig-lines { display: flex; flex-direction: column; gap: 7px; width: 62%; }
.sig-lines span { height: 8px; border-radius: 2px; background: rgba(255,255,255,0.1); transform-origin: 0 50%; animation: sigDraw 2.2s var(--ease) infinite; }
.sig-lines span:nth-child(2) { width: 78%; animation-delay: 0.2s; }
.sig-lines span:nth-child(3) { width: 46%; animation-delay: 0.4s; background: rgba(240,185,11,0.5); }
@keyframes sigDraw { 0%,100% { transform: scaleX(0.2); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } }

.keybits { font-size: 0.68rem; color: var(--yellow); line-height: 1.7; word-break: break-all; max-width: 78%; text-shadow: 0 0 12px rgba(240,185,11,0.3); }

.env { width: 78%; display: flex; flex-direction: column; gap: 10px; }
.env-plain { font-size: 0.86rem; color: var(--white); background: rgba(255,255,255,0.05); border-radius: 6px; padding: 10px 12px; }
.env-seal { height: 2px; background: linear-gradient(90deg, transparent, var(--yellow), transparent); animation: sweepSeal 2.4s ease-in-out infinite; }
@keyframes sweepSeal { 0%,100% { opacity: 0.25; transform: scaleX(0.4); } 50% { opacity: 1; transform: scaleX(1); } }
.env-cipher { font-size: 0.62rem; color: var(--yellow); line-height: 1.65; word-break: break-all; opacity: 0.85; }

.blocks { display: flex; gap: 10px; align-items: center; }
.blocks span { width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 5px; background: rgba(255,255,255,0.04); }
.blocks .hot { border-color: var(--yellow); background: rgba(240,185,11,0.16); box-shadow: 0 0 18px rgba(240,185,11,0.4); animation: hotPulse 2s ease-in-out infinite; }
@keyframes hotPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.scene-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.rail-fill { display: block; height: 100%; width: 25%; background: var(--yellow); box-shadow: 0 0 10px rgba(240,185,11,0.6); transition: transform 0.5s var(--ease); transform-origin: 0 50%; }

/* Enough travel for the pinned scene to change frames, without long dead runs */
.story-steps { list-style: none; display: flex; flex-direction: column; gap: 13vh; padding: 8vh 0 14vh; }
.step { position: relative; padding-left: 62px; opacity: 0.45; transition: opacity 0.5s; }
.step.on { opacity: 1; }
.step-n {
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.74rem;
  color: var(--t-35);
  transition: all 0.4s var(--ease);
}
.step.on .step-n {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
  box-shadow: 0 0 24px rgba(240,185,11,0.45);
}
/* a spine connecting the steps, so the list reads as one sequence */
.step::before {
  content: "";
  position: absolute;
  left: 18px; top: 48px; bottom: -13vh;
  width: 1px;
  background: linear-gradient(var(--line-2), transparent);
}
.step:last-child::before { display: none; }
.step h3 { font-size: 1.35rem; font-weight: 750; font-stretch: 108%; letter-spacing: -0.02em; margin-bottom: 12px; }
.step p { color: var(--t-55); font-size: 0.97rem; line-height: 1.7; max-width: 46ch; }

/* ================= COMPARE ================= */
.table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(160deg, rgba(42, 49, 61, 0.6), rgba(29, 32, 38, 0.9));
}
table { width: 100%; border-collapse: collapse; min-width: 780px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 17px 24px; font-size: 0.93rem; border-bottom: 1px solid var(--line); }
thead th {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--t-35);
  padding-top: 20px; padding-bottom: 20px;
  background: var(--surface-2);
}
tbody tr { transition: background 0.2s; }
tbody tr:hover { background: rgba(255,255,255,0.045); }
tbody tr:last-child td { border-bottom: none; }
td:first-child { color: var(--t-55); }

/* Our column is the subject of the table, so it is treated as a raised object
   running through it rather than a faintly tinted cell. */
.th-hero { color: var(--black) !important; background: var(--yellow) !important; }
.td-hero, thead .th-hero {
  border-left: 1px solid rgba(240,185,11,0.42);
  border-right: 1px solid rgba(240,185,11,0.42);
}
.td-hero {
  color: var(--white);
  font-weight: 650;
  background: linear-gradient(180deg, rgba(240,185,11,0.14), rgba(240,185,11,0.09));
}
tbody tr:hover .td-hero { background: linear-gradient(180deg, rgba(240,185,11,0.22), rgba(240,185,11,0.14)); }

/* verdict marks drawn in CSS, so there is no icon font and no emoji */
.mk { display: inline-block; width: 15px; height: 15px; margin-right: 10px; vertical-align: -2px; position: relative; }
.mk::before, .mk::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; }
.mk.yes { color: var(--yellow); }
.mk.yes::before { width: 6px; height: 2px; left: 0; top: 8px; transform: rotate(45deg); }
.mk.yes::after  { width: 12px; height: 2px; left: 3px; top: 6px; transform: rotate(-50deg); }
.mk.no { color: var(--t-35); }
.mk.no::before, .mk.no::after { width: 13px; height: 2px; left: 1px; top: 6px; }
.mk.no::before { transform: rotate(45deg); }
.mk.no::after { transform: rotate(-45deg); }
.mk.part { color: var(--t-55); }
.mk.part::before { width: 13px; height: 2px; left: 1px; top: 6px; }
.mk.part::after { display: none; }

/* ================= FAQ ================= */
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
.faq-intro h2 { margin-bottom: 20px; }
.faq-more { color: var(--t-55); font-size: 0.94rem; }
.faq-more a { color: var(--yellow); text-decoration: none; }
.faq-more a:hover { text-decoration: underline; }
.faq { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); transition: background 0.3s; }
details[open] { background: rgba(42,49,61,0.28); }
summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; padding: 22px 46px 22px 18px; list-style: none; position: relative; transition: padding-left 0.3s var(--ease), color 0.2s; }
summary:hover { padding-left: 26px; color: var(--yellow); }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--yellow);
  border-bottom: 1.5px solid var(--yellow);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.35s var(--ease);
}
details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
details p { padding: 0 18px 24px; max-width: 62ch; color: var(--t-55); font-size: 0.94rem; line-height: 1.7; }
details a { color: var(--yellow); text-decoration: none; }
details a:hover { text-decoration: underline; }
summary:focus-visible { outline: 1px solid var(--yellow); outline-offset: 4px; }

/* ================= CTA, built around a postage stamp =================
   A mail product's most recognisable object is a stamp, and nobody in this
   category uses one. It carries the whole pitch in a glance: one issue number,
   one name, and a denomination that reads GAS ONLY. */
.cta {
  position: relative;
  overflow: hidden;
  padding: 140px 0 150px;
  background: var(--ink);
  border-top: 1px solid var(--line);
}
.cta-glow {
  position: absolute;
  bottom: -340px; left: 50%;
  transform: translateX(-50%);
  width: 1200px; height: 640px;
  background: radial-gradient(ellipse at center, rgba(240,185,11,0.16), transparent 62%);
  pointer-events: none;
}
.cta-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}
.cta-copy h2 { margin-bottom: 20px; }
.cta-sub { color: var(--t-70); font-size: 1.04rem; line-height: 1.7; max-width: 46ch; margin-bottom: 32px; }
.cta-sub .mono { color: var(--yellow); font-size: 0.94em; }

/* --- the stamp --- */
.cta-stamp {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1000px;
}
.stamp-paper {
  position: relative;
  width: min(330px, 82%);
  padding: 26px 24px 22px;
  background: linear-gradient(168deg, var(--yellow) 0%, #e0aa06 100%);
  color: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: rotate(-3.5deg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s var(--ease);
}
.cta-stamp:hover .stamp-paper { transform: rotate(-1deg) translateY(-6px); }

/* Perforated edge. Circles in the section's own background colour are punched
   along all four sides, which is bulletproof compared with mask-composite. */
.stamp-paper::after {
  content: "";
  position: absolute;
  inset: -9px;
  pointer-events: none;
  background-image:
    radial-gradient(circle 8px at 50% 50%, var(--ink) 97%, transparent 100%),
    radial-gradient(circle 8px at 50% 50%, var(--ink) 97%, transparent 100%),
    radial-gradient(circle 8px at 50% 50%, var(--ink) 97%, transparent 100%),
    radial-gradient(circle 8px at 50% 50%, var(--ink) 97%, transparent 100%);
  background-size: 24px 18px, 24px 18px, 18px 24px, 18px 24px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
.sp-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  opacity: 0.72;
}
.sp-mark { width: 74px; height: 74px; color: var(--black); margin: 6px 0 2px; }
.sp-name { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.sp-suffix { font-size: 0.82rem; opacity: 0.7; margin-top: -6px; }
.sp-rule { width: 68%; height: 1px; background: rgba(24, 26, 31, 0.35); margin: 8px 0 4px; }
.sp-foot {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sp-foot span { font-size: 0.58rem; letter-spacing: 0.18em; opacity: 0.72; }
.sp-foot b { font-size: 1.02rem; font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em; }

/* the cancellation mark, stamped over the corner */
.postmark {
  position: absolute;
  right: 2%; top: 8%;
  width: 104px; height: 104px;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 2px solid rgba(240, 185, 11, 0.55);
  border-radius: 50%;
  color: rgba(240, 185, 11, 0.75);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  transform: rotate(-14deg);
  background: rgba(24, 26, 31, 0.55);
}
.postmark::before, .postmark::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 76%; height: 1px;
  background: rgba(240, 185, 11, 0.45);
}
.postmark::before { top: 26%; }
.postmark::after { bottom: 26%; }

/* ================= FOOTER ================= */
.footer { position: relative; border-top: 1px solid var(--line); padding-top: 56px; overflow: hidden; }

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; }
.footer-brand p { color: var(--t-55); font-size: 0.9rem; margin-top: 16px; max-width: 34ch; }
.foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--yellow);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.foot-cta span { transition: transform 0.3s var(--ease); }
.foot-cta:hover span { transform: translateX(5px); }
.footer-col h5 { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-35); margin-bottom: 16px; }
.footer-col a { display: block; color: var(--t-55); text-decoration: none; font-size: 0.9rem; padding: 6px 0; transition: color 0.15s, transform 0.25s var(--ease); }
.footer-col a:hover { color: var(--white); transform: translateX(4px); }
.soon { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-35); margin-left: 8px; }

/* The wordmark sits on the baseline of the page, so the brand is the last thing
   you see without shouting a slogan. */
.foot-word {
  padding: 0 32px;
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
}
.foot-word svg {
  /* Scaling the artwork to the container means it can never clip, which the
     previous type-based version had to be hand-measured to avoid. */
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  user-select: none;
}
/* Independence notice. Sits above the legal line rather than inside it, so it
   reads as a statement rather than fine print. Inline padding comes from .shell,
   which narrows on mobile, so only the gap below is set here.
   Both of these are qualified with .shell because the mobile block re-declares
   .shell { padding: 0 22px } as a shorthand later in the file; at equal
   specificity that shorthand would zero the vertical padding set here. */
.shell.footer-note { padding-bottom: 18px; }
.footer-note p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--t-35);
}

.shell.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  padding-bottom: 28px;
  color: var(--t-35);
  font-size: 0.8rem;
}

/* ================= MOTION ================= */
.load { opacity: 0; transform: translateY(18px); animation: riseIn 0.9s var(--ease) forwards; }
.l1 { animation-delay: 0.05s; } .l2 { animation-delay: 0.14s; } .l3 { animation-delay: 0.24s; }
.l4 { animation-delay: 0.34s; } .l5 { animation-delay: 0.46s; } .l6 { animation-delay: 0.58s; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

.rise { opacity: 0; transform: translateY(24px); }
.rise.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
@supports (animation-timeline: view()) {
  .rise { opacity: 1; transform: none; animation: enter linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
  @keyframes enter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  .bento .cell:nth-child(2) { animation-range: entry 2% cover 26%; }
  .bento .cell:nth-child(3) { animation-range: entry 4% cover 28%; }
  .bento .cell:nth-child(4) { animation-range: entry 6% cover 30%; }
  .bento .cell:nth-child(5) { animation-range: entry 8% cover 32%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .load, .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
  .rig, .plate-top, .plate-midL, .plate-midR, .plate-body, .ring-a, .ring-b, .pulse,
  .cta-mark, .nav-progress, .grain, .grad, .flow-dot, .sig-lines span, .env-seal,
  .blocks .hot, .beam::before { animation: none !important; }
  .product-inner { animation: none !important; transform: none !important; }
  .field, .grain { display: none; }
  .story-sticky { position: static; }
  .story-steps { gap: 48px; padding: 40px 0; }
  .step { opacity: 1; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-stage { order: -1; }
  .stage { width: min(280px, 68vw); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell-hero, .cell-record, .cell-wide, .bento-stamps .cell-stamp, .bento-stamps .cell-rule { grid-column: span 2; grid-row: auto; }
  .safe-row { grid-template-columns: 1fr; gap: 20px; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-sticky { position: static; }
  .story-steps { gap: 56px; padding: 40px 0 0; }
  .step { opacity: 1; }
  .faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .figures { grid-template-columns: 1fr 1fr; gap: 28px; }
  .product-body { grid-template-columns: 170px 1fr; }
  .p-read { display: none; }
}
@media (max-width: 720px) {
  .shell { padding: 0 22px; }
  .nav-links {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--black); border-bottom: 1px solid var(--line);
    padding: 8px 22px 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-burger { display: flex; }
  .hero { padding-top: 64px; }
  .section, .story { padding: 84px 0; }
  .claim { flex-direction: column; }
  .bento { grid-template-columns: 1fr; }
  .cell-hero, .cell-record, .cell-wide, .cell-price,
  .bento-stamps .cell-stamp, .bento-stamps .cell-rule { grid-column: span 1; }
  .figures { grid-template-columns: 1fr; }
  .product-body { grid-template-columns: 1fr; }
  .p-side { display: none; }
  .product-inner { transform: none !important; }
}

@media (max-width: 1040px) {
  .cta-grid { grid-template-columns: 1fr; gap: 56px; }
  .cta-stamp { order: -1; }
  .postmark { right: 8%; }
}
@media (max-width: 720px) {
  .cta { padding: 88px 0 96px; }
  .postmark { width: 84px; height: 84px; right: 2%; }
  .foot-word { padding: 0 22px; }
  .sec-word { gap: 12px; }
}