/* creatyk.com · home.css: the home page (/ and /en/), a landing page on the landing-page-design
   skill. Only the base tokens: --spacing-*, --radius-*, --bg-0…4, --ink*, the violet, --ease and
   the --dur-* times. Type comes from the text style classes in the markup (heading-*, title-*,
   body-*, button-*, caption-*), so nothing here sets a size, a line height or a weight.
   Sections: hero (one action, the app's Home rebuilt, figures) → problem → benefits story →
   tagline → how it works → Community → FAQ → risk and plans → Discord. Owner: the home's agent. */

/* ── hero ─────────────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--nav-offset) + var(--spacing-700)) 0 var(--spacing-200); text-align: center; }
.space--hero {
  z-index: -1; height: min(100%, 1240px);
  /* the stars dim behind the headline and fade out at the bottom (a mask, not a fill) */
  -webkit-mask-image: radial-gradient(48% 26% at 50% 18%, rgba(0, 0, 0, 0.32), #000 100%), linear-gradient(180deg, #000 70%, transparent); /* taste-skill-ignore: a fade mask on the starfield, not a fill */
  mask-image: radial-gradient(48% 26% at 50% 18%, rgba(0, 0, 0, 0.32), #000 100%), linear-gradient(180deg, #000 70%, transparent); /* taste-skill-ignore: a fade mask on the starfield, not a fill */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero__text { position: relative; }
.hero__title { max-width: var(--measure); margin-inline: auto; }
.hero__title .line { display: block; }
.hero__lead { max-width: var(--measure); margin: var(--spacing-300) auto 0; color: var(--ink-2); text-wrap: pretty; }
.hero__actions { margin-top: var(--spacing-400); display: flex; justify-content: center; }
.hero__proof { margin-top: var(--spacing-200); display: flex; justify-content: center; align-items: center; gap: var(--spacing-75); color: var(--ink-2); text-wrap: balance; }
.hero__proof .icon { width: 16px; height: 16px; color: var(--accent-text); }
.hero__stage-wrap { position: relative; margin-top: var(--spacing-700); }
.hero__stage { --scrub-end: 620px; transform-origin: 50% 100%; }
.hero__app { container-type: inline-size; max-width: 1140px; margin-inline: auto; text-align: left; }
@media (min-width: 1024px) {
  .hero { padding-top: calc(var(--nav-offset) + var(--spacing-900)); }
  .hero__stage-wrap { margin-top: var(--spacing-900); }
}

/* ── the app's window, rebuilt (data-ui): sidebar, bar, Home card, levels, pending bar ─────── */
[data-ui].app { display: grid; grid-template-columns: 212px minmax(0, 1fr); border-radius: var(--radius-16); background: var(--ui-bg); border: 1px solid var(--line-2); overflow: clip; }
[data-ui] .aside { display: flex; flex-direction: column; gap: var(--spacing-50); padding: var(--spacing-200) var(--spacing-100); background: var(--bg-0); }
[data-ui] .aside__brand { display: flex; align-items: center; gap: var(--spacing-75); padding: var(--spacing-50) var(--spacing-75) var(--spacing-100); }
[data-ui] .aside__mark { width: 28px; height: 28px; }
[data-ui] .aside__word { color: var(--ink); }
[data-ui] .aside__group { margin: var(--spacing-75) 0 var(--spacing-50); padding: 0 var(--spacing-100); color: var(--ui-muted); }
[data-ui] .aside__list { display: grid; gap: var(--spacing-25); }
[data-ui] .aside__item { position: relative; display: flex; align-items: center; gap: var(--spacing-100); height: 32px; padding: 0 var(--spacing-100); border-radius: var(--radius-8); border: 1px solid transparent; color: var(--ui-soft); white-space: nowrap; }
[data-ui] .aside__item .icon { width: 16px; height: 16px; color: var(--ui-muted); }
[data-ui] .aside__item.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ui-ink); }
[data-ui] .aside__item.is-on .icon { color: var(--ui-accent-text); }
[data-ui] .app__main { min-width: 0; display: flex; flex-direction: column; }
[data-ui] .app__bar { display: flex; align-items: center; gap: var(--spacing-100); height: 56px; padding: 0 var(--spacing-200); }
[data-ui] .app__mark { width: 24px; height: 24px; display: none; }
[data-ui] .app__search { flex: 1; max-width: 360px; margin-inline: auto; display: flex; align-items: center; gap: var(--spacing-75); height: 32px; padding: 0 var(--spacing-100); border-radius: var(--radius-8); background: var(--ui-card); border: 1px solid var(--ui-line); color: var(--ui-muted); }
[data-ui] .app__search-icon { width: 16px; height: 16px; }
[data-ui] .app__search kbd { margin-left: auto; padding: 0 var(--spacing-50); border-radius: var(--radius-4); background: var(--ui-raised); color: var(--ui-soft); font-family: var(--mono); }
[data-ui] .app__controls { display: flex; gap: var(--spacing-200); color: var(--ui-muted); }
[data-ui] .app__controls .icon { width: 16px; height: 16px; }
[data-ui] .app__body { padding: 0 var(--spacing-300) var(--spacing-300); }
[data-ui] .demo__home { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--spacing-300); align-items: center; background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--radius-12); padding: var(--spacing-300); }
[data-ui] .demo__intro p { margin: 0; }
[data-ui] .demo__greet { margin-top: var(--spacing-75); color: var(--ui-ink); }
[data-ui] .demo__sub { margin-top: var(--spacing-75); color: var(--ui-soft); max-width: 44ch; }
[data-ui] .demo__btns { margin-top: var(--spacing-200); display: flex; flex-wrap: wrap; gap: var(--spacing-75); }
[data-ui] .demo__ring { display: grid; justify-items: center; gap: var(--spacing-75); width: 160px; }
[data-ui] .demo__ring svg { width: 120px; height: 120px; grid-area: 1 / 1; }
[data-ui] .ring__track { fill: none; stroke: var(--bg-3); stroke-width: 9; }
[data-ui] .ring__arc { fill: none; stroke: var(--ui-accent); stroke-width: 9; stroke-linecap: round; }
[data-ui] .demo__score, [data-ui] .demo__rank { grid-area: 1 / 1; align-self: center; }
[data-ui] .demo__score { transform: translateY(-8px); }
[data-ui] .demo__rank { transform: translateY(20px); letter-spacing: 0; }
[data-ui] .demo__hint { color: var(--ui-soft); text-align: center; }
[data-ui] .demo__title { margin: var(--spacing-300) 0 var(--spacing-100); color: var(--ui-ink); }
[data-ui] .demo__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-100); }
[data-ui] .lvl {
  display: flex; flex-direction: column; gap: var(--spacing-75); min-width: 0; padding: var(--spacing-100); border-radius: var(--radius-12);
  background: var(--ui-card); border: 1px solid var(--ui-line); color: var(--ui-ink); text-align: left; cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease), transform var(--dur-press) var(--ease);
}
[data-ui] .lvl:active { transform: scale(0.98); }
[data-ui] .lvl.is-picked { border-color: var(--ui-accent); background: var(--bg-3); }
[data-ui] .lvl__top { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-75); min-height: 20px; }
[data-ui] .lvl__flames { display: flex; gap: var(--spacing-25); color: var(--bg-4); }
[data-ui] .ui-flame { width: 16px; height: 16px; }
[data-ui] .ui-flame.is-on { color: var(--ui-accent); }
[data-ui] .lvl__desc { flex: 1; color: var(--ui-soft); }
[data-ui] .demo__bar { margin-top: var(--spacing-100); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-100); padding: var(--spacing-100) var(--spacing-200); background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: var(--radius-12); }
[data-ui] .demo__bar p { margin: 0; }
[data-ui] .demo__bar-title { color: var(--ui-ink); }
[data-ui] .demo__bar-hint { color: var(--ui-soft); }
[data-ui] .demo__bar-btns { display: flex; gap: var(--spacing-75); flex: 0 0 auto; }
[data-ui] .demo__bar.is-done .demo__bar-title { color: var(--ok); }
@media (hover: hover) and (pointer: fine) {
  [data-ui] .lvl:hover { border-color: var(--bg-4); background: var(--bg-3); }
  [data-ui] .lvl.is-picked:hover { border-color: var(--ui-accent); }
}
@container (max-width: 820px) {
  [data-ui].app { grid-template-columns: minmax(0, 1fr); }
  [data-ui] .aside { display: none; }
  [data-ui] .app__mark { display: block; }
}
@container (max-width: 620px) {
  [data-ui] .demo__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-ui] .app__body { padding: 0 var(--spacing-200) var(--spacing-200); }
}
@container (max-width: 470px) {
  [data-ui] .demo__home { grid-template-columns: 1fr; padding: var(--spacing-200); }
  [data-ui] .demo__ring { justify-self: start; grid-template-columns: auto 1fr; width: auto; align-items: center; column-gap: var(--spacing-200); }
  [data-ui] .demo__ring svg { width: 96px; height: 96px; }
  [data-ui] .demo__score { transform: translateY(-6px); justify-self: center; }
  [data-ui] .demo__rank { transform: translateY(16px); justify-self: center; letter-spacing: 0; }
  [data-ui] .demo__hint { grid-area: 1 / 2; text-align: left; }
  [data-ui] .demo__bar { flex-wrap: wrap; }
  [data-ui] .app__search kbd, [data-ui] .app__controls { display: none; }
  [data-ui] .app__bar { padding: 0 var(--spacing-200); height: 48px; }
}

