/* ==========================================================================
   COMIC LAYER — loaded LAST on every page of thebighead.ca
   ==========================================================================
   Owner, Sept 2026: "looks too dull … so text … give it some comic book vibe,
   simple but more fun … better buttons to download our apps … icons … key
   words like free highlighted."

   What it is: the same paper, the same typewriter type (Kalend's face), the
   same layout grid — with comic-book INK on top of it: thick outlines, hard
   offset shadows, flat pop colours, highlighter marks on the words that sell,
   stickers, and a halftone dot ground instead of ruled lines.

   HOW IT LOADS
   · PHP pages: th_head() / index.php emit it after every other stylesheet.
   · Static pages (blog, app, legal): a <link> injected just before </head>,
     after paper.css / blog.css. Keep it last — order is what makes it win.
   · Version: ?v=TH_ASSET_V like style.css; php bin/sync-asset-version.php
     rewrites the static copies.

   ⚠️ !IMPORTANT POLICY. paper.css (the standalone app/legal pages) sets colour,
   background and border with !important on bare selectors — `a`, `button`,
   `p`, `.badge`, `.btn`, `a.btn`. This layer has to beat it on those pages, so
   the visual properties of each component here carry !important too, at a
   specificity of at least (0,1,1). Layout properties (display, padding, grid)
   are left to the page wherever possible — this layer paints, it does not
   re-flow. When a rule here does touch layout, the comment says why.

   ⚠️ Never restyle bare `button` or `a`: the tools (tier list, meme maker, PDF
   editor) carry their own scoped controls, and a global rule would repaint
   every one of them. Components are addressed by class only.
   -------------------------------------------------------------------------- */

:root {
  --ink: #16130f;
  --ink-w: 2.5px;
  --paper: #faf7f0;
  --card: #fffdf8;
  --pop-yellow: #ffd23f;
  --pop-yellow-2: #ffe07a;
  --pop-red: #ff5a4e;
  --pop-blue: #4d8dff;
  --pop-sky: #bfe0ff;
  --pop-green: #33d69f;
  --pop-mint: #c9f5e2;
  --pop-pink: #ff8fc8;
  --pop-blush: #ffe0ef;
  --pop-purple: #9b7bff;
  --pop-orange: #ff9f1c;
  --pop-cream: #fff3c4;
  --r-card: 18px;
  --r-btn: 14px;
  --sh-sm: 2px 2px 0 var(--ink);
  --sh: 4px 4px 0 var(--ink);
  --sh-lg: 6px 6px 0 var(--ink);
  --dots: radial-gradient(rgba(22, 19, 15, .10) 1.1px, transparent 1.4px);
  --dots-strong: radial-gradient(rgba(22, 19, 15, .16) 1.3px, transparent 1.6px);
}

/* ---- 1. Ground: a halftone dot grid instead of ruled lines ---------------
   The ruled lines were the single biggest "this is a page of text" signal.
   A faint dot grid keeps it paper (an artist's board, a bullet journal) and
   reads as Ben-Day dots next to the inked components. */
html, body {
  background: var(--dots) 0 0 / 22px 22px, var(--paper) !important;
}

::selection { background: var(--pop-yellow); color: var(--ink); }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--pop-blue) !important;
  outline-offset: 3px !important;
}

/* ---- 2. Highlights, stickers, icons --------------------------------------
   <mark class="hl">free</mark> — a highlighter stroke behind the word that
   sells. box-decoration-break keeps the stroke on every line if it wraps. */
mark, .hl {
  color: inherit !important;
  background: linear-gradient(transparent 12%, var(--hl, var(--pop-yellow)) 12%, var(--hl, var(--pop-yellow)) 90%, transparent 90%) !important;
  padding: 0 .14em;
  margin: 0 -.02em;
  border-radius: .2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-text-fill-color: currentColor;
}
.hl-pink   { --hl: var(--pop-pink); }
.hl-blue   { --hl: #9cc6ff; }
.hl-green  { --hl: #8ff0c6; }
.hl-orange { --hl: #ffc27a; }

/* A single word as a stuck-on label: "FREE", "NEW". */
.sticker {
  display: inline-block;
  padding: .12em .5em .16em;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 10px !important;
  background: var(--st, var(--pop-yellow)) !important;
  color: var(--ink) !important;
  box-shadow: var(--sh-sm) !important;
  transform: rotate(-3deg);
  line-height: 1.05;
  white-space: nowrap;
}

.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
svg.ic { fill: none; }
svg.ic-apple { fill: currentColor; stroke: none; }

/* ---- 3. Buttons -----------------------------------------------------------
   A button should look like something you can press: ink outline, a hard
   shadow it sits on, a lift on hover and a press on tap. Primary is the pop
   yellow with ink text (12.9:1); secondary is white card stock. */
.btn, a.btn, button.btn, .button, .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  background: var(--pop-yellow) !important;
  color: var(--ink) !important;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: var(--r-btn) !important;
  box-shadow: var(--sh) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-ghost, a.btn-ghost, button.btn-ghost,
.btn.ghost, a.btn.ghost, .btn.secondary, a.btn.secondary,
.btn-secondary, a.btn-secondary, .btn.outline, a.btn.outline {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: var(--ink-w) solid var(--ink) !important;
}

@media (hover: hover) {
  .btn:hover, a.btn:hover, button.btn:hover, .button:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-lg) !important;
    background: var(--pop-yellow-2) !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
  }
  .btn-ghost:hover, a.btn-ghost:hover, button.btn-ghost:hover,
  .btn.ghost:hover, a.btn.ghost:hover, .btn.secondary:hover, a.btn.secondary:hover,
  a.btn-secondary:hover, a.btn.outline:hover {
    background: var(--pop-sky) !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
  }
}

.btn:active, a.btn:active, button.btn:active, .button:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink) !important;
}

.btn .ic { width: 1.2em; height: 1.2em; }

/* ---- 4. The App Store button ---------------------------------------------
   Built to read as Apple's badge at a glance — black, the Apple mark, "Download
   on the / App Store" in two sizes, system type — with the site's ink outline
   and a shadow in the app's own colour (--pop, set inline per app). */
