/* ============================================================================
   Shrink — shrink.ripeseed.io
   Design tokens are the app's own (Shrink/Theme/Theme.swift). The accent is
   used ONLY for "space you get back": savings figures, progress, the primary
   action. Never for chrome. Keep it that way.
   No build step, no framework, no third-party requests.
   ========================================================================= */

/* --- Typefaces -------------------------------------------------------------
   Archivo + JetBrains Mono, SIL Open Font License 1.1, self-hosted. These are
   the same subsetted variable files the app-preview film vendors, so the glyph
   set is ASCII plus the arrows, middots, dashes and quote marks the UI uses.
   Anything outside that falls through to the system stack below on purpose. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-var.woff2) format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-var.woff2) format('woff2');
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  color-scheme: dark light;

  --bg: #0b0b0c;
  --surf: #141416;
  --surf2: #1c1c1f;
  --line: rgba(255, 255, 255, 0.11);
  --line2: rgba(255, 255, 255, 0.06);
  --fg: #f3f2ef;
  --fg2: rgba(243, 242, 239, 0.6);
  --fg3: rgba(243, 242, 239, 0.34);
  --acc: #b6ee4c;
  --acc-text: #b6ee4c;
  --acc-dim: rgba(182, 238, 76, 0.16);
  --warn: #f0a93e;
  --ink: #0b0b0c;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);

  --r-card: 14px;
  --r-btn: 15px;
  --r-sheet: 26px;
  --r-pill: 999px;

  --pad: clamp(20px, 5vw, 32px);
  --maxw: 1080px;

  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f2ee;
    --surf: #ffffff;
    --surf2: #f1efea;
    --line: rgba(0, 0, 0, 0.1);
    --line2: rgba(0, 0, 0, 0.05);
    --fg: #131312;
    --fg2: rgba(19, 19, 18, 0.6);
    --fg3: rgba(19, 19, 18, 0.36);
    --acc: #9ad335;
    --acc-text: #3f6a12;
    --acc-dim: rgba(154, 211, 53, 0.2);
    --warn: #c97f17;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  }
}

/* --- Base --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* height:auto is load-bearing: the width/height attributes on these elements are
   there to reserve the right aspect ratio, and without it they render at their
   full pixel height. */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-color: var(--fg3);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 800;
  text-wrap: balance;
}

p { margin: 0; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acc);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--r-btn);
  font-weight: 700;
  z-index: 100;
}

.skip:focus {
  left: 16px;
  top: 16px;
}

/* --- Layout primitives -------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section {
  padding-block: clamp(64px, 10vw, 116px);
}

.section + .section {
  border-top: 1px solid var(--line2);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 0 0 16px;
}

.eyebrow.on {
  color: var(--acc-text);
}

.lede {
  font-size: clamp(17px, 2vw, 19px);
  color: var(--fg2);
  max-width: 58ch;
  text-wrap: pretty;
}

/* --- Header ------------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line2);
}

.hdr-in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 19px;
  margin-right: auto;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}

/* :not(.btn) matters — `.nav a` out-specifies `.btn-acc`, so without it the
   "Get the app" pill inherits --fg2 and renders washed-out grey on lime. */
.nav a:not(.btn) {
  color: var(--fg2);
  text-decoration: none;
  font-weight: 500;
}

.nav a:not(.btn):hover {
  color: var(--fg);
}

@media (max-width: 720px) {
  .nav .hide-sm { display: none; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-btn);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

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

.btn-acc {
  background: var(--acc);
  color: var(--ink);
}

.btn-acc:hover {
  background: color-mix(in srgb, var(--acc) 88%, white);
}

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
}

.btn-ghost:hover {
  background: var(--surf2);
}

.btn-sm {
  padding: 9px 16px;
  font-size: 14px;
  border-radius: var(--r-pill);
}

