/* Goroshi LLC — Dad Packet · Apple-neutral palette, locked per feedback_public_aesthetic_neutral_only.md
 * Round 3 (2026-05-13) — MAX AURA: scroll-progress hairline, sticky TOC desktop, scroll-fade sections,
 *   smooth anchor scroll, fluid h1, golden-ratio stat-value, glass-edge highlight, hero gradient floor,
 *   tabular nums, text-wrap pretty, dark-mode lock, hover lift, focus rings, per-size letter-spacing.
 * Constraints: Apple-neutral B&W palette only · system font stack · vanilla CSS · <50KB bundle.
 */

:root {
  --bg:        #FFFFFF;
  --bg-soft:   #F5F5F7;
  --ink:       #1D1D1F;
  --ink-soft:  #424245;
  --muted:     #6E6E73;
  --faint:     #86868B;
  --hairline:  rgba(0,0,0,0.08);
  --hairline-faint: rgba(0,0,0,0.04);
  --hairline-strong: rgba(0,0,0,0.16);
  --link:      #0066CC;

  /* WHY: --p is the scroll progress (0..1), JS app.js writes it on scroll; CSS reads via var() */
  --p: 0;
}

/* WHY: explicit light-only color-scheme; brand is Apple-light-neutral, dark mode is REFUSED.
 *      meta[name="color-scheme"]=light only is already in HTML; this is the CSS belt-and-suspenders. */
html { color-scheme: light; scroll-behavior: smooth; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern","liga","calt";
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* WHY: defensive overflow-x:hidden prevents any rogue child element from creating horizontal scroll
   *      on narrow viewports. The scroll-progress fixed bar still works (fixed elements ignore body overflow). */
  overflow-x: hidden;
}

main {
  flex: 1;
  max-width: 800px;
  margin: 0 auto;
  /* WHY: safe-area-inset-top respects iPhone notch / Dynamic Island; max() with 80px floor preserves desktop */
  padding: max(80px, env(safe-area-inset-top) + 48px) 32px max(64px, env(safe-area-inset-bottom) + 32px);
  width: 100%;
}

/* =======================================================================
 * SCROLL-PROGRESS HAIRLINE BAR — pinned 2px at top, track + filler
 * Track: rgba(0,0,0,0.04) faint hairline; Filler: --link at scaleX(var(--p))
 * Hidden on print. Hidden on prefers-reduced-motion via opacity (still updates).
 * ======================================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0,0,0,0.04);
  z-index: 999;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--link);
  transform-origin: 0 50%;
  transform: scaleX(var(--p));
  /* WHY: very short transition keeps it from feeling laggy but smooths sub-pixel jitter on scroll */
  transition: transform 0.08s linear;
}
@media print { .scroll-progress { display: none; } }

/* =======================================================================
 * STICKY TABLE OF CONTENTS — desktop ≥960px only, hidden mobile
 * Lives on the left, 180px wide, 11pt muted links, active = link color
 * Apple keynote-talk style: quiet, hairline-only, no decoration
 * ======================================================================= */
.toc {
  display: none;
}
@media (min-width: 960px) {
  .toc {
    display: block;
    position: fixed;
    top: 96px;
    left: max(24px, calc((100vw - 800px) / 2 - 220px));
    width: 180px;
    z-index: 10;
    /* WHY: only shows when the calculated left edge has room; on viewports where main column
     *      hugs the edge (< ~1200px wide), it could overlap — guarded by min-width:1200 below */
  }
}
@media (min-width: 1200px) {
  .toc { display: block; }
}
@media (max-width: 1199px) {
  .toc { display: none; }
}
.toc-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.toc ol {
  list-style: none;
  border-left: 1px solid var(--hairline-faint);
  padding-left: 16px;
}
.toc li {
  margin-bottom: 10px;
  line-height: 1.4;
}
.toc a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0;
  transition: color 0.2s ease;
  display: inline-block;
}
.toc a:hover { color: var(--ink); text-decoration: none; }
.toc a.active {
  color: var(--link);
  font-weight: 500;
}
@media print { .toc { display: none; } }

