/* keepworthy.photos — shared styles for the home and pricing pages.
   Tokens follow docs/marketing/website.md §4.1 (the app's DesignSystem.swift palette). */

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-latin-var.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --canvas: #FFFFFF; --surface: #F7F6F4; --muted: #EFEAE0; --text: #2A211E; --text-2: #5F5550; --border: #E4E1DC;
  --marigold: #FFB627; --persimmon: #FF5C3C; --linen: #FBF5EA; --sage: #79A375;
  --link: #C7442A;
  --canvas-dark: #1A1411; --surface-dark: #2A211E; --text-dark: #FBF5EA; --text-2-dark: #D8D1C7; --border-dark: #4A3F38;
  --persimmon-dark: #FF7A5C; --marigold-dark: #FFC247;
  --desktop: linear-gradient(160deg, #F4EEE4 0%, #E8DDCF 48%, #D6C4AE 100%);
  --ease-motion: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --page: 1200px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--persimmon); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- switches from site-config.js ---------- */
.pro-chip { display: none; }
html[data-pro-labels="on"] .pro-chip { display: inline-flex; }
html[data-pro-labels="on"] .if-no-pro-labels, html:not([data-pro-labels="on"]) .if-pro-labels { display: none; }
html[data-download="app-store"] .when-soon, html:not([data-download="app-store"]) .when-live { display: none; }

/* ---------- type ---------- */
.d1, .d2, .t1 { font-family: var(--display); margin: 0; text-wrap: balance; color: inherit; }
.d1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); line-height: 1.03; font-weight: 700; letter-spacing: -0.03em; }
.d2 { font-size: clamp(2rem, 4.3vw, 3.25rem); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; }
.t1 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--text-2); max-width: 40rem; margin: 20px auto 0; text-wrap: pretty; }
.center { text-align: center; }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 28px; }
.prose p { margin: 0 0 16px; max-width: 36rem; color: var(--text-2); text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--link); }
.mini { margin: 0; color: var(--text-2); text-wrap: pretty; }
.mini b { color: var(--text); font-weight: 600; }
.label { font: 600 12px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- header, calls to action, chips ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; max-width: 1320px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--display); letter-spacing: -0.01em; color: var(--text); }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.site-nav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
.site-nav a { color: var(--text-2); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }

.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.badge { display: inline-block; line-height: 0; border-radius: 9px; }
.badge img { height: 54px; width: auto; }
.cta .also { font-size: 14px; color: var(--text-2); }
.cta .also a { color: inherit; }
.soon { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 12px 20px; border-radius: 999px; background: var(--surface); color: var(--text); font: 600 16px/1.2 var(--body); }
.soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #FFB627, #FF5C3C); }
.dark .soon { background: var(--surface-dark); color: var(--text-dark); }
.trust { font-size: 14px; color: var(--text-2); max-width: 34rem; margin: 16px auto 0; text-wrap: balance; }

.pro-chip { align-items: center; gap: 5px; font: 700 12px/1 var(--body); letter-spacing: 0; text-transform: none; padding: 5px 10px; border-radius: 999px; background: rgba(255, 182, 39, .28); border: 1px solid rgba(255, 182, 39, .62); color: var(--text); vertical-align: 0.15em; white-space: nowrap; }
.pro-chip svg { width: 10px; height: 10px; }
.dark .pro-chip { background: rgba(255, 194, 71, .16); border-color: rgba(255, 194, 71, .55); color: var(--text-dark); }

/* ---------- Apple device frames ----------
   Apple's marketing guidelines: frames are used as provided, with no added shadow, cropping,
   tilting or overlap, and devices shown together keep their real relative size.
   Screen rectangles are measured from the transparent screen area of each frame PNG. */
