/* Outrigger Financial
   Colours are the brand manual palette (J&T Creative), not the Horizons defaults.
   Blue Shores #656c81, deep Dusk #453e60, radiant Sun #d2ab67, soft Sand #e4dcca. */

:root {
  --dusk: #453e60;
  --dusk-deep: #35304b;
  --shores: #656c81;
  --sun: #d2ab67;
  --sun-deep: #8a6a22;
  --sand: #e4dcca;
  --sand-soft: #f4f0e7;
  --paper: #ffffff;
  --ink: #2b2740;
  --ink-soft: #5b5670;
  --line: rgba(69, 62, 96, 0.16);

  --head: "Jost", "Gill Sans", "Gill Sans MT", "Trebuchet MS", system-ui, sans-serif;
  --body: "Lato", "Gill Sans", "Gill Sans MT", system-ui, -apple-system, sans-serif;

  --wrap: 1140px;
  --radius: 14px;
  --shadow: 0 10px 40px rgba(69, 62, 96, 0.10);
}

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

/* The hidden attribute must beat any display rule set on the element itself.
   Without this, hiding a .tool-row (display: grid) does nothing at all. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; line-height: 1.15; color: var(--dusk); margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
a { color: var(--dusk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sun-deep); }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { width: min(100% - 2.5rem, 760px); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--dusk); color: #fff; padding: .6rem 1rem; border-radius: 8px; }

:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* buttons */
.btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: 999px;
  font-family: var(--head); font-weight: 500; font-size: 1rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sun { background: var(--sun); color: #2c2410; }
.btn-sun:hover { background: #e0bc7f; color: #2c2410; }
.btn-dusk { background: var(--dusk); color: #fff; }
.btn-dusk:hover { background: var(--dusk-deep); color: #fff; }
.btn-ghost { border-color: currentColor; color: inherit; }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: inherit; }

/* header
   Shrinks to about half height once the page is scrolled. The transition is on the
   properties that actually change, so it stays smooth, and it is disabled entirely
   for anyone who has asked for reduced motion. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; position: relative;
  transition: padding .28s cubic-bezier(.4, 0, .2, 1);
}
.brand img { width: 165px; height: auto; transition: width .28s cubic-bezier(.4, 0, .2, 1); }

.site-header.is-scrolled { box-shadow: 0 2px 18px rgba(69, 62, 96, .10); }
.site-header.is-scrolled .header-inner { padding: .22rem 0; }
.site-header.is-scrolled .brand img { width: 108px; }
.site-header.is-scrolled .nav a { font-size: .93rem; }
.site-header.is-scrolled .nav-cta { padding: .55rem 1.15rem; }
.nav-cta { transition: padding .28s cubic-bezier(.4, 0, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .header-inner, .brand img, .nav-cta { transition: none; }
}
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a { font-family: var(--head); font-size: .98rem; text-decoration: none; color: var(--ink-soft); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--dusk); }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--sun); }
.nav .nav-cta { color: #2c2410; border-bottom: 0; }
.nav-button { display: none; }

@media (max-width: 880px) {
  .nav-button { display: flex; flex-direction: column; gap: 5px; padding: .6rem; cursor: pointer; }
  .nav-button span { width: 24px; height: 2px; background: var(--dusk); border-radius: 2px; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1.25rem; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .nav .nav-cta { margin-top: .9rem; text-align: center; border-bottom: 0; }
  .nav-toggle:checked ~ .nav { display: flex; }
}

/* hero */
.hero { position: relative; background: var(--dusk); color: #fff; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; padding: 4.5rem 0; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--sun); }
.hero p.lede { font-size: 1.2rem; color: #ded9ea; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-figure img { border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.hero-rule { width: 54px; height: 2px; background: var(--sun); margin-bottom: 1.4rem; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; padding: 3rem 0; gap: 2rem; } .hero p.lede { max-width: none; } }

/* sections */
.section { padding: 4.5rem 0; }
.section-sand { background: var(--sand-soft); }
.section-dusk { background: var(--dusk); color: #fff; }
.section-dusk h2, .section-dusk h3 { color: #fff; }
.section-head { max-width: 62ch; margin-bottom: 2.5rem; }
.eyebrow { font-family: var(--head); letter-spacing: .2em; text-transform: uppercase; font-size: .76rem; color: var(--sun-deep); margin-bottom: .7rem; }
.section-dusk .eyebrow { color: var(--sun); }

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

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card-link { text-decoration: none; display: block; transition: transform .15s ease, box-shadow .15s ease; }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.step-num { font-family: var(--head); font-size: 2.4rem; font-weight: 300; color: var(--sun); line-height: 1; display: block; margin-bottom: .6rem; }

.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li { position: relative; padding-left: 1.9rem; margin-bottom: .8rem; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }

.pull { border-left: 3px solid var(--sun); padding-left: 1.4rem; font-size: 1.15rem; color: var(--ink-soft); }

/* partners */
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.6rem 2rem; align-items: center; }
.partners img { max-height: 46px; width: auto; margin: 0 auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.partners img:hover { filter: none; opacity: 1; }

/* forms */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--head); font-size: .92rem; margin-bottom: .35rem; color: var(--dusk); }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .9rem; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--dusk); }
.form-note { font-size: .92rem; color: var(--ink-soft); }
.required { color: var(--sun-deep); }

/* accordion, no JavaScript needed */
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: .8rem; }
.faq summary { cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--head); font-size: 1.05rem; color: var(--dusk); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sun-deep); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 1.3rem 1.3rem; color: var(--ink-soft); }

