/* SkinLately — site stylesheet.
 * Design contract: site/DESIGN.md (style `matcha`, frozen 2026-08-15).
 * Hand-written on purpose: zero external requests (DESIGN.md §7), so no Tailwind,
 * no CDN, no fonts.googleapis.com. Every hex below is copied from the constitution.
 */

/* ------------------------------------------------------------------ fonts */
/* Self-hosted latin subsets. Both SIL Open Font License. */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/nunito-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */
:root {
  --bg: #FDFCF8;          /* rice paper */
  --surface: #FEFEFA;     /* card */
  --fg: #2C2C24;          /* deep loam */
  --primary: #5D7052;     /* moss green */
  --primary-fg: #F3F4F1;  /* pale mist */
  --secondary: #C18C5D;   /* terracotta / clay */
  --accent: #E6DCCD;      /* sand */
  --muted: #F0EBE5;       /* stone */
  --muted-fg: #78786C;    /* dried grass */
  --border: #DED8CF;      /* raw timber */
  --destructive: #A85448; /* burnt sienna */

  --shadow-soft: 0 4px 20px -2px rgba(93, 112, 82, .15);
  --shadow-float: 0 10px 40px -10px rgba(193, 140, 93, .2);
  --shadow-lift: 0 20px 40px -10px rgba(93, 112, 82, .15);

  --r-card: 2rem;
  --r-lg: 1.5rem;
  --r-md: 1rem;

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 68rem;
  --wrap-text: 44rem;   /* long-form measure — ~72 characters */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Paper grain. CRITICAL per the constitution — inline SVG turbulence so it costs
 * no request. Fixed layer, multiply blend, 3% opacity. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); margin-top: 2.4em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); margin-top: 2em; }
h4 { font-size: 1.075rem; margin-top: 1.6em; }
h2:first-child, h3:first-child { margin-top: 0; }

p { margin: 0 0 1.15em; }
strong { font-weight: 700; }

a {
  color: var(--primary);
  text-decoration-color: rgba(93, 112, 82, .35);
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
  transition: color .3s ease, text-decoration-color .3s ease;
}
a:hover { color: var(--secondary); text-decoration-color: var(--secondary); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

ul, ol { margin: 0 0 1.15em; padding-left: 1.35rem; }
li { margin-bottom: .45em; }
li::marker { color: var(--secondary); }

blockquote {
  margin: 1.8em 0;
  padding: 1.2rem 1.6rem;
  border-left: 3px solid var(--secondary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: rgba(230, 220, 205, .38);
  font-style: italic;
  color: var(--fg);
}
blockquote p:last-child { margin-bottom: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--muted);
  padding: .12em .38em;
  border-radius: .4em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 3rem 0;
}

/* ------------------------------------------------------------------ shell */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap-text { width: 100%; max-width: var(--wrap-text); margin: 0 auto; padding: 0 1.25rem; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary); color: var(--primary-fg);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-md) 0; z-index: 10000;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ nav */
.nav-outer { position: sticky; top: .75rem; z-index: 60; padding: .75rem 1.25rem 0; }
.nav {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem .7rem .55rem 1.1rem;
  background: rgba(254, 254, 250, .78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(222, 216, 207, .8);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 800; font-size: 1.08rem;
  color: var(--fg); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--fg); }
.brand-mark {
  width: 1.9rem; height: 1.9rem; flex: none;
  background: var(--primary); color: var(--primary-fg);
  border-radius: 62% 38% 45% 55% / 55% 48% 52% 45%;
  display: grid; place-items: center;
}
.nav-links { display: flex; gap: .2rem; margin-left: auto; align-items: center; }
.nav-links a {
  font-size: .935rem; font-weight: 600; color: var(--muted-fg);
  text-decoration: none; padding: .42rem .72rem; border-radius: 999px;
  transition: background .3s ease, color .3s ease;
}
.nav-links a:hover, .nav-links a[aria-current='page'] {
  background: rgba(93, 112, 82, .1); color: var(--primary);
}
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav { flex-wrap: wrap; border-radius: var(--r-lg); padding: .6rem .9rem; }
  .nav-links {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: .1rem; margin: .5rem 0 .3rem;
  }
  .nav-toggle {
    display: inline-grid; place-items: center; margin-left: auto;
    width: 2.6rem; height: 2.6rem; border-radius: 999px;
    border: 1px solid var(--border); background: transparent;
    color: var(--fg); font-size: 1.1rem; cursor: pointer;
  }
  .nav[data-open='true'] .nav-links { display: flex; }
  .nav-links a { padding: .6rem .8rem; }
}

