/* ============================================================
   Kuribo landing site: layout, type and states
   (openspec/changes/archive/2026-09-22-landing-site/design.md Decisions 5 and 18,
   and § UI reference)

   Re-expressed from the design round's site.css (site-export, in both
   its warm-paper and night folders, which share it). Every color, font, spacing, radius, shadow and motion value is a
   var(): the global tokens (/assets/tokens.css) or the site's own
   (site-tokens.css, which also holds the two palettes). The two
   breakpoints, 720px and 1024px, are container queries on .site,
   written literally because a custom property can't be read there.
   ============================================================ */

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

html {
  background: var(--bg-canvas);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-body);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
}

.site {
  container: site / inline-size;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
.site > main {
  flex: 1;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3 {
  color: var(--text-strong);
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* ---------------- links and focus ---------------- */

a {
  color: var(--site-link);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--site-link-hover);
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: var(--site-focus-width) solid var(--site-focus-color);
  outline-offset: var(--site-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  .btn:active {
    transform: none !important;
  }
}

/* The skip link: the first focusable element, off the top edge until it
   takes focus. */
.skip {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  color: var(--text-strong);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--sp-5)));
}
.skip:focus {
  transform: none;
}

/* ---------------- frame ---------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--site-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@container site (min-width: 720px) {
  .wrap {
    max-width: calc(var(--site-max) + 2 * var(--sp-8));
    padding-inline: var(--sp-8);
  }
}
@container site (min-width: 1024px) {
  .wrap {
    max-width: calc(var(--site-max) + 2 * var(--sp-11));
    padding-inline: var(--sp-11);
  }
}

.status {
  background: var(--bg-sunken);
  color: var(--text-strong);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
  text-align: center;
  padding: var(--sp-4) var(--gutter);
}
.hdr {
  padding-block: var(--sp-5);
}

/* The wordmark: one inline SVG whose letters follow the palette's strong
   text and whose bar is the accent rose, so it reads on both palettes. */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  text-decoration: none;
}
.brand svg {
  display: block;
  height: var(--site-mark-h);
  width: auto;
}
.mark-letters {
  fill: var(--text-strong);
}
.mark-bar {
  fill: var(--accent);
}
@container site (min-width: 1024px) {
  .hdr {
    padding-block: var(--sp-7);
  }
  .hdr .brand svg {
    height: var(--site-mark-h-wide);
  }
}

/* ---------------- type ---------------- */

.hero-head {
  container: hero-head / inline-size;
}
.h-hero {
  font-size: var(--site-fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-extra);
}
@container site (min-width: 720px) {
  .h-hero {
    font-size: var(--site-fs-hero-wide);
  }
}
.h-sec {
  font-size: var(--site-fs-section);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-extra);
}
.h-page {
  font-size: var(--site-fs-page);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-extra);
}
.h-card {
  font-size: var(--fs-display);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-extra);
}
.lead {
  font-size: var(--fs-h2);
  line-height: var(--lh-body-lg);
  color: var(--text-strong);
}
.lead-in {
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.fine {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* ---------------- the rose pill ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: var(--site-btn-h);
  padding: 0 var(--sp-8);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--rose-500);
  color: var(--text-on-color);
  font: var(--fw-bold) var(--fs-body-lg) / 1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-std),
    transform var(--dur-fast) var(--ease-std);
}
.btn:hover,
.btn:active {
  background: var(--rose-600);
  color: var(--text-on-color);
  text-decoration: none;
}
.btn:active {
  transform: scale(var(--site-btn-press));
}

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

.fig {
  margin: 0;
  justify-self: center;
}
.device {
  width: var(--site-frame-w);
  max-width: 100%;
  padding: var(--site-frame-bezel);
  background: var(--site-frame-color);
  border-radius: var(--site-frame-radius);
}
.device img {
  width: 100%;
  aspect-ratio: 393 / 852;
  border-radius: var(--site-frame-screen-radius);
  background: var(--bg-surface);
}
.fig-hero .device {
  width: var(--site-frame-w-hero);
}

/* ---------------- 1 · hero ---------------- */

.hero {
  padding-block: var(--sp-7) 0;
}
.hero-grid {
  display: grid;
  gap: var(--sp-7);
}
.hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-7);
}
.hero-main .lead {
  color: var(--text-body);
  max-width: var(--site-measure);
}
.hero-main .btn {
  width: 100%;
}
.aud {
  display: grid;
  gap: var(--sp-5);
  padding-top: var(--sp-3);
}
.aud p:not(.fine) {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-strong);
}
.hero-grid > .fig {
  margin-top: var(--sp-5);
}
@container site (min-width: 720px) {
  .hero-main .btn {
    width: auto;
  }
  .aud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-7);
  }
  .aud .fine {
    grid-column: 1 / -1;
  }
}
@container site (min-width: 1024px) {
  .hero {
    padding-top: var(--sp-10);
  }
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-7);
    row-gap: var(--sp-10);
  }
  .hero-grid .hero-head {
    grid-column: 1 / span 9;
  }
  .hero-grid .hero-main {
    grid-column: 1 / span 6;
  }
  .hero-grid .aud {
    grid-column: 8 / span 5;
    grid-row: 2;
    grid-template-columns: 1fr;
    padding-top: 0;
  }
  /* With its screen, the phone takes the right column and the audience
     lines move under the text. */
  .hero-grid:has(> .fig) .hero-head {
    grid-column: 1 / span 7;
  }
  .hero-grid:has(> .fig) .aud {
    grid-column: 1 / span 7;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-grid:has(> .fig) > .fig {
    grid-column: 9 / span 4;
    grid-row: 1 / span 3;
    margin-top: 0;
    justify-self: end;
    align-self: center;
  }
}

