/* Hallmark · shape: Workbench · genre: atmospheric · theme: Ribbon (deal 3/3, seed clenlo-calm-private-iphone-997b·a81b5731·2026-10-28·r0) · job: try · draw: ab1ca4
 * hero: Settled · nav: banner over a retracting bar · footer: mast · imagery: screenshots 6 (simctl, demo data) · signature: the Best badge on the one shot Clenlo keeps · ribbon: dawn, brand teal from the app icon, night canvas dropped
 * axes: light/grotesk-sans/chromatic-teal · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S and E, a cleaner page could promise anything; every line rides on what the real screens show (Best badge, Recently Deleted, 30 a day) and the delete table states what cannot be undone */
/* Hallmark · dismissed 58 · the 1440 window at the delete table holds its head and five rows, 88 words, each row a fact a reader needs before deleting */
/* Hallmark · dismissed 25 · the four why-grid lines are one or two short sentences each, set as captions under their titles at 32ch */
@import url("./fonts/fonts.css");
@import url("./tokens.css");
@import url("./base.css");

/* ---------- chrome ---------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.banner { background: var(--color-band); color: var(--color-band-ink); font-size: var(--text-sm); }
.banner .container { display: flex; justify-content: center; gap: var(--space-xs); padding-block: var(--space-xs); text-align: center; }
.banner a { color: var(--color-band-ink); }
.banner a:focus-visible { outline-color: var(--color-band-ink); }

.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: var(--rule-hair) solid transparent; transition: transform var(--dur-long) var(--ease-in-out), border-color var(--dur-short) var(--ease-out); }
.bar.is-scrolled { border-bottom-color: var(--color-rule); }
.bar.is-hidden { transform: translateY(-100%); }
.bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font: 500 var(--text-xl)/1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; border-radius: var(--radius-part); }
.wordmark img { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.bar nav { display: flex; align-items: center; gap: var(--space-lg); }
.bar nav a:not(.btn) { white-space: nowrap; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; border-radius: var(--radius-part); transition: color var(--dur-short) var(--ease-out); }
.bar nav a:not(.btn):hover, .bar nav a[aria-current="page"] { color: var(--color-ink); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: linear-gradient(var(--color-paper), var(--color-paper-3)); box-shadow: var(--edge-light), var(--shadow-part); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { border-color: var(--color-muted); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-accent-ink) 30%, transparent), var(--shadow-part); }
.btn--primary:hover { border-color: var(--color-accent-pressed); background: var(--color-accent-pressed); }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.link { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule); border-radius: var(--radius-part); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.note { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- product captures ---------- */
.shot { margin: 0; aspect-ratio: 880 / 1912; border-radius: 34px; box-shadow: var(--shadow-panel); }
.shot > img { border-radius: inherit; outline: 1px solid color-mix(in oklab, var(--color-ink) 9%, transparent); outline-offset: -1px; }
.shot--crop { aspect-ratio: 880 / 1707; }
[data-kind="product"] > img { filter: none; }
.tray { position: relative; display: grid; place-items: center; border-radius: var(--radius-card); background: linear-gradient(var(--color-paper-2), var(--color-paper-3)); box-shadow: var(--edge-light), var(--shadow-panel); }

/* ---------- hero ---------- */
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; min-height: calc(100svh - 116px); padding-block: var(--space-xl); }
.hero h1 { max-width: 11ch; font-size: clamp(3rem, 5.2vw + 0.75rem, 5.75rem); line-height: 1.0; }
.hero .lead { margin-top: var(--space-lg); max-width: 34ch; color: var(--color-muted); }
.hero .actions { margin-top: var(--space-xl); }
.hero .tray { height: min(680px, calc(100svh - 196px)); min-height: 520px; }
.tray--pair .shot { position: absolute; }
.tray--pair .shot--front { left: 5%; top: 6%; height: 88%; z-index: var(--z-raised); }
.tray--pair .shot--back { right: 7%; top: 17%; height: 74%; opacity: 0.94; }

/* ---------- section rhythm ---------- */
.section { padding-block: var(--section-gap) 0; }
.section--l { padding-top: var(--section-gap-l); }
.section--s { padding-top: var(--section-gap-s); }
.head-line { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-lead); line-height: 1.45; max-width: 44ch; }

/* why: four differences across */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.why-grid li { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.why-grid li:first-child { border-top-color: var(--color-accent); }
.why-grid h3 { font-size: var(--text-2xl); max-width: 12ch; }
.why-grid p { margin-top: var(--space-sm); color: var(--color-muted); max-width: 32ch; }

/* features index */
.index { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-2xl); margin-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-xl); }
.index h3 { font-size: var(--text-title); }
.index h3 + ul { margin-top: var(--space-md); }
.index ul + h3 { margin-top: var(--space-xl); }
.index ul { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; color: var(--color-muted); }
.index-col--lead ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
.index-col--lead h3 { color: var(--color-accent); }