/* ------------------------------------------------------------- sections */
.sec { padding: 5rem 0; position: relative; }
.sec-tight { padding: 3.25rem 0; }
.sec-muted { background: rgba(240, 235, 229, .55); }
.sec-sand { background: rgba(230, 220, 205, .45); }
.sec-moss { background: var(--primary); color: var(--primary-fg); }
.sec-moss h2, .sec-moss h3 { color: var(--primary-fg); }
.sec-moss a { color: #E6DCCD; text-decoration-color: rgba(230, 220, 205, .5); }
.sec-moss .lede, .sec-moss p { color: rgba(243, 244, 241, .88); }

.eyebrow {
  font-size: .78rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--secondary); margin: 0 0 .7rem;
}
.lede { font-size: 1.18rem; color: var(--muted-fg); line-height: 1.62; }

/* Blobs — ambient colour washes. Decorative only, aria-hidden. */
.blob {
  position: absolute; z-index: 0; pointer-events: none;
  filter: blur(60px); opacity: .5;
}
.blob-a {
  width: 26rem; height: 24rem; top: -6rem; right: -8rem;
  background: rgba(193, 140, 93, .34);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.blob-b {
  width: 22rem; height: 22rem; bottom: -8rem; left: -9rem;
  background: rgba(93, 112, 82, .26);
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
}
.sec > .wrap, .sec > .wrap-text { position: relative; z-index: 1; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3rem; padding: 0 1.9rem;
  border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-soft); }
.btn-primary:hover { color: var(--primary-fg); transform: scale(1.05); box-shadow: 0 6px 24px -4px rgba(93, 112, 82, .25); }
.btn-outline { border-color: var(--secondary); color: var(--secondary); background: transparent; }
.btn-outline:hover { color: var(--secondary); transform: scale(1.05); background: rgba(193, 140, 93, .09); }
.btn-ghost { color: var(--primary); background: transparent; }
.btn-ghost:hover { background: rgba(93, 112, 82, .1); color: var(--primary); }
.btn:active { transform: scale(.95); }
.btn-lg { height: 3.5rem; padding: 0 2.3rem; font-size: 1.06rem; }
.btn-sm { height: 2.6rem; padding: 0 1.3rem; font-size: .93rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* --------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid rgba(222, 216, 207, .6);
  border-radius: var(--r-card);
  padding: 1.9rem;
  box-shadow: var(--shadow-soft);
}
/* Asymmetric radii — the constitution's "cards cycle through 6 patterns". */
.grid > .card:nth-child(6n+1) { border-top-left-radius: 4rem; }
.grid > .card:nth-child(6n+2) { border-bottom-right-radius: 4rem; }
.grid > .card:nth-child(6n+3) { border-top-right-radius: 4rem; }
.grid > .card:nth-child(6n+4) { border-bottom-left-radius: 4rem; }
.grid > .card:nth-child(6n+5) { border-top-left-radius: 3rem; border-bottom-right-radius: 3rem; }
.grid > .card:nth-child(6n+6) { border-top-right-radius: 5rem; }

