/* Camel CMS landing page
   ------------------------------------------------------------------
   Plain CSS, no build step. Colors live in variables below.
   The accent variables are changed live by script.js when a visitor
   picks an accent dot in the demo, which recolors every button on the
   page. Fonts are self-hosted (fonts/), so the page makes no requests
   to Google or any other third party. */

@font-face {
  font-family: "Camel Manrope";
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope.woff2") format("woff2");
}

@font-face {
  font-family: "Camel Space Grotesk";
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk.woff2") format("woff2");
}

:root {
  /* page */
  --bg: #fcfcfd;
  --ink: #1b1a21;
  --ink-soft: #46424e;
  --muted: #5e5866;
  --faint: #8a8591;
  --line: rgba(20, 16, 40, 0.14);
  --night: #1b1a21;
  --night-ink: #fbf6ec;
  --night-soft: #d9d3ca;
  --night-muted: #a19cab;
  --sand: #f3e7d1;
  --gold: #fcc44b;
  --amber-text: #8a5100;
  --amber-deep: #6b4200;
  --camel: #c48b45;
  --trail: #d9b98a;
  --code-bg: #f3ead9;

  /* accent: amber by default, changed by script.js */
  --accent-1: #fcc44b;
  --accent: #f59e0b;
  --accent-3: #e8840c;
  --accent-ink: #2b1700;
  --accent-rgb: 245, 158, 11;

  /* type */
  --font-display: "Camel Space Grotesk", "Camel Manrope", system-ui, sans-serif;
  --font-body: "Camel Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --gutter: 40px;
  --panel-inset: 40px;
}

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

html {
  scroll-padding-top: 120px;
  background: var(--bg);
}

/* script.js adds .is-loaded after the page loads. Smooth from the start
   can stop a link from another page (privacy.html -> index.html#faq)
   jumping to its section. */
html.is-loaded {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--amber-text);
  text-decoration: none;
}

a:hover {
  color: #5f3800;
}

code {
  font-family: var(--font-mono);
}

img {
  display: block;
}

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.icon-xs {
  width: 14px;
  height: 14px;
}

.icon-gold {
  width: 20px;
  height: 20px;
  stroke: var(--gold);
  stroke-width: 2.4;
}

.gold {
  color: var(--gold);
}

.amber {
  color: var(--amber-text);
}

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

/* ---------- Layout helpers ---------- */

.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Panels run the width of the window, keeping the white border, however
   wide it gets. Their content doesn't: --panel-pad grows past 80px on wide
   screens so it stays in the same 1200px column as .wrap. */
.panel {
  --panel-pad: max(80px, calc(50% - var(--panel-inset) - 600px));
  width: calc(100% - 2 * var(--panel-inset));
  margin: 0 auto;
  border-radius: 36px;
}

.panel-dark {
  background: var(--night);
  color: var(--night-ink);
}

.panel-sand {
  background: var(--sand);
}

.section {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 120px;
  padding-bottom: 120px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}

.section-head-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}

.section h2,
.panel h2 {
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.section h2.h2-sm {
  font-size: 44px;
  line-height: 1.08;
}

.section-aside {
  max-width: 380px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.section-aside-wide {
  max-width: 440px;
}

.code-chip {
  font-size: 15px;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 5px;
}

/* A terminal command: $ npm run create. The prompt is CSS so it isn't copied. */
.code-cmd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--night-ink);
  background: var(--night);
  border-radius: 6px;
  white-space: nowrap;
}

.code-cmd::before {
  content: "$";
  content: "$" / "";
  color: var(--gold);
}

/* Numbered section label: 01 ── the one-tiny-change email */
.label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber-text);
}

.label .rule {
  width: 40px;
  height: 1px;
  background: var(--camel);
}

.label-gold {
  color: var(--gold);
}

.label-gold .rule {
  background: var(--gold);
}

.label-deep {
  color: var(--amber-deep);
}

.label-deep .rule {
  background: var(--amber-deep);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 800;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-accent,
.btn-accent:hover {
  color: var(--accent-ink);
  background: var(--accent);
}

.btn-lg {
  height: 60px;
  padding: 0 30px;
  font-size: 18px;
}

.btn-glow {
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.35);
}

/* Magnetic: script.js sets --mx and --my while the pointer is near.
   The label moves a little further than the button, for depth. */
.btn-magnetic {
  translate: var(--mx, 0px) var(--my, 0px);
}

.btn-magnetic-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  translate: calc(var(--mx, 0px) * 0.4) calc(var(--my, 0px) * 0.4);
}

/* Outline only; on hover a frosted-glass layer fills it from the bottom up. */
.btn-ghost-dark,
.btn-ghost-dark:hover {
  position: relative;
  isolation: isolate;
  height: 60px;
  padding: 0 26px;
  font-size: 17px;
  font-weight: 700;
  color: var(--night-ink);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: transform 0.15s, border-color 0.3s;
}

.btn-ghost-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07));
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  clip-path: inset(100% 0 0 0 round 999px);
  transition: clip-path 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-ghost-dark:hover,
.btn-ghost-dark:focus-visible {
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-ghost-dark:hover::before,
.btn-ghost-dark:focus-visible::before {
  clip-path: inset(0 0 0 0 round 999px);
}

/* ---------- Nav: the trail ---------- */

.site-nav {
  position: sticky;
  top: 16px;
  z-index: 10;
  width: calc(100% - 80px);
  /* stays put on wide screens, over the content, while the hero and panels stretch */
  max-width: 1280px;
  height: 78px;
  margin: 16px auto 0;
  padding: 0 12px 0 22px;
  display: flex;
  align-items: center;
  gap: 28px;
  /* See-through, but dark enough that the labels stay readable over the
     white sections too. */
  background: rgba(24, 23, 30, 0.75);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(10, 6, 2, 0.28);
}

.site-nav-logo {
  flex-shrink: 0;
}

.site-nav-logo img {
  width: 122px;
  height: 40px;
  object-fit: contain;
}

.trail {
  --stops: 6;
  --fill: 0;
  /* 0 to 1, set by script.js */
  position: relative;
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(var(--stops), minmax(0, 1fr));
}

/* the dashed line and its accent fill run from the first dot to the last */
.trail-line,
.trail-fill {
  position: absolute;
  left: calc(100% / var(--stops) / 2);
}

.trail-line {
  right: calc(100% / var(--stops) / 2);
  top: 5px;
  border-top: 2px dashed rgba(255, 255, 255, 0.2);
}

.trail-fill {
  top: 4px;
  height: 4px;
  width: calc((100% - 100% / var(--stops)) * var(--fill));
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent));
}

.trail-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #cbc6d1;
  white-space: nowrap;
}

.trail-stop:hover {
  color: var(--night-ink);
}

.trail-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #18171e;
  border: 2px solid rgba(255, 255, 255, 0.35);
  transition: background 0.2s, box-shadow 0.2s;
}

.trail-stop.is-passed {
  color: var(--night-soft);
}

.trail-stop.is-passed .trail-dot,
.trail-stop.is-active .trail-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.trail-stop.is-active {
  color: var(--night-ink);
  font-weight: 800;
}

.trail-stop.is-active .trail-dot {
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.28);
}

.site-nav-buy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.site-nav-price {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  color: #cbc6d1;
  text-align: right;
}

.btn-nav {
  height: 52px;
  padding: 0 20px;
  font-size: 15px;
  border-radius: 14px;
}

.btn-nav .icon {
  width: 16px;
  height: 16px;
}

/* Shown at 900px and under, where the trail becomes a dropdown menu.
   Two bars that cross into an X while it's open. */
.site-nav-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--night-ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.site-nav-toggle:hover,
.site-nav.is-open .site-nav-toggle {
  background: rgba(255, 255, 255, 0.14);
}

.site-nav-toggle-bars {
  position: relative;
  width: 18px;
  height: 10px;
}

.site-nav-toggle-bars::before,
.site-nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s;
}

.site-nav-toggle-bars::before {
  top: 0;
}

.site-nav-toggle-bars::after {
  bottom: 0;
}

.site-nav.is-open .site-nav-toggle-bars::before {
  transform: translateY(4px) rotate(45deg);
}

.site-nav.is-open .site-nav-toggle-bars::after {
  transform: translateY(-4px) rotate(-45deg);
}

/* ---------- Page trail: a camel walks the left margin ---------- */

/* script.js draws the path through the margin, a stop beside each
   numbered label, and the camel, which keeps level with the middle of
   the window. The walked part fills in with the accent, like the nav. */
.page-trail {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.page-trail-path {
  fill: none;
  stroke: rgba(196, 139, 69, 0.3);
  stroke-width: 2;
  stroke-linecap: round;
}

.page-trail-walked {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
}

.page-trail-stop {
  fill: var(--bg);
  stroke: var(--trail);
  stroke-width: 1.5;
  transition: fill 0.2s, stroke 0.2s;
}

.page-trail-stop.is-passed {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 2;
}

/* the camel, seen from above */
.camel-body {
  fill: var(--camel);
}

.camel-leg {
  fill: #a8743a;
}

.camel-leg-line,
.camel-tail {
  fill: none;
  stroke: #a8743a;
  stroke-width: 2.8;
  stroke-linecap: round;
}

.camel-tail {
  stroke-width: 1.2;
}

.camel-hump {
  fill: #d4a060;
}

.camel-hump-shade {
  fill: rgba(122, 79, 34, 0.45);
}

.camel-hump-light {
  fill: #e8c28a;
}

.camel-muzzle {
  fill: #dcae74;
}

.camel-eye {
  fill: #3b2410;
}

.camel-dark {
  fill: #7a4f22;
}

.camel-shadow {
  fill: rgba(60, 35, 10, 0.16);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  width: calc(100% - 40px);
  margin: 24px auto 0;
  padding: 104px var(--gutter) 460px;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--night-ink);
  background: linear-gradient(180deg, #121118 0%, #1b1822 38%, #3a2418 68%, #9a5418 88%, #d9892a 100%);
}

/* stars: the admin's dot grid plus a few brighter ones, fading toward the horizon */
.hero-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.6px) 13px 9px / 104px 78px,
    radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1.6px) 61px 47px / 142px 118px,
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.4px) 0 0 / 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 72%);
}

