/* pshomestudy.com theme: Hunter & plum, Libre Caslon Text + Fira Sans, castle details on (from the theme lab, 2026-10-17; Harbor navy before that). Tokens first; light by default, dark when the visitor picks it. */
/* Fonts, served from this site (SIL Open Font License: see fonts/OFL-*.txt). Latin + Latin Extended. */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fira-sans-latin-ext-400-normal.ac8411d00429.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fira-sans-latin-400-normal.d26e1b11589f.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: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fira-sans-latin-ext-500-normal.207a74105ab3.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fira-sans-latin-500-normal.9410bb8f89e5.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: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fira-sans-latin-ext-600-normal.cb3ee579c8df.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fira-sans-latin-600-normal.beb3d7395726.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: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fira-sans-latin-ext-700-normal.e5bc5443fc3c.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fira-sans-latin-700-normal.43eb5ca3942e.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: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-latin-ext-400-normal.379413906a36.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-latin-400-normal.6564df5cd887.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: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-caslon-text-latin-ext-700-normal.6cf52fcb3f2a.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-caslon-text-latin-700-normal.882609d7e89f.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: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-latin-ext-400-italic.3bf66a946fd6.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-latin-400-italic.dab39c7e25a9.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; }

:root {
  --paper: #ecf1ea;
  --surface: #ffffff;
  --surface-2: #e2e9df;
  --ink: #1c2622;
  --ink-soft: #4c5954;
  --line: #cfdacb;
  --brand: #2f5a3a;
  --brand-strong: #213f29;
  --brand-tint: #e4efe6;
  --accent: #6b4a6e;
  --accent-tint: #f2e7f3;
  --on-brand: #ffffff;
  --focus: #2f7dd1;
  --shadow: 0 1px 2px rgb(28 38 34 / 6%), 0 8px 24px rgb(28 38 34 / 8%);
  --radius: 14px;
  --radius-sm: 9px;
  --font-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --wrap: 1160px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #121813;
  --surface: #19211b;
  --surface-2: #202921;
  --ink: #e8eee9;
  --ink-soft: #abb8ad;
  --line: #2d382f;
  --brand: #89c295;
  --brand-strong: #acd7b4;
  --brand-tint: #203124;
  --accent: #ceacd1;
  --accent-tint: #2c242d;
  --on-brand: #101a12;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 30%);
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-strong); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: var(--radius-sm); z-index: 20; }
.skip:focus { top: 12px; }

/* Concept ribbon */
.concept {
  background: var(--accent-tint);
  color: var(--ink);
  font-size: 0.875rem;
  text-align: center;
  padding: 6px 16px;
  border-bottom: 1px solid var(--line);
}

/* Utility bar + header */
.utility { border-bottom: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-soft); }
.utility .wrap { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; flex-wrap: wrap; }
.utility a { color: inherit; text-decoration: none; font-weight: 600; }
.utility a:hover { color: var(--brand); }

/* Header: a solid brand-colour bar, so it stands apart from the page */
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 0 rgb(0 0 0 / 8%), 0 4px 14px rgb(0 0 0 / 10%); }
:root[data-theme="dark"] .header { background: var(--brand-tint); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.header .wrap { display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
/* The logo (templates/_mark.html): the tower in an arched window */
.brand-mark { width: 42px; height: 42px; display: block; flex: none; --mk-bg: var(--brand); --mk-fg: var(--on-brand); }
.mark { display: block; width: 100%; height: 100%; }
.mark .mk-bg { fill: var(--mk-bg); }
.mark .mk-fg { fill: var(--mk-fg); }
.header .brand-mark { --mk-bg: var(--on-brand); --mk-fg: var(--brand-strong); }
:root[data-theme="dark"] .header .brand-mark { --mk-bg: var(--brand); --mk-fg: var(--on-brand); }
.brand-name strong { display: block; font: 600 1.15rem/1.1 var(--font-head); }
.header .brand { color: inherit; gap: 14px; }
.header .brand-mark { width: 50px; height: 50px; }
.header .brand-name strong { font-size: 1.55rem; letter-spacing: -0.01em; }
.header .nav a.link { color: inherit; }
.header .nav a.link:hover, .header .nav a.link[aria-current="page"] { background: color-mix(in srgb, currentColor 14%, transparent); }
.header .icon-btn { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 32%, transparent); }
.header .icon-btn:hover { border-color: currentColor; color: inherit; }
.header .btn-primary { background: var(--on-brand); color: var(--brand); }
.header .btn-primary:hover { background: color-mix(in srgb, var(--on-brand) 86%, var(--brand)); color: var(--brand); }
.header .btn-ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.header .btn-ghost:hover { border-color: currentColor; color: inherit; }
.header .cart-link .badge { box-shadow: 0 0 0 2px var(--brand); }
.header :focus-visible { outline-color: currentColor; }
:root[data-theme="dark"] .header .btn-primary { background: var(--brand); color: var(--on-brand); }
:root[data-theme="dark"] .header .btn-primary:hover { background: var(--brand-strong); }
:root[data-theme="dark"] .header .cart-link .badge { box-shadow: 0 0 0 2px var(--brand-tint); }
@media (max-width: 760px) { .nav-actions .signup { display: none; } }
@media (max-width: 600px) { .header .brand-mark { width: 42px; height: 42px; } .header .brand-name strong { font-size: 1.25rem; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav a.link { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem; padding: 8px 12px; border-radius: 8px; }
.nav a.link:hover { background: var(--surface-2); }
.nav-actions { display: flex; gap: 8px; align-items: center; margin-left: 8px; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; }
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.icon-btn svg { width: 20px; height: 20px; }
.menu { display: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 12px; font: 600 1rem var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.95rem; border-radius: 10px; }

/* Hero */
.hero { padding-block: 64px 56px; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 32px; height: 7px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat, repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) left top / 100% 5px no-repeat; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); margin-top: 14px; }
.hero h1 em { font-style: italic; color: var(--brand); }
.hero .lead { font-size: 1.2rem; color: var(--ink-soft); margin-top: 18px; max-width: 34em; }

.finder { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; max-width: 560px; }
.finder label { grid-column: 1 / -1; font-weight: 600; font-size: 0.95rem; }
.select { appearance: none; width: 100%; min-height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23495668' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink); font: 500 1.05rem var(--font-body); padding: 0 44px 0 16px; }
.finder .btn { min-height: 52px; }

.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; padding: 0; list-style: none; color: var(--ink-soft); font-size: 0.95rem; }
.facts strong { display: block; font: 600 1.6rem var(--font-head); color: var(--ink); }

/* Dashboard preview card */
.preview { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 24px; position: relative; }
.preview .tag { position: absolute; top: -12px; right: 20px; background: var(--accent-tint); color: var(--accent); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; }
.preview h2 { font-size: 1.3rem; }
.preview .sub { color: var(--ink-soft); font-size: 0.95rem; margin-top: 4px; }
.licence { margin-top: 20px; padding: 16px; border-radius: var(--radius-sm); background: var(--surface-2); }
.licence-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 0.95rem; }
.licence-head span:last-child { color: var(--ink-soft); font-weight: 500; }
.meter { height: 10px; border-radius: 999px; background: var(--line); margin-top: 12px; overflow: hidden; }
.meter > i { display: block; height: 100%; width: var(--pct, 50%); background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--accent))); border-radius: inherit; }
.licence p { margin-top: 10px; font-size: 0.9rem; color: var(--ink-soft); }
.next { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.next li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; }
.next .dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); flex: none; }
.next .dot svg { width: 16px; height: 16px; }
.next small { display: block; color: var(--ink-soft); font-size: 0.82rem; }

/* Sections */
.section { padding-block: 72px; }
.section.alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.section-head p { color: var(--ink-soft); margin-top: 8px; max-width: 40em; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); }

/* Course cards */
.courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.course { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.course:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow); transform: translateY(-2px); }
.course-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.code { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); text-transform: uppercase; }
.course h3 { font-size: 1.3rem; }
.course .desc { color: var(--ink-soft); font-size: 0.98rem; }
.meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.92rem; color: var(--ink-soft); margin-top: auto; padding-top: 4px; }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta svg { width: 16px; height: 16px; }
.course-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.price { font: 600 1.4rem var(--font-head); }
.price small { font: 500 0.85rem var(--font-body); color: var(--ink-soft); margin-left: 4px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; padding: 0; margin: 0; list-style: none; }
.step { position: relative; padding: 24px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font: 600 1.05rem var(--font-head); margin-bottom: 16px; }
.step h3 { font-size: 1.15rem; }
.step p { color: var(--ink-soft); font-size: 0.98rem; margin-top: 8px; }

/* Formats */
.formats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.format { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.format .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; }
.format .ico svg { width: 24px; height: 24px; }
.format h3 { font-size: 1.15rem; }
.format p { color: var(--ink-soft); font-size: 0.98rem; }
.status { align-self: flex-start; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.status.now { background: var(--brand-tint); color: var(--brand); }
.status.soon { background: var(--accent-tint); color: var(--accent); }

/* Firms band */
.band { border-radius: 22px; background: var(--brand); color: var(--on-brand); padding: 44px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; overflow: hidden; position: relative; }
.band::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: color-mix(in srgb, var(--on-brand) 10%, transparent); }
.band h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: inherit; }
.band p { margin-top: 12px; opacity: .9; }
.band ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; position: relative; z-index: 1; }
.band li { display: flex; gap: 10px; align-items: flex-start; }
.band li svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.band .btn { background: var(--on-brand); color: var(--brand); margin-top: 22px; }
.band .btn:hover { background: var(--paper); }

/* FAQ */
.faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; overflow-x: clip; }   /* the turning + would otherwise widen phone pages */
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.5rem/1 var(--font-body); color: var(--brand); transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); margin-top: 10px; }
.support { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-top: 24px; }
.support strong { display: block; font: 600 1.5rem var(--font-head); margin-top: 6px; }
.support p { color: var(--ink-soft); font-size: 0.95rem; margin-top: 6px; }

