/* /guides and the pages under /guides/, in the same design as /approach. approach.css is loaded first and gives the
   ground, the type, the nav, the links and the footer; this file sets the guides themselves: the index of guides,
   then each guide as one reading column with its checklists, charts, pictures and sources.
   No panels and no outlined boxes: hairlines between the rows, as on the Tools page.
   The guides' own markup names its colours (--ink, --accent and so on); those names are given this design's colours
   here, so the charts and checklists follow without a rule of their own. */

.gd {
  --surface: var(--cv-ground);
  --ink: var(--cv-ink);
  --ink-strong: var(--cv-ink);
  --accent: var(--cv-kh);
  --on-accent: #050505;
  --rule: var(--cv-rule);
  --rule-strong: rgba(229, 226, 203, .6);
  --muted: rgba(229, 226, 203, .8);
  padding-bottom: 9rem;
  font: 320 1.05rem/1.7 var(--cv-text); font-stretch: 112%; letter-spacing: .005em;
}
.gd-intro { padding-bottom: 6rem; }

/* sentences: paragraphs, lists and links read as text, not as the small capital lines of the other pages.
   These defaults weigh no more than one class, so a chart or a checklist further down can set its own. */
.gd :where(p) { margin: 0 0 1.1em; }
.gd :where(ul, ol) { margin: 0 0 1.1em; padding-left: 1.3rem; }
.gd :where(ul) { list-style: disc; }
.gd :where(ol) { list-style: decimal; }
.gd :where(li) { margin-bottom: .45em; }
.gd li::marker { color: var(--cv-kh); }
.gd a { color: var(--cv-kh); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.gd a:hover { color: var(--cv-ink); }
.gd b, .gd strong { font-weight: 520; }
.gd hr { margin: 3rem 0 2rem; border: 0; border-top: 1px solid var(--cv-rule); }
.gd img { max-width: 100%; height: auto; }

/* ── the index: one row a guide, its name on the left, who it is for and its links on the right ── */
.gd .gd-index { max-width: 90rem; margin: 0 auto 9rem; padding: 0 var(--cv-gut); list-style: none; }
.gd-row {
  display: grid; grid-template-columns: 1fr 34%; align-items: baseline; gap: 1rem 2rem;
  margin: 0; padding: 2.4rem 1.5rem; border-top: 1px solid var(--cv-rule);
}
.gd-row:last-child { border-bottom: 1px solid var(--cv-rule); }
.gd-what { display: contents; }
.gd .gd-name {
  grid-column: 1; grid-row: 1 / span 2; max-width: 16em; color: var(--cv-ink); text-decoration: none;
  font-family: var(--cv-display); font-weight: 705; font-stretch: normal; font-optical-sizing: auto;
  font-size: clamp(1.9rem, 2.6vw, 3rem); line-height: 1.1; letter-spacing: .01em;
}
.gd .gd-name:hover { color: var(--cv-kh); }
.gd-what span { grid-column: 2; font-size: .9rem; font-weight: 280; font-stretch: 125%; line-height: 1.4; letter-spacing: .5px; text-transform: uppercase; }
.gd-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }

/* the small links: [ words ], as everywhere else on the site */
.gd .chk-print, .gd .gd-top {
  display: inline-block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer;
  color: var(--cv-kh); text-decoration: none;
  font: 280 .85rem/1.3 var(--cv-text); font-stretch: 125%; letter-spacing: .5px; text-transform: uppercase;
}
.gd .chk-print::before, .gd .gd-top::before { content: "[ "; content: "[ " / ""; }
.gd .chk-print::after, .gd .gd-top::after { content: " ]"; content: " ]" / ""; }
.gd .chk-print:hover, .gd .gd-top:hover { color: var(--cv-ink); }