.btn-sub {
  font-weight: 500;
  font-size: 12px;
  opacity: 0.72;
  margin-left: -2px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cta-note {
  font-size: 14px;
  color: var(--fg3);
  margin-top: 16px;
}

/* On a phone, two half-width buttons look accidental — stretch them instead. */
@media (max-width: 520px) {
  .cta-row .btn {
    flex: 1 1 100%;
  }
}

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

.hero {
  padding-block: clamp(44px, 7vw, 84px) clamp(56px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto 30%;
  height: 620px;
  background: radial-gradient(closest-side, var(--acc-dim), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 60px);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-in {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero h1 {
  font-size: clamp(42px, 7.2vw, 74px);
  font-weight: 900;
  margin-bottom: 22px;
}

.hero h1 em {
  font-style: normal;
  color: var(--acc-text);
}

.hero .lede {
  margin-bottom: 30px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line2);
}

.stat b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(22px, 3.4vw, 27px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--acc-text);
}

.stat span {
  display: block;
  font-size: 13px;
  color: var(--fg3);
  margin-top: 3px;
}

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

.phone {
  position: relative;
  width: min(300px, 78vw);
  margin-inline: auto;
  border-radius: 44px;
  padding: 9px;
  background: linear-gradient(160deg, #3a3a3e, #131315 42%, #2c2c30);
  box-shadow: var(--shadow);
}

.phone::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.phone img,
.phone video {
  width: 100%;
  border-radius: 36px;
  display: block;
  background: #0b0b0c;
}

.phone-lg {
  width: min(330px, 80vw);
}

/* --- Preview film ------------------------------------------------------- */

.film {
  text-align: center;
}

.film h2 {
  font-size: clamp(28px, 4.2vw, 40px);
  max-width: 18ch;
  margin-inline: auto;
}

.film .lede {
  margin: 18px auto 0;
}

.film .phone {
  width: min(344px, 76vw);
  margin-top: clamp(36px, 5vw, 52px);
}

/* Reserve the frame before the poster decodes, so nothing jumps on load. */
.film video {
  aspect-ratio: 640 / 1386;
  object-fit: cover;
}

.film-note {
  margin-top: 26px;
  font-size: 14px;
  color: var(--fg3);
}

/* --- Proof strip -------------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-top: 36px;
}

.proof-card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px 18px 16px;
}

.proof-card .file {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg3);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proof-card .pair {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.proof-card .from {
  color: var(--fg2);
  text-decoration: line-through;
  text-decoration-color: var(--fg3);
}

.proof-card .to {
  color: var(--acc-text);
}

.proof-card .pct {
  margin-top: 12px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surf2);
  overflow: hidden;
}

.proof-card .pct i {
  display: block;
  height: 100%;
  background: var(--acc);
  border-radius: var(--r-pill);
}

.proof-card .lbl {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg3);
  text-transform: uppercase;
}

.caption {
  margin-top: 22px;
  font-size: 14px;
  color: var(--fg3);
  max-width: 62ch;
}

/* --- Feature rows ------------------------------------------------------- */

.feat {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

@media (min-width: 880px) {
  .feat {
    grid-template-columns: 1fr 1fr;
  }
  .feat.flip .feat-txt {
    order: 2;
  }
}

.feat + .feat {
  margin-top: clamp(64px, 9vw, 104px);
}

.feat h2 {
  font-size: clamp(28px, 4.2vw, 40px);
  margin-bottom: 18px;
}

.feat .lede {
  margin-bottom: 24px;
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  color: var(--fg2);
  text-wrap: pretty;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 15px;
  height: 9px;
  border-left: 2.5px solid var(--acc-text);
  border-bottom: 2.5px solid var(--acc-text);
  transform: rotate(-45deg);
}

.ticks strong {
  color: var(--fg);
  font-weight: 700;
}

/* --- Skip-list cards ---------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 40px;
}

.card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px;
}

.card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.card p {
  font-size: 15px;
  color: var(--fg2);
  line-height: 1.55;
}

.card .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  margin-bottom: 13px;
}

/* --- Pricing ------------------------------------------------------------ */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 40px;
  align-items: stretch;
}

.tier {
  position: relative;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
}

.tier.pick {
  border-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 7%, var(--surf));
}

.tier .badge {
  position: absolute;
  top: -10px;
  left: 18px;
  background: var(--acc);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

.tier h3 {
  font-size: 19px;
  margin-bottom: 6px;
}

.tier .price {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 12px 0 2px;
}

.tier .per {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg3);
}

.tier p {
  font-size: 15px;
  color: var(--fg2);
  margin-top: 14px;
  line-height: 1.55;
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  margin-top: 40px;
  border-top: 1px solid var(--line2);
}

.faq details {
  border-bottom: 1px solid var(--line2);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  position: relative;
}

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

.faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 28px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--fg3);
  border-bottom: 2px solid var(--fg3);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
  top: 32px;
}

