/* FFP Guides. Same tokens and fonts as ffpdigital.com.au (website/site.css), reading layout. */
:root {
  --teal: #003746; --teal-mid: #0A4D5E; --teal-light: #0E6377;
  --orange: #E8652B; --orange-dark: #C24F1D;
  --sand: #F0F4F5; --sand-light: #F7F9FA; --sand-dark: #D8E0E3;
  --green: #2D6B5A; --green-bg: #EAF4F0; --amber-bg: #FFF4E8; --red: #A8441A; --red-bg: #FCEEE8;
  --cream: #FBFCFC; --white: #FFFFFF;
  --text: #1E2D33; --text-mid: #3A5058; --text-light: #52717A;
  --display: 'Poppins', -apple-system, sans-serif;
  --sans: 'Source Sans 3', -apple-system, sans-serif;
  --read: 780px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }
body { font-family: var(--sans); color: var(--text); background: var(--cream); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; }
a { color: var(--teal-light); text-underline-offset: 2px; }
a:hover { color: var(--orange-dark); }
h1, h2, h3 { font-family: var(--display); color: var(--teal); line-height: 1.25; font-weight: 600; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 1rem; }
h2 { font-size: 1.35rem; margin: 2.4rem 0 0.8rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.5rem; }
p { margin-bottom: 1rem; }
small { color: var(--text-light); }
.wrap { max-width: var(--read); margin: 0 auto; padding: 0 16px; }

/* header / footer */
.top { background: var(--teal); color: var(--white); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.9rem; padding-bottom: 0.9rem; flex-wrap: wrap; max-width: 1100px; }
.brand { font-family: var(--display); font-weight: 600; color: var(--white); text-decoration: none; font-size: 1.1rem; }
.brand-ffp { color: var(--orange); }
.top-nav { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.95rem; }
.top-nav a { color: #CFE0E4; text-decoration: none; }
.top-nav a:hover { color: var(--white); }
.top-nav .top-main { color: var(--orange); font-weight: 600; }
.draft-bar { background: #FFE9A8; color: #5B4500; text-align: center; font-size: 0.85rem; padding: 0.4rem 16px; }
.foot { background: var(--sand); margin-top: 4rem; padding: 2.5rem 0; font-size: 0.93rem; color: var(--text-mid); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }

.crumbs { font-size: 0.86rem; color: var(--text-light); margin: 1.6rem 0 1.2rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.crumbs a { color: var(--text-mid); font-weight: 600; text-decoration: none; }
.crumbs span[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* guide */
.kicker { font-family: var(--display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 0.4rem; }
.answer { font-size: 1.15rem; color: var(--text); border-left: 4px solid var(--orange); padding: 0.2rem 0 0.2rem 1rem; margin-bottom: 0.6rem; }
.checked { font-size: 0.85rem; color: var(--text-light); margin-bottom: 1.6rem; }
.prose ul, .bullets { padding-left: 1.2rem; margin-bottom: 1rem; }
.prose li, .bullets li { margin-bottom: 0.35rem; }
.bullets.checklist { list-style: none; padding-left: 0; }
.bullets.checklist li { padding-left: 1.6rem; position: relative; }
.bullets.checklist li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 0.95em; height: 0.95em; border: 2px solid var(--teal-light); border-radius: 3px; }

.steps { counter-reset: s; list-style: none; margin-bottom: 1.2rem; }
.steps li { counter-increment: s; position: relative; padding: 0 0 0.9rem 2.6rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--teal); color: var(--white); font-family: var(--display); font-weight: 600; font-size: 0.85rem; display: grid; place-items: center; }

.tbl-wrap { overflow-x: auto; margin-bottom: 1.2rem; border: 1px solid var(--sand-dark); border-radius: 8px; background: var(--white); }
.tbl { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
.tbl th, .tbl td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--sand); vertical-align: top; }
.tbl thead th { background: var(--sand); font-family: var(--display); font-size: 0.8rem; font-weight: 600; color: var(--teal); white-space: nowrap; }
.tbl tbody th { font-weight: 600; }
.tbl tr:last-child > * { border-bottom: 0; }
.tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl-price td { white-space: nowrap; } .tbl-price td:last-child { white-space: normal; font-size: 0.85rem; color: var(--text-mid); min-width: 13rem; max-width: 20rem; }
.tbl-caption { font-size: 0.88rem; color: var(--text-mid); }

.factbox { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--sand-dark); border: 1px solid var(--sand-dark); border-radius: 8px; overflow: hidden; margin-bottom: 1.2rem; }
.factbox-3 { grid-template-columns: repeat(3, 1fr); }
.factbox div { background: var(--white); padding: 0.75rem 0.9rem; }
.factbox dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); font-weight: 600; }
.factbox dd { font-size: 0.97rem; }

.verdict { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem; border-radius: 8px; margin-bottom: 1.2rem; }
.verdict p { margin: 0; }
.verdict .pill { flex: none; font-family: var(--display); font-weight: 600; font-size: 0.8rem; padding: 0.25rem 0.7rem; border-radius: 999px; color: var(--white); }
.verdict-yes { background: var(--green-bg); } .verdict-yes .pill { background: var(--green); }
.verdict-partial { background: var(--amber-bg); } .verdict-partial .pill { background: var(--orange-dark); }
.verdict-no { background: var(--red-bg); } .verdict-no .pill { background: var(--red); }