/* legal pages */
.legal h2 { margin-top: 2.2rem; font-size: 1.35rem; }
.legal h3 { margin-top: 1.4rem; font-size: 1.08rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .5rem; }
.legal .meta { background: var(--sand-soft); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.legal .meta p { margin-bottom: .3rem; }

/* footer */
.site-footer { background: var(--dusk-deep); color: #cfc9dd; padding: 3.5rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 2.5rem; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sun); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: #cfc9dd; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-logo { width: 175px; margin-bottom: 1rem; }
.footer-tag { color: #a9a2c0; }
.footer-fsp { font-size: .88rem; color: #8f88a8; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.2rem; font-size: .86rem; color: #8f88a8; }
.footer-base p { margin: 0; }

/* Only ever present on the staging build. */
.staging-flag {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: #8a1f1f; color: #fff; text-align: center;
  font-family: var(--head); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .35rem;
}
@media print { .staging-flag { display: none; } }

.center { text-align: center; }
.lede { font-size: 1.15rem; color: var(--ink-soft); }
.section-dusk .lede { color: #ded9ea; }

/* full width image band */
.band {
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 6rem 0;
}
.band h2 { color: #fff; }
.band .lede { color: #ece8f4; }
.band .eyebrow { color: var(--sun); }
@media (min-width: 900px) { .band { background-attachment: fixed; } }
@media (prefers-reduced-motion: reduce) { .band { background-attachment: scroll; } }

/* ===== google reviews ===== */
.gr-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-bottom: 2rem; }
.gr-score { font-family: var(--head); font-size: 2.4rem; font-weight: 600; color: var(--dusk); line-height: 1; }
.gr-count { color: var(--ink-soft); }
.gr-stars { display: inline-flex; gap: 1px; }
.gr-star { color: var(--line); font-size: 1.15rem; line-height: 1; }
.gr-star.on { color: var(--sun); }

.gr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .gr-cards { grid-template-columns: 1fr; } }
.gr-card { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.gr-card p { margin: .6rem 0 1rem; color: var(--ink); }
.gr-card cite { font-style: normal; font-family: var(--head); font-weight: 600; color: var(--dusk); display: block; }
.gr-when { display: block; font-family: var(--body); font-weight: 400; font-size: .88rem; color: var(--ink-soft); margin-top: .1rem; }
.gr-actions { margin-top: 2rem; text-align: center; }
.gr-invite { max-width: 46rem; margin-inline: auto; text-align: center; }

/* ===== free tools ===== */
.tool-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: var(--sand-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.3rem; margin-bottom: 2rem; }
.tool-bar p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

.tool-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.tool-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: 1fr; } }

.tool-row { display: grid; grid-template-columns: 1fr 150px; gap: .75rem; align-items: center; margin-bottom: .55rem; }
.tool-row label { font-size: .97rem; color: var(--ink); }
.tool-row input { width: 100%; padding: .55rem .7rem; font: inherit; text-align: right; border: 1px solid var(--line); border-radius: 8px; }
.tool-group { margin-bottom: 1.8rem; }
.tool-group h3 { display: flex; align-items: center; gap: .6rem; font-size: 1rem; letter-spacing: .02em; color: var(--dusk); border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: .9rem; }
.step-dot { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--dusk); color: #fff; font-size: .8rem; font-weight: 600; }
.sub-label { font-family: var(--head); font-size: .92rem; color: var(--dusk); margin: 1rem 0 .5rem; }
.tool-results { position: sticky; top: 5.5rem; }
@media (max-width: 900px) { .tool-results { position: static; } }

.freq { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.freq input { position: absolute; opacity: 0; pointer-events: none; }
.freq label { padding: .45rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--head); font-size: .95rem; color: var(--ink-soft); cursor: pointer; }
.freq input:checked + label { background: var(--dusk); border-color: var(--dusk); color: #fff; }
.freq input:focus-visible + label { outline: 3px solid var(--sun); outline-offset: 2px; }

.stat { background: var(--sand-soft); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: .8rem; }
.stat .k { display: block; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--shores); }
.stat .v { display: block; font-family: var(--head); font-size: 1.75rem; font-weight: 600; color: var(--dusk); line-height: 1.2; margin-top: .15rem; }
.stat.good .v { color: #1f6b46; }
.stat.over .v { color: #99331f; }

.split-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.split-table th, .split-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.split-table th:first-child, .split-table td:first-child { text-align: left; }
.split-table th { font-family: var(--head); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--shores); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .5rem; }

.method-list { display: grid; gap: .7rem; }
.method { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.1rem; cursor: pointer; display: block; transition: border-color .15s, background-color .15s; }
.method:hover { border-color: var(--shores); }
.method input { position: absolute; opacity: 0; }
.method .m-name { font-family: var(--head); font-weight: 600; color: var(--dusk); }
.method .m-desc { font-size: .93rem; color: var(--ink-soft); margin: .15rem 0 0; }
.method.is-on { border-color: var(--dusk); background: var(--sand-soft); }

.persona { border-left: 3px solid var(--sun); background: var(--sand-soft); border-radius: 0 12px 12px 0; padding: 1.1rem 1.3rem; margin-top: 1.2rem; }
.persona .p-eyebrow { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sun-deep); }
.persona h3 { margin: .2rem 0 .4rem; }
.persona p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

.bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; margin-top: 1.2rem; border: 1px solid var(--line); }
.bar span { display: block; height: 100%; }

.disclaimer { font-size: .9rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 2rem; }

/* the two directions of the savings question, side by side */
.two-way { display: grid; gap: 1.2rem; margin-top: 1rem; }
.way { border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; }
.way-label { font-family: var(--head); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sun-deep); margin-bottom: .8rem; }
.way .stat { margin-top: 1rem; margin-bottom: .5rem; }
.way .tool-row { grid-template-columns: 1fr 110px; }

.tool-row select { width: 100%; padding: .5rem .6rem; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* phone button, deliberately distinct from the booking button so the two calls to
   action read as a choice rather than one being a weaker copy of the other */
.btn-call { background: transparent; border-color: var(--dusk); color: var(--dusk); }
.btn-call:hover { background: var(--dusk); color: #fff; }
.section-dusk .btn-call, .guide-cta .btn-call, .hero .btn-call { border-color: #fff; color: #fff; }
.section-dusk .btn-call:hover, .guide-cta .btn-call:hover, .hero .btn-call:hover { background: #fff; color: var(--dusk); }

/* ===== guides nav dropdown, no JavaScript ===== */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-drop-top { display: inline-flex; align-items: center; gap: .3rem; }
.caret { font-size: .7em; opacity: .7; }
.nav-drop-menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: none; flex-direction: column; min-width: 15rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .5rem 0; margin-top: .4rem;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { display: flex; }
.nav-drop-menu a { padding: .55rem 1.1rem; font-size: .95rem; border-bottom: 0; white-space: nowrap; }
.nav-drop-menu a:hover { background: var(--sand-soft); color: var(--dusk); }

@media (max-width: 880px) {
  /* On a phone there is no hover, so the whole list is simply shown, indented
     under its parent. A dropdown you cannot open is worse than no dropdown. */
  .nav-drop { display: block; }
  .nav-drop-top { padding: .85rem 0; border-bottom: 1px solid var(--line); width: 100%; }
  .caret { display: none; }
  .nav-drop-menu {
    position: static; display: flex; border: 0; box-shadow: none;
    padding: 0 0 0 1rem; margin: 0; min-width: 0; background: transparent;
  }
  .nav-drop-menu a { padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
}

/* ===== the ask, near the top of every guide ===== */
.guide-help {
  background: var(--sand-soft);
  border-left: 3px solid var(--sun);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.5rem;
  margin: 0 0 2.4rem;
}
.guide-help p { margin: 0; color: var(--ink); }
.guide-help a { font-weight: 600; }
@media print { .guide-help { display: none; } }

/* ===== email me this guide, at the foot ===== */
.guide-email {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  margin-top: 2.5rem;
}
.guide-email h3 { margin-top: 0; margin-bottom: .4rem; }
.guide-email p { color: var(--ink-soft); margin-bottom: 1.1rem; }
.ge-form { display: flex; flex-wrap: wrap; gap: .6rem; position: relative; }
.ge-form input[type="text"], .ge-form input[type="email"] {
  flex: 1 1 12rem; min-width: 0;
  padding: .7rem .9rem; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.ge-form input:focus { border-color: var(--dusk); }
.ge-form button { flex: 0 0 auto; }
@media print { .guide-email { display: none; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.emailed-note {
  background: #e8f2ec; border: 1px solid #b7d8c6; border-radius: var(--radius);
  padding: .9rem 1.2rem; color: #1f6b46; margin-bottom: 1.8rem;
}

/* ===== call button in the header ===== */
/* Ordered last so the two calls to action group together on the right, rather
   than the phone number floating on its own between the logo and the nav. */
.header-call { order: 3; margin-left: .5rem; padding: .55rem 1.1rem; font-size: .95rem; white-space: nowrap; }
.header-call .call-short { display: none; }
.site-header.is-scrolled .header-call { padding: .42rem .95rem; font-size: .9rem; }
@media (max-width: 880px) {
  /* Sits between the logo and the burger, always tappable. */
  .header-call { order: 2; margin-left: auto; margin-right: .5rem; padding: .5rem .9rem; }
  .nav-button { order: 3; }
  .header-call .call-long { display: none; }
  .header-call .call-short { display: inline; }
}

/* ===== guides =====
   Written to read easily on a phone and to print cleanly to A4, so a visitor can
   save their own PDF without us shipping one. */
.guide { max-width: 44rem; margin-inline: auto; }
.guide > section { margin-bottom: 2.4rem; }
.guide h2 { font-size: 1.45rem; margin-top: 2.2rem; }
.guide h3 { font-size: 1.08rem; margin-top: 1.4rem; }
.guide p, .guide li { font-size: 1.06rem; }
.guide .big { font-size: 1.2rem; color: var(--ink-soft); }

.sent-note { background: #e8f2ec; border: 1px solid #b7d8c6; border-radius: var(--radius); padding: .9rem 1.2rem; color: #1f6b46; margin-bottom: 1.8rem; }
.guide-head { border-bottom: 3px solid var(--sun); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.guide-head .kicker { font-family: var(--head); letter-spacing: .2em; text-transform: uppercase; font-size: .74rem; color: var(--sun-deep); }
.guide-head p { margin-bottom: 0; }

.keypoint { background: var(--sand-soft); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.4rem 0; }
.keypoint .kp-label { font-family: var(--head); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sun-deep); display: block; margin-bottom: .35rem; }
.keypoint p:last-child { margin-bottom: 0; }

.guide table { width: 100%; border-collapse: collapse; margin: 1.3rem 0; font-size: .98rem; }
.guide th, .guide td { text-align: left; padding: .6rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide th { font-family: var(--head); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--shores); }
.guide td.num, .guide th.num { text-align: right; font-variant-numeric: tabular-nums; }

.figure { margin: 1.8rem 0; }
.figure svg { width: 100%; height: auto; display: block; }
.figure figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: .6rem; }

.guide-cta { background: var(--dusk); color: #fff; border-radius: var(--radius); padding: 1.8rem; margin-top: 2.5rem; }
.guide-cta h2 { color: #fff; margin-top: 0; }
.guide-cta p { color: #ded9ea; }

@media print {
  .guide-cta { background: none; color: var(--ink); border: 1px solid #999; }
  .guide-cta h2, .guide-cta p { color: var(--ink); }
  .keypoint { border: 1px solid #ccc; background: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #666; }
}

/* ===== resources ===== */
.resource-card { display: flex; flex-direction: column; height: 100%; }
.resource-card .r-body { flex: 1; }
.resource-card form { margin-top: 1.1rem; }
.resource-card .field { margin-bottom: .7rem; }
.resource-card .field input { padding: .6rem .75rem; }

/* ===== help dialog ===== */
.help-dialog { border: 0; border-radius: var(--radius); padding: 0; max-width: 520px; width: calc(100% - 2rem); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.help-dialog::backdrop { background: rgba(43, 39, 64, .55); }
.help-form { padding: 2rem; position: relative; }
.help-form h2 { font-size: 1.5rem; }
.help-close { position: absolute; top: .6rem; right: .9rem; background: none; border: 0; font-size: 1.9rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.help-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; color: var(--ink-soft); margin: .4rem 0 1.2rem; }
.help-consent input { margin-top: .25rem; }
.help-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }

/* Without JavaScript the dialog element is not shown by default in every browser,
   so the fallback is a normal section further down the page. */
.help-fallback { margin-top: 3rem; }

@media print {
  .site-header, .site-footer, .tool-bar, .help-dialog, .btn { display: none !important; }
  body { font-size: 11pt; }
  .section { padding: 0; }
}