.store-btn {
  --pop: var(--pop-yellow);
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 7px 18px 7px 14px !important;
  background: #0b0b0c !important;
  color: #fff !important;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 13px !important;
  box-shadow: 4px 4px 0 var(--pop), 4px 4px 0 var(--ink-w) var(--ink) !important;
  text-decoration: none !important;
  line-height: 1;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.store-btn, .store-btn * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #fff !important;
}
.store-btn .ic-apple { width: 24px; height: 29px; margin-top: -3px; }
.store-btn-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.store-btn-t small { font-size: 11px !important; font-weight: 500; letter-spacing: .01em; opacity: .92; }
.store-btn-t b { font-size: 21px !important; font-weight: 600; letter-spacing: -.01em; }

.store-btn--lg { min-height: 60px; padding: 9px 24px 9px 18px !important; border-radius: 15px !important; }
.store-btn--lg .ic-apple { width: 28px; height: 34px; }
.store-btn--lg .store-btn-t b { font-size: 25px !important; }
.store-btn--lg .store-btn-t small { font-size: 12px !important; }

.store-btn--sm { min-height: 44px; gap: 8px; padding: 5px 14px 5px 11px !important; border-radius: 11px !important; }
.store-btn--sm .ic-apple { width: 19px; height: 23px; margin-top: -2px; }
.store-btn--sm .store-btn-t small { font-size: 9.5px !important; }
.store-btn--sm .store-btn-t b { font-size: 17px !important; }

@media (hover: hover) {
  .store-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--pop), 6px 6px 0 var(--ink-w) var(--ink) !important;
    color: #fff !important;
  }
}
.store-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--pop), 1px 1px 0 var(--ink-w) var(--ink) !important; }

/* "Get" — the App Store's own list-row pill, for rows of several apps. */
.get-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 32px;
  padding: 0 14px !important;
  background: var(--ink) !important;
  color: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--pop, var(--pop-yellow)) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform .12s ease;
}
.get-pill.is-soon {
  background: var(--card) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  border-style: dashed !important;
  font-size: .7rem !important;
}
@media (hover: hover) { a.get-pill:hover { transform: translateY(-2px); color: #fff !important; } }
a.get-pill:active { transform: translateY(1px); }

/* ---- 5. Header ------------------------------------------------------------ */
.nav, .nav.is-scrolled {
  background: var(--paper) !important;
  border-bottom: 3px solid var(--ink) !important;
  box-shadow: 0 4px 0 rgba(22, 19, 15, .06) !important;
}

.logo, .nav .logo {
  color: var(--ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}
.logo .dot { color: var(--pop-red) !important; }

.nav-links a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 11px !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.nav-links a .ic { width: 17px; height: 17px; }
.nav-links a .nav-app { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ink); }
@media (hover: hover) {
  .nav-links a:hover { background: var(--pop-cream) !important; border-color: var(--ink) !important; color: var(--ink) !important; }
}
.nav-links a.is-current, .nav-links a[aria-current="page"] {
  background: var(--pop-yellow) !important;
  border-color: var(--ink) !important;
  box-shadow: var(--sh-sm) !important;
  color: var(--ink) !important;
}

.nav .nav-cta { margin-left: 10px; white-space: nowrap; }

/* Icons in the desktop nav only where there is room for them. The nav fits
   from 861px as text; the icons need about 150px more. */
@media (max-width: 1180px) {
  .nav-links a .ic, .nav-links a .nav-app { display: none; }
  .nav-links a { padding: 7px 9px !important; }
}

.burger {
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 12px !important;
  background: var(--card) !important;
  box-shadow: var(--sh-sm) !important;
}

/* The standalone app/legal pages carry their own small header. */
.nav .nav-links a, header nav a, nav.top a { color: var(--ink) !important; }

/* ---- 6. Kickers become speech bubbles -------------------------------------
   The small uppercase line above a heading was grey text on paper — it is
   now the caption a comic panel would carry. */
.kicker, .eyebrow, .hero .badge, .th-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: auto !important;
  max-width: 100%;
  padding: 7px 13px !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 12px !important;
  box-shadow: var(--sh-sm) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  line-height: 1.35;
  text-transform: uppercase;
}
.kicker .ic, .eyebrow .ic { width: 15px; height: 15px; color: var(--pop-red); }

/* The hero ones get the tail. */
.hero .eyebrow, .hero .kicker, .hero .badge,
.th-hub-head > .kicker, .hub-head > .kicker, .blog-hero > .kicker {
  position: relative;
  background: var(--pop-cream) !important;
  margin-bottom: 18px;
}
.hero .eyebrow::after, .hero .kicker::after, .hero .badge::after,
.th-hub-head > .kicker::after, .hub-head > .kicker::after, .blog-hero > .kicker::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: var(--pop-cream);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) skew(8deg, 8deg);
}
.hero .badge::after { left: 50%; margin-left: -7px; }

/* ---- 7. Stat rows become stickers ------------------------------------------ */
.hero-stats > *, .hub-trust > span, .blog-trust > span {
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 14px !important;
  box-shadow: var(--sh) !important;
  color: var(--ink) !important;
  background: var(--card) !important;
}
.hero-stats > *:nth-child(4n+1), .hub-trust > span:nth-child(4n+1), .blog-trust > span:nth-child(4n+1) { background: var(--pop-yellow) !important; }
.hero-stats > *:nth-child(4n+2), .hub-trust > span:nth-child(4n+2), .blog-trust > span:nth-child(4n+2) { background: var(--pop-sky) !important; }
.hero-stats > *:nth-child(4n+3), .hub-trust > span:nth-child(4n+3), .blog-trust > span:nth-child(4n+3) { background: var(--pop-blush) !important; }
.hero-stats > *:nth-child(4n+4), .hub-trust > span:nth-child(4n+4), .blog-trust > span:nth-child(4n+4) { background: var(--pop-mint) !important; }
.hero-stats strong, .hub-trust strong, .blog-trust strong, .stat-num { color: var(--ink) !important; }

.hub-trust, .blog-trust { display: flex !important; flex-wrap: wrap; gap: 10px 12px !important; }
.hub-trust > span, .blog-trust > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px !important;
  font-size: .82rem;
  font-weight: 700;
}
.hub-trust > span strong, .blog-trust > span strong { font-size: 1.05rem; }

/* Home hero stats are links now — a sticker you can press. */
a.stat-link { text-decoration: none !important; color: var(--ink) !important; transition: transform .12s ease, box-shadow .12s ease; }
@media (hover: hover) { a.stat-link:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: var(--sh-lg) !important; } }
.hero-stats > .stat-link span { display: flex !important; align-items: center; gap: 4px; }
.hero-stats > .stat-link span .ic { width: 14px; height: 14px; }

