/* Foldcard — the marketing site.
 *
 * The app's own tokens, and the app's own rule: light and dark, both. That is
 * not decoration here — "study happens in both conditions" is a product
 * decision, so a site that only works in one would be arguing against it.
 * The toggle in the header drives the page and the embedded demo together.
 */
:root {
  --bg: #0A0B0D;
  --surface: #141518;
  --raised: #1C1F24;
  --line: #2A2E35;
  --ink: #F5F7FA;
  --muted: #98A0AB;
  --faint: #5C646E;
  --accent: #4FA574;
  --accent-dim: #2F7D4F;
  --again: #E06B60;
  --hard: #D69A4E;
  --good: #4FA574;
  --easy: #6E9BD4;
  --measure: 40rem;
  --radius: 14px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] {
  --bg: #FBFAF8;
  --surface: #FFFFFF;
  --raised: #F3F2EF;
  --line: #E3E5E8;
  --ink: #16181B;
  --muted: #6B7178;
  --faint: #9AA1A8;
  --accent: #2F7D4F;
  --accent-dim: #2F7D4F;
  --again: #C8453A;
  --hard: #B5792A;
  --good: #2F7D4F;
  --easy: #3B6FB5;
  --shadow: 0 24px 60px rgba(22, 24, 27, 0.10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------------------------------------------------------------- layout */

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--measure); margin-inline: auto; }
section { padding: 96px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
@media (max-width: 720px) { section { padding: 64px 0; } }

.eyebrow {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin: 0 0 14px;
}
h1 {
  font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.04; letter-spacing: -0.03em;
  margin: 0 0 20px; font-weight: 700;
}
h1 .soft { color: var(--muted); display: block; }
h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.18; letter-spacing: -0.022em;
  margin: 0 0 16px; font-weight: 650;
}
h3 { font-size: 1.05rem; margin: 0 0 6px; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 16px; }
.lede { font-size: 1.16rem; color: var(--muted); max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: .88rem; color: var(--muted); }
.tiny { font-size: .78rem; color: var(--faint); }

/* ---------------------------------------------------------------- header */

