/* ============================================================================
   PLAINFORGE — privacy-first multi-domain tools hub — v4
   Shared stylesheet (index.html, tool.html, /about/, /privacy/, /terms/, /category/*, 404.html)

   Design language: "workshop minimalism"
   - warm bone paper + ink, one copper/ember accent (forge)
   - mono type for everything technical: labels, domains, counts, numbers
   - faint blueprint grid behind the hero, numbered section eyebrows
   - 1px borders over shadows, calm hover lifts, zero gradients/glass
   v4: AA contrast pass (small mono text uses --muted, never --faint),
   mobile nav, prose pages, 404, print styles, prefers-contrast support.
   ============================================================================ */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* color — light ("cold shop light": mineral porcelain + iron + verdigris)
     The system's story: the interface is iron and patina — the green that
     copper earns with age. RAW COPPER (--ember) is rationed to three sparks:
     the brand mark, a saved heart, and the "New" badge (still hot from the
     forge). Never use ember for chrome; never use patina for the mark. */
  --bg:            #eef0ec;
  --surface:       #f6f8f4;
  --surface-2:     #e2e6e0;
  --border:        #d3d9d2;
  --border-strong: #b7c1b8;
  --text:          #151a17;
  --muted:         #5a655f;   /* AA on --bg and --surface at 12px+ */
  --faint:         #8b958e;   /* decorative only — never body/meta text */
  --accent:        #2e6e5e;   /* verdigris — the working accent */
  --accent-ink:    #f2faf6;
  --accent-soft:   #dfeae3;
  --accent-border: #b4cfc2;
  --ember:         #b04f24;   /* raw copper — the rationed spark */
  --ember-text:    #9c4116;   /* ember dark enough for 10px text on ember-soft (AA) */
  --ember-soft:    #f3e3d8;
  --ember-border:  #e0c2ab;
  --ink:           #151a17;   /* inverted chips/badges */
  --ink-ink:       #eef0ec;
  --grid-line:     rgba(21,26,23,.055);
  --card-edge:     0 0 #0000;
  --shadow:        0 1px 2px rgba(21,26,23,.05), 0 10px 28px -14px rgba(21,26,23,.18);

  /* shape + rhythm */
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --container: 1120px;
  --pad: clamp(16px, 4vw, 24px);

  /* type */
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", "Segoe UI Mono", Consolas, monospace;

  color-scheme: light dark;
}

/* dark — "night shop": blued iron, patina glow, ember sparks */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:            #0f1412;
    --surface:       #151b18;
    --surface-2:     #1b221e;
    --border:        #242d28;
    --border-strong: #33403a;
    --text:          #e4eae5;
    --muted:         #98a39c;
    --faint:         #6f7a73;
    --accent:        #58b08f;
    --accent-ink:    #07221a;
    --accent-soft:   #152922;
    --accent-border: #28503f;
    --ember:         #e08549;
    --ember-text:    #e08549;  /* passes on the dark ember-soft as-is */
    --ember-soft:    #33241a;
    --ember-border:  #55371f;
    --ink:           #e4eae5;
    --ink-ink:       #0f1412;
    --grid-line:     rgba(228,234,229,.045);
    --card-edge:     inset 0 1px 0 rgba(255,255,255,.045);
    --shadow:        0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:            #0f1412;
  --surface:       #151b18;
  --surface-2:     #1b221e;
  --border:        #242d28;
  --border-strong: #33403a;
  --text:          #e4eae5;
  --muted:         #98a39c;
  --faint:         #6f7a73;
  --accent:        #58b08f;
  --accent-ink:    #07221a;
  --accent-soft:   #152922;
  --accent-border: #28503f;
  --ember:         #e08549;
  --ember-text:    #e08549;
  --ember-soft:    #33241a;
  --ember-border:  #55371f;
  --ink:           #e4eae5;
  --ink-ink:       #0f1412;
  --grid-line:     rgba(228,234,229,.045);
  --card-edge:     inset 0 1px 0 rgba(255,255,255,.045);
  --shadow:        0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.55);
}

