/* ==========================================================================
   paper.css — the typewriter theme for STANDALONE pages
   ==========================================================================
   The 49 app, legal, mma-social and fun pages each carry a complete inline
   <style> block and never load style.css, so the site redesign never reached
   any of them. Rewriting 49 bespoke stylesheets by hand would be 49 chances to
   break an App Store review URL, so this file is injected AFTER each page's own
   <style> instead.

   ⚠️ Load order is the whole mechanism. A <link> placed after an inline <style>
   wins on equal specificity, which is why almost nothing here needs !important
   — and why the injector must always put the link immediately before </head>,
   never in the middle of the head.

   Tokens are redeclared rather than imported: these pages do not load
   style.css, so :root would otherwise be empty and every var() would collapse.
   Keep the values in step with style.css.
   ========================================================================== */

:root {
  --bg: #faf7f0;
  --bg-2: #f4efe4;
  --panel: #fffdf8;
  --panel-2: #f6f1e6;
  --panel-3: #efe8d9;
  --border: rgba(38, 32, 24, .14);
  --border-strong: rgba(38, 32, 24, .28);
  --txt: #1d1a15;
  --muted: #4a443a;
  --muted-2: #625b4f;
  --accent: #0a6fd8;
  /* ⚠️ TEXT-safe accent. #0a6fd8 is fine as a BUTTON FILL but only
     reaches 4.36:1 as small text on the --panel-2 chip tone, i.e. it
     fails WCAG AA. Use --accent-ink whenever the accent is the text
     colour; keep --accent for fills, rules and borders. */
  --accent-ink: #0b64c2;
  --accent-2: #b34700;
  --accent-3: #4338ca;
  --success: #15803d;
  --rule: rgba(38, 32, 24, .07);
  --r: 4px;
  --font-type: 'American Typewriter', 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Page ---------------------------------------------------------------- */

html, body {
  background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px), var(--bg) !important;
  color: var(--txt) !important;
  font-family: var(--font-type) !important;
}

/* These pages were built dark, so many blocks set their own near-black fill. */
body *, header, footer, section, article, aside, main, div, nav {
  border-color: var(--border);
}

h1, h2, h3, h4, h5, h6,
p, li, dd, dt, td, th, label, figcaption, blockquote, small, strong, em,
a, span, button, input, textarea, select {
  font-family: var(--font-type) !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--txt) !important; letter-spacing: -.02em; }
p, li, dd, td, figcaption { color: var(--muted) !important; }
strong, b { color: var(--txt) !important; }

a { color: var(--accent-ink) !important; }
a:hover { color: var(--txt) !important; }

/* ---- Surfaces ------------------------------------------------------------
   Anything that was a dark card, panel, hero or band becomes paper. The
   selectors are deliberately broad because these 49 pages use 49 different
   class vocabularies — .card, .panel, .feature, .box, .tile and so on. */

.card, .panel, .box, .tile, .feature, .features, .feat, .grid > div,
.container > section, .section, .hero, .cta, .footer, .faq, .faq-item,
.screens, .screenshot, .step, .plan, .pricing, .highlight, .note, .callout {
  background: var(--panel) !important;
  color: var(--txt) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Gradient text was a dark-theme flourish; on paper it renders as a pale smear. */
[style*="background-clip"], [style*="-webkit-background-clip"],
.gradient, .grad, .gradient-text {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--txt) !important;
  color: var(--txt) !important;
}

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

.btn, .button, .cta-btn, a.btn, button, input[type="submit"],
.btn.primary, .btn-primary {
  background: var(--txt) !important;
  color: var(--bg) !important;
  border: 1px solid var(--txt) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  font-family: var(--font-type) !important;
  font-weight: 700;
  letter-spacing: .02em;
}

.btn:hover, .button:hover, button:hover {
  background: var(--accent) !important;
  border-color: var(--accent-ink) !important;
  color: #fff !important;
}