.hero-sun {
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 760px;
  height: 760px;
  margin-left: -380px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 214, 120, 0.95) 0%, rgba(252, 196, 75, 0.7) 22%, rgba(245, 158, 11, 0.28) 45%, transparent 68%);
}

.hero-dunes {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 320px;
}

.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
  max-width: 1160px;
  container-type: inline-size;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gold);
  /* on phones the rules shrink (and on the narrowest, go) instead of the text wrapping */
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 400px) {
  .hero-kicker .rule {
    display: none;
  }
}

.hero-kicker .rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
}

/* each line stays whole; the size shrinks so "Camel CMS carries the edits." (~12.7em wide) fits */
.hero h1 {
  font-size: min(88px, 100cqi / 12.9);
  white-space: nowrap;
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--night-ink);
}

.hero-lede {
  max-width: 700px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--night-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #b9b2a8;
}

.hero-facts .sep {
  color: #6e6760;
}

.hero-try {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #ece6dc;
}

.hero-try-label {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* kept whole, so a narrow phone breaks the chip before it */
.chip-aside {
  white-space: nowrap;
}

.chip-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--gold);
  color: #2b1700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

/* ---------- Live admin demo ----------
   Mirrors the real admin panel (admin/admin.css): the same tokens, sizes and
   hover states, with a demo- prefix. Sizes stay in rem where admin.css uses
   rem, so the two are easy to compare. --accent here is admin.css's
   --accent-2 (the main accent color). */

.demo-section {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: -420px auto 0;
  padding: 0 var(--gutter) 40px;
}

.demo {
  --d-bg: #fcfcfd;
  --d-ink: #1b1a21;
  --d-ink-soft: #46424e;
  --d-muted: #67636f;
  --d-line: rgba(20, 16, 40, 0.09);
  --d-line-strong: rgba(20, 16, 40, 0.16);
  --d-glass: rgba(255, 255, 255, 0.78);
  --d-glass-strong: rgba(255, 255, 255, 0.95);
  --d-glass-edge: rgba(255, 255, 255, 0.9);
  --d-raised: #ffffff;
  --d-sunken: rgba(20, 16, 40, 0.045);
  --d-field: #ffffff;
  --d-shadow: 0 1px 2px rgba(20, 16, 40, 0.05), 0 12px 32px rgba(20, 16, 40, 0.07);
  --d-sidebar-top: color-mix(in srgb, var(--accent) 9%, #ffffff);
  --d-sidebar-bottom: color-mix(in srgb, var(--accent) 3%, #ffffff);
  --d-topbar: rgba(252, 252, 253, 0.76);
  --d-nav-ink: #37343d;
  --d-nav-icon: #7a7582;
  --d-nav-heading: #8a8591;
  --d-nav-hover: rgba(255, 255, 255, 0.75);
  --d-switch-off: rgba(20, 16, 40, 0.14);
  --d-glow: rgba(var(--accent-rgb), 0.1);
  --d-glow-2: rgba(124, 108, 240, 0.07);
  --d-dots: rgba(20, 16, 40, 0.07);
  --d-accent-text: color-mix(in srgb, var(--accent) 72%, #000000);
  --d-success: #15803d;
  --d-chrome: #f3f2f5;

  color-scheme: light;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--d-line-strong);
  box-shadow: 0 50px 100px rgba(10, 6, 2, 0.38), 0 2px 6px rgba(20, 16, 40, 0.08);
  background: var(--d-bg);
  color: var(--d-ink);
}

.demo[data-theme="dark"] {
  --d-bg: #101015;
  --d-ink: #f1eff4;
  --d-ink-soft: #cbc7d2;
  --d-muted: #a19cab;
  --d-line: rgba(255, 255, 255, 0.08);
  --d-line-strong: rgba(255, 255, 255, 0.15);
  --d-glass: rgba(30, 30, 38, 0.74);
  --d-glass-strong: rgba(40, 40, 50, 0.92);
  --d-glass-edge: rgba(255, 255, 255, 0.07);
  --d-raised: #24242d;
  --d-sunken: rgba(255, 255, 255, 0.05);
  --d-field: rgba(255, 255, 255, 0.05);
  --d-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --d-sidebar-top: color-mix(in srgb, var(--accent) 11%, #16161c);
  --d-sidebar-bottom: color-mix(in srgb, var(--accent) 4%, #131318);
  --d-topbar: rgba(16, 16, 21, 0.74);
  --d-nav-ink: #dcd8e2;
  --d-nav-icon: #8f8a99;
  --d-nav-heading: #7f7a88;
  --d-nav-hover: rgba(255, 255, 255, 0.06);
  --d-switch-off: rgba(255, 255, 255, 0.16);
  --d-glow: rgba(var(--accent-rgb), 0.14);
  --d-glow-2: rgba(124, 108, 240, 0.1);
  --d-dots: rgba(255, 255, 255, 0.06);
  --d-accent-text: color-mix(in srgb, var(--accent) 62%, #ffffff);
  --d-success: #4ade80;
  --d-chrome: #1a1a21;

  color-scheme: dark;
}

.demo-chrome {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--d-chrome);
  border-bottom: 1px solid var(--d-line);
}

.demo-chrome>span[class^="dot-"] {
  width: 11px;
  height: 11px;
  border-radius: 999px;
}

.dot-red {
  background: #ff5f57;
}

.dot-yellow {
  background: #febc2e;
}

.dot-green {
  background: #28c840;
}

.demo-url {
  margin: 0 auto;
  width: 380px;
  max-width: 60%;
  height: 28px;
  border-radius: 8px;
  background: var(--d-sunken);
  color: var(--d-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.demo-chrome-spacer {
  width: 51px;
}

.demo-body {
  height: 1000px;
  display: flex;
  font-family: var(--font-body);
  background:
    radial-gradient(1100px 600px at 0% 0%, var(--d-glow), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, var(--d-glow-2), transparent 60%),
    radial-gradient(var(--d-dots) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--d-bg);
}

/* The admin's icons are larger and thinner than the rest of this page's. */
.demo-body .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

/* The admin's base styles. :where() keeps them at zero specificity, so any
   class below wins. Titles are Space Grotesk, like the admin's h1 to h4. */
:where(.demo-body) h3,
:where(.demo-body) h4,
:where(.demo-body) h5 {
  margin: 0;
  font-family: var(--font-display);
}

:where(.demo-body) button {
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

/* The glass cards: see-through, with a light edge and a soft shadow. */
.demo-glass {
  background: var(--d-glass);
  border: 1px solid var(--d-glass-edge);
  border-radius: 18px;
  box-shadow: var(--d-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

/* buttons */
.demo-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 11px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent) 55%, var(--accent-3));
  color: var(--accent-ink);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.demo-primary-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.1) brightness(1.04);
  box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: var(--accent-ink);
}

.demo-primary-btn:disabled {
  background: var(--d-sunken);
  color: var(--d-muted);
  box-shadow: none;
  cursor: default;
}

.demo-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--d-line-strong);
  border-radius: 12px;
  background: var(--d-glass-strong);
  color: var(--d-ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.demo-secondary-btn:hover:not(:disabled) {
  background: var(--d-raised);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--d-ink);
}

.demo-secondary-btn:disabled {
  color: var(--d-muted);
  cursor: default;
}

.demo-secondary-btn .icon {
  width: 16px;
  height: 16px;
}

.demo-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--d-accent-text);
  font-size: 0.85rem;
  font-weight: 700;
}

.demo-text-link .icon {
  width: 16px;
  height: 16px;
}

.demo-text-link:hover {
  text-decoration: underline;
}

/* sidebar */
.demo-sidebar {
  width: 272px;
  flex-shrink: 0;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, var(--d-sidebar-top), var(--d-sidebar-bottom));
  border-right: 1px solid rgba(var(--accent-rgb), 0.14);
}

.demo-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 8px 18px;
}

.demo-logo {
  width: 100%;
  max-width: 220px;
  height: auto;
}

.demo-logo-dark,
.demo[data-theme="dark"] .demo-logo-light {
  display: none;
}

.demo[data-theme="dark"] .demo-logo-dark {
  display: block;
}

/* As wide as the logo, so it centers under it. The left padding balances the
   letter-spacing after the last letter. */
.demo-brand-sub {
  width: 100%;
  max-width: 220px;
  padding-left: 0.14em;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-muted);
}

.demo-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.demo-nav-heading {
  margin: 18px 12px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-nav-heading);
}

.demo-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--d-nav-ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.demo-nav-item .icon {
  color: var(--d-nav-icon);
}

.demo-nav-item:hover {
  background: var(--d-nav-hover);
}

.demo-nav-item[aria-current="page"] {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--d-accent-text);
}

.demo-nav-item[aria-current="page"] .icon {
  color: var(--d-accent-text);
}

