/*
 * Yulius landing page. The brand is Roma — smoke and chalk — from the app's design tokens
 * (yulius-v2: crates/yulius-server/web/assets/tokens.css): a matte smoky black with one lighter
 * intermediate dark, chalk white, no accent hue (chalk is the accent), a fine grain and a soft
 * light from above. Tenor Sans for titles and the wordmark, Instrument Sans for text.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;
  /* smoke */
  --bg: #100f0e;
  --surface: #191918;
  --surface-2: #201f1e;
  --line: #2c2b2a;
  --line-strong: #3f3e3d;
  --line-control: #7e7b76;
  /* chalk inks on smoke */
  --text: #efebe1;
  --text-2: #d1cdc5;
  --muted: #afaca5;
  --accent: #e9e4da;
  --accent-hover: #f6f3ec;
  --accent-ink: #100f0e;
  /* chalk band: smoke inks on chalk */
  --chalk: #efebe1;
  --chalk-line: #c1bdb5;
  --ink: #171412;
  --ink-2: #373532;
  --ink-muted: #565350;
  /* states and depths used by the drawing */
  --ok: #6fb789;
  --danger: #df6a59;
  --danger-fg: #f79b8c;
  --niche: #0e0d0c;

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Tenor Sans", "Instrument Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* type: a 1.25 scale on a 17 px body */
  --fs-sm: 0.875rem;  /* 14 */
  --fs: 1.0625rem;    /* 17 */
  --fs-md: 1.25rem;   /* 20 */
  --fs-lg: 1.75rem;   /* 28 */
  --fs-xl: 2.5rem;    /* 40 */
  --fs-2xl: 4rem;     /* 64 */

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px;

  --radius: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --page: 1200px;
  --gutter: 24px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0.075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --texture-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --light: radial-gradient(120% 60% at 50% -12%, rgba(240, 235, 225, 0.075), rgba(240, 235, 225, 0.02) 45%, transparent 70%);
}

/* ------------------------------------------------------------------ fonts (self-hosted, SIL OFL 1.1) */
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin-ext-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin-ext-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin-ext-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Tenor Sans"; src: url("/assets/fonts/tenor-sans-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Tenor Sans"; src: url("/assets/fonts/tenor-sans-latin-ext-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: var(--light), var(--texture);
  background-repeat: no-repeat, repeat;
  background-size: 100% 1200px, 180px 180px;
  color: var(--text);
  font: 400 var(--fs)/1.65 var(--font);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
::selection { background: rgba(233, 228, 218, 0.3); }

h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; }
h2 { font-size: var(--fs-xl); line-height: 1.15; }
h3 { font-size: var(--fs); line-height: 1.4; font-weight: 600; letter-spacing: 0.005em; }
p { text-wrap: pretty; }
code { font-family: var(--font-mono); font-size: 0.9em; color: var(--text); }
.nowrap { white-space: nowrap; }

.skip { position: absolute; left: var(--space-4); top: -100px; padding: var(--space-2) var(--space-4); background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); z-index: 10; }
.skip:focus { top: var(--space-4); }

/* ------------------------------------------------------------------ brand */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; fill: var(--text); flex: none; }
.wordmark { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.32em; font-size: 1.125rem; line-height: 1; margin-right: -0.32em; }

/* ------------------------------------------------------------------ buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-5);
  border-radius: var(--radius-full); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
  font: 500 var(--fs)/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.button:focus-visible { border-radius: var(--radius-full); }
.button-quiet { background: transparent; color: var(--text); border-color: var(--line-control); }
.button-quiet:hover { background: rgba(240, 235, 225, 0.06); border-color: var(--text-2); color: var(--text); }
.button-small { min-height: 40px; padding: 0 var(--space-4); font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ header */
.top {
  display: flex; align-items: center; gap: var(--space-6);
  max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto;
  padding: var(--space-5) var(--gutter);
}
.top .brand { margin-right: auto; }
.top-nav { display: flex; gap: var(--space-6); font-size: var(--fs-sm); }
.top-nav a { color: var(--muted); text-decoration: none; }
.top-nav a:hover { color: var(--text); }