/* ---------------- sections ---------------- */

.sec {
  padding-top: var(--site-sec-y);
}
.sec-grid {
  display: grid;
  gap: var(--sp-7);
}
.sec-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: var(--site-measure);
}
.sec-grid > .fig {
  margin-top: var(--sp-3);
}
@container site (min-width: 1024px) {
  .sec-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-7);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--border-subtle);
  }
  .sec-grid > .h-sec {
    grid-column: 1 / span 5;
  }
  .sec-grid > .sec-body {
    grid-column: 7 / span 6;
  }
  /* A section with its screen: heading and text stack on the left, the
     phone on the right. */
  .sec-grid:has(> .fig) > .h-sec,
  .sec-grid:has(> .fig) > .sec-body {
    grid-column: 1 / span 6;
  }
  .sec-grid:has(> .fig) > .sec-body {
    align-self: start;
  }
  .sec-grid:has(> .fig) > .fig {
    grid-column: 8 / span 5;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

/* 3 · the steps */
.steps {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.step {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
  border-top: 1px solid var(--border-subtle);
}
.step:first-child {
  border-top: 0;
  padding-top: 0;
}
.step h3 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
}
.steps + .lead {
  padding-top: var(--sp-7);
  border-top: 1px solid var(--border-subtle);
}
@container site (min-width: 1024px) {
  /* Once any step carries a screen, the list spans the grid and each
     step is text beside its phone. */
  .sec-grid:has(.step > .fig) > .h-sec {
    grid-column: 1 / span 6;
  }
  .sec-grid:has(.step > .fig) > .sec-body {
    grid-column: 1 / -1;
    max-width: none;
  }
  .sec-grid:has(.step > .fig) .step {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-7);
    align-items: center;
    padding-block: var(--sp-10);
  }
  .sec-grid:has(.step > .fig) .step-text {
    grid-column: 1 / span 6;
    max-width: var(--site-measure);
  }
  .sec-grid:has(.step > .fig) .step > .fig {
    grid-column: 8 / span 5;
  }
  .sec-grid:has(.step > .fig) .steps + .lead {
    max-width: var(--site-measure);
  }
}

/* 3b · the worked example, the page's one document card */
.sec-sub {
  padding-top: var(--sp-11);
}
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}
.example {
  display: grid;
  gap: var(--sp-7);
  padding: var(--sp-7) var(--sp-6);
}
.ex-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.ex-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: var(--site-measure);
}
.ex-body p + p {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
@container site (min-width: 720px) {
  .example {
    padding: var(--sp-10);
  }
}
@container site (min-width: 1024px) {
  .example {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-7);
  }
  .ex-head {
    grid-column: 1 / span 5;
  }
  .ex-body {
    grid-column: 7 / span 6;
  }
  .example:has(> .fig) .ex-head,
  .example:has(> .fig) .ex-body {
    grid-column: 1 / span 6;
  }
  .example:has(> .fig) > .fig {
    grid-column: 8 / span 5;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* 5 and 7 · plain lists */
.plain {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.plain li {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
.plain.flush li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ---------------- 8 · ask for a beta invite ---------------- */

.invite {
  padding-top: var(--site-sec-y);
  scroll-margin-top: var(--sp-7);
}
.inv-grid {
  display: grid;
  gap: var(--sp-8);
}
.inv-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: var(--site-measure);
}
.inv-text .h-sec {
  margin-bottom: var(--sp-2);
}
.inv-card {
  padding: var(--sp-7) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  align-self: start;
}
@container site (min-width: 720px) {
  .inv-card {
    padding: var(--sp-8);
  }
}
@container site (min-width: 1024px) {
  .inv-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-7);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--border-subtle);
  }
  .inv-text {
    grid-column: 1 / span 6;
  }
  .inv-card {
    grid-column: 8 / span 5;
  }
}
.inv-dark {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

/* ---------------- 9 · questions ---------------- */

.qa {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.qa details + details {
  border-top: 1px solid var(--border-subtle);
}
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--site-summary-h);
  padding: var(--sp-5) var(--sp-6);
  list-style: none;
  cursor: pointer;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa summary:focus-visible {
  outline-offset: var(--site-focus-inset);
  border-radius: var(--r-md);
}
.qa summary:hover {
  background: var(--bg-subtle);
}
.qa summary svg {
  flex: 0 0 auto;
  width: var(--site-icon);
  height: var(--site-icon);
  fill: currentColor;
}
.qa details[open] summary svg {
  transform: rotate(180deg);
}
.qa .qa-a {
  padding: 0 var(--sp-6) var(--sp-6);
}

/* ---------------- 10 · footer ---------------- */

.ftr {
  margin-top: var(--site-sec-y);
  border-top: 1px solid var(--border-strong);
  padding-block: var(--sp-10) var(--sp-11);
}
.ftr-grid {
  display: grid;
  gap: var(--sp-6);
}
.ftr-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: var(--site-measure);
}
.ftr-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
}
.ftr-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}
.ftr .brand svg {
  height: var(--site-mark-h-footer);
}
@container site (min-width: 1024px) {
  .ftr-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-7);
  }
  .ftr-grid > .brand {
    grid-column: 1 / span 5;
    align-self: start;
  }
  .ftr-main {
    grid-column: 7 / span 6;
  }
}

/* ---------------- /delete-account ---------------- */

.del {
  padding-block: var(--sp-10) 0;
}
.del-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: var(--site-measure-page);
}
@container site (min-width: 1024px) {
  .del {
    padding-top: var(--sp-11);
  }
}