/* look-a.css: "Site Board" (MN 2026-10-06: "A is ok, and some sections can have colours inverted like E").
   Hi-vis yellow and charcoal, sign lettering for headings, Barlow for reading. Loaded LAST on every course page,
   so it overrides each page's own styles. Dark sections: .band, .dark, .tease. Yellow block: .cta. */
:root {
  --ink: #161616;
  --paper: #FFFFFF;
  --paper-2: #F4F4F2;
  --muted: #3D3D3D;
  --line: #E3E3E3;
  --accent: #FFC20E;
  --accent-ink: #161616;
  --on-dark: #D4D4D4;
  --dark-line: #3A3A3A;
  --f-sans: 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-display: 'Barlow Semi Condensed', 'Arial Narrow', 'Barlow', sans-serif;
  --f-serif: var(--f-display);
  --f-mono: var(--f-display);
}
body { font-family: var(--f-sans); font-size: 18px; line-height: 1.6; color: var(--ink); background: var(--paper); }

/* Headings: sign lettering, sentence case */
h1, h2, h3 { font-family: var(--f-display); letter-spacing: 0; color: inherit; }
h1, h2 { font-weight: 800; }
h3 { font-weight: 700; }
h1 em, h2 em { background: none; color: inherit; padding: 0; box-shadow: inset 0 -0.26em 0 var(--accent); }
.lede { color: var(--muted); }