.demo-nav-item span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-nav-count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--d-accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.demo-nav-logout {
  margin-top: 4px;
  color: var(--d-muted);
}

/* Not part of the admin's sidebar: at 900px and under the screens fold
   into this picker, styled like the open screen's sidebar button. */
.demo-nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--d-accent-text);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
}

.demo-nav-toggle-current {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.demo-nav-toggle-more {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.demo-nav-toggle-chevron {
  transition: transform 0.2s;
}

.demo-sidebar.is-nav-open .demo-nav-toggle-chevron {
  transform: rotate(180deg);
}

/* interface controls */
.demo-interface {
  position: relative;
  padding-top: 8px;
  border-top: 1px solid var(--d-line);
}

.demo-interface .demo-nav-heading {
  margin-top: 12px;
}

/* Not part of the admin: a note from this page, in the sidebar's spare room
   just above the controls, so it never covers the screen beside it. */
.demo-tryme {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 3;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--night);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.demo-tryme .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}

.demo-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px;
  color: var(--d-nav-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.demo-control-row-accent {
  padding-bottom: 2px;
}

.demo-switch {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--d-line-strong);
  background: var(--d-switch-off);
  transition: background 0.2s, border-color 0.2s;
}

.demo-switch[aria-checked="true"] {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
  border-color: transparent;
}

.demo-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.demo-switch[aria-checked="true"] .demo-switch-thumb {
  transform: translateX(22px);
}

.demo-switch-thumb .icon {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.demo-switch .icon-sun {
  color: #c27803;
}

.demo-switch .icon-moon {
  display: none;
  color: #4b5563;
}

.demo-switch[aria-checked="true"] .icon-sun {
  display: none;
}

.demo-switch[aria-checked="true"] .icon-moon {
  display: block;
}

.demo-accents {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 6px 12px 10px;
}

.accent-dot {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s;
}

.accent-dot:hover {
  transform: scale(1.12);
}

/* The chosen color gets a ring and a white center, like macOS. */
.accent-dot[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--d-sidebar-bottom), 0 0 0 4px var(--dot);
}

.accent-dot[aria-checked="true"]::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #fff;
}

.accent-dot[data-accent="amber"] {
  --dot: #f59e0b;
}

.accent-dot[data-accent="yellow"] {
  --dot: #eab308;
}

.accent-dot[data-accent="red"] {
  --dot: #dc2626;
}

.accent-dot[data-accent="pink"] {
  --dot: #db2777;
}

.accent-dot[data-accent="purple"] {
  --dot: #7c3aed;
}

.accent-dot[data-accent="blue"] {
  --dot: #2563eb;
}

.accent-dot[data-accent="green"] {
  --dot: #22c55e;
}

.accent-dot[data-accent="graphite"] {
  --dot: #4b5563;
}

/* main */
.demo-main {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.demo-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 36px;
  background: var(--d-topbar);
  border-bottom: 1px solid var(--d-line);
}

.demo-search {
  position: relative;
  flex: 1;
  max-width: 460px;
}

.demo-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--d-muted);
  pointer-events: none;
}

.demo-search input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--d-glass-edge);
  border-radius: 14px;
  background: var(--d-glass-strong);
  box-shadow: var(--d-shadow);
  color: var(--d-ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.demo-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* The main call to action everywhere: bigger than the other buttons. */
.demo-cta-btn {
  padding: 12px 22px;
  font-size: 0.98rem;
}

.demo-cta-btn .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.demo-views {
  container: demo-views / inline-size;
  flex-grow: 1;
  min-height: 0;
  overflow: auto;
  padding: 32px 36px 72px;
}

.demo-view-header {
  margin-bottom: 22px;
}

.demo-view-header h3 {
  margin: 0 0 6px;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--d-ink);
}

.demo-view-header p {
  color: var(--d-muted);
}

/* dashboard */
.demo-hero-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 44px;
  background:
    radial-gradient(500px 240px at 100% 0%, rgba(var(--accent-rgb), 0.2), transparent 70%),
    var(--d-glass);
}

.demo-hero-text {
  max-width: 560px;
}

.demo-hero-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

/* The status badge takes the accent color; only its dot is green. */
.demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--d-accent-text);
  font-size: 0.85rem;
  font-weight: 700;
}

.demo-pill-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--d-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--d-success) 22%, transparent);
}

.demo-hero-text h3 {
  margin: 18px 0 10px;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--d-ink);
}

.demo-greeting-emoji {
  font-size: 0.9em;
}

.demo-hero-text p {
  color: var(--d-ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
}

.demo-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  flex-shrink: 0;
}

.demo-hero-cta {
  gap: 14px;
  padding: 18px 26px;
  border-radius: 16px;
  text-align: left;
}

.demo-hero-cta .icon {
  width: 26px;
  height: 26px;
  stroke-width: 2.1;
}

.demo-hero-cta span {
  display: flex;
  flex-direction: column;
}

.demo-hero-cta strong {
  font-size: 1.15rem;
}

.demo-hero-cta small {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.8;
}

.demo-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

/* Stat and section cards lift and take an accent outline on hover. */
.demo-stat {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  color: var(--d-ink);
  font-weight: 400;
  text-align: left;
  transition: transform 0.15s, border-color 0.15s;
}

.demo-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.demo-stat:hover .demo-text-link {
  text-decoration: underline;
}

.demo-stat:focus-visible,
.demo-section-card:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.55);
  outline-offset: 2px;
}

.demo-stat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  color: var(--d-ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
}

.demo-stat-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex-shrink: 0;
}

.demo-tint-accent {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--d-accent-text);
}

.demo-tint-violet {
  background: rgba(99, 82, 230, 0.13);
  color: #5b4bd6;
}

.demo-tint-blue {
  background: rgba(30, 111, 184, 0.13);
  color: #1e6fb8;
}

.demo-tint-rose {
  background: rgba(192, 42, 91, 0.12);
  color: #c02a5b;
}

.demo[data-theme="dark"] .demo-tint-violet {
  background: rgba(139, 125, 255, 0.16);
  color: #b3a9ff;
}

.demo[data-theme="dark"] .demo-tint-blue {
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}

.demo[data-theme="dark"] .demo-tint-rose {
  background: rgba(244, 114, 182, 0.16);
  color: #f9a8d4;
}

.demo-stat-value {
  display: block;
  margin: 10px 0 4px;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-stat-sub {
  display: block;
  margin: auto 0 0;
  color: var(--d-muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-stat-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 12px;
  min-height: 30px;
}

.demo-stat-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--d-raised);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.demo-stat .demo-text-link {
  margin-top: auto;
  align-self: flex-start;
}

.demo-stat .demo-stat-sub+.demo-text-link {
  margin-top: 12px;
}

.demo-block-heading {
  margin: 34px 0 14px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.demo-block-heading:focus {
  outline: none;
}

.demo-section-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.demo-section-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  color: var(--d-ink);
  font-weight: 400;
  text-align: left;
  transition: transform 0.15s, border-color 0.15s;
}

.demo-section-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.demo-section-card strong {
  font-size: 1.02rem;
}

.demo-section-card-fields {
  color: var(--d-muted);
  font-size: 0.82rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.demo-section-card-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--d-accent-text);
  font-size: 0.82rem;
  font-weight: 700;
}

.demo-section-card-count .icon {
  width: 15px;
  height: 15px;
}

/* fields */
.demo-field-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}

.demo-field-card {
  padding: 24px 26px;
}

.demo-field-card>label {
  display: block;
  margin-bottom: 4px;
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--d-ink);
}

.demo-field-help {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--d-muted);
}

.demo-field-card input,
.demo-field-card textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--d-line-strong);
  border-radius: 12px;
  background: var(--d-field);
  color: var(--d-ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.demo-field-card textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.demo-search input::placeholder {
  color: var(--d-muted);
}

.demo-search input:focus,
.demo-field-card input:focus,
.demo-field-card textarea:focus,
.demo-setup-link-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.22);
}

.demo-field-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.demo-field-status {
  height: 1.2em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--d-success);
  opacity: 0;
  transition: opacity 0.2s;
}

.demo-field-status.is-visible {
  opacity: 1;
}

/* a field's own history */
.demo-history-wrapper {
  margin-top: 16px;
}

.demo-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--d-sunken);
  color: var(--d-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.demo-history-toggle::before {
  content: "↺";
  font-size: 0.95em;
}

.demo-history-toggle:hover {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--d-accent-text);
}

.demo-history-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--d-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--d-line);
  border-radius: 12px;
  background: var(--d-sunken);
}

.demo-history-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.demo-history-preview {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-history-time {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--d-muted);
}

.demo-history-restore-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--d-line-strong);
  border-radius: 10px;
  background: var(--d-raised);
  color: var(--d-ink);
  font-size: 0.8rem;
  font-weight: 600;
}

.demo-history-restore-btn:hover:not(:disabled) {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.demo-history-restore-btn:disabled {
  color: var(--d-muted);
  cursor: default;
}

/* photos */
.demo-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.demo-photo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.demo-photo-img {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--d-line);
}

.demo-photo-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}

.demo-photo-date {
  color: var(--d-muted);
  font-size: 0.78rem;
}

.demo-photo-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* A place a photo is used; clicking it opens that section. */
.demo-use-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--d-accent-text);
  font-size: 0.78rem;
  font-weight: 600;
}

.demo-use-chip:hover {
  background: rgba(var(--accent-rgb), 0.24);
}

.demo-use-chip.is-earlier {
  background: var(--d-sunken);
  color: var(--d-muted);
}

