/* ==========================================================================
   Coming-soon page (the preview gate). Its own full document: prints the active theme tokens itself.
   Layout echoes the home hero: copy on the left, the story's finished frame on the right.
   UPDATED (coming-soon design, after Slice 1): replaces the centred passcode card.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--dfm-base); }
body {
  margin: 0; background: var(--dfm-base); color: var(--dfm-ink);
  font-family: var(--dfm-body); font-size: 1.0625rem; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--dfm-accent); color: var(--dfm-surface); }
:focus-visible { outline: 2px solid var(--dfm-accent); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { display: inline-flex; width: 1.35em; height: 1.35em; flex: none; }
.ic svg { width: 100%; height: 100%; }
.ic svg .ia { fill: var(--icon-accent, var(--dfm-accent-line)); stroke: none; }

.cs-page { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); min-height: 100svh; display: flex; flex-direction: column; }

/* brand mark: the plum pipe blinks like a text cursor, then rests */
.cs-top { height: 76px; display: flex; align-items: center; }
.cs-brand {
  display: inline-flex; align-items: baseline; gap: .35em; white-space: nowrap;
  font-family: var(--dfm-display); font-weight: 560; font-size: 1.32rem; letter-spacing: -0.01em; font-variation-settings: "SOFT" 100;
}
.cs-brand .pipe { color: var(--dfm-accent); font-weight: 700; transform: translateY(-0.02em); animation: cs-blink 1.05s steps(1, end) .6s 4 both; }
@keyframes cs-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.cs-grid {
  flex: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px);
  align-items: center; padding-block: clamp(24px, 5vw, 64px);
}
.cs-grid--single { grid-template-columns: minmax(0, 640px); justify-content: center; }
.cs-copy { max-width: 540px; }