/* =======================================================================
 * HERO — graded letter-spacing, fluid h1, balanced text-wrap
 * Background gradient: super-subtle 0 → 0.015 alpha 180deg (Apple iPhone-page).
 * ======================================================================= */
.hero {
  text-align: left;
  margin-bottom: 56px;
  /* WHY: subtle vertical gradient (0 → 1.5% black at the bottom) gives the hero "weight" without color.
   *      Apple uses this on iPhone landing — invisible-but-felt floor under the headline cluster.
   *      No negative margin (caused mobile overflow at 375/390) — gradient block stays inside the
   *      main column padding. The visual effect is the same: invisible top → faint floor. */
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.015) 100%);
  padding: 24px 0 32px;
  border-radius: 12px;
}
.hero h1 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  /* WHY: Apple fluid-size technique — clamp(min, viewport-linear, max) grows headline linearly with viewport
   *      instead of step-jumping at media queries. 28→56 across full viewport range. */
  font-size: clamp(28px, calc(2vw + 22px), 56px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--ink);
  margin: 8px 0 16px;
  /* WHY: text-wrap balance distributes line breaks evenly across hero, prevents lonely orphan words */
  text-wrap: balance;
}
.hero .lede {
  font-size: 19px;
  line-height: 1.42;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: -0.005em;
  max-width: 60ch;
}
.hero .hero-date { margin-top: 8px; }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Rules */
.rule {
  /* WHY: 48px balances better under a 48px-cap-height h1 than 40px (Apple iPhone-page convention) */
  width: 48px;
  height: 1px;
  background: var(--hairline);
  border: none;
  margin: 32px 0 0;
}
.rule-faint {
  width: 100%;
  height: 1px;
  background: var(--hairline-faint);
  border: none;
  margin: 56px 0;
}

/* Stats — golden-ratio refined: 28px desktop, 22px mobile, tabular-nums column-align */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 0 0;
  padding: 32px 0;
}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; gap: 32px; padding: 24px 0; }
}
.stat {
  text-align: left;
}
.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.stat-value {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  /* WHY: fluid clamp 22→28 across viewport — stays at 22px on mobile, scales up cleanly to 28px on
   *      ≥800px viewports where the 3-column stat row has breathing room. Prevents iPad-tier wrap
   *      where 28px tabular-nums on "−$331K → +$49K" overflowed a 218px-wide column.
   *      −0.025em sits exactly on §23.3 24-48px band slope. */
  font-size: clamp(22px, calc(1.2vw + 14px), 28px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  /* WHY: white-space:nowrap prevents the "−" alone on one line / "$331K → +$49K" on next on narrow
   *      column widths. The fluid clamp keeps font small enough at tight viewports that this fits. */
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* WHY: on mobile stacked single-column, the stat-value column has the full main width to work with —
   *      no need for nowrap, and the fluid clamp returns to 22px at this viewport range. */
  .stat-value { white-space: normal; }
}
.stat-foot {
  font-size: 12px;
  /* WHY: was --faint (#86868B = 3.62:1 on white) which fails WCAG 2.2 AA 4.5:1 for normal text.
   *      Swap to --muted (#6E6E73 = 5.07:1 on white) — passes AA. Locked palette unchanged. */
  color: var(--muted);
}

/* Blocks */
.block {
  margin: 0;
  /* WHY: scroll-margin-top accounts for the 2px progress bar + breathing room above smooth-scrolled anchors */
  scroll-margin-top: 80px;
}
.block h2 {
  /* WHY: same scroll-margin-top on h2 itself in case anchor targets the heading (defensive) */
  scroll-margin-top: 80px;
}
.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.block h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.009em;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 16px;
  /* WHY: text-wrap balance prevents "lease" or "SunVest" orphaning on h2 lines */
  text-wrap: balance;
}
@media (max-width: 640px) { .block h2 { font-size: 22px; } }

/* WHY: h3 styling added per Round 3 letter-spacing audit (-0.006em sits on §23.3 24-48px band).
 *      Currently no h3 in the document, but the rule is here for any future section. */
h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.006em;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 12px;
  scroll-margin-top: 80px;
}