.demo-photo-unused {
  color: var(--d-muted);
  font-size: 0.82rem;
}

/* history screen */
.demo-undo-publish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  margin-bottom: 16px;
}

.demo-undo-publish-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.demo-history-list {
  padding: 8px 24px 20px;
}

.demo-history-day {
  margin: 18px 0 8px;
  color: var(--d-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-change+.demo-change {
  border-top: 1px solid var(--d-line);
}

/* A change's summary line; clicking it opens Before / After below. */
.demo-change-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 6px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--d-ink);
  font-weight: 400;
  text-align: left;
}

.demo-change-row:hover {
  background: var(--d-sunken);
}

.demo-change-row:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.55);
  outline-offset: 1px;
}

.demo-change-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--d-sunken);
  border: 1px solid var(--d-line);
  color: var(--d-muted);
}

.demo-change-thumb-colors {
  grid-template-columns: repeat(2, 14px);
  gap: 3px;
  place-content: center;
}

.demo-change-thumb-colors span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--d-line-strong);
}

.demo-change-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.demo-change-field {
  font-size: 0.95rem;
  font-weight: 700;
}

.demo-change-section {
  color: var(--d-muted);
  font-weight: 500;
}

.demo-change-preview {
  color: var(--d-ink-soft);
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-change-time {
  color: var(--d-muted);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.demo-change-chevron {
  flex-shrink: 0;
  color: var(--d-muted);
  transition: transform 0.15s;
}

.demo-change.is-open .demo-change-chevron {
  transform: rotate(180deg);
}

.demo-change-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 6px 18px 64px;
}

.demo-change-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.demo-change-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--d-sunken);
  border: 1px solid var(--d-line);
}

.demo-change-side h5 {
  color: var(--d-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-change-value {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.demo-change-photo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px solid var(--d-line);
}

.demo-change-colors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
}

.demo-change-colors li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.demo-change-colors code {
  color: var(--d-muted);
  font-size: 0.8rem;
}

.demo-change-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--d-line-strong);
}

.demo-current-badge {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--d-accent-text);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Result of an undo or restore. Empty (and invisible) until there is one. */
.demo-history-status {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(34, 197, 94, 0.1);
  color: var(--d-success);
  font-size: 0.9rem;
  font-weight: 600;
}

.demo-history-status:empty {
  display: none;
}

/* appearance */
.demo-theme-fields {
  max-width: 760px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.demo-theme-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.demo-theme-field-text {
  flex: 1;
  min-width: 0;
}

.demo-theme-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
}

.demo-theme-field-text .demo-field-help {
  margin: 4px 0 0;
}

/* Swatch button on each color row (in the admin it opens a color wheel). */
.demo-theme-swatch-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--d-line-strong);
  border-radius: 14px;
  background: var(--d-raised);
  color: var(--d-ink);
  font-size: 0.85rem;
}

.demo-theme-swatch-btn:hover {
  border-color: var(--accent);
}

.demo-theme-swatch {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.demo-theme-swatch-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.demo-theme-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

/* backups */
.demo-backup-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  max-width: 860px;
}

.demo-backup-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px;
}

.demo-backup-card h4 {
  margin: 6px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
}

.demo-backup-card p {
  margin: 0 0 8px;
  color: var(--d-muted);
  line-height: 1.5;
}

.demo-backup-card .demo-primary-btn,
.demo-backup-card .demo-secondary-btn {
  margin-top: auto;
}

/* password */
.demo-password-card {
  display: flex;
  flex-direction: column;
  max-width: 460px;
  padding: 26px;
}

.demo-form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--d-ink);
}

/* Drawn like the admin's password boxes; see the note in index.html. */
.demo-fake-input {
  display: block;
  height: 45px;
  margin-bottom: 16px;
  border: 1px solid var(--d-line-strong);
  border-radius: 12px;
  background: var(--d-field);
}

.demo-password-card .demo-field-help {
  margin-top: -8px;
}

.demo-password-card .demo-primary-btn {
  align-self: flex-start;
  margin-top: 4px;
}

.demo-setup-link-card {
  margin-top: 24px;
  gap: 12px;
}

.demo-setup-link-card h4 {
  font-size: 1.5rem;
  font-weight: 700;
}

.demo-setup-link-card .demo-field-help {
  margin-top: 0;
}

.demo-setup-link-output {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-setup-link-row {
  display: flex;
  gap: 8px;
}

.demo-setup-link-row input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--d-line-strong);
  border-radius: 12px;
  background: var(--d-field);
  color: var(--d-ink);
  font-family: inherit;
  font-size: 0.95rem;
}

.demo-cancel-link {
  align-self: flex-start;
}

/* JS toggles these with [hidden]; keep it winning over their display: flex. */
.demo-history-panel[hidden],
.demo-change-details[hidden],
.demo-setup-link-output[hidden],
.demo-cancel-link[hidden] {
  display: none;
}

/* Stand-in photos for Joe's Bakery (also used by the features tour):
   drawings in images/demo/, over a matching gradient while they load.
   Last in the demo, so a photo thumbnail keeps its picture over
   .demo-change-thumb's background. */
.ph-1 {
  background: url("images/demo/hero-sourdough.svg") center / cover no-repeat,
    linear-gradient(135deg, #e2c9a4, #b98a55);
}

.ph-2 {
  background: url("images/demo/hero-croissants.svg") center / cover no-repeat,
    linear-gradient(135deg, #f0d9ae, #c9954f);
}

.ph-3 {
  background: url("images/demo/storefront.svg") center / cover no-repeat,
    linear-gradient(135deg, #cfd8c3, #7f8f6a);
}

.ph-4 {
  background: url("images/demo/baker.svg") center / cover no-repeat,
    linear-gradient(135deg, #e7c7a8, #a9683e);
}

.ph-5 {
  background: url("images/demo/pie.svg") center / cover no-repeat,
    linear-gradient(135deg, #f1c7a0, #c0612f);
}

.ph-6 {
  background: url("images/demo/logo.svg") center / cover no-repeat,
    linear-gradient(135deg, #efe6d8, #c68a2e);
}

/* The admin's own breakpoints, measured by the room its screens get:
   1180px and 640px windows in the real admin. */
@container demo-views (max-width: 836px) {
  .demo-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container demo-views (max-width: 608px) {
  .demo-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-field-card {
    padding: 20px 18px;
  }

  .demo-undo-publish {
    flex-direction: column;
    align-items: flex-start;
  }

  .demo-change-row {
    flex-wrap: wrap;
  }

  .demo-change-text {
    flex-basis: calc(100% - 58px);
  }

  .demo-change-time {
    margin-left: 58px;
  }

  .demo-change-details {
    padding-left: 6px;
  }

  .demo-change-compare {
    grid-template-columns: 1fr;
  }
}

/* ---------- 01: A Tuesday, two ways ---------- */

.section-why {
  padding-bottom: 40px;
}

.tuesday {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.tuesday-col {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
}

.tuesday-without {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.tuesday-with {
  background: var(--night);
  color: var(--night-ink);
}

.tuesday-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.tuesday-head h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-soft);
}

.tuesday-head span {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #67636f;
}

.tuesday-row {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 16px;
  color: #37343d;
}

.tuesday-row:last-of-type {
  border-bottom: 0;
}

.tuesday-row time {
  width: 56px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--faint);
}

.tuesday-total {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--ink);
}

.tuesday-total span {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
}

.tuesday-total strong {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: #b3261e;
}

.tuesday-with .tuesday-head {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.tuesday-with .tuesday-head h3 {
  color: var(--gold);
}

.tuesday-with .tuesday-head span {
  color: var(--night-muted);
}

.tuesday-with .tuesday-row {
  color: #e6e1d8;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.tuesday-with .tuesday-row time {
  color: var(--gold);
}

.tuesday-with .tuesday-total {
  border-top-color: var(--gold);
}

.tuesday-with .tuesday-total span {
  color: #e6e1d8;
}

.tuesday-with .tuesday-total strong {
  color: var(--gold);
}

/* ---------- 02: How it works ---------- */

.section-how {
  padding-top: 100px;
  padding-bottom: 100px;
  gap: 56px;
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
}

.steps-trail {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 96px;
  border-top: 2px dashed var(--trail);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-visual {
  height: 192px;
  padding: 22px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 20px 40px rgba(20, 16, 40, 0.1);
}

.step-code {
  background: var(--night);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: #d8d3cb;
  box-shadow: 0 20px 40px rgba(20, 16, 40, 0.18);
}

.code-comment {
  color: #8f8a99;
}

.code-tag {
  color: var(--gold);
}

.code-attr {
  color: #f0a3c4;
}

.code-str {
  color: #a8d8a0;
}

.code-indent {
  padding-left: 16px;
  color: var(--night-ink);
}

.step-field {
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
}

.step-field-section {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.step-field label {
  font-size: 14px;
  font-weight: 700;
}

.step-field input {
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(20, 16, 40, 0.16);
  background: #ffffff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}

.step-field-foot {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #67636f;
}

.step-page {
  gap: 12px;
  background: #fff8ee;
  border: 1px solid var(--line);
}

.step-page-brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b5a2b;
}

.step-page-headline {
  align-self: flex-start;
  margin-left: -8px;
  padding: 4px 8px;
  border: 2px dashed var(--accent);
  border-radius: 8px;
  font-family: Georgia, serif;
  font-size: 26px;
  line-height: 1.15;
  color: #2e1f16;
}

.step-page-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber-deep);
}

.step-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber-text);
}

.step-text h3 {
  font-size: 24px;
  font-weight: 700;
}

.step-text p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- 03: Features, the guided tour ---------- */

.section-features {
  margin-top: 40px;
  padding: 96px var(--panel-pad);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.section-features h2 {
  color: var(--night-ink);
}

.manifest-caption {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--night-muted);
  text-align: right;
}

.manifest-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gold);
}

/* The guided tour. The steps scroll on the left; the stage on the right is
   sticky and shows one scene at a time. script.js marks the step in view,
   its scene and its dot with .is-active. A scene's cards fade in one after
   another (--i), or at a set time (--d). Every card's resting style is its
   finished state, so with reduced motion the scenes simply appear. */

/* The stage is never taller than the screen allows, nor much taller than
   it is wide (46cqw is about its column's width). */
.tour {
  --stage-h: min(540px, calc(100vh - 190px), 46cqw);
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 72px;
}

.tour-steps {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-step {
  min-height: calc(var(--stage-h) * 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  transition: opacity 0.4s;
}

/* The first and last steps are as tall as the stage, so their text lines up
   with it when the stage starts and stops sticking. */
.tour-step:first-child,
.tour-step:last-child {
  min-height: var(--stage-h);
}

.tour.is-live .tour-step:not(.is-active) {
  opacity: 0.32;
}

.tour-step-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tour-tag {
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--night-muted);
}

.tour-step h3 {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--night-ink);
}

.tour-step p {
  max-width: 460px;
  font-size: 18px;
  line-height: 1.6;
  color: #c9c3ba;
}

.tour-step code {
  font-size: 16px;
  color: var(--gold);
}

/* An admin button named in running text, drawn like the one on the stage */
.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 12px 2px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: #2b2630;
  font-size: 0.8em;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: 0.08em;
}

.ui-btn .icon {
  width: 1.05em;
  height: 1.05em;
}

.tour-stage-wrap {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: calc((100vh - var(--stage-h)) / 2 + 30px);
}

.tour-stage {
  position: relative;
  height: var(--stage-h);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(460px 340px at 90% 105%, rgba(245, 158, 11, 0.3), transparent 70%),
    radial-gradient(380px 300px at 0% 0%, rgba(124, 108, 240, 0.16), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
    #24222c;
}

.tour-dunes {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 26%;
}

.tour-dunes path:first-child {
  fill: rgba(196, 139, 69, 0.14);
}

.tour-dunes path:last-child {
  fill: rgba(196, 139, 69, 0.22);
}

/* Scenes are laid out on a fixed 500 x 440 canvas; script.js sets --fit to
   scale it down when the stage is smaller. */
.tour-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 440px;
  translate: -50% -50%;
  scale: var(--fit, 1);
}

.tour-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 14px;
}