/* ── figures: four real numbers from the app's code ───────────────────────────────────────── */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-300); margin-top: var(--spacing-700); }
.figure { display: grid; justify-items: center; align-content: start; gap: var(--spacing-100); }
.figure__value { color: var(--ink); }
.figure__label { max-width: 22ch; color: var(--ink-2); text-wrap: balance; }
@media (min-width: 1024px) { .figures { margin-top: var(--spacing-900); } }

/* ── problem to solution ──────────────────────────────────────────────────────────────────── */
.problem__grid { display: grid; gap: var(--spacing-600); align-items: center; }
.problem__text { max-width: var(--measure); }
.problem__p { margin-top: var(--spacing-300); color: var(--ink-2); }
.problem__answer { margin-top: var(--spacing-300); display: flex; gap: var(--spacing-100); align-items: flex-start; color: var(--ink); }
.problem__answer .icon { width: 24px; height: 24px; margin-top: var(--spacing-25); color: var(--accent-text); }
@media (min-width: 1024px) { .problem__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--spacing-700); } }

/* ── benefits: the app, screen by screen (data-story in core.js) ───────────────────────────── */
.story__grid { display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); gap: var(--spacing-700); align-items: stretch; }
.story__col { padding-bottom: var(--spacing-900); }
.story__head { max-width: var(--measure); }
.story__lead { margin-top: var(--spacing-200); color: var(--ink-2); }
.story__steps { margin: 0; padding: 0; list-style: none; }
/* Each step is about one screen tall; the one that crosses the middle of the screen is active,
   so the held window changes when its words arrive there. */