/* ⚠️ SPECIFICITY TRAP — read before editing either of these two blocks.
   The base button rule above lists `a.btn` among its selectors. That is
   (0,1,1): one class plus one element. Every selector below is (0,1,0): one
   class. Both blocks are !important, so !important does not break the tie —
   specificity does, and `a.btn` wins.

   Nearly every ghost button on this site is an <a>. The result was that the
   base rule's `background: var(--txt)` beat `background: transparent` on all of
   them, and every secondary button site-wide rendered as a solid dark primary.
   Two identical heavy buttons side by side, with no visual hierarchy between
   "Get it on the App Store" and "See the screenshots".

   The `a.` variants below exist purely to match that (0,1,1) and win on order.
   If you add a new base selector like `a.btn`, add its ghost counterpart here. */
.btn.ghost, .btn-ghost, .btn.secondary, .btn-secondary, .btn.outline,
a.btn.ghost, a.btn-ghost, a.btn.secondary, a.btn-secondary, a.btn.outline,
button.btn-ghost, button.btn.ghost {
  background: transparent !important;
  color: var(--txt) !important;
  border: 1px solid var(--border-strong) !important;
}

.btn.ghost:hover, .btn-ghost:hover, .btn.secondary:hover,
a.btn.ghost:hover, a.btn-ghost:hover, a.btn.secondary:hover,
a.btn-secondary:hover, a.btn.outline:hover, button.btn-ghost:hover {
  background: transparent !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-ink) !important;
}

/* ---- Badges and pills ---------------------------------------------------- */

.badge, .pill, .tag, .chip, .label, .kicker, .eyebrow {
  background: var(--panel-2) !important;
  color: var(--txt) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}

/* ---- The app logo block, which was an <h1> on the legal pages ------------ */

.logo, .logo h1, .logo .brand-title {
  color: var(--txt) !important;
  font-family: var(--font-type) !important;
}

.logo span { color: var(--accent-ink) !important; }

/* ---- Nothing may leave the screen --------------------------------------- */