.body {
  font-size: 17px;
  line-height: 1.52;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: 12px;
  /* WHY: text-wrap pretty enables Chrome 117+ paragraph-level hyphenation + orphan-prevention.
   *      Falls back gracefully to default wrapping on Safari (which doesn't support it yet). */
  text-wrap: pretty;
}
.body strong { color: var(--ink); font-weight: 600; }
.small-note {
  font-size: 14px;
  color: var(--muted);
}

/* Doc list */
.doclist {
  list-style: none;
  counter-reset: docnum;
  margin: 24px 0 0;
}
.doclist li {
  counter-increment: docnum;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-faint);
  display: flex;
  align-items: baseline;
  gap: 16px;
  /* WHY: transition for hover state; transform applied via translate not via shorthand to avoid
   *      conflict with the scroll-fade transform on .block (which applies to parent, not <li>). */
  transition: border-color 0.2s ease;
}
.doclist li::before {
  content: counter(docnum, decimal-leading-zero);
  font-size: 12px;
  font-weight: 500;
  /* WHY: a11y contrast — see .stat-foot above; --muted clears AA 4.5:1 on white background */
  color: var(--muted);
  letter-spacing: 0.04em;
  min-width: 24px;
  font-variant-numeric: tabular-nums;
}
.doclist li:last-child { border-bottom: none; }
.doclist a {
  color: var(--link);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.003em;
  flex-shrink: 0;
  /* WHY: subtle 1px lift on hover; 0.15s ease per §23.3 hover-state convention */
  transition: transform 0.15s ease, color 0.2s ease;
  display: inline-block;
}
.doclist a:hover { text-decoration: underline; transform: translateY(-1px); }
.doclist .meta {
  font-size: 13px;
  /* WHY: a11y contrast — --faint failed AA 4.5:1; --muted reads 5.07:1 on white, 4.66:1 on bg-soft */
  color: var(--muted);
  margin-left: auto;
  text-align: right;
}
@media (max-width: 640px) {
  .doclist li { flex-wrap: wrap; gap: 8px; }
  .doclist .meta { margin-left: 0; width: 100%; text-align: left; }
}

/* Highlight section — glass-edge inner hairline + bg-soft surface */
.highlight {
  padding: 28px 28px 28px;
  background: var(--bg-soft);
  border-radius: 18px;
  margin: 8px 0;
  /* WHY: inset 1px hairline shadow defines the card edge without a heavy border — Apple keynote-card recipe.
   *      The faint inner shadow makes the panel feel like a "glass card" sitting on the page surface. */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.highlight .kicker { color: var(--ink); }
.cta-list {
  list-style: none;
  margin: 16px 0 0;
}
.cta-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-faint);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.cta-list li:last-child { border-bottom: none; }
.cta-list a {
  color: var(--link);
  font-size: 17px;
  font-weight: 500;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.2s ease;
  display: inline-block;
}
.cta-list a:hover { transform: translateY(-1px); text-decoration: underline; }
.cta-list a strong { font-weight: 600; }
.cta-list .meta {
  font-size: 13px;
  /* WHY: a11y contrast — --faint on --bg-soft was 3.32:1 (FAIL); --muted on --bg-soft is 4.66:1 (PASS AA) */
  color: var(--muted);
  margin-left: auto;
  text-align: right;
}
@media (max-width: 640px) {
  .cta-list li { flex-wrap: wrap; gap: 8px; }
  .cta-list .meta { margin-left: 0; width: 100%; text-align: left; }
}

/* Numbered list */
.numbered {
  list-style-position: outside;
  margin: 8px 0 0 24px;
}
.numbered li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 12px;
  max-width: 60ch;
  text-wrap: pretty;
}

/* Bulleted */
.bulleted {
  list-style-position: outside;
  margin: 8px 0 0 24px;
}
.bulleted li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 12px;
  max-width: 60ch;
  text-wrap: pretty;
}

