/* site.css — the few components the article pages need on top of the approved app.css (each logged in DECISIONS.md).
   Values come from tokens.css; nothing here changes an existing app.css component. */

.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:12px;z-index:60;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:var(--r-banner);box-shadow:0 0 0 2px var(--accent)}

/* Article hero: intro → tool → app CTA → image (mobile); intro | image, then tool full width (desktop) */
.hero{padding:18px 0 40px}
.hero-a{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;grid-template-areas:"intro" "ans" "tool" "cta" "fig"}
.h-intro{grid-area:intro;min-width:0}.h-ans{grid-area:ans;min-width:0}.h-ans .answer{margin-top:0}
/* /message-writer/: same order as the approved home — writer first on phones, answer under it (answer stays first in the HTML) */
.t-tool-writer .hero-a{grid-template-areas:"intro" "tool" "ans" "cta" "fig"}.h-tool{grid-area:tool;min-width:0}.hero-cta{grid-area:cta}.h-fig{grid-area:fig;min-width:0}
.hero h1{font-size:clamp(28px,7.4vw,50px);max-width:900px}
.hero .meta{margin:12px 0 0}
@media (min-width:980px){
  .hero{padding:36px 0 56px}
  .hero-a{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:52px;row-gap:28px;grid-template-areas:"intro fig" "ans fig" "tool tool" "cta cta";grid-template-rows:auto 1fr;align-items:start}
  .t-tool-writer .hero-a{grid-template-areas:"intro fig" "ans fig" "tool tool" "cta cta"}
  .h-fig{position:relative;top:6px}
}
@media (max-width:979px){.has-tool .h-ans .toc{display:none}}
/* pages without a picture (owner rule: /methodology/, /corrections/) */
@media (min-width:980px){.no-fig .hero-a{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "ans" "tool" "cta"}}

/* Answer box — the page's answer in its first sentences, right under the H1 */
.answer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px 17px;margin:18px 0 0;max-width:720px}
.answer .eyebrow{margin:0 0 6px}
.answer p{margin:0;font-size:18px;line-height:1.55;color:var(--ink)}
.answer.lead{margin:16px 0 26px}
@media (max-width:600px){.answer{padding:14px 16px 15px;margin-top:14px}.answer p{font-size:17px;line-height:1.5}}

.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.toc a{display:inline-flex;align-items:center;min-height:40px;padding:7px 14px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;font:500 15px/1.2 var(--font-sans)}
.toc a:hover{box-shadow:inset 0 0 0 1px var(--line-input)}

/* App CTA right after a tool's result */
.hero-cta{display:flex;flex-direction:column;gap:10px;max-width:var(--col)}
.hero-cta .btn,.appcta .btn{line-height:1.25;padding:10px 20px;text-align:center;min-height:56px}
.hero-cta p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.hero-cta .free{color:var(--muted)}
@media (min-width:980px){.hero-cta{flex-direction:row;align-items:center;gap:22px;max-width:none}.hero-cta .btn{flex:none}.hero-cta p{max-width:560px}}

/* Image slot. Cream panel with two soft message bubbles, so the page looks finished before the picture arrives. */
figure.ill{margin:0;position:relative;aspect-ratio:1600/1067;border-radius:var(--r-big);overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(55% 65% at 72% 28%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 72%),
             radial-gradient(45% 55% at 18% 92%,rgba(255,186,140,.26),transparent 72%),var(--panel-cream,var(--surface))}
figure.ill::before,figure.ill::after{content:"";position:absolute;border-radius:26px 26px 26px 8px}
figure.ill::before{left:16%;top:27%;width:38%;height:21%;background:var(--brand-gradient);box-shadow:0 18px 40px -12px rgba(7,116,76,.45)}
figure.ill::after{right:15%;top:51%;width:33%;height:18%;border-radius:26px 26px 8px 26px;background:var(--surface);box-shadow:0 16px 36px -14px rgba(10,22,40,.28)}
figure.ill img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;color:transparent}
.prose figure.ill{margin:28px 0;max-width:var(--col)}

/* Body sections */
section.alt{background:var(--surface)}
section.alt .tbl-wrap,section.alt .answer,section.alt .toc a{background:var(--bg)}
section.alt .tbl thead th{background:var(--raised)}
.prose>*{max-width:var(--col)}
.prose>h2{max-width:880px;margin:0 0 20px}
.prose>h3{margin:34px 0 10px}
.prose>.tbl-wrap,.prose>.appcta{max-width:none}
.prose>.tbl-wrap{margin:22px 0 18px}
.h-tool>h2{margin:0 0 18px}.h-tool>.tbl-wrap{margin:0 0 16px}.h-tool>p{max-width:var(--col)}
.prose>.note{margin:18px 0}
.prose>.ledger{margin:4px 0 22px}
.prose .steps .nm,.prose .checklist .nm{font-weight:400;color:var(--ink-2);line-height:1.5}
.prose .steps .nm strong,.prose .checklist .nm strong{color:var(--ink);font-weight:600}
.prose .steps>li,.prose .checklist>li{align-items:flex-start;padding:14px 0}
.prose .steps .av{margin-top:-2px}
.checklist .ck{margin-top:2px}
ul.bul{padding-left:22px;margin:0 0 1.1em}
ul.bul>li{margin:0 0 9px}
ul.bul>li::marker{color:var(--accent)}
.prose code{font:500 .9em/1 var(--font-mono);background:var(--raised);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}