.faq .a {
  padding: 0 0 22px;
  color: var(--fg2);
  font-size: 16px;
  max-width: 72ch;
  text-wrap: pretty;
}

.faq .a + .a {
  padding-top: 0;
  margin-top: -8px;
}

/* --- Closing CTA -------------------------------------------------------- */

.close {
  text-align: center;
}

.close h2 {
  font-size: clamp(32px, 5.6vw, 52px);
  margin-bottom: 20px;
}

.close .lede {
  margin-inline: auto;
  margin-bottom: 30px;
}

.close .cta-row {
  justify-content: center;
}

/* --- Footer ------------------------------------------------------------- */

.ftr {
  border-top: 1px solid var(--line2);
  padding-block: 48px 56px;
  font-size: 15px;
}

.ftr-in {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: space-between;
}

.ftr-brand {
  max-width: 30ch;
}

.ftr-brand .name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 17px;
  margin-bottom: 10px;
}

.ftr-brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.ftr-brand p {
  color: var(--fg3);
  font-size: 14px;
  line-height: 1.55;
}

.ftr-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 56px;
}

.ftr-col h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 12px;
}

.ftr-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.ftr-col a {
  color: var(--fg2);
  text-decoration: none;
}

.ftr-col a:hover {
  color: var(--fg);
}

.ftr-legal {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line2);
  font-size: 13px;
  color: var(--fg3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
}

/* --- Document pages (privacy / terms / support) ------------------------- */

.doc {
  padding-block: clamp(48px, 7vw, 76px) clamp(56px, 8vw, 92px);
}

.doc-in {
  max-width: 74ch;
  margin-inline: auto;
}

.doc h1 {
  font-size: clamp(34px, 5.4vw, 50px);
  margin-bottom: 14px;
}

.doc .dates {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 34px;
}

.doc h2 {
  font-size: clamp(21px, 2.8vw, 25px);
  margin: 48px 0 14px;
  scroll-margin-top: 88px;
}

.doc h3 {
  font-size: 17px;
  margin: 28px 0 10px;
  letter-spacing: -0.015em;
}

.doc p,
.doc li {
  color: var(--fg2);
  font-size: 16.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

.doc p + p {
  margin-top: 16px;
}

.doc ul,
.doc ol {
  margin: 16px 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.doc strong {
  color: var(--fg);
  font-weight: 700;
}

/* Same trap as `.nav a` above, but worse: `.doc a` beats `.btn-acc`, so the
   support page's mailto button painted its label in --acc-text — lime on lime,
   i.e. an apparently empty green box. Buttons keep their own colour. */
.doc a:not(.btn) {
  color: var(--acc-text);
  font-weight: 500;
}

.doc hr {
  border: 0;
  border-top: 1px solid var(--line2);
  margin: 44px 0;
}

.doc .tldr {
  background: var(--surf);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: var(--r-card);
  padding: 22px 24px;
  margin-bottom: 40px;
}

.doc .tldr h2 {
  margin: 0 0 10px;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--acc-text);
}

.doc .tldr p {
  font-size: 16px;
}

.doc .note {
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px 20px;
  margin: 24px 0;
}

.doc .note p {
  font-size: 15.5px;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15.5px;
}

.doc .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.doc th,
.doc td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line2);
  vertical-align: top;
  color: var(--fg2);
}

.doc th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 500;
  white-space: nowrap;
}

.doc td:first-child {
  color: var(--fg);
  font-weight: 600;
  white-space: nowrap;
}

.toc {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px 24px;
  margin-bottom: 44px;
}

.toc h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 0 0 12px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
}

.toc a {
  color: var(--fg2);
  font-weight: 400;
  font-size: 15.5px;
}

/* --- Support-page helpers ----------------------------------------------- */

.contact-card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px;
  margin-bottom: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
}

.contact-card .who h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.contact-card .who p {
  font-size: 15px;
  color: var(--fg3);
}

/* --- 404 ---------------------------------------------------------------- */

.mid {
  min-height: 62vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 20px;
  padding-block: 80px;
}

.mid .big {
  font-family: var(--mono);
  font-size: clamp(56px, 12vw, 104px);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--acc-text);
  line-height: 1;
}