/* Shared stylesheet for content pages (calculator, guides).
   Same craft language as the homepage: cream paper, white sticker cards,
   warm ink, orange accent, blue rope. No external fonts/CDNs — self-hosted
   Fredoka/Nunito below. */

@font-face {
  font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/fredoka-latin.27d49d7c.woff2") format("woff2");
  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: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/fredoka-latin-ext.337681f6.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/nunito-latin.20fc9b6f.woff2") format("woff2");
  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"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/nunito-latin-ext.511ce967.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/nunito-cyrillic.b63651df.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/nunito-latin.20fc9b6f.woff2") format("woff2");
  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"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/nunito-latin-ext.511ce967.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/nunito-cyrillic.b63651df.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/nunito-latin.20fc9b6f.woff2") format("woff2");
  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"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/nunito-latin-ext.511ce967.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/nunito-cyrillic.b63651df.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --paper: #FFF6E9; --paper2: #FDEBD2; --card: #FFFFFF;
  --ink: #3A2A1E; --muted: #7C6A59; --line: rgba(58,42,30,.14);
  --orange: #E8631C; --orange-deep: #C4521A; --orange-soft: rgba(232,99,28,.1);
  --rope: #2F8FD6; --rope-soft: rgba(47,143,214,.12);
  --shadow: 0 2px 0 rgba(58,42,30,.06), 0 14px 34px rgba(58,42,30,.10);
  --good: #2F8F5C; --bad: #C4521A;
  /* Deeper fills for white-on-brand-color text (CTA button, selected segment,
     pills): the plain --orange/--rope tokens fail WCAG AA at ~16.8px with
     white text (2.98-3.49:1). These reach >=4.5:1 while staying recognisably
     orange/blue. Same values in both themes since the ratio only depends on
     the fill vs. white, not the page background. */
  --cta-bg: #B8480F; --pill-bg: #1E6FA6;
}
:root[data-theme="dark"] {
  --paper: #221812; --paper2: #2B1F16; --card: #2F2318;
  --ink: #F7EEDF; --muted: #C6B198; --line: rgba(247,238,223,.14);
  --orange: #EE7130; --orange-deep: #F5975F; --orange-soft: rgba(238,113,48,.14);
  --rope: #5CA9E2; --rope-soft: rgba(92,169,226,.16);
  --shadow: 0 2px 0 rgba(0,0,0,.18), 0 14px 34px rgba(0,0,0,.32);
  --good: #5FBE8B; --bad: #F5975F;
  --cta-bg: #B8480F; --pill-bg: #1E6FA6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #221812; --paper2: #2B1F16; --card: #2F2318;
    --ink: #F7EEDF; --muted: #C6B198; --line: rgba(247,238,223,.14);
    --orange: #EE7130; --orange-deep: #F5975F; --orange-soft: rgba(238,113,48,.14);
    --rope: #5CA9E2; --rope-soft: rgba(92,169,226,.16);
    --shadow: 0 2px 0 rgba(0,0,0,.18), 0 14px 34px rgba(0,0,0,.32);
    --good: #5FBE8B; --bad: #F5975F;
    --cta-bg: #B8480F; --pill-bg: #1E6FA6;
  }
}

* { box-sizing: border-box; margin: 0; min-width: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; background: var(--paper); }
body {
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--paper); line-height: 1.65;
}
h1, h2, h3 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; letter-spacing: .2px; line-height: 1.18; }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 14px; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 40px 0 14px; }
h3 { font-size: 1.15rem; margin: 26px 0 8px; }
p { margin: 0 0 14px; }
a { color: var(--orange-deep); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.3em; margin: 0 0 14px; }
li { margin-bottom: 6px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.prose { max-width: 720px; }
.prose p, .prose li { font-size: 1.03rem; }
.muted { color: var(--muted); }

/* header */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 22px 0; gap: 10px 16px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.logo img { width: 40px; height: 40px; }
.logo b { font-family: "Fredoka", sans-serif; font-size: 1.2rem; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: .95rem; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--orange); }

/* breadcrumbs */
.breadcrumbs { font-size: .88rem; color: var(--muted); font-weight: 700; padding: 0 0 18px; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--orange); text-decoration: underline; }
.breadcrumbs span[aria-current] { color: var(--ink); }
.breadcrumbs .sep { margin: 0 6px; opacity: .5; }

/* page hero */
.page-hero { padding: 8px 0 32px; }
.eyebrow { display: inline-block; font-weight: 800; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange-deep); background: var(--orange-soft);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.dek { color: var(--muted); font-size: 1.1rem; font-weight: 600; max-width: 62ch; }
.answer {
  background: var(--card); border: 3px solid var(--ink); border-radius: 22px; padding: 22px 26px;
  box-shadow: var(--shadow); margin: 18px 0 30px; font-size: 1.08rem; font-weight: 600;
}
.answer b { color: var(--orange-deep); }

/* content sections */
main { position: relative; z-index: 1; }
article > section, .content-section { padding: 0 0 4px; }
.rule { border: none; border-top: 2px dashed var(--line); margin: 40px 0; }

/* cards (guides hub) */
.card-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin: 26px 0 10px; }
@media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } }
.card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--card); border: 3px solid var(--ink); border-radius: 22px; padding: 22px;
  box-shadow: var(--shadow); transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.card:hover { transform: translateY(-3px); }