/* Links general */
a {
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
/* WHY: keyboard-only focus ring per Apple HIG / WCAG; :focus-visible avoids ring on mouse-click */
a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 4px;
}
/* WHY: legacy :focus ring kept as fallback for browsers without :focus-visible (older Safari) */
a:focus:not(:focus-visible) {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Footer */
footer {
  /* WHY: safe-area-inset-bottom respects iPhone home-indicator; 56px floor preserves desktop */
  padding: 40px 32px max(56px, env(safe-area-inset-bottom) + 32px);
  text-align: center;
  border-top: 1px solid var(--hairline);
  /* WHY: 80px sits on 8-grid cleanly (was 64 + 12 final-li margin = awkward 76 visual gap) */
  margin-top: 80px;
}
footer p {
  font-size: 12px;
  /* WHY: a11y contrast — --faint at 12px was 3.62:1 (FAIL AA normal text); --muted is 5.07:1 (PASS) */
  color: var(--muted);
  letter-spacing: 0;
  max-width: 60ch;
  margin: 0 auto 6px;
  line-height: 1.5;
}
.footer-small { font-size: 11px; }

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  position: fixed;
  left: 24px;
  top: 24px;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 16px;
  font-size: 14px;
  z-index: 1000;
  text-decoration: none;
  border-radius: 6px;
}

::selection { background: #1D1D1F; color: #FFFFFF; }

/* =======================================================================
 * REPORT BUG button + dialog — Apple-keynote tier
 * Floating bottom-right, blue accent, opens a centered modal.
 * Submission: builds a mailto: URL + opens user's mail app.
 * Locked palette: white / ink / muted / faint / link / hairline.
 * ======================================================================= */

.report-bug-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--link);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.003em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 102, 204, 0.18), 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s ease,
              background 0.18s ease;
  /* WHY: env(safe-area-inset-bottom) keeps button above iOS home indicator on iPhone */
  bottom: max(24px, env(safe-area-inset-bottom) + 16px);
  right: max(24px, env(safe-area-inset-right) + 16px);
}
.report-bug-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 102, 204, 0.24), 0 2px 6px rgba(0, 0, 0, 0.08);
  background: #005bb5;
}
.report-bug-btn:active { transform: translateY(0); }
.report-bug-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.24),
              0 0 0 1px var(--link),
              0 4px 14px rgba(0, 102, 204, 0.18);
}
.report-bug-btn svg { flex-shrink: 0; opacity: 0.95; }
@media (max-width: 480px) {
  .report-bug-btn {
    padding: 12px 16px;
    font-size: 14px;
    bottom: max(16px, env(safe-area-inset-bottom) + 12px);
    right: max(16px, env(safe-area-inset-right) + 12px);
  }
  .report-bug-btn span { display: inline; }
}
@media print { .report-bug-btn { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .report-bug-btn { transition: none; }
  .report-bug-btn:hover { transform: none; }
}

/* Dialog */
.report-bug-dialog {
  width: min(92vw, 480px);
  padding: 0;
  border: none;
  border-radius: 18px;
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
  font-family: inherit;
}
.report-bug-dialog::backdrop {
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.report-bug-dialog[open] {
  animation: dialog-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dialog-in {
  from { transform: translateY(8px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0)    scale(1);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .report-bug-dialog[open] { animation: none; }
}
.report-bug-dialog form {
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
}
.report-bug-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  padding: 0;
  border: none;
}
.report-bug-dialog h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  font-size: 20px;
  letter-spacing: -0.006em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.dialog-close {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.dialog-close:hover { background: var(--bg-soft); color: var(--ink); }
.dialog-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.24), 0 0 0 1px var(--link);
}
.dialog-lede {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 16px;
}
.report-bug-dialog label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 6px;
  display: block;
}
.report-bug-dialog input[type="text"],
.report-bug-dialog textarea {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.report-bug-dialog input[type="text"]:focus,
.report-bug-dialog textarea:focus {
  outline: none;
  border-color: var(--link);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.14);
}
.report-bug-dialog textarea { min-height: 96px; }
.report-bug-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  border: none;
}
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.003em;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-primary {
  background: var(--link);
  color: #FFFFFF;
}
.btn-primary:hover { background: #005bb5; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.24), 0 0 0 1px var(--link);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-secondary:hover { background: var(--bg-soft); border-color: var(--hairline-strong); }
.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.24), 0 0 0 1px var(--link);
}
.dialog-foot {
  font-size: 11px;
  color: var(--faint);
  text-align: center;
  margin: 16px 0 0;
  line-height: 1.5;
}
.dialog-foot strong { color: var(--muted); font-weight: 600; }
@media (max-width: 480px) {
  .report-bug-dialog form { padding: 20px 18px 18px; }
  .report-bug-dialog h2 { font-size: 18px; }
  .report-bug-dialog footer { flex-direction: column-reverse; gap: 8px; }
  .report-bug-dialog .btn { width: 100%; padding: 12px 18px; font-size: 15px; }
}

