/* ==========================================================================
   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;
  --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) !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) !important;
  color: #fff !important;
}

.btn.ghost, .btn-ghost, .btn.secondary, .btn-secondary, .btn.outline {
  background: transparent !important;
  color: var(--txt) !important;
  border: 1px solid var(--border-strong) !important;
}

.btn.ghost:hover, .btn-ghost:hover, .btn.secondary:hover {
  background: transparent !important;
  color: var(--accent) !important;
  border-color: var(--accent) !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) !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) !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) !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; }
.appstore-cta .btn { flex: 0 0 auto; }

@media (max-width: 560px) {
  .appstore-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .appstore-cta .btn { width: 100%; }
}

/* 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) !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(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}}