/* ═══════════════════════════════════════════════════════════════════════
   FILE / ROOT:  assets/css/blocks.css  (mYa Solutions website)
   DESCRIPTION:  The block library in the "Windows" language. A page is a
                 stack of these: it opens on one window (.window-hero), tells
                 one story in short sections (.band), and ends on the
                 unfinished window (drawn by site.js). Class names match
                 _template.html, which shows the markup for every block.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Opening window (B02) ───────────────────────────────────────────── */
.window-hero { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.window { padding: var(--frame-pad); background: var(--frame); border-radius: var(--radius-window); box-shadow: 0 50px 100px -50px var(--shadow), 0 0 0 1px var(--line); }
.window-pane {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(34rem, 82vh, 54rem); border-radius: var(--radius-pane); overflow: hidden; background: var(--interior);
  animation: window-open 2.4s cubic-bezier(.2,.7,.1,1) both;
}
.window-pane--short { min-height: clamp(28rem, 66vh, 42rem); }
.window-scene { position: absolute; inset: -6% 0; transform: translateY(calc(var(--py) * 1px)); will-change: transform; }
.window-scene img, .window-scene video { width: 100%; height: 100%; object-fit: cover; }
.window-scene.painted { background: radial-gradient(ellipse 55% 60% at 50% 110%, oklch(80% 0.12 192 / 0.5), transparent 70%), linear-gradient(to bottom, var(--night-1), var(--night-2)); }
.window-pane::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 68% 35%, var(--glow), transparent 70%); mix-blend-mode: screen; }
.window-pane::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.08), inset 0 40px 80px -30px oklch(12% 0.03 240 / 0.5); border-radius: inherit; }
.window-shade { position: absolute; inset: auto 0 0 0; height: 78%; z-index: 1; pointer-events: none; background: linear-gradient(to top, oklch(14% 0.03 240 / 0.92), oklch(14% 0.03 240 / 0.55) 45%, transparent); }
/* Copy sits in the flow at the foot of the pane, so a long headline grows the window instead of being cut off */
.window-copy { position: relative; z-index: 2; padding: clamp(4.5rem, 9vw, 7rem) clamp(1.25rem, 4vw, 4rem) clamp(1.5rem, 5vw, 4rem); color: var(--on-window); }
.window-copy .eyebrow { color: var(--on-window-accent); margin-bottom: 1rem; animation: fade-in 1.4s ease 0.6s both; }
.window-copy .display { color: var(--on-window); margin: 0; max-width: 16ch; animation: title-in 3s cubic-bezier(.2,.7,.1,1) 0.6s both; }
.window-copy .display .em, .window-copy .display em { color: inherit; }
.window-copy .jean-mount { margin-top: clamp(1.5rem, 3vw, 2.75rem); animation: fade-in 1.4s ease 1.8s both; }
.window-copy .hero-logo { width: 4.5rem; height: auto; border-radius: 0.875rem; margin-bottom: 1.25rem; animation: fade-in 1.4s ease 0.4s both; }
.window-hero--interior .display { font-size: clamp(2.5rem, 5.6vw, 5rem); max-width: 18ch; }
@keyframes window-open { from { opacity: 0; transform: scale(1.05); filter: blur(10px) brightness(0.5); } to { opacity: 1; transform: none; filter: none; } }
@keyframes title-in { from { opacity: 0; letter-spacing: 0.05em; } to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 720px) {
  .window-pane { min-height: clamp(32rem, 86vh, 44rem); }
  .window-pane--short { min-height: clamp(28rem, 76vh, 38rem); }
  .window-copy .display { font-size: clamp(2.375rem, 10vw, 3.25rem); }
}

/* Intro under an interior window: the lede, then the page's actions */
.intro { max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem 4rem; align-items: start; }
.intro .lede { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); max-width: 40rem; }
.intro .actions { justify-content: flex-end; }
.intro .aside { grid-column: 1 / -1; }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; } .intro .actions { justify-content: flex-start; } }

/* ── Section shell (B04) ────────────────────────────────────────────── */
.band { padding: var(--band-pad) var(--gutter); }
.band--mid { background: var(--bg-2); }
.band--rule > .wrap, .band--rule > .wrap--narrow { border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 4.5rem); }
.band--flush-top { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }
.wrap { max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto; }
.wrap--narrow { max-width: 54rem; margin: 0 auto; }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.stem { display: none; }