/* users who ask for more contrast get it */
@media (prefers-contrast: more){
  :root{ --border: var(--border-strong); --muted: var(--text); --faint: var(--muted); }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px; line-height:1.55;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ line-height:1.12; letter-spacing:-0.02em; margin:0; font-weight:680; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
svg{ display:block; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* the hidden attribute always wins — a kit class's display rule must never
   resurrect a hidden element (the empty image-preview strip bug) */
[hidden]{ display:none !important; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--pad); top:-48px; z-index:100;
  background:var(--ink); color:var(--ink-ink);
  padding:10px 16px; border-radius:0 0 var(--r-sm) var(--r-sm);
  text-decoration:none; font-weight:600; transition:top .15s ease;
}
.skip-link:focus{ top:0; }
.noscript-note{
  display:block; padding:14px var(--pad); text-align:center;
  background:var(--accent-soft); color:var(--accent); font-size:14px;
}

.icon{ width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none;
       stroke-linecap:round; stroke-linejoin:round; flex:none; }
.icon--lg{ width:24px; height:24px; }
.mono{ font-family:var(--mono); }

/* ==========================================================================
   3. HEADER + MOBILE NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 10px 28px -18px rgba(0,0,0,.35); }
.site-nav a.is-active{ color:var(--accent); }
.site-header__inner{ display:flex; align-items:center; gap:20px; height:60px; }
/* THE LOCKUP. One word, one color, two weights: "plain" runs light,
   "forge" lands heavy, and the copper mark is the only color in the row.
   The word lives in .brand__word so no flex gap can ever split it.
   The -2px rise centers the GLYPH INK on the tile: Segoe's font box (24px)
   overflows the 18px line box, so the ink center sits 2px below the box
   center that flex aligns — measured against the mark, not eyeballed. */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand__mark{ width:28px; height:28px; border-radius:7px; flex:none; }
.brand__word{
  font-size:18px; font-weight:400; letter-spacing:-0.02em;
  color:var(--text); line-height:1; white-space:nowrap;
  translate:0 -2px;
}
.brand__word b{ font-weight:750; letter-spacing:-0.028em; }
.brand:hover .brand__word{ color:var(--text); }
.site-nav{ display:flex; gap:2px; margin-left:auto; }
.site-nav a{
  padding:8px 12px; border-radius:var(--r-sm);
  text-decoration:none; color:var(--muted); font-size:14.5px; font-weight:500;
}
.site-nav a:hover{ color:var(--text); background:var(--surface-2); }
.theme-toggle, .menu-btn{
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface);
}
.theme-toggle{ margin-left:4px; }
.theme-toggle:hover, .menu-btn:hover{ border-color:var(--border-strong); }
.theme-toggle .icon--sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon--sun{ display:block; }
[data-theme="dark"] .theme-toggle .icon--moon{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon--sun{ display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon--moon{ display:none; }
}
/* mobile: keep "All tools" + theme + menu; rest goes into the panel */
.menu-btn{ display:none; }
.menu-btn[aria-expanded="true"] .icon--burger{ display:none; }
.menu-btn .icon--close{ display:none; }
.menu-btn[aria-expanded="true"] .icon--close{ display:block; }
.mobile-nav{
  display:none;
  position:absolute; top:60px; left:0; right:0;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:6px var(--pad) 10px;
}
.mobile-nav[data-open="true"]{ display:block; }
.mobile-nav a{
  display:block; padding:13px 8px;
  text-decoration:none; color:var(--text); font-size:15px; font-weight:550;
  border-bottom:1px solid var(--border);
}
.mobile-nav a:last-child{ border-bottom:0; }
/* mobile header: the nav lives in the panel (All tools is its first item),
   leaving exactly two controls — a matched pair, same size, same radius,
   pushed to the trailing edge with one deliberate gap. */
@media (max-width: 680px){
  .site-nav{ display:none; }
  .menu-btn{ display:grid; }
  .theme-toggle, .menu-btn{ width:40px; height:40px; border-radius:10px; }
  .theme-toggle{ margin-left:auto; }
  .site-header__inner{ gap:10px; }
}

/* ==========================================================================
   4. HERO — blueprint grid + ember glow behind the search
   ========================================================================== */
.hero{
  position:relative;
  padding-block:clamp(56px, 9.5vw, 112px) clamp(44px, 6.5vw, 76px);
  text-align:center;
}
/* drafting-ruler ticks framing the hero — workshop, not template */
.hero__ticks{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero__ticks::before,
.hero__ticks::after{
  content:""; position:absolute; top:12%; bottom:14%; width:12px;
  background:repeating-linear-gradient(to bottom, var(--faint) 0 1px, transparent 1px 16px);
  opacity:.4;
}
.hero__ticks::before{ left:calc(50% - min(560px, 46vw)); }
.hero__ticks::after{ right:calc(50% - min(560px, 46vw)); }
@media (max-width:940px){ .hero__ticks{ display:none; } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 50% 25%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 75% 85% at 50% 25%, #000 30%, transparent 75%);
}
.hero::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-60px; left:50%; translate:-50% 0;
  width:min(680px, 90vw); height:380px;
  background:radial-gradient(closest-side, var(--accent-soft), transparent);
  opacity:.65;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent);
  background:var(--surface); border:1px solid var(--accent-border);
  padding:7px 14px; border-radius:999px; margin-bottom:24px;
}
.hero h1{
  font-size:clamp(33px, 5.9vw, 64px); font-weight:750; letter-spacing:-0.035em;
  max-width:16ch; margin-inline:auto;
}
/* accent words turn serif-italic patina — the one editorial flourish */
.hero h1 em{
  font-family:"Iowan Old Style", "Palatino Linotype", Charter, Georgia, ui-serif, serif;
  font-style:italic; font-weight:600; letter-spacing:-0.01em;
  color:var(--accent); padding-right:.04em;
}
.hero__sub{
  margin:18px auto 0; max-width:54ch;
  font-size:clamp(15.5px, 2vw, 18px); color:var(--muted);
}
.hero-search-wrap{ position:relative; max-width:560px; margin:34px auto 0; }
.hero-search{ position:relative; }
/* typeahead panel — results land where the eyes already are */
.search-panel{
  position:absolute; z-index:40; inset-inline:0; top:calc(100% + 8px);
  padding:6px; text-align:left;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:13px; box-shadow:var(--shadow);
  max-height:min(340px, 55vh); overflow:auto;
}
.search-opt{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px;
  font-size:14.5px; color:var(--text); text-decoration:none;
}
.search-opt .icon{ width:16px; height:16px; color:var(--accent); flex:none; }
.search-opt__name{ font-weight:550; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-opt__meta{ margin-left:auto; padding-left:12px; font-family:var(--mono); font-size:11px; color:var(--muted); flex:none; }
.search-opt.is-active{
  background:var(--accent-soft);
  /* the soft tint alone sat at ~1.15:1 — keyboard users were arrowing blind */
  box-shadow:inset 0 0 0 2px var(--accent);
}
.search-opt-group{ display:contents; }
.search-opt--all{
  margin-top:4px; justify-content:center;
  border-top:1px solid var(--border); border-radius:0;
  font-size:13.5px; font-weight:600; color:var(--accent);
}
.search-panel__label{
  padding:10px 12px 4px;
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.search-panel__empty{ padding:14px 12px; font-size:13.5px; color:var(--muted); }
.hero-search .icon{
  position:absolute; left:16px; top:50%; translate:0 -50%; color:var(--faint);
}
.hero-search input{
  width:100%; height:56px;
  padding:0 64px 0 46px;
  font:inherit; font-size:16px; color:var(--text);
  background:var(--surface);
  border:1px solid var(--border-strong); border-radius:13px;
  box-shadow:var(--shadow);
}
.hero-search input::placeholder{ color:var(--muted); } /* instructional text: --faint failed AA */
.hero-search input:focus{
  outline:2px solid var(--accent); outline-offset:0; border-color:transparent;
  box-shadow:0 0 0 6px var(--accent-soft), var(--shadow);
}
.hero-search kbd{
  position:absolute; right:14px; top:50%; translate:0 -50%;
  font-family:var(--mono); font-size:12px; color:var(--muted);
  border:1px solid var(--border); border-bottom-width:2px; border-radius:6px;
  padding:2px 7px; background:var(--surface-2);
}
@media (max-width:680px){ .hero-search kbd{ display:none; } }
.try-row{
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  font-family:var(--mono); font-size:12px; color:var(--muted);
}
.try-row .chip{ padding:5px 12px; font-size:12.5px; font-family:var(--font); }
.trust-strip{
  margin-top:28px; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px;
  font-size:13.5px; color:var(--muted);
}
.trust-strip li{ display:flex; align-items:center; gap:7px; list-style:none; }
.trust-strip .icon{ width:15px; height:15px; color:var(--accent); }
.trust-strip .mono{ font-size:12.5px; }

/* ==========================================================================
   5. SECTIONS — numbered mono eyebrows ("01 — Featured")
   ========================================================================== */
.section{ padding-block:clamp(42px, 6.6vw, 80px); }
.section--tint{ background:var(--surface-2); border-block:1px solid var(--border); }
.section--slim{ padding-block:clamp(20px, 3vw, 32px); }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:26px;
}
.section-head__eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
/* short machined rule before every eyebrow — quiet, consistent rhythm */
.section-head__eyebrow::before{
  content:""; display:inline-block; width:22px; height:1px;
  background:var(--accent); margin-right:10px; vertical-align:middle;
  opacity:.75;
}
.section-head h2{ font-size:clamp(22px, 3.1vw, 29px); letter-spacing:-0.025em; }
.section-head__sub{ color:var(--muted); font-size:14.5px; margin-top:8px; max-width:58ch; text-wrap:pretty; }
.section-head__link{
  flex:none; font-size:14px; font-weight:600; color:var(--accent);
  text-decoration:none; display:flex; align-items:center; gap:5px; padding-bottom:2px;
}
.section-head__link:hover{ text-decoration:underline; }

/* ==========================================================================
   6. TOOL CARD — one component for internal + external tools
   ========================================================================== */
/* JS renders every grid; reserved heights keep first paint from collapsing
   and then shoving the page once cards arrive (cold-cache CLS) */
@media (min-width: 761px){
  #featuredGrid{ min-height:200px; }
  #toolGrid{ min-height:640px; }
  #appsGrid{ min-height:640px; }
  #categoryGrid{ min-height:170px; }
  #catGrid{ min-height:220px; }
}
.tool-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(235px, 1fr));
}
.tool-grid--featured{ grid-template-columns:1.45fr 1fr 1fr; }
@media (max-width:880px){ .tool-grid--featured{ grid-template-columns:1fr; } }

