/* Static art direction (plan 01-05). Direction: "The product performs" (design-taste-frontend).
   --accent / --accent-ink are rendered from site.config.json (brand.accent / brand.accentInk).
   Roles: ground --bg, one tone step --surface, ink --ink, secondary note --muted, accent on the action buttons only. */

:root {
  --bg: #0E1116;
  --surface: #161B22;
  --ink: #E9EDF2;
  --muted: #AAB2BF;
  --chart-down: #6B7380; /* falling candles and volume bars inside chart drawings only (UI-SPEC chart greys) */
  --accent: #F5B83D;
  --accent-ink: #14100A;
  --font-text: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --gutter: 20px;
  --radius: 0;
  --header-h: 56px;
  --section-gap: 96px;
  --display: clamp(1.4rem, 6.8vw, 3rem);
  /* motion tokens: ease-out curves only, every control point inside 0..1 (no spring, bounce or overshoot, D-04) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p, figure { margin: 0; }

a { color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

.wrap {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header: a plain bar. The square logo mark (28px) sits before the wordmark text, the flex gap spaces them. */
.site-header { background: var(--bg); }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 20px;
  min-height: var(--header-h);
  padding-inline: var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wordmark__mark { display: block; flex: none; width: 28px; height: 28px; }

.wordmark__en { display: none; font-weight: 400; margin-left: 0.4em; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.site-nav__link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-hover) ease-out;
}

.wordmark { transition: opacity var(--t-hover) ease-out; }

@media (hover: hover) and (pointer: fine) {
  .site-nav__link:hover { text-decoration-color: currentColor; }
  .wordmark:hover { opacity: 0.8; }
}

/* Hero (D-10 amended): phone = text block, then the chart on its own tone field; desktop = text left, chart field right */
.hero { padding: 0; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero__text {
  min-width: 0;
  padding: 24px var(--gutter) 40px;
}

h1 {
  font-size: var(--display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* The headline sits behind its own mask so the entrance can rise out from a baseline; the padding and the
   negative margin cancel, so the mask adds no height and descenders are not clipped. */
.h1__mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.h1__line { display: block; }

.hero__summary { margin-top: 16px; max-width: 40rem; }

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 24px;
}

/* The stage is the one flat field behind the chart fragment: a single tone step above the ground */
.hero__stage {
  min-width: 0;
  padding: 32px var(--gutter);
  background: var(--surface);
}

.hero__visual { position: relative; min-width: 0; }

.hero__chart { display: block; width: 100%; max-width: 100%; height: auto; }

/* The sample badge sits over the image's top-right corner (D-08) */
.hero__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  max-width: calc(100% - 16px);
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
}

/* Two-path links under the hero risk notice (D-17) */
.path-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.path-links__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--t-hover) ease-out, text-underline-offset var(--t-hover) ease-out;
}

/* Actions: flat fill, one corner decision (square) for the whole page */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), opacity var(--t-hover) ease-out;
}

.button--primary { background: var(--accent); color: var(--accent-ink); }

.button:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .button--primary:hover { opacity: 0.88; }
}

.link-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--t-hover) ease-out, text-underline-offset var(--t-hover) ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .link-action:hover,
  .path-links__link:hover {
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }
}

.link-action--pending { text-decoration: none; color: var(--ink); transition: none; }

a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.legal-note {
  max-width: 40rem;
  margin-top: 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}