header.site {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; gap: 18px; height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 650; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
header.site nav { margin-inline-start: auto; display: flex; gap: 20px; align-items: center; }
header.site nav a { color: var(--muted); text-decoration: none; font-size: .9rem; }
header.site nav a:hover { color: var(--ink); }
@media (max-width: 760px) { header.site nav a.hide-sm { display: none; } }

.themer {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .82rem;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.themer:hover { color: var(--ink); border-color: var(--accent); }

/* ---------------------------------------------------------------- pills */

.pill {
  display: inline-block; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 999px; padding: 5px 14px; font-size: .8rem;
  margin-bottom: 22px;
}
.pill b { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- cards */

.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid.three { grid-template-columns: 1fr; } .grid.two { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.card .k { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.card p { margin: 8px 0 0; color: var(--muted); font-size: .95rem; }
.card.lead { border-inline-start: 3px solid var(--accent); }

/* ------------------------------------------------------------ the device */

.stage {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; padding: 28px; box-shadow: var(--shadow);
}
.stage-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.stage-head .k { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.stage-head .posture { color: var(--accent); font-weight: 650; font-size: .95rem; }
.stage-head .angle { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; }

/* Wide screens put the device beside the control; narrow ones stack. */
.stage-split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 34px; align-items: start; }
@media (max-width: 800px) { .stage-split { grid-template-columns: 1fr; gap: 24px; } }
.stage-split .hinge { margin-top: 0; }

/* The phone. Two panels that reflow with the posture. */
.device {
  margin: 0 auto; width: min(320px, 100%);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 26px; padding: 12px; position: relative;
  transition: box-shadow .25s ease;
}
.device .screen {
  border-radius: 16px; overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column; height: 420px; position: relative;
  cursor: pointer;
  /* The two panels tilt apart when the device is stood up. Small angles on
     purpose: enough to read as a fold, not enough to blur the text. */
  perspective: 900px; perspective-origin: 50% 50%;
}
.crease {
  height: 0; overflow: hidden; background: var(--line); position: relative;
  transition: height .25s ease, margin .25s ease;
}
.device[data-posture="standing"] .crease { height: 3px; margin: 5px 0;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
  opacity: .5; }
.device[data-posture="closed"] .screen { filter: grayscale(1) brightness(.45); }

.panel-card {
  flex: 1 1 auto; padding: 18px; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
  transition: transform .3s ease, background-color .3s ease, flex-basis .3s ease;
  transform-origin: 50% 100%;
}
.panel-controls {
  flex: 0 0 auto; padding: 0 18px 14px;
  transition: transform .3s ease, background-color .3s ease, padding .3s ease;
  transform-origin: 50% 0%;
}
.device[data-posture="standing"] .panel-card {
  flex: 0 0 46%;
  transform: rotateX(9deg);
  background: color-mix(in srgb, var(--surface) 85%, var(--bg));
}
.device[data-posture="standing"] .panel-controls {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: 12px;
  transform: rotateX(-14deg);
  background: color-mix(in srgb, var(--raised) 92%, var(--bg));
}

/* Labels that name the two halves while they are apart. */
.panel-tag {
  position: absolute; inset-inline-end: 10px; font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.device[data-posture="standing"] .panel-tag { opacity: 1; }
.panel-tag.far { top: 8px; }
.panel-tag.near { bottom: 8px; }

.q { font-size: 1.05rem; line-height: 1.45; }
.rule-line { height: 1px; background: var(--line); margin: 14px 0; }
.a { font-size: 1.05rem; line-height: 1.45; }
.field[dir="rtl"] { text-align: right; }
.card-meta { margin-top: auto; padding-top: 10px; }

.progress { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade {
  border: 0; border-radius: 11px; padding: 10px 4px; color: #fff; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 550; line-height: 1.15;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .09s ease, filter .15s ease;
}
.grade small { font-size: .68rem; opacity: .85; font-variant-numeric: tabular-nums; }
.grade:disabled { opacity: .34; cursor: default; }
.grade:not(:disabled):active { transform: scale(.97); }
.grade.again { background: var(--again); }
.grade.hard { background: var(--hard); }
.grade.good { background: var(--good); }
.grade.easy { background: var(--easy); }

.tap-hint {
  position: absolute; inset-inline: 0; bottom: 0; text-align: center;
  font-size: .78rem; color: var(--faint); padding-bottom: 6px; pointer-events: none;
}

/* --------------------------------------------------------- hinge control */

.hinge { margin-top: 22px; }
.hinge svg { display: block; width: 100%; height: auto; touch-action: none; cursor: ew-resize; }
.hinge-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: .8rem; color: var(--faint); }
.hinge-legend b { color: var(--muted); font-weight: 500; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }

.states { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.state-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .85rem; cursor: pointer;
}
.state-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* -------------------------------------------------------------- ladder */

.ladder { display: flex; align-items: flex-end; gap: 6px; height: 160px; margin: 20px 0 8px; }
.rung { flex: 1; background: var(--raised); border-radius: 6px 6px 0 0; position: relative; min-height: 6px;
        border: 1px solid var(--line); border-bottom: 0; transition: height .35s cubic-bezier(.2,.8,.2,1); }
.rung span { position: absolute; top: -20px; inset-inline: 0; text-align: center; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rung.lead { background: color-mix(in srgb, var(--accent) 26%, var(--surface)); border-color: var(--accent); }

/* ------------------------------------------------------------- report */

.report { font-size: .93rem; }
.report li { margin: 0 0 10px; color: var(--muted); }
.report li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.report li.warn { color: var(--muted); }
.bar { height: 6px; background: var(--raised); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .25s linear; }

/* -------------------------------------------------------------- table */

table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--faint); font-weight: 500; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
td b { font-weight: 600; }

/* --------------------------------------------------------------- cta */

.cta { text-align: center; }
.cta h2 { max-width: 20ch; margin-inline: auto; }
.btn {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  border-radius: 12px; padding: 13px 26px; font-weight: 600; border: 0; font: inherit;
  font-weight: 600; cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }

footer.site { border-top: 1px solid var(--line); padding: 34px 0 54px; color: var(--faint); font-size: .86rem; }
footer.site a { color: var(--muted); }
footer.site p { margin: 0 0 8px; }

/* ------------------------------------------------- sub-pages (support…) */

.doc { padding: 56px 0 72px; max-width: var(--measure); margin-inline: auto; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.6rem); }
.doc h2 { font-size: 1.25rem; margin: 40px 0 10px; }
.doc h3 { font-size: 1rem; margin: 26px 0 6px; }
.doc ul, .doc ol { padding-inline-start: 1.15rem; }
.doc li { margin: 6px 0; }
.crumbs { margin-bottom: 24px; font-size: .9rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------- one card, over weeks */

.life-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.life-table th { color: var(--faint); font-weight: 500; font-size: .72rem;
                 letter-spacing: .06em; text-transform: uppercase; padding-bottom: 8px; }
.life-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line);
                 color: var(--muted); font-variant-numeric: tabular-nums; }
.life-table td b { color: var(--ink); }
.life-table tbody tr:last-child td { border-bottom: 0; }
.life-table tbody tr:last-child td b { color: var(--accent); }

.tag { display: inline-block; border-radius: 6px; padding: 1px 8px; font-size: .78rem;
       color: #fff; text-transform: capitalize; }
.tag-again { background: var(--again); }
.tag-hard  { background: var(--hard); }
.tag-good  { background: var(--good); }
.tag-easy  { background: var(--easy); }

/* ----------------------------------------------------- getting cards in */

.route { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 620px) { .route { grid-template-columns: 1fr; gap: 10px; } }
.route-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; font-weight: 650;
  border: 1px solid var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.route > div > h3 { font-size: 1.28rem; margin-bottom: 10px; letter-spacing: -0.015em; }

ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 16px; }
ol.steps li {
  counter-increment: step; position: relative; padding-inline-start: 30px;
  margin: 0 0 10px; color: var(--muted);
}
ol.steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%; font-size: .72rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  background: var(--raised); color: var(--muted); border: 1px solid var(--line);
}
ol.steps li b { color: var(--ink); font-weight: 600; }

.field-label {
  display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 6px;
}
.field-label + .field-input { margin-bottom: 16px; }
.field-input {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: .95rem; line-height: 1.45; resize: vertical;
}
.field-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.minicard {
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 15px; margin-bottom: 10px; position: relative;
}
.minicard:last-child { margin-bottom: 0; }
.minicard-tag {
  position: absolute; inset-inline-end: 12px; top: 10px;
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}
.minicard-q { font-size: .95rem; line-height: 1.45; padding-inline-end: 54px; }
.minicard-a {
  font-size: .95rem; line-height: 1.45; color: var(--muted);
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
}