/* Labels: readable sign lettering instead of tiny spaced mono */
.eye { font: 700 14px/1.3 var(--f-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.eye::before { display: none; }
.facts dt, .crumbs, .sched .d, .sched th, .cmp th, .quote .qh, .quote .ln .no, .prog .from, .creds4 .l, .creds .l,
.qnum .of, .cov, .progress .wrap, .when, .job, .meta, figcaption, .stages figcaption, .hero-img figcaption, .sn-all {
  font-family: var(--f-display); font-weight: 700; letter-spacing: 0.04em;
}
.facts dt, .crumbs, .sched .d, .sched th, .quote .qh, .quote .ln .no, .qnum .of, .cov, .progress .wrap, .when, .meta { font-size: 13px; }
.cmp th, .creds4 .l, .creds .l, figcaption, .stages figcaption, .hero-img figcaption { font-size: 12.5px; }
.prog .from { font-size: 14px; }

/* Numbers: plain bold, no thin condensed serif */
.level .price, .buy .price, .quote .tot .amt, .creds4 .n, .creds .n, .qnum .n, .score, .sched td.wk, .steps li::before,
.role .abbr, .chosen .price-now, .stats .n {
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em;
}
.level .price { font-size: clamp(42px, 4vw, 52px); }
.buy .price { font-size: 52px; }
.role .abbr { font-size: 46px; }
.qnum .n { font-size: 44px; }
.steps li::before { font-size: 38px; }
.sched td.wk { font-size: 28px; }

/* Buttons: yellow primary, black outline secondary */
.btn { font-family: var(--f-sans); font-weight: 700; border-radius: 4px; }
.btn-primary, .btn-accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn-primary:hover, .btn-accent:hover { background: #F2B400; border-color: #F2B400; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--paper-2); }

/* The facts strip becomes the black site board */
.facts { background: var(--ink); color: #FFFFFF; border: 0 !important; border-radius: 4px; }
.facts > div { padding: 12px 18px !important; }
.facts > div, .facts > div + div { border-color: var(--dark-line) !important; }
.facts dt { color: var(--accent) !important; }
.facts dd { color: #FFFFFF; }

/* Cards and pickers */
.level { border-color: #CFCFCF; border-radius: 4px; }
.level.pick { border: 2px solid var(--ink); box-shadow: none; }
.level .name { font-family: var(--f-display); font-weight: 800; font-size: 28px; }
.level .badge { background: var(--ink); color: var(--accent); border-radius: 3px; font-family: var(--f-display); font-weight: 700; letter-spacing: 0.06em; font-size: 12px; }
.buy, .quote, .prog, form.app, .cta, .ag, .chosen { border-radius: 4px; }
.cmp .here { background: #FFF6D6; }
.quote .qh { border-bottom-color: var(--ink); }
.quote .ln .amt { font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.quote .tot { background: var(--ink); color: #FFFFFF; }
.quote .tot .amt { color: var(--accent); font-size: 42px; }
.switch { border-radius: 4px; }
.switch button { font-family: var(--f-sans); font-weight: 700; border-radius: 2px; }
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--accent); }
.progress .bar span { background: var(--accent); }
.opt .k { font-family: var(--f-display); font-weight: 700; }
.opt.right { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.opt.right .k { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.why { border-left-color: var(--ink); }
.steps { border-top-color: var(--ink); }

/* Inverted sections, like option E */
.band, .dark, .tease { background: var(--ink); color: #FFFFFF; }
.band .eye, .dark .eye, .tease .eye { color: var(--accent); }
.band p, .dark p, .dark .lede, .tease .lede, .tease p { color: var(--on-dark); }
.band h2 em, .dark h2 em, .tease h2 em { box-shadow: none; color: var(--accent); }
.dark a, .tease a:not(.btn) { color: #FFFFFF; }
.dark h3 { color: #FFFFFF; }
.dark .leaks6 { border-top-color: var(--accent); }
.dark .leaks6 > div { border-bottom-color: var(--dark-line); }
.dark .leaks6 p { color: var(--on-dark); }
.dark .btn-ghost, .tease .btn-ghost { color: #FFFFFF; border-color: #FFFFFF; }

/* The closing call to action becomes a yellow site sign */
.cta { background: var(--accent); color: var(--ink); }
.cta .eye { color: var(--ink) !important; }
.cta p { color: #262626; }
.cta h2 em { box-shadow: inset 0 -0.26em 0 #FFFFFF; }
.cta .btn, .cta .btn-accent { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.cta .btn:hover, .cta .btn-accent:hover { background: #333333; border-color: #333333; }
.cta .ctas a:not(.btn) { color: var(--ink); }

/* Top menu: hazard stripe and sign-lettered name */
.sn::before { content: ""; display: block; height: 8px; background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, var(--ink) 14px 28px); }
.sn-brand { font-family: var(--f-display); font-weight: 800; font-size: 18px; letter-spacing: 0.03em; }
.sn-panel { border-radius: 4px; }
.sn-apply { border-radius: 4px; }

/* MN 10-08: New Build = hi-vis yellow (the default accent); Renovation pages = blueprint blue.
   Logo, black, white and fonts stay the same. Text on blue is white; highlights on dark use a light blue. */
body.t-reno { --accent: #1E63D6; --accent-ink: #FFFFFF; }
body.t-reno .btn-primary, body.t-reno .btn-accent, body.t-reno .cta, body.t-reno .cta .eye, body.t-reno .cta a:not(.btn) { color: #FFFFFF; }
body.t-reno .cta .btn-accent { background: #FFFFFF; color: #0E3A86; border-color: #FFFFFF; }
body.t-reno .cta h2 em { box-shadow: inset 0 -0.26em 0 rgba(255, 255, 255, 0.45); }
body.t-reno .band .eye, body.t-reno .dark .eye, body.t-reno .band h2 em, body.t-reno .dark h2 em, body.t-reno .level .badge, body.t-reno .anchorbar .ab-badge { color: #9CC0F5; }
body.t-reno .facts dt { color: #1E63D6 !important; }
.btn-reno { background: #1E63D6; color: #FFFFFF; border-color: #1E63D6; }
.btn-reno:hover { filter: brightness(1.06); }

/* Homepage: "What are you building?" doors */
.paths { padding-block: clamp(10px, 2vw, 24px) clamp(34px, 5vw, 56px); }
.paths h2 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 18px; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.door { display: grid; gap: 12px; align-content: start; border: 2px solid var(--ink); border-radius: 8px; padding: clamp(20px, 2.6vw, 28px); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.door:hover, .door:focus-visible { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--ink); }
.door.nb { background: #FFC20E; color: #161616; }
.door.rn { background: #1E63D6; color: #FFFFFF; }
.door .eye { color: inherit !important; opacity: 0.85; }
.door h3 { font: 800 clamp(26px, 3vw, 32px)/1.05 var(--f-display); margin: 0; }
.door ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 16px; }
.door .from { font: 800 22px/1.1 var(--f-display); }
.door .go { justify-self: start; font-weight: 700; padding: 12px 16px; border-radius: 4px; }
.door.nb .go { background: #161616; color: #FFC20E; }
.door.rn .go { background: #FFFFFF; color: #0E3A86; }
.paths .small { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .door { transition: none; } }

/* Course lists grouped by track */
.trackhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 26px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.trackhead:first-of-type { margin-top: 0; }
.trackhead .trk { font: 800 13px/1 var(--f-display); letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 12px; border-radius: 3px; }
.trackhead.nb .trk { background: #FFC20E; color: #161616; }
.trackhead.rn .trk { background: #1E63D6; color: #FFFFFF; }
.trackhead span:not(.trk) { color: var(--muted); font-size: 15px; }

/* Reno course page */
.risks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.risks .rk { border-left: 4px solid var(--accent); padding: 4px 0 4px 14px; display: grid; gap: 4px; }
.risks .rk b { font: 700 19px/1.2 var(--f-display); }
.risks .rk span { color: var(--muted); font-size: 15.5px; }
.sched-day .brk td { color: var(--muted); font-weight: 600; background: transparent; }
.renopack { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); max-width: 820px; }
.renopack li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.renopack b { font: 700 19px/1.2 var(--f-display); }
.renopack .v { float: right; font: 700 18px/1.2 var(--f-display); }
.renopack .d { color: var(--muted); font-size: 15px; }
/* MN 10-08: on phones the doors come straight after the headline (his pick); the house photo moves below them */
.home-img-phone { display: none; }
@media (max-width: 760px) { .home-img-wide { display: none; } .home-img-phone { display: block; padding-bottom: 28px; } }
.prog.rn .incl li::before { background: #1E63D6; }
/* Quiz: the "What are you building?" choice, and readable answers on the reno blue */
.q0 .opt.chosen { border-color: var(--ink); background: var(--paper-2); box-shadow: inset 6px 0 0 var(--accent); }
body.t-reno .opt.right { color: #FFFFFF; }
body.t-reno .opt.right .k { color: #9CC0F5; }
/* Ad page: renovators who land on the new-build page can switch (MN 10-08) */
.reno-slim { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 16px; align-items: center; margin-top: 22px; padding: 14px 18px; border: 2px solid #1E63D6; border-left-width: 8px; border-radius: 6px; background: #E7F0FD; color: var(--ink); text-decoration: none; }
.reno-slim .trk { font: 800 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; background: #1E63D6; color: #FFFFFF; padding: 7px 10px; border-radius: 3px; }
.reno-slim .txt { font-size: 15.5px; }
.reno-slim .go { font-weight: 700; color: #0E3A86; white-space: nowrap; }
.reno-slim:hover .go, .reno-slim:focus-visible .go { text-decoration: underline; }
@media (max-width: 640px) { .reno-slim { grid-template-columns: 1fr; } .reno-slim .trk { justify-self: start; } }
/* MN 10-08: white text in the blue box at the bottom of reno pages; values in the pack total stay readable on dark */
body.t-reno .cta h2, body.t-reno .cta p { color: #FFFFFF; }
body.t-reno .quote .tot .amt { color: #9CC0F5; }

/* MN 10-08: the shared "What you get" table works on every page (What we teach does not load programs.css). Base rules, then the look-a overrides again so the cascade stays the same. */
.quote { border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); max-width: 920px; }
.quote .qh { display: flex; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 2px solid var(--ink); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.quote .ln { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline; padding: 16px 22px; border-bottom: 1px dashed var(--line); }
.quote .ln .no { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.quote .ln b { font-weight: 600; font-size: 18px; }
.quote .ln p { grid-column: 2 / 3; color: var(--muted); font-size: 15.5px; }
.quote .ln .amt { font-family: var(--f-mono); font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.quote .ln .amt small { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }
.quote .ln.core { background: var(--paper-2); }
.quote .tot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 22px; }
.quote .tot b { font-size: 18px; }
.quote .tot .amt { font-family: var(--f-serif); font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.quote .qh { border-bottom-color: var(--ink); }
.quote .ln .amt { font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.quote .tot { background: var(--ink); color: #FFFFFF; }
.quote .tot .amt { color: var(--accent); font-size: 42px; }
body.t-reno .quote .tot .amt { color: #9CC0F5; }

/* MN 10-08 (phone screenshots): the reno timetable's times need their own line on phones, and the
   "What you get" table stacks label → name + value → description instead of squeezing the name. */
.sched-day td.wk { white-space: nowrap; font-size: 22px; width: 8.5em; }
@media (max-width: 640px) {
  .sched-day tr { grid-template-columns: 1fr; }
  .sched-day td.wk { grid-row: auto; font-size: 20px; padding: 0 0 6px; }
}
@media (max-width: 560px) {
  .quote .ln { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 16px; }
  .quote .ln .no { grid-column: 1 / -1; }
  .quote .ln b { grid-column: 1; }
  .quote .ln .amt { grid-column: 2; }
  .quote .ln p { grid-column: 1 / -1; }
  .quote .qh, .quote .tot { padding-inline: 16px; }
  .quote .tot .amt { font-size: 32px; }
}

/* MN 10-08: pack values struck through and marked Included; each item is also sold on its own at /templates */
.quote .ln .amt s { color: var(--muted); text-decoration-thickness: 2px; }
.quote .ln .amt small.inc { color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }
.quote .tot .amt s { text-decoration-thickness: 3px; }
.pack-note { margin-top: 14px; max-width: 920px; }
@media (min-width: 561px) { .quote .ln .amt { grid-row: span 2; } }  /* the Included line sits beside the description, not above it */