.cs-eyebrow { margin: 0 0 1rem; font-size: .92rem; font-weight: 600; color: var(--dfm-accent); animation: cs-fade .45s ease both; }
.cs-copy h1 {
  margin: 0 0 .42em; font-family: var(--dfm-display); font-weight: 380; line-height: 1; letter-spacing: -0.025em;
  font-size: clamp(2.7rem, 1.2rem + 3.6vw, 4.5rem); font-variation-settings: "SOFT" 100, "WONK" 0; text-wrap: balance;
}
.cs-copy h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.cs-copy h1 .line > span { display: inline-block; animation: cs-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.cs-copy h1 .line:nth-child(2) > span { animation-delay: .12s; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
@keyframes cs-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
.cs-lede { margin: 0 0 1.8rem; font-size: 1.25rem; line-height: 1.55; color: var(--dfm-ink-soft); max-width: 31em; text-wrap: pretty; animation: cs-fade .45s ease .1s both; }

/* the contact card */
.cs-card {
  margin: 0; padding: clamp(20px, 3vw, 28px); border-radius: 22px; background: var(--dfm-surface);
  border: 1px solid var(--dfm-line-soft);
  box-shadow: 0 1px 0 rgb(var(--dfm-shadow-rgb) / .04), 0 18px 40px -24px rgb(var(--dfm-shadow-rgb) / .28);
}
.cs-card h2 { margin: 0 0 .25em; font-family: var(--dfm-display); font-weight: 380; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.01em; font-variation-settings: "SOFT" 100; }
.cs-note { margin: 0 0 18px; color: var(--dfm-muted); font-size: .98rem; }
.cs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-field { display: grid; gap: 6px; margin-bottom: 12px; }
.cs-field label { font-weight: 600; font-size: .92rem; }
.cs-field label small { font-weight: 400; color: var(--dfm-muted); }
.cs-field input, .cs-field textarea, .cs-pass input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--dfm-ink); background: var(--dfm-field);
  border: 1.5px solid var(--dfm-control); border-radius: 14px; padding: .75em 1em; transition: border-color .2s, box-shadow .2s;
}
.cs-field textarea { min-height: 104px; resize: vertical; }
.cs-field input:focus, .cs-field textarea:focus, .cs-pass input:focus {
  outline: 2px solid transparent; outline-offset: 2px; border-color: var(--dfm-accent); box-shadow: 0 0 0 4px rgb(var(--dfm-accent-rgb) / .12);
}
.cs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.cs-btn, .cs-pass button {
  display: inline-flex; align-items: center; gap: .6em; cursor: pointer; line-height: 1;
  padding: .95em 1.5em; border-radius: 999px; border: 1px solid var(--dfm-accent);
  background: var(--dfm-accent); color: var(--dfm-on-accent); font-weight: 600; font-size: 1rem;
  transition: background .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.cs-btn:hover, .cs-pass button:hover { background: var(--dfm-accent-deep); border-color: var(--dfm-accent-deep); }
.cs-btn:active, .cs-pass button:active { transform: translateY(1px); }
.cs-btn .ic { --icon-accent: rgb(255 255 255 / .18); }
/* the envelope opens on hover, as on the site */
.env-letter { opacity: 0; }
.cs-btn .env-flap { transform-origin: 12px 7px; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.cs-btn .env-letter { transform: translateY(2px); opacity: 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1) .05s, opacity .25s; }
.cs-btn:hover .env-flap, .cs-btn:focus-visible .env-flap { transform: scaleY(-1) translateY(1px); }
.cs-btn:hover .env-letter, .cs-btn:focus-visible .env-letter { transform: translateY(-4.5px); opacity: 1; }
.cs-btn .env-letter path:first-child { fill: var(--dfm-accent); }
.cs-fine { font-size: .82rem; color: var(--dfm-muted); }
.cs-error { margin: 0 0 14px; color: var(--dfm-error); font-size: .9rem; font-weight: 600; }

/* thank-you: a drawn check, as on the site's form */
.cs-done { text-align: center; display: grid; justify-items: center; gap: 8px; padding-block: 32px; }
.cs-done:focus { outline: none; }
.cs-check { width: 76px; height: 76px; margin-bottom: 6px; }
.cs-check circle { fill: var(--dfm-accent-soft); }
.cs-check path { fill: none; stroke: var(--dfm-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: cs-draw .8s cubic-bezier(.2, .8, .2, 1) .2s forwards; }
@keyframes cs-draw { to { stroke-dashoffset: 0; } }
.cs-done p { margin: 0; color: var(--dfm-muted); max-width: 26em; }

.cs-mail { display: flex; align-items: center; gap: .55em; margin: 18px 0 0; font-size: .95rem; color: var(--dfm-muted); }
.cs-mail .ic { color: var(--dfm-accent); --icon-accent: var(--dfm-accent-soft); }
.cs-mail a { color: var(--dfm-accent); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; }

/* the preview passcode, kept quiet */
.cs-preview { margin-top: 14px; font-size: .92rem; color: var(--dfm-muted); }
.cs-preview summary { cursor: pointer; display: inline-block; padding: 4px 0; text-decoration: underline; text-decoration-color: var(--dfm-accent-line); text-underline-offset: 3px; }
.cs-preview summary:hover { color: var(--dfm-accent); }
.cs-preview form { margin-top: 10px; }
.cs-pass { display: flex; gap: 10px; max-width: 420px; }
.cs-pass input { border-radius: 999px; padding: .7em 1.1em; }
.cs-pass button { padding: .8em 1.4em; font-size: .94rem; white-space: nowrap; flex: none; } /* UPDATED: the button text never wraps */
.cs-remember { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .88rem; }
.cs-remember input { accent-color: var(--dfm-accent); width: 16px; height: 16px; }
.cs-preview .cs-error { margin: 10px 0 0; }

/* ---------- the stage: the 3D browser animation, over its own finished frame in HTML ----------
   UPDATED (coming-soon animation). The HTML frame (.cs-browser) is the default: it is what no-JS, reduced
   motion, no WebGL or a slow device see. When the animation can run, <html> gets .cs-anim in <head>, the
   frame stays quiet until the canvas is ready (.is-live), and a failure brings it back (.is-still). */
.cs-visual { min-width: 0; }
.cs-stage { position: relative; margin: 0; min-width: 0; aspect-ratio: 1.34; width: 100%; container-type: inline-size; }
.cs-canvas, .cs-browser { position: absolute; inset: 0; }
.cs-canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.cs-canvas { opacity: 0; transition: opacity .7s ease; }
.cs-stage.is-live .cs-canvas { opacity: 1; }
.cs-stage.is-still .cs-canvas { display: none; }
.cs-browser { transition: opacity .6s ease; }
.cs-anim .cs-browser { opacity: 0; }
.cs-stage.is-still .cs-browser { opacity: 1; }
.cs-stage.is-live .cs-browser { opacity: 0; visibility: hidden; }

/* the finished frame, drawn with the theme tokens; every size scales with the stage (cqi) */
.cs-browser {
  inset: 6% 13% 8% 6%; border-radius: 3cqi; background: var(--dfm-surface); border: 1px solid var(--dfm-line); overflow: hidden;
  box-shadow: 0 1px 0 rgb(var(--dfm-shadow-rgb) / .04), 0 4cqi 8cqi -4cqi rgb(var(--dfm-shadow-rgb) / .32);
  display: flex; flex-direction: column;
}
.csb-bar { flex: none; height: 9.5cqi; display: flex; align-items: center; gap: 1.6cqi; padding-inline: 2.6cqi; background: var(--dfm-frame); border-bottom: 1px solid var(--dfm-line); }
.csb-bar i { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: var(--dfm-line); }
.csb-refresh { width: 4cqi; height: 4cqi; margin-left: 1.4cqi; fill: none; stroke: var(--dfm-muted); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.csb-url { flex: 1; height: 6cqi; border-radius: 3cqi; background: var(--dfm-surface); display: flex; align-items: center; gap: 1.2cqi; padding-inline: 2cqi; font-size: 2.8cqi; font-weight: 500; color: var(--dfm-ink); } /* UPDATED: larger, clearer address */
.csb-lock { width: 2.6cqi; height: 2.6cqi; fill: none; stroke: var(--dfm-muted); stroke-width: 2; }
.csb-lock rect { fill: var(--dfm-muted); stroke: none; }
.csb-page { flex: 1; position: relative; padding: 0 7.5cqi; display: flex; flex-direction: column; }
.csb-head { display: flex; align-items: center; justify-content: space-between; height: 9cqi; border-bottom: 1px solid var(--dfm-line); }
.csb-brand { font-family: var(--dfm-display); font-weight: 560; font-size: 2.9cqi; font-variation-settings: "SOFT" 100; }
.csb-brand b { color: var(--dfm-accent); margin-right: .35em; }
.csb-nav { display: flex; align-items: center; gap: 2cqi; }
.csb-nav i { width: 4cqi; height: .55cqi; border-radius: 1cqi; background: var(--dfm-line); }
.csb-nav em { width: 7cqi; height: 2.1cqi; border-radius: 2cqi; background: var(--dfm-accent); }
.csb-title { margin: 6cqi 0 0; font-family: var(--dfm-display); font-weight: 400; font-size: 13.4cqi; line-height: 1.04; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "WONK" 0; }
.csb-title span { display: block; }
.csb-title span + span { font-style: italic; color: var(--dfm-accent); font-variation-settings: "SOFT" 100, "WONK" 1; }
.csb-caret { display: inline-block; width: .32cqi; min-width: 2px; height: .62em; margin-left: .12em; vertical-align: -.02em; background: var(--dfm-accent); animation: cs-blink 1.05s steps(1, end) infinite; }
.csb-flourish { width: 30cqi; height: 3.2cqi; margin-top: .4cqi; overflow: visible; fill: none; stroke: var(--dfm-accent-line); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.csb-sub { margin: auto 0 5cqi; font-family: var(--dfm-display); font-style: italic; font-size: 3.4cqi; color: var(--dfm-muted); }

/* the pause / play control (the animation loops, so it must be pausable: WCAG 2.2.2) */
.cs-stagebar { display: flex; justify-content: flex-end; margin-top: -4px; padding-right: 13%; }
.cs-toggle {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--dfm-line); background: var(--dfm-surface); color: var(--dfm-accent);
  display: grid; place-items: center; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.cs-toggle:hover { border-color: var(--dfm-accent); background: var(--dfm-accent-soft); }
.cs-toggle .ic { width: 18px; height: 18px; }
.cs-toggle[hidden] { display: none; }

.cs-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 22px 28px; border-top: 1px solid rgb(var(--dfm-accent-rgb) / .16); font-size: .88rem; color: var(--dfm-muted); }

@media (max-width: 960px) {
  .cs-grid { grid-template-columns: 1fr; align-items: start; }
  .cs-copy { max-width: 640px; }
  .cs-stage, .cs-stagebar { max-width: 680px; }
  .cs-stage { aspect-ratio: 1.42; }
}
@media (max-width: 520px) {
  /* UPDATED (Devon review): on phones the animation sits higher and its pause button rests on the stage's
     corner, so the whole thing (button included) is on screen when the page loads */
  .cs-top { height: 60px; }
  .cs-grid { gap: 14px; padding-block: 6px 20px; align-content: start; }
  .cs-copy h1 { margin-bottom: .3em; }
  .cs-lede { margin-bottom: .8em; }
  .cs-stage { aspect-ratio: 1.34; }
  .cs-visual { margin-top: 14px; } /* UPDATED (Devon, phone check 10:44): the browser touched the passcode link; give it clear air (the scene already sits higher in its frame) */
  .cs-stagebar { position: relative; z-index: 2; margin-top: -28px; padding-right: 1%; }
  .cs-row { grid-template-columns: 1fr; gap: 0; }
  .cs-pass { flex-direction: column; }
  .cs-pass button { justify-content: center; }
  .cs-copy h1 { font-size: clamp(2.4rem, 10.4vw, 3.2rem); }
  .cs-browser { inset: 4% 3% 6% 3%; }
  .cs-lede { font-size: 1.06rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cs-brand .pipe { animation: none; }
  .cs-check path { stroke-dashoffset: 0; }
  .csb-caret { animation: none; }
}