.story__step { min-height: 64svh; padding-top: var(--spacing-900); scroll-margin-top: 30svh; }
.story__step:first-child { min-height: 0; padding-top: var(--spacing-800); }
.story__step:last-child { min-height: 0; }
.story__more { margin-top: var(--spacing-800); }
.story__text { max-width: 480px; transition: opacity var(--dur-move) var(--ease); }
.js .story__step:not(.is-active) .story__text { opacity: 0.5; }
.story__title { color: var(--ink); }
.story__p { margin-top: var(--spacing-200); color: var(--ink-2); }
.story__note { margin-top: var(--spacing-300); display: flex; gap: var(--spacing-100); align-items: flex-start; color: var(--ink-2); }
.story__note > .icon { width: 16px; height: 16px; margin-top: var(--spacing-25); color: var(--accent-text); }
.story__plan { margin-top: var(--spacing-200); }
.story__media { position: relative; }
.story__sticky { position: sticky; top: var(--nav-offset); height: calc(100svh - var(--nav-offset)); display: flex; flex-direction: column; justify-content: center; }
.story__frame { position: relative; aspect-ratio: 1340 / 860; }
.story__panel { margin: 0; }
.story__screen { overflow: clip; border-radius: var(--radius-12); background: var(--bg-1); border: 1px solid var(--line-2); }
.story__screen img { width: 100%; height: auto; }
.story__detail { position: absolute; z-index: 2; }
.story__detail--levels { right: 3%; bottom: -10%; width: 78%; padding: var(--spacing-75); border-radius: var(--radius-16); background: var(--bg-1); border: 1px solid var(--line-2); }
.story__detail--levels img { border-radius: var(--radius-8); }
.story__detail--undo { left: 60%; top: 66%; width: 58%; translate: -50% -50%; }
.story__count { margin-top: var(--spacing-500); text-align: center; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.story__inline { display: none; }

/* one panel shows at a time; the next comes from a little closer, the last one recedes
   (transform and opacity only, on the base curve) */
.js .story__panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(4%) scale(1.03); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease), visibility 0s var(--ease) var(--dur-reveal); }
.js .story__panel.is-past { transform: translateY(-3%) scale(0.96); }
.js .story__panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease), visibility 0s; }
.js .story__panel .story__detail { opacity: 0; translate: 0 var(--spacing-400); transition: opacity var(--dur-move) var(--ease), translate var(--dur-reveal) var(--ease); }
.js .story__panel .story__detail--undo { translate: -50% calc(-50% + var(--spacing-400)); }
.js .story__panel.is-active .story__detail { opacity: 1; translate: 0 0; transition-delay: 240ms; }
.js .story__panel.is-active .story__detail--undo { translate: -50% -50%; }
@media (prefers-reduced-motion: reduce) {
  .js .story__panel, .js .story__panel.is-past { transform: none; }
  .js .story__panel .story__detail { translate: 0 0; }
  .js .story__panel .story__detail--undo { translate: -50% -50%; }
}