.card .eyebrow { margin-bottom: 10px; }
.card h3 { margin: 0 0 8px; font-size: 1.2rem; }
.card p { color: var(--muted); font-size: .95rem; margin: 0; }

/* tables */
/* Table captions live outside the horizontally-scrolling container (as a
   sibling <p> tied to the table via aria-labelledby) so the caption text
   wraps within the actual viewport width and stays fully visible without
   requiring a horizontal swipe — only the data columns scroll. */
.table-caption { text-align: left; font-weight: 700; font-family: "Fredoka", sans-serif; margin: 0 0 8px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0 26px; border-radius: 16px; border: 2px solid var(--line); }
table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .95rem; background: var(--card); }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { font-family: "Fredoka", sans-serif; font-weight: 700; background: var(--paper2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--orange-soft); }
caption { text-align: left; font-weight: 700; padding: 10px 14px; font-family: "Fredoka", sans-serif; }

/* comparison table good/bad markers */
.yes { color: var(--good); font-weight: 800; }
.no { color: var(--bad); font-weight: 800; }

/* FAQ */
.faq { margin: 20px 0 10px; }
.faq details {
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  padding: 14px 18px; margin-bottom: 12px;
}
.faq summary { font-family: "Fredoka", sans-serif; font-weight: 700; cursor: pointer; font-size: 1.02rem; }
.faq details p { margin: 10px 0 0; color: var(--muted); font-weight: 600; }

/* CTA */
.cta-block {
  background: var(--card); border: 3px solid var(--ink); border-radius: 26px; padding: 30px;
  box-shadow: var(--shadow); margin: 40px 0; display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
  justify-content: space-between;
}
.cta-block img { flex: none; width: 110px; height: auto; }
.cta-block .cta-copy { flex: 1 1 260px; }
.cta-block h3 { margin: 0 0 6px; }
.cta-block p { color: var(--muted); margin: 0; }
.cta {
  font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 1rem; color: #fff;
  background: var(--cta-bg); border-radius: 999px; padding: 14px 28px; text-decoration: none;
  box-shadow: 0 4px 0 var(--orange-deep), 0 14px 26px rgba(232,99,28,.28); display: inline-block;
}
.cta-soon { background: none; color: var(--orange-deep); border: 3px solid var(--orange);
  box-shadow: none; cursor: default; }

/* Narrow phones (320-360px): the CTA card's own padding leaves too little
   room for the button text at full size, so it wraps to two lines and the
   999px pill radius stretches into an oval. Go full-width and trim padding/
   font just enough to keep the longest label (English) on one line. */
@media (max-width: 480px) {
  .cta-block { padding: 24px 20px; }
  .cta-block .cta { display: block; width: 100%; box-sizing: border-box;
    text-align: center; white-space: nowrap; font-size: .95rem; padding: 13px 18px; }
}

/* misc content bits */
.pros-cons { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 18px 0; }
@media (max-width: 640px) { .pros-cons { grid-template-columns: 1fr; } }
.pros-cons > div { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.pros-cons h4 { font-family: "Fredoka", sans-serif; margin-bottom: 8px; }
figure { margin: 0 0 26px; }
figure img { border-radius: 22px; border: 3px solid var(--ink); box-shadow: var(--shadow); }
figcaption { color: var(--muted); font-size: .88rem; font-weight: 600; margin-top: 8px; }
.shot-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0 26px; }
.shot-row figure { flex: 1 1 200px; max-width: 260px; margin: 0; }

/* calculator form */
.calc-card { background: var(--card); border: 3px solid var(--ink); border-radius: 26px; padding: 28px;
  box-shadow: var(--shadow); margin: 20px 0 10px; }
.calc-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .calc-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 800; font-size: .92rem; }
.field input[type="number"] {
  font: inherit; font-size: 1.05rem; padding: 10px 14px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--paper); color: var(--ink); width: 100%;
}
.seg { display: inline-flex; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button {
  font: inherit; font-weight: 800; font-size: .88rem; padding: 8px 16px; border: none; background: var(--paper);
  color: var(--muted); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--cta-bg); color: #fff; }
.mode-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.calc-result { grid-column: 1 / -1; background: var(--paper2); border-radius: 18px; padding: 20px 22px; margin-top: 6px; }
.calc-result .big { font-family: "Fredoka", sans-serif; font-size: 2.2rem; color: var(--orange-deep); }
.calc-result .note { color: var(--muted); font-size: .92rem; font-weight: 600; margin-top: 6px; }
.pace-note { font-size: .85rem; color: var(--muted); font-weight: 600; }

/* footer */
.site-footer { border-top: 2px solid var(--line); margin-top: 60px; padding: 32px 0 54px;
  display: flex; flex-wrap: wrap; gap: 20px 30px; justify-content: space-between; color: var(--muted);
  font-size: .92rem; font-weight: 600; }
.footer-links a, .footer-guides a { color: var(--orange-deep); text-decoration: none; margin-right: 18px; font-weight: 800; }
.footer-links a:hover, .footer-guides a:hover { text-decoration: underline; }
.footer-guides { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.footer-guides span { font-weight: 800; color: var(--ink); margin-right: 4px; }
.copyright { width: 100%; order: 3; padding-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}