/* a download or a print: one solid button */
.gd .gd-bar .chk-print, .gd .chk-print[style], .gd div[style] > .chk-print, .gd .fpc-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 1.15rem 1.5rem; border: 0;
  background: var(--cv-nt) !important; color: var(--cv-ink) !important; text-decoration: none;
  font: 400 .9rem/1 var(--cv-text); font-stretch: 125%; letter-spacing: .5px; text-transform: uppercase;
  transition: background-color .4s ease;
}
.gd .gd-bar .chk-print::before, .gd .gd-bar .chk-print::after,
.gd .chk-print[style]::before, .gd .chk-print[style]::after,
.gd div[style] > .chk-print::before, .gd div[style] > .chk-print::after { content: none; }
.gd .gd-bar .chk-print:hover, .gd .chk-print[style]:hover, .gd div[style] > .chk-print:hover, .gd .fpc-btn:hover { background: #00574a !important; }

/* ── one guide: a reading column ── */
.gd-guide, .sg { max-width: 52rem; margin: 0 auto; padding: 0 1.5rem; }
/* wide screens: the column starts under the headline and stops short of the adviser's card in the corner */
@media (min-width: 992px) {
  .gd-guide, .sg { max-width: min(52rem, 90vw - 24.5rem); margin-left: 10%; margin-right: 0; }
}
.gd-guide { padding-top: 5rem; padding-bottom: 8rem; border-top: 1px solid var(--cv-rule); scroll-margin-top: 1rem; }
.gd-guide:last-child { padding-bottom: 0; }
.gd-guide [id] { scroll-margin-top: 2rem; }
.gd-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem; margin-bottom: 4rem; }
/* a guide on a page of its own: the whole page is the column */
.sg { padding-top: 5rem; padding-bottom: 9rem; }

.gd h2 {
  margin: 4rem 0 1.3rem; color: var(--cv-ink);
  font-family: var(--cv-display); font-weight: 705; font-stretch: normal; font-optical-sizing: auto;
  font-size: 2rem; line-height: 1.15; letter-spacing: .01em;
}
.gd h3 { margin: 2.4rem 0 .8rem; font-size: 1.1rem; font-weight: 520; line-height: 1.4; }
.gd .gd-title { max-width: 13em; margin: 0 0 2.2rem; font-weight: 595; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.05; letter-spacing: 0; }
.gd .h2-sub { display: block; margin-top: .6rem; font: 320 1rem/1.5 var(--cv-text); font-stretch: 112%; letter-spacing: .005em; }
.gd .lede { max-width: 38em; font-size: 1.2rem; line-height: 1.6; }
.gd .lst-by, .gd .gtk, .gd .xf-k { color: var(--cv-kh); font-size: .85rem; font-weight: 280; font-stretch: 125%; line-height: 1.4; letter-spacing: .5px; text-transform: uppercase; }
.gd .lst-by { margin-bottom: 2rem; }
.gd .tag {
  display: inline-block; margin-left: .35em; padding: .15em .5em; border: 1px solid var(--cv-kh); vertical-align: .12em; white-space: nowrap;
  color: var(--cv-kh); font-size: .68rem; font-weight: 400; font-stretch: 125%; line-height: 1.3; letter-spacing: .5px; text-transform: uppercase;
}
.gd .blank { letter-spacing: .02em; }

/* a checklist: a square to tick, then the thing to do and what to know about it */
.gd ol.items, .gd .lst-datedlist { margin: 0; padding: 0; list-style: none; }
.gd li.item { margin: 0; padding: 1.5rem 0; border-top: 1px solid var(--cv-rule); }
.gd li.item .head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .6rem; }
.gd li.item .head strong { font-size: 1.1rem; line-height: 1.5; }
.gd .box, .gd .chk-box { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .38em; border: 1px solid var(--cv-kh); }
.gd li.item > p, .gd li.item > ul, .gd li.item > figure { margin-left: 2.05rem; }
.gd li.item > :last-child { margin-bottom: 0; }
.gd ul.dated { margin-top: 1.4rem; }
.gd p.label { margin-bottom: .2em; font-weight: 520; }

.gd .chk-block { margin-top: 3rem; }
.gd .chk-item { display: flex; gap: 1rem; padding: 1.3rem 0; border-top: 1px solid var(--cv-rule); }
.gd .chk-item .t { min-width: 0; }
.gd .chk-item .t p { margin: 0 0 .8em; }
.gd .chk-item .t > :last-child { margin-bottom: 0; }
.gd .chk-item .t p.act { font-size: 1.1rem; line-height: 1.6; }
.gd .chk-item .t p.gtk { margin: 1.2rem 0 .5rem; }
.gd .chk-item .t p.where { margin-top: 1.1rem; font-size: .9rem; line-height: 1.55; }
.gd .refs { margin-left: .3em; font-size: .68rem; font-stretch: 125%; letter-spacing: .5px; text-transform: uppercase; }
.gd .refs a { white-space: nowrap; }
.gd .lst-fields { columns: 2; column-gap: 2.5rem; }
.gd .lst-fields li { break-inside: avoid; }
.gd .lst-pdf { margin-top: 1.6rem; }