* { min-width: 0; }
img, svg, video, iframe, table, pre, code { max-width: 100%; }
.container, .wrap, main, section { max-width: 100%; box-sizing: border-box; }
pre, code { overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* The mobile bottom bar is fixed over the page on these too. */
body { padding-bottom: 62px; }

@media (max-width: 760px) {
  body { font-size: 15px; line-height: 1.7; }
  h1 { font-size: clamp(1.6rem, 6.5vw, 2.1rem); }
  .container, .wrap { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Gradient bands ------------------------------------------------------
   Every app page opens with a coloured band — a purple/pink gradient on Gathr,
   green/teal on SmartFolio, near-black on Kalend and MMA SOCIAL. They are set
   as inline styles or as `background:linear-gradient(...)` on the header, so a
   background override alone was not enough: the gradient is a background-image
   and survives a background-color change. Both have to be cleared. */

header, .site-header, .topbar, .top-bar, .masthead, .page-header,
.hero, .hero-band, .band, .app-header, nav.top {
  background-image: none !important;
  background-color: var(--bg) !important;
  color: var(--txt) !important;
  border-bottom: 1px solid var(--txt) !important;
  box-shadow: none !important;
}

header a, .site-header a, .topbar a, .masthead a, nav.top a { color: var(--accent-ink) !important; }
header h1, header h2, .hero h1, .hero h2 { color: var(--txt) !important; }

/* Anything anywhere still painting a gradient. */
[style*="linear-gradient"], [style*="radial-gradient"] {
  background-image: none !important;
  background-color: var(--panel) !important;
  color: var(--txt) !important;
}

/* App icon tiles were gradient squares with an emoji in them. */
.app-icon, .icon, .app-ico, .logo-mark, .mark {
  background-image: none !important;
  background-color: var(--panel) !important;
  border: 1.5px solid var(--txt) !important;
  border-radius: var(--r) !important;
  color: var(--txt) !important;
  box-shadow: 2px 2px 0 var(--border) !important;
}

/* ---- The bottom bar on standalone pages ---------------------------------
   These pages get the bar injected but never load style.css, so it rendered
   in whatever colours their own stylesheet happened to give a <nav>. */

.bottom-nav {
  display: flex !important;
  position: fixed !important;
  z-index: 120;
  right: 0; bottom: 0; left: 0;
  align-items: stretch;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom)) !important;
  background: var(--panel) !important;
  background-image: none !important;
  border-top: 1.5px solid var(--txt) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.bottom-nav a, .bottom-nav button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 6px 2px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--muted) !important;
  font-family: var(--font-type) !important;
  font-size: .66rem !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.bottom-nav a.is-current { color: var(--accent-ink) !important; }
.bottom-nav svg { width: 20px; height: 20px; fill: currentColor; }
.bottom-nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* The App Store badge is Apple's artwork and must not be recoloured. */
img[src*="app-store"], img[alt*="App Store"], .app-store img, a[href*="apps.apple.com"] img {
  filter: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---- Comparison tables on app pages -------------------------------------
   Clinch's table marked its own column with a 12% purple tint and coloured the
   text with a --won variable from the dark theme. On paper that is a pale
   lavender cell with muted brown text on it — measured at 1.42:1, which is
   effectively invisible. The column is marked with a rule and a solid tint
   instead, and the text goes back to ink. */

table td, table th { color: var(--txt) !important; background-image: none !important; }

td.yes, .yes { color: var(--success) !important; font-weight: 700; }
td.no, .no   { color: var(--muted) !important; }

/* The "ours" column, marked by weight and an edge rather than a wash. */
tr.is-ours td, td.is-ours, tbody tr:first-child td,
[class*="ours"] td, td[class*="ours"] {
  background-color: var(--panel-2) !important;
  color: var(--txt) !important;
}

table thead th {
  background-color: var(--panel-2) !important;
  color: var(--txt) !important;
  border-bottom: 1.5px solid var(--txt) !important;
}

table { border-collapse: collapse; width: 100%; }
table td, table th { border-bottom: 1px solid var(--border) !important; padding: 10px 12px; }

/* Wide tables scroll inside themselves rather than pushing the page. */
table { display: block; overflow-x: auto; max-width: 100%; }

/* ---- Screenshots ---------------------------------------------------------
   The app screenshots are the single most persuasive thing on these pages and
   were sitting below three sections of prose. */

.screens, .screenshots, .shots, .gallery { margin-block: clamp(20px, 4vw, 40px); }

.screens img, .screenshots img, .shots img, .gallery img, img[src*="screen"] {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--border);
}

/* Mirror of the style.css rules, for the standalone pages. */
.site-noise { display: none !important; }
.app-card, .card { padding: clamp(20px, 1.8vw, 26px) !important; }

.appstore-cta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: clamp(18px, 3vw, 30px) 0; padding: clamp(16px, 2.2vw, 22px);
  border: 1.5px solid var(--txt) !important; border-radius: var(--r) !important;
  background: var(--panel) !important; box-shadow: 4px 4px 0 var(--border) !important;
}
.appstore-cta-text { flex: 1 1 220px; min-width: 0; }
.appstore-cta-text strong { display: block; font-size: 1.02rem; color: var(--txt) !important; }
.appstore-cta-text span { color: var(--muted) !important; font-size: .88rem; }
/* ⚠️ The base .btn rule in this file sets COLOUR, border, radius and font — but
   never display, padding or text-decoration. On pages that define their own
   .btn (most of the site) that is fine, the page supplies the layout. The
   Neighbr page defines no .btn at all, so its App Store button rendered as
   plain underlined text jammed against a border.

   The CTA button must look identical on all seven live app pages regardless of
   what each page's own CSS does, so the layout is stated here at (0,2,0) rather
   than relying on the page. Do not move these onto the bare .btn rule — that
   would override the deliberate sizing of .btn-sm / .btn-lg site-wide. */