/* the History, rebuilt (Copias y restauración → Historial) */
[data-ui].hist { display: grid; gap: var(--spacing-75); padding: var(--spacing-200); border-radius: var(--radius-16); background: var(--ui-bg); border: 1px solid var(--line-2); text-align: left; }
[data-ui].hist p, [data-ui].hist ul { margin: 0; }
[data-ui] .hist__head { display: flex; align-items: center; gap: var(--spacing-75); color: var(--ui-ink); }
[data-ui] .hist__head > .icon { width: 16px; height: 16px; color: var(--ui-accent-text); }
[data-ui] .hist__all { margin-left: auto; transition: transform var(--dur-press) var(--ease), opacity var(--dur-hover) var(--ease); }
[data-ui] .hist.is-undoing .hist__all { transform: scale(0.98); opacity: 0.7; }
[data-ui] .hist__rows { list-style: none; padding: 0; display: grid; gap: var(--spacing-75); }
[data-ui] .hist__row { display: flex; align-items: center; gap: var(--spacing-100); padding: var(--spacing-100); border-radius: var(--radius-8); background: var(--ui-card); border: 1px solid var(--ui-line); transition: opacity var(--dur-move) var(--ease); }
[data-ui] .hist__body { flex: 1; min-width: 0; display: grid; gap: var(--spacing-25); }
[data-ui] .hist__name { color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui] .hist__meta { color: var(--ui-soft); }
[data-ui] .hist__done { display: none; }
[data-ui] .hist__row.is-undone { opacity: 0.6; }
[data-ui] .hist__row.is-undone .hist__name { text-decoration: line-through; }
[data-ui] .hist__row.is-undone .hist__undo { display: none; }
[data-ui] .hist__row.is-undone .hist__done { display: inline-block; align-self: center; }

/* ── the tagline (B11): its own moment, words light up in reading order (base.css + core.js) ── */
.tagline-section { padding-bottom: var(--section-gap); }
.tagline__line { display: block; }