.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover { color: inherit; transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card-link h3 { color: var(--fg); }

.grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.icon-box {
  width: 3.5rem; height: 3.5rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(93, 112, 82, .1);
  color: var(--primary);
  margin-bottom: 1.1rem;
  transition: background .3s ease, color .3s ease;
}
.card-link:hover .icon-box { background: var(--primary); color: var(--primary-fg); }

/* --------------------------------------------------- the direct answer */
/* First-screen 40–60 word answer. GEO's whole job is to make this quotable. */
.answer {
  background: rgba(230, 220, 205, .5);
  border: 1px solid rgba(222, 216, 207, .8);
  border-radius: var(--r-card);
  border-top-left-radius: 3.5rem;
  padding: 1.7rem 1.9rem;
  margin: 0 0 2.4rem;
  font-size: 1.12rem;
  line-height: 1.62;
}
.answer p:last-child { margin-bottom: 0; }
.answer .eyebrow { color: var(--primary); }

/* ------------------------------------------------------------- callouts */
.note {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  padding: 1.15rem 1.35rem;
  margin: 1.9rem 0;
  font-size: 1rem;
}
.note-warn { border-left-color: var(--destructive); }
.note-clay { border-left-color: var(--secondary); }
.note p:last-child { margin-bottom: 0; }
.note-ico { flex: none; color: var(--primary); margin-top: .18rem; }
.note-warn .note-ico { color: var(--destructive); }
.note-clay .note-ico { color: var(--secondary); }

/* --------------------------------------------------------------- tables */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin: 1.9rem 0;
}
table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 34rem; }
caption {
  caption-side: top; text-align: left; padding: 1rem 1.2rem .3rem;
  font-size: .87rem; color: var(--muted-fg); font-weight: 600;
}
th, td { padding: .8rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
thead th {
  font-family: var(--font-head); font-weight: 700; font-size: .93rem;
  background: rgba(240, 235, 229, .7); white-space: nowrap;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 700; }
tr.is-us { background: rgba(93, 112, 82, .07); }
td .yes { color: var(--primary); font-weight: 700; }
td .no { color: var(--muted-fg); }
td .unk { color: var(--secondary); font-style: italic; }

/* ------------------------------------------------------------------ faq */
.faq { margin: 1.9rem 0; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: .8rem;
  overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 3rem 1.05rem 1.3rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.06rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 1.3rem; top: 1.45rem;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--secondary); border-bottom: 2px solid var(--secondary);
  transform: rotate(45deg); transition: transform .3s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq-body { padding: 0 1.3rem 1.2rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- step list */
.steps { list-style: none; padding: 0; counter-reset: s; margin: 1.9rem 0; }
.steps > li {
  counter-increment: s; position: relative;
  padding: 0 0 1.6rem 3.4rem; margin: 0;
}
.steps > li::before {
  content: counter(s);
  position: absolute; left: 0; top: -.1rem;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  background: rgba(93, 112, 82, .1); color: var(--primary);
  font-family: var(--font-head); font-weight: 800;
  border-radius: 62% 38% 45% 55% / 55% 48% 52% 45%;
}
/* hand-drawn looking connector instead of a straight rule */
.steps > li:not(:last-child)::after {
  content: ''; position: absolute; left: 1.18rem; top: 2.6rem; bottom: .35rem;
  border-left: 2px dashed rgba(193, 140, 93, .45);
}
.steps > li:last-child { padding-bottom: 0; }
.steps h3 { margin: 0 0 .35rem; font-size: 1.12rem; }

/* --------------------------------------------------------------- hero */
.hero { padding: 3.5rem 0 4.5rem; position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.hero h1 { margin-bottom: .5rem; }
.hero .lede { font-size: 1.24rem; max-width: 34rem; }

/* CSS-drawn phone. No screenshot, no image request (DESIGN.md §5). */
.phone {
  width: 15rem; margin: 0 auto;
  background: #26221F; border-radius: 2.6rem; padding: .55rem;
  box-shadow: var(--shadow-float); transform: rotate(-2deg);
}
.phone-screen {
  background: linear-gradient(170deg, #FEFEFA, #F0EBE5);
  border-radius: 2.15rem; padding: 1.4rem 1.1rem 1.6rem; text-align: center;
}
.phone-ring {
  width: 8.2rem; height: 8.2rem; margin: .5rem auto 1rem;
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0 74%, rgba(222, 216, 207, .8) 74% 100%);
  display: grid; place-items: center; position: relative;
}
.phone-ring::after {
  content: ''; position: absolute; inset: .72rem; background: var(--surface); border-radius: 50%;
}
.phone-num {
  position: relative; z-index: 1;
  font-family: var(--font-head); font-size: 2.5rem; font-weight: 800; line-height: 1;
}
.phone-cap { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg); }
.phone-bars { display: grid; gap: .5rem; margin-top: 1.1rem; text-align: left; }
.phone-bar-row { display: grid; grid-template-columns: 5.2rem 1fr; gap: .5rem; align-items: center; font-size: .68rem; color: var(--muted-fg); }
.phone-bar { height: .42rem; border-radius: 999px; background: rgba(222, 216, 207, .9); overflow: hidden; }
.phone-bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.phone-streak {
  margin-top: 1.1rem; font-size: .74rem; font-weight: 700; color: var(--secondary);
}

/* --------------------------------------------------------- app bridge */
.bridge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  border-bottom-right-radius: 4rem;
  padding: 1.8rem;
  box-shadow: var(--shadow-soft);
}
.bridge h3 { margin-top: 0; }
.bridge-status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--secondary); background: rgba(193, 140, 93, .13);
  padding: .3rem .8rem; border-radius: 999px; margin-bottom: .8rem;
}
.bridge-form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.bridge-form input[type='email'] {
  flex: 1 1 14rem; height: 3rem; padding: 0 1.2rem;
  border-radius: 999px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, .55);
  font-family: var(--font-body); font-size: 1rem; color: var(--fg);
}
.bridge-form input[type='email']:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.bridge-fine { font-size: .84rem; color: var(--muted-fg); margin: .7rem 0 0; }