/* Section headings (the Heading size) */
.indicator h2,
.how h2,
.guide h2 {
  font-size: clamp(1.375rem, 0.9rem + 1.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Feature strip (D-13): a run of the four marks and webhook support, no figures. One tone step, read as the legend
   of the chart above it (critique round 1: the inverted band was the loudest thing on the page). */
.strip {
  background: var(--surface);
  color: var(--ink);
}

.feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding-block: 20px;
  list-style: none;
  font-weight: 700;
}

.feature-row__item { display: block; }

/* Indicator: a heading block, then one row per mark. Each row is a statement and a true-size crop of the chart
   example (the specimen); the crops differ in size and shape so the column never reads as a zigzag of equal blocks. */
.indicator {
  padding-top: var(--section-gap);
  padding-bottom: 64px;
}

.indicator__lead,
.indicator__markets { margin-top: 16px; max-width: 40rem; }

.market { font-weight: 700; }

.features {
  display: grid;
  row-gap: 64px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.feature {
  display: grid;
  row-gap: 24px;
  min-width: 0;
}

.feature__text { min-width: 0; max-width: 28rem; }

.feature__title,
.webhook__title,
.track__name,
.guide__name { font-size: 1.0625rem; font-weight: 700; line-height: 1.55; }

.feature__body { margin-top: 4px; }

/* crop windows into chart-example.svg (viewBox 640x400): x, y, width, height in viewBox units, and the stage width.
   D-38: every mark sits on the drawing's last candle, so each window frames its mark's lead-up with the mark in the
   right half of the window and nothing after it (verify (x), node test). */
.feature:nth-child(1) { --cx: 360; --cy: 116; --cw: 240; --ch: 88;  --stage: 24rem; }
.feature:nth-child(2) { --cx: 268; --cy: 86;  --cw: 300; --ch: 86;  --stage: 34rem; }
.feature:nth-child(3) { --cx: 200; --cy: 258; --cw: 440; --ch: 130; --stage: 42rem; }
.feature:nth-child(4) { --cx: 340; --cy: 200; --cw: 268; --ch: 58;  --stage: 32rem; }

.specimen {
  width: 100%;
  max-width: var(--stage, 26rem);
  padding: 16px;
  background: var(--surface);
}

.specimen__crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--cw, 4) / var(--ch, 2);
  background: var(--bg);
}

.specimen__img {
  position: absolute;
  top: calc(var(--cy, 0) / var(--ch, 1) * -100%);
  left: calc(var(--cx, 0) / var(--cw, 1) * -100%);
  width: calc(640 / var(--cw, 640) * 100%);
  max-width: none;
  height: auto;
}

.specimen__note {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}

.webhook {
  display: grid;
  row-gap: 4px;
  margin-top: 64px;
}

.webhook p { margin: 0; max-width: 40rem; }

.webhook .webhook__note { margin-top: 12px; }

/* Usage: one tone field, the heading and the single lite track */
.how {
  padding-block: 64px;
  background: var(--surface);
}

.how__grid {
  display: grid;
  row-gap: 32px;
}

.track { min-width: 0; }

.steps { margin: 16px 0 0; padding-left: 1.5em; }

.step { margin-top: 24px; padding-left: 4px; }

.step:first-child { margin-top: 0; }

.step::marker { font-weight: 700; }

.step__title { display: block; font-weight: 700; }

.step__body { display: block; margin-top: 4px; max-width: 40rem; }

/* Pointer to the Telegram 안내방 under the usage track: running text */
.how__pro-note { max-width: 40rem; }

/* Guide (D-31, D-32): the page's one centred column on the ground; two items stacked at every width,
   no comparison, price or list. Space separates the items; the pending notice is one tone step, never a greyed-out button. */
.guide { padding-block: var(--section-gap); }

.guide__grid { max-width: calc(40rem + 2 * var(--gutter)); }

.guide__item { margin-top: 48px; }

.guide h2 + .guide__item { margin-top: 32px; }

.guide__text { margin-top: 4px; }

.guide__item .button { width: 100%; margin-top: 20px; }

.guide__state {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin-top: 20px;
  padding: 0 16px;
  background: var(--surface);
  font-weight: 700;
  color: var(--ink);
}

/* Footer: a designed close on the tone field; the name returns at the page's display size */
.site-footer {
  padding-block: 64px;
  background: var(--surface);
}

.site-footer__inner {
  display: grid;
  row-gap: 32px;
}

.site-footer .wordmark {
  font-size: var(--display);
  line-height: 1.2;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  margin-top: 8px;
}

.site-footer__legal .legal-note:first-child { margin-top: 0; }

.site-footer__copy { margin-top: 24px; font-size: 0.9375rem; color: var(--muted); }

/* Footer document links (plan 02-03): 이용약관 · 개인정보 처리방침, the optional 문의하기 link, the officer contact line */
.site-footer__docs {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  margin-top: 8px;
}

.site-footer__contact { margin-top: 8px; font-size: 0.9375rem; color: var(--muted); }

/* Legal pages (plan 02-03, LEGAL-02/03, D-19): privacy.html and terms.html. One readable column on the ground,
   headings from the site's scale, lists and field lists in the body size. Field lists sit on one tone step
   (--surface), label above value on phones and label | value from 720px. No card inside a card, no gradient. */
.legal { padding-block: 40px 96px; }