/* ---- 8. Chips and filters -------------------------------------------------- */
.tab, .th-filters .tab, .tabs .tab, .hub-filters .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: var(--sh-sm) !important;
  font-weight: 700 !important;
  white-space: nowrap;
  transition: transform .1s ease, background-color .1s ease;
}
@media (hover: hover) { .tab:hover { background: var(--pop-cream) !important; transform: translateY(-1px); } }
.tab.on, .tabs .tab.on, .th-filters .tab.on, .hub-filters .tab.on {
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: 2px 2px 0 var(--pop-yellow) !important;
}
.tab:active { transform: translate(2px, 2px); box-shadow: none !important; }

/* ⚠️ Phones: every filter bar is ONE swipeable row, not a collapsed "Filter"
   button. The collapsible version stacked two identical FILTER buttons on
   /free-themes/ and hid every choice behind a tap. A single row of chips is
   as short as the button was and shows the options. main.js no longer builds
   the toggles; .filter-toggle is hidden in case a cached main.js still does. */
.filter-toggle { display: none !important; }
@media (max-width: 860px) {
  .th-filters, .tabs, .hub-filters,
  .th-filters.is-collapsible, .tabs.is-collapsible, .hub-filters.is-collapsible {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    margin-inline: -20px !important;
    padding: 4px 20px 10px !important;
    border: 0 !important;
    background: none !important;
  }
  .th-filters::-webkit-scrollbar, .tabs::-webkit-scrollbar, .hub-filters::-webkit-scrollbar { display: none; }
  .th-filters .tab, .tabs .tab, .hub-filters .tab { flex: 0 0 auto; scroll-snap-align: start; }
}
.filter-label {
  display: block;
  margin: 18px 0 8px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---- 9. Cards are comic panels -------------------------------------------- */
.app-card, .th-card, .tool-card, .post-card, .card, .kf-card,
.appstore-cta, .author-box, .post-cta, .blog-apps, .tool-apps, .tool-pitch,
.th-next, .app-entry, .answer-box, .toc, .why-grid > div,
.mod, .priv, .panel, .more-links a {
  background: var(--card) !important;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--sh-lg) !important;
  color: var(--ink);
}

/* Cards that ARE links lift when pointed at and press when tapped. */
a.card, a.tool-card, a.post-card, .more-links a, .th-card, .app-card {
  transition: transform .14s ease, box-shadow .14s ease;
}
@media (hover: hover) {
  a.card:hover, a.tool-card:hover, a.post-card:hover, .more-links a:hover, .th-card:hover, .app-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--ink) !important;
  }
}
a.card:active, a.tool-card:active, a.post-card:active, .more-links a:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink) !important;
}

/* Titles inside linked cards are the link colour of a comic: ink. */
.post-card h2, .post-card h3, .tool-card h3, .card h3, .th-card h2 a, .th-card h3 a, .app-card h2 a, .app-card h3 {
  color: var(--ink) !important;
  text-decoration: none !important;
}
.post-card .go, .tool-card .tc-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--ink) !important;
  font-weight: 800;
}

/* ---- 10. App icons and the app shelf -------------------------------------- */
.app-img {
  display: block;
  flex: none;
  border-radius: 22.5%;
  border: 2px solid var(--ink);
  box-shadow: var(--sh-sm);
  background: var(--ink);
  object-fit: cover;
}

.app-shelf {
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
  padding-inline: 24px;
  padding-block: clamp(18px, 3vw, 34px);
}
.app-shelf-box {
  position: relative;
  border: var(--ink-w) solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--sh-lg);
  background: var(--dots-strong) 0 0 / 12px 12px, var(--pop-cream);
  padding: clamp(16px, 2.4vw, 24px);
}
.app-shelf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.app-shelf-head h2 { margin: 0 !important; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem) !important; line-height: 1.15; }
.app-shelf-head a.shelf-all { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 800; color: var(--ink) !important; text-decoration: none; }
.app-shelf-head a.shelf-all:hover { text-decoration: underline; }

.app-shelf-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shelf-app {
  --pop: var(--pop-yellow);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
@media (hover: hover) { .shelf-app:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--pop), 5px 5px 0 2px var(--ink); } }
.shelf-link { display: contents; color: var(--ink) !important; text-decoration: none !important; }
.shelf-link .app-img { grid-row: 1 / 3; width: 56px; height: 56px; }
.shelf-name { display: flex; flex-direction: column; min-width: 0; max-width: 100%; line-height: 1.2; color: var(--ink); }
.shelf-app .get-pill { grid-column: 2; justify-self: start; margin-top: 6px; }
.shelf-name b { max-width: 100%; font-size: .86rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-name small { max-width: 100%; font-size: .7rem; color: var(--muted-2) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Phone: a horizontal shelf you swipe, like the App Store's own rows. */
@media (max-width: 760px) {
  .app-shelf { padding-inline: 18px; }
  .app-shelf-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    gap: 10px;
    margin-inline: -16px;
    padding: 4px 16px 10px;
  }
  .app-shelf-row::-webkit-scrollbar { display: none; }
  .shelf-app {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 104px;
    padding: 12px 6px 10px;
    text-align: center;
    scroll-snap-align: start;
  }
  .shelf-link { display: flex; flex-direction: column; align-items: center; gap: 7px; max-width: 100%; }
  .shelf-link .app-img { width: 60px; height: 60px; }
  .shelf-name { align-items: center; }
  .shelf-app .get-pill { min-width: 64px; margin-top: 0; justify-self: auto; }
}

/* ---- 11. Homepage ----------------------------------------------------------- */
.hero h1 { letter-spacing: -.035em; }
.hero-cta { align-items: center; gap: 14px !important; }
.hero-stats > * { display: block; min-width: 0; padding: 12px 14px !important; }
.hero-stats > * strong { display: block; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1; }
.hero-stats > * span { font-size: .78rem; font-weight: 700; margin-top: 6px; color: var(--ink) !important; }
/* The decorative accent dot after the hero h1 read as a second full stop
   ("app..") once the headline ended in real punctuation. */
.hero h1::after, .hero h1:after { content: none !important; display: none !important; }
.app-focus::before, .app-focus:before { content: none !important; display: none !important; }

/* The phone frame in the hero, drawn in ink, with a starburst on it. */
.hero-device.hero-phone {
  position: relative;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 34px !important;
  background: var(--card) !important;
  box-shadow: 10px 10px 0 var(--ink), 10px 10px 0 var(--ink-w) var(--ink) !important;
}
.hero-device.hero-phone img { border: 2px solid var(--ink) !important; }

.burst {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.burst::before, .burst::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 61% 18%, 81% 7%, 79% 29%, 100% 32%, 86% 50%, 100% 68%, 79% 71%, 81% 93%, 61% 82%, 50% 100%, 39% 82%, 19% 93%, 21% 71%, 0 68%, 14% 50%, 0 32%, 21% 29%, 19% 7%, 39% 18%);
}
.burst::before { background: var(--ink); }
.burst::after { inset: 5px; background: var(--b, var(--pop-yellow)); }
.burst b {
  position: relative;
  z-index: 1;
  transform: rotate(-10deg);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: .95;
  text-align: center;
  color: var(--ink);
  letter-spacing: -.02em;
}
.hero-phone .burst { top: -30px; right: -34px; }
@media (max-width: 980px) { .hero-phone .burst { right: -22px; top: -24px; width: 92px; height: 92px; } .hero-phone .burst b { font-size: 1rem; } }