.appstore-cta .btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 12px 20px;
  text-decoration: none;
  text-align: center;
  line-height: 1.25;
  font-size: .97rem;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .appstore-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .appstore-cta .btn { width: 100%; }
  /* ⚠️ flex-basis is measured along the MAIN axis. Above this breakpoint the
     container is a row, so `.appstore-cta-text { flex: 1 1 220px }` means "220px
     wide" — correct. Flipping to column silently re-reads that 220px as a
     HEIGHT, so a block holding one line of bold and one line of grey text was
     reserving 220px for about 44px of content.

     The result was a ~176px hole between "<App> is on the App Store" and the
     Get-it button, on every app page, on every phone. It read as a broken or
     half-loaded image rather than as spacing. Resetting the basis is the whole
     fix; do not add a fixed height here. */
  .appstore-cta-text { flex: 0 1 auto; }
}

/* Kalend's .mod and .priv panels set their gradients in the page's own <style>
   block, not as an inline attribute, so the [style*="gradient"] selector never
   reached them. Targeted by class. */
.mod, .priv, .privacy-card, .feature-card, .highlight-card {
  background-image: none !important;
  background-color: var(--panel) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
}

/* Bottom bar: phone and tablet only, matching style.css. */
.bottom-nav { display: none !important; }

@media (max-width: 1024px) {
  .bottom-nav { display: flex !important; }
  body { padding-bottom: 62px !important; }
}

@media (min-width: 1025px) {
  body { padding-bottom: 0 !important; }
}

#screens { scroll-margin-top: 88px; }

/* ---- App-page footer and screenshot rows -------------------------------- */

.app-footer {
  margin-top: clamp(30px, 5vw, 56px);
  padding: clamp(24px, 4vw, 38px) 0 calc(24px + env(safe-area-inset-bottom));
  border-top: 1.5px solid var(--txt) !important;
  background: var(--panel) !important;
}

.app-footer-links {
  display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center;
  margin: 0 0 10px; font-size: .88rem;
}

.app-footer-links a { color: var(--accent-ink) !important; text-decoration: none; }
.app-footer-links a:hover { text-decoration: underline; }

.app-footer-legal { margin: 0; color: var(--muted) !important; font-size: .82rem; text-align: center; }

.shot-row {
  display: grid;
  gap: clamp(12px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  margin: 0;
}

.shot-row figure { margin: 0; }

.shot-row img {
  width: 100%; height: auto;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  background: var(--panel) !important;
  box-shadow: 3px 3px 0 var(--border) !important;
}

@media (max-width: 560px) {
  .shot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* App-page hero: the app's own name is the h1, with the strapline under it.
   These pages previously led with a marketing headline, which meant the h1 on
   /kalend/ was a slogan rather than the product name — bad for search and for
   anyone landing there cold. */
.app-strapline {
  margin: 6px 0 14px;
  color: var(--muted) !important;
  font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
  font-family: var(--font-type) !important;
}

.hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.4rem); }

/* Bottom sheet, for the standalone pages. */
.bottom-sheet-scrim{position:fixed;z-index:118;inset:0;background:rgba(29,26,21,.38)}
.bottom-sheet{position:fixed;z-index:119;right:8px;left:8px;bottom:calc(58px + env(safe-area-inset-bottom));
 border:1.5px solid var(--txt)!important;border-radius:var(--r)!important;background:var(--panel)!important;
 max-height:62vh;overflow-y:auto}
.bottom-sheet[hidden],.bottom-sheet-scrim[hidden]{display:none}
.bottom-sheet-inner{display:flex;flex-direction:column;padding:6px}
.bottom-sheet a{padding:14px 16px;border-bottom:1px solid var(--rule);color:var(--txt)!important;
 font-family:var(--font-type)!important;font-size:.95rem;text-decoration:none}
.bottom-sheet a:last-child{border-bottom:0}
body.sheet-open{overflow:hidden}
@media (min-width:1025px){.bottom-sheet,.bottom-sheet-scrim{display:none!important}}