.tour-dot {
  min-width: 20px;
  height: 20px;
  padding: 0 2px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.tour-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transition: width 0.3s, background 0.3s;
}

.tour-dot:hover::before {
  background: rgba(255, 255, 255, 0.45);
}

.tour-dot[aria-current="step"]::before {
  width: 26px;
  background: var(--gold);
}

/* ----- Scenes: shared ----- */

.scene {
  --bk-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  position: absolute;
  inset: 0;
}

.scene>* {
  position: absolute;
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.25s, translate 0.25s;
}

.scene.is-active>* {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.45s, translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--d, calc(0.15s + var(--i, 0) * 0.12s));
}

.scene> :nth-child(2) {
  --i: 1;
}

.scene> :nth-child(3) {
  --i: 2;
}

.scene> :nth-child(4) {
  --i: 3;
}

/* A floating card */
.tc {
  border-radius: 14px;
  background: #ffffff;
  color: #2b2630;
  font-size: 13px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tc .icon {
  width: 15px;
  height: 15px;
}

/* A small glass label on the stage */
.tc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(36, 34, 44, 0.85);
  font-size: 12px;
  font-weight: 700;
  color: var(--night-ink);
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.tc-chip .icon {
  width: 14px;
  height: 14px;
  color: var(--gold);
}

.tc-label {
  font-size: 11px;
  font-weight: 800;
  color: #6f6875;
}

.tc-input {
  padding: 10px 12px;
  border: 1.5px solid #e2ddd4;
  border-radius: 8px;
  font-size: 13px;
}

/* Joe's Bakery, the client's site: its own serif and the colors from the
   demo's Appearance screen. */
.bk-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: #2e1f16;
  color: #efe6d8;
  font-size: 11px;
}

.bk-nav strong {
  margin-right: auto;
  font-family: var(--bk-serif);
  font-size: 14px;
}

@keyframes tc-type {
  from {
    max-width: 0;
  }
}

@keyframes tc-caret {
  50% {
    border-right-color: transparent;
  }
}

@keyframes tc-fill {
  from {
    width: 0;
  }
}

@keyframes tc-fade-in {
  from {
    opacity: 0;
  }
}

/* ----- 01: Edit on the page ----- */

.bk-window {
  left: 20px;
  top: 30px;
  width: 460px;
  overflow: hidden;
}

.tc-bar {
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f1eee9;
  border-bottom: 1px solid #e4dfd6;
  font-size: 11px;
  color: #7b7480;
}

.tc-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9d3ca;
}

.tc-bar span {
  margin-left: 8px;
}

.tc-bar b {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold);
  color: #2b1700;
  font-size: 10px;
  font-weight: 800;
}

.bk-hero {
  padding: 30px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #efe6d8;
  color: #2e1f16;
}

.bk-edit {
  position: relative;
  align-self: flex-start;
  max-width: calc(100% + 20px);
  margin: 0 -10px 6px;
  padding: 6px 10px;
  border-radius: 6px;
  outline: 2px dashed var(--gold);
  background: rgba(252, 196, 75, 0.14);
}

.bk-edit-tag {
  position: absolute;
  left: 8px;
  top: -19px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--gold);
  color: #2b1700;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The headline types itself in: an invisible copy holds the size and the
   live copy is revealed over it. */
.bk-type {
  position: relative;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--bk-serif);
  font-size: 21px;
  line-height: 1.3;
}

.bk-type> :first-child {
  visibility: hidden;
}

.bk-type-live {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  overflow: hidden;
  border-right: 2px solid #2e1f16;
}

.scene-edit.is-active .bk-edit,
.scene-edit.is-active .bk-edit-tag {
  animation: tc-fade-in 0.3s 0.75s both;
}

.scene-edit.is-active .bk-type-live {
  animation: tc-type 1.4s steps(28) 0.95s both, tc-caret 0.9s step-end 2.4s infinite;
}

.bk-line {
  width: 88%;
  height: 8px;
  border-radius: 4px;
  background: rgba(46, 31, 22, 0.16);
}

.bk-line-short {
  width: 62%;
}

.bk-photo {
  height: 104px;
  margin-top: 10px;
  border-radius: 10px;
}

.tc-cursor {
  left: 380px;
  top: 158px;
  width: 26px;
  height: 26px;
  fill: #ffffff;
  stroke: #1b1a21;
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

.scene-edit.is-active .tc-cursor {
  animation: tc-point 0.7s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes tc-point {
  from {
    translate: 60px 70px;
    opacity: 0;
  }
}

.tc-savebar {
  --d: 2.5s;
  left: 105px;
  top: 344px;
  padding: 7px 7px 7px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--night);
  color: var(--night-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.tc-savebar b {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}

.tc-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(252, 196, 75, 0.2);
}

/* ----- 02: History and undo ----- */

.tc-deck {
  left: 50px;
  top: 128px;
  width: 400px;
}

/* How far a card sits behind the front one. --shift slides the whole deck
   forward one place after the undo. */
@property --shift {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.tc-ver {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  --depth: calc(var(--k) - var(--shift));
  padding: 11px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--bk-serif);
  font-size: 19px;
  color: #2e1f16;
  transform-origin: 50% 0;
  translate: 0 calc(var(--depth) * -24px);
  scale: calc(1 - var(--depth) * 0.05);
  background: color-mix(in srgb, #ffffff, #c9c1b4 calc(var(--depth) * 20%));
}

.tc-ver em {
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a8591;
}

.tc-ver:nth-child(1) {
  --k: 4;
}

.tc-ver:nth-child(2) {
  --k: 3;
}

.tc-ver:nth-child(3) {
  --k: 2;
}

.tc-ver:nth-child(4) {
  --k: 1;
}

.tc-ver:nth-child(5) {
  --k: 0;
}

.scene-history.is-active .tc-ver {
  animation: tc-forward 0.5s 1.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.scene-history.is-active .tc-ver:last-child {
  animation: tc-leave 0.55s 1.3s ease-in forwards;
}

@keyframes tc-forward {
  to {
    --shift: 1;
  }
}

@keyframes tc-leave {
  to {
    translate: 160px 50px;
    rotate: 9deg;
    opacity: 0;
  }
}

.tc-undo {
  left: 50px;
  top: 234px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 800;
}

.scene-history.is-active .tc-undo {
  animation: tc-press 0.35s 1.05s both;
}

@keyframes tc-press {
  50% {
    scale: 0.93;
    background: #fde7b0;
  }
}

.tc-toast {
  --d: 1.9s;
  left: 50px;
  top: 292px;
}

.tc-backup {
  --d: 2.3s;
  left: 50px;
  top: 344px;
}

/* ----- 03: Brand colors ----- */

/* Registered so the color can animate smoothly. */
@property --brand {
  syntax: "<color>";
  inherits: true;
  initial-value: #a83e22;
}

.scene-colors {
  --brand: #a83e22;
}

.scene-colors.is-active {
  animation: tc-brand 7.5s 1s ease-in-out infinite;
}

@keyframes tc-brand {

  0%,
  24% {
    --brand: #a83e22;
  }

  34%,
  58% {
    --brand: #2f6d8f;
  }

  68%,
  90% {
    --brand: #6e7f5c;
  }

  100% {
    --brand: #a83e22;
  }
}

.bk-menu {
  left: 20px;
  top: 34px;
  width: 268px;
  overflow: hidden;
}

.bk-menu-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: #efe6d8;
  color: #2e1f16;
}

.bk-stars {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--brand);
}

.bk-stars span {
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: 0;
  color: #6b5d52;
}

.bk-menu-title {
  font-family: var(--bk-serif);
  font-size: 22px;
}

.bk-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.bk-item i {
  flex: 1;
  border-bottom: 1.5px dotted rgba(46, 31, 22, 0.3);
}

.bk-item b {
  font-weight: 800;
  color: var(--brand);
}

.bk-link {
  font-size: 12px;
  font-weight: 800;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tc-wheel {
  left: 302px;
  top: 96px;
  width: 178px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.tc-wheel-head {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
}

.tc-swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--brand);
}

.tc-ring {
  position: relative;
  width: 116px;
  height: 116px;
}

.tc-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(hsl(0 62% 48%), hsl(60 62% 48%), hsl(120 62% 48%), hsl(180 62% 48%),
      hsl(240 62% 48%), hsl(300 62% 48%), hsl(360 62% 48%));
  -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 66%);
  mask: radial-gradient(closest-side, transparent 64%, #000 66%);
}

/* The knob sits at the hue's angle on the ring. */
.tc-knob {
  position: absolute;
  inset: 0;
  rotate: 13deg;
}

.tc-knob::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: var(--brand);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.scene-colors.is-active .tc-knob {
  animation: tc-knob 7.5s 1s ease-in-out infinite;
}

@keyframes tc-knob {

  0%,
  24% {
    rotate: 13deg;
  }

  34%,
  58% {
    rotate: 201deg;
  }

  68%,
  90% {
    rotate: 92deg;
  }

  100% {
    rotate: 13deg;
  }
}

.tc-wheel code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--code-bg);
  font-size: 11px;
  color: var(--amber-text);
}