/* Tables: scroll sideways inside their own box on phones (never the page) */
.tbl[data-cols="3"]{min-width:480px}.tbl[data-cols="4"]{min-width:620px}.tbl[data-cols="5"]{min-width:760px}
.tbl[data-cols="6"]{min-width:880px}.tbl[data-cols="7"]{min-width:980px}.tbl[data-cols="8"],.tbl[data-cols="9"]{min-width:1100px}
.tbl td,.tbl th{overflow-wrap:break-word}
.tbl-wrap:focus-visible{outline-offset:2px}

/* Green app card inside an article (the paragraph that carries the App Store link) */
.appcta{border-radius:var(--r-big);margin:30px 0;padding:26px 22px}
.appcta-in{max-width:var(--col)}
.appcta p{color:var(--on-green-2);margin:0 0 18px}
.appcta .eyebrow{color:var(--on-green-2);opacity:.9}
.appcta .btn-caption{color:var(--on-green-2);text-align:left;margin-top:12px}
.panel-green .merge{color:#fff;background:rgba(255,255,255,.16);box-shadow:none}
@media (min-width:900px){.appcta{padding:34px 36px}}

/* FAQ */
.faq details p{max-width:var(--col)}

.lead-404{font-size:18px;margin:18px 0 22px}

/* ---- K3 fix 6 Nov 2026 (items 10-12): first screen at 390x844 ---- */
@media (max-width:979px){
  /* writer embedded in an article hero: its parts join the hero grid so the answer can sit between preview and form */
  .hero-a .h-tool:has(.tool-writer),.hero-a .tool-writer{display:contents}
  .hero-a .h-occ{grid-area:occ;min-width:0}.hero-a .stage{grid-area:stage;min-width:0}.hero-a .h-form{grid-area:form;min-width:0}.hero-a .tool-rsvp-mini{grid-area:mini;min-width:0}
  .hero-a:has(.tool-writer){grid-template-areas:"intro" "ans" "stage" "occ" "mini" "form" "cta" "fig";gap:14px}
  .t-tool-writer .hero-a{grid-template-areas:"intro" "occ" "stage" "ans" "form" "cta" "fig"}
  /* compact preview: a message card, not a full phone (home keeps the phone) */
  .hero-a .stage{padding:10px;border-radius:22px}
  .hero-a .stage .phone{width:100%;padding:0;border-radius:16px;margin:0;background:none;box-shadow:none}
  .hero-a .stage .phone .screen{border-radius:16px;padding:0 0 12px;min-height:0}
  .hero-a .stage .sbar,.hero-a .stage .island,.hero-a .stage .navrow{display:none}
  .hero-a .stage .body{padding:10px 12px 0}
  .hero-a .stage .preview{font-size:15.5px;padding:10px 12px}
  .hero-a .stage #w-count small{display:none}
  .hero-a .h-occ select{min-height:48px;font-size:17px}
  .hero-a .h-occ .eyebrow{display:none}
  .hero .meta{margin-bottom:0}
}
@media (max-width:600px){.hero .answer p{font-size:16px;line-height:1.48}.hero .answer{padding:12px 14px 13px}.hero h1{margin-bottom:6px}}
/* long source URLs never widen the page (item 14) */
.sources a,.sources li,.prose a,.gc-foot,.tool-send-reminder a{overflow-wrap:anywhere}

@media (max-width:979px){.hero-a{gap:14px}}

/* GEO pass 6 Nov 2026: footer app line (same words as /facts/) + the "at a glance" table */
.foot-app{font-size:14px;line-height:1.45;color:var(--ink-2);margin:10px 0 0;max-width:64ch}
.tbl-wrap.glance th[scope=row]{width:8.5em;white-space:normal}
@media (max-width:979px){.tbl-wrap.glance th[scope=row]{width:6.5em}}

/* ---- K3 final fix 7 Nov 2026 (item 12): first screen of the 4 tool templates KORAY failed (checker, RSVP, library, compare) — phones only, these 4 pages only; nothing hidden, spacing tightened ---- */
@media (max-width:979px){
  :is(.t-tool-checker,.t-tool-rsvp,.t-library,.t-compare-apps) .hero{padding-top:10px}
  :is(.t-tool-checker,.t-tool-rsvp,.t-library,.t-compare-apps) .crumbs{padding-top:6px}
  :is(.t-tool-checker,.t-tool-rsvp,.t-library,.t-compare-apps) .crumbs li{min-height:26px}
  :is(.t-tool-checker,.t-tool-rsvp,.t-library,.t-compare-apps) .hero .meta{margin-top:8px}
  :is(.t-tool-checker,.t-tool-rsvp,.t-library,.t-compare-apps) .hero-a{gap:10px}
  :is(.t-tool-checker,.t-tool-rsvp,.t-library,.t-compare-apps) .hero .answer{padding:10px 14px 11px}
  :is(.t-tool-checker,.t-tool-rsvp,.t-library,.t-compare-apps) .answer .eyebrow{margin-bottom:4px}
  .t-compare-apps .hero-a{gap:8px}
  .t-compare-apps .fit-note p{line-height:1.42}
  .t-compare-apps .hero .answer{padding:9px 14px 10px}
}
/* phones: the trail ends at the parent; the current page's name (truncated with "…" here) is the H1 right below. BreadcrumbList JSON-LD unchanged */
@media (max-width:600px){:is(.t-tool-checker,.t-tool-rsvp,.t-library,.t-compare-apps) .crumbs [aria-current]{display:none}}