/* Night bands: a dark window set into the page — for evidence, numbers and code */
.band--steel, .band--ink {
  --frame-w: var(--frame-pad);
  position: relative; color: var(--on-window);
  width: calc(100% - 2 * var(--gutter) - 2 * var(--frame-w)); max-width: calc(var(--max) - 2 * var(--gutter) - 2 * var(--frame-w));
  margin: clamp(2rem, 5vw, 4rem) auto; padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.5rem, 5vw, 5rem);
  border-radius: var(--radius-pane);
  background: radial-gradient(ellipse 55% 50% at 50% 115%, oklch(80% 0.12 192 / 0.32), transparent 70%), linear-gradient(to bottom, var(--night-1), var(--night-2));
  box-shadow: 0 0 0 var(--frame-w) var(--frame), 0 0 0 calc(var(--frame-w) + 1px) var(--line), 0 50px 100px -50px var(--shadow);
}
.band--steel .wrap, .band--ink .wrap { max-width: none; }
.band--steel .eyebrow, .band--ink .eyebrow { color: var(--on-window-accent); }
.band--steel .lede, .band--steel .body, .band--ink .lede, .band--ink .body { color: var(--on-window-soft); }
.band--steel .fine, .band--ink .fine { color: oklch(86% 0.02 200); }
.band--steel a:not(.btn), .band--ink a:not(.btn) { color: var(--on-window-accent); }
.band--steel a:not(.btn):hover, .band--ink a:not(.btn):hover { color: var(--on-window); }
.band--steel .em, .band--ink .em, .band--steel .title .em { color: var(--on-window-accent); }
.band--steel .btn--line, .band--ink .btn--line { border-color: oklch(97% 0.01 90 / 0.4); color: var(--on-window); }
.band--steel .btn--line:hover, .band--ink .btn--line:hover { background: oklch(97% 0.01 90 / 0.1); }
.band--steel .link-arrow, .band--ink .link-arrow { color: var(--on-window-accent); }
.band--steel .blueprint, .band--ink .blueprint { background: oklch(98% 0.008 85 / 0.06); box-shadow: inset 0 0 0 1px oklch(98% 0.008 85 / 0.16); }
.band--steel .card p, .band--ink .card p { color: var(--on-window-soft); }
.band--steel .card-kicker, .band--steel .card-num { color: var(--on-window-accent); }
.band--steel .verdict { color: var(--on-window-accent); }
.band--steel .tag { border-color: oklch(97% 0.01 90 / 0.4); color: var(--on-window-soft); }

/* ── Plates (photographs in their own frames) ───────────────────────── */
.plate-wrap { max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter) 0; }
.plate { height: clamp(18rem, 39vw, 34rem); }
.plate--short { height: clamp(14rem, 29vw, 26rem); }
.plate-cap { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.875rem; }
.plate-cap a { color: inherit; text-decoration: none; }
.plate-cap a:hover { color: var(--accent); }
@media (max-width: 720px) { .plate-cap span + span { display: none; } }
.statement-band { padding: clamp(5rem, 12vw, 9rem) var(--gutter) clamp(3rem, 7vw, 5rem); text-align: center; }

/* ── Story windows (the "three windows" grid) ───────────────────────── */
.windows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.story { scroll-margin-top: 6rem; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.1,1); }
.story > a { display: block; color: inherit; text-decoration: none; }
.story .plate { height: auto; aspect-ratio: 4 / 5; }
.story .story-label { margin: 1.25rem 0 0; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.story h3 { margin: 0.5rem 0 0; font-size: 1.75rem; line-height: 1.2; }
.story p { margin: 0.625rem 0 0; color: var(--ink-soft); font-size: 1rem; }
.story .story-more { margin: 0.75rem 0 0; font-weight: 500; color: var(--accent); }
.story > a:hover h3 { color: var(--accent); }
.story > a:hover .plate { box-shadow: 0 0 0 1px var(--line), 0 40px 70px -30px var(--shadow); }
.list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }
.list-head h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); }