/* ------------------------------------------------------------------ hero */
.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-8) var(--gutter) var(--space-8);
}
.niche {
  position: relative; width: 176px; height: 244px; margin-bottom: var(--space-7);
  border-radius: 88px 88px 12px 12px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(90% 60% at 50% 18%, rgba(240, 235, 225, 0.07), transparent 70%),
    linear-gradient(#1a1918, #121110);
  box-shadow: inset 0 1px 0 rgba(240, 235, 225, 0.06), 0 30px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.niche::before { /* the inner moulding */
  content: ""; position: absolute; inset: 11px; z-index: 2;
  border-radius: 77px 77px 6px 6px;
  border: 1px solid rgba(240, 235, 225, 0.11);
  pointer-events: none;
}
.smoke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.niche-mark {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 96px; height: 96px; transform: translate(-50%, -46%);
  fill: var(--text);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}
.hero h1 {
  font-size: var(--fs-2xl); line-height: 1.05; max-width: 14ch;
}
.lede {
  max-width: 38rem; margin-top: var(--space-5);
  color: var(--text-2); font-size: var(--fs-md); line-height: 1.6;
}
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.hero-note { margin-top: var(--space-4); color: var(--muted); font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ screenshots */
.shot { margin: 0 auto; }
.shot picture { display: block; }
.shot img {
  width: 100%; height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(240, 235, 225, 0.04), 0 40px 90px rgba(0, 0, 0, 0.55);
  background: var(--surface);
}
.shot figcaption { margin-top: var(--space-4); color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.shot-hero { max-width: calc(var(--page) + 2 * var(--gutter)); padding: 0 var(--gutter); }

/* ------------------------------------------------------------------ sections */
.who, .how, .feature, .team, .runs, .faq {
  max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto;
  padding: var(--space-10) var(--gutter) 0;
}

.who { display: grid; grid-template-columns: 1fr 1fr; }
.who-col { padding: 0 var(--space-8); }
.who-col:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.who-col:last-child { padding-right: 0; }
.who h2 { font-size: var(--fs-lg); line-height: 1.25; max-width: 20ch; }
.who p { margin-top: var(--space-4); color: var(--text-2); max-width: 34rem; }

.how h2 { max-width: 16ch; }
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--space-7); row-gap: var(--space-8);
  margin-top: var(--space-8);
}
.steps li { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.numeral { display: block; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1; color: var(--muted); margin-bottom: var(--space-5); letter-spacing: -0.12em; }
.steps p { margin-top: var(--space-2); color: var(--text-2); }

/* The chalk band: smoke inks on chalk, like the brand's lockup on stone. */
.discipline {
  margin-top: var(--space-10);
  background-color: var(--chalk);
  background-image: radial-gradient(120% 70% at 50% -10%, rgba(255, 253, 248, 0.7), transparent 65%), var(--texture-ink);
  background-size: 100% 100%, 180px 180px;
  color: var(--ink);
}
.discipline ::selection { background: rgba(23, 20, 18, 0.18); }
.discipline :focus-visible { box-shadow: 0 0 0 2px var(--chalk), 0 0 0 4px var(--ink); }
.discipline-inner {
  max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto;
  padding: var(--space-9) var(--gutter);
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8);
}
.discipline h2 { max-width: 12em; }
.discipline-intro p { margin-top: var(--space-5); color: var(--ink-2); max-width: 26rem; }
.tablet { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); row-gap: var(--space-6); align-content: start; }
.tablet li { border-top: 1px solid var(--chalk-line); padding-top: var(--space-4); }
.tablet p { margin-top: var(--space-1); color: var(--ink-muted); }

.feature { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.feature-text { max-width: 40rem; }
.feature-text p { margin-top: var(--space-5); color: var(--text-2); }
.feature .shot { width: 100%; }

.feature-phone { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-9); }
.feature .shot-phone { width: 340px; }
.shot-phone img { border-radius: 28px; border-color: var(--line-strong); }

.team-list {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--space-7); row-gap: var(--space-7);
  margin-top: var(--space-8);
}
.team-list li { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.team-list p { margin-top: var(--space-2); color: var(--text-2); }

/* Your server: one simple drawing. You steer from a laptop or phone; the work runs on the server,
   each project sealed in its own niche. The lines of work write themselves while motion is allowed. */
.runs-lede { margin-top: var(--space-5); color: var(--text-2); max-width: 40rem; }
.yard { margin-top: var(--space-8); }
.yard svg { display: block; width: 100%; height: auto; overflow: visible; }
.yard .yard-tall { display: none; }
.yard text { fill: var(--text); font-family: var(--font); font-size: 15px; }
.yard .y-title { font-weight: 600; }
.yard .y-muted { fill: var(--muted); font-size: 13px; }
.yard .y-label { fill: var(--muted); font-size: 13px; }
.yard .y-mono { font-family: var(--font-mono); fill: var(--text-2); font-size: 13px; }
.yard .y-mono-sm { font-size: 12px; }
.yard .dev { fill: var(--surface); stroke: var(--text-2); stroke-width: 1.25; }
.yard .dev-screen { fill: var(--bg); stroke: var(--line); }
.yard .dev-notch { fill: var(--line-strong); }
.yard .ui-box { fill: none; stroke: var(--line-control); }
.yard .ui-line { fill: var(--muted); }
.yard .ui-faint { fill: var(--line-strong); }
.yard .ui-send { fill: var(--accent); }
.yard .ui-arrow { fill: none; stroke: var(--accent-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.yard .ui-bubble { fill: var(--line-strong); }
.yard .ui-mine { fill: var(--muted); }
.yard .y-wire { fill: none; stroke: var(--text-2); stroke-width: 1.25; stroke-dasharray: 2 6; stroke-linecap: round; }
.yard .y-head { fill: var(--text-2); }
.yard .y-signal { fill: var(--accent); }
.yard .y-card { fill: var(--surface); stroke: var(--line-strong); }
.yard .y-divider { stroke: var(--line); }
.yard .y-tag { fill: var(--muted); font-size: 11.5px; }
.yard .y-task { fill: var(--text); font-size: 13px; }
.yard .y-task-done { fill: var(--muted); }
.yard .y-step { fill: var(--muted); font-size: 12px; }
.yard .y-track { fill: var(--line); }
.yard .y-prog { fill: var(--text-2); }
.yard .y-spin-track { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.yard .y-spin { fill: none; stroke: var(--ok); stroke-width: 1.6; stroke-linecap: round; }
.yard .y-check-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.yard .y-check { fill: none; stroke: var(--ok); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.yard .y-live { fill: var(--ok); }
.yard .y-led { fill: var(--line-strong); }
.yard .y-vent { stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; }
.yard .y-lock rect, .yard .y-lock path { fill: none; stroke: var(--muted); stroke-width: 1.2; }

/* Motion: the work goes on. Spinners turn, progress creeps, the light breathes, the signal travels. */
.yard .y-spin { animation: y-rotate 1.4s linear infinite; }
.yard .y-prog { transform-box: fill-box; transform-origin: left center; animation: y-grow 5s ease-in-out infinite alternate; }
.yard .y-live { animation: y-pulse 2.4s ease-in-out infinite; }
.yard .y-signal-x { animation: y-send-x 2.6s var(--ease) infinite; }
.yard .y-signal-y { animation: y-send-y 2.6s var(--ease) infinite; }
@keyframes y-rotate { to { transform: rotate(360deg); } }
@keyframes y-grow { from { transform: scaleX(0.82); } to { transform: scaleX(1.12); } }
@keyframes y-pulse { 50% { opacity: 0.35; } }
@keyframes y-send-x { 0% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(96px); opacity: 0; } }
@keyframes y-send-y { 0% { transform: translateY(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }

.runs-points {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--space-7);
  margin-top: var(--space-8);
}
.runs-points li { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.runs-points p { margin-top: var(--space-2); color: var(--text-2); }

.faq { max-width: calc(52rem + 2 * var(--gutter)); }
.faq h2 { margin-bottom: var(--space-6); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-5);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  font-size: var(--fs-md); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background:
    linear-gradient(var(--muted), var(--muted)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) center / 1.5px 12px no-repeat;
  transition: transform 200ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { border-radius: 4px; }
.faq details p { padding-bottom: var(--space-5); color: var(--text-2); max-width: 44rem; }

.closing {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-10) var(--gutter) var(--space-9);
}
.inscription { max-width: 40rem; }
.inscription p { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.35; letter-spacing: 0.04em; color: var(--text-2); }
.inscription footer { margin-top: var(--space-4); color: var(--muted); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; }
.closing h2 { margin-top: var(--space-9); }
.closing > p { margin-top: var(--space-4); color: var(--text-2); max-width: 32rem; }
.closing .button { margin-top: var(--space-6); }

/* ------------------------------------------------------------------ early access: the form
   In a dialog on the landing page, and alone on /early-access (no JavaScript needed there). */
.ea {
  width: min(560px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--gutter));
  padding: 0; border: 1px solid var(--line-strong); border-radius: 20px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}
.ea::backdrop { background: rgba(8, 8, 7, 0.72); backdrop-filter: blur(2px); }
.ea[open] { animation: ea-in 200ms var(--ease); }
@keyframes ea-in { from { opacity: 0; transform: translateY(8px); } }
.ea-inner { position: relative; padding: var(--space-7) var(--space-7) var(--space-6); }
.ea-x {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--radius-full); color: var(--muted); cursor: pointer;
}
.ea-x:hover { color: var(--text); background: rgba(240, 235, 225, 0.06); }
.ea-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ea h2, .ea-card h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg); line-height: 1.2; }
.ea-lede { margin-top: var(--space-2); color: var(--text-2); }

.ea-form { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.ea-field { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.ea-field > label, .ea-field legend { font-size: var(--fs-sm); font-weight: 600; color: var(--text); padding: 0; margin-bottom: var(--space-2); }
.ea-field > label { margin-bottom: 0; }
.ea-hint { font-weight: 400; color: var(--muted); margin-left: var(--space-2); }
.ea-field input[type="text"], .ea-field input[type="email"] {
  width: 100%; min-height: 44px; padding: 0 var(--space-4);
  background: var(--bg); color: var(--text); font: 400 var(--fs) var(--font);
  border: 1px solid var(--line-control); border-radius: var(--radius);
}
.ea-field input::placeholder { color: var(--muted); }
.ea-field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ea-field.is-invalid input[type="text"], .ea-field.is-invalid input[type="email"] { border-color: var(--danger); }
.ea-field.is-invalid legend, .ea-field.is-invalid > label { color: var(--danger-fg); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4);
  border: 1px solid var(--line-control); border-radius: var(--radius-full);
  color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; user-select: none;
  transition: background-color 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
}
.chip span:hover { border-color: var(--text-2); color: var(--text); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { box-shadow: var(--focus); }
.ea-other { display: none; margin-top: var(--space-1); }
.ea-field:has(input[value="other"]:checked) .ea-other { display: block; }

.ea-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ea-error { color: var(--danger-fg); font-size: var(--fs-sm); }
.ea-actions .button { width: 100%; }
.ea-actions .button:disabled { opacity: 0.6; cursor: progress; }
.ea-note { color: var(--muted); font-size: 0.8125rem; line-height: 1.55; }
.ea-done { display: grid; gap: var(--space-4); justify-items: start; outline: none; }
.ea-done p { color: var(--text-2); }

.ea-page .top { max-width: calc(560px + 2 * var(--gutter)); }
.ea-card {
  max-width: calc(560px + 2 * var(--gutter)); margin: var(--space-6) auto var(--space-9);
  padding: 0 var(--gutter);
}
.ea-card h1 { font-size: var(--fs-xl); }
.ea-card > p + p { margin-top: var(--space-6); }

/* ------------------------------------------------------------------ footer */
.foot {
  max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto;
  padding: var(--space-7) var(--gutter) var(--space-8);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-7); row-gap: var(--space-2);
  align-items: center; color: var(--muted); font-size: var(--fs-sm);
}
.foot-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text); grid-row: span 2; }
.foot-brand .brand-mark { width: 24px; height: 24px; }
.foot-brand .wordmark { font-size: 0.875rem; }
.foot .fine { font-size: 0.8125rem; }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1023px) {
  .steps, .team-list { grid-template-columns: 1fr 1fr; }
  .discipline-inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .feature-phone { grid-template-columns: 1fr; }
  .feature-phone .feature-text { order: -1; }
  .feature .shot-phone { width: min(320px, 100%); margin: 0 auto; }
}
@media (max-width: 899px) {
  .yard .yard-wide { display: none; }
  .yard .yard-tall { display: block; max-width: 440px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .ea-inner { padding: var(--space-6) var(--space-5) var(--space-5); }
  :root { --gutter: 16px; --fs-2xl: 2.75rem; --fs-xl: 2rem; --fs-lg: 1.5rem; --fs-md: 1.125rem; --space-10: 96px; --space-9: 72px; }
  .top { gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .top-nav { display: none; }
  .hero { padding-top: var(--space-7); }
  .niche { width: 148px; height: 206px; border-radius: 74px 74px 10px 10px; margin-bottom: var(--space-6); }
  .niche::before { inset: 9px; border-radius: 65px 65px 5px 5px; }
  .niche-mark { width: 80px; height: 80px; }
  .actions { flex-direction: column; align-self: stretch; }
  .who { grid-template-columns: 1fr; row-gap: var(--space-7); }
  .who-col, .who-col:first-child, .who-col:last-child { padding: 0; border: 0; }
  .steps, .team-list, .tablet, .runs-points { grid-template-columns: 1fr; }
  .runs-points { row-gap: var(--space-6); }
  .steps { row-gap: var(--space-6); }
  .numeral { margin-bottom: var(--space-3); }
  .shot img { border-radius: var(--radius); }
  .foot { grid-template-columns: 1fr; }
  .foot-brand { grid-row: auto; margin-bottom: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ea[open] { animation: none; }
  .yard * { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}