.tc-locks {
  left: 20px;
  top: 376px;
  display: flex;
  gap: 8px;
}

/* ----- 04: Photos ----- */

.tc-phone-photo {
  left: 340px;
  top: 26px;
  width: 104px;
  height: 136px;
  border-radius: 12px;
  border: 4px solid #ffffff;
  rotate: 8deg;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
}

.tc-phone-photo span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(27, 26, 33, 0.85);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
}

.scene-photos.is-active .tc-phone-photo {
  animation: tc-drop 0.8s 0.7s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes tc-drop {
  to {
    translate: -298px 150px;
    scale: 0.5;
    rotate: 0deg;
    opacity: 0;
  }
}

.tc-upload {
  left: 40px;
  top: 190px;
  width: 420px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tc-upload-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tc-thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 10px;
}

.tc-upload-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tc-upload-info strong {
  font-size: 15px;
}

.tc-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #8a8591;
}

.tc-size s {
  text-decoration-thickness: 2px;
}

.tc-size b {
  color: #1f7a45;
}

.tc-progress,
.tc-strength {
  height: 6px;
  border-radius: 999px;
  background: #eee9e1;
  overflow: hidden;
}

.tc-progress span,
.tc-strength span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}

.tc-status,
.tc-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #1f7a45;
}

.scene-photos.is-active .tc-thumb {
  animation: tc-fade-in 0.3s 1.4s both;
}

.scene-photos.is-active .tc-progress span {
  animation: tc-fill 1.1s 1.4s ease-out both;
}

.scene-photos.is-active .tc-size s {
  animation: tc-strike 0.3s 2.5s both;
}

.scene-photos.is-active .tc-size b,
.scene-photos.is-active .tc-size .icon,
.scene-photos.is-active .tc-status {
  animation: tc-fade-in 0.35s 2.6s both;
}

@keyframes tc-strike {
  from {
    text-decoration-color: transparent;
    color: #2b2630;
  }
}

.tc-fast {
  --d: 2.9s;
  left: 40px;
  top: 360px;
}

/* ----- 05: Handoff in one link ----- */