/* ===========================================================================
   DESKTOP PASS for the standalone app pages.

   ⚠️ paper.css is loaded by exactly the 42 standalone pages and NEVER alongside
   style.css, so everything below is scoped to those pages by construction. Do
   not add site-wide selectors here.

   These pages were authored mobile-first and never given a desktop measure. At
   1440px the result was: content flush against x=0, an App Store card stretched
   to 1385px, and section widths that jumped 1425 -> 1000 -> 800 down one page.
   =========================================================================== */

/* ---- 1. .container had no measure at all -------------------------------
   ⚠️ NONE of the nine app pages define .container, and paper.css only gave it
   `max-width:100%`. Every #screens block sits inside one, which is why the
   screenshot rows started at x=0 and ran off the right edge. */
.container {
  width: 100%;
  max-width: var(--measure, 1180px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  box-sizing: border-box;
}

/* ---- 2. One measure for every section on these pages --------------------
   .features was capped at 1000px, .faq at 800px and everything else ran full
   width, so the left edge of the content moved as you scrolled. Sections keep
   their own background (the band stays full-bleed); only the CONTENT is capped. */
main > section {
  padding-inline: clamp(20px, 4vw, 40px);
  box-sizing: border-box;
}
main > section > *:not(.container) {
  max-width: var(--measure, 1180px);
  margin-inline: auto;
}

/* ---- 3. The App Store card was 1385px wide -----------------------------
   It is a single line of text and two buttons; at full width the copy sat
   marooned in the middle with hundreds of pixels of dead space. */
/* ⚠️ SPECIFICITY: the `main > section > *:not(.container)` rule above is
   (0,1,2) and a bare `.appstore-cta` is only (0,1,0), so the general 1180px
   measure was beating this and the card stayed full width. These selectors
   match it and come later, so they win. */
main > section > .appstore-cta,
.hero .appstore-cta,
.appstore-cta {
  max-width: 820px;
  margin-inline: auto;
}

/* ---- 4. Stray non-paper backgrounds ------------------------------------
   ⚠️ Standing rule on this site: ONE background, the diary paper. These
   survived from the original per-app brand designs:
     gathr  .use-cases    rgb(253,244,255)  light purple
     neighbr .how-it-works rgb(240,253,244) light green
     smartfolio/vaultflow .cta-section rgb(245,245,247) grey
   They are now the paper panel tone, which is the only tint allowed. */
.use-cases, .how-it-works, .cta-section, .steps-section, .benefits {
  background: var(--panel, #fffdf8) !important;
}

/* ---- 5. The dark footer -------------------------------------------------
   ⚠️ Five app pages still painted footer { background:#1d1d1f } from the old
   dark theme — a black band under a paper page. It also caused the only real
   contrast failure on those pages: the accent-blue "thebighead apps" link sat
   on near-black at 3.43:1. Paper background + ink text fixes both. */
footer {
  background: var(--paper, #faf7f0) !important;
  border-top: 1px solid var(--border-strong, rgba(38, 32, 24, .28));
  color: var(--txt, #1d1a15) !important;
}
footer a { color: var(--txt, #1d1a15) !important; text-decoration: underline; }
footer a:hover { color: var(--accent, #0a6fd8) !important; }

/* ═══════════════════ Touch targets on the standalone pages ═══════════════════
   The 49 app / legal / mma-social pages carry their own inline CSS from before
   the redesign, where the back link and wordmark were 18–34px tall. Those two
   are the only navigation those pages have, so they have to be reliably
   tappable. Padding, not font-size, so nothing reflows. */
@media (max-width: 900px) {
  .back-link, .logo, .brand, a.app-store {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* ⚠️ The standalone app pages put their header links straight in a
     .header-content div, not in a <nav> — the first version of this rule missed
     every one of them (measured 26px). */
  header nav a, .nav a, .header-content a, .links-section a, footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  summary { min-height: 44px; display: flex; align-items: center; gap: 8px; }
}