.callout { background: var(--sand-light); border: 1px solid var(--sand-dark); border-radius: 8px; padding: 1rem 1.1rem 0.3rem; margin: 1.4rem 0; }
.callout-warn { background: var(--amber-bg); border-color: #F3D2B3; }
.aside-note { font-size: 0.93rem; color: var(--text-mid); background: var(--sand-light); padding: 0.75rem 0.9rem; border-radius: 8px; }
.symptom { font-size: 1.02rem; background: var(--red-bg); padding: 0.75rem 0.9rem; border-radius: 8px; }
.causes { list-style: none; counter-reset: c; }
.causes li { counter-increment: c; border: 1px solid var(--sand-dark); border-radius: 8px; padding: 1rem 1.1rem 0.2rem; margin-bottom: 0.8rem; background: var(--white); }
.causes h3::before { content: counter(c) ". "; color: var(--orange-dark); }
.causes p { margin-bottom: 0.6rem; }

.versus, .moves { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1.2rem; }
.moves { grid-template-columns: repeat(3, 1fr); } .moves-2 { grid-template-columns: 1fr 1fr; }
.versus-card, .moves-col { background: var(--white); border: 1px solid var(--sand-dark); border-radius: 8px; padding: 1rem 1rem 0.2rem; }
.versus-name { font-family: var(--display); font-weight: 600; color: var(--teal); margin-bottom: 0.4rem; }
.moves-col h3 { font-size: 0.95rem; }
.moves-yes { border-top: 4px solid var(--green); } .moves-work { border-top: 4px solid var(--orange); } .moves-no { border-top: 4px solid var(--red); }
.moves-col .bullets { font-size: 0.93rem; }

.deliverable { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; background: var(--teal); color: #DCE9EC; border-radius: 10px; padding: 1.2rem 1.3rem; margin-bottom: 1rem; }
.deliverable-head p { margin: 0 0 0.3rem; }
.deliverable-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange); font-weight: 600; }
.deliverable-title { font-family: var(--display); font-weight: 600; color: var(--white); font-size: 1.15rem; }
.deliverable-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.btn { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 0.93rem; background: var(--orange-dark); color: var(--white); border: 2px solid var(--orange-dark); border-radius: 6px; padding: 0.6rem 1.1rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: #A8441A; border-color: #A8441A; color: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }

.rule { border-left: 4px solid var(--teal); background: var(--sand-light); padding: 1rem 1.1rem 0.4rem; margin-bottom: 1.2rem; font-size: 1.02rem; }
.rule cite { display: block; font-style: normal; font-size: 0.85rem; margin-bottom: 0.6rem; }

.tool { display: grid; gap: 0.8rem; background: var(--white); border: 2px solid var(--teal); border-radius: 10px; padding: 1.2rem; margin-bottom: 1.2rem; }
.tool label { min-width: 0; display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.93rem; }
.tool select, .tool input, .filter input { width: 100%; min-width: 0; font: inherit; padding: 0.55rem 0.6rem; border: 1px solid var(--sand-dark); border-radius: 6px; background: var(--white); max-width: 100%; }
.tool-out { font-family: var(--display); font-size: 1.1rem; color: var(--teal); background: var(--sand-light); padding: 0.8rem; border-radius: 6px; }
.filter { display: grid; gap: 0.3rem; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.6rem; max-width: 22rem; }

.cta { background: var(--teal); color: #DCE9EC; border-radius: 10px; padding: 1.4rem; margin: 2.4rem 0 1rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-text { margin: 0; color: var(--white); font-size: 1.05rem; flex: 1 1 20rem; }
.sources { font-size: 0.88rem; color: var(--text-mid); }
.sources h2 { font-size: 1.05rem; }
.sources ol { padding-left: 1.2rem; }
.sources li { margin-bottom: 0.4rem; }

.related h2 { font-size: 1.1rem; }
.related ul, .cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
.related a, .cards a { display: flex; flex-direction: column; gap: 0.25rem; height: 100%; padding: 0.9rem; background: var(--white); border: 1px solid var(--sand-dark); border-radius: 8px; text-decoration: none; color: var(--teal); font-weight: 600; }
.related a:hover, .cards a:hover { border-color: var(--orange); }
.cards em { font-style: normal; font-weight: 400; color: var(--text-mid); font-size: 0.9rem; }
.hub-head { margin-top: 2rem; }
.home-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); }
.hub-cluster { margin-top: 2rem; }
.hub-cluster h2 a { color: inherit; text-decoration: none; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips a { display: inline-block; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--white); border: 1px solid var(--sand-dark); text-decoration: none; font-weight: 600; font-size: 0.93rem; }

@media (max-width: 640px) {
  .factbox, .factbox-3, .versus, .moves, .moves-2 { grid-template-columns: 1fr; }
  .verdict { flex-direction: column; }
}
@media print {
  .top, .foot, .crumbs, .cta, .related, .deliverable-actions, .draft-bar, .filter { display: none !important; }
  body { font-size: 12px; background: #fff; }
  .deliverable { background: #fff; color: #000; border: 1px solid #000; }
  .deliverable-title { color: #000; }
}