/* Featured Kalend panel: the real icon, a band in Kalend's colour. */
.kf-card { background: linear-gradient(90deg, var(--pop-cream), var(--card) 55%) !important; }
.kf-icon { width: 132px; height: 132px; border-width: var(--ink-w) !important; box-shadow: 6px 6px 0 var(--ink) !important; transform: rotate(3deg); }
.kf-points li::before { content: none !important; }
.kf-points li { display: flex; align-items: flex-start; gap: 8px; padding-left: 0 !important; color: var(--ink) !important; }
.kf-points li .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--ink); background: var(--pop-green); border: 2px solid var(--ink); border-radius: 50%; padding: 2px; stroke-width: 3; }
.kf-actions { align-items: center; }
@media (max-width: 760px) { .kf-icon { width: 84px; height: 84px; } }

/* The scrolling category strip becomes a yellow tape. */
.logo-strip {
  background: var(--pop-yellow) !important;
  border-block: 3px solid var(--ink) !important;
}
.logo-strip .strip-track span { color: var(--ink) !important; font-weight: 800; }
.logo-strip .strip-track span::after { content: "★"; margin-left: 22px; color: var(--pop-red); }

/* Alternate home bands get a tint and a halftone instead of flat beige. */
#apps.section.alt   { background: var(--dots) 0 0 / 14px 14px, var(--pop-cream) !important; border-block: 3px solid var(--ink); }
#themes.section.alt { background: var(--dots) 0 0 / 14px 14px, #e5f1ff !important; border-block: 3px solid var(--ink); }
#plugins.section.alt{ background: var(--dots) 0 0 / 14px 14px, var(--pop-blush) !important; border-block: 3px solid var(--ink); }
#about.section.alt  { background: var(--dots) 0 0 / 14px 14px, #e1f8ee !important; border-block: 3px solid var(--ink); }

.svc-ico, .tc-ico {
  display: grid !important;
  place-items: center;
  width: 48px !important;
  height: 48px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 14px !important;
  background: var(--pop-cream) !important;
  box-shadow: var(--sh-sm) !important;
  font-size: 1.45rem !important;
}
.card:nth-child(5n+2) .svc-ico, .tool-card:nth-child(5n+2) .tc-ico { background: var(--pop-sky) !important; }
.card:nth-child(5n+3) .svc-ico, .tool-card:nth-child(5n+3) .tc-ico { background: var(--pop-blush) !important; }
.card:nth-child(5n+4) .svc-ico, .tool-card:nth-child(5n+4) .tc-ico { background: var(--pop-mint) !important; }
.card:nth-child(5n+5) .svc-ico, .tool-card:nth-child(5n+5) .tc-ico { background: #e9e2ff !important; }

/* ---- 12. App cards (home #apps, /apps/) ------------------------------------ */
.app-card {
  --pop: var(--pop-yellow);
  position: relative;
  overflow: hidden;
  padding-top: 0 !important;
}
.app-card::before {
  content: "";
  display: block;
  height: 14px;
  margin: 0 calc(-1 * clamp(20px, 1.8vw, 26px)) 16px;
  background: var(--pop);
  border-bottom: 2px solid var(--ink);
}
.app-card .app-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-card .app-img { width: 64px; height: 64px; }
.app-card h2, .app-card h3 { margin-top: 12px !important; }
.app-card .app-tag { color: var(--muted-2) !important; font-weight: 700; }
.app-card .app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }

/* span only: on the app pages `.soon` is also a whole paragraph. */
.live-dot, span.soon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: var(--sh-sm);
  color: var(--ink) !important;
}
.live-dot { background: var(--pop-mint) !important; }
span.soon { background: var(--pop-blush) !important; }