/* Mobile right-edge clipping nuclear fix (post-deploy v2026_05_13_19xx) — force break-anywhere
 * on every text element + reduce all-caps letter-spacing at ≤480 to prevent kicker / eyebrow
 * overrun. Per CLAUDE.md §23.2 Rule 11 verification: tested at 375 / 390 / 414 / 480 viewports. */
@media (max-width: 480px) {
  .eyebrow, .kicker, .hero .lede, .hero h1, .block h2,
  .body, .small-note,
  .doclist a, .doclist .meta, .doclist li,
  .cta-list a, .cta-list .meta, .cta-list li,
  .numbered li, .bulleted li,
  .stat-label, .stat-value, .stat-foot,
  footer p {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100%;
  }
  /* All-caps need tighter tracking on small screens — wide spacing causes overflow */
  .eyebrow, .kicker, .stat-label { letter-spacing: 0.04em !important; }
  /* Long URLs / filenames in body lines need to wrap mid-word */
  .body a, .small-note a, .doclist a, .cta-list a { word-break: break-all; }
}
@media (max-width: 400px) {
  .eyebrow, .kicker, .stat-label { letter-spacing: 0.02em !important; font-size: 10px !important; }
  .block h2 { font-size: 17px !important; letter-spacing: -0.005em; }
  .stat-value { font-size: 20px !important; }
}

/* =======================================================================
 * SCROLL-FADE — REMOVED Round 3 final pass.
 * Reason: scroll-driven opacity/transform breaks static screenshot capture, PDF print,
 * screen-reader linearization, and any non-scrolling rendering context. The dad-packet
 * site is a document-tier surface (not a marketing hero) — sections should always be
 * fully visible and readable. Apple's own document pages (apple.com/business/small-business)
 * don't use scroll-fade on body content for the same reason. Hover lifts + scroll-progress
 * + smooth-scroll-to-anchor + sticky TOC carry enough motion polish without breaking
 * static rendering. Decision per CLAUDE.md §23.2 Rule 11 (render-and-review) — the fade
 * was failing the static-render check on full-page screenshots.
 * ======================================================================= */

/* ===================================================================
 * MOBILE LAYER — iPhone polish (per visual audit Round 2, 2026-05-13)
 * Layered breakpoints: 640 / 480 / 420 / 380 (375px iPhone SE/12mini)
 * Apple HIG: 44pt tap targets, safe-area insets, prefers-reduced-motion
 * §23.3: per-size letter-spacing, 8pt grid spacing, balanced text-wrap
 * =================================================================== */