/* ── how it works: three steps ────────────────────────────────────────────────────────────── */
.how__head { max-width: var(--measure); margin-bottom: var(--head-gap); }
.how__lead { margin-top: var(--spacing-200); color: var(--ink-2); }
.how__steps { counter-reset: how; display: grid; gap: var(--spacing-200); margin: 0; padding: 0; list-style: none; }
.how__step { counter-increment: how; display: flex; flex-direction: column; padding: var(--spacing-300); border-radius: var(--radius-16); background: var(--bg-1); border: 1px solid var(--line); }
.how__art { margin-bottom: var(--spacing-300); }
.how__art--icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-12); background: var(--bg-3); color: var(--accent-text); }
.how__art--icon .icon { width: 24px; height: 24px; }
.how__art--shot { overflow: clip; border-radius: var(--radius-8); border: 1px solid var(--line-2); }
.how__art--shot img { width: 100%; height: auto; }
.how__title { color: var(--ink); }
.how__title::before { content: counter(how) "  "; white-space: pre; color: var(--accent-text); }
.how__p { margin-top: var(--spacing-100); color: var(--ink-2); }
@media (min-width: 1024px) {
  .how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-300); }
  .how__step { padding: var(--spacing-400); }
}

/* ── Community: proof, live. A band one tone up, edge to edge ─────────────────────────────── */
.community { margin-top: var(--section-gap); padding-block: var(--spacing-700); background: var(--bg-1); scroll-margin-top: var(--nav-offset); }
.community__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-300) var(--spacing-600); margin-bottom: var(--head-gap); }
.community__head { max-width: var(--measure); }
.community__lead { margin-top: var(--spacing-200); color: var(--ink-2); }
.community__state { margin-bottom: var(--spacing-300); }
.community__foot { margin-top: var(--spacing-300); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-200) var(--spacing-400); }
.community__hint { display: flex; gap: var(--spacing-100); align-items: center; color: var(--ink-2); }
.community__hint .icon { width: 16px; height: 16px; color: var(--accent-text); }
.community__shot { max-width: 1040px; margin-inline: auto; }
.presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-200); }
.preset { display: flex; flex-direction: column; gap: var(--spacing-100); padding: var(--spacing-100) var(--spacing-100) var(--spacing-200); border-radius: var(--radius-16); background: var(--bg-2); border: 1px solid var(--line); transition: background-color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease); }
@media (hover: hover) and (pointer: fine) { .preset:not(.preset--skeleton):hover { background: var(--bg-3); transform: translateY(-4px); } }
.preset__shot { position: relative; aspect-ratio: 1.9 / 1; border-radius: var(--radius-4); overflow: hidden; background: var(--pv-bg, var(--bg-0)); } /* 16 − 12 = 4 */
.preset__shot img { width: 100%; height: 100%; object-fit: cover; }
.preset__info { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-100); padding-inline: var(--spacing-50); min-width: 0; }
.preset__text { display: grid; gap: var(--spacing-25); min-width: 0; }
.preset__name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset__by { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset__badge { position: absolute; top: var(--spacing-75); right: var(--spacing-75); z-index: 1; padding: var(--spacing-25) var(--spacing-75); border-radius: var(--radius-4); background: var(--button); color: #fff; }
.preset__counts { flex: 0 0 auto; display: flex; gap: var(--spacing-100); margin-top: var(--spacing-25); white-space: nowrap; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.preset__counts span { display: inline-flex; align-items: center; gap: var(--spacing-50); }
.preset__counts .icon { width: 16px; height: 16px; }
/* loading: the same cards, as skeletons */
.preset__sk-shot { aspect-ratio: 1.9 / 1; border-radius: var(--radius-4); }
.preset__sk-name { width: 60%; margin: var(--spacing-50) var(--spacing-50) 0; }
.preset__sk-by { width: 36%; margin: 0 var(--spacing-50); }
/* The app's preset thumbnail (Apariencia → Comunidad), drawn flat from the preset's four
   colours: sidebar with the active item, the Home card with its button and ring, two cards. */
.pv { position: absolute; inset: 0; display: grid; grid-template-columns: 23% 1fr; background: var(--pv-bg); }
.pv__logo, .pv__nav, .pv__t1, .pv__t2, .pv__btn, .pv__ico, .pv__tog, .pv__line { display: block; }
.pv__side { display: flex; flex-direction: column; gap: 9%; padding: 11% 12%; background: color-mix(in srgb, var(--pv-tx) 4%, var(--pv-bg)); }
.pv__logo { width: 24%; aspect-ratio: 1; border-radius: var(--radius-2); background: color-mix(in srgb, var(--pv-tx) 40%, transparent); margin-bottom: 14%; }
.pv__nav { width: 52%; height: 2px; border-radius: var(--radius-2); background: color-mix(in srgb, var(--pv-tx) 32%, transparent); }
.pv__nav--on { width: 100%; height: 8px; background: color-mix(in srgb, var(--pv-ac) 28%, transparent); }
.pv__main { display: grid; grid-template-rows: 1.2fr 1fr; gap: 7%; padding: 6% 7%; min-width: 0; }
.pv__hero, .pv__card { position: relative; border-radius: var(--radius-4); background: var(--pv-sf); }
.pv__hero { display: flex; flex-direction: column; justify-content: center; gap: 9%; padding: 0 8%; }
.pv__t1 { width: 42%; height: 3px; border-radius: var(--radius-2); background: color-mix(in srgb, var(--pv-tx) 92%, transparent); }
.pv__t2 { width: 60%; height: 2px; border-radius: var(--radius-2); background: color-mix(in srgb, var(--pv-tx) 38%, transparent); }
.pv__btn { width: 36%; height: 8px; margin-top: 3%; border-radius: var(--radius-4); background: var(--pv-ac); }
.pv__ring { position: absolute; right: 7%; top: 50%; width: 23%; height: auto; transform: translateY(-50%); }
.pv__ring-track { fill: none; stroke: color-mix(in srgb, var(--pv-tx) 14%, transparent); stroke-width: 4; }
.pv__ring-arc { fill: none; stroke: var(--pv-ac); stroke-width: 4; stroke-linecap: round; }
.pv__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; }
.pv__card { display: flex; flex-direction: column; justify-content: space-between; padding: 9% 10%; }
.pv__ico { width: 18%; aspect-ratio: 1; border-radius: var(--radius-2); background: color-mix(in srgb, var(--pv-ac) 26%, var(--pv-sf)); }
.pv__tog { position: absolute; right: 10%; top: 13%; width: 19%; aspect-ratio: 2 / 1; border-radius: var(--radius-full); background: var(--pv-ac); }
.pv__card + .pv__card .pv__tog { background: color-mix(in srgb, var(--pv-tx) 22%, transparent); }
.pv__line { width: 48%; height: 2px; border-radius: var(--radius-2); background: color-mix(in srgb, var(--pv-tx) 85%, transparent); }

/* ── FAQ ──────────────────────────────────────────────────────────────────────────────────── */
.faq__grid { display: grid; gap: var(--spacing-600); align-items: start; }
.faq__side { display: grid; gap: var(--spacing-300); }
.faq__ask { display: flex; gap: var(--spacing-100); align-items: flex-start; max-width: 36ch; color: var(--ink-2); }
.faq__ask .icon { width: 24px; height: 24px; margin-top: var(--spacing-25); color: var(--accent-text); }
.faq__ask a { color: var(--accent-text); }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--spacing-800); }
  .faq__side { position: sticky; top: calc(var(--nav-offset) + var(--spacing-400)); }
}