/* ---- 13. Themes ------------------------------------------------------------- */
.th-card { overflow: hidden; }
.th-shot { display: block; border-bottom: var(--ink-w) solid var(--ink) !important; }
.th-card .th-cat, .th-plat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  box-shadow: var(--sh-sm) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
}
.th-plat--wordpress { background: #dcebff !important; }
.th-plat--shopify { background: #d9f7e3 !important; }
.th-plat::before { display: none !important; }
.th-swatches span {
  width: 26px !important;
  height: 26px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 50% !important;
  box-shadow: 1px 1px 0 var(--ink);
}
.th-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-download, a.btn-download { background: var(--pop-green) !important; }
@media (hover: hover) { .btn-download:hover, a.btn-download:hover { background: #6ae6b9 !important; } }
.th-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.th-meta .ic { width: 14px; height: 14px; }

.th-next-card {
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--sh-lg) !important;
  background: var(--dots-strong) 0 0 / 12px 12px, var(--pop-blush) !important;
  transform: rotate(2deg);
}

/* ---- 14. FAQ accordions ------------------------------------------------------ */
.th-faq details, .tool-faq details, .faq details, .faq-list details, details.faq-item {
  margin: 0 0 12px !important;
  padding: 2px 16px !important;
  background: var(--card) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 14px !important;
  box-shadow: var(--sh-sm) !important;
}
.th-faq details[open], .tool-faq details[open], .faq details[open], .faq-list details[open] {
  background: var(--pop-cream) !important;
  box-shadow: var(--sh) !important;
}
.th-faq summary, .tool-faq summary, .faq summary, .faq-list summary { font-weight: 800; color: var(--ink) !important; }

/* ---- 15. Tools ------------------------------------------------------------------ */
.hub-search input, input[type="search"].hub-input, #toolSearch {
  background: var(--card) !important;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: var(--sh) !important;
  color: var(--ink) !important;
}
.tool-card { display: flex !important; flex-direction: column; }
.tool-badge {
  display: inline-flex !important;
  padding: 4px 10px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  background: var(--pop-yellow) !important;
  color: var(--ink) !important;
  font-weight: 800 !important;
  box-shadow: var(--sh-sm);
}
.tool-apps .tool-apps-head { display: flex; align-items: center; gap: 14px; }
.tool-apps .app-img { width: 64px; height: 64px; }
.tool-apps-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* The tool's own work surface stays calm — a panel, ink edge, no shadow
   under inputs. The tools carry their own scoped controls. */
.tool-main .panel { box-shadow: var(--sh) !important; }

/* ---- 16. Blog ---------------------------------------------------------------- */
.post-card { display: flex !important; flex-direction: column; }
.post-card .post-meta {
  align-self: flex-start;
  padding: 3px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--pop-cream);
  color: var(--ink) !important;
  font-size: .68rem !important;
}
.post-grid > .post-card:nth-child(4n+2) .post-meta { background: var(--pop-sky); }
.post-grid > .post-card:nth-child(4n+3) .post-meta { background: var(--pop-blush); }
.post-grid > .post-card:nth-child(4n+4) .post-meta { background: var(--pop-mint); }

.answer-box { background: var(--pop-cream) !important; position: relative; }
.answer-label {
  display: inline-block;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .1em;
}
.disclosure {
  border: 2px dashed var(--ink) !important;
  border-radius: 14px !important;
  background: var(--card) !important;
}
.app-entry.is-ours { background: linear-gradient(180deg, var(--pop-cream), var(--card) 180px) !important; }
.app-rank {
  display: inline-grid !important;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 50% !important;
  background: var(--pop-yellow) !important;
  color: var(--ink) !important;
  box-shadow: var(--sh-sm) !important;
  font-weight: 900 !important;
}
.app-badge {
  background: var(--pop-red) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: var(--sh-sm) !important;
  transform: rotate(-3deg);
  font-weight: 900 !important;
}
.app-badge::before, .app-badge::after { display: none !important; }
.app-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.app-shot { border: var(--ink-w) solid var(--ink) !important; box-shadow: var(--sh) !important; }

.table-scroll, .tablewrap {
  border: var(--ink-w) solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--sh);
  background: var(--card);
}
.cmp thead th, .table-scroll thead th, .tablewrap thead th {
  background: var(--ink) !important;
  color: #fff !important;
}

.post-cta { background: var(--dots) 0 0 / 14px 14px, var(--pop-cream) !important; }
.post-cta .post-cta-body h2 { display: flex; align-items: center; gap: 12px; }
.post-cta .app-img { width: 56px; height: 56px; }
.ab-mark {
  background: var(--pop-yellow) !important;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 14px !important;
  box-shadow: var(--sh-sm) !important;
  transform: rotate(-4deg);
}
.more-links a { border-radius: 14px !important; box-shadow: var(--sh) !important; }
.more-links a[href="/blog/"], .more-links a[href="/free-tools/"] { background: var(--pop-sky) !important; color: var(--ink) !important; }

/* ---- 17. Standalone app pages ------------------------------------------------- */
.hero .app-hero-icon {
  width: 112px;
  height: 112px;
  margin: 0 auto 16px;
  border-width: var(--ink-w);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-4deg);
}
.hero h1 { color: var(--ink) !important; }
.appstore-cta { background: var(--dots) 0 0 / 14px 14px, var(--pop-cream) !important; }
.appstore-cta .store-btn { flex: 0 0 auto; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.shots img, .shot-row img, .shot-strip img, .screens img {
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 22px !important;
  box-shadow: var(--sh) !important;
}
.mod .ico {
  border: 2px solid var(--ink) !important;
  border-radius: 14px !important;
  background: var(--pop-cream) !important;
  box-shadow: var(--sh-sm) !important;
}
.four .mod:nth-child(2) .ico { background: var(--pop-sky) !important; }
.four .mod:nth-child(3) .ico { background: var(--pop-blush) !important; }
.four .mod:nth-child(4) .ico { background: var(--pop-mint) !important; }
.priv { background: var(--dots) 0 0 / 14px 14px, #e1f8ee !important; }
.cta-section .store-btn { margin-top: 14px; }
.store-link, nav.top a.store-link, header a.store-link {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 4px 12px !important;
  margin-left: 12px;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: 2px 2px 0 var(--pop-yellow) !important;
  text-decoration: none !important;
}
.store-link .ic-apple { width: 14px; height: 17px; margin-top: -2px; }

/* ---- 18. Footer ------------------------------------------------------------------ */
.footer, footer.footer {
  border-top: 3px solid var(--ink) !important;
  background: var(--dots) 0 0 / 16px 16px, #f3ecdc !important;
}
.footer h4 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--pop-yellow);
  color: var(--ink) !important;
}
.footer-grid > div:nth-child(3) h4 { background: var(--pop-sky); }
.footer-grid > div:nth-child(4) h4 { background: var(--pop-blush); }
.footer-grid > div:nth-child(5) h4 { background: var(--pop-mint); }
.footer-grid a { color: var(--ink) !important; }
.footer-grid a.foot-app { display: inline-flex !important; align-items: center; gap: 8px; }
.foot-app .app-img { width: 22px; height: 22px; border-width: 1.5px; box-shadow: none; border-radius: 6px; }
@media (hover: hover) { .footer-grid a:hover { background: var(--pop-cream); border-radius: 6px; } }

/* ---- 19. Bottom bar (phones + iPad) --------------------------------------------
   Apps sits in the middle as the one raised, coloured button, so it is the
   easiest thing to hit on every page. */
.bottom-nav {
  background: var(--card) !important;
  border-top: 3px solid var(--ink) !important;
  overflow: visible !important;
}
.bottom-nav a, .bottom-nav button {
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  overflow: visible !important;
}
.bottom-nav .ic, .bottom-nav svg.ic { width: 22px; height: 22px; fill: none !important; stroke: currentColor; }
.bottom-nav a.is-current .bn-ico {
  background: var(--pop-yellow);
  border-color: var(--ink);
}
.bn-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: background-color .12s ease;
}
.bottom-nav a.bn-apps { position: relative; }
.bottom-nav a.bn-apps .bn-ico {
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: var(--ink-w) solid var(--ink);
  border-radius: 18px;
  background: var(--pop-yellow);
  box-shadow: var(--sh-sm);
  transform: rotate(-4deg);
}
.bottom-nav a.bn-apps .bn-ico .ic { width: 26px; height: 26px; }
.bottom-nav a.bn-apps.is-current .bn-ico { background: var(--pop-pink); }
.bottom-nav a:active .bn-ico { transform: scale(.94); }