.device { position: relative; margin: 0; flex: none; }
.device-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.device-iphone { aspect-ratio: 1470 / 3000; width: var(--iphone-w, 300px); }
.device-iphone .device-screen { position: absolute; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; overflow: hidden; border-radius: 13% / 6.2%; background: #000; }
.device-mac { aspect-ratio: 3860 / 2540; width: var(--mac-w, 100%); }
.device-mac .device-screen { position: absolute; left: 10.829%; top: 11.339%; width: 78.342%; height: 77.323%; overflow: hidden; background: var(--desktop); }
.device-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.device-mac .device-screen > img { inset: auto; left: 3.5%; top: 9%; width: 93%; height: auto; aspect-ratio: 1657 / 949; border-radius: 0.9% / 1.6%; box-shadow: 0 0.6vw 2vw rgba(42, 33, 30, .28), 0 0 0 1px rgba(42, 33, 30, .12); }
.device-screen > img.swap { opacity: 0; transition: opacity 400ms var(--ease-motion); }
.device-screen > img.swap.is-active { opacity: 1; }

/* A Mac and an iPhone at true relative size: iPhone width = 0.2561 x MacBook frame width. */
.device-pair { display: flex; align-items: flex-end; justify-content: center; gap: 3%; }
.device-pair .device-mac { --mac-w: 76%; }
.device-pair .device-iphone { --iphone-w: calc(76% * 0.2561); }

.screen-crop { position: relative; border-radius: 22px; overflow: hidden; height: 380px; box-shadow: 0 0 0 1px var(--border); background: var(--canvas); }
.screen-crop img { width: 100%; height: auto; }
.screen-crop.fade { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); }
.dark .screen-crop { box-shadow: 0 0 0 1px var(--border-dark); }
.screen-crop.auto { height: auto; }

/* ---------- hero ---------- */
.hero { padding: 72px 0 48px; }
.hero-devices { max-width: 1120px; margin: 64px auto 0; padding: 0 28px; }

/* ---------- washes and the dark stage ---------- */
.wash-in { height: 160px; background: linear-gradient(180deg, #FFFFFF 0%, #F2EFEA 45%, #1A1411 100%); }
.wash-out { height: 160px; background: linear-gradient(180deg, #1A1411 0%, #2A211E 30%, #FFFFFF 100%); }
.dark { background: var(--canvas-dark); color: var(--text-dark); }
.dark .lede, .dark .mini, .dark .prose p, .dark .label, .dark .cta .also { color: var(--text-2-dark); }
.dark .mini b { color: var(--text-dark); }
.beat { padding: 120px 0; }
.beat.first { padding-top: 56px; }

.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: center; margin-top: 72px; }
.feature .media { display: flex; justify-content: center; }
.minis { display: grid; gap: 26px; }
.minis.row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }

.pro-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; margin-top: 110px; padding-top: 56px; border-top: 1px solid var(--border-dark); }
.pro-row .prose { display: grid; gap: 14px; justify-items: start; }
.pro-row .prose p { margin: 0; }

.mac-stage { max-width: 1040px; margin: 64px auto 0; }

/* ---------- the curtain (website.md §5.2) ---------- */
@property --split { syntax: "<percentage>"; initial-value: 50%; inherits: true; }
.curtain-wrap { max-width: 560px; margin: 64px auto 0; }
.curtain-labels, .curtain-chips { display: flex; justify-content: space-between; gap: 12px; }
.curtain-labels { margin-bottom: 12px; }
.tag { font: 700 13px/1 var(--body); padding: 6px 11px; border-radius: 999px; color: var(--canvas-dark); }
.tag.pick { background: var(--marigold-dark); }
.tag.compare { background: var(--persimmon-dark); }
.curtain { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; --split: 50%; }
.curtain img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.curtain .left { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.curtain .right { clip-path: inset(0 0 0 var(--split)); }
.curtain .divider { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff; transform: translateX(var(--split-px, 280px)); }
.curtain .handle { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(251, 245, 234, .94); color: var(--canvas-dark); display: grid; place-items: center; transform: translateX(var(--split-px, 280px)); transition: opacity 150ms; }
.curtain .handle svg { width: 20px; height: 20px; }
.curtain-chips { margin-top: 14px; font-size: 14px; color: var(--text-2-dark); }
.curtain-chips span:last-child { text-align: right; }
.curtain-hint { display: none; margin: 12px 0 0; font-size: 14px; color: var(--text-2-dark); text-align: center; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 72px; }

/* ---------- iPhone and Mac section: sticky stage, native scroll (website.md §2 A6) ---------- */
.steps-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; margin-top: 40px; }
.step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; opacity: .38; transition: opacity 400ms var(--ease-motion); }
.step.is-active { opacity: 1; }
.step-media { display: none; }
.stage { position: sticky; top: 14vh; height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.stage-captions { display: flex; justify-content: center; gap: 3%; font: 600 13px/1 var(--body); color: var(--text-2); }
.stage-captions span { transition: color 400ms var(--ease-motion); }
.stage-captions .mac-caption { width: 76%; text-align: center; }
.stage-captions .iphone-caption { width: calc(76% * 0.2561); text-align: center; }
.stage-captions span.is-active { color: var(--persimmon); }

/* ---------- honesty beat ---------- */
.honest { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; margin-top: 64px; }
.honest .stack { display: grid; gap: 24px; }
.still { border-radius: 18px; background: var(--surface); padding: 22px; display: grid; gap: 12px; }
.still img { height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--border); }
.cleanup-receipt { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--border); padding: 18px 20px; display: grid; gap: 10px; }
.cleanup-receipt strong { font: 700 20px/1.2 var(--display); }
.cleanup-receipt .recovery { background: var(--surface); border-radius: 10px; padding: 12px 14px; font-size: 15px; color: var(--text-2); }