.legal__inner { max-width: calc(44rem + 2 * var(--gutter)); }

.legal__title {
  font-size: var(--display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.legal__lead { margin-top: 16px; }

.legal__version { margin-top: 12px; font-size: 0.9375rem; color: var(--muted); }

.legal__section { margin-top: 48px; }

.legal__section h2 {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.legal__section p { margin-top: 12px; }

.legal__list {
  margin: 12px 0 0;
  padding-left: 1.25em;
}

.legal__list li + li { margin-top: 8px; }

.legal__fields {
  margin: 16px 0 0;
  padding: 16px var(--gutter);
  background: var(--surface);
}

.legal__field + .legal__field { margin-top: 12px; }

.legal__fields dt { font-size: 0.9375rem; color: var(--muted); }

.legal__fields dd { margin: 0; overflow-wrap: anywhere; }

.legal__fields dd[data-legal-placeholder] {
  color: var(--muted);
  text-decoration: underline dashed;
  text-underline-offset: 5px;
}

@media (min-width: 720px) {
  .legal { padding-block: 64px 128px; }
  .legal__fields { padding: 20px 24px; }
  .legal__field {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    column-gap: 24px;
  }
}

/* Interactive demo (plan 01-07, D-36). Four example episodes, one per feature, each an inline SVG ending on the
   candle where its mark appears. The markup is the static state (all four end frames, marks on, no tags);
   main.js moves data-demo-state to ready / playing / paused / ended / feature, where exactly one episode
   (is-active) is displayed and candles, marks, tags and the resistance line show only with is-drawn / is-on.
   Composition (dealt showcase blueprint "Input half, output half"): the visitor's choice on the ground, the chart
   on one tone step. Phone: heading, the chart field edge to edge, then the choices. Desktop: 5/7 split, the
   choices on the left, the output field running to the right edge. Fills and strokes come from the tokens;
   accent only on the volume spike. */
.demo { padding-bottom: var(--section-gap); }

.demo__grid { display: grid; }

.demo__head {
  min-width: 0;
  padding: var(--section-gap) var(--gutter) 32px;
}

.demo h2 {
  font-size: clamp(1.375rem, 0.9rem + 1.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.demo__lead { margin-top: 16px; max-width: 40rem; }

/* output: one tone step, edge to edge on the phone */
.demo__output {
  display: grid;
  row-gap: 16px;
  min-width: 0;
  padding: 16px 16px 24px;
  background: var(--surface);
}

.demo__video { position: relative; min-width: 0; }
.demo__clip { display: block; width: 100%; height: auto; background: var(--bg); }

.demo__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* The sample badges sit in the stage above the drawing (Label role, solid chip, not accent), so they never cover a mark */
.demo__badge {
  order: -1;
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
}

.demo__video .demo__badge { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px); }

/* phone static state (no script, reduced motion): the four end frames stack, so the example-data badge stays in view
   while the visitor scrolls through them; it sits at the left, the marks all sit at the right edge of their frames */
@media (max-width: 767px) {
  .demo__stage[data-demo-state="static"] .demo__badge {
    position: sticky;
    top: 8px;
    z-index: 1;
  }
}

/* static: the four end frames, each under its feature name; one column on the phone so every mark stays legible */
.demo__screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
  min-width: 0;
}

.demo__name {
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 700;
}

.demo__name:not(:first-child) { margin-top: 16px; }

[data-ui] .demo-ep {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
}

.demo__tag { display: none; }

/* the drawing: the chart example's own language (ink rising bodies, grey outlined falling bodies, ink marks) */
[data-ui] .demo-panel__bg { fill: none; }
[data-ui] .demo-panel__band { fill: var(--ink); fill-opacity: 0.07; }
[data-ui] .demo-panel__rule { stroke: var(--ink); stroke-opacity: 0.1; stroke-width: 1; }
[data-ui] .demo-candle__wick { stroke-width: 1.2; }
[data-ui] .demo-candle--up .demo-candle__wick { stroke: var(--ink); }
[data-ui] .demo-candle--up .demo-candle__body { fill: var(--ink); stroke: var(--ink); stroke-width: 1; }
[data-ui] .demo-candle--down .demo-candle__wick { stroke: var(--chart-down); }
[data-ui] .demo-candle--down .demo-candle__body { fill: var(--bg); stroke: var(--chart-down); stroke-width: 1.2; }
[data-ui] .demo-candle__vol { fill: var(--chart-down); fill-opacity: 0.7; }
[data-ui] .demo-candle__osc { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
[data-ui] .demo-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 5; }
[data-ui] .demo-mark__shape { fill: var(--ink); stroke: var(--bg); stroke-width: 2; stroke-linejoin: round; }
[data-ui] .demo-mark__ring { fill: var(--bg); stroke: var(--ink); stroke-width: 2.2; }
[data-ui] .demo-mark__slot { fill: var(--ink); fill-opacity: 0.18; }
[data-ui] .demo-mark__bar { fill: var(--accent); }

/* scripted states: one episode at a time on a cleared chart, parts appear as they are drawn */
.demo__stage:not([data-demo-state="static"]) .demo__screen { display: block; }
.demo__stage:not([data-demo-state="static"]) .demo__name,
.demo__stage:not([data-demo-state="static"]) .demo-ep { display: none; }
.demo__stage:not([data-demo-state="static"]) .demo-ep.is-active { display: block; }

.demo__stage:not([data-demo-state="static"]) .demo-candle,
.demo__stage:not([data-demo-state="static"]) .demo-mark,
.demo__stage:not([data-demo-state="static"]) .demo-line {
  opacity: 0;
}

.demo__stage:not([data-demo-state="static"]) .demo-candle.is-drawn,
.demo__stage:not([data-demo-state="static"]) .demo-mark.is-on,
.demo__stage:not([data-demo-state="static"]) .demo-line.is-on {
  opacity: 1;
}

/* the 여기서 알림 tag: left of the condition candle, level with its mark, never over the candle */
.demo__stage:not([data-demo-state="static"]) .demo__tag {
  position: absolute;
  top: var(--tag-t, 50%);
  right: var(--tag-r, 0);
  display: block;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: nowrap;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
}

.demo__stage:not([data-demo-state="static"]) .demo__tag.is-on {
  opacity: 1;
  visibility: visible;
}

/* tag positions: percentages of the episode box, computed by the build from the episode geometry */
.demo__tag[data-demo-tag="trend"] { --tag-r: 16.3%; --tag-t: 53.5%; }
.demo__tag[data-demo-tag="breakout"] { --tag-r: 16.3%; --tag-t: 10.6%; }
.demo__tag[data-demo-tag="heat"] { --tag-r: 16.3%; --tag-t: 77.9%; }
.demo__tag[data-demo-tag="volume"] { --tag-r: 16.3%; --tag-t: 69.6%; }

/* caption: the episode's feature name; the alert and the note appear when its mark turns on */
.demo__caption { min-height: 4.65em; }

@media (min-width: 1000px) {
  .demo__caption { min-height: 3.1em; }
}
.demo__caption[hidden] { display: none; }
.demo__note { display: none; max-width: 40rem; }
.demo__note.is-active { display: block; }
.demo__note-title { font-weight: 700; }
.demo__note-alert { font-weight: 700; }
.demo__note-alert,
.demo__note-text { visibility: hidden; }
.demo__note.is-on .demo__note-alert,
.demo__note.is-on .demo__note-text { visibility: visible; }

/* replay controls under the chart: plain text buttons one tone step down from the field */
.demo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo__controls[hidden] { display: none; }

.demo__button,
.demo__feature {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: transform var(--t-press) var(--ease-out), text-decoration-color var(--t-hover) ease-out;
}

.demo__button { background: var(--bg); color: var(--ink); }

.demo__button:active,
.demo__feature:active { transform: scale(0.97); }

.demo__button:focus-visible,
.demo__feature:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .demo__button:hover,
  .demo__feature:hover { text-decoration-color: currentColor; }
}

/* input: the visitor's choice of feature, then the explanation of what is on screen */
.demo__input {
  display: grid;
  row-gap: 32px;
  align-content: start;
  min-width: 0;
  padding: 32px var(--gutter) 0;
}

.demo__features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo__features[hidden] { display: none; }

/* unpressed: plain ink text on the ground; pressed: one tone step and weight 700 (never colour alone) */
.demo__feature {
  padding: 0 12px;
  background: transparent;
  color: var(--ink);
  font-weight: 400;
}

.demo__feature[aria-pressed="true"] {
  background: var(--surface);
  font-weight: 700;
}

.demo__explains {
  display: grid;
  row-gap: 24px;
}

.demo__explain[hidden] { display: none; }
.demo__explain-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.55; }
.demo__explain-text { margin-top: 4px; max-width: 40rem; }

/* feature view: the part a mark lives in stays at full strength, the rest of the drawing steps back */
[data-ui] .demo-ep[data-demo-focus] .demo-candle__body,
[data-ui] .demo-ep[data-demo-focus] .demo-candle__wick,
[data-ui] .demo-ep[data-demo-focus] .demo-candle__vol,
[data-ui] .demo-ep[data-demo-focus] .demo-candle__osc { opacity: 0.3; }

[data-ui] .demo-ep[data-demo-focus] .demo-candle.is-focus > *,
[data-ui] .demo-ep[data-demo-focus="osc"] .demo-candle__osc,
[data-ui] .demo-ep[data-demo-focus="volume"] .demo-candle__vol { opacity: 1; }

[data-ui] .demo-line.is-focus { stroke-width: 2.5; }
[data-ui] .demo-panel.is-focus .demo-panel__band { fill: var(--ink); fill-opacity: 0.2; }

/* Wider screens */
@media (min-width: 480px) {
  .wordmark__en { display: inline; }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }

  /* demo static end frames: two by two from tablet width */
  .demo__screen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .demo__name[data-demo-name="trend"] { grid-area: 1 / 1; }
  .demo__name[data-demo-name="breakout"] { grid-area: 1 / 2; }
  .demo__name[data-demo-name="heat"] { grid-area: 3 / 1; }
  .demo__name[data-demo-name="volume"] { grid-area: 3 / 2; }
  .demo-ep[data-demo-episode="trend"] { grid-area: 2 / 1; }
  .demo-ep[data-demo-episode="breakout"] { grid-area: 2 / 2; }
  .demo-ep[data-demo-episode="heat"] { grid-area: 4 / 1; }
  .demo-ep[data-demo-episode="volume"] { grid-area: 4 / 2; }
  .demo__name[data-demo-name="breakout"] { margin-top: 0; }
  .demo__output { padding: 24px var(--gutter) 32px; }
  .hero__actions { flex-direction: row; align-items: center; gap: 24px; }
  .feature-row { column-gap: 32px; }
  .guide__item .button { width: auto; }
}