/* ---- 19b. The "More" sheet ------------------------------------------------------
   Owner, Sept 2026: "should cover more of the page, not only half … better
   scrolling." It was a 62%-high pop-up floating over the bar; scrolling past
   its end scrolled the PAGE behind it, and it could only be closed by tapping
   outside. Now it is a full menu:
   · rises from the bar to just under the top of the screen (86% of an iPhone)
     and takes only the height its content needs on a tablet;
   · its head (grab handle, title, X) stays put while the list scrolls, and an
     ink rule appears under the head once the list is scrolled;
   · the list is the ONLY thing that scrolls — overscroll-behavior stops it
     chaining into the page, and main.js locks the page and the scrim;
   · drag the head down, or pull the list down from its top, to dismiss;
   · the bar stays on top, and the More tab turns into Close.
   This section owns the component outright (structure AND paint): every page
   that carries the bar loads this file, and style.css / paper.css no longer
   style the sheet at all. --bn-h is the bar's real height, set by main.js. */
.bottom-sheet {
  --sheet-gap: max(env(safe-area-inset-top), clamp(16px, 5.5vh, 52px));
  position: fixed !important;
  z-index: 119;
  top: auto;
  right: 0;
  bottom: var(--bn-h, calc(67px + env(safe-area-inset-bottom)));
  left: 0;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 640px;
  max-height: calc(100vh - var(--bn-h, 67px) - var(--sheet-gap));
  max-height: calc(100dvh - var(--bn-h, 67px) - var(--sheet-gap));
  margin: 0 auto;
  overflow: hidden;
  border: var(--ink-w) solid var(--ink) !important;
  border-bottom: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  background: var(--card) !important;
  box-shadow: 0 -5px 0 rgba(22, 19, 15, .14) !important;
  outline: 0;
  transform: translateY(0);
  transition: transform .34s cubic-bezier(.2, .9, .25, 1);
}
.bottom-sheet:focus, .bottom-sheet:focus-visible { outline: 0 !important; }
.bottom-sheet.is-off {
  transform: translateY(calc(100% + 12px));
  transition-duration: .24s;
  transition-timing-function: cubic-bezier(.4, 0, 1, 1);
}
.bottom-sheet.is-dragging { transition: none; }
.bottom-sheet[hidden] { display: none !important; }

.bottom-sheet-scrim {
  position: fixed;
  z-index: 118;
  inset: 0;
  background: rgba(22, 19, 15, .5) !important;
  opacity: 1;
  transition: opacity .3s ease;
  touch-action: none;
}
.bottom-sheet-scrim.is-off { opacity: 0; }
.bottom-sheet-scrim[hidden] { display: none !important; }

/* The page underneath does not move while the sheet is up (main.js adds the
   class; iOS 16+ and every Chromium honour overflow on the root).
   ⚠️ The ROOT only. body keeps its overflow-x:clip: overflow:hidden on body
   turns it into a scroll container, the sticky header then sticks to THAT
   (never scrolled) and vanishes from the top of a scrolled page the moment
   the sheet opens — seen in iOS Safari, Sept 2026. */
html.sheet-lock { overflow: hidden !important; }

/* Head: the drag handle. touch-action:none hands every gesture on it to main.js. */
.sheet-top {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 16px 12px 8px 20px;
  background: var(--card);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow .15s ease;
}
.bottom-sheet.is-scrolled .sheet-top { box-shadow: 0 2px 0 var(--ink); }
.sheet-grab {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 46px;
  height: 5px;
  margin-left: -23px;
  border-radius: 999px;
  background: var(--ink);
  opacity: .3;
}
p.sheet-title {
  flex: 1 1 auto;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  letter-spacing: -.035em;
  line-height: 1;
}
.sheet-title span {
  padding: 0 .12em;
  background: linear-gradient(transparent 52%, var(--pop-yellow) 52%, var(--pop-yellow) 94%, transparent 94%);
}
.bottom-sheet button.sheet-x {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 14px !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  box-shadow: var(--sh-sm) !important;
  cursor: pointer;
}
.bottom-sheet button.sheet-x:hover { background: var(--pop-yellow) !important; color: var(--ink) !important; }
.bottom-sheet button.sheet-x:active { transform: translate(2px, 2px); box-shadow: none !important; }
.sheet-x .ic { width: 22px; height: 22px; stroke-width: 2.6; }

/* Body: the one scroller. The bottom padding clears the raised Apps button,
   which overlaps the sheet's foot by ~15px. */
.bottom-sheet-inner {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 6px 16px 40px !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* "There is more below" — a paper fade over the foot, gone at the end. */
.bottom-sheet::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34px;
  background: linear-gradient(rgba(255, 253, 248, 0), var(--card));
  pointer-events: none;
  transition: opacity .15s ease;
}
.bottom-sheet.at-end::after { opacity: 0; }

.sheet-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
p.sheet-head, p.sheet-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}
p.sheet-sub { margin-top: 4px !important; color: var(--muted-2) !important; font-size: .7rem !important; }
.sheet-head .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.sheet-head b {
  margin-left: auto;
  padding: 2px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--pop-mint);
  color: var(--ink) !important;
  font-size: .68rem;
  letter-spacing: .06em;
}

/* Links: every one is a class-scoped block, never a bare `a` (see the header). */
.bottom-sheet a { text-decoration: none !important; -webkit-tap-highlight-color: transparent; }

/* Apps: 11 apps + "All apps" = a clean 4 × 3 (3 × 4 on the narrowest phones,
   6 × 2 on a tablet). */