/* ---------------------------------------------------------------- tools */
.tool {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.7rem;
  box-shadow: var(--shadow-soft);
  margin: 2rem 0;
}
.tool-drop {
  border: 2px dashed rgba(193, 140, 93, .55);
  border-radius: var(--r-lg);
  padding: 2.2rem 1.4rem;
  text-align: center;
  background: rgba(240, 235, 229, .45);
  transition: background .3s ease, border-color .3s ease;
}
.tool-drop.is-over { background: rgba(93, 112, 82, .09); border-color: var(--primary); }
.tool-stage { display: grid; gap: 1.2rem; }
.tool-video, .tool-canvas {
  width: 100%; display: block; border-radius: var(--r-lg);
  background: var(--muted); border: 1px solid var(--border);
}
.tool-verdict {
  border-radius: var(--r-lg); padding: 1.15rem 1.35rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  border: 1px solid var(--border); background: var(--muted);
}
.tool-verdict[data-level='good'] { background: rgba(93, 112, 82, .12); border-color: rgba(93, 112, 82, .4); color: var(--primary); }
.tool-verdict[data-level='warn'] { background: rgba(193, 140, 93, .13); border-color: rgba(193, 140, 93, .45); color: #8A6034; }
.tool-verdict[data-level='bad'] { background: rgba(168, 84, 72, .1); border-color: rgba(168, 84, 72, .4); color: var(--destructive); }
.tool-verdict small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .93rem; color: var(--muted-fg); margin-top: .35rem; }

.tool-meter { display: grid; gap: .55rem; margin-top: 1rem; }
.tool-meter-row { display: grid; grid-template-columns: 7.5rem 1fr 3rem; gap: .7rem; align-items: center; font-size: .88rem; }
.tool-meter-bar { height: .55rem; border-radius: 999px; background: var(--muted); overflow: hidden; border: 1px solid var(--border); }
.tool-meter-bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s ease; }

.tool-controls { display: grid; gap: 1rem; margin-top: 1.3rem; }
.tool-field { display: grid; gap: .35rem; }
.tool-field label { font-size: .88rem; font-weight: 700; }
.tool-field input[type='range'] { width: 100%; accent-color: var(--primary); }
.tool-checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.tool-check {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--border); border-radius: 999px;
  padding: .45rem 1rem; font-size: .9rem; font-weight: 600; cursor: pointer;
  background: rgba(255, 255, 255, .55);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.tool-check input { accent-color: var(--primary); }