/* ── risk reversal and the plans (compact) ────────────────────────────────────────────────── */
.hplans__head { max-width: var(--measure); margin-bottom: var(--head-gap); }
.hplans__lead { margin-top: var(--spacing-200); color: var(--ink-2); }
.risk { display: grid; gap: var(--spacing-300); margin: 0 0 var(--spacing-600); padding: 0; list-style: none; }
.risk__item { display: flex; gap: var(--spacing-200); align-items: flex-start; }
.risk__item > .icon { width: 24px; height: 24px; margin-top: var(--spacing-25); color: var(--accent-text); }
.risk__item > span { display: grid; gap: var(--spacing-50); }
.risk__title { color: var(--ink); }
.risk__text { color: var(--ink-2); }
.hplans__grid { display: grid; gap: var(--spacing-200); align-items: stretch; }
.hplan { display: flex; flex-direction: column; }
.hplan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-100); min-height: 32px; }
.hplan__name { color: var(--ink); }
.hplan__price { margin-top: var(--spacing-200); display: flex; align-items: baseline; gap: var(--spacing-50); }
.hplan__amount { color: var(--ink); font-variant-numeric: tabular-nums; }
.hplan__per { color: var(--ink-3); }
.hplan__life { margin-top: var(--spacing-75); min-height: 20px; color: var(--ink-2); }
.hplan__tag { margin-top: var(--spacing-200); color: var(--ink-2); }
.hplan .btn { margin-top: var(--spacing-300); }
.hplan__list { margin: var(--spacing-300) 0 0; padding: 0; list-style: none; display: grid; gap: var(--spacing-100); }
.hplan__list li { display: flex; gap: var(--spacing-100); align-items: flex-start; color: var(--ink-2); text-wrap: pretty; }
.hplan__list .icon { width: 16px; height: 16px; margin-top: var(--spacing-25); color: var(--accent-text); }
.hplans__note { margin-top: var(--spacing-300); display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-100) var(--spacing-300); color: var(--ink-3); }
@media (min-width: 768px) { .risk { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hplans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Discord (only with an invitation in site.config.json) ────────────────────────────────── */
.discord-panel { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-400); border-radius: var(--radius-16); background: var(--bg-1); border: 1px solid var(--line); }
.discord-panel__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-12); background: var(--bg-3); color: var(--ink); }
.discord-panel__icon .icon { width: 24px; height: 24px; }
.discord-panel > div { flex: 1; }
.discord-panel p { color: var(--ink-2); }

