/* Prune: the app's own tokens (Sources/Prune/UI/Theme.swift). Monochrome ink and ivory,
   one sage accent, one type family with width as the variable. The hero ring is the only bold moment. */
:root {
  --bg: #f5f4ee;
  --panel: #fbfaf6;
  --stone: #e8e6dc;
  --accent: #1f1f1c;     /* ink: main actions, rings */
  --on-accent: #f5f4ee;
  --leaf: #5e7a4f;
  --amber: #a86a14;
  --muted: #5f5d55;
  --hairline: rgba(31, 31, 28, .08);
  --inset: rgba(31, 31, 28, .045);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1c19; --panel: #252521; --stone: #2d2d28; --accent: #f5f4ee; --on-accent: #1f1f1c;
    --leaf: #9dbb88; --amber: #d9a04a; --muted: #a8a69c;
    --hairline: rgba(245, 244, 238, .09); --inset: rgba(245, 244, 238, .05);
  }
}
:root[data-theme="dark"] {
  --bg: #1c1c19; --panel: #252521; --stone: #2d2d28; --accent: #f5f4ee; --on-accent: #1f1f1c;
  --leaf: #9dbb88; --amber: #d9a04a; --muted: #a8a69c;
  --hairline: rgba(245, 244, 238, .09); --inset: rgba(245, 244, 238, .05);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--accent);
  font: 400 1.0625rem/1.6 "Archivo", -apple-system, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
/* Display = the app's SF Pro Expanded: widest Archivo, semibold */
h1, h2, h3, .brand, ol.steps li::before {
  font-family: "Archivo", -apple-system, system-ui, sans-serif;
  font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 600;
  line-height: 1.08; letter-spacing: -.025em;
}
h1, h2, h3 { margin: 0 0 .5em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); max-width: 20ch; }
h3 { font-size: 1.05rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-color: var(--leaf); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--panel); padding: 8px; z-index: 2; }

header.top { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; gap: 16px; border-bottom: 1px solid var(--hairline); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; color: var(--accent); text-decoration: none; }
.brand img { border-radius: 7px; }
.top nav { display: flex; gap: 6px; flex-wrap: wrap; }
.top nav a { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: .95rem; }
.top nav a:hover { color: var(--accent); background: var(--inset); }

/* Hero: text beside a scan instrument made of the app's rings */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 32px 48px; padding: 72px 0 0; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -.04em; line-height: 1.02; }
.hero .lede { font-size: 1.2rem; color: var(--muted); }
.cta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 32px 0 0; }
.button {
  background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600;
  padding: 13px 24px; border-radius: 8px; font-size: 1rem;
}
.button:hover { opacity: .88; }
.note { color: var(--muted); font-size: .9rem; margin: 0; }

.scan { position: relative; display: grid; place-items: center; max-width: 420px; width: 100%; justify-self: center; }
.scan svg, .scan img { grid-area: 1 / 1; }
.scan svg { width: 100%; height: auto; overflow: visible; transform: rotate(-90deg); }
.scan circle { fill: none; }
.scan .r { stroke: var(--hairline); stroke-width: .6; }
.scan .r:first-child { stroke-dasharray: .6 3.4; stroke: var(--muted); opacity: .5; }
.scan .track { stroke: var(--stone); stroke-width: 7; }
.scan .arc { stroke: var(--leaf); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 28; }
.scan img { width: 34%; height: auto; border-radius: 22%; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .scan .arc { animation: sweep 1.6s cubic-bezier(.3, .7, .2, 1) .3s both; }
  .scan .r:first-child { transform-origin: center; animation: turn 60s linear infinite; }
  @keyframes sweep { from { stroke-dashoffset: 100; } }
  @keyframes turn { to { transform: rotate(360deg); } }
}

.shot { grid-column: 1 / -1; margin: 40px 0 0; padding: 10px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 20px; }
.shot img { width: 100%; height: auto; display: block; border-radius: 12px; }

section { padding: 112px 0 0; }

/* Features: panels like the app's modules */
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 36px; }
.features div { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 22px; }
.features h3 { display: flex; align-items: center; gap: 10px; }
.features h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); flex: none; }
.features p { color: var(--muted); margin: 0; font-size: .97rem; }

.safety { margin-top: 112px; }
.safety section { padding: 0; }
ol.steps { padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 36px 0 112px; }
ol.steps li { counter-increment: s; padding: 22px; border-radius: 14px; background: var(--inset); }
ol.steps li::before { content: counter(s, decimal-leading-zero); display: block; font-size: 2.5rem; color: var(--leaf); margin-bottom: 16px; }
ol.steps p { color: var(--muted); margin: 0; }
ul.ticks { list-style: none; padding: 8px 0; margin: 36px 0 0; background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; }
ul.ticks li { padding: 14px 22px 14px 52px; position: relative; }
ul.ticks li + li { border-top: 1px solid var(--hairline); }
ul.ticks li::before { content: ""; position: absolute; left: 22px; top: 1.15em; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--leaf); }

dl.req { display: grid; grid-template-columns: max-content 1fr; margin: 36px 0 0; background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
dl.req dt, dl.req dd { margin: 0; padding: 14px 22px; }
dl.req dt { font-weight: 600; }
dl.req dd { color: var(--muted); }
dl.req dt:not(:first-of-type), dl.req dd:not(:first-of-type) { border-top: 1px solid var(--hairline); }
pre { background: var(--inset); padding: 12px 16px; border-radius: 8px; overflow-x: auto; font-size: .88rem; }

details { border-bottom: 1px solid var(--hairline); padding: 18px 0; max-width: 780px; }
details:first-of-type { margin-top: 28px; border-top: 1px solid var(--hairline); }
summary { cursor: pointer; font-weight: 600; font-size: 1.08rem; }
summary::marker { color: var(--leaf); }
details p { margin: 12px 0 0; color: var(--muted); }

footer { margin-top: 112px; padding: 28px 0 44px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: .95rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer span:last-child { display: flex; gap: 20px; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; }
  .scan { max-width: 260px; grid-row: 1; justify-self: start; }
}
@media (max-width: 600px) {
  .top nav a.opt { display: none; }
  dl.req { grid-template-columns: 1fr; }
  dl.req dd { border-top: 0 !important; padding-top: 0; }
  section, .safety { padding-top: 80px; }
  .safety { margin-top: 0; }
  ol.steps { margin-bottom: 80px; }
}
details ul { margin: 12px 0 0; padding-left: 1.2em; color: var(--muted); max-width: 62ch; }
details li { margin-bottom: .4em; }
details li::marker { color: var(--leaf); }
details :not(pre) > code { font-size: .88em; background: var(--inset); padding: 1px 6px; border-radius: 5px; }