/* ---------- free beat and the payback receipt ---------- */
.free { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; margin-top: 56px; }
.till { background: var(--linen); color: var(--text); border-radius: 4px; padding: 30px 30px 24px; font-variant-numeric: tabular-nums; position: relative; width: 100%; max-width: 380px; margin: 0 auto; box-shadow: 0 1px 2px rgba(42, 33, 30, .06), 0 4px 12px rgba(42, 33, 30, .05); }
.till::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: radial-gradient(circle at 6px 8px, transparent 5px, var(--linen) 5.5px) 0 0 / 12px 8px repeat-x; }
.till .row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed #D9CFBF; font-size: 15px; }
.till .row b { font-weight: 700; }
.till .row.total { border-bottom: 0; padding-top: 14px; font: 700 17px/1.3 var(--body); }
.till .fine { margin: 14px 0 0; font-size: 12px; color: var(--text-2); }
.pro-line { margin-top: 88px; padding-top: 48px; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }

/* ---------- questions and footer ---------- */
.faq { max-width: 760px; margin: 80px auto 0; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 2px; font: 600 18px/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--body); color: var(--text-2); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 2px 22px; color: var(--text-2); max-width: 40rem; }
.faq details p a { color: var(--link); }
.site-footer { border-top: 1px solid var(--border); margin: 110px auto 0; padding: 36px 28px 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: center; max-width: 1320px; font-size: 14px; color: var(--text-2); }
.site-footer .brand { font-size: 16px; }
.site-footer .brand img { width: 22px; height: 22px; border-radius: 5px; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer nav a:hover { color: var(--text); }

/* ---------- pricing page ---------- */
.pricing { padding: 64px 0 0; }
.free-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 48px; list-style: none; padding: 0; margin: 48px auto 0; max-width: 900px; }
.free-list li { display: flex; gap: 12px; align-items: baseline; }
.free-list li::before { content: ""; flex: none; width: 15px; height: 8px; border-left: 2.5px solid var(--sage); border-bottom: 2.5px solid var(--sage); transform: translateY(-3px) rotate(-45deg); }
.table-wrap { overflow-x: auto; margin: 96px auto 0; max-width: 1000px; }
.tier { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 15px; }
.tier caption { text-align: left; padding: 0 16px 18px; }
.tier th, .tier td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.tier thead th { font: 700 20px/1.2 var(--display); border-bottom: 2px solid var(--text); padding-bottom: 16px; }
.tier thead th:first-child { width: 24%; }
.tier thead th + th { width: 38%; }
.tier tbody th[colspan] { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding-top: 34px; border-bottom: 0; }
.tier tbody th[scope="row"] { font-weight: 600; }
.tier td { color: var(--text-2); }
.tier td.same { color: var(--text); }
.tier-foot { max-width: 1000px; margin: 20px auto 0; padding: 0 16px; font-size: 14px; color: var(--text-2); }
.lose { max-width: 820px; margin: 110px auto 0; text-align: center; }
.lose p { font: 600 clamp(1.4rem, 2.6vw, 2rem)/1.3 var(--display); letter-spacing: -0.015em; margin: 18px 0 0; text-wrap: balance; }
.price { max-width: 640px; margin: 96px auto 0; }
.price p { margin-left: auto; margin-right: auto; }