/* the closing lines of a guide, and the offer to go through it together */
.gd .chk-foot { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--cv-rule); font-size: .95rem; line-height: 1.6; }
.gd .lst-foot p:last-child, .gd .sg-foot { font-weight: 520; }
.gd .sg-more { margin-top: 2.5rem; }
.gd .sg-foot { margin-top: 1.6rem; font-size: .95rem; }
.gd .fpc { max-width: none; margin: 4rem 0 2.5rem; padding: 2.6rem 0 2.8rem; border: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.gd .fpc .fpc-h { margin: 0 0 1.1rem; }
.gd .fpc p { max-width: 40em; }
.gd .fpc .fpc-cta { margin: 1.8rem 0 0; }
/* a sign-up box whose form is not on this page */
.gd .xc-form { display: none; }

/* the pages behind a guide */
.gd .sources, .gd .lst-sources { margin-top: 3.5rem; font-size: .85rem; line-height: 1.55; color: rgba(229, 226, 203, .86); }
.gd .sources li, .gd .lst-sources li { overflow-wrap: anywhere; }
.gd .lst-sources__note { max-width: 44em; }
.gd .src-host { margin-left: .3em; font-size: .68rem; letter-spacing: .5px; text-transform: uppercase; opacity: .8; }
.gd .src-date { margin-left: .3em; font-style: italic; }
.gd .src-date::before { content: "\00B7\00A0"; }

/* ── the charts inside the guides. Colours are the names set at the top; sizes are em, so they follow the text ── */
.gc{margin:1.5em 0 1.7em;max-width:40em;font-size:.96em;break-inside:avoid}
.gc>figcaption{font-weight:700;line-height:1.35;margin:0 0 .9em;color:var(--ink-strong,var(--ink,#004137))}
.gc p{margin:0}
.gc .gc-note{margin-top:.8em;font-size:.93em;line-height:1.5}
.gc .gc-rl{line-height:1.4;margin:0 0 .35em}
.gc-row+.gc-row,.gc-b+.gc-b,.gc-grow+.gc-grow{margin-top:1.05em}
.gc-track{display:flex;height:2.3em;border:2px solid var(--accent,#004137);box-sizing:border-box}
.gc-seg{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;white-space:nowrap;font-weight:700;color:var(--accent,#004137)}
.gc-seg:nth-child(odd){background:var(--accent,#004137);color:var(--on-accent,#fff)}
.gc-seg+.gc-seg{border-left:2px solid var(--accent,#004137)}
.gc-keys{display:flex;margin-top:.4em}
.gc-keys>span{min-width:0;padding-right:.7em;line-height:1.35;font-size:.93em}
.gc-steps{list-style:none;margin:0 0 0 .45em;padding:0 0 0 1.4em;border-left:2px solid var(--accent,#004137)}
.gc-step{position:relative;padding:0 0 1.05em}
.gc-step::before{content:"";position:absolute;box-sizing:content-box;left:calc(-1.4em - 7px);top:.28em;width:12px;height:12px;border-radius:50%;background:var(--accent,#004137)}
.gc-step.gc-aside::before{width:8px;height:8px;border:2px solid var(--accent,#004137);background:var(--surface,#fff)}
.gc-when{font-weight:700;line-height:1.4}
.gc-what{line-height:1.45}
.gc .gc-total{padding:.55em .8em;background:var(--accent,#004137);color:var(--on-accent,#fff);font-weight:700;line-height:1.4}
.gc-gt,.gc-bt{position:relative;height:1.6em}
.gc-gt{border-bottom:1px solid var(--rule,#c9d6d3)}
.gc-gbar{position:absolute;top:.2em;bottom:.2em;background:var(--accent,#004137)}
.gc-gmark{position:absolute;top:.35em;width:.9em;height:.9em;border-radius:50%;background:var(--accent,#004137)}
.gc-gv,.gc-bv{position:absolute;top:50%;transform:translateY(-50%);font-weight:700;font-size:.92em;white-space:nowrap;color:var(--ink-strong,var(--ink,#004137))}
.gc-gv.gc-in,.gc-bv.gc-in{color:var(--on-accent,#fff)}
.gc-axis{position:relative;height:1.5em;margin-top:.35em;font-size:.85em}
.gc-tick{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.gc-tick.gc-t0{transform:none}.gc-tick.gc-tn{transform:translateX(-100%)}
.gc-bt{margin-right:4.6em}
.gc-bb{position:absolute;left:0;top:0;bottom:0;background:var(--accent,#004137)}
.gc-cols{display:grid;gap:.45em;align-items:end;height:10em;padding-top:1.7em;box-sizing:border-box;border-bottom:2px solid var(--accent,#004137)}
.gc-col{height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.gc-cb{position:relative;display:block;background:var(--accent,#004137)}
.gc-cv{position:absolute;bottom:100%;left:-.3em;right:-.3em;padding-bottom:.2em;text-align:center;font-weight:700;font-size:.82em;white-space:nowrap}
.gc-clabs{display:grid;gap:.45em;margin-top:.35em;font-size:.85em;text-align:center;line-height:1.25}
.gc-cmp{display:grid;grid-template-columns:1fr 1fr;column-gap:1em}
.gc .gc-ch{font-weight:700;padding:0 0 .45em;border-bottom:2px solid var(--accent,#004137);line-height:1.35}
.gc .gc-cr{grid-column:1/-1;font-weight:700;font-size:.86em;padding:.75em 0 .2em;line-height:1.35}
.gc .gc-cc{line-height:1.42;padding-bottom:.6em;border-bottom:1px solid var(--rule,#c9d6d3)}
.gc-srt{display:grid;grid-template-columns:repeat(auto-fit,minmax(13em,1fr));gap:1em 1.4em}
.gc-grp{border-top:4px solid var(--accent,#004137);padding-top:.5em}
.gc .gc-gh{font-weight:700}
.gc-grp ul{margin:.35em 0 0;padding-left:1.15em}.gc-grp li{margin-bottom:.3em;line-height:1.42}
.gp{margin:1.4em 0 1.6em;break-inside:avoid}
.gp img{display:block;width:100%;height:auto}
.gp-photo{max-width:180px}
.gp-receipt{max-width:390px}
.gp-receipt img{border:1px solid var(--rule,#c9d6d3)}
.gp figcaption{margin-top:.5em;font-size:.86em;line-height:1.4}
.gp-scene{max-width:520px}
.gp-scene.gp-right{max-width:240px}
@media (min-width:600px){.gp-photo.gp-right,.gp-scene.gp-right{float:right;width:34%;max-width:240px;margin:.3em 0 1em 1.6em}}
.gp-right~h2,.gp-right~h3{clear:both}

/* a headline that is a whole question */
.cv-h1.gd-h1 { max-width: 13em; margin-top: max(4rem, 14vh); font-size: clamp(2.6rem, 6vw, 6.5rem); line-height: 1.05; }

@media (max-width: 991px) {
  .gd-row { grid-template-columns: 1fr; gap: .9rem; padding: 2rem .5rem; }
  .gd .gd-name, .gd-what span, .gd-acts { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .gd { font-size: 1rem; }
  .gd-guide, .sg { padding-left: var(--cv-gut); padding-right: var(--cv-gut); }
  .gd-guide { padding-top: 3.5rem; padding-bottom: 6rem; }
  .gd-bar { margin-bottom: 3rem; }
  .gd h2 { margin-top: 3.2rem; font-size: 1.7rem; }
  .gd .lede { font-size: 1.1rem; }
  .gd li.item > p, .gd li.item > ul, .gd li.item > figure { margin-left: 0; }
  .gd .lst-fields { columns: 1; }
  .gd .gd-bar .chk-print, .gd .chk-print[style], .gd div[style] > .chk-print, .gd .fpc-btn { padding: 1rem 1.1rem; font-size: .8rem; }
  .cv-h1.gd-h1 { font-size: 11vw; }
}

/* on paper: the guides alone, dark ink on white, each guide from a new page */
@media print {
  @page { size: A4; margin: 14mm 14mm 15mm; }
  .gd-page .cv-nav, .gd-page .cv-foot, .gd-intro, .gd .gd-index, .gd-bar, .gd .chk-print, .gd div[style] > .chk-print { display: none !important; }
  .gd-page .cv-h1 { margin-top: 0; font-size: 28pt; }
  .gd {
    --surface: #fff; --ink: #1a1f1d; --ink-strong: #004137; --accent: #004137; --on-accent: #fff;
    --rule: #c9c4b0; --rule-strong: #004137; --muted: #444;
    padding: 0; color: #1a1f1d; font-size: 10.5pt; font-weight: 400;
  }
  .gd a, .gd li::marker, .gd .lst-by, .gd .gtk, .gd .tag { color: #004137; }
  .gd h2, .gd .gd-name { color: #004137; }
  .gd .tag, .gd .box, .gd .chk-box { border-color: #004137; }
  .gd-guide, .sg { max-width: none; margin: 0; padding: 0; border: 0; }
  .gd-guide { break-before: page; }
  .gd li.item, .gd .chk-item, .gc, .gp { break-inside: avoid; }
  .gd li.item, .gd .chk-item, .gd .chk-foot, .gd hr { border-color: #c9c4b0; }
  .gd .fpc { border-color: #004137; }
  .gd .fpc-btn { background: none !important; color: #004137 !important; border: 1px solid #004137; }
  .gd .sources, .gd .lst-sources { color: #1a1f1d; }
}