@media (min-width: 1000px) {
  :root { --gutter: 40px; --section-gap: 160px; --display: clamp(1.75rem, 3.1vw, 3rem); }

  

  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .hero__text {
    align-self: center;
    padding: 64px var(--gutter) 64px;
  }

  .hero__text:only-child { grid-column: 1 / -1; }

  .hero__stage {
    display: grid;
    align-items: center;
    padding: 48px var(--gutter);
  }

  .feature-row { padding-block: 28px; }

  /* the heading starts inside the first screen at 1280x800 and 1440x900, so the fold does not end on empty ground */
  .indicator { padding-top: 112px; padding-bottom: 120px; }

  /* anchor lines: the left margin and the 50% line the hero field starts on */
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: start;
  }

  .feature__title { padding-top: 24px; }

  .webhook {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: start;
  }

  .webhook__title { grid-column: 1; grid-row: 1; }

  .webhook p { grid-column: 2; }

  .how { padding-block: 120px; }

  /* critique round 2: the steps run across as one row of three under the heading, so #how is not a fifth left/right split in a row */
  .how__grid { row-gap: 48px; }

  .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 48px;
    margin-top: 24px;
    padding-left: 0;
  }

  .step,
  .step:first-child { margin: 0 0 0 1.5em; }

  .site-footer { padding-block: 96px; }

  /* demo: 5/7 split; the choices on the ground at the page's left edge, the output field running to the right edge */
  .demo__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
  }

  .demo__head,
  .demo__input {
    grid-column: 1;
    padding-left: max(var(--gutter), calc((100vw - 1600px) / 2 + var(--gutter)));
    padding-right: 64px;
  }

  /* the heading and the example-data badge start on one top line */
  .demo__head { grid-row: 1; padding-top: 64px; }

  .demo__input { grid-row: 2; padding-top: 16px; }

  .demo__features {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .demo__output {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-content: start;
    row-gap: 16px;
    padding: 64px var(--gutter) 64px 64px;
  }

  .demo__stage,
  .demo__caption,
  .demo__controls,
  .demo__video { max-width: 640px; }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: start;
  }
}