.sheet-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 4px;
  padding: 14px 6px 10px;
  border: var(--ink-w) solid var(--ink);
  border-radius: 18px;
  background: var(--dots) 0 0 / 12px 12px, var(--pop-cream);
  box-shadow: var(--sh-sm);
}
.sheet-apps a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 2px 2px 4px;
  border-radius: 12px;
  color: var(--ink) !important;
  text-align: center;
}
.sa-ic { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 6px; transition: transform .12s ease; }
.sheet-apps .app-img { width: 56px; height: 56px; }
.sheet-apps b, .sheet-apps small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-apps b { color: var(--ink) !important; font-size: .74rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.sheet-apps small { color: var(--muted-2); font-size: .68rem; line-height: 1.25; }
/* "CleanConnect", "MMA SOCIAL": a notch tighter so the whole name fits a 4-up cell. */
.sheet-apps .sa-long b { font-size: .68rem; letter-spacing: -.045em; }
.sa-soon {
  position: absolute;
  top: -5px;
  left: calc(50% + 12px);
  padding: 1px 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--pop-blush);
  color: var(--ink);
  font-size: .64rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.3;
  text-transform: uppercase;
  transform: rotate(8deg);
}
.sa-all .sa-ic {
  width: 56px;
  height: 56px;
  margin: 1px 1px 7px;
  border: 2.5px dashed var(--ink);
  border-radius: 22.5%;
  background: var(--card);
}
.sa-all .sa-ic .ic { width: 26px; height: 26px; }
.sa-all[aria-current="page"] .sa-ic { border-style: solid; background: var(--pop-yellow); }
.sheet-apps a:active .sa-ic { transform: scale(.92); }

/* Free stuff: two big tiles, then the popular tools as chunky chips. */
.sheet-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-big a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 14px 14px 13px;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 16px;
  box-shadow: var(--sh) !important;
  color: var(--ink) !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
a.sb-tools { background: var(--pop-yellow) !important; }
a.sb-themes { background: var(--pop-sky) !important; }
.sheet-big a[aria-current="page"] { background: var(--pop-pink) !important; }
.sb-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 7px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--sh-sm);
}
.sb-ic .ic { width: 22px; height: 22px; stroke-width: 2.3; }
.sheet-big b { color: var(--ink) !important; font-size: 1.06rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; }
.sheet-big small { color: var(--ink); font-size: .72rem; line-height: 1.3; opacity: .82; }
.sheet-big a:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink) !important; }

.sheet-tools, .sheet-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet-tools a, .sheet-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 50px;
  padding: 8px 12px;
  border: 2px solid var(--ink) !important;
  border-radius: 13px;
  background: var(--card) !important;
  box-shadow: var(--sh-sm) !important;
  color: var(--ink) !important;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sheet-tools a span { flex: none; font-size: 1.15rem; line-height: 1; }
.sheet-links a { font-size: .88rem; font-weight: 800; }
.sheet-links .ic { width: 20px; height: 20px; }
.sheet-tools a[aria-current="page"], .sheet-links a[aria-current="page"] { background: var(--pop-yellow) !important; }
.sheet-tools a:active, .sheet-links a:active { transform: translate(2px, 2px); box-shadow: none !important; }
@media (hover: hover) {
  .sheet-tools a:hover, .sheet-links a:hover { background: var(--pop-cream) !important; }
  .sheet-apps a:hover .sa-ic { transform: translateY(-2px) rotate(-3deg); }
}

p.sheet-foot {
  margin: 0 !important;
  color: var(--muted-2) !important;
  font-size: .72rem !important;
  line-height: 1.5;
  text-align: center;
}
.sheet-foot a { color: var(--ink) !important; text-decoration: underline !important; text-underline-offset: 2px; }

@media (max-width: 389px) {
  .sheet-apps { padding-inline: 2px; column-gap: 0; }   /* +5px a cell: "MMA SOCIAL" fits at 360 */
}
@media (max-width: 359px) {
  .sheet-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bottom-sheet-inner { padding-inline: 12px !important; }
  .sheet-tools a { font-size: .74rem; padding-inline: 9px; }
}
@media (min-width: 600px) {
  .sheet-apps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sheet-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sheet-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bottom-sheet-inner { padding-inline: 20px !important; }
}
@media (min-width: 1025px) { .bottom-sheet, .bottom-sheet-scrim { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .bottom-sheet, .bottom-sheet-scrim, .sa-ic, .sheet-big a, .sheet-tools a, .sheet-links a { transition: none !important; }
}

/* The More tab becomes Close while the sheet is up, and is the only lit tab. */
.bn-more .bn-i-close, .bn-more .bn-l-close { display: none !important; }
.bn-more[aria-expanded="true"] .bn-i-more, .bn-more[aria-expanded="true"] .bn-l-more { display: none !important; }
.bn-more[aria-expanded="true"] .bn-i-close { display: block !important; stroke-width: 2.6; }
.bn-more[aria-expanded="true"] .bn-l-close { display: block !important; }
.bottom-nav button.bn-more[aria-expanded="true"] .bn-ico { background: var(--pop-yellow); border-color: var(--ink); }
body.sheet-open .bottom-nav a.is-current:not(.bn-apps) .bn-ico { background: transparent; border-color: transparent; }

/* ---- 20. Motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn, .store-btn, .get-pill, .tab, .card, .tool-card, .post-card, .th-card, .app-card, .shelf-app, .stat-link, .more-links a {
    transition: none !important;
  }
  .btn:hover, .btn:active, .store-btn:hover, .store-btn:active, a.card:hover, a.tool-card:hover,
  a.post-card:hover, .th-card:hover, .app-card:hover, .shelf-app:hover, a.stat-link:hover {
    transform: none !important;
  }
}

/* The header's "Our Apps" link exists for the burger menu (761–860px), where
   the coloured "Get our apps" button is hidden. Above that the button is it. */
@media (min-width: 861px) { .nav-links a.nav-apps-link { display: none !important; } }
@media (max-width: 760px) { .kf-card .kf-icon { order: -1; } }
.card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; color: var(--ink) !important; font-weight: 800; }

/* Footer app links stack one per line, icon first. */
.footer-grid a.foot-app { display: flex !important; width: fit-content; }

/* Header button: the long label from 381px, "Apps" below that so the
   wordmark keeps one line on a 320px phone. */
.nav-cta .cta-short { display: none; }
@media (max-width: 380px) {
  .nav-cta .cta-long { display: none; }
  .nav-cta .cta-short { display: inline; }
  .nav .nav-cta { margin-left: 6px; padding-inline: 12px !important; }
}

/* Hero stickers on a phone: number over label, no arrow squeezing the text. */
@media (max-width: 480px) {
  .hero-stats > * span .ic { display: none; }
  .hero-stats > * { padding: 10px 11px !important; }
  .hero-stats > * span { font-size: .74rem; line-height: 1.25; }
}