/* ── Doors (numbered procession) ────────────────────────────────────── */
.doors { border-top: 1px solid var(--line); }
.door { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 18rem; gap: 2.5rem; align-items: start; padding: 2.75rem 0; border-bottom: 1px solid var(--line); }
.door-num { font-family: var(--serif); font-style: italic; font-size: 1.75rem; color: var(--accent); line-height: 1; }
.door-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; margin-bottom: 0.75rem; }
.door-kicker { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.door-state { font-size: 0.8125rem; color: var(--ink-soft); }
.door h3 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); max-width: 26ch; margin: 0 0 0.75rem; }
.door h3 a { color: inherit; text-decoration: none; }
.door h3 a:hover { color: var(--accent); }
.door p { color: var(--ink-soft); max-width: 40rem; margin: 0 0 1rem; }
.door .plate { height: 12.5rem; }
.door-foot .door-state { display: none; }
@media (max-width: 1000px) { .door { grid-template-columns: 3.5rem minmax(0, 1fr) 13rem; gap: 1.5rem; } }
@media (max-width: 720px) {
  .door { grid-template-columns: auto minmax(0, 1fr); gap: 0 0.75rem; padding: 2rem 0; }
  .door-body { display: contents; }
  .door > *, .door-body > * { grid-column: 1 / -1; }
  .door-num { grid-column: 1; order: 1; font-size: 1.25rem; align-self: baseline; }
  .door-meta { grid-column: 2; order: 2; align-self: baseline; }
  .door-meta .door-state { display: none; }
  .door h3 { order: 3; }
  .door p { order: 4; }
  .door .plate { order: 5; height: 11rem; margin-bottom: 1rem; }
  .door-foot { order: 6; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
  .door-foot .door-state { display: inline; }
}
.door-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
.card { padding: clamp(1.5rem, 2.4vw, 2rem); display: flex; flex-direction: column; }
.card-kicker { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin: 0 0 0.75rem; }
.card-num { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--accent); margin-bottom: 0.875rem; }
.card h3 { font-size: 1.625rem; line-height: 1.2; margin: 0 0 0.625rem; }
.card p { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.card .card-foot { margin-top: auto; padding-top: 1.25rem; }
.card .fine { margin-top: 0.75rem; }
.card .title-sm { font-size: clamp(1.5rem, 2.2vw, 1.875rem); color: inherit; }
.tag { display: inline-block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: 999px; border: 1px solid var(--line); color: var(--accent); }
a.card.card-link { color: inherit; text-decoration: none; transition: box-shadow 0.3s, transform 0.3s; }
a.card.card-link:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 40px 70px -30px var(--shadow); }

/* ── Stats (B05) ────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); text-align: left; }
.stat { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.stat-n { font-family: var(--serif); font-weight: 300; font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; }
.stat-l { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); margin-top: 0.625rem; }
.band--steel .stat { border-top-color: oklch(97% 0.01 90 / 0.24); }
.band--steel .stat-l { color: var(--on-window-soft); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card .stats { gap: 1rem; }
@media (max-width: 900px) { .card .stats { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }

.verdict { margin-top: 2.5rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 2vw, 1.75rem); text-align: center; color: var(--accent); }

/* ── Compare pair (B07) + ticks ─────────────────────────────────────── */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); }
.compare .price { font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; margin: 0.5rem 0 0.25rem; }
.compare .card--us { box-shadow: 0 0 0 2px var(--sea), 0 30px 60px -30px var(--shadow); }
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
.ticks { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.ticks li { position: relative; padding: 0.625rem 0 0.625rem 1.75rem; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.5; }
.ticks li::before { position: absolute; left: 0.125rem; top: 0.625rem; font-weight: 600; }
.ticks--yes li::before { content: "✓"; color: var(--accent); }
.ticks--no li::before { content: "✕"; color: var(--ink-soft); }
.band--steel .ticks li { border-top-color: oklch(97% 0.01 90 / 0.16); }
.band--steel .ticks--yes li::before { color: var(--on-window-accent); }

/* ── Banner statistic (B08) ─────────────────────────────────────────── */
.banner-stat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.banner-stat .big { font-family: var(--serif); font-weight: 300; font-size: clamp(4.5rem, 10vw, 9rem); line-height: 0.9; letter-spacing: -0.03em; }
.banner-stat .unit { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-top: 1rem; }
.band--steel .banner-stat .unit { color: var(--on-window-accent); }
@media (max-width: 900px) { .banner-stat { grid-template-columns: 1fr; } }

/* ── Terminal (B09) ─────────────────────────────────────────────────── */
.terminal { background: oklch(17% 0.03 240); color: oklch(92% 0.02 200); padding: 1.5rem 1.625rem; overflow-x: auto; border-radius: 0.875rem; font: 0.875rem/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; box-shadow: inset 0 0 0 1px oklch(98% 0.008 85 / 0.12); }
.terminal .prompt { color: var(--on-window-accent); user-select: none; }
.terminal .ok { color: oklch(85% 0.1 150); }
.terminal .dim { color: oklch(65% 0.03 220); }

/* ── Film frame (B11) ───────────────────────────────────────────────── */
.frame-16x9 { position: relative; aspect-ratio: 16 / 9; }
.frame-16x9 iframe, .frame-16x9 video { position: absolute; inset: 0.5rem; width: calc(100% - 1rem); height: calc(100% - 1rem); border: 0; border-radius: 0.75rem; }
.frame-placeholder { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 1.5rem; color: var(--on-window); }
.play-glyph { width: 4.5rem; height: 4.5rem; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; }
.play-glyph::after { content: ""; border-left: 1.125rem solid currentColor; border-top: 0.6875rem solid transparent; border-bottom: 0.6875rem solid transparent; margin-left: 0.3rem; }

/* ── Two doors (B12) & bridge (B13) ─────────────────────────────────── */
.two-door { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); text-align: left; }
.two-door .card { padding: clamp(1.75rem, 3vw, 2.5rem); }
.two-door .btn { margin-top: 1.5rem; align-self: flex-start; }
@media (max-width: 720px) { .two-door { grid-template-columns: 1fr; } .two-door .btn { align-self: stretch; } }
.bridge { max-width: calc(var(--max) - 2 * var(--gutter)); margin: clamp(2rem, 4vw, 3rem) auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.25rem 1.25rem 1.75rem; border-radius: 1.75rem; background: var(--bg-2); }
.bridge p { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.35; margin: 0; }
@media (max-width: 1000px) { .bridge { margin-left: var(--gutter); margin-right: var(--gutter); } }
@media (max-width: 720px) { .bridge { flex-direction: column; align-items: stretch; text-align: left; border-radius: 1.25rem; } }