/* ── motion of the home (transform and opacity only, on the base curve) ────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* the window arrives from lower down, a little after the words */
  .js .hero__app[data-load] { translate: 0 var(--spacing-700); animation-duration: 800ms; animation-timing-function: var(--ease); }
  /* the headline lifts away a little faster than the page while the window rises */
  .hero__text[data-scrub] { --scrub-end: 560px; translate: 0 calc(var(--p) * -48px); opacity: calc(1 - var(--p) * 0.55); }
  @media (min-width: 1024px) {
    /* the window leans back like a screen on a desk and straightens as the page scrolls */
    .hero__stage[data-scrub] { transform: perspective(1800px) rotateX(calc((1 - var(--p)) * 16deg)) scale(calc(0.94 + var(--p) * 0.06)); will-change: transform; }
  }
}

/* ── tablet and phone ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .community { padding-block: var(--spacing-900); }
}
@media (max-width: 1099px) {
  .presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .story__grid { display: block; }
  .story__col { padding: 0; }
  .story__media { display: none; }
  .story__step, .story__step:first-child { min-height: 0; padding-top: var(--spacing-700); }
  .story__more { margin-top: var(--spacing-600); }
  .js .story__step:not(.is-active) .story__text { opacity: 1; }
  .story__inline { display: block; margin-top: var(--spacing-300); max-width: 560px; }
  .story__inline img { width: 100%; height: auto; }
}
@media (max-width: 767px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--spacing-500); }
  .hero__actions .btn { flex: 1 1 100%; }
  .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-100); }
  .preset__counts { display: none; }
  .discord-panel { flex-direction: column; align-items: flex-start; }
  .community__foot { flex-direction: column; align-items: flex-start; }
}

/* ── last checks: balanced lines (no orphan words) and skeletons that show on the band ─────── */
.hero__title [data-line], .faq .qa__q > span { text-wrap: balance; }
.preset--skeleton .skeleton { background: var(--bg-3); }