/* PingMeSubs: Paper & stamps. A warm desk, paper sheets with perforated stubs, teal ink, gold and stamp red.
   Colours from the app's ui/theme/Theme.kt (the Paper skin); type from its fonts. */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson_bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier_prime_bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Big Shoulders Stencil"; src: url("../fonts/big_shoulders_stencil.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --desk: #EFE7D8; --sheet: #FFFBF3; --kraft: #DCC7A4; --rule: #E6DAC4; --perf: #CBBB9F;
  --ink: #1E2A2E; --ink2: #5B5047; --muted: #8C8072; --teal: #0F766E; --teal-wash: #DCEFEA; --red: #C2412D; --gold: #E2A72A; --gold-wash: #F8E8C2;
  --bg: var(--desk); --bg2: var(--sheet); --fg: var(--ink); --fg2: var(--ink2); --fg3: var(--muted);
  --line: rgba(30, 42, 46, .14); --card: var(--sheet);
  --accent: var(--teal); --accent-ink: var(--sheet); --accent2: var(--teal);
  --display: "Fraunces", Georgia, serif; --display-weight: 800; --body: "Atkinson Hyperlegible", system-ui, sans-serif; --radius: 14px;
}
body { background-color: var(--desk); background-image: radial-gradient(rgba(30, 42, 46, .05) 1px, transparent 1.2px); background-size: 22px 22px; }
.hl { color: var(--teal); }
.title { letter-spacing: -.035em; }
.tagline { color: var(--red); font-weight: 700; font-style: italic; }
.eyebrow { font-family: "Courier Prime", monospace; letter-spacing: .14em; color: var(--ink2); }
.eyebrow::before { background: var(--red); height: 3px; }
.crumb { background: var(--sheet); }
.btn { border-radius: 12px; box-shadow: 0 3px 0 #0A4F49; }
.btn:hover { box-shadow: 0 3px 0 #0A4F49, 0 14px 30px rgba(15, 118, 110, .28); }
.btn.ghost { box-shadow: none; border-radius: 12px; background: var(--sheet); }
.hero-shade { background: linear-gradient(90deg, rgba(239, 231, 216, .96) 0%, rgba(239, 231, 216, .55) 42%, transparent 66%), linear-gradient(0deg, var(--desk) 0%, transparent 22%); }
@media (max-width: 900px) { .hero-shade { background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(239, 231, 216, .9) 56%, var(--desk) 100%); } }
.hand { margin-top: 26px; max-width: 24em; font: 700 15px/1.4 "Courier Prime", monospace; color: var(--ink2); padding-left: 14px; border-left: 3px solid var(--gold); }

/* features as paper tickets with a perforated stub */
.feat { background: var(--sheet); border: 0; border-radius: 10px; padding: 26px 24px 30px 24px; box-shadow: 0 1px 0 rgba(30, 42, 46, .08), 0 18px 40px -22px rgba(60, 40, 20, .45);
  background-image: radial-gradient(circle 9px at 0 64px, var(--desk) 98%, transparent), radial-gradient(circle 9px at 100% 64px, var(--desk) 98%, transparent); }
.feat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 10px 10px 0 0; background: var(--gold); }
.feat:nth-child(2)::before { background: var(--teal); } .feat:nth-child(3)::before { background: var(--red); } .feat:nth-child(4)::before { background: var(--ink); }
.feat::after { content: ""; position: absolute; left: 20px; right: 20px; top: 64px; border-top: 2px dashed var(--perf); }
.feat-n { margin-bottom: 40px; font: 700 13px/1 "Courier Prime", monospace; color: var(--ink2); letter-spacing: .1em; text-transform: uppercase; }
.feat h3 { font-weight: 800; }

/* the drawer of presets */
.drawer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.tray { position: relative; padding: 22px 22px 24px; border-radius: 14px; background: var(--kraft); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .08), 0 16px 30px -20px rgba(60, 40, 20, .5); }
.tray h3 { font-size: 24px; margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 7px 12px; border-radius: 6px; background: var(--sheet); font: 700 13.5px/1 "Courier Prime", monospace; color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .1); transform: rotate(var(--r, 0deg)); }
.chips span:nth-child(3n) { --r: -1.2deg; } .chips span:nth-child(3n + 1) { --r: .8deg; }

/* steps as rubber stamps */
.step b { width: 92px; height: 92px; border-radius: 14px; background: transparent; border: 4px solid var(--red); color: var(--red); font: 900 46px/1 "Big Shoulders Stencil", sans-serif; transform: rotate(-6deg); box-shadow: inset 0 0 0 3px var(--desk), inset 0 0 0 5px rgba(194, 65, 45, .4); }
.steps::before { background: repeating-linear-gradient(90deg, var(--ink2) 0 8px, transparent 8px 14px); opacity: .45; }
@media (max-width: 760px) { .steps::before { background: repeating-linear-gradient(180deg, var(--ink2) 0 8px, transparent 8px 14px); } }

/* promise ribbon: a kraft tape */
.promise { background: var(--gold); color: #3A2A06; }
.promise span { font-family: "Big Shoulders Stencil", sans-serif; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }

/* early access: a big ticket */
.early { background: var(--sheet); border: 0; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(60, 40, 20, .5); }
.early::before { content: "RENEW"; position: absolute; right: 26px; top: 22px; padding: 6px 12px; border: 3px solid var(--red); border-radius: 8px; color: var(--red); font: 900 22px/1 "Big Shoulders Stencil", sans-serif; letter-spacing: .08em; transform: rotate(8deg); opacity: .8; }
.early-row input { border-radius: 12px; background: #fff; }
.faq summary { font-weight: 700; }
.fam { background: var(--sheet); }