.tool-check:has(input:checked) { background: rgba(93, 112, 82, .12); border-color: var(--primary); color: var(--primary); }
.tool-privacy {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .87rem; font-weight: 700; color: var(--primary);
  background: rgba(93, 112, 82, .1); border-radius: 999px; padding: .42rem 1rem;
}
.tool-status { font-size: .9rem; color: var(--muted-fg); min-height: 1.4em; margin: .8rem 0 0; }
.tool-hidden { display: none; }
.tool-share {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88rem; width: 100%; min-height: 4.5rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: .8rem 1rem; background: rgba(255, 255, 255, .6); color: var(--fg);
  resize: vertical;
}
.tool-pair { display: grid; gap: 1rem; }
@media (min-width: 640px) { .tool-pair { grid-template-columns: 1fr 1fr; } }
.noscript {
  background: rgba(193, 140, 93, .13); border: 1px solid rgba(193, 140, 93, .45);
  border-radius: var(--r-md); padding: 1rem 1.2rem; margin: 1.5rem 0;
}

/* --------------------------------------------------------------- misc */
.pill-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.2rem 0; }
.pill-list li {
  background: rgba(93, 112, 82, .09); color: var(--primary);
  border-radius: 999px; padding: .35rem .95rem; font-size: .9rem; font-weight: 600; margin: 0;
}

.crumbs { font-size: .87rem; color: var(--muted-fg); margin: 0 0 1.4rem; }
.crumbs a { color: var(--muted-fg); }
.crumbs a:hover { color: var(--primary); }

.meta-line { font-size: .87rem; color: var(--muted-fg); margin: -0.6rem 0 1.8rem; }

.toc {
  background: rgba(240, 235, 229, .6); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.2rem 1.5rem; margin: 0 0 2.4rem;
}
.toc p { font-family: var(--font-head); font-weight: 700; margin: 0 0 .5rem; }
.toc ol { margin: 0; padding-left: 1.2rem; font-size: .96rem; }
.toc li { margin-bottom: .2rem; }

.sources { font-size: .92rem; color: var(--muted-fg); }
.sources li { margin-bottom: .5rem; }

.next-reads { display: grid; gap: 1rem; margin: 2rem 0 0; }
@media (min-width: 720px) { .next-reads { grid-template-columns: 1fr 1fr; } }
.next-read {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem; background: var(--surface);
  transition: transform .3s ease, box-shadow .3s ease;
}
.next-read:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.next-read b { display: block; font-family: var(--font-head); font-size: 1.02rem; }
.next-read span { font-size: .9rem; color: var(--muted-fg); }

/* dimension key used across guides */
.dims { display: grid; gap: .8rem; margin: 1.6rem 0; }
@media (min-width: 640px) { .dims { grid-template-columns: 1fr 1fr; } }
.dim {
  display: flex; gap: .85rem; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: .9rem 1.1rem; background: var(--surface); font-size: .96rem;
}
.dim b { font-family: var(--font-head); }
.dim-dot { width: .75rem; height: .75rem; border-radius: 50%; flex: none; margin-top: .45rem; }

/* --------------------------------------------------------------- footer */
.foot {
  background: var(--primary); color: rgba(243, 244, 241, .85);
  padding: 3.5rem 0 2.2rem; margin-top: 4rem;
  border-top-left-radius: 3rem; border-top-right-radius: 3rem;
}
.foot a { color: rgba(243, 244, 241, .9); text-decoration-color: rgba(243, 244, 241, .35); }
.foot a:hover { color: #fff; text-decoration-color: #fff; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot h4 { color: var(--primary-fg); font-size: .95rem; margin: 0 0 .7rem; }
.foot ul { list-style: none; padding: 0; margin: 0; font-size: .94rem; }
.foot li { margin-bottom: .35rem; }
.foot-brand { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--primary-fg); }
.foot-legal {
  margin-top: 2.4rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(243, 244, 241, .18);
  font-size: .87rem; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center;
}
.foot-disclaimer { font-weight: 700; color: var(--primary-fg); }

/* --------------------------------------------------------- demo banner */
.demo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
  background: var(--secondary); color: #fff;
  font: 700 .82rem/1.35 var(--font-body, system-ui, sans-serif);
  padding: .5rem 1rem; text-align: center;
  display: flex; gap: .7rem; justify-content: center; align-items: center; flex-wrap: wrap;
}
.demo-bar a { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------- print */
@media print {
  body::before, .nav-outer, .bridge, .foot { display: none; }
  body { background: #fff; }
}