.tool-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:18px; min-height:152px;
  background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--card-edge); /* machined top edge in the dark theme */
  transition:border-color .15s ease, translate .15s ease, box-shadow .15s ease;
}
.tool-card:hover{
  border-color:var(--accent-border);
  translate:0 -2px;
  box-shadow:var(--card-edge), var(--shadow);
}
.tool-card__link{ text-decoration:none; color:inherit; }
.tool-card__link::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.tool-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tool-card__icon{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:var(--r-md);
  background:var(--accent-soft); color:var(--accent);
  border:1px solid var(--accent-border);
}
.tool-card h3{ font-size:15.5px; font-weight:660; }
.tool-card__desc{
  font-size:13.5px; color:var(--muted); line-height:1.5;
  /* 3 lines: every registry desc fits whole at the narrowest grid width —
     a catalog that ellipsizes its own copy reads unfinished */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.tool-card__meta{
  margin-top:auto; padding-top:8px;
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted);
}
.tool-card__meta .icon{ width:13px; height:13px; margin-left:auto; opacity:0;
  translate:-4px 0; transition:opacity .15s ease, translate .15s ease; color:var(--accent); }
.tool-card:hover .tool-card__meta .icon{ opacity:1; translate:0 0; }
/* external tools: destination domain + always-visible ↗ (honest wayfinding) */
.tool-card__domain{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tool-card__meta .icon--ext{ opacity:.6; translate:0 0; color:var(--muted); }
.tool-card:hover .tool-card__meta .icon--ext{ opacity:1; color:var(--accent); }

.tool-card--featured{ min-height:186px; padding:22px; }
.tool-card--featured h3{ font-size:17px; }
.tool-card--featured .tool-card__desc{ -webkit-line-clamp:3; }
.tool-grid--featured .tool-card:first-child{
  padding:26px;
  border-color:var(--accent-border);
}
.tool-grid--featured .tool-card:first-child h3{ font-size:19px; }

/* save-for-later — 34px hit target, stays above the stretched link */
.fav-btn{
  position:relative; z-index:2;
  display:grid; place-items:center; width:34px; height:34px; margin:-2px;
  border:0; border-radius:999px; background:transparent; color:var(--muted); /* --faint sat below 3:1 */
  transition:color .12s ease, background .12s ease;
}
.fav-btn:hover{ color:var(--ember); background:var(--ember-soft); }
.fav-btn .icon{ width:16px; height:16px; }
/* a saved heart is one of the three ember sparks */
.fav-btn[aria-pressed="true"]{ color:var(--ember); }
.fav-btn[aria-pressed="true"] .icon{ fill:var(--ember); stroke:var(--ember); }

/* badges — New = ember, Popular = inverted ink stamp */
.badge{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  padding:3.5px 8px; border-radius:999px; white-space:nowrap;
}
/* NEW = ember: still hot from the forge. POPULAR = ink stamp: well worn.
   SOON = dashed patina outline: honestly still on the bench. */
.badge--new{ background:var(--ember-soft); color:var(--ember-text); border:1px solid var(--ember-border); }
.badge--popular{ background:var(--ink); color:var(--ink-ink); }
.badge--soon{ background:transparent; color:var(--muted); border:1px dashed var(--border-strong); }
.badge-group{ display:flex; gap:6px; align-items:center; }
.tag{
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--border);
  padding:2px 9px; border-radius:999px;
}

/* ==========================================================================
   6b. APP CARD — standalone apps, a deliberately different silhouette:
   patina rail, big name, domain up front, corner ↗. Never in the tool grid.
   ========================================================================== */
.app-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
}
.app-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--border); border-left:3px solid var(--accent-border);
  border-radius:var(--r-lg);
  box-shadow:var(--card-edge);
  transition:border-color .15s ease, translate .15s ease, box-shadow .15s ease;
}
.app-card:hover{
  border-color:var(--accent-border);
  translate:0 -2px;
  box-shadow:var(--card-edge), var(--shadow);
}
.app-card__top{ display:flex; align-items:flex-start; gap:14px; }
.app-card__id{ flex:1; min-width:0; }
.app-card__logo{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  font-family:var(--mono); font-size:20px; font-weight:600;
  color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-border);
  border-radius:var(--r-md);
}
.app-card__cta{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:600; color:var(--accent);
  opacity:0; translate:-4px 0; transition:opacity .15s ease, translate .15s ease;
}
.app-card:hover .app-card__cta{ opacity:1; translate:0 0; }
.app-card h3{ font-size:18px; letter-spacing:-0.02em; }
.app-card__link{ text-decoration:none; color:inherit; }
.app-card__link::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.app-card__domain{ font-family:var(--mono); font-size:12px; color:var(--accent); margin-top:5px; }
.app-card__ext{
  display:grid; place-items:center; width:36px; height:36px; flex:none;
  border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
  transition:color .15s ease, border-color .15s ease;
}
.app-card:hover .app-card__ext{ color:var(--accent); border-color:var(--accent-border); }
.app-card__desc{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.app-card__meta{ margin-top:auto; padding-top:6px; display:flex; gap:8px; align-items:center; }

/* ==========================================================================
   7. CATEGORY GRID
   ========================================================================== */
/* 9 benches resolve as a deliberate 3×3 — never a ragged auto-fill row */
.category-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:520px){
  .category-grid{ grid-template-columns:repeat(2, 1fr); }
  .category-grid .category-card:last-child{ grid-column:span 2; } /* the ninth card closes the row wide */
}
.category-card{
  display:flex; flex-direction:column; gap:12px;
  padding:18px 16px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  text-decoration:none;
  transition:border-color .15s ease, translate .15s ease;
}
.category-card:hover{ border-color:var(--accent-border); translate:0 -2px; }
@media (min-width:760px){
  .category-card{ flex-direction:row; align-items:center; gap:14px; } /* wide plaque: icon beside the name */
}
.category-card .icon{ color:var(--accent); width:22px; height:22px; flex:none; }
.category-card h3{ font-size:14.5px; }
.category-card__count{ font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:3px; }