/* Footer */
.footer { position: relative; margin-top: 14px; background: var(--surface-2); padding-block: 48px 32px; font-size: 0.95rem; color: var(--ink-soft); }
/* Battlements along the footer's top edge */
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 15px; background: var(--surface-2); -webkit-mask: repeating-linear-gradient(90deg, #000 0 30px, transparent 30px 46px); mask: repeating-linear-gradient(90deg, #000 0 30px, transparent 30px 46px); }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer h3 { font: 600 0.85rem var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--brand); }
.footer address { font-style: normal; margin-top: 12px; line-height: 1.7; }
.fine { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px; font-size: 0.85rem; }

/* Responsive */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .courses { grid-template-columns: repeat(2, 1fr); }
  .steps, .formats { grid-template-columns: repeat(2, 1fr); }
  .band { grid-template-columns: 1fr; padding: 32px; }
  .faq { grid-template-columns: 1fr; gap: 16px; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav .link, .nav-actions .signin { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu-panel { position: absolute; right: 0; top: 52px; width: min(280px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; display: grid; }
  .menu-panel a { padding: 12px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
  .menu-panel a:hover { background: var(--surface-2); }
}
@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  .hero { padding-block: 40px; }
  .finder { grid-template-columns: 1fr; }
  .finder .btn { width: 100%; }
  .courses, .steps, .formats { grid-template-columns: 1fr; }
  .section { padding-block: 52px; }
  .footer .cols { grid-template-columns: 1fr; }
  .utility .hours { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Concept navigation (review only) ---------- */
.concept nav { display: inline-flex; gap: 6px; margin-left: 10px; flex-wrap: wrap; justify-content: center; }
.concept nav a { color: var(--ink); font-weight: 600; text-decoration: none; padding: 1px 8px; border-radius: 6px; }
.concept nav a[aria-current="page"] { background: var(--surface); border: 1px solid var(--line); }

/* ---------- Inner page header ---------- */
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink-soft); padding: 0; margin: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.page-head { padding-block: 36px 28px; border-bottom: 1px solid var(--line); }
.page-head .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.page-head h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-top: 14px; text-wrap: balance; }
.page-head .lead { color: var(--ink-soft); margin-top: 12px; max-width: 38em; }
.board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; }
.board-row { display: flex; justify-content: space-between; gap: 16px; font-size: 0.95rem; border-bottom: 1px dashed var(--line); padding-bottom: 10px; }
.board-row:last-child { border-bottom: 0; padding-bottom: 0; }
.board-row span:first-child { color: var(--ink-soft); }
.board-row strong { text-align: right; }
.example { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }

/* ---------- Catalog layout ---------- */
.catalog { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 28px; padding-block: 32px 72px; align-items: start; }
.filters { display: grid; gap: 22px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); }
.filters fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.filters legend { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 1rem; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.check small { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; color: var(--ink-soft); font-size: 0.95rem; }
.select.small { min-height: 42px; width: auto; font-size: 0.95rem; }
.rows { display: grid; gap: 12px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.row h3 { font-size: 1.15rem; }
.row .meta { margin-top: 6px; padding-top: 0; }
.row-buy { display: flex; align-items: center; gap: 14px; }
.row-buy .price { font-size: 1.25rem; min-width: 3.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.btn.added { background: var(--brand-tint); color: var(--brand); }
.empty { padding: 28px; text-align: center; color: var(--ink-soft); border: 1px dashed var(--line); border-radius: var(--radius); }

.cart { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 14px; }
.cart h2 { font-size: 1.25rem; }
.cart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; }
.cart li { display: flex; justify-content: space-between; gap: 12px; }
.cart li span:last-child { font-variant-numeric: tabular-nums; }
.cart .line { display: flex; justify-content: space-between; font-size: 0.95rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cart .total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; font-weight: 600; }
.cart .total strong { font: 600 1.5rem var(--font-head); font-variant-numeric: tabular-nums; }
.discount { font-size: 0.9rem; border-radius: var(--radius-sm); padding: 10px 12px; background: var(--brand-tint); color: var(--brand-strong); }
.discount.pending { background: var(--accent-tint); color: var(--ink); }
.meter.small { height: 6px; margin-top: 8px; }

/* ---------- Dashboard layout ---------- */
.dash { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding-block: 32px 72px; align-items: start; }
.side { display: grid; gap: 4px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); }
.side a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.side a svg { width: 18px; height: 18px; color: var(--ink-soft); }
.side a:hover { background: var(--surface-2); }
.side a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-strong); }
.side a[aria-current="page"] svg { color: var(--brand); }
/* Account sidebar: the dark mode switch (the only place to change the theme) */
.side-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--ink); font-weight: 500; cursor: pointer; white-space: nowrap; }
.side-toggle:hover { background: var(--surface-2); }
.side-toggle svg { width: 18px; height: 18px; color: var(--ink-soft); flex: none; }
.side-toggle .switch { margin-left: auto; }
.dash-main { display: grid; gap: 28px; min-width: 0; }
.greet { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.greet h1 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
.greet p { color: var(--ink-soft); margin-top: 6px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 16px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { font-size: 1.3rem; }
.licenses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lic { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; display: grid; gap: 10px; background: var(--paper); }
.lic-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.lic h3 { font-size: 1.1rem; }
.lic .sub { color: var(--ink-soft); font-size: 0.9rem; }
.lic .hours { font: 600 1.6rem var(--font-head); font-variant-numeric: tabular-nums; }
.lic .hours small { font: 500 0.95rem var(--font-body); color: var(--ink-soft); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: var(--brand-tint); color: var(--brand); }
.pill.due { background: var(--accent-tint); color: var(--accent); }
.lic .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.progress li { border-radius: var(--radius-sm); padding: 12px; background: var(--surface-2); font-size: 0.92rem; display: grid; gap: 4px; }
.progress li b { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.progress li.done { background: var(--brand-tint); }
.progress li.done b { color: var(--brand); }
.progress li.now { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--surface); }
.course-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.course-now h3 { font-size: 1.25rem; }
.course-now p { color: var(--ink-soft); font-size: 0.95rem; margin-top: 4px; }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.data th { text-align: left; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data a { font-weight: 600; text-decoration: none; }
.banner-list .row-acts .link-btn { padding: 0; font-weight: 600; text-decoration: none; color: var(--brand); }
.banner-list .row-acts .link-btn.danger { color: #a33b2b; }
:root[data-theme="dark"] .banner-list .row-acts .link-btn.danger { color: #f0a090; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.toggle:last-child { border-bottom: 0; }
.toggle small { display: block; color: var(--ink-soft); font-size: 0.88rem; }
.switch { appearance: none; width: 46px; height: 26px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .15s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 25%); transition: transform .15s ease; }
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(20px); }

@media (max-width: 1100px) {
  .catalog { grid-template-columns: 220px minmax(0, 1fr); }
  .catalog .cart { grid-column: 1 / -1; position: static; }
}
@media (max-width: 900px) {
  .page-head .wrap { grid-template-columns: 1fr; }
  .catalog { grid-template-columns: 1fr; }
  .filters { position: static; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .dash { grid-template-columns: 1fr; }
  .side { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .side a { white-space: nowrap; }
  .two-col, .licenses { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .row { grid-template-columns: 1fr; }
  .row-buy { justify-content: space-between; }
  .progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-now { grid-template-columns: 1fr; }
}

/* ---------- States page: tile map (from concept C, in A's colors) ---------- */
:root { --t0: #dbe4d7; --t1: #e4efe6; --t2: #bad3be; --t3: #4c7d58; --t4: #2f5a3a; --on-t3: #ffffff; }
:root[data-theme="dark"] { --t0: #1d241e; --t1: #203124; --t2: #33513a; --t3: #67a275; --t4: #89c295; --on-t3: #101a12; }
.finder-alt { margin-top: 12px; font-size: 0.98rem; color: var(--ink-soft); }
.state-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.state-tools label { display: block; font-weight: 600; margin-bottom: 6px; }
.mapcard { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); padding: 24px; display: grid; gap: 18px; box-shadow: var(--shadow); }
.map-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.map-head h2 { font-size: 1.35rem; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; color: var(--ink-soft); list-style: none; padding: 0; margin: 0; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--line); }
.map { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 880px; margin-inline: auto; }
.tile { aspect-ratio: 1; border: 0; border-radius: 9px; cursor: pointer; display: grid; place-items: center; align-content: center; font: 700 clamp(0.6rem, 1.15vw, 0.95rem)/1 var(--font-body); color: var(--ink); padding: 0; transition: transform .12s ease, box-shadow .12s ease; }
.tile small { display: block; font-weight: 500; font-size: 0.78em; opacity: .85; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile[data-bin="0"] { background: repeating-linear-gradient(135deg, var(--t0) 0 5px, var(--surface) 5px 8px); color: var(--ink-soft); }
.tile[data-bin="1"] { background: var(--t1); }
.tile[data-bin="2"] { background: var(--t2); }
.tile[data-bin="3"] { background: var(--t3); color: var(--on-t3); }
.tile[data-bin="4"] { background: var(--t4); color: var(--on-brand); }
.tile[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.detail { border-top: 1px solid var(--line); padding-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 92px; }
.detail h3 { font-size: 1.5rem; }
.detail p { color: var(--ink-soft); margin-top: 6px; font-size: 1rem; }
.detail .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.beyond { font-size: 0.92rem; color: var(--ink-soft); }
.az { columns: 4 200px; column-gap: 28px; list-style: none; padding: 0; margin: 20px 0 0; }
.az li { break-inside: avoid; display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 1rem; }
.az li span { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.az li.none a { color: var(--ink-soft); }
.az li[hidden] { display: none; }
.map-teaser { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); padding: 28px 32px; }
.map-teaser h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.map-teaser p { color: var(--ink-soft); margin: 8px 0 18px; }
.mini-map { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; }
.mini-map i { aspect-ratio: 1; border-radius: 3px; background: var(--t2); }
.mini-map i.b0 { background: var(--t0); } .mini-map i.b1 { background: var(--t1); } .mini-map i.b3 { background: var(--t3); } .mini-map i.b4 { background: var(--t4); }
@media (max-width: 760px) {
  .state-tools { grid-template-columns: 1fr; }
  .map-teaser { grid-template-columns: 1fr; padding: 22px; }
  .mini-map { max-width: 260px; }
}
@media (max-width: 620px) {
  .mapcard { padding: 14px; }
  .map { gap: 3px; }
  .tile { border-radius: 5px; }
  .tile small { display: none; }
  .detail { grid-template-columns: 1fr; }
}

/* ---------- States page: Canada, territories, national certification ---------- */
.regions { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.region h3 { font: 600 0.85rem var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.region .strip { display: grid; grid-template-columns: repeat(var(--cols, 13), minmax(0, 1fr)); gap: 5px; }
.region .tile { font-size: clamp(0.6rem, 1vw, 0.85rem); }
.region .tile.wide { aspect-ratio: auto; min-height: 100%; padding: 8px 4px; }
.region p { font-size: 0.85rem; color: var(--ink-soft); margin-top: 8px; }
.az-group { margin-top: 28px; }
.az-group h3 { font-size: 1.25rem; }
@media (max-width: 760px) { .regions { grid-template-columns: 1fr; } }

/* ---------- Shared: tables, forms, notes ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tr.mine td { background: var(--brand-tint); }
.table .muted { color: var(--ink-soft); }
.note { font-size: 0.92rem; color: var(--ink-soft); }
.form { display: grid; gap: 16px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 0.98rem; }
.form label small { font-weight: 400; color: var(--ink-soft); }
.input, .textarea { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 400 1rem var(--font-body); padding: 10px 14px; }
.textarea { min-height: 120px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.card-box { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 28px; box-shadow: var(--shadow); }
@media (max-width: 600px) { .form .two { grid-template-columns: 1fr; } .card-box { padding: 20px; } }

/* ---------- Course detail ---------- */
.course-hero { padding-block: 32px 36px; border-bottom: 1px solid var(--line); }
.course-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.course-hero h1 { font-size: clamp(2rem, 3.8vw, 3rem); margin-top: 14px; text-wrap: balance; }
.course-hero .lead { color: var(--ink-soft); margin-top: 14px; max-width: 40em; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.tags .chip.plain { background: var(--surface-2); color: var(--ink); }
.buybox { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow); padding: 22px; display: grid; gap: 14px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); }
.buybox label { font-weight: 600; font-size: 0.92rem; }
.buybox .facts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buybox .fact { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.buybox .fact small { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.buybox .fact strong { font: 600 1.35rem/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
.buybox .btn { width: 100%; }
.buybox .ok { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); }
.buybox .ok svg { width: 18px; height: 18px; flex: none; color: var(--brand); margin-top: 3px; }
.course-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; padding-block: 44px 72px; }
.prose h2 { font-size: 1.6rem; margin-bottom: 12px; }
.prose > section + section { margin-top: 44px; }
.prose p + p { margin-top: 12px; }
.learn { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.learn li { display: flex; gap: 10px; align-items: flex-start; }
.learn svg { width: 20px; height: 20px; flex: none; color: var(--brand); margin-top: 4px; }
.author { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; }
.avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; font: 600 1.5rem var(--font-head); }
.author h3 { font-size: 1.2rem; }
.author .role { color: var(--ink-soft); font-size: 0.95rem; margin-top: 2px; }
.author p { margin-top: 10px; }
.side-list { display: grid; gap: 12px; }
.mini-course { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--ink); }
.mini-course:hover { border-color: var(--brand); color: var(--ink); }
.mini-course .code { display: block; }
.mini-course strong { display: block; font: 600 1.05rem/1.3 var(--font-head); margin-top: 4px; }
.mini-course span.meta-line { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-top: 6px; }
.table-tools { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin: 16px 0 12px; }
.table-tools .input { width: min(280px, 100%); min-height: 42px; }
@media (max-width: 1000px) {
  .course-hero .wrap, .course-body { grid-template-columns: minmax(0, 1fr); }
  .buybox { position: static; }
}
@media (max-width: 600px) { .learn { grid-template-columns: 1fr; } }

/* ---------- Funeral homes (firm accounts) ---------- */
.firm-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.team { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 14px; }
.team-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.team-head h2 { font-size: 1.25rem; }
.team .table th, .team .table td { padding: 10px 10px; font-size: 0.92rem; }
.team .meter { margin-top: 6px; height: 8px; }
.pill { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: var(--brand-tint); color: var(--brand); }
.pill.due { background: var(--accent-tint); color: var(--accent); }
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.benefit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.benefit .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; margin-bottom: 14px; }
.benefit .ico svg { width: 22px; height: 22px; }
.benefit h3 { font-size: 1.15rem; }
.benefit p { color: var(--ink-soft); margin-top: 8px; font-size: 0.98rem; }
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
@media (max-width: 1000px) { .firm-hero .wrap, .split { grid-template-columns: 1fr; } .benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .benefits { grid-template-columns: 1fr; } .team .hide-sm { display: none; } }

/* ---------- About and contact ---------- */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.contact-list { display: grid; gap: 18px; margin: 0; }
.contact-list div { display: grid; gap: 2px; }
.contact-list dt { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.contact-list dd { margin: 0; font-size: 1.05rem; }
.contact-list dd.big { font: 600 1.6rem var(--font-head); }
@media (max-width: 1000px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .values { grid-template-columns: 1fr; } }
.steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .steps.three { grid-template-columns: 1fr; } }

/* ---------- Header: cart count ---------- */
.cart-link { position: relative; }
.cart-link .badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 0.72rem/20px var(--font-body); text-align: center; }
.cart-link .badge:empty { display: none; }

/* ---------- Cart, checkout, order complete ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; padding-block: 32px 72px; align-items: start; }
.flow-steps { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 18px 0 0; font-size: 0.9rem; }
.flow-steps li { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.flow-steps li + li::before { content: ""; width: 24px; height: 1px; background: var(--line); }
.flow-steps b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); font-weight: 600; font-size: 0.85rem; background: var(--surface); }
.flow-steps .done b { background: var(--brand-tint); color: var(--brand); border-color: transparent; }
.flow-steps [aria-current="step"] { color: var(--ink); font-weight: 600; }
.flow-steps [aria-current="step"] b { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.licence-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; }
.licence-bar p { font-size: 0.98rem; }
.licence-bar .select { min-height: 42px; width: auto; font-size: 0.95rem; }
.items { display: grid; gap: 12px; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.item h3 { font-size: 1.12rem; margin-top: 4px; }
.item .meta { margin-top: 6px; padding-top: 0; }
.item .price { font-size: 1.2rem; text-align: right; min-width: 3.5ch; font-variant-numeric: tabular-nums; }
.link-btn { background: none; border: 0; padding: 6px; color: var(--ink-soft); font: 500 0.92rem var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 6px; }
.link-btn:hover { color: var(--brand); }
.suggest { margin-top: 24px; }
.suggest h2 { font-size: 1.2rem; margin-bottom: 12px; }
.suggest .item { background: var(--surface-2); border-style: dashed; }
.summary { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); }
.summary .btn { width: 100%; }
.trust { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; font-size: 0.88rem; color: var(--ink-soft); }
.trust li { display: flex; gap: 8px; align-items: flex-start; }
.trust svg { width: 16px; height: 16px; flex: none; color: var(--brand); margin-top: 3px; }
.panel-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.panel-box + .panel-box { margin-top: 16px; }
.panel-box h2 { font-size: 1.25rem; margin-bottom: 4px; }
.panel-box .sub { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 16px; }
.who { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.choice { display: grid; gap: 10px; }
.choice label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; }
.choice label:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); }
.choice strong { display: block; }
.choice small { color: var(--ink-soft); font-size: 0.9rem; }
.handoff { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; }
.handoff svg { width: 18px; height: 18px; flex: none; color: var(--brand); margin-top: 2px; }
.state-switch { display: inline-flex; gap: 4px; margin-left: 10px; }
.done-hero { text-align: center; padding-block: 48px 8px; }
.done-hero .seal { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.done-hero .seal svg { width: 34px; height: 34px; }
.done-hero .seal.wait { background: var(--accent-tint); color: var(--accent); }
.done-hero .seal.wait svg { animation: spin 1.4s linear infinite; }
.done-hero h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.done-hero p { color: var(--ink-soft); margin: 12px auto 0; max-width: 34em; }
.done-body { width: min(760px, 100% - 32px); margin: 32px auto 72px; display: grid; gap: 16px; }
.start-list { display: grid; gap: 10px; }
.start-list .item { grid-template-columns: minmax(0, 1fr) auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1000px) { .flow { grid-template-columns: 1fr; } .summary { position: static; } }
@media (max-width: 600px) {
  .item { grid-template-columns: minmax(0, 1fr) auto; }
  .item .link-btn { grid-column: 1 / -1; justify-self: start; padding-left: 0; }
  .start-list .item { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .done-hero .seal.wait svg { animation: none; } }

/* Header: the four main links fold into the menu below 1240 px (they wrap otherwise) */
.nav a.link { white-space: nowrap; }
@media (max-width: 1240px) {
  .nav .link { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu-panel { position: absolute; right: 0; top: 52px; width: min(280px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; display: grid; z-index: 20; }
  .menu-panel a { padding: 12px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
  .menu-panel a:hover { background: var(--surface-2); }
  .menu-panel a[aria-current="page"] { background: var(--brand-tint); color: var(--brand); }
}
.cart .line[hidden] { display: none; }
.flow > .summary { grid-column: 2; grid-row: 1 / span 2; }
.flow > .suggest { grid-column: 1; margin-top: 0; }
@media (max-width: 1000px) { .flow > .summary, .flow > .suggest { grid-column: auto; grid-row: auto; } }

/* ---------- Course catalog (all courses) ---------- */
.catalog.catalog-all { grid-template-columns: 240px minmax(0, 1fr); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.cat-card:hover, .cat-card:target { border-color: var(--brand); }
.cat-card { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 92px); }
.cat-card > .btn, .cat-card form .btn { width: 100%; }
.cat-card h3 { font-size: 1.12rem; line-height: 1.3; }
.cat-card h3 a { color: var(--ink); text-decoration: none; }
.cat-card h3 a:hover { color: var(--brand); text-decoration: underline; }
.cat-card .desc { color: var(--ink-soft); font-size: 0.95rem; }
.cat-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.88rem; color: var(--ink-soft); }
.cat-foot span { display: inline-flex; align-items: center; gap: 5px; }
.cat-foot svg { width: 15px; height: 15px; }
.cat-foot .price { font-size: 1.15rem; color: var(--ink); }
.chip.law { background: var(--accent-tint); color: var(--accent); }
@media (max-width: 760px) { .catalog.catalog-all { grid-template-columns: 1fr; } .catalog-all .filters { position: static; } }
.page-head.tools-wide .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cat-card .course-top { gap: 10px; align-items: flex-start; }
.cat-card .code { white-space: nowrap; flex: none; margin-top: 4px; }
.cat-card .chip { text-align: right; }
.check input { flex: none; }
.filters-box { display: grid; gap: 22px; }
.filters-box > summary { display: none; }
.filters-box[open] { display: grid; }
@media (max-width: 760px) {
  .filters-box { display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 16px; }
  .filters-box > summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-weight: 600; cursor: pointer; list-style: none; }
  .filters-box > summary::-webkit-details-marker { display: none; }
  .filters-box > summary::after { content: "+"; font-size: 1.4rem; color: var(--brand); }
  .filters-box[open] > summary::after { content: "−"; }
  .filters-box[open] { display: grid; gap: 18px; padding-bottom: 16px; }
}
@media (max-width: 900px) { .page-head.tools-wide .wrap { grid-template-columns: 1fr; } }
.filters-box > fieldset + fieldset { margin-top: 4px; }

/* ---------- Account area (learner and funeral home) ---------- */
.side-group { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 14px 12px 4px; }
.side-group:first-child { padding-top: 0; }
.side .count { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.alert { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--radius); padding: 14px 16px; background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.alert svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.alert p { font-size: 0.98rem; }
.alert .btn { margin-left: auto; flex: none; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat strong { display: block; font: 600 1.9rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-soft); font-size: 0.92rem; }
.stat.warn strong { color: var(--accent); }
.tabs { display: inline-flex; gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 4px; flex-wrap: wrap; }
.tabs button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; font: 600 0.95rem var(--font-body); color: var(--ink-soft); cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.tabs button small { font-weight: 500; margin-left: 4px; }
.list { display: grid; gap: 0; }
.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row h3 { font-size: 1.05rem; }
.list-row p { color: var(--ink-soft); font-size: 0.92rem; margin-top: 3px; }
.list-row .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tag { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink-soft); margin-left: 6px; vertical-align: middle; }
.tag.firm { background: var(--accent-tint); color: var(--accent); }
.mini-meter { display: grid; gap: 4px; min-width: 120px; font-size: 0.88rem; }
.mini-meter .meter { margin-top: 0; height: 7px; }
.person { display: flex; gap: 10px; align-items: center; }
.person .avatar { width: 36px; height: 36px; font-size: 0.85rem; flex: none; }
.person small { display: block; color: var(--ink-soft); font-size: 0.85rem; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: var(--surface-2); }
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; font-size: 0.98rem; }
.dl dt { color: var(--ink-soft); }
.dl dd { margin: 0; }
.danger { color: #a33b2b; }
:root[data-theme="dark"] .danger { color: #f0a090; }
.btn-danger { background: transparent; border-color: color-mix(in srgb, #a33b2b 50%, transparent); color: #a33b2b; }
:root[data-theme="dark"] .btn-danger { border-color: color-mix(in srgb, #f0a090 50%, transparent); color: #f0a090; }
dialog.modal { border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog.modal::backdrop { background: rgb(10 20 16 / 45%); }
dialog.modal form { padding: 24px; }
dialog.modal h2 { font-size: 1.4rem; }
dialog.modal .acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.pick { display: grid; gap: 8px; }
.pick label { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; background: var(--surface); }
.pick label:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
.pick strong { display: block; }
.pick small { color: var(--ink-soft); font-size: 0.88rem; }
.pick .price { font-size: 1.05rem; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .list-row { grid-template-columns: minmax(0, 1fr); }
  .list-row .acts { justify-content: flex-start; }
  .alert { flex-wrap: wrap; }
  .alert .btn { margin-left: 0; }
  .side-group { display: none; }
}
@media (max-width: 900px) { .side-group { display: none; } }
.concept nav .grp { color: var(--ink-soft); font-weight: 500; padding: 1px 2px 1px 10px; }
.concept nav .grp:first-child { padding-left: 2px; }

/* ---------- Office (staff back office) ---------- */
.office-bar { background: var(--brand-strong); color: var(--on-brand); }
:root[data-theme="dark"] .office-bar { background: #111a13; color: var(--ink); }
.office-bar .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; width: min(1360px, 100% - 32px); }
.office-bar .brand-mark { background: var(--on-brand); color: var(--brand-strong); }
.office-bar .who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.office-bar .icon-btn { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.office-name { font: 600 1.15rem/1.1 var(--font-head); color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.office-name small { font: 500 0.75rem var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; opacity: .75; }
.office-search { flex: 1; max-width: 520px; position: relative; }
.office-search input { width: 100%; min-height: 42px; border-radius: 10px; border: 1px solid transparent; padding: 0 14px 0 38px; font: 400 0.98rem var(--font-body); background: color-mix(in srgb, var(--on-brand) 14%, transparent); color: inherit; }
.office-search input::placeholder { color: inherit; opacity: .75; }
.office-search svg { position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; opacity: .8; }
.office .dash { width: min(1360px, 100% - 32px); }
.office-foot { padding: 20px 0 32px; color: var(--ink-soft); font-size: 0.85rem; }
.queue .list-row h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.count-badge { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font: 700 0.85rem var(--font-body); }
.count-badge.ok { background: var(--brand-tint); color: var(--brand); }
.count-badge.bad { background: #f7e1dc; color: #a33b2b; }
.pill.bad { background: #f7e1dc; color: #a33b2b; }
:root[data-theme="dark"] .pill.bad, :root[data-theme="dark"] .count-badge.bad { background: #3a1f1a; color: #f0a090; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.toolbar label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.toolbar .input, .toolbar .select { min-height: 42px; font-size: 0.95rem; width: auto; }
.rec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.rec-head .meta-line { color: var(--ink-soft); font-size: 0.95rem; margin-top: 4px; }
.rec-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tabpanel[hidden] { display: none; }
.note-item { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; }
.note-item small { display: block; color: var(--ink-soft); font-size: 0.82rem; }
.report-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.report-group h3 { font-size: 1.1rem; margin-bottom: 8px; }
.report-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.report-group li button, .report-group li a { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; font: 500 0.95rem var(--font-body); color: var(--ink); cursor: pointer; text-decoration: none; display: block; }
.report-group li button:hover, .report-group li a:hover { background: var(--surface-2); }
.report-group li button[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-strong); }
.report-group li small { display: block; color: var(--ink-soft); font-weight: 400; font-size: 0.82rem; }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.check-yes { color: var(--brand); font-weight: 700; }
.check-no { color: var(--ink-soft); }
@media (max-width: 760px) { .office-search { display: none; } .rec-head { grid-template-columns: 1fr; } .rec-actions { justify-content: flex-start; } }
.panel, .report-group { align-content: start; }
.table-wrap table.data th, .table-wrap table.data td { padding-left: 14px; }
.table-wrap table.data th { padding-top: 12px; background: var(--surface-2); }
.office-foot .wrap { width: min(1360px, 100% - 32px); }

/* ---------- Custom report builder ---------- */
.builder { display: grid; grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.builder-steps { display: grid; gap: 16px; }
.builder-preview { position: sticky; top: 16px; }
.step-title { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.step-title span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font: 600 0.9rem var(--font-body); }
.field-group { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; }
.field-group + .field-group { margin-top: 12px; }
.field-group legend { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.field-group .check { font-size: 0.95rem; }
.col-order { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.col-order li { display: grid; grid-template-columns: auto minmax(0, 0.8fr) minmax(0, 1.4fr) auto; align-items: center; gap: 8px; background: var(--brand-tint); color: var(--brand-strong); border-radius: 8px; padding: 4px 6px 4px 8px; font-size: 0.88rem; font-weight: 600; }
.col-order li.dragging { opacity: .45; }
.col-order li.drop-before { box-shadow: 0 -3px 0 var(--brand); }
.col-order .col-handle { cursor: grab; color: var(--muted); user-select: none; }
.col-order .col-inputs { display: flex; gap: 6px; min-width: 0; }
.col-order .col-inputs .input { min-height: 34px; padding: 4px 8px; font-size: 0.88rem; font-weight: 400; min-width: 0; flex: 1; }
.col-order .col-acts { display: flex; }
.col-order .link-btn { padding: 2px 6px; text-decoration: none; color: inherit; }
.col-order .link-btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 600px) { .col-order li { grid-template-columns: auto minmax(0, 1fr) auto; } .col-order .col-inputs { grid-column: 1 / -1; } }
.filter-rows { display: grid; gap: 8px; }
.filter-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.filter-row .select, .filter-row .input { min-height: 42px; font-size: 0.95rem; }
.saved-list li a { display: flex; justify-content: space-between; gap: 10px; }
@media (max-width: 1100px) { .builder { grid-template-columns: 1fr; } .builder-preview { position: static; } }
@media (max-width: 600px) { .filter-row { grid-template-columns: 1fr 1fr; } }
.builder-preview table.data td, .builder-preview table.data th { white-space: nowrap; }

/* ---------- App additions (not in the design drafts) ---------- */
a.tile { text-decoration: none; }
.filters a.check { color: var(--ink); text-decoration: none; padding: 2px 0; }
.filters a.check[aria-current="true"] { color: var(--brand); font-weight: 600; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---------- Sign-in pages and account forms ---------- */
.messages { padding-top: 16px; display: grid; gap: 8px; }
.msg { border-radius: var(--radius-sm); padding: 10px 14px; background: var(--brand-tint); color: var(--brand-strong); font-size: 0.95rem; }
.msg.error, .msg.warning { background: var(--accent-tint); color: var(--ink); }
.auth-wrap { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 400px); gap: 40px; justify-content: center; align-items: start; }
.auth-card { display: grid; gap: 14px; }
.auth-title { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.auth-subtitle { font-size: 1.25rem; margin-top: 8px; }
.auth-p { color: var(--ink-soft); }
.auth-help { padding-top: 12px; display: grid; gap: 10px; color: var(--ink-soft); font-size: 0.98rem; }
.auth-help h2 { font-size: 1.2rem; color: var(--ink); }
.auth-panel { display: grid; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.auth-panel:last-child { border-bottom: 0; }
.auth-panel h2 { font-size: 1.25rem; }
.authform-panel { gap: 14px; }
.authform .fieldrow { display: grid; gap: 6px; }
.authform .fieldrow > label { font-weight: 600; font-size: 0.98rem; }
.form .fieldrow > label { display: block; }   /* keeps "(optional)" on the label's line */
.fieldrow > label small { font-weight: 400; color: var(--ink-soft); }
.authform .checkrow { grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
/* A long form in parts (a customer's details): each part a fieldset with a small heading */
.form-part { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.form-part + .form-part { border-top: 1px solid var(--line); padding-top: 18px; }
.form-part legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.form-part .form-note { margin: 0; }
.authform .checkrow > label { font-weight: 500; }
.authform .checkrow small { grid-column: 2; }
.authform input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .authform select, .authform textarea {
  width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 400 1rem var(--font-body); padding: 10px 14px; }
.authform textarea { min-height: 80px; }
.authform input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand); }
.authform .help { color: var(--ink-soft); font-size: 0.88rem; }
.authform .help ul { margin: 4px 0 0; padding-left: 18px; }
.authform .error { color: #a33b2b; font-weight: 600; font-size: 0.9rem; }
.authform .has-error input, .authform .has-error select { border-color: #a33b2b; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.auth-card a.link-btn, .form-actions .link-btn { padding-left: 0; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } }
.pill:not(.ok):not(.due):not(.bad) { background: var(--surface-2); color: var(--ink-soft); }
.cart-link .badge:empty { display: none; }

/* ---------- Quiz and evaluation ---------- */
.quiz { display: grid; gap: 14px; }
.quiz .q { border: 1px solid var(--line); margin: 0; }
.quiz legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font: 600 1.08rem/1.45 var(--font-body); }
.quiz legend .code { display: block; margin-bottom: 4px; }
.qopt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.qopt:hover { background: var(--surface-2); }
.qopt:has(input:checked) { background: var(--brand-tint); }
.qopt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); }
.quiz-submit { position: sticky; bottom: 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 0; background: var(--paper); border-top: 1px solid var(--line); }
table.eval th[scope="row"] { font-weight: 500; text-align: left; }
table.eval input { width: 20px; height: 20px; accent-color: var(--brand); }
.panel details summary { cursor: pointer; font-weight: 600; }
table.eval tbody th { text-transform: none; letter-spacing: 0; font-size: 0.98rem; color: var(--ink); background: transparent; font-weight: 500; }

/* Castle details: a faint tower (with or without trees) behind a few sections (used sparingly).
   Drawn in the brand colour at low strength, so they follow the palette and dark mode. */
.deco { position: relative; isolation: isolate; }
.deco::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--brand); opacity: 0.07; }
:root[data-theme="dark"] .deco::before { opacity: 0.1; }
.deco-tower::before, .deco-tower-trees::before, .deco-tower-left::before { bottom: 0; height: min(calc(100% - 24px), 460px); aspect-ratio: 2 / 3; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 300%22%3E%3Cdefs%3E%3Cmask id=%22m%22%3E%3Crect width=%22200%22 height=%22300%22 fill=%22%23fff%22/%3E%3Cpath fill=%22%23000%22 d=%22M56 81h4v9h-4ZM64 81h4v9h-4ZM72 81h4v9h-4ZM80 81h4v9h-4ZM88 81h4v9h-4ZM96 81h4v9h-4ZM104 81h4v9h-4ZM112 81h4v9h-4ZM120 81h4v9h-4ZM128 81h4v9h-4ZM136 81h4v9h-4ZM144 81h4v9h-4ZM52 69H148V71.5H52Z M60 160H140V162H60Z M60 236H140V238H60Z M97 20H103V31H97ZM91 144V122.5a4.5 4.5 0 0 1 9 0V144ZM111 204V186.0a4.0 4.0 0 0 1 8 0V204ZM79 224V209.5a3.5 3.5 0 0 1 7 0V224ZM91 286V261.0a9.0 9.0 0 0 1 18 0V286Z%22/%3E%3C/mask%3E%3C/defs%3E%3Cg fill=%22%23fff%22%3E%3Cpath mask=%22url%28%23m%29%22 d=%22M88 14L100 0L112 14V40H88ZM50 78V30H60V40H68V30H78V40H86V30H96V40H104V30H114V40H122V30H132V40H140V30H150V78ZM50 78H150L140 96H60Z M60 95H140V288H60Z M0 300Q100 268 200 300Z%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / contain; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 300%22%3E%3Cdefs%3E%3Cmask id=%22m%22%3E%3Crect width=%22200%22 height=%22300%22 fill=%22%23fff%22/%3E%3Cpath fill=%22%23000%22 d=%22M56 81h4v9h-4ZM64 81h4v9h-4ZM72 81h4v9h-4ZM80 81h4v9h-4ZM88 81h4v9h-4ZM96 81h4v9h-4ZM104 81h4v9h-4ZM112 81h4v9h-4ZM120 81h4v9h-4ZM128 81h4v9h-4ZM136 81h4v9h-4ZM144 81h4v9h-4ZM52 69H148V71.5H52Z M60 160H140V162H60Z M60 236H140V238H60Z M97 20H103V31H97ZM91 144V122.5a4.5 4.5 0 0 1 9 0V144ZM111 204V186.0a4.0 4.0 0 0 1 8 0V204ZM79 224V209.5a3.5 3.5 0 0 1 7 0V224ZM91 286V261.0a9.0 9.0 0 0 1 18 0V286Z%22/%3E%3C/mask%3E%3C/defs%3E%3Cg fill=%22%23fff%22%3E%3Cpath mask=%22url%28%23m%29%22 d=%22M88 14L100 0L112 14V40H88ZM50 78V30H60V40H68V30H78V40H86V30H96V40H104V30H114V40H122V30H132V40H140V30H150V78ZM50 78H150L140 96H60Z M60 95H140V288H60Z M0 300Q100 268 200 300Z%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / contain; }
.deco-tower::before, .deco-tower-trees::before { right: max(8px, calc(50% - 720px)); }
.deco-tower-trees::before { aspect-ratio: 2 / 3; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 300%22%3E%3Cdefs%3E%3Cmask id=%22m%22%3E%3Crect width=%22200%22 height=%22300%22 fill=%22%23fff%22/%3E%3Cpath fill=%22%23000%22 d=%22M56 81h4v9h-4ZM64 81h4v9h-4ZM72 81h4v9h-4ZM80 81h4v9h-4ZM88 81h4v9h-4ZM96 81h4v9h-4ZM104 81h4v9h-4ZM112 81h4v9h-4ZM120 81h4v9h-4ZM128 81h4v9h-4ZM136 81h4v9h-4ZM144 81h4v9h-4ZM52 69H148V71.5H52Z M60 160H140V162H60Z M60 236H140V238H60Z M97 20H103V31H97ZM91 144V122.5a4.5 4.5 0 0 1 9 0V144ZM111 204V186.0a4.0 4.0 0 0 1 8 0V204ZM79 224V209.5a3.5 3.5 0 0 1 7 0V224ZM91 286V261.0a9.0 9.0 0 0 1 18 0V286Z%22/%3E%3C/mask%3E%3C/defs%3E%3Cg fill=%22%23fff%22%3E%3Cpath mask=%22url%28%23m%29%22 d=%22M88 14L100 0L112 14V40H88ZM50 78V30H60V40H68V30H78V40H86V30H96V40H104V30H114V40H122V30H132V40H140V30H150V78ZM50 78H150L140 96H60Z M60 95H140V288H60Z M0 300Q100 268 200 300Z%22/%3E%3Ccircle cx=%2230%22 cy=%22250%22 r=%2226%22/%3E%3Ccircle cx=%2255%22 cy=%22234%22 r=%2222%22/%3E%3Ccircle cx=%2212%22 cy=%22272%22 r=%2220%22/%3E%3Ccircle cx=%2246%22 cy=%22268%22 r=%2222%22/%3E%3Ccircle cx=%2270%22 cy=%22262%22 r=%2216%22/%3E%3Ccircle cx=%22160%22 cy=%22278%22 r=%2214%22/%3E%3Ccircle cx=%22178%22 cy=%22282%22 r=%2217%22/%3E%3Ccircle cx=%22193%22 cy=%22288%22 r=%2212%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 300%22%3E%3Cdefs%3E%3Cmask id=%22m%22%3E%3Crect width=%22200%22 height=%22300%22 fill=%22%23fff%22/%3E%3Cpath fill=%22%23000%22 d=%22M56 81h4v9h-4ZM64 81h4v9h-4ZM72 81h4v9h-4ZM80 81h4v9h-4ZM88 81h4v9h-4ZM96 81h4v9h-4ZM104 81h4v9h-4ZM112 81h4v9h-4ZM120 81h4v9h-4ZM128 81h4v9h-4ZM136 81h4v9h-4ZM144 81h4v9h-4ZM52 69H148V71.5H52Z M60 160H140V162H60Z M60 236H140V238H60Z M97 20H103V31H97ZM91 144V122.5a4.5 4.5 0 0 1 9 0V144ZM111 204V186.0a4.0 4.0 0 0 1 8 0V204ZM79 224V209.5a3.5 3.5 0 0 1 7 0V224ZM91 286V261.0a9.0 9.0 0 0 1 18 0V286Z%22/%3E%3C/mask%3E%3C/defs%3E%3Cg fill=%22%23fff%22%3E%3Cpath mask=%22url%28%23m%29%22 d=%22M88 14L100 0L112 14V40H88ZM50 78V30H60V40H68V30H78V40H86V30H96V40H104V30H114V40H122V30H132V40H140V30H150V78ZM50 78H150L140 96H60Z M60 95H140V288H60Z M0 300Q100 268 200 300Z%22/%3E%3Ccircle cx=%2230%22 cy=%22250%22 r=%2226%22/%3E%3Ccircle cx=%2255%22 cy=%22234%22 r=%2222%22/%3E%3Ccircle cx=%2212%22 cy=%22272%22 r=%2220%22/%3E%3Ccircle cx=%2246%22 cy=%22268%22 r=%2222%22/%3E%3Ccircle cx=%2270%22 cy=%22262%22 r=%2216%22/%3E%3Ccircle cx=%22160%22 cy=%22278%22 r=%2214%22/%3E%3Ccircle cx=%22178%22 cy=%22282%22 r=%2217%22/%3E%3Ccircle cx=%22193%22 cy=%22288%22 r=%2212%22/%3E%3C/g%3E%3C/svg%3E"); }
.deco-tower-left::before { left: max(8px, calc(50% - 720px)); transform: scaleX(-1); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 300%22%3E%3Cdefs%3E%3Cmask id=%22m%22%3E%3Crect width=%22200%22 height=%22300%22 fill=%22%23fff%22/%3E%3Cpath fill=%22%23000%22 d=%22M56 81h4v9h-4ZM64 81h4v9h-4ZM72 81h4v9h-4ZM80 81h4v9h-4ZM88 81h4v9h-4ZM96 81h4v9h-4ZM104 81h4v9h-4ZM112 81h4v9h-4ZM120 81h4v9h-4ZM128 81h4v9h-4ZM136 81h4v9h-4ZM144 81h4v9h-4ZM52 69H148V71.5H52Z M60 160H140V162H60Z M60 236H140V238H60Z M97 20H103V31H97ZM91 144V122.5a4.5 4.5 0 0 1 9 0V144ZM111 204V186.0a4.0 4.0 0 0 1 8 0V204ZM79 224V209.5a3.5 3.5 0 0 1 7 0V224ZM91 286V261.0a9.0 9.0 0 0 1 18 0V286Z%22/%3E%3C/mask%3E%3C/defs%3E%3Cg fill=%22%23fff%22%3E%3Cpath mask=%22url%28%23m%29%22 d=%22M88 14L100 0L112 14V40H88ZM50 78V30H60V40H68V30H78V40H86V30H96V40H104V30H114V40H122V30H132V40H140V30H150V78ZM50 78H150L140 96H60Z M60 95H140V288H60Z M0 300Q100 268 200 300Z%22/%3E%3Ccircle cx=%2230%22 cy=%22250%22 r=%2226%22/%3E%3Ccircle cx=%2255%22 cy=%22234%22 r=%2222%22/%3E%3Ccircle cx=%2212%22 cy=%22272%22 r=%2220%22/%3E%3Ccircle cx=%2246%22 cy=%22268%22 r=%2222%22/%3E%3Ccircle cx=%2270%22 cy=%22262%22 r=%2216%22/%3E%3Ccircle cx=%22160%22 cy=%22278%22 r=%2214%22/%3E%3Ccircle cx=%22178%22 cy=%22282%22 r=%2217%22/%3E%3Ccircle cx=%22193%22 cy=%22288%22 r=%2212%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 300%22%3E%3Cdefs%3E%3Cmask id=%22m%22%3E%3Crect width=%22200%22 height=%22300%22 fill=%22%23fff%22/%3E%3Cpath fill=%22%23000%22 d=%22M56 81h4v9h-4ZM64 81h4v9h-4ZM72 81h4v9h-4ZM80 81h4v9h-4ZM88 81h4v9h-4ZM96 81h4v9h-4ZM104 81h4v9h-4ZM112 81h4v9h-4ZM120 81h4v9h-4ZM128 81h4v9h-4ZM136 81h4v9h-4ZM144 81h4v9h-4ZM52 69H148V71.5H52Z M60 160H140V162H60Z M60 236H140V238H60Z M97 20H103V31H97ZM91 144V122.5a4.5 4.5 0 0 1 9 0V144ZM111 204V186.0a4.0 4.0 0 0 1 8 0V204ZM79 224V209.5a3.5 3.5 0 0 1 7 0V224ZM91 286V261.0a9.0 9.0 0 0 1 18 0V286Z%22/%3E%3C/mask%3E%3C/defs%3E%3Cg fill=%22%23fff%22%3E%3Cpath mask=%22url%28%23m%29%22 d=%22M88 14L100 0L112 14V40H88ZM50 78V30H60V40H68V30H78V40H86V30H96V40H104V30H114V40H122V30H132V40H140V30H150V78ZM50 78H150L140 96H60Z M60 95H140V288H60Z M0 300Q100 268 200 300Z%22/%3E%3Ccircle cx=%2230%22 cy=%22250%22 r=%2226%22/%3E%3Ccircle cx=%2255%22 cy=%22234%22 r=%2222%22/%3E%3Ccircle cx=%2212%22 cy=%22272%22 r=%2220%22/%3E%3Ccircle cx=%2246%22 cy=%22268%22 r=%2222%22/%3E%3Ccircle cx=%2270%22 cy=%22262%22 r=%2216%22/%3E%3Ccircle cx=%22160%22 cy=%22278%22 r=%2214%22/%3E%3Ccircle cx=%22178%22 cy=%22282%22 r=%2217%22/%3E%3Ccircle cx=%22193%22 cy=%22288%22 r=%2212%22/%3E%3C/g%3E%3C/svg%3E"); }
@media (max-width: 760px) { .deco-tower::before, .deco-tower-trees::before, .deco-tower-left::before { display: none; } }

/* Home: the funeral home band and "Verify a certificate" side by side */
.band-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.band-split .band { grid-template-columns: 1fr; gap: 22px; padding: 40px; }
.verify-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 32px; display: grid; gap: 12px; align-content: start; box-shadow: var(--shadow); }
.verify-head { display: flex; align-items: center; gap: 12px; }
.verify-badge { width: 40px; height: 40px; color: var(--brand); flex: none; }
.verify-card h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.verify-card > p { color: var(--ink-soft); margin: 0; }
.verify-card label { font-weight: 600; margin-top: 6px; }
.verify-row { display: flex; gap: 10px; }
.verify-row .input { flex: 1; min-width: 0; text-transform: uppercase; }
.verify-row .input::placeholder { text-transform: none; }
@media (max-width: 900px) { .band-split { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .verify-row { flex-direction: column; } }

/* Sign in: the ways to open an account, beside the form */
.auth-option { display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; gap: 16px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease; }
.auth-option:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.auth-option .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; }
.auth-option .ico svg { width: 24px; height: 24px; }
.auth-option strong { display: block; font: 600 1.2rem var(--font-head); }
.auth-option small { display: block; color: var(--ink-soft); font-size: 0.95rem; margin-top: 4px; }
.auth-option .go { width: 20px; height: 20px; color: var(--brand); }
.auth-card .sub { color: var(--ink-soft); margin: -4px 0 4px; }
.auth-help .auth-option { color: var(--ink); }

/* Course suggestions and writer applications */
.benefits.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benefit-link { color: var(--ink); text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease; }
.benefit-link:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.benefit-link .ico { margin-bottom: 14px; }
.contribute-intro { display: grid; gap: 16px; align-content: start; }
.contribute-intro h2, .contribute-form h2, .contribute-mine h2 { font-size: 1.4rem; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--brand); }
.steps-list { margin: 0; padding-left: 1.3em; display: grid; gap: 14px; }
.steps-list strong { display: block; }
.steps-list span { color: var(--ink-soft); }
.contribute-form { display: grid; gap: 14px; align-content: start; }
.contribute-mine { margin-top: 40px; display: grid; gap: 12px; }
.contribute-mine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.contribute-mine li { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
@media (max-width: 760px) { .benefits.two { grid-template-columns: 1fr; } }

/* The Course Contributor badge (templates/_contributor_badge.html) */
.contributor-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font: 700 0.78rem/1.2 var(--font-body); letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle; }
.contributor-badge svg { width: 9px; height: 15px; fill: currentColor; flex: none; }
h1 .contributor-badge, h3 .contributor-badge { margin-left: 6px; }

/* A form field only bots fill in (core/forms.py TrapMixin) */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: #a33b2b; font-weight: 600; font-size: 0.9rem; }

/* ---------- The office, as built (additions to the design's office styles) ---------- */
.office h4 { font: 600 1.05rem/1.25 var(--font-head); margin: 0; }
.office .panel-head h3, .office .panel > h3 { font-size: 1.25rem; }
.office .panel > h2 { font-size: 1.3rem; }
.office .dash-main > .messages { padding-top: 0; }
.greet-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.toolbar .grow { flex: 1 1 260px; }
.toolbar .grow .input { width: 100%; }
.toolbar .btn { min-height: 42px; }
.cell-sub { display: block; color: var(--ink-soft); font-size: 0.85rem; font-weight: 400; margin-top: 2px; }
.muted, .empty-note { color: var(--ink-soft); }
.warn-text { color: var(--accent); font-weight: 600; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; }
a.pill { text-decoration: none; }
.flags-cell .pill, .flags-cell .tag { margin: 2px 0; }
.rec-name { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.rec-actions form { display: contents; }
.office .side .count { background: var(--accent-tint); color: var(--accent); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.tab-title { font-size: 1.4rem; margin-bottom: 12px; }
.js-tabs .tab-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabpanel { display: grid; gap: 20px; }
.row-acts { white-space: nowrap; text-align: right; }
.row-acts > * + * { margin-left: 12px; }
.row-acts form { display: inline; }
details.inline { display: inline-block; position: relative; text-align: left; white-space: normal; }
details.inline > summary { list-style: none; cursor: pointer; display: inline; }
details.inline > summary::-webkit-details-marker { display: none; }
details.inline > .inline-form { position: absolute; right: 0; z-index: 5; margin-top: 6px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; box-shadow: var(--shadow); width: max-content; max-width: min(360px, 80vw); display: flex; gap: 8px; align-items: center; }
details.inline > .inline-form.stacked { display: grid; gap: 10px; }
.inline-form label { display: grid; gap: 4px; font-weight: 600; font-size: 0.9rem; }
.list-row .acts form { display: inline; }
.office .form { max-width: 720px; }
.office .form .check { font-weight: 500; }
.office .errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: #a33b2b; font-weight: 600; font-size: 0.9rem; }
:root[data-theme="dark"] .office .errorlist { color: #f0a090; }
.form-note { color: var(--ink-soft); font-size: 0.92rem; font-weight: 400; }
.totals { display: grid; grid-template-columns: max-content max-content; gap: 6px 24px; justify-content: end; font-variant-numeric: tabular-nums; }
.totals dt { color: var(--ink-soft); }
.totals dd { margin: 0; text-align: right; }
.totals .grand { font-weight: 700; color: var(--ink); }
.qa { display: grid; gap: 12px; }
.qa .q { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.qa .q.wrong { border-color: var(--accent); }
.qa .q p { margin: 6px 0 0; color: var(--ink-soft); }
.item-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; display: grid; gap: 10px; background: var(--paper); }
.item-card .item-meta { color: var(--ink-soft); font-size: 0.9rem; }
.item-card .textarea { min-height: 64px; }
.item-card .body { white-space: pre-line; }
.item-card form { display: grid; gap: 8px; }
.item-card .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.item-card .acts .check { font-size: 0.9rem; gap: 6px; }
.item-card .acts .check input { width: 16px; height: 16px; }
.item-card .tidy { margin-left: auto; display: inline-flex; gap: 4px; }
.stack { display: grid; gap: 12px; }
@media (max-width: 760px) { .row-acts { white-space: normal; text-align: left; } .totals { justify-content: start; } }
td.name-cell { white-space: nowrap; }
/* Phones: the search stays (it's the office's main tool), on its own row under the name */
@media (max-width: 760px) {
  .office-bar .wrap { flex-wrap: wrap; row-gap: 10px; padding-block: 10px; }
  .office-bar .office-search { display: block; order: 3; flex-basis: 100%; max-width: none; }
  .office-bar .who > span { display: none; }
  .office-name small { display: none; }
  .office-bar .office-name { flex: 1 1 0; }
}

/* Printing from the office: just the page's content */
@media print {
  .office-bar, .side, .office-foot, .concept, .skip, .rec-actions, .tabs, .no-print, .messages, .toolbar { display: none !important; }
  .office .dash { display: block; width: 100%; padding: 0; }
  .tabpanel[hidden] { display: grid !important; }
  .js-tabs .tab-title { position: static; width: auto; height: auto; clip: auto; }
  .panel, .table-wrap { border: 0; padding: 0; background: none; }
  body { background: #fff; color: #000; }
}

/* Office print pages (receipts, ledgers, labels, forms): a letter-size sheet on screen, just the sheet on paper */
.print-page { background: var(--surface-2); }
.print-tools { display: flex; gap: 10px; justify-content: center; padding: 16px; }
.print-sheet { background: #fff; color: #111; width: min(8.5in, 100% - 32px); margin: 0 auto 40px; padding: 0.6in 0.7in; box-shadow: var(--shadow); display: grid; gap: 18px; align-content: start; }
.print-sheet .data th { color: #444; }
.print-sheet .data td, .print-sheet .data th { border-color: #ccc; }
.letterhead { display: flex; gap: 14px; align-items: center; border-bottom: 2px solid #2f5a3a; padding-bottom: 12px; }
.letterhead .brand-mark { width: 48px; height: 48px; --mk-bg: #2f5a3a; --mk-fg: #fff; }
.letterhead strong { display: block; font: 600 1.4rem var(--font-head); color: #2f5a3a; }
.letterhead span { font-size: 0.85rem; color: #444; }
.print-title { font-size: 1.6rem; color: #111; }
.print-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 0.95rem; }
.print-cols .right { text-align: right; }
.print-sheet .totals dt { color: #444; }
.print-sheet .note, .print-sheet small { color: #444; }
.page-break { break-after: page; }
@media print {
  @page { size: letter; margin: 0.5in; }
  .print-page { background: #fff; }
  .print-sheet { width: auto; margin: 0; padding: 0; box-shadow: none; }
}
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stack-lg { display: grid; gap: 20px; }
.office-flow { padding-block: 0; }
.office-flow .cart h2 { font-size: 1.3rem; }
.channel { border: 0; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.channel legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; float: left; width: 100%; }
.step-legend { font-weight: 600; margin-bottom: 8px; }
.indent { margin-left: 34px; }
.money-input { display: flex; align-items: center; gap: 6px; }
.money-input .input { max-width: 160px; }
.refund-form { max-width: 820px; }
.refund-form label.amount { display: grid; gap: 6px; font-weight: 600; }
.order-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.order-actions form { display: flex; gap: 8px; align-items: center; }
.order-actions .input { min-height: 40px; width: 140px; }
.refund-link { justify-self: start; }
.plain-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.amount-row { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.course-filter { min-height: 42px; }
.pick label[hidden] { display: none; }
.rec-name .pill, h1 .pill { font-family: var(--font-body); vertical-align: middle; }
.ky-form { display: grid; gap: 16px; }
.ky-fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.ky-fields dt { color: #444; }
.ky-fields dd { margin: 0; border-bottom: 1px solid #bbb; min-height: 1.3em; }
.sign-lines { display: grid; grid-template-columns: 2fr 1fr; gap: 28px 24px; margin-top: 28px; }
.sign-lines div { border-top: 1px solid #333; padding-top: 4px; font-size: 0.85rem; color: #444; }
.order-form .tick { width: 32px; text-align: center; }
.order-form .box { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #333; border-radius: 2px; }
.fill-in { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; margin-bottom: 30px; }
.fill-in div { border-bottom: 1px solid #333; padding-top: 22px; }
.fill-in .wide { grid-column: 1 / -1; }
.fill-in span { display: block; font-size: 0.8rem; color: #444; transform: translateY(26px); }
.news-item { border-top: 1px solid #ccc; padding-top: 10px; break-inside: avoid; }
.news-item h2 { font-size: 1.2rem; color: #2f5a3a; }
.card-steps h2 { font-size: 1.2rem; color: #2f5a3a; }
.card-steps ol { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 4px; }
.report-was { margin: 0; }
.report-jump .select { min-width: 220px; }
.report-note { margin: 0; }
.report-downloads { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.presets { font-size: 0.9rem; color: var(--ink-soft); margin: -6px 0 0; }
.chosen { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; flex: 1 1 260px; }
.chosen-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.days-input { display: flex; align-items: center; gap: 6px; }
.days-input .input, .toolbar .input.narrow { width: 90px; }
.group-title { font-size: 1.1rem; margin-bottom: 8px; }
.report-table td { vertical-align: top; }
.report-table tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.form label.check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
#add-filter { justify-self: start; }
/* Phones: filter boxes take the full width (long course names can't push the page sideways), and long words
   (email addresses, Stripe ids) wrap instead of overflowing */
.office .dash-main { overflow-wrap: break-word; }
.toolbar label { min-width: 0; }
.toolbar .select { max-width: 100%; }
@media (max-width: 600px) {
  .toolbar label, .toolbar .grow { flex: 1 1 100%; }
  .toolbar .input, .toolbar .select { width: 100%; }
  .report-jump, .report-jump .select { width: 100%; min-width: 0; }
}
/* A record with many actions: the buttons wrap into rows on the right; on narrower screens they go under the name */
.rec-actions { max-width: 540px; }
@media (max-width: 1200px) { .rec-head { grid-template-columns: 1fr; } .rec-actions { justify-content: flex-start; max-width: none; } }
@media (max-width: 1100px) { .office .two-col { grid-template-columns: 1fr; gap: 20px; } }
.danger-zone { margin: 4px 0 0; }
.danger-zone .link-btn { color: #a33b2b; }
:root[data-theme="dark"] .danger-zone .link-btn { color: #f0a090; }
.email-preview { white-space: pre-wrap; font: inherit; font-size: 0.92rem; margin: 6px 0 0; background: var(--surface); padding: 10px 12px; border-radius: 8px; }
/* a list of checkboxes in a form (Django's CheckboxSelectMultiple): one per line, box beside its words */
.form .fieldrow div[id^="id_"] { display: grid; gap: 6px; }
.form .fieldrow div[id^="id_"] label { display: flex; align-items: center; gap: 10px; font-weight: 500; }

/* ---------- The homepage design "Library Wall" (2026-10-16): masthead and menu, the office's message, where to go,
   the shelf of new courses, ways to learn. The masthead and shelf stay deep green in dark mode. ---------- */
:root { --mast: #2f5a3a; --mast-deep: #244a2f; --gold: #d8b27d; --wood: #8c6a3c; --wood-dark: #6e522c; --note-line: #dccbdd; --note-ink: var(--accent); }
:root[data-theme="dark"] { --mast: #18301f; --mast-deep: #112417; --note-line: #4a3a4c; --note-ink: var(--accent); }

.masthead { background: var(--mast); color: #fff; text-align: center; }
.masthead :focus-visible { outline-color: #fff; }
.masthead-top { padding: 26px 16px 0; }
.masthead--home .masthead-top { padding-top: 44px; }
.masthead-mark { display: inline-block; }
.masthead-mark .mark { display: block; width: 64px; height: 64px; --mk-bg: #fff; --mk-fg: var(--mast); }
.masthead--home .masthead-mark .mark { width: 106px; height: 106px; }
.masthead-name { margin: 12px 0 0; font: 600 clamp(1.9rem, 4vw, 2.6rem)/1.05 var(--font-head); letter-spacing: -0.01em; color: #fff; }
.masthead--home .masthead-name { margin-top: 18px; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.masthead-name a { color: inherit; text-decoration: none; }
.masthead-tag { margin: 10px auto 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: #e2c08f; font-weight: 700; line-height: 1.5; }
.masthead--home .masthead-tag { margin-top: 14px; font-size: 0.82rem; }
.masthead-rule { max-width: 1128px; margin: 22px auto 0; border-top: 4px double rgb(216 178 125 / 75%); }
.masthead--home .masthead-rule { margin-top: 28px; }
.mainnav { max-width: var(--wrap); margin: 0 auto; padding: 10px 16px 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.mainnav a { position: relative; color: #fff; text-decoration: none; padding: 10px 14px; border-radius: 6px; display: inline-flex; align-items: center; gap: 8px; }
.mainnav a:hover { background: rgb(255 255 255 / 14%); color: #fff; }
.mainnav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
.mainnav svg { width: 17px; height: 17px; }
.mainnav-sep { width: 1px; height: 22px; background: rgb(255 255 255 / 28%); margin: 0 10px; }
.mainnav a.mainnav-pill { margin-left: 6px; border: 1.5px solid var(--gold); padding: 8px 18px; border-radius: 999px; }
.masthead .cart-link .badge { box-shadow: 0 0 0 2px var(--mast); }
.mainnav-compact { display: none; padding: 10px 12px 12px; align-items: center; gap: 8px; text-align: left; }
.mainnav-compact .menu { display: block; position: relative; margin-right: auto; }
.menu-button { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid rgb(255 255 255 / 40%); color: #fff; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.menu-button::-webkit-details-marker { display: none; }
.menu-button svg { width: 20px; height: 20px; }
.mainnav-compact .menu-panel { position: absolute; left: 0; right: auto; top: 52px; width: min(280px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; display: grid; z-index: 20; }
.mainnav-compact .menu-panel a { padding: 12px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.mainnav-compact .menu-panel a:hover { background: var(--surface-2); }
.compact-cart { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: #fff; }
.compact-cart svg { width: 20px; height: 20px; }
.compact-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #fff; color: #213f29; font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.compact-signin:hover { background: #e4efe6; color: #213f29; }
@media (max-width: 760px) {
  .mainnav { display: none; }
  .mainnav-compact { display: flex; }
  .masthead-top, .masthead--home .masthead-top { padding-top: 24px; }
  .masthead--home .masthead-mark .mark { width: 64px; height: 64px; }
  .masthead--home .masthead-name { margin-top: 12px; font-size: 2rem; }
  .masthead-tag, .masthead--home .masthead-tag { font-size: 0.7rem; letter-spacing: 0.14em; max-width: 18em; }
  .masthead-rule, .masthead--home .masthead-rule { margin-top: 16px; }
}

/* The office's message ("From the office"): a Notice card, or Important (highlighted) */
.office-note-wrap { max-width: 860px; margin: 0 auto; padding: 64px 16px 0; }
.office-note { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 40px 48px 36px; box-shadow: 0 1px 2px rgb(28 38 34 / 4%), 0 14px 34px rgb(28 38 34 / 7%); }
.office-note-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.office-note-head h2 { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 700 0.85rem/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.office-note-icon, .office-note-important { display: none; }
.office-note-date { font-family: var(--font-head); font-style: italic; color: var(--ink-soft); }
.office-note-body p { margin: 20px 0 0; font: 400 1.28rem/1.6 var(--font-head); }
.office-note-body p + p { margin-top: 14px; }
.office-note-foot { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.office-note-sign { margin: 0; font-family: var(--font-head); font-style: italic; color: var(--ink-soft); }
.office-note-sign:empty { display: none; }
.office-note--important { background: var(--accent-tint); border-color: var(--note-line); padding-top: 36px; }
.office-note--important .office-note-head { border-color: var(--note-line); align-items: center; }
.office-note--important .office-note-head h2 { color: var(--note-ink); }
.office-note--important .office-note-important { display: inline; }
.office-note--important .office-note-icon { display: block; width: 20px; height: 20px; }
@media (max-width: 640px) {
  .office-note-wrap { padding-top: 28px; }
  .office-note { padding: 22px; }
  .office-note-body p { font-size: 1.1rem; margin-top: 14px; }
}

/* Where would you like to go? */
.goto { padding-block: 56px 72px; }
.goto h2 { margin-top: 12px; font: 600 2.1rem/1.15 var(--font-head); }
.goto-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); column-gap: 56px; }
.goto-list li { border-bottom: 1px solid var(--line); }
.goto-item { display: flex; align-items: baseline; gap: 18px; padding: 20px 4px; text-decoration: none; color: var(--ink); }
.goto-num { flex: none; width: 2.2em; font: italic 400 1.15rem var(--font-head); color: var(--accent); }
.goto-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.goto-line { display: flex; align-items: baseline; gap: 12px; }
.goto-title { font: 600 1.4rem/1.25 var(--font-head); }
.goto-dots { flex: 1; min-width: 24px; border-bottom: 2px dotted #c3bdae; }
:root[data-theme="dark"] .goto-dots { border-color: var(--line); }
.goto-arrow { flex: none; width: 20px; height: 20px; align-self: center; color: var(--brand); }
.goto-sub { font-size: 0.98rem; color: var(--ink-soft); }
.goto-item:hover { color: var(--ink); }
.goto-item:hover .goto-title { color: var(--brand); }
@media (max-width: 640px) {
  .goto { padding-block: 32px 40px; }
  .goto h2 { font-size: 1.6rem; }
  .goto-item { gap: 12px; padding: 14px 2px; }
  .goto-title { font-size: 1.18rem; }
  .goto-dots { display: none; }
  .goto-sub { font-size: 0.9rem; }
}

/* New on the shelf: the newest courses as book spines (a plain list on phones) */
.shelf { background: var(--mast-deep); color: #fff; border-top: 3px solid var(--wood); }
.shelf .wrap { padding-block: 64px 72px; }
.shelf :focus-visible { outline-color: #fff; }
.shelf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.shelf-head > div:first-child { flex: 1 1 460px; min-width: 0; }
.shelf .eyebrow { color: var(--gold); }
.shelf h2 { margin-top: 10px; font: 600 2.1rem/1.15 var(--font-head); color: #fff; }
.shelf-head p:not(.eyebrow) { margin-top: 8px; color: #cddbcf; }
.shelf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-light { background: #fff; color: #213f29; }
.btn-light:hover { background: #e4efe6; color: #213f29; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 45%); }
.btn-outline-light:hover { border-color: #fff; color: #fff; }
.btn-block { display: flex; width: 100%; }
.shelf-books { margin-top: 40px; overflow-x: auto; padding-top: 8px; }
.shelf-inner { width: max-content; min-width: 100%; }
.shelf-row { display: flex; justify-content: center; align-items: flex-end; gap: 6px; padding: 0 24px; }
.shelf-plank { height: 14px; background: var(--wood); border-bottom: 5px solid var(--wood-dark); border-radius: 2px; }
.spine { flex: none; box-sizing: border-box; padding: 14px 6px 12px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 3px 3px 1px 1px; text-decoration: none; transition: transform .15s ease; }
.spine:hover { transform: translateY(-6px); }
.spine-code { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.spine-title { flex: 1; min-height: 0; margin: 12px 0; writing-mode: vertical-rl; text-align: center; font: 600 0.98rem/1.15 var(--font-head); overflow: hidden; }
.spine-hours { font-size: 0.72rem; }
.spine-1 { width: 64px; height: 258px; background: #3a6690; color: #fff; box-shadow: inset -6px 0 0 rgb(0 0 0 / 16%), inset 2px 0 0 rgb(255 255 255 / 12%); }
.spine-2 { width: 72px; height: 238px; background: #d6c9ae; color: #2a2620; box-shadow: inset -6px 0 0 rgb(0 0 0 / 10%), inset 2px 0 0 rgb(255 255 255 / 25%); }
.spine-3 { width: 66px; height: 278px; background: #8a4a46; color: #fff; box-shadow: inset -6px 0 0 rgb(0 0 0 / 16%), inset 2px 0 0 rgb(255 255 255 / 10%); }
.spine-4 { width: 58px; height: 226px; background: #4f7166; color: #fff; box-shadow: inset -6px 0 0 rgb(0 0 0 / 16%), inset 2px 0 0 rgb(255 255 255 / 10%); }
.spine-5 { width: 72px; height: 270px; background: #c29a54; color: #231a0d; box-shadow: inset -6px 0 0 rgb(0 0 0 / 12%), inset 2px 0 0 rgb(255 255 255 / 20%); }
.spine-6 { width: 70px; height: 250px; background: #e9e4d8; color: #1c2622; box-shadow: inset -6px 0 0 rgb(0 0 0 / 8%), inset 2px 0 0 rgb(255 255 255 / 40%); }
.spine-7 { width: 76px; height: 288px; background: #5c6b7d; color: #fff; box-shadow: inset -6px 0 0 rgb(0 0 0 / 14%), inset 2px 0 0 rgb(255 255 255 / 12%); }
.spine-8 { width: 64px; height: 246px; background: #cbd8c8; color: #213f29; box-shadow: inset -6px 0 0 rgb(0 0 0 / 8%), inset 2px 0 0 rgb(255 255 255 / 35%); }
.shelf-tower { display: block; flex: none; width: 124px; height: 186px; margin-left: 10px; }
.shelf-links { display: none; margin-top: 24px; }
.shelf-links ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(255 255 255 / 22%); }
.shelf-links li { border-bottom: 1px solid rgb(255 255 255 / 22%); }
.shelf-links li a { display: flex; align-items: center; gap: 12px; padding: 14px 2px; color: #fff; text-decoration: none; }
.shelf-links li a > span { flex: 1; min-width: 0; display: grid; }
.shelf-link-code { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--gold); font-weight: 700; }
.shelf-link-title { font: 600 1.12rem/1.3 var(--font-head); }
.shelf-links li svg { width: 18px; height: 18px; flex: none; }
.shelf-links .btn { margin-top: 20px; }
.shelf-links .btn + .btn { margin-top: 10px; }
@media (max-width: 640px) {
  .shelf .wrap { padding-block: 40px 44px; }
  .shelf h2 { font-size: 1.6rem; }
  .shelf-books, .shelf-actions { display: none; }
  .shelf-links { display: block; }
}

/* Ways to learn */
.ways { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.way { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.way-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; }
.way-icon svg { width: 24px; height: 24px; }
.way .pill { align-self: flex-start; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; }
.pill.soon { background: var(--accent-tint); color: var(--accent); }
.way h3 { margin: 0; font: 600 1.15rem/1.2 var(--font-head); }
.way p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.map-teaser .mini-map { text-decoration: none; }

/* The office's homepage banner editor */
.banner-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.banner-stage { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; }
.banner-stage .office-note { padding: 26px 28px 24px; }
.banner-stage .office-note-body p { font-size: 1.08rem; }
.banner-hidden { margin: 0; padding: 26px; text-align: center; border: 2px dashed var(--line); border-radius: 8px; color: var(--ink-soft); }
@media (max-width: 1100px) { .banner-editor { grid-template-columns: 1fr; } }

/* ---------- Posting (customers who don't use the website): the paper quiz grid and the printed answer sheet ---------- */
.paper-answers { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px 16px; margin: 0 0 18px; }
.paper-answers legend { font-weight: 600; padding: 0 6px; }
.answer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-top: 10px; }
.answer-grid label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink-soft); }
.answer-grid span { min-width: 1.8em; text-align: right; font-variant-numeric: tabular-nums; }
.answer-grid .input { width: 2.6em; min-height: 38px; padding: 4px; text-align: center; text-transform: uppercase; font-weight: 600; }
.sheet-q { break-inside: avoid; margin: 0 0 10px; }
.sheet-q p { margin: 0 0 2px; }
.sheet-q ol { list-style: none; margin: 0; padding-left: 1.6em; }
.bubbles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 14px; font-size: 0.85rem; }
.bubbles span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.page-break { break-before: page; }
.sheet-eval td, .sheet-eval th { font-size: 0.85rem; }
.sign-line { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 28px; }
.sign-line span { border-top: 1px solid #444; padding-top: 4px; font-size: 0.85rem; color: #444; }
.sheet-h { font-size: 1rem; margin: 14px 0 0; }
.write-lines { display: grid; gap: 0; }
.write-lines span { display: block; height: 30px; border-bottom: 1px solid #888; }
/* The Personal Data Sheet: the office's paper form, filled in from the record, with room to correct it */
.data-sheet { display: grid; gap: 12px; font-family: "Times New Roman", Times, serif; font-size: 1.02rem; }
.ds-title { text-align: center; font-family: inherit; margin-bottom: 8px; }
.ds-row { display: flex; align-items: flex-end; gap: 8px; }
.ds-row > span { white-space: nowrap; }
.ds-val { flex: 1 1 0; min-width: 0; min-height: 1.5em; border-bottom: 1px solid #333; padding: 0 4px; font-weight: 400; font-family: var(--font-body, sans-serif); font-size: 0.92rem; }
.ds-val.ds-s { flex: 0 0 5em; }
.ds-val.ds-z { flex: 0 0 7em; }
.ds-val.ds-m { flex: 0 0 13em; }
.ds-gap { height: 10px; }
.ds-q { margin: 6px 0 0; }
.ds-remind { margin-top: 18px; }
.ds-tick { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; white-space: nowrap; }
.ds-tick .box { display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1.5px solid #333; border-radius: 2px; font-size: 12px; line-height: 1; }
.ds-thanks { text-align: center; font-size: 0.92rem; margin-top: 18px; }
.ds-acct { text-align: center; }

/* Co-authors and reviewers: a dropdown per person, + for another (office) */
.author-rows { display: grid; gap: 8px; justify-items: start; }
.author-row { display: flex; gap: 8px; align-items: center; width: 100%; }
.author-row select { flex: 1; }
.author-row .icon-btn { flex: none; }

/* The office's quiz builder */
.quiz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.quiz-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.quiz-item:last-child { border-bottom: 0; }
.quiz-q { grid-column: 1; font-weight: 600; }
.quiz-n { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.quiz-choices { grid-column: 1; list-style: none; margin: 0; padding: 0 0 0 1.6em; display: grid; gap: 2px; font-size: 0.95rem; }
.quiz-choices span:first-child { color: var(--ink-soft); }
.quiz-choices .right { color: var(--brand-strong); font-weight: 600; }
.quiz-item .row-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: start; }
.quiz-item .row-acts form { display: inline-flex; gap: 2px; }
pre.example { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.9rem; white-space: pre-wrap; margin: 8px 0 14px; }
@media (max-width: 600px) { .quiz-item { grid-template-columns: 1fr; } .quiz-item .row-acts { grid-column: 1; grid-row: auto; } }

/* Add course, part 1: the document on the left, what we read from it on the right */
.doc-split { align-items: start; margin-top: 8px; }
.doc-stats { background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px 18px; }
.doc-stats h3 { font-size: 1.05rem; margin-bottom: 10px; }
.doc-stats .dl { grid-template-columns: minmax(110px, auto) 1fr; }
.doc-stats .form-note, .doc-stats form { margin-top: 12px; }
.hours-caveat { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-tint); font-size: 0.88rem; line-height: 1.45; }

/* A state's page (office, and the board portal): the guidelines as written, the batch change under its courses, the links form */
.prose-notes p { margin: 0 0 10px; }
.sub-h { font-size: 0.95rem; margin: 14px 0 6px; }
.batch { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin: 14px 0 0; display: grid; gap: 10px; min-width: 0; }
.batch legend { font-weight: 700; padding: 0 6px; }
.batch .check { display: inline-flex; gap: 8px; align-items: center; margin-right: 18px; font-weight: 600; }
.batch-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 14px; }
.batch-fields label { display: grid; gap: 4px; font-size: 0.9rem; font-weight: 600; }
.batch-fields .input, .batch-fields .select { min-height: 42px; font-size: 0.95rem; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 5em auto; gap: 10px; align-items: end; }
.link-row label { display: grid; gap: 4px; font-weight: 600; font-size: 0.9rem; }
.link-row .check { display: flex; gap: 6px; align-items: center; padding-bottom: 10px; }
@media (max-width: 700px) { .link-row { grid-template-columns: 1fr; } }

/* Office → Help: search first (the box searches every topic as you type), common jobs, then the topics by group, each
   opening to its steps. While searching, each topic shows the sentence that matched. */
.help-search { display: grid; gap: 10px; }
.help-search label { font: 600 1.25rem var(--font-head); }
.help-search-row { display: flex; gap: 10px; }
.help-search-row .input { flex: 1; min-height: 58px; font-size: 1.15rem; border: 2px solid var(--brand); }
.help-count { margin: 0; font-weight: 600; color: var(--ink-soft); }
.help-common { display: grid; gap: 10px; }
.help-common h2, .help-group-title { font-size: 1.15rem; }
.help-common .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.help-common .chip { min-height: 44px; padding: 0 18px; font-size: 0.98rem; border: 1px solid var(--brand); background: var(--surface); text-decoration: none; }
.help-common .chip:hover { background: var(--brand-tint); }
.help-groups { display: grid; gap: 22px; }
.help-group { display: grid; gap: 8px; }
.help-group-title { margin: 0 0 2px; }
.help-topic { padding: 0; gap: 0; }
.help-topic > summary { list-style: none; cursor: pointer; padding: 16px 20px; display: grid; gap: 4px; border-radius: var(--radius); }
.help-topic > summary::-webkit-details-marker { display: none; }
.help-topic > summary:hover .help-title { text-decoration: underline; }
.help-title { font: 600 1.12rem/1.3 var(--font-head); color: var(--brand-strong); padding-right: 28px; position: relative; }
.help-title::after { content: "+"; position: absolute; right: 0; top: -2px; font: 600 1.4rem var(--font-body); color: var(--brand); }
.help-topic[open] .help-title::after { content: "−"; }
.help-who { font-size: 0.9rem; color: var(--ink-soft); }
.help-snippet { display: none; font-size: 0.98rem; line-height: 1.5; }
.help-groups.searching .help-snippet:not(:empty) { display: block; }
.help-body { padding: 0 20px 18px; display: grid; gap: 8px; }
.help-body h3 { font-size: 1rem; margin: 10px 0 0; }
.help-body ol, .help-body ul { padding-left: 1.4em; margin: 0; }
.help-body li { margin: 0 0 6px; line-height: 1.55; }
.help-body p { line-height: 1.6; margin: 0; }
.help-go { margin-top: 6px !important; }
.help-topic[hidden], .help-group[hidden] { display: none; }
/* "Help for this page": the button in the office bar, and the panel it opens on the right */
.help-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 10px; color: inherit; text-decoration: none; font-weight: 600; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.help-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.help-btn svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .help-btn span { display: none; } .help-btn { padding: 0 10px; } }
.help-drawer { font-size: 1rem; line-height: 1.5; text-align: left; margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(460px, 100%); box-sizing: border-box; border: 0; border-left: 1px solid var(--line); padding: 22px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.help-drawer::backdrop { background: rgb(28 38 34 / 35%); }
.help-drawer[open] { display: grid; gap: 12px; align-content: start; overflow-y: auto; }
.help-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.help-drawer-head h2 { font-size: 1.4rem; }
.help-drawer .help-topic { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.help-drawer .help-topic > summary { padding: 12px 14px; }
.help-drawer .help-body { padding: 0 14px 14px; }
.help-drawer-foot { margin: 4px 0 0; }

/* ---------- Training and SOPs (the funeral home upgrade) ---------- */
.upgrade-grid, .link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.upgrade-grid h2 { font-size: 1.15rem; }
.link-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 0; }
.link-grid a { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); background: var(--surface); }
.link-grid a:hover { border-color: var(--brand); }
.link-grid span { color: var(--ink-soft); font-size: 0.9rem; }
.search-row { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.search-row .input { flex: 1; min-width: 200px; }
.sop-code { color: var(--ink-soft); font-weight: 500; font-variant-numeric: tabular-nums; }
.sop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; margin-bottom: 20px; }
.sop-aside { display: grid; gap: 16px; }
.sop-aside h2 { font-size: 1.05rem; }
.versions { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.versions small { color: var(--ink-soft); }
.versions span { display: block; font-size: 0.9rem; color: var(--ink-soft); }

/* The SOP as a document: the same house style as the courses (serif headings, the green rule) */
.sop-doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; display: grid; gap: 18px; }
.sop-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 2px solid var(--brand); padding-bottom: 14px; }
.sop-head h2 { margin: 2px 0 0; font: 600 1.6rem/1.2 var(--font-head); }
.sop-firm { color: var(--ink-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.sop-head dl { display: flex; gap: 18px; margin: 0; }
.sop-head dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.sop-head dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sop-doc h3 { font: 600 1.1rem var(--font-head); color: var(--brand); margin: 0 0 6px; }
.sop-doc p, .sop-doc ul, .sop-doc ol { margin: 0 0 8px; line-height: 1.6; }
.sop-steps li { margin-bottom: 6px; padding-left: 4px; }
.sop-link { font-weight: 600; }
.sop-missing { color: var(--accent); font-style: italic; }
.sop-foot { border-top: 1px solid var(--line); padding-top: 10px; color: var(--ink-soft); font-size: 0.9rem; }
.comment { border-top: 1px solid var(--line); padding: 12px 0; display: grid; gap: 4px; }
.comment small { color: var(--ink-soft); }
.comment p { margin: 0; }
.comment form { justify-self: start; }

/* What changed between versions */
.diff-head { font-size: 1rem; margin: 14px 0 6px; }
.diff { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; font-size: 0.95rem; }
.diff-line { display: grid; grid-template-columns: 22px 1fr; padding: 4px 10px; }
.diff-line.add { background: var(--brand-tint); }
.diff-line.del { background: var(--accent-tint); }
.diff-line ins { text-decoration: none; }
.diff-line del { color: var(--ink-soft); }

/* The editor */
.sop-editor { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.sop-editor-main { display: grid; gap: 16px; }
.sop-editor-side { display: grid; gap: 16px; position: sticky; top: 16px; }
.sop-editor-side h2 { font-size: 1.05rem; }
.sop-editor-side .select { width: 100%; margin: 8px 0; }
.sop-field { display: grid; gap: 6px; }
.sop-field > label { font: 600 1.1rem var(--font-head); display: flex; gap: 10px; align-items: center; }
.sop-field-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font: 700 0.85rem var(--font-body); }
.sop-field .note { margin: 0; }
.quiz-edit { display: grid; gap: 14px; }
.quiz-q { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 8px; margin: 0; }
.quiz-q legend { font-weight: 600; padding: 0 6px; }
.quiz-choice { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center; }
.quiz-choice input[type=radio] { width: 18px; height: 18px; accent-color: var(--brand); }
.pass-mark { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.pass-mark .input.narrow { width: 90px; }
.sticky-actions { position: sticky; bottom: 0; background: var(--paper); padding: 12px 0; z-index: 2; }
.tips { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.92rem; }
.starter-update { border-color: var(--brand); }
.starter-text { display: grid; gap: 4px; margin: 10px 0; }
.starter-text h4 { margin: 8px 0 0; }

/* Reviewing: the quiz and the acknowledgment */
.review-form { margin-top: 20px; display: grid; gap: 16px; }
.quiz-take { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.quiz-take legend { font-weight: 600; margin-bottom: 6px; }
.check.ack { padding: 14px; border: 1px solid var(--brand); border-radius: var(--radius-sm); background: var(--brand-tint); font-weight: 600; }
.quiz-marked { display: grid; gap: 10px; padding-left: 20px; }
.quiz-marked li { display: grid; gap: 2px; }
.quiz-marked .right span { color: var(--brand); }
.quiz-marked .wrong span { color: var(--accent); }

/* Checklists */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.check-list li { display: flex; gap: 10px; align-items: baseline; }
.check-list li.done { color: var(--ink-soft); }
.check-list .tick { color: var(--brand); font-weight: 700; width: 18px; }
.check-list.big li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.check-list.big li:first-child { border-top: 0; }
.check-list.big small { display: block; color: var(--ink-soft); }
.checklist-edit { display: grid; gap: 8px; }
.checklist-row { display: grid; grid-template-columns: 24px 74px 170px minmax(0, 1fr) minmax(0, 1.4fr) 160px; gap: 8px; align-items: center; }
.checklist-row.starter-row { grid-template-columns: 24px 74px 200px minmax(0, 1fr); }
.checklist-row .row-n { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.checklist-row .select, .checklist-row .input { min-height: 42px; font-size: 0.92rem; width: 100%; }
.pick-cols { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.group-name { font: 600 1.1rem var(--font-head); max-width: 420px; }
.narrow-date { max-width: 220px; }
.matrix th[scope=col] { white-space: nowrap; font-size: 0.82rem; }
.matrix td { white-space: nowrap; }
.training-panel { border-left: 4px solid var(--brand); }
.print-h { font: 600 1.1rem var(--font-head); margin: 10px 0 0; }
.print-foot { color: #555; font-size: 0.8rem; border-top: 1px solid #ccc; padding-top: 8px; }
.print-sheet .sop-doc { border: 0; padding: 0; background: transparent; color: #111; }
.print-sheet .sop-doc h3 { color: #2f5a3a; }

@media (max-width: 900px) {
  .sop-layout, .sop-editor, .upgrade-grid { grid-template-columns: 1fr; }
  .sop-editor-side { position: static; }
  .checklist-row, .checklist-row.starter-row { grid-template-columns: 24px 1fr; }
  .checklist-row > :not(.row-n):not(input[type=hidden]) { grid-column: 2; }
  .sop-doc { padding: 20px; }
}
.quiz-q { position: relative; }
.quiz-remove { position: absolute; top: -23px; right: 12px; font-size: 0.88rem; padding: 0 6px; background: var(--surface); }
.quiz-actions { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.letter-text p { margin: 0 0 12px; line-height: 1.6; }

/* Office → Reminders: the to-do tiles, the week ahead, each scheduled thing; and one thing's settings beside a preview */
.section-h { font-size: 1.3rem; }
.todo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.todo-tile { gap: 8px; align-content: start; }
.todo-tile .btn { justify-self: start; }
.todo-n { font: 600 2.1rem/1 var(--font-head); color: var(--brand); }
.soon-list { list-style: none; margin: 0; padding: 0; display: grid; }
.soon-list li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.soon-when { font-weight: 600; }
.schedule-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.schedule-what { flex: 1 1 280px; min-width: 0; }
.schedule-what h3 { font-size: 1.1rem; }
.schedule-facts { flex: 1 1 300px; margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; font-size: 0.92rem; }
.schedule-facts dt { color: var(--ink-soft); }
.schedule-facts dd { margin: 0; }
.schedule-row .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.schedule-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.schedule-layout > .panel:first-child { flex: 999 1 520px; min-width: 0; }
.schedule-preview { flex: 1 1 360px; min-width: 0; position: sticky; top: 16px; }
.mail-preview { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.mail-head { display: grid; gap: 2px; padding: 10px 14px; background: var(--surface-2); font-size: 0.92rem; }
.mail-body { padding: 14px; white-space: pre-line; line-height: 1.55; overflow-wrap: anywhere; }
.token-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.token-label { font-weight: 600; font-size: 0.92rem; margin-right: 4px; }
.token { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 0.88rem var(--font-body); cursor: pointer; }
.token:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Sections: a long page in parts, with a sub-sidebar listing them (like the account sidebar) ----------
   Without the script every part shows, one after another, and the sub-sidebar jumps to them; with it, the
   sub-sidebar shows one part at a time. A filter box (data-section-filter) shows matches from every part. */
.sections { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.subnav { display: grid; gap: 4px; position: sticky; top: 16px; }
.subnav-title { font-size: 0.95rem; font-weight: 700; color: var(--ink-soft); padding: 4px 12px 6px; }
.subnav a { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; line-height: 1.3; }
.subnav a small { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.subnav a:hover { background: var(--surface-2); }
.subnav a[aria-current="true"] { background: var(--brand-tint); color: var(--brand-strong); font-weight: 600; }
.sections-body { display: grid; gap: 16px; min-width: 0; }
.section-panel { display: grid; gap: 12px; min-width: 0; }
.section-panel:focus { outline: none; }
.section-panel > h3 { font-size: 1.15rem; }
.js-sections .section-panel[hidden] { display: none; }
.js-sections.filtering .section-panel { display: grid !important; }
.js-sections.filtering .subnav a { opacity: .55; pointer-events: none; }
[data-filter-item][hidden] { display: none !important; }
.section-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.section-filter .input { flex: 1 1 260px; min-height: 48px; }
.section-filter .note { margin: 0; }
@media (max-width: 900px) {
  .sections { grid-template-columns: 1fr; gap: 14px; }
  .subnav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .subnav-title { width: 100%; padding: 0 2px; }
  .subnav a { border: 1px solid var(--line); background: var(--surface); }
}
/* A choice list's running count and total, kept in view at the bottom of the screen */
.pick-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 -6px 18px rgb(28 38 34 / 10%); }
.pick-bar strong { font-size: 1.05rem; }
.q.unanswered { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }

/* ---------- Easier reading (office review, 2026-10-29): labels in normal letters at a readable size ----------
   Small spaced-out capitals are hard to read for many people; these override the label styles above. The brand line
   under the name and the office's OFFICE mark keep theirs. */
.eyebrow, .code, .status, .footer h3, .filters legend, .progress li b, table.data th, .region h3, .table th,
.contact-list dt, .side-group, .field-group legend, .form-part legend, .example, .office-note-head h2, .way .pill,
.sop-firm, .sop-head dt, .subnav-title {
  text-transform: none; letter-spacing: 0;
}
.eyebrow, .code, .progress li b, .region h3, .contact-list dt, .sop-firm { font-size: 0.95rem; }
.status, .example, .way .pill, .sop-head dt { font-size: 0.88rem; }
table.data th, .table th { font-size: 0.92rem; }
.footer h3, .filters legend, .side-group, .field-group legend, .form-part legend, .office-note-head h2 { font-size: 0.95rem; }
.mainnav { text-transform: none; letter-spacing: 0.01em; font-size: 1rem; font-weight: 600; }
.pill, .tag { font-size: 0.85rem; }
.note, .cell-sub, .help { font-size: 0.95rem; }

/* Larger text: the switch in the top bar and the sidebars makes everything measured in rem bigger */
:root[data-text="large"] { font-size: 118.75%; }
:root[data-text="large"] .side a svg, :root[data-text="large"] .side-toggle svg { width: 21px; height: 21px; }

/* The bar above the header on public pages: who to call, and Larger text */
.topbar { background: var(--brand-strong); color: #fff; font-size: 0.95rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding-block: 6px; }
.topbar a { color: #fff; font-weight: 700; }
.topbar-text { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid rgb(255 255 255 / 40%); background: transparent; color: #fff; font: 600 0.92rem var(--font-body); cursor: pointer; }
.topbar-text svg { width: 18px; height: 18px; }
.topbar-text[aria-pressed="true"] { background: #fff; color: var(--brand-strong); }
:root[data-theme="dark"] .topbar { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .topbar a, :root[data-theme="dark"] .topbar-text { color: var(--ink); }
:root[data-theme="dark"] .topbar-text[aria-pressed="true"] { background: var(--ink); color: var(--surface-2); }
.side-help { margin: 14px 0 0; padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 0.95rem; line-height: 1.5; }
.side-help a { font-weight: 700; }

/* Phones: the account menu wraps into rows of buttons (nothing hidden off to the side), and account pages get a
   smaller header so the page starts sooner */
@media (max-width: 900px) {
  .side { display: flex; flex-wrap: wrap; overflow: visible; gap: 6px; }
  .side a, .side .side-toggle { border: 1px solid var(--line); background: var(--surface); padding: 8px 12px; min-height: 44px; }
  .side-help { width: 100%; margin-top: 4px; }
}
.account-page .masthead-top { padding-top: 8px; }
.account-page .masthead-mark .mark, .account-page .masthead-mark svg { width: 36px; height: 36px; }
.account-page .masthead-name { font-size: 1.45rem; margin-top: 2px; }
.account-page .masthead-tag { display: none; }
.account-page .masthead-rule { margin-top: 6px; }
.account-page .dash { padding-top: 20px; }
@media (max-width: 760px) { .topbar .wrap { justify-content: center; text-align: center; } }

/* The account sidebar: Me / Funeral home at the top, one role's rows below */
.side-switch { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; margin-bottom: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.side .side-switch a { justify-content: center; text-align: center; padding: 8px 2px; min-height: 38px; border: 0; border-radius: 9px; background: none; color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; line-height: 1.15; }
.side .side-switch a:hover { color: var(--ink); background: var(--surface); }
.side .side-switch a[aria-current="true"] { background: var(--surface); color: var(--brand-strong); box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }
.side-items > a { padding-block: 8px; }
.side a.side-out { margin-top: 6px; color: var(--ink-soft); }
@media (min-width: 901px) { .account-page .side-help { margin-top: 8px; padding: 10px 12px; font-size: 0.88rem; } }
.topbar-tools { display: inline-flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) { .side-switch { width: 100%; } .side.has-menu .side-switch { margin-bottom: 8px; } }

/* The dashboard's licenses: one to a row, saying plainly what's left */
.licenses { grid-template-columns: 1fr; }
.lic-says { font-size: 1.15rem; margin: 0; }
.lic-says strong { color: var(--brand-strong); }
.next-step { margin: 0 0 4px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--ink); font-size: 1.1rem; }
.next-step strong { color: var(--brand-strong); }
.progress li b { font-size: 0.95rem; }

/* Tables that become cards on phones (a funeral home's team): one person under another, each value labelled */
@media (max-width: 700px) {
  table.card-table thead { display: none; }
  table.card-table, table.card-table tbody, table.card-table tr, table.card-table td { display: block; width: 100%; box-sizing: border-box; }
  table.card-table tr { border-top: 1px solid var(--line); padding: 8px 0; }
  table.card-table td { border: 0; padding: 4px 14px; }
  table.card-table td:empty { display: none; }
  table.card-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink-soft); }
  .table-wrap:has(> table.card-table) { overflow: visible; }
}
.field-inline { display: grid; gap: 6px; font-weight: 600; max-width: 560px; margin-bottom: 12px; }
.add-person { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 10px; }
.add-person h3 { font-size: 1.05rem; }
.add-person .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* A button that opens a short menu (the customer record's Print and Email) */
.act-menu { position: relative; display: inline-block; }
.act-menu > summary { list-style: none; cursor: pointer; }
.act-menu > summary::-webkit-details-marker { display: none; }
.act-menu > summary svg { width: 16px; height: 16px; }
.act-menu[open] > summary svg { transform: rotate(180deg); }
.act-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 260px; display: grid; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.act-menu-panel a, .act-menu-panel button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; border: 0; background: none; color: var(--ink); font: 500 0.98rem var(--font-body); text-decoration: none; cursor: pointer; }
.act-menu-panel a:hover, .act-menu-panel button:hover { background: var(--surface-2); }
.act-menu-panel form { margin: 0; }
.chips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-list a { display: grid; gap: 0; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--brand-strong); font-weight: 600; }
.chips-list a:hover { border-color: var(--brand); }
.chips-list small { color: var(--ink-soft); font-weight: 400; font-size: 0.85rem; }
.section-form { display: grid; gap: 16px; }
.js-sections .section-form:not(:has(.section-panel:not([hidden]))) { display: none; }

/* The account and office menus: on phones, one "Menu: <this page>" button that opens the list (see site.js) */
.side-items { display: contents; }
.side-menu-button { display: none; }
.side .side-help a { display: inline; border: 0; padding: 0; min-height: 0; background: none; font-weight: 700; }
@media (max-width: 900px) {
  .side.has-menu { display: block; }
  .side.has-menu .side-menu-button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 1.05rem var(--font-body); cursor: pointer; }
  .side.has-menu .side-menu-button svg { width: 22px; height: 22px; }
  .side.has-menu .side-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .side.has-menu:not(.open) .side-items { display: none; }
}
.wrap.narrow { max-width: 680px; }
.unsubscribe { gap: 14px; }
.unsubscribe h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* The dashboard's notice of missing details: what's missing, why, and where to add it */
.notice-panel { background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius); padding: 20px 22px; display: grid; gap: 10px; }
.notice-panel h2 { font-size: 1.25rem; }
.notice-panel ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.notice-panel li a { font-weight: 600; }
.notice-panel .form-actions { margin: 4px 0 0; }
.name-sample li { padding: 4px 0; }
.name-row { align-items: end; flex-wrap: wrap; }
.name-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.name-fields label { display: grid; gap: 4px; font-weight: 600; font-size: 0.9rem; }
.name-fields .input { min-height: 42px; width: 11em; }

/* Office → Merge two accounts: the two side by side, the one to keep chosen */
.merge-grid { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.merge-card { gap: 10px; align-content: start; }
.merge-card:has(input[name="keep"]:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent); }
.merge-pick { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.merge-pick input { width: 20px; height: 20px; accent-color: var(--brand); }
.merge-facts { grid-template-columns: 110px minmax(0, 1fr); }
.merge-go { margin-top: 16px; gap: 10px; }

/* Training and SOPs after it ends: read only, so nothing that changes things is offered (the server refuses it too) */
.training-ended form[method="post"], .training-ended [data-change] { display: none !important; }

/* Funeral homes → Training and SOPs pilot: a card for each funeral home */
.usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.usage-card { gap: 10px; align-content: start; }
.usage-last { color: var(--ink-soft); margin: 0; }
.usage-card .dl { grid-template-columns: 140px minmax(0, 1fr); }

/* Funeral home chooser in the account sidebar, for people at more than one */
.side-home { display: grid; gap: 4px; padding: 14px 12px 4px; }
.side-home label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.side-home .select { width: 100%; }

/* Compliance calendar */
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.year-month h3 { margin: 0 0 6px; font-size: 1rem; }
.year-month ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.year-day { color: var(--ink-soft); font-variant-numeric: tabular-nums; display: inline-block; min-width: 3.6em; }
tr.undone td { color: var(--ink-soft); text-decoration: line-through; }
tr.undone td small { text-decoration: none; display: block; }

/* Inspection packet and share links */
.choice-list { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.choice-list legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.new-link { border: 2px solid var(--brand); }
.new-link .input { width: 100%; }
.share-row details { margin-top: 6px; }
.share-top { background: var(--brand); color: var(--on-brand); padding: 12px 0; }
.share-top .wrap { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline; }
.share-main { display: grid; gap: 18px; padding-block: 24px 48px; }
.share-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.share-task { padding-block: 10px; border-top: 1px solid var(--line); }
.share-task:first-of-type { border-top: 0; }
.share-task h3 { margin: 0 0 2px; font-size: 1.05rem; }
.share-assigned { margin: 6px 0; padding-left: 1.1em; }

/* An SOP's signature, and its control block on paper */
.signature { margin-top: 12px; }
.signature .input { max-width: 26em; }
.print-run { width: 100%; border-collapse: collapse; }
.print-run > thead { display: none; }
.print-run > tbody > tr > td { padding: 0; display: grid; gap: 18px; }
.control { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid #2f5a3a; padding: 10px 12px; }
.control dl { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.control dt { font-size: 0.72rem; color: #555; }
.control dd { margin: 0; font-weight: 600; font-size: 0.88rem; }
.sop-qr { flex: none; text-align: center; width: 86px; }
.sop-qr svg { display: block; width: 72px; height: 72px; margin: 0 auto 4px; }
.print-run .sop-head dl { display: none; }
.sop-qr small { display: block; font-size: 0.62rem; line-height: 1.2; }
.control-old { border: 2px solid #a33b2b; color: #a33b2b; font-weight: 700; padding: 8px 12px; margin: 0; }
@media print {
  .print-run > thead { display: table-header-group; }
  .print-run > thead th { font-size: 0.72rem; font-weight: 400; color: #555; text-align: left; padding: 0 0 8px; }
  .print-run > tbody > tr > td { display: block; }
  .print-run > tbody > tr > td > * + * { margin-top: 14px; }
  .share-top { background: none; color: #111; border-bottom: 1px solid #ccc; }
  .share-nav { display: none; }
}

/* Mailed orders */
.mail-choice { display: grid; gap: 6px; margin: 8px 0; }
.mail-choice .note { margin: 0; }
.order-form-post { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.order-form-post .box { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #333; border-radius: 2px; }

/* What a state requires, and its bundle: the state's page and the catalog */
.catalog-requirements { padding-block: 24px 0; }
.requirements { display: grid; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
@media (min-width: 900px) { .requirements:has(.bundle) { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); align-items: start; } }
.requirements h2 { margin: 0 0 12px; font-size: 1.3rem; }
.req-facts { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0 0 14px; }
.req-facts dt { font-size: 0.85rem; color: var(--ink-soft); }
.req-facts dd { margin: 2px 0 0; }
.req-details { margin-bottom: 12px; }
.req-details summary { cursor: pointer; font-weight: 600; }
.req-details .prose-notes { margin-top: 8px; font-size: 0.95rem; }
.req-details .prose-notes p { margin: 0 0 8px; }
.req-yours { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); }
.bundle { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--surface-2); }
.bundle h3 { margin: 0 0 4px; }
.bundle-hours { margin: 0 0 8px; color: var(--ink-soft); }
.bundle ul { margin: 0 0 12px; padding-left: 18px; }
.bundle li { margin-bottom: 4px; }
.bundle-price { margin: 0 0 12px; }
.bundle-price s { color: var(--ink-soft); }
.bundle .btn { width: 100%; }
.hours-warning { margin-bottom: 14px; }
.hours-ok { margin: 0 0 14px; }
.mail-choice fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.mail-choice legend { font-weight: 600; padding: 0; margin-bottom: 4px; }

/* On a phone the number scrolls away with the top bar, so a button to call stays in reach */
.call-now { display: none; }
@media (max-width: 760px) {
  .call-now { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 14px; bottom: 14px; z-index: 40; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
  .call-now svg { width: 18px; height: 18px; }
  .footer { padding-bottom: 76px; }
}
@media print { .call-now { display: none !important; } }
.flow > * { min-width: 0; }
.licence-bar .select { max-width: 100%; }

/* Compliance calendar: everything with a date, and the month to page through */
.due-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.due-filter a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.due-filter a:hover { border-color: var(--brand); }
.due-filter a[aria-current] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.panel-head h2 small { font: inherit; font-size: 0.92rem; font-weight: 400; color: var(--ink-soft); }
.month-head .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.month-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.month-grid th { padding: 6px; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); text-align: left; }
.month-grid td { height: 92px; padding: 6px; border: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.month-grid td.out { background: color-mix(in srgb, var(--line) 22%, transparent); color: var(--ink-soft); }
.month-grid td.today { outline: 2px solid var(--brand); outline-offset: -2px; }
.month-num { display: block; font-size: 0.88rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.month-long { display: none; font-weight: 600; }
.month-grid ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.month-grid li { padding: 2px 5px; border-left: 3px solid var(--line); font-size: 0.85rem; line-height: 1.25; }
.month-grid li a { color: var(--ink); text-decoration: none; }
.month-grid li a:hover { text-decoration: underline; }
.month-grid li.due-overdue { border-left-color: #a33b2b; }
.month-grid li.due-due { border-left-color: var(--accent); }
.month-grid li.due-done { border-left-color: var(--brand); }
@media (max-width: 760px) {
  .month-grid, .month-grid tbody, .month-grid tr, .month-grid td { display: block; width: 100%; }
  .month-grid thead { display: none; }
  .month-grid td { height: auto; border: 0; border-top: 1px solid var(--line); padding: 10px 0; }
  .month-grid td.none, .month-grid td.out { display: none; }
  .month-grid td.today { outline: 0; }
  .month-num { display: none; }
  .month-long { display: block; }
  .month-grid li { font-size: 1rem; padding: 4px 8px; }
}

/* Onboarding checklists */
.inline-start { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.9fr) auto; gap: 12px; align-items: end; }
.inline-start .fieldrow { display: grid; gap: 6px; }
.inline-start .fieldrow > label { font-weight: 600; }
@media (max-width: 760px) { .inline-start { grid-template-columns: 1fr; } }
.inline-h { display: inline; font-size: 1.3rem; }
.starter-items { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.share-list-title { margin: 12px 0 6px; font-size: 1rem; }
.print-h3 { margin: 10px 0 4px; font-size: 1rem; }

/* The funeral home's dashboard */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.glance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.glance-grid .panel { align-content: start; gap: 8px; }
.glance-grid h2 { font-size: 1.15rem; }
.stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat strong small { font-size: 0.55em; font-weight: 400; color: var(--ink-soft); }
.mini-sub { font-size: 1rem; margin-top: 8px; }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .glance-grid { grid-template-columns: minmax(0, 1fr); } }

/* The small calendar */
.mini-cal { display: grid; gap: 12px; }
.mini-head { display: grid; grid-template-columns: 78px minmax(0, 1fr) 78px; align-items: center; gap: 8px; }
.mini-head h3 { text-align: center; font-size: 1.05rem; }
.mini-head .btn { justify-content: center; padding-inline: 6px; }
.mini-window { position: relative; overflow: hidden; }
.mini-grid { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--surface); }
.mini-grid th { padding: 2px 0 6px; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); text-align: center; }
.mini-grid td { padding: 1px; text-align: center; }
.mini-grid td.out .mini-day { color: var(--ink-soft); opacity: 0.45; }
.mini-grid td.today .mini-day { outline: 2px solid var(--brand); outline-offset: -2px; font-weight: 700; }
.mini-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 40px; border-radius: 8px; color: var(--ink); font-size: 0.92rem; font-variant-numeric: tabular-nums; text-decoration: none; }
a.mini-day { font-weight: 600; background: var(--surface-2); }
a.mini-day:hover, a.mini-day[aria-current] { background: var(--brand-tint); color: var(--brand-strong); }
.mini-day i, .mini-key i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.mini-overdue i { background: #a33b2b; }
.mini-due i { background: var(--accent); }
.mini-event i { background: #2f6f9f; border-radius: 2px; }
.mini-done i { background: var(--brand); }
.mini-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--ink-soft); }
.mini-key li { display: flex; align-items: center; gap: 6px; }
.mini-today { font-size: 0.92rem; text-align: center; }
.mini-list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.mini-list-head h4 { font-size: 1rem; margin-right: auto; }
.mini-list { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 300px; overflow-y: auto; display: grid; gap: 0; }
.mini-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.mini-list li[hidden] { display: none; }
.mini-list li:last-child { border-bottom: 0; }
.mini-when { color: var(--ink-soft); font-size: 0.86rem; font-variant-numeric: tabular-nums; padding-top: 2px; }
.mini-list small { display: block; color: var(--ink-soft); font-size: 0.84rem; }
.mini-leaving { position: absolute; inset: 0 auto auto 0; }
.mini-leaving.to-left { animation: mini-out-left 0.28s ease forwards; }
.mini-leaving.to-right { animation: mini-out-right 0.28s ease forwards; }
.mini-arriving.from-right { animation: mini-in-right 0.28s ease; }
.mini-arriving.from-left { animation: mini-in-left 0.28s ease; }
@keyframes mini-out-left { to { transform: translateX(-100%); } }
@keyframes mini-out-right { to { transform: translateX(100%); } }
@keyframes mini-in-right { from { transform: translateX(100%); } }
@keyframes mini-in-left { from { transform: translateX(-100%); } }

/* Premium: plainly locked */
.lock-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.35em; color: var(--accent); flex: none; }
.side a.side-locked { color: var(--ink-soft); }
.side a .side-lock { color: var(--accent); }
.lock-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--accent-tint); }
.lock-banner > .lock-ico { width: 40px; height: 40px; margin: 0; }
.lock-banner h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.lock-banner p { margin-top: 6px; }
.upgrade-h { font-size: 1.3rem; }
.locked-feature h3 { display: flex; align-items: baseline; font-size: 1.1rem; }
.locked-feature h3 .lock-ico { align-self: center; }
.locked-panel { border-style: dashed; border-color: var(--accent); align-content: start; gap: 8px; }
.locked-panel h2 { display: flex; align-items: center; }
.locked-call { font-weight: 600; }
.locked-behind { opacity: 0.35; pointer-events: none; user-select: none; }
.lock-call { border-color: var(--accent); }
@media (max-width: 640px) {
  .lock-banner { grid-template-columns: minmax(0, 1fr); }
  .lock-banner .btn { justify-self: start; }
}

/* Link to an existing record, and previews */
.sop-field-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sop-field-link small { color: var(--ink-soft); }
.tree-layout { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.6fr); gap: 20px; align-items: start; }
.tree { gap: 2px; padding: 14px; }
.tree-folder > summary { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.tree-folder > summary:hover { background: var(--surface-2); }
.tree-folder > summary svg { width: 18px; height: 18px; flex: none; color: var(--brand); }
.tree-folder > summary small { font-weight: 400; color: var(--ink-soft); }
.tree-inside { margin-left: 15px; padding-left: 8px; border-left: 1px solid var(--line); }
.tree-inside ul { list-style: none; margin: 0; padding: 0; }
.tree-inside li a { display: flex; gap: 8px; align-items: flex-start; padding: 7px 6px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.95rem; line-height: 1.3; }
.tree-inside li a:hover { background: var(--surface-2); }
.tree-inside li a[aria-current] { background: var(--brand-tint); color: var(--brand-strong); font-weight: 600; }
.tree-inside li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ink-soft); }
.tree-inside li small { display: block; color: var(--ink-soft); font-weight: 400; font-size: 0.84rem; }
.tree-preview { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.tree-preview .sop-head { flex-wrap: wrap; }
.tree-preview .sop-head dl { max-width: 100%; flex-wrap: wrap; }
.table-wrap { position: relative; }
.tree-pinned > summary { color: var(--ink-soft); }
.tree-edit { margin-left: auto; font-size: 0.82rem; font-weight: 400; }
.tree-kind { display: block; color: var(--ink-soft); font-weight: 400; font-size: 0.84rem; }
.tree-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tree-tag { padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.76rem; color: var(--ink-soft); background: var(--surface); }
.check-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.check-form .input { width: 200px; min-height: 36px; }
.filing { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.filing > summary { cursor: pointer; font-weight: 600; }
.add-menu { position: relative; }
.add-menu > summary { list-style: none; cursor: pointer; }
.add-menu > summary::-webkit-details-marker { display: none; }
.add-menu > summary::after { content: " ▾"; }
.add-menu-list { position: absolute; right: 0; z-index: 5; display: grid; min-width: 220px; margin-top: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px rgb(0 0 0 / 14%); }
.add-menu-list a { padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.add-menu-list a:hover { background: var(--surface-2); }
@media (max-width: 760px) { .add-menu-list { position: static; } }
.preview-frame { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.preview-picture { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.preview-open { font-size: 0.92rem; }
@media (max-width: 900px) { .tree-layout { grid-template-columns: minmax(0, 1fr); } .preview-frame { height: 460px; } }

/* Paper to library */
.paper-steps { counter-reset: paper; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.paper-steps li { counter-increment: paper; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.95rem; }
.paper-steps li::before { content: counter(paper); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 700; }
.paper-steps strong { display: block; margin-bottom: 4px; }
.paper-prompts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.paper-prompts a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--ink); font-size: 0.94rem; }
.paper-prompts a:hover { border-color: var(--brand); }
.paper-where { display: grid; gap: 14px; }
.paper-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .paper-layout { grid-template-columns: minmax(0, 1fr); } }
.record-kind { display: block; font-size: 0.88rem; font-weight: 600; color: var(--accent); }
.paper-choice { border-top: 1px solid var(--line); padding: 10px 0; }
.paper-choice > summary { cursor: pointer; }
.paper-choice .form { margin-top: 10px; }
@media (max-width: 1100px) { .paper-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .paper-steps { grid-template-columns: minmax(0, 1fr); } }

/* The manager guide's Help for this page button, on account pages */
.firm-help-bar { display: flex; justify-content: flex-end; margin-bottom: -6px; }