/* ── Promise list (B14) ─────────────────────────────────────────────── */
.promises { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.promises li { counter-increment: p; display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.25rem; padding: 1.75rem 0; border-top: 1px solid var(--line); }
.promises li::before { content: counter(p, decimal-leading-zero); font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--accent); line-height: 1.2; }
.promises h3 { font-size: 1.625rem; margin: 0 0 0.375rem; }
.promises p { color: var(--ink-soft); max-width: 40rem; }
.band--steel .promises li { border-top-color: oklch(97% 0.01 90 / 0.16); }
.band--steel .promises li::before { color: var(--on-window-accent); }
.band--steel .promises p { color: var(--on-window-soft); }
@media (max-width: 720px) { .promises li { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.75rem; } }

/* ── Bio (B16) + voice ──────────────────────────────────────────────── */
.bio { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.bio .plate { height: auto; aspect-ratio: 4 / 5; }
.bio .role { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0.5rem 0 1.5rem; }
.pull { font-family: var(--serif); font-weight: 300; font-size: clamp(1.625rem, 2.8vw, 2.375rem); line-height: 1.28; letter-spacing: -0.01em; margin: 2rem 0; max-width: 32ch; text-indent: -0.4em; }
.band--steel .pull { color: var(--on-window); }
@media (max-width: 900px) { .bio { grid-template-columns: 1fr; } .bio .plate { max-width: 22rem; } }
.voice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: center; }
.voice .plate { height: auto; aspect-ratio: 1 / 1; max-width: 30rem; }
.voice blockquote { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.75rem); line-height: 1.25; letter-spacing: -0.01em; text-indent: -0.4em; }
.voice figcaption { margin-top: 1.5rem; font-size: 1.0625rem; color: var(--ink-soft); }