/* ==========================================================================
   8. DIRECTORY (chips + segmented view + live grid)
   ========================================================================== */
.directory-controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:20px;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:7px 14px; border-radius:999px;
  font-size:13.5px; font-weight:550;
  background:var(--surface); color:var(--muted);
  border:1px solid var(--border);
  transition:all .12s ease;
}
.chip:hover{ border-color:var(--border-strong); color:var(--text); }
.chip[aria-pressed="true"]{
  background:var(--ink); color:var(--ink-ink); border-color:var(--ink);
}
.segmented{
  margin-left:auto;
  display:inline-flex; padding:3px; gap:2px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
}
.segmented button{
  padding:6px 14px; border:0; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--muted); background:transparent;
}
.segmented button[aria-pressed="true"]{
  background:var(--surface); color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.09);
}
@media (max-width:760px){
  .segmented{ margin-left:0; width:100%; }
  .segmented button{ flex:1; }
}
.results-note{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:14px; }
.empty-state{
  padding:56px 24px; text-align:center;
  border:1px dashed var(--border-strong); border-radius:var(--r-lg);
  color:var(--muted);
}
.empty-state strong{ display:block; font-size:16px; color:var(--text); margin-bottom:6px; }

/* ==========================================================================
   9. SPONSOR SLOTS — honest, calm, always labelled
   ========================================================================== */
.sponsor-slot{
  position:relative;
  border:1.5px dashed var(--border-strong); border-radius:var(--r-lg);
  background:var(--surface);
}
.sponsor-slot__label{
  position:absolute; top:12px; right:14px;
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted);
}
.sponsor-slot--card{
  display:flex; flex-direction:column; gap:10px; justify-content:center;
  padding:18px; min-height:152px; text-decoration:none;
}
.sponsor-slot--card h3{ font-size:15px; color:var(--muted); font-weight:600; }
.sponsor-slot--card p{ font-size:13px; color:var(--muted); }
.sponsor-slot--band{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
  padding:22px 26px;
}
.sponsor-slot--band__logo{
  width:44px; height:44px; border-radius:var(--r-md); flex:none;
  background:var(--surface-2); border:1px solid var(--border);
  display:grid; place-items:center; color:var(--muted);
}
.sponsor-slot--band h3{ font-size:15px; }
.sponsor-slot--band p{ font-size:13.5px; color:var(--muted); }
.sponsor-slot--band .btn{ margin-left:auto; }
@media (max-width:640px){ .sponsor-slot--band .btn{ margin-left:0; } }
.sponsor-slot--aside{ padding:20px; margin-bottom:14px; } /* same rhythm as .aside-card — it was touching the next card */
.sponsor-slot--aside h3{ font-size:14px; color:var(--muted); }
.sponsor-slot--aside p{ font-size:13px; color:var(--muted); margin-top:6px; }

/* ==========================================================================
   10. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:10px;
  font-size:14px; font-weight:600; text-decoration:none;
  border:1px solid transparent;
  transition:all .12s ease;
}
.btn--primary{ background:var(--accent); color:var(--accent-ink); }
.btn--primary:hover{ filter:brightness(1.07); }
.btn--ghost{ background:var(--surface); border-color:var(--border-strong); color:var(--text); }
.btn--ghost:hover{ border-color:var(--faint); }
.btn--sm{ padding:7px 13px; font-size:13px; }

/* ==========================================================================
   11. PRINCIPLES — numbered editorial rows (the trust section)
   ========================================================================== */
.principles{ border-top:1px solid var(--border-strong); }
.principle{
  display:grid; grid-template-columns:64px 1fr; gap:6px 24px;
  padding:24px 0; border-bottom:1px solid var(--border);
}
.principle__num{
  font-family:var(--mono); font-size:13px; color:var(--accent); padding-top:3px;
}
.principle h3{ font-size:16.5px; margin-bottom:6px; }
.principle p{ font-size:14.5px; color:var(--muted); max-width:64ch; }
.about-note{
  margin-top:30px; padding:22px 26px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  display:flex; gap:18px; align-items:flex-start;
}
.about-note .icon{ color:var(--accent); flex:none; margin-top:2px; }
.about-note p{ font-size:14.5px; color:var(--muted); }
.about-note a{ color:var(--accent); font-weight:600; }

/* ==========================================================================
   12. FAQ
   ========================================================================== */
.faq{ max-width:720px; margin-inline:auto; }
.faq--left{ margin-inline:0; max-width:none; }
.faq details{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  margin-bottom:10px; overflow:hidden;
}
.faq summary{
  padding:16px 20px; font-weight:600; font-size:15px;
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .icon{ width:16px; height:16px; color:var(--muted); transition:rotate .15s ease; }
.faq details[open] summary .icon{ rotate:45deg; }
.faq details p{ padding:0 20px 18px; font-size:14px; color:var(--muted); }

/* ==========================================================================
   13. CTA BAND
   ========================================================================== */
.cta-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.cta-card{
  padding:28px;
  border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border);
}
.cta-card--accent{ background:var(--accent-soft); border-color:var(--accent-border); }
.cta-card h3{ font-size:18px; margin-bottom:8px; }
.cta-card p{ font-size:14px; color:var(--muted); margin-bottom:18px; max-width:46ch; }

/* ==========================================================================
   14. TOOL PAGE (tool.html)
   ========================================================================== */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding-top:24px;
  font-family:var(--mono); font-size:12px; color:var(--muted);
  list-style:none; margin:0;
}
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--text); }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:8px; color:var(--border-strong); }
.breadcrumb [aria-current="page"]{ color:var(--text); }

.tool-hero{
  display:flex; align-items:flex-start; gap:18px;
  padding-block:26px 8px;
}
.tool-hero__icon{
  display:grid; place-items:center; width:56px; height:56px; flex:none;
  border-radius:var(--r-md);
  background:var(--accent-soft); color:var(--accent);
  border:1px solid var(--accent-border);
}
.tool-hero h1{ font-size:clamp(25px, 4vw, 36px); letter-spacing:-0.03em; font-weight:730; }
.tool-hero__desc{ margin-top:8px; color:var(--muted); font-size:15.5px; max-width:60ch; }
.tool-hero .badge-group{ margin-top:12px; }