/* Tier 1 (≤640px) — tablet / phablet baseline */
@media (max-width: 640px) {
  main {
    /* WHY: safe-area-inset respects iPhone notch; 20px horizontal buys breathing room over 16/18 */
    padding: max(56px, env(safe-area-inset-top) + 32px) 20px max(48px, env(safe-area-inset-bottom) + 24px);
  }
  /* WHY: break-word respects whole words first, breaks mid-word ONLY when no other choice
   *      (avoids "QC" + "ELLS" mid-word break that anywhere produces). Prose content uses this. */
  .eyebrow, .kicker, .hero .lede, .block h2, .body,
  .numbered li, .bulleted li, footer p {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
  /* WHY: small-note / meta lines carry filenames + dollar figures with no break opportunities —
   *      use anywhere to let them wrap at any char rather than overflow */
  .small-note, .doclist li, .doclist .meta, .cta-list li, .cta-list .meta {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  .doclist a, .cta-list a { white-space: normal; word-break: normal; overflow-wrap: break-word; }
  /* WHY: doclist meta gets tighter font + wraps below link on its own line */
  .doclist li { flex-wrap: wrap; gap: 6px 12px; padding: 14px 0; }
  .doclist .meta { font-size: 12px; line-height: 1.4; }
  .cta-list li { flex-wrap: wrap; gap: 8px; padding: 14px 0; }
  .highlight { padding: 24px 20px; border-radius: 16px; }
  /* WHY: stats stack to single column on small viewports; tighter gap reads denser on phone */
  .stats { gap: 20px; padding: 24px 0; }
  /* WHY: mobile stat-value drops to 22px per Round 3 (was 24 in Round 2); tabular-nums kept */
  .stat-value { font-size: 22px; letter-spacing: -0.022em; }
}

/* Tier 2 (≤480px) — iPhone Plus / Pro Max class (430px iPhone 16 Pro Max) */
@media (max-width: 480px) {
  main {
    padding: max(48px, env(safe-area-inset-top) + 24px) 18px max(40px, env(safe-area-inset-bottom) + 20px);
  }
  .hero { margin-bottom: 48px; padding: 20px 0 28px; }
  .hero .lede { font-size: 17px; line-height: 1.4; }
  .highlight { padding: 20px 18px; border-radius: 14px; }
  .cta-list a { font-size: 16px; }
  .doclist .meta, .cta-list .meta { font-size: 12px; }
  /* WHY: Apple HIG ≥44pt tap target — padding bumped from 16 to 14+30=44 for doclist; min-height for inline links */
  .doclist a, .cta-list a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
  }
  footer { padding: 32px 20px max(40px, env(safe-area-inset-bottom) + 24px); margin-top: 64px; }
}

/* Tier 3 (≤420px) — iPhone 14/15/16 base (390px) */
@media (max-width: 420px) {
  /* WHY: h2 at 19px prevents "25-year lease" + "from SunVest" clipping at 375-390px viewports */
  .block h2 { font-size: 19px; line-height: 1.16; }
  .stat-value { font-size: 22px; }
  .eyebrow, .kicker { letter-spacing: 0.04em; }
}

/* Tier 4 (≤380px) — iPhone SE 2nd gen / iPhone 12 mini at 375px (the tightest target) */
@media (max-width: 380px) {
  main {
    padding: max(44px, env(safe-area-inset-top) + 20px) 16px max(36px, env(safe-area-inset-bottom) + 20px);
  }
  /* WHY: hero h1 fluid clamp already handles 26px at 375 viewport — no override needed */
  .eyebrow { letter-spacing: 0.03em; font-size: 11px; }
  .hero .lede { font-size: 16px; }
  /* WHY: h2 at 18px gives full headline render at 375px (verified against "10 MW battery storage, 25-year lease") */
  .block h2 { font-size: 18px; line-height: 1.18; }
  .body { font-size: 16px; line-height: 1.5; }
  .small-note { font-size: 13px; }
  .stat-value { font-size: 21px; }
  .stat-label { font-size: 10px; letter-spacing: 0.05em; }
  .kicker { font-size: 10px; letter-spacing: 0.06em; }
  .highlight { padding: 18px 16px; border-radius: 12px; }
  /* WHY: doclist meta drops to 11px on tiny viewports — still legible, prevents secondary-line overflow */
  .doclist .meta, .cta-list .meta { font-size: 11px; }
  .numbered, .bulleted { margin-left: 20px; }
  .numbered li, .bulleted li { font-size: 15px; line-height: 1.5; }
}

/* Accessibility — reduced motion (Apple HIG / WCAG 2.1) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  /* WHY: scroll-progress bar still updates (it's a status indicator, not motion) but no easing */
  .scroll-progress-bar { transition: none !important; }
  /* WHY: hover lift disabled — translateY would be a motion cue */
  .doclist a:hover, .cta-list a:hover { transform: none !important; }
}