/* Theme card meta: size · version · licence, each with its icon. */
.th-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.btn .btn-sub { font-weight: 600; opacity: .8; }
.th-hub-head .filter-label:first-of-type { margin-top: 26px; }

/* Theme page: the big download button keeps its icon beside the label, with
   the file size as a second line under the label (themes.css stacked the
   whole button into a column for that second line). */
.th-hero-actions .btn-lg { flex-direction: row !important; }
.btn-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.btn-stack .btn-sub { font-size: .74rem; margin-top: 3px; }
.th-hero-shot img, .th-hero-shot a { border-radius: 16px; }
.th-hero-shot a {
  display: block;
  overflow: hidden;
  border: var(--ink-w) solid var(--ink) !important;
  box-shadow: var(--sh-lg) !important;
  transition: transform .14s ease, box-shadow .14s ease;
}
@media (hover: hover) { .th-hero-shot a:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: 9px 9px 0 var(--ink) !important; } }
.th-hero-shot img { display: block; border: 0 !important; border-radius: 0 !important; }
.th-specs { border-color: var(--ink) !important; }

/* Tools: the Kalend aside — icon, badge and title in a row, copy under it. */
.tool-apps { background: var(--dots) 0 0 / 14px 14px, var(--pop-cream) !important; }
.tool-apps-copy { flex: 1 1 320px; min-width: 0; }
.tool-apps-copy > p { margin-top: 10px !important; color: var(--ink) !important; }
.tool-apps .tool-apps-head h2 { margin: 6px 0 0 !important; }
.tool-privacy { color: var(--ink) !important; }
.tool-privacy .ic { color: var(--success); }
.hub-cat-head h2 { display: flex; align-items: center; gap: 10px; }
.hub-cat-head h2 > span[aria-hidden] {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--pop-cream); box-shadow: var(--sh-sm);
  font-size: 1.3rem;
}
@media (max-width: 700px) { .tool-apps-actions .store-btn { flex: 1 1 auto; justify-content: center; } }

/* ⚠️ `nav.top a` above (0,1,2) outranked a bare .store-link and painted its
   label ink-on-ink. The pill's own colours are restated at (0,2,2). */
nav.top a.store-link, header a.store-link, a.store-link.store-link { color: #fff !important; }
nav.top a.store-link:hover, a.store-link.store-link:hover { color: #fff !important; transform: translateY(-1px); }

/* ⚠️ Same trap as .appstore-cta-text (see paper.css): .post-cta-body has
   flex-basis 300px, which becomes a HEIGHT once the box stacks into a column
   on a phone — a 250px empty band above the button. */
@media (max-width: 560px) {
  .post-cta-body { flex: 0 1 auto !important; }
  .post-cta .store-btn { width: 100%; justify-content: center; }
  .appstore-cta .store-btn { width: 100%; justify-content: center; }
}

/* ---- 21. Filters, everywhere: counts on chips, a live result line ---------- */
.tab b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pop-cream);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-size: .72rem;
  line-height: 1;
}
.tab.on b { background: var(--pop-yellow); }
.filter-count { margin: 4px 0 18px; font-size: .82rem; font-weight: 700; color: var(--muted-2) !important; }
.blog-find { padding-block: 8px 0 !important; }
.blog-find .hub-search { max-width: 640px; margin: 6px 0 4px; }
.blog-find .hub-search input, .blog-find input[type="search"] {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  font-size: 1rem;
  background: var(--card) !important;
  border: var(--ink-w) solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: var(--sh) !important;
  color: var(--ink) !important;
}
.blog-shelf { padding-block: 6px 18px !important; }
.blog-shelf .app-shelf { padding-inline: 0; }

.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.pc-foot .go { margin-top: 0 !important; padding-top: 0 !important; }
.pc-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 9px 3px 4px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  font-size: .72rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.pc-app .app-img { width: 22px; height: 22px; border-width: 1.5px; border-radius: 6px; box-shadow: none; }
.pc-app .ic { width: 16px; height: 16px; margin-left: 4px; }
[hidden] { display: none !important; }

/* Visually hidden, still read aloud. tools.css has its own copy; the blog pages
   do not load tools.css, so their search label was showing. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll-snap aligns the first chip to the scrollport edge, not the padding
   edge, so without this the row loaded already nudged 20px left. */
@media (max-width: 860px) {
  .th-filters, .tabs, .hub-filters { scroll-padding-inline: 20px; }
}

/* Phone tap targets (audit 2026-09-19): the shelf's Get pills and the card
   titles that are links came in at 25–32px. */
@media (max-width: 900px) {
  .get-pill { min-height: 40px; min-width: 64px; }
  .app-card h2 a, .app-card h3 a, .th-card h2 a, .th-card h3 a, .th-related h3 a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .tool-main .btn-mini { min-height: 44px; }
}

/* ---- 22. Logo: the b-head mark + a wordmark with a BIG "big" ---------------
   The mark is an SVG in assets/brand/v2/ (versioned folder: the CDN ignores
   ?v= on images). It replaces the 🧠 emoji that style.css put in .logo:before
   — an emoji renders differently on every platform and is not a logo. Applied
   through .logo::before so every page gets it, PHP or static, with no markup. */
/* ⚠️ NOT flex: in a flex container every text run becomes its own item, so a
   gap opened between "the", "big" and "head" — and the spaces at item edges
   collapsed, which ran "big head" together on phones. Inline + middle-aligned
   mark instead. */
.logo, .nav .logo {
	display: inline-block !important;
	line-height: 1.1 !important;
	white-space: nowrap;
	text-decoration: none !important;
}
.logo::before, .logo:before {
	content: "" !important;
	display: inline-block;
	width: 42px;
	height: 42px;
	margin: 0 10px 0 0 !important;
	vertical-align: middle;
	position: relative;
	top: -2px;
	background: url("/assets/brand/v2/mark.svg") center / contain no-repeat;
	filter: none !important;
	font-size: 0 !important;
	transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1);
}
a.logo:hover::before, a.logo:focus-visible::before { transform: rotate(-8deg) scale(1.06); }
/* paper.css colours every .logo span with the link colour (for the dot); the
   big word stays ink. */
.logo span.big { font-size: 1.32em; letter-spacing: -0.045em; color: inherit !important; }
.logo-foot::before { width: 54px; height: 54px; }
@media (max-width: 380px) {
	.logo::before, .logo:before { width: 34px; height: 34px; }
	.logo::before, .logo:before { margin-right: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.logo::before, .logo:before { transition: none; }
}