/* ── Tables (B17) ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.table caption { text-align: left; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent); padding-bottom: 0.875rem; caption-side: top; }
.table th { text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); padding: 0.75rem 0.875rem; border-bottom: 1px solid color-mix(in oklch, var(--ink) 40%, transparent); white-space: nowrap; }
.table td { padding: 0.875rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table td.n, .table th.n { text-align: right; white-space: nowrap; }
.table tr.is-hero td { background: color-mix(in oklch, var(--sea) 18%, transparent); font-weight: 600; }
.band--steel .table th { color: var(--on-window-soft); border-bottom-color: oklch(97% 0.01 90 / 0.4); }
.band--steel .table td { border-bottom-color: oklch(97% 0.01 90 / 0.14); }
.band--steel .table tr.is-hero td { background: oklch(80% 0.12 192 / 0.14); }
.band--steel .table caption { color: var(--on-window-accent); }

/* ── Auth (B18) & forms ─────────────────────────────────────────────── */
.auth { max-width: 32rem; margin: 0 auto; padding: clamp(2rem, 4vw, 2.75rem); }
.auth .divider { display: flex; align-items: center; gap: 0.875rem; margin: 1.75rem 0 1.125rem; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.auth .divider::before, .auth .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.field { margin-bottom: 0.875rem; text-align: left; }
.field label { display: block; font-size: 0.9375rem; color: var(--ink-soft); margin-bottom: 0.375rem; }
.input { width: 100%; min-height: 3rem; padding: 0 1.125rem; font: inherit; font-size: 1.0625rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.input:hover { border-color: color-mix(in oklch, var(--ink) 35%, transparent); }
.input:focus-visible { border-color: var(--accent); outline-offset: 0; }
.msg { font-size: 0.9375rem; margin-top: 0.625rem; min-height: 1.4em; }
.msg.ok { color: oklch(45% 0.1 160); } .msg.err { color: oklch(48% 0.15 30); }

/* ── Split ──────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--text-wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.split .plate { height: clamp(16rem, 30vw, 28rem); }
@media (max-width: 900px) { .split, .split--text-wide { grid-template-columns: 1fr; } }

/* ── Facts, documents, launch, pricing ──────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.facts > div { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.facts .stat-l { max-width: 28ch; }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr; } }
.doc-card { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; }
.doc-card .doc-main { padding: clamp(1.75rem, 3.5vw, 2.75rem); }
.doc-card .doc-side { border-left: 1px solid var(--line); padding: clamp(1.75rem, 3.5vw, 2.75rem) 1.75rem; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; font-size: 1rem; margin: 1.5rem 0 0; }
.doc-meta dt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: 0.25rem; }
.doc-meta dd { margin: 0; }
@media (max-width: 900px) { .doc-card { grid-template-columns: 1fr; } .doc-card .doc-side { border-left: 0; border-top: 1px solid var(--line); } }
.launch { text-align: center; }
.launch-cd { font-family: var(--serif); font-weight: 300; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.launch-units { font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.625rem; }
.seats { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 1rem; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); text-align: left; }
.plan { padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; }
.plan .price { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 4.6vw, 4.25rem); line-height: 1; margin: 0.5rem 0 0.25rem; }
.plan .per { font-size: 0.9375rem; color: var(--ink-soft); }
.plan .btn { margin-top: auto; }
.plan .ticks { margin-bottom: 1.75rem; }
.plan--feature { box-shadow: 0 0 0 2px var(--sea), 0 0 60px 4px var(--halo), 0 30px 60px -30px var(--shadow); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* ── Sibling nav, notes, utilities ──────────────────────────────────── */
.sibling-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1.75rem var(--gutter) 0; max-width: var(--max); margin: 0 auto; }
.sibling-nav a { font-size: 1rem; font-weight: 500; text-decoration: none; }
.note { border-left: 2px solid var(--sea); padding: 0.25rem 0 0.25rem 1.125rem; font-size: 0.9875rem; line-height: 1.65; color: var(--ink-soft); max-width: 46rem; }
.band--steel .note { color: var(--on-window-soft); }
.list { margin: 0; padding-left: 1.25em; max-width: 38rem; color: var(--ink-soft); }
.list li { margin: 0.375rem 0; line-height: 1.6; }
.split > *, .grid > *, .compare > *, .two-door > *, .banner-stat > *, .bio > *, .voice > * { min-width: 0; }
.plate--photo > img { width: 100%; height: 100%; object-fit: cover; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3.5rem; }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 2rem; }
@media (max-width: 720px) { .hide-phone { display: none !important; } }
.plate--photo { padding: 0.5rem; }
.plate--photo > img { border-radius: 0.75rem; }

/* Pause control for window films */
.window-motion { position: absolute; z-index: 3; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; cursor: pointer;
  background: oklch(14% 0.03 240 / 0.45); box-shadow: inset 0 0 0 1px oklch(98% 0.008 85 / 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center; color: var(--on-window); }
.window-motion:hover { background: oklch(14% 0.03 240 / 0.65); }
.window-motion .i-pause { width: 0.75rem; height: 0.875rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.window-motion .i-play { width: 0; height: 0; border-left: 0.75rem solid currentColor; border-top: 0.45rem solid transparent; border-bottom: 0.45rem solid transparent; margin-left: 0.2rem; }