.tool-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px;
  padding-block:20px 8px;
}
@media (max-width:880px){ .tool-layout{ grid-template-columns:1fr; } }

.tool-canvas{
  min-height:380px; padding:32px;
  display:grid; place-items:center; text-align:center;
  border:1.5px dashed var(--border-strong); border-radius:var(--r-lg);
  background:var(--surface); color:var(--muted);
}
.tool-canvas strong{ display:block; font-size:16px; color:var(--text); margin-bottom:6px; }
.tool-canvas p{ font-size:13.5px; max-width:38ch; margin-inline:auto; }
/* a mounted, working tool: solid frame, left-aligned workbench */
.tool-canvas--live{
  display:block; text-align:left; min-height:0;
  border-style:solid; border-width:1px; border-color:var(--border);
  color:var(--text); padding:22px;
  box-shadow:var(--card-edge);
}

/* ==========================================================================
   14b. TOOL UI KIT — shared primitives every native tool is built from
   ========================================================================== */
.tui{ display:grid; gap:14px; }
.tui-row{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:end; }
.tui-field{ display:grid; gap:6px; min-width:0; }
.tui-field > span{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.tui-input, .tui-select, .tui-textarea{
  font:inherit; font-size:14.5px; color:var(--text);
  background:var(--bg); border:1px solid var(--border-strong); border-radius:10px;
  padding:9px 12px; min-width:0; max-width:100%;
}
.tui-textarea{ width:100%; resize:vertical; font-family:var(--mono); font-size:13px; line-height:1.55; }
.tui-input:focus, .tui-select:focus, .tui-textarea:focus{ outline:2px solid var(--accent); outline-offset:0; }
.tui-input.mono{ font-family:var(--mono); }
.tui-out{
  font-family:var(--mono); font-size:13px; line-height:1.6;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; overflow:auto; max-height:340px;
  white-space:pre-wrap; word-break:break-word; color:var(--text);
}
.tui-big{
  font-family:var(--mono); font-size:clamp(18px, 2.6vw, 26px); font-weight:600;
  letter-spacing:.01em; word-break:break-all; min-height:1.4em;
}
.tui-stats{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
.tui-stat{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.tui-stat b{ display:block; font-family:var(--mono); font-size:19px; font-weight:600; word-break:break-word; }
.tui-stat span{ font-size:11.5px; color:var(--muted); }
.tui-note{ font-size:12.5px; color:var(--muted); }
.tui-error{ font-family:var(--mono); font-size:12.5px; color:var(--ember); }
.tui-ok{ color:var(--accent); font-weight:600; }
.tui-check{ display:flex; gap:7px; align-items:center; font-size:13.5px; color:var(--muted); padding-block:8px; }
.tui-check input{ accent-color:var(--accent); width:15px; height:15px; }
.tui-swatch{ border-radius:12px; border:1px solid var(--border); padding:20px; }
.tui-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip-pass{ background:var(--accent-soft) !important; color:var(--accent) !important; border-color:var(--accent-border) !important; }
.chip-fail{ background:var(--ember-soft) !important; color:var(--ember-text) !important; border-color:var(--ember-border) !important; }
.diff-add{ background:var(--accent-soft); }
.diff-del{ background:var(--ember-soft); }
.tui mark{ background:var(--accent-soft); color:inherit; border-radius:3px; padding:0 1px; }
.tool-canvas--live .segmented{ margin-left:0; }
.tool-canvas--live .segmented button{ flex:none; }
input[type="range"]{ accent-color:var(--accent); }
input[type="color"]{ inline-size:44px; block-size:38px; padding:2px; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg); }

.tool-section{ margin-top:28px; }
.tool-section h2{ font-size:19px; margin-bottom:12px; }
.tool-section > p{ font-size:14.5px; color:var(--muted); max-width:65ch; }
.steps{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; counter-reset:step; }
.steps li{
  counter-increment:step;
  display:flex; gap:14px; align-items:baseline;
  font-size:14.5px; color:var(--muted);
}
.steps li::before{
  content:counter(step, decimal-leading-zero);
  flex:none; align-self:flex-start; padding:2px 8px;
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-border); border-radius:999px;
}

.aside-card{
  padding:20px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  margin-bottom:14px;
}
.aside-card h3{ font-size:14px; display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.aside-card h3 .icon{ width:16px; height:16px; color:var(--accent); }
.aside-card p{ font-size:13.5px; color:var(--muted); }
.aside-card .btn{ margin-top:14px; }

/* ==========================================================================
   14c. V5 ADDITIONS — file field, image bench, palette, markdown, timers,
   time zones, real app logos, LT chip, the system band, category pages.
   Extensions of the kit above — same tokens, no new primitives forked.
   ========================================================================== */

/* file input — a drop-friendly bench surface */
.tui-file{
  position:relative; display:grid; gap:4px;
  padding:18px 16px;
  background:var(--surface-2); border:1.5px dashed var(--border-strong);
  border-radius:var(--r-md); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.tui-file:hover, .tui-file.is-drag{ border-color:var(--accent); background:var(--accent-soft); }
.tui-file input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.tui-file:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
.tui-file__hint{ font-size:13.5px; color:var(--muted); pointer-events:none; }
.tui-file__name{ font-family:var(--mono); font-size:12px; color:var(--accent); pointer-events:none; min-height:1em; }

/* image preview surface */
.img-preview{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  padding:10px; display:grid; place-items:center;
}
.img-preview img, .img-preview canvas{
  max-width:100%; height:auto; max-height:340px; border-radius:6px; display:block;
}
.img-preview--clickable canvas{ cursor:crosshair; touch-action:manipulation; }

/* palette swatches */
.pal-row{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; }
@media (max-width:560px){ .pal-row{ grid-template-columns:repeat(2, 1fr); } .pal-row .pal-swatch:last-child{ grid-column:span 2; } }
.pal-swatch{
  display:grid; place-items:end start;
  min-height:86px; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer;
  font-family:var(--mono); font-size:12px; font-weight:600;
  transition:translate .12s ease;
}
.pal-swatch:hover{ translate:0 -2px; }
.pal-swatch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pal-swatch--single{ min-height:0; width:44px; height:64px; padding:0; cursor:default; border-radius:var(--r-sm); }

/* exif report table */
.exif-table{ width:100%; border-collapse:collapse; font-size:13px; }
.exif-table th{
  text-align:left; padding:10px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--border);
}
.exif-table td{ padding:8px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
.exif-table tr:last-child td{ border-bottom:0; }
.exif-table td.mono{ font-family:var(--mono); font-size:12.5px; }

/* markdown split view */
.md-split{ display:grid; gap:14px; grid-template-columns:1fr 1fr; align-items:start; }
@media (max-width:760px){ .md-split{ grid-template-columns:1fr; } }
.md-preview{ max-height:none; min-height:120px; font-family:var(--font); font-size:14.5px; white-space:normal; }
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4, .md-preview h5, .md-preview h6{ margin:14px 0 6px; line-height:1.25; }
.md-preview h1:first-child, .md-preview h2:first-child, .md-preview p:first-child{ margin-top:0; }
.md-preview p, .md-preview ul, .md-preview ol, .md-preview blockquote{ margin:8px 0; }
.md-preview ul, .md-preview ol{ padding-left:22px; }
.md-preview li{ list-style:revert; }
.md-preview code{ font-family:var(--mono); font-size:.9em; background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:1px 4px; }
.md-preview pre{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; overflow:auto; }
.md-preview pre code{ border:0; background:none; padding:0; }
.md-preview blockquote{ border-left:3px solid var(--accent-border); padding-left:12px; color:var(--muted); }
.md-preview hr{ border:0; border-top:1px solid var(--border); margin:14px 0; }
.md-preview a{ color:var(--accent); }

/* timer face */
.timer-face{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(56px, 14vw, 104px); line-height:1; letter-spacing:.02em;
  text-align:center; padding:18px 0; font-variant-numeric:tabular-nums;
}
.timer-face--done{ color:var(--accent); }

/* time-zone rows */
.tz-rows{ display:grid; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.tz-row{
  display:grid; grid-template-columns:1fr auto 34px; gap:10px; align-items:center;
  padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--border);
}
.tz-row:last-child{ border-bottom:0; }
.tz-row--ok{ background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); } /* tint + rail + the ✓ mark: never color alone */
.tz-ok{ color:var(--accent); font-weight:600; }
.tz-city{ font-size:14px; display:flex; gap:8px; align-items:center; min-width:0; }
.tz-time{ font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.tz-shift{ font-size:11px; color:var(--muted); margin-left:6px; font-weight:500; }
.tz-del{
  position:relative;
  width:28px; height:28px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface-2); color:var(--muted); font-size:15px; line-height:1; cursor:pointer;
}
.tz-del::after{ content:""; position:absolute; inset:-8px; } /* 44px touch area without moving the layout */
.tz-del:hover{ color:var(--accent); border-color:var(--accent-border); background:var(--accent-soft); }

/* the one nav link that stays visible on mobile must never wrap */
.site-nav__primary{ white-space:nowrap; }

/* ==========================================================================
   14d. CSP-SAFE UTILITIES + fixes from the v5 adversarial review.
   The production CSP (style-src 'self', both header files) blocks EVERY
   inline style="" attribute — including ones parsed from innerHTML — and
   the local server sends no headers, so violations never show in preview.
   LAW: no style="" anywhere in shipped HTML or JS templates; use these
   classes, or the CSSOM element.style API for dynamic values.
   ========================================================================== */
.sprite{ position:absolute; width:0; height:0; }
.icon.icon--13{ width:13px; height:13px; }
.icon.icon--15{ width:15px; height:15px; }
.icon.icon--16{ width:16px; height:16px; }
h2.h2-bench{ font-size:19px; }
.section-head.section-head--sub{ margin-bottom:16px; }
.section-head.section-head--center{ justify-content:center; text-align:center; }
.mt-16{ margin-top:16px; }

/* tool-bench layout utilities (replace the old inline styles) */
.tui-grow{ flex:1 1 240px; min-width:0; }        /* grows AND wraps on narrow screens */
.tui-grow--s{ flex:1 1 180px; min-width:0; }
.tui-row--center{ align-items:center; }
.tui-row--stretch{ align-items:stretch; }
.tui-row--middle{ justify-content:center; }
.tui-row--tight{ gap:6px; }
.tui--center{ text-align:center; }
.tui-w-70{ width:70px; }  .tui-w-80{ width:80px; }  .tui-w-90{ width:90px; }
.tui-w-100{ width:100px; } .tui-w-110{ width:110px; } .tui-w-140{ width:140px; }
.tui-w-220{ width:220px; max-width:100%; }
.tui-unit-label{ min-width:190px; font-size:14px; }
.tui-result{ font-size:16px; }
.tui-sample-l{ font-size:19px; }
.tui-sample-s{ font-size:13px; }
.tui-big--coin{ font-size:clamp(28px, 5vw, 44px); }
.tui-out--flush{ padding:0; }


/* iOS focus-zoom guard: bench inputs go 16px on touch-width screens */
@media (max-width:760px){
  .tui-input, .tui-select, .tui-textarea{ font-size:16px; }
  /* segmented controls inside a live tool may wrap instead of overflowing */
  .tool-canvas--live .segmented{ flex-wrap:wrap; }
  .tool-canvas--live .segmented button{ flex:1 1 auto; }
}

/* real app logos — every mark in the set is a full app-icon tile, so the
   logo IS the tile: full-bleed, clipped to the tile radius. Shrinking a
   tile inside another tile is what made marks read squeezed. */
.app-card__logo--img{
  padding:0; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border);
}
.app-card__logo--img img{
  width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block;
}

/* language chip for Lithuanian sites */
.tag--lang{
  font-weight:700; letter-spacing:.08em;
  color:var(--accent); background:var(--accent-soft); border-color:var(--accent-border);
}

/* the system band — one window into a real night sky (band-sky.jpg is an
   authored asset: verdigris-tinted stars, one ember star, on near-black
   iron). Solid fallback color paints first; the photo loads over it. */
.system-band{
  position:relative; overflow:hidden;
  padding:clamp(30px, 6vw, 52px) clamp(22px, 5vw, 48px);
  background:#080d0b url("/band-sky.jpg?v=6") center / cover no-repeat;
  border:1px solid #1d2620; border-radius:var(--r-lg);
  color:#e4eae5;
}
/* same voice as every numbered eyebrow — size and machined rule included */
.system-band__eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:#8fb8a5;
  margin-bottom:8px;
}
.system-band__eyebrow::before{
  content:""; display:inline-block; width:22px; height:1px;
  background:#8fb8a5; margin-right:10px; vertical-align:middle; opacity:.75;
}
.system-band h2{ font-size:clamp(22px, 3.4vw, 30px); letter-spacing:-0.02em; margin:10px 0 10px; color:#f2f6f2; }
.system-band p{ max-width:58ch; color:#aab6ae; font-size:15px; line-height:1.6; }
.system-band .btn{ margin-top:20px; }
.system-band .btn--ghost{ background:transparent; color:#e4eae5; border-color:#3d4a43; }
.system-band .btn--ghost:hover{ background:rgba(88,176,143,.08); border-color:#58b08f; color:#8fd4b6; }

/* ==========================================================================
   14e. FORGENDRIVE (/forgendrive/) — the show's page. Carbon stack and the
   hub-orange /// mark are the show's own identity (FORGENDRIVE-BIBLE), a
   deliberate dark window inside the hub, like the system band. The ember
   ration governs plainforge chrome; this panel is forgendrive's livery.
   ========================================================================== */
.fd-hero{
  margin-top:clamp(24px, 4vw, 40px);
  padding:clamp(34px, 6vw, 60px) clamp(22px, 5vw, 56px);
  background:#0E0E11; border:1px solid #1B1B22; border-radius:var(--r-lg);
  color:#F4F2ED;
}
.fd-mark{ display:inline-flex; gap:7px; margin-bottom:22px; }
.fd-mark i{
  width:7px; height:26px; border-radius:1.5px;
  background:#FF4D00; transform:skewX(-18deg);
}
.fd-hero h1{
  font-size:clamp(34px, 6vw, 56px); font-weight:800;
  letter-spacing:-0.035em; line-height:1; color:#F4F2ED;
}
.fd-tag{
  margin-top:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:#FF4D00;
}
.fd-lede{
  margin-top:22px; max-width:62ch;
  font-size:15.5px; line-height:1.65; color:#B8B6B0;
}
.fd-lede a{ color:#F4F2ED; font-weight:600; }
.fd-h2{
  margin:clamp(30px, 5vw, 44px) 0 16px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.fd-h2::before{
  content:""; display:inline-block; width:22px; height:1px;
  background:var(--accent); margin-right:10px; vertical-align:middle; opacity:.75;
}
.fd-channels{ display:grid; gap:14px; grid-template-columns:repeat(3, 1fr); }
@media (max-width:760px){ .fd-channels{ grid-template-columns:1fr; } }
.fd-ch{
  display:flex; flex-direction:column; gap:6px;
  padding:22px;
  background:#14141A; border:1px solid #1B1B22; border-radius:var(--r-lg);
  text-decoration:none;
  transition:border-color .15s ease, translate .15s ease;
}
.fd-ch:hover{ border-color:#FF4D00; translate:0 -2px; }
.fd-ch__plat{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:#B8B6B0;
}
.fd-ch__handle{
  font-family:var(--mono); font-size:clamp(16px, 2.4vw, 19px); font-weight:700;
  color:#F4F2ED; word-break:break-all;
}
.fd-ch__go{
  margin-top:10px; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:#FF4D00;
}
.fd-footnote{
  margin:clamp(28px, 5vw, 40px) 0 clamp(40px, 7vw, 64px);
  max-width:66ch;
}
.fd-footnote p{ font-size:14px; line-height:1.7; color:var(--muted); }
.fd-footnote a{ color:var(--accent); font-weight:550; }

/* category pages */
.cat-hero{ padding-block:clamp(28px, 6vw, 48px) 8px; }
.cat-hero .breadcrumb{ margin-bottom:14px; }
.cat-hero h1{ font-size:clamp(28px, 5vw, 40px); letter-spacing:-0.02em; }
.cat-hero .cat-intro{ max-width:68ch; margin-top:12px; font-size:15.5px; line-height:1.65; color:var(--muted); }
.cat-count{ font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-top:14px; }

/* ==========================================================================
   15. PROSE PAGES (/about/, /privacy/, /terms/) + 404
   ========================================================================== */
.page-hero{ padding-block:clamp(44px, 7vw, 76px) 0; }
.page-hero .section-head__eyebrow{ margin-bottom:10px; }
.page-hero h1{ font-size:clamp(28px, 4.6vw, 44px); font-weight:750; letter-spacing:-0.03em; max-width:24ch; }
.page-hero p{ margin-top:14px; color:var(--muted); font-size:clamp(15px, 2vw, 17px); max-width:58ch; }

.prose{ max-width:720px; padding-block:28px clamp(48px, 7vw, 80px); }
.prose h2{ font-size:20px; margin:34px 0 10px; letter-spacing:-0.02em; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin:0 0 14px; color:var(--muted); font-size:15px; line-height:1.65; }
.prose ul{ margin:0 0 14px; padding-left:22px; color:var(--muted); font-size:15px; line-height:1.65; }
.prose li{ margin-bottom:6px; }
.prose strong{ color:var(--text); }
.prose a{ color:var(--accent); font-weight:550; }
.prose .mono{ font-size:13px; }
.prose-updated{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:26px; }

.error-page{
  min-height:55vh; display:grid; place-items:center; text-align:center;
  padding-block:clamp(48px, 9vw, 96px);
}
.error-page .mono{ font-size:15px; color:var(--accent); letter-spacing:.09em; }
.error-page h1{ font-size:clamp(32px, 6vw, 56px); font-weight:750; letter-spacing:-0.035em; margin:10px 0 12px; }
.error-page p{ color:var(--muted); max-width:44ch; margin-inline:auto; }
.error-page .btn{ margin-top:24px; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--surface);
  padding-block:48px 32px;
  margin-top:24px;
}
.footer-grid{
  display:grid; gap:32px;
  grid-template-columns:2fr 1fr 1fr 1fr;
  margin-bottom:40px;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ font-size:13.5px; color:var(--muted); margin-top:12px; max-width:34ch; }
.newsletter{ display:flex; gap:8px; margin-top:16px; max-width:320px; }
.newsletter input{
  flex:1; min-width:0; height:40px; padding:0 12px;
  font:inherit; font-size:13.5px; color:var(--text);
  background:var(--bg); border:1px solid var(--border-strong); border-radius:10px;
}
.newsletter input::placeholder{ color:var(--faint); }
.newsletter-note{ font-size:11.5px; color:var(--muted); margin-top:8px; }
.form-status{ font-size:12.5px; color:var(--accent); margin-top:8px; min-height:1em; }
.footer-col h4{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer-col a{ font-size:14px; color:var(--muted); text-decoration:none; }
.footer-col a:hover{ color:var(--text); }
/* the page's last line — the hero's ruler ticks return along the hairline,
   closing the page with the motif that opened it */
.footer-meta{
  position:relative;
  margin-top:4px; padding-top:22px;
  border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:8px 24px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--muted);
}
.footer-meta::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px 28px);
  opacity:.45; pointer-events:none;
}
.footer-meta__promise{ color:var(--muted); }
@media (max-width:560px){
  .footer-meta{
    flex-direction:column; align-items:center; text-align:center;
    gap:7px; padding-top:20px;
  }
}

/* ==========================================================================
   17. MOTION — calm, purposeful, and fully disabled by prefers-reduced-motion
   (the global reduced-motion rule in §2 kills every animation below, and the
   keyframes animate FROM hidden, so the no-animation fallback is simply the
   final, fully visible state)
   ========================================================================== */

/* cross-page crossfade where supported — pure progressive enhancement */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
}

/* Entrance motion runs ONLY under html.pf-anim, which theme.js sets before
   paint (and only without prefers-reduced-motion). theme.js also removes the
   class if animations demonstrably never ran (stalled compositors, exotic
   embeds) — the no-animation state is always the final, fully visible one. */
@keyframes rise{
  from{ opacity:0; translate:0 14px; }
  to{ opacity:1; translate:0 0; }
}
.pf-anim .hero h1{ animation:rise .55s cubic-bezier(.2,.7,.3,1) both; }
.pf-anim .hero__sub{ animation:rise .55s .08s cubic-bezier(.2,.7,.3,1) both; }
.pf-anim .hero-search{ animation:rise .55s .16s cubic-bezier(.2,.7,.3,1) both; }
.pf-anim .try-row{ animation:rise .55s .24s cubic-bezier(.2,.7,.3,1) both; }
.pf-anim .trust-strip{ animation:rise .55s .3s cubic-bezier(.2,.7,.3,1) both; }
.pf-anim .page-hero h1{ animation:rise .5s cubic-bezier(.2,.7,.3,1) both; }
.pf-anim .page-hero p{ animation:rise .5s .08s cubic-bezier(.2,.7,.3,1) both; }

/* cards settle in whenever a grid (re)renders — doubles as filter feedback */
@keyframes cardIn{
  from{ opacity:0; translate:0 8px; }
  to{ opacity:1; translate:0 0; }
}
.pf-anim .tool-grid > *,
.pf-anim .app-grid > *{ animation:cardIn .3s ease both; }
.pf-anim .tool-grid > *:nth-child(2){ animation-delay:.03s; }
.pf-anim .tool-grid > *:nth-child(3){ animation-delay:.06s; }
.pf-anim .tool-grid > *:nth-child(4){ animation-delay:.09s; }
.pf-anim .tool-grid > *:nth-child(5){ animation-delay:.12s; }
.pf-anim .tool-grid > *:nth-child(6){ animation-delay:.15s; }
.pf-anim .tool-grid > *:nth-child(7){ animation-delay:.18s; }
.pf-anim .tool-grid > *:nth-child(8){ animation-delay:.21s; }
.pf-anim .tool-grid > *:nth-child(n+9){ animation-delay:.24s; }

/* saving a heart pops — only the one you pressed (class set by app.js) */
@keyframes heartPop{
  0%{ scale:1; } 40%{ scale:1.35; } 100%{ scale:1; }
}
.fav-btn.just-saved .icon{ animation:heartPop .32s ease; }

/* back to top — appears after real scrolling, never in the way */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:40;
  display:grid; place-items:center; width:44px; height:44px;
  background:var(--surface); color:var(--muted);
  border:1px solid var(--border-strong); border-radius:999px;
  box-shadow:var(--shadow);
  opacity:0; pointer-events:none; translate:0 10px;
  visibility:hidden; /* with pointer-events:none alone, Tab still reached an invisible button */
  transition:opacity .2s ease, translate .2s ease, color .15s ease, border-color .15s ease, visibility .2s;
}
.to-top .icon{ rotate:-90deg; }
.to-top.is-visible{ opacity:1; pointer-events:auto; translate:0 0; visibility:visible; }
.to-top:hover{ color:var(--accent); border-color:var(--accent-border); }
@media print{ .to-top{ display:none !important; } }

/* ==========================================================================
   17b. GUIDES — the knowledge layer. Long-form pages built on .prose;
   everything here must survive the copy laws and the Genuine Value kill test.
   ========================================================================== */
.guide-meta{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px;
  font-family:var(--mono); font-size:12px; color:var(--muted);
}
.guide-toc{
  margin:26px 0 6px; padding:16px 20px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
}
.guide-toc p{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.guide-toc ol{ margin:0; padding-left:20px; font-size:14px; line-height:1.9; color:var(--muted); }
.guide-toc a{ color:var(--text); text-decoration:none; font-weight:500; }
.guide-toc a:hover{ color:var(--accent); text-decoration:underline; }
.prose h3{ font-size:16.5px; margin:24px 0 8px; letter-spacing:-0.015em; }
.prose table{
  width:100%; border-collapse:collapse; margin:0 0 18px;
  font-size:13.5px; line-height:1.5;
}
.prose th, .prose td{
  text-align:left; padding:8px 12px; border:1px solid var(--border);
  color:var(--muted); vertical-align:top;
}
.prose th{ background:var(--surface-2); color:var(--text); font-weight:620; font-size:12.5px; }
.prose td:first-child{ color:var(--text); }
.prose .table-scroll{ overflow-x:auto; margin:0 0 18px; }
.prose .table-scroll table{ margin:0; min-width:520px; }
.prose blockquote{
  margin:0 0 14px; padding:10px 18px; border-left:3px solid var(--accent);
  background:var(--surface); color:var(--muted); font-size:14.5px; border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.guide-answer{
  padding:16px 20px; margin:22px 0 8px;
  background:var(--accent-soft); border:1px solid var(--accent-border); border-radius:var(--r-md);
}
.guide-answer p{ color:var(--text); font-size:15px; margin:0; }
.guide-tool{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:26px 0; padding:16px 20px;
  background:var(--surface); border:1px solid var(--accent-border); border-radius:var(--r-md);
}
.guide-tool p{ margin:0; flex:1 1 260px; font-size:14px; }
.guide-sources{
  margin-top:34px; padding-top:18px; border-top:1px solid var(--border);
}
.guide-sources h2{ font-size:15px; }
.guide-sources ol{ font-size:13px; line-height:1.7; word-break:break-word; }
.guide-author{
  display:flex; gap:14px; align-items:flex-start;
  margin-top:30px; padding:16px 20px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
}
.guide-author p{ font-size:13.5px; margin:0; }
.guide-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); }
.guide-card{
  display:flex; flex-direction:column; gap:8px;
  padding:20px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--card-edge);
  text-decoration:none; transition:border-color .15s ease, translate .15s ease;
}
.guide-card:hover{ border-color:var(--accent-border); translate:0 -2px; }
.guide-card h3{ font-size:16.5px; letter-spacing:-0.02em; }
.guide-card p{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.guide-card .guide-card__meta{ margin-top:auto; padding-top:8px; font-family:var(--mono); font-size:11.5px; color:var(--muted); }

/* ==========================================================================
   18. PRINT — a tool page should print like a clean worksheet
   ========================================================================== */
@media print{
  .site-header, .site-footer, .sponsor-slot, .fav-btn, .theme-toggle,
  .menu-btn, .skip-link, .cta-grid, .try-row{ display:none !important; }
  body{ background:#fff; color:#000; }
  .tool-card, .tool-canvas{ border-color:#999; box-shadow:none; }
}