/* ---------------------------------------------------------------------------------------------
   Motion layer (plan 01-06). Everything that hides content is scoped under html.js (set by main.js)
   and inside no-preference, so without the script, or with reduced motion, the page is simply finished.
   Only transform and opacity animate. Manners differ by content: the headline rises out of its mask,
   text and figures rise and fade, lists arrive row by row, the chart crops settle from a slight scale,
   the hero chart drifts against the scroll. */

@media (prefers-reduced-motion: no-preference) {
  /* Signature: the headline rises from behind its own baseline */
  .js .h1__line {
    transform: translateY(105%);
    transition: transform 900ms var(--ease-out) 120ms;
  }

  .js .h1__mask.in-view .h1__line { transform: none; }

  /* Parts of a section: heading, then text, then picture, 70ms apart, rising 24px with opacity, once */
  .js .rise {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-out), transform var(--t-reveal) var(--ease-out);
  }

  .js .rise.in-view {
    opacity: 1;
    transform: none;
  }

  .js .rise:nth-child(2) { transition-delay: 70ms; }
  .js .rise:nth-child(3) { transition-delay: 140ms; }
  .js .rise:nth-child(n+4) { transition-delay: 210ms; }

  /* Hero parts that the layout checks measure arrive by opacity alone, so they never leave their final position */
  .js .rise--fade {
    transform: none;
    transition: opacity 600ms var(--ease-out);
  }

  .js .hero .hero__summary.rise { transition-delay: 260ms; }
  .js .hero .hero__actions.rise { transition-delay: 340ms; }
  .js .hero .legal-note.rise,
  .js .hero .path-links.rise { transition-delay: 420ms; }
  .js .hero .hero__visual.rise { transition-delay: 200ms; }

  /* Lists arrive row by row */
  .js .stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
  }

  .js .stagger.in-view > * {
    opacity: 1;
    transform: none;
  }

  .js .stagger > :nth-child(2) { transition-delay: 70ms; }
  .js .stagger > :nth-child(3) { transition-delay: 140ms; }
  .js .stagger > :nth-child(4) { transition-delay: 210ms; }
  .js .stagger > :nth-child(5) { transition-delay: 280ms; }
  .js .stagger > :nth-child(n+6) { transition-delay: 350ms; }

  /* Chart crops settle from a slight scale, about the middle of their own window */
  .js .specimen__img {
    transform: scale(1.08);
    transform-origin: calc((var(--cx, 0) + var(--cw, 640) / 2) / 640 * 100%) calc((var(--cy, 0) + var(--ch, 400) / 2) / 400 * 100%);
    transition: transform 1400ms var(--ease-soft) 120ms;
  }

  .js .specimen.in-view .specimen__img { transform: none; }

  /* Demo reveals (01-07): a candle rises 4px into place, a mark 6px, ease-out, transform and opacity only */
  .demo__stage:not([data-demo-state="static"]) .demo-candle {
    transform: translateY(4px);
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  }

  .demo__stage:not([data-demo-state="static"]) .demo-mark {
    transform: translateY(6px);
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  }

  .demo__stage:not([data-demo-state="static"]) .demo-candle.is-drawn,
  .demo__stage:not([data-demo-state="static"]) .demo-mark.is-on { transform: none; }

  .demo__stage:not([data-demo-state="static"]) .demo-line { transition: opacity 240ms var(--ease-out); }

  .demo__stage:not([data-demo-state="static"]) .demo__tag {
    transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
  }

  .demo__stage:not([data-demo-state="static"]) .demo__tag.is-on {
    transition: opacity 200ms var(--ease-out), visibility 0s;
  }

  /* One moving picture: the hero chart drifts against the scroll as the hero leaves (scroll-linked, no script) */
  @supports (animation-timeline: view()) {
    .hero__chart {
      animation: chart-drift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes chart-drift {
  from { transform: translateY(0); }
  to { transform: translateY(6%); }
}

/* Reduced motion: no travel, no scale, no drift; every element is simply visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .rise,
  .stagger > *,
  .h1__line,
  .specimen__img {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__chart { animation: none; }

  .button:active { transform: none; }

  /* demo: static end frames (main.js); the feature view switches with no transition */
  .demo-candle,
  .demo-mark,
  .demo-line,
  .demo__tag {
    transform: none;
    transition: none;
  }
}

@media print {
  .rise,
  .stagger > *,
  .h1__line {
    opacity: 1 !important;
    transform: none !important;
  }
}