/* ---------- press page ---------- */
.press { padding: 64px 0 0; }
.press-head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; align-items: end; }
.press-head .d1 { margin-top: 18px; font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
.press-head .lede { margin: 20px 0 0; }
.press-contact { background: var(--surface); border-radius: 18px; padding: 24px; display: grid; gap: 10px; }
.press-contact p { margin: 0; }
.press-contact a { color: var(--link); }
.press-contact .mini { font-size: 14px; }
.press-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 56px; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--canvas); z-index: 2; }
.press-toc a { font-size: 15px; color: var(--text-2); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
.press-toc a:hover { color: var(--text); background: var(--surface); }
.press-section { padding-top: 96px; scroll-margin-top: 60px; }
.press-section > .t1 { margin-bottom: 28px; }
.press-h3 { font: 600 12px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin: 56px 0 20px; }
.press-note { margin: -12px 0 28px; }
.facts { margin: 0; border-top: 2px solid var(--text); max-width: 1000px; }
.facts > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--text-2); text-wrap: pretty; }
.facts dd a { color: var(--link); }
.key-facts { margin: 0; padding: 0 0 0 20px; max-width: 46rem; display: grid; gap: 12px; color: var(--text-2); }
.key-facts li::marker { color: var(--persimmon); }
.key-facts code { font-size: 0.85em; background: var(--surface); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.founder { max-width: 40rem; }
.founder p { max-width: none; }
.founder .sign { color: var(--text); font-weight: 600; }
.quotes { columns: 2 22rem; column-gap: 24px; }
.quotes blockquote { break-inside: avoid; margin: 0 0 24px; padding: 22px 24px; border-radius: 18px; background: var(--surface); font: 500 18px/1.45 var(--display); letter-spacing: -0.005em; text-wrap: pretty; }
.press-faq { margin: 0; max-width: 820px; }
.asset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.asset { margin: 0; display: grid; gap: 12px; }
.asset { min-width: 0; }
.asset-art { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--surface); overflow: hidden; }
.asset-art img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.asset-art .icon-art { inset: 14% auto auto 50%; width: auto; aspect-ratio: 1; transform: translateX(-50%); border-radius: 22.5%; }
.asset figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--text-2); }
.asset figcaption b { flex-basis: 100%; color: var(--text); font-weight: 600; }
.asset figcaption a { color: var(--link); }
.shot-grid { display: grid; gap: 20px; }
.shot-grid.iphone { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; }
.shot-grid.mac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shot-grid figure { margin: 0; display: grid; gap: 10px; }
.shot-grid a { display: block; line-height: 0; }
.shot-grid img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--border); }
.shot-grid.mac img { border-radius: 8px; }
.shot-grid figcaption { font-size: 14px; color: var(--text-2); }

@media (max-width: 900px) {
  .press-head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .asset-grid, .shot-grid.iphone { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-grid.mac { grid-template-columns: minmax(0, 1fr); }
  .press-toc { position: static; }
}

@media (max-width: 900px) {
  .feature, .pro-row, .checks, .honest, .free, .pro-line, .steps-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .minis.row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { display: none; }
  .step { min-height: 0; opacity: 1; padding: 32px 0; }
  .step-media { display: flex; justify-content: center; margin-top: 20px; }
  .step-media .device-iphone { --iphone-w: 230px; }
  .beat { padding: 80px 0; }
  .free-list { grid-template-columns: minmax(0, 1fr); }
  .screen-crop:not(.auto) { height: 320px; }
}
@media (max-width: 700px) {
  /* Below this width a Mac at true scale next to an iPhone would shrink the iPhone under Apple's 200 px minimum, so the hero shows the iPhone alone. */
  .hero-devices .device-pair .device-mac { display: none; }
  .hero-devices .device-pair .device-iphone { --iphone-w: 240px; }
}
@media (max-width: 560px) {
  .minis.row { grid-template-columns: minmax(0, 1fr); }
  .site-nav .optional { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step, .device-screen > img.swap, .curtain .handle, .stage-captions span { transition: none; }
  .curtain-hint { display: block; }
}