/* plan rows */
.plans .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.rows { margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.rows > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows dt { font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; }
.rows dd { margin: 0; color: var(--color-muted); max-width: 46ch; }

/* pinned tour */
.tour-head { max-width: 30ch; }
.tour { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); margin-top: var(--space-2xl); }
.stage { display: none; }
.panels { display: grid; gap: var(--space-3xl); }
.panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; grid-column: 1 / -1; }
.panel .shot { width: 100%; max-width: 340px; }
.panel h3 { font-size: var(--text-2xl); max-width: 16ch; }
.panel p { margin-top: var(--space-sm); color: var(--color-muted); max-width: 46ch; }
.panel .step { display: block; margin-bottom: var(--space-sm); color: var(--color-accent); font: 400 var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
@media (min-width: 60rem) {
  .js .tour .panels { grid-column: 2; gap: 0; }
  .js .tour .panel { display: flex; flex-direction: column; justify-content: center; min-height: 82svh; padding-left: var(--space-2xl); }
  .js .tour .panel .shot { display: none; }
  .js .tour .stage { display: block; grid-column: 1; grid-row: 1; }
  .js .stage-inner { position: sticky; top: 96px; height: min(720px, calc(100svh - 128px)); }
  .js .stage .tray { height: 100%; }
  .js .stage .shot { position: absolute; height: 88%; opacity: 0; transform: translateY(12px); transition: opacity var(--dur-long) var(--ease-in-out), transform var(--dur-long) var(--ease-in-out); }
  .js .stage .shot.is-on { opacity: 1; transform: none; }
  .js .tour .panel:not(.is-on) { opacity: 0.4; }
  .js .tour .panel { transition: opacity var(--dur-long) var(--ease-in-out); }
}

/* before and after: optimize */
.optimize .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.optimize .tray { height: 640px; }
.optimize .shot { height: 88%; }
.facts { display: grid; gap: var(--space-lg); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.facts li { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.facts b { font: 500 var(--text-md)/1.3 var(--font-body); color: var(--color-ink); }
.facts span { color: var(--color-muted); max-width: 48ch; }

/* delete table */
.table-wrap { margin-top: var(--space-2xl); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
th { padding: 0 var(--space-md) var(--space-sm) 0; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; text-align: left; white-space: nowrap; border-bottom: var(--rule-hair) solid var(--color-rule); }
td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }
td:first-child { color: var(--color-ink); font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; width: 26%; }
td.undo { color: var(--color-ink); font-weight: 500; width: 24%; }
td.undo.no { color: var(--color-error); }

/* close */
.close { padding-block: var(--section-gap-l); }
.close .container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.close .tray { height: 600px; }
.close .shot { height: 86%; }
.close .actions { margin-top: var(--space-xl); }
#download:target .btn--primary { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* footer: mast */
.mast { padding-block: var(--space-3xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.mast .big { display: flex; align-items: center; gap: var(--space-lg); font: 400 clamp(3.5rem, 9vw, 8.5rem)/0.95 var(--font-display); letter-spacing: -0.045em; }
.mast .big img { width: clamp(56px, 7vw, 112px); height: auto; border-radius: 24%; flex-shrink: 0; }
.mast .links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin: var(--space-2xl) 0 0; padding: var(--space-lg) 0 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.mast .links a { color: var(--color-ink); text-decoration: none; border-radius: var(--radius-part); }
.mast .links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.mast .legal { margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); max-width: 90ch; }
.mast .legal p + p { margin-top: var(--space-2xs); }

/* ---------- long documents: privacy, terms, support ---------- */
.doc { padding-block: var(--space-3xl) var(--section-gap-s); }
.doc .container { max-width: calc(62ch + 2 * var(--gutter)); }
.doc h1 { font-size: var(--text-display-s); max-width: 18ch; }
.doc .meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); margin: var(--space-lg) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.doc .meta dt { color: var(--color-ink); font-weight: 500; }
.doc .meta dd { margin: 0; }
.doc .lang { margin-top: var(--space-md); font-size: var(--text-sm); }
.doc-actions { margin-top: var(--space-xl); }
.doc .summary { margin-top: var(--space-xl); padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-card); background: var(--color-accent-soft); color: var(--color-ink); font-size: var(--text-lead); line-height: 1.5; }
.prose { margin-top: var(--space-xl); line-height: 1.7; }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); line-height: 1.15; max-width: 36ch; }
.prose h3 { margin-top: var(--space-xl); font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; }
.prose p, .prose ul { margin-top: var(--space-md); max-width: 58ch; }
.prose ul { padding-left: var(--space-lg); }
.prose strong, .summary strong { font-weight: 600; }
.prose li + li { margin-top: var(--space-xs); }
.prose table { margin-top: var(--space-md); }
.prose td:first-child { width: 24%; font-size: var(--text-md); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
.prose td { padding-block: var(--space-md); }
.prose a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.doc-foot { padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.doc-foot .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); }
.doc-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.doc-foot a { white-space: nowrap; color: var(--color-ink); text-decoration: none; border-radius: var(--radius-part); }
.doc-foot a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* one reveal: the hero visual settles in */
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .bar nav .hide-s { display: none; }
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; }
  .hero .tray { height: 560px; min-height: 0; }
  .tray--pair .shot--front { left: 8%; } .tray--pair .shot--back { right: 6%; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-col--lead { grid-column: 1 / -1; }
  .plans .container, .optimize .container, .close .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .optimize .tray, .close .tray { height: 540px; }
  .optimize .tray { order: 2; }
  .tour { grid-template-columns: minmax(0, 1fr); }
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel .shot { max-width: 300px; }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: auto; }
  .table-wrap thead { display: none; }
  .table-wrap tr { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .table-wrap td { padding: var(--space-2xs) 0; border: 0; }
  .table-wrap td[data-label]::before { content: attr(data-label) ": "; color: var(--color-ink); font-weight: 500; }
  .prose td:first-child { width: auto; }
}
@media (max-width: 24rem) {
  .doc-page .bar nav a:nth-child(2) { display: none; }
}
@media (max-width: 40rem) {
  .why-grid, .index { grid-template-columns: minmax(0, 1fr); }
  .hero .tray, .optimize .tray, .close .tray { height: 480px; }
  .doc .summary { padding: var(--space-md) var(--space-lg); }
  .bar nav { gap: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .bar, .js .stage .shot, .js .tour .panel { transition: none; }
  .bar.is-hidden { transform: none; }
}