.tc-msg {
  left: 24px;
  top: 30px;
  width: 300px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tc-msg-bubble {
  align-self: flex-end;
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.tc-msg-link {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 10px;
  border: 1px solid #ebe6de;
  background: #faf8f4;
}

.tc-msg-link span {
  font-size: 11px;
  color: #7b7480;
}

.tc-msg-link em {
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  color: var(--amber-text);
}

.tc-setup {
  left: 206px;
  top: 192px;
  width: 270px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tc-setup strong {
  font-family: var(--font-display);
  font-size: 20px;
}

.tc-setup .tc-input {
  border-color: var(--gold);
}

.tc-dots {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 2px;
}

.tc-strength span {
  background: #2f9e5b;
}

.tc-btn {
  padding: 10px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  text-align: center;
}

.scene-handoff.is-active .tc-dots {
  animation: tc-type 1s steps(24) 1.1s both;
}

.scene-handoff.is-active .tc-strength span {
  animation: tc-fill 0.8s 1.2s ease-out both;
}

.tc-used {
  --d: 2.4s;
  left: 24px;
  top: 396px;
}

/* ----- 06: Locked where it matters ----- */

.tc-field {
  left: 24px;
  top: 30px;
  width: 340px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tc-input-code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.bk-footer {
  padding: 12px 14px;
  border-radius: 8px;
  background: #2e1f16;
  color: #efe6d8;
  font-family: var(--font-mono);
  font-size: 12px;
}

.tc-reject {
  left: 176px;
  top: 262px;
  width: 304px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.tc-file {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fdecea;
  color: #c2410c;
}

.tc-reject-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tc-reject-text span {
  font-size: 12px;
  font-weight: 700;
  color: #c2410c;
}

.scene-locked.is-active .tc-reject {
  animation: tc-spit 0.8s 1.3s both;
}

@keyframes tc-spit {
  35% {
    translate: 0 10px;
    scale: 0.97;
  }

  70% {
    translate: 0 -18px;
    rotate: -3deg;
  }
}

.tc-bytes {
  left: 24px;
  top: 384px;
}

/* ---------- 04: Travels light, spec sheet ---------- */

.section-light {
  gap: 56px;
}

.specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.spec {
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--line);
}

.spec:first-child {
  padding-left: 0;
  border-left: 0;
}

.spec:last-child {
  padding-right: 0;
}

.spec-num {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.spec-num-amber {
  color: var(--amber-text);
}

.spec-title {
  font-size: 16px;
  font-weight: 800;
}

.spec-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- 05: Pricing, the receipt ---------- */

.section-pricing {
  padding: 88px var(--panel-pad);
  display: flex;
  gap: 72px;
  align-items: center;
}

.pricing-copy {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-pricing h2 {
  font-size: 58px;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.pricing-copy p {
  max-width: 460px;
  font-size: 18px;
  line-height: 1.6;
  color: #4a3514;
}

.receipt {
  width: 460px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  color: var(--ink);
  /* drop-shadow follows the notched outline; box-shadow would ignore it */
  filter: drop-shadow(0 30px 56px rgba(90, 55, 5, 0.16));
}

/* The receipt is two halves of white paper. Each mask cuts a quarter
   circle from the corners where they meet, so together they make a round
   notch in each edge at the tear. Two layers, each just over half wide,
   one notch apiece. */
.receipt-part {
  --notch: 14px;
  padding: 0 40px;
  background: #ffffff;
}

.receipt-top {
  padding-top: 40px;
  padding-bottom: 14px;
  border-radius: 10px 10px 0 0;
  -webkit-mask:
    radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
}

/* The perforation runs along the top of the bottom half. */
.receipt-bottom {
  padding-bottom: 36px;
  border-top: 2px dashed rgba(20, 16, 40, 0.25);
  border-radius: 0 0 10px 10px;
  -webkit-mask:
    radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
}

.receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 18px;
  font-size: 12px;
  color: #67636f;
}

.receipt-brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.receipt-line {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  font-size: 14px;
}

.receipt-line-first {
  border-top: 1px dashed rgba(20, 16, 40, 0.25);
}

.receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 0 24px;
  font-size: 14px;
}

.receipt-total strong {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.btn-receipt {
  height: 58px;
  font-size: 17px;
  border-radius: 12px;
}

/* Launch signup: stands in for the license button until launch. */
.notify {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notify-label {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* 16px keeps iPhones from zooming in on focus */
.notify-input {
  height: 54px;
  padding: 0 18px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: #fbf8f2;
  border: 1px solid rgba(20, 16, 40, 0.2);
  border-radius: 12px;
}

.notify-input::placeholder {
  color: var(--faint);
}

.notify-input:focus {
  border-color: transparent;
}

.notify-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.notify .btn {
  border: 0;
  cursor: pointer;
}

.notify .btn:disabled {
  cursor: progress;
  opacity: 0.7;
}

.notify-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: #67636f;
}

.notify-note a {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notify-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.notify-status:empty {
  display: none;
}

.notify.is-error .notify-status {
  color: #b42318;
}

/* Signed up: the form gives way to a thank-you note. */
.notify.is-done > :not(.notify-status) {
  display: none;
}

.notify.is-done .notify-status {
  padding: 18px 20px;
  font-size: 14px;
  color: var(--ink);
  background: #fbf8f2;
  border: 1px dashed rgba(20, 16, 40, 0.25);
  border-radius: 12px;
}

.notify-status strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.01em;
}

/* Kit's quick human check, on the rare signup it asks for one.
   script.js sizes the frame to whatever Kit's page asks for. */
.notify-check {
  max-width: calc(100vw - 32px);
  padding: 0;
  overflow: visible;
  background: #ffffff;
  border: 0;
  border-radius: 12px;
}

.notify-check::backdrop {
  background: rgba(27, 26, 33, 0.7);
}

.notify-check iframe {
  display: block;
  width: 400px;
  max-width: 100%;
  height: 480px;
  border: 0;
  border-radius: inherit;
}

.notify-check-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  font-size: 28px;
  line-height: 1;
  color: var(--night-ink);
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------- 06: Roadmap ---------- */

.section-roadmap {
  padding-bottom: 0;
  gap: 40px;
}

.roadmap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.roadmap-trail {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  border-top: 3px dashed var(--trail);
}

.roadmap-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.roadmap-dot {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #ffffff;
  border: 4px solid var(--trail);
}

.roadmap-dot-next {
  background: var(--accent);
  border-color: var(--bg);
}

.roadmap-item h3 {
  font-size: 20px;
  font-weight: 700;
}

.roadmap-item p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- 07: FAQ ---------- */

.section-faq {
  flex-direction: row;
  gap: 72px;
}

.faq-intro {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq-intro p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.faq-intro a {
  font-weight: 800;
}

.faq-list {
  flex-grow: 1;
  border-top: 2px solid var(--ink);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  min-height: 76px;
  display: grid;
  grid-template-columns: 48px 1fr 44px;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--amber-text);
}

.faq-q {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}

/* round +/- button */
.faq-toggle {
  position: relative;
  justify-self: end;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(20, 16, 40, 0.2);
  transition: background 0.2s, border-color 0.2s;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s;
}

.faq-toggle::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-toggle {
  background: var(--accent);
  border-color: var(--accent);
}

.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after {
  background: var(--accent-ink);
}

.faq-item[open] .faq-toggle::after {
  transform: rotate(0deg);
}

.faq-item summary:hover .faq-q {
  color: var(--amber-text);
}

.faq-item p {
  max-width: 720px;
  padding: 0 64px 28px 60px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.faq-item code {
  font-size: 15px;
}

/* ---------- 08: Time is money + footer ---------- */

.section-cta {
  margin-bottom: 40px;
  padding: 96px var(--panel-pad) 40px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.cta {
  display: flex;
  gap: 72px;
  align-items: center;
}

.cta-copy {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.section-cta h2 {
  font-size: 76px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--night-ink);
}

.cta-copy p {
  max-width: 560px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--night-soft);
}

/* The button's label is long: on the narrowest phones it wraps instead of
   running off the screen. */
@media (max-width: 400px) {
  .cta-copy .btn-lg {
    max-width: 100%;
    height: auto;
    min-height: 60px;
    padding: 12px 24px;
    white-space: normal;
    text-align: center;
  }
}

/* The to-do list. Finished is the default; script.js adds .is-waiting and
   ticks rows back to .is-done one by one when the list scrolls into view. */
.ledger {
  --done: 4;
  width: 400px;
  flex-shrink: 0;
  padding: 26px 26px 22px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.ledger-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px 16px;
}

.ledger-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ledger-kicker,
.ledger-count,
.ledger-who {
  font-family: var(--font-mono);
}

.ledger-kicker {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--night-muted);
}

.ledger-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--night-ink);
}

.ledger-count {
  font-size: 12px;
  color: var(--night-muted);
}

.ledger-done {
  font-weight: 700;
  color: var(--gold);
}

.ledger-bar {
  height: 4px;
  margin: 16px 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ledger-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
  transform: scaleX(calc(var(--done) / 5));
  transform-origin: left;
  transition: transform 0.45s ease;
}

.ledger-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ledger-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 15px;
  font-weight: 600;
  color: var(--night-soft);
  transition: color 0.3s;
}

.ledger-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  transition: background 0.25s, border-color 0.25s;
}

.ledger-check svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--night);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.3s 0.1s ease-out;
}

.ledger-task {
  margin-right: auto;
}

/* The strike draws left to right (and across wrapped lines). */
.ledger-task s {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 55% / 0% 1.5px no-repeat;
  transition: background-size 0.35s 0.15s ease-out;
}

.ledger-who {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  color: var(--night-muted);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s 0.2s, transform 0.3s 0.2s;
}

.ledger-row.is-done {
  color: #8f8a99;
}

.is-done .ledger-check {
  background: var(--night-soft);
  border-color: var(--night-soft);
}

.is-done .ledger-check svg {
  stroke-dashoffset: 0;
}

.is-done .ledger-task s {
  background-size: 100% 1.5px;
}

.is-done .ledger-who {
  opacity: 1;
  transform: none;
}

/* Your one task: lit up once the client's are off your plate. */
.ledger-row-you {
  margin-top: 12px;
  padding: 16px 14px;
  border: 1px solid rgba(252, 196, 75, 0.4);
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(252, 196, 75, 0.08);
  box-shadow: 0 0 0 4px rgba(252, 196, 75, 0.06), 0 14px 36px rgba(252, 196, 75, 0.14);
  transition: color 0.4s, background 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.ledger-row-you .ledger-check {
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: ledger-pulse 2.2s ease-out infinite;
}

.ledger-row-you .ledger-who {
  border-color: var(--gold);
  font-weight: 700;
  color: var(--night);
  background: var(--gold);
  opacity: 1;
  transform: none;
}

.ledger.is-waiting .ledger-row-you {
  color: var(--night-soft);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.ledger.is-waiting .ledger-row-you .ledger-check {
  border-color: rgba(255, 255, 255, 0.24);
  animation: none;
}

.ledger.is-waiting .ledger-row-you .ledger-who {
  opacity: 0;
}

@keyframes ledger-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(252, 196, 75, 0.5);
  }

  70%,
  100% {
    box-shadow: 0 0 0 9px rgba(252, 196, 75, 0);
  }
}

.footer-bar {
  padding-top: 28px;
  border-top: 1px solid rgba(251, 246, 236, 0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  color: #c9c3ba;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-brand img {
  width: 122px;
  height: 40px;
  object-fit: contain;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.footer-links a {
  color: #c9c3ba;
}

.footer-links a:hover {
  color: var(--night-ink);
}

/* ---------- Privacy page ---------- */

/* No section trail here, so the logo and button sit at either end. */
.site-nav-simple {
  justify-content: space-between;
}

.legal {
  max-width: 760px;
  padding-top: 88px;
  padding-bottom: 104px;
}

.legal h1 {
  margin: 18px 0 20px;
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.legal h2 {
  margin: 44px 0 12px;
  font-size: 24px;
  letter-spacing: -0.01em;
}

.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.legal p + p {
  margin-top: 12px;
}

.legal ul {
  margin: 0;
  padding-left: 22px;
}

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

.legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal .legal-lede {
  font-size: 19px;
  color: var(--ink);
}

.legal-footer {
  margin-bottom: 40px;
  padding: 32px 80px 36px;
}

.legal-footer .footer-bar {
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 900px) {
  .legal {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .legal h1 {
    font-size: 40px;
  }

  .legal-footer {
    padding: 28px 24px 32px;
  }
}

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
  .site-nav-price {
    display: none;
  }

  .tour {
    column-gap: 48px;
  }

  .tour-step h3 {
    font-size: 32px;
  }

  .trail-stop {
    font-size: 12px;
  }

  .section-pricing,
  .cta {
    flex-direction: column;
    align-items: stretch;
  }

  .receipt,
  .ledger {
    width: 100%;
    max-width: 520px;
  }

  /* the margin gets too thin for the camel */
  .page-trail {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 24px;
    --panel-inset: 16px;
  }

  .site-nav {
    gap: 8px;
    width: calc(100% - 32px);
  }

  .site-nav-logo {
    margin-right: auto;
  }

  /* after the button, though it comes first in the markup so the
     menu links follow it when tabbing */
  .site-nav-toggle {
    display: inline-flex;
    order: 1;
  }

  /* The trail needs room, so here it folds into a dropdown under the nav:
     the same stops, standing on end, with the line filling downward.
     Solid, as the nav's blur doesn't reach through to it and headings
     would show through. */
  .trail {
    --row: 48px;
    --pad-y: 10px;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: var(--row);
    padding: var(--pad-y) 20px;
    background: #18171e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(10, 6, 2, 0.28);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
  }

  .site-nav.is-open .trail {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s, transform 0.2s;
  }

  /* from the first dot's centre down to the last one's */
  .trail-line,
  .trail-fill {
    top: calc(var(--pad-y) + var(--row) / 2);
    left: 25px;
  }

  .trail-line {
    right: auto;
    bottom: calc(var(--pad-y) + var(--row) / 2);
    border-top: 0;
    border-left: 2px dashed rgba(255, 255, 255, 0.2);
  }

  .trail-fill {
    left: 24px;
    width: 4px;
    height: calc((100% - var(--pad-y) * 2 - var(--row)) * var(--fill));
  }

  .trail-stop {
    flex-direction: row;
    gap: 14px;
    font-size: 16px;
  }

  .trail-dot {
    flex-shrink: 0;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .section h2,
  .panel h2 {
    font-size: 40px;
  }

  .section h2.h2-sm {
    font-size: 36px;
  }

  .section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .hero {
    width: calc(100% - 16px);
    padding: 72px 20px 380px;
    border-radius: 28px;
  }

  .hero h1 {
    font-size: min(48px, 100cqi / 12.9);
  }

  .hero-lede {
    font-size: 18px;
  }

  .demo-section {
    margin-top: -340px;
  }

  /* The admin stacks: a short header with the interface controls, the
     screens folded into a picker, then the screen, which grows with the
     page rather than scrolling inside its own box. */
  .demo-body {
    flex-direction: column;
    height: auto;
  }

  .demo-sidebar {
    width: 100%;
    gap: 10px;
    padding: 16px 14px 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.14);
  }

  /* the logo and "Site editor" share a row */
  .demo-brand {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
  }

  .demo-logo {
    max-width: 120px;
  }

  .demo-brand-sub {
    width: auto;
    max-width: none;
  }

  /* The controls move up, so the picker sits right on the screen it
     switches. */
  .demo-interface {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
    padding-top: 4px;
  }

  .demo-interface .demo-nav-heading {
    display: none;
  }

  .demo-control-row {
    flex: 1 0 100%;
    padding: 6px 4px;
  }

  /* "Accent color" and its dots share a row where there's room; on
     narrower phones the dots drop below it, all together. */
  .demo-control-row-accent {
    flex: 0 0 auto;
    padding-right: 0;
  }

  .demo-accents {
    flex: 0 1 auto;
    gap: 6px;
    padding: 6px 4px;
  }

  .demo-nav-toggle {
    order: 2;
    display: flex;
  }

  .demo-nav {
    order: 3;
    display: none;
    flex: none;
    gap: 2px;
  }

  .demo-sidebar.is-nav-open .demo-nav {
    display: flex;
  }

  .demo-nav-heading {
    margin: 12px 14px 4px;
  }

  .demo-nav-logout,
  .demo-tryme {
    display: none;
  }

  /* its View site and Edit on Page are on the dashboard as well */
  .demo-topbar {
    display: none;
  }

  .demo-views {
    overflow: visible;
    padding: 22px 16px 40px;
  }

  .demo-hero-card {
    flex-direction: column;
    align-items: stretch;
    padding: 28px 24px;
  }

  /* still side by side, with the titles over their captions */
  .tuesday-col {
    padding: 28px 24px;
  }

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

  .tuesday-row {
    gap: 14px;
  }

  .tuesday-row time {
    width: 44px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .steps-trail {
    display: none;
  }

  /* stacked, the pictures needn't match heights: each fits its content */
  .step-visual {
    height: auto;
  }

  .section-features,
  .section-pricing,
  .section-cta {
    padding: 64px 24px;
  }

  .section-cta {
    padding-bottom: 32px;
  }

  .manifest-caption {
    text-align: left;
  }

  /* The tour stacks: the stage sticks under the nav and the steps scroll
     up beneath it. */
  .tour {
    --stage-h: min(300px, 44vh);
    display: block;
  }

  .tour-stage-wrap {
    top: 100px;
    z-index: 2;
    margin: 0 -8px;
    padding: 8px 8px 6px;
    background: var(--night);
  }

  .tour-stage {
    border-radius: 20px;
  }

  .tour-dots {
    margin-top: 6px;
  }

  .tour-step,
  .tour-step:first-child,
  .tour-step:last-child {
    min-height: 46vh;
  }

  .tour-step h3 {
    font-size: 28px;
  }

  .tour-step p {
    font-size: 16px;
  }

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

  .spec {
    padding: 24px 20px 24px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .spec:nth-child(even) {
    padding-left: 20px;
    border-left: 1px solid var(--line);
  }

  .spec-num {
    font-size: 56px;
  }

  /* the bottom row sits on the sheet's own bottom rule */
  .spec:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .section-pricing h2 {
    font-size: 42px;
  }

  .receipt-part {
    padding-left: 24px;
    padding-right: 24px;
  }

  .receipt-top {
    padding-top: 32px;
  }

  .receipt-bottom {
    padding-bottom: 28px;
  }

  /* The roadmap stands on end: smaller stops down the left, joined by
     the dashed trail, with each plan beside its stop. */
  .roadmap {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .roadmap-trail {
    display: none;
  }

  .roadmap-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px 18px;
  }

  /* from this stop's centre to the next one's */
  .roadmap-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 12.5px;
    top: 14px;
    bottom: calc(-28px - 14px);
    border-left: 3px dashed var(--trail);
  }

  .roadmap-dot {
    position: relative;
    z-index: 1;
    grid-row: span 2;
    width: 28px;
    height: 28px;
    border-width: 3px;
  }

  .roadmap-item h3 {
    padding-top: 2px;
    font-size: 19px;
  }

  .section-faq {
    flex-direction: column;
    gap: 32px;
  }

  .faq-intro {
    width: auto;
  }

  .faq-item summary {
    grid-template-columns: 36px 1fr 44px;
  }

  .faq-q {
    font-size: 18px;
  }

  .faq-item p {
    padding: 0 0 24px 48px;
    font-size: 16px;
  }

  .section-cta h2 {
    font-size: 52px;
  }

  .footer-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ---------- Phones ---------- */

@media (max-width: 700px) {
  /* The facts wrap here, so the slashes would dangle at line ends: each
     fact gets its own gold check instead. */
  .hero-facts {
    gap: 8px 18px;
  }

  .hero-facts .sep {
    display: none;
  }

  .hero-facts > span::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 10px;
    margin: 0 9px 2px 2px;
    border: solid var(--gold);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  /* "Try the real admin panel:" over its steps, one per line, with the
     arrow underneath pointing down at the demo */
  .hero-try {
    flex-direction: column;
    gap: 10px;
  }

  .chip {
    text-align: left;
  }

  /* A Tuesday, two ways: still side by side, slimmed down. Each time sits
     over its step, and the rows line up across the two columns (subgrid),
     so the empty slot under "With" is the time you got back. */
  .tuesday-col {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    padding: 20px 14px;
  }

  /* stretched to match the other column, so keep the caption up top */
  .tuesday-head {
    justify-content: flex-start;
    padding-bottom: 14px;
  }

  .tuesday-head h3 {
    font-size: 18px;
    line-height: 1.15;
  }

  .tuesday-head span {
    font-size: 11px;
    line-height: 1.35;
  }

  .tuesday-row {
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.4;
  }

  .tuesday-row time {
    width: auto;
    font-size: 12px;
  }

  /* last in each column, even though "With" has a step fewer */
  .tuesday-total {
    grid-row: 7;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 0;
    padding-top: 16px;
  }

  .tuesday-total span {
    font-size: 13px;
  }

  .tuesday-total strong {
    font-size: min(28px, 6.6vw);
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 16px;
  }

  /* Kept to one line, the headline would shrink to about 25px. Here it
     wraps after "carries", so it can be half again as big. */
  .hero h1 {
    font-size: min(44px, 100cqi / 8.4);
    white-space: normal;
    line-height: 1;
  }

  .cta-copy p {
    font-size: 18px;
  }

  /* full width, so the label fits on one line (on the narrowest phones it
     splits evenly rather than leaving "load" alone) */
  .cta-copy .btn-lg {
    width: 100%;
    padding: 12px 16px;
    text-wrap: balance;
  }

  .site-nav {
    height: 64px;
    padding: 0 8px 0 14px;
  }

  .site-nav-logo img {
    width: 100px;
    height: 33px;
  }

  .btn-nav {
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }

  .btn-nav .icon {
    display: none;
  }

  .site-nav-toggle {
    width: 44px;
    height: 44px;
  }

  .btn-lg {
    height: 54px;
    padding: 0 22px;
    font-size: 16px;
  }

  .tour-stage-wrap {
    top: 86px;
  }

  .ledger {
    padding: 22px 16px 16px;
  }

  .ledger-row {
    gap: 10px;
    font-size: 14px;
  }

  .ledger-row-you {
    padding: 14px 12px;
    font-size: 15px;
  }

  .ledger-who {
    padding: 2px 7px;
    font-size: 10px;
  }

  .section-light {
    gap: 40px;
  }

  /* The spec sheet becomes a list: each number reads into its title
     ("0 databases to run"), with the note underneath. The numbers share
     one column (subgrid), so the titles line up. */
  .specs {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .spec,
  .spec:nth-child(even) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: baseline;
    gap: 6px 18px;
    padding: 20px 0;
    border-left: 0;
  }

  .spec:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }

  /* right-aligned, like figures in a table, so each sits by its title */
  .spec-num {
    justify-self: end;
    font-size: 44px;
  }

  .spec-text {
    grid-column: 2;
  }

  .demo-url {
    display: none;
  }

  .demo-view-site {
    display: none;
  }

  .section h2,
  .panel h2 {
    font-size: 34px;
  }

  /* each sentence on one line: the panel leaves the width less 80px,
     and "Time is money." is about 6.7em wide */
  .section-cta h2 {
    font-size: min(42px, (100vw - 80px) / 6.8);
  }
}

/* small phones: room for the logo, the button and the menu toggle */
@media (max-width: 360px) {
  .site-nav-logo img {
    width: 84px;
    height: 28px;
  }

  .btn-nav {
    padding: 0 12px;
  }

  /* the accent step wraps here, so the steps share its full width */
  .hero-try {
    align-items: stretch;
  }

  .hero-try-label,
  .hero-try > .icon {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  html.is-loaded {
    scroll-behavior: auto;
  }

  .ledger-row-you .ledger-check,
  .scene,
  .scene * {
    animation: none !important;
  }

  * {
    transition: none !important;
  }
}