/* ==========================================================================
   Klikka — style.css
   Layout and components. Depends on base.css tokens.
   Mobile first at 390px, then 768, then 1440. One accent, no decorative icons,
   no photography.
   ========================================================================== */

/* --- Bands --------------------------------------------------------------- */
.band {
  padding-block: var(--s8);
  border-top: 1px solid var(--k-mist);
}
.band--tight { padding-block: var(--s7); }
.band--white { background: var(--k-white); }
.band-navy {
  background: var(--k-navy);
  color: var(--k-text-on-navy);
  border-top: 1px solid var(--k-slate-line);
}
.band-navy h1, .band-navy h2, .band-navy h3, .band-navy h4 { color: var(--k-white); }
.band-navy a { color: var(--k-white); }
.band-navy a:hover { color: var(--k-pale); }
.band-navy .muted { color: var(--k-pale); }
.muted { color: var(--k-text-muted); }

.section-head { max-width: 44rem; margin-bottom: var(--s6); }
.section-head p { margin-top: var(--s4); }

/* --- Header -------------------------------------------------------------- */
.site-header {
  background: var(--k-navy);
  border-bottom: 1px solid var(--k-slate-line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 72px;
  padding-block: var(--s3);
}
.brand-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.brand-link img { width: 132px; display: block; }
.header-nav {
  display: none;
  gap: var(--s5);
  align-items: center;
}
.header-nav a {
  color: var(--k-pale);
  text-decoration: none;
  font-size: var(--t-sec);
  font-weight: 500;
  padding: var(--s3) 0;
}
.header-nav a:hover { color: var(--k-white); text-decoration: underline; }
@media (min-width: 56.25rem) {
  .header-nav { display: flex; }
  .brand-link img { width: 148px; }
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-family: var(--k-ui);
  font-size: var(--t-body);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
.btn--primary {
  background: var(--k-teal);          /* White on Coastal Teal = 5.73:1 */
  color: var(--k-white);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--k-teal-deep);
  color: var(--k-white);
}
.btn--ghost-light {
  background: transparent;
  color: var(--k-navy);
  border-color: var(--k-navy);
}
.btn--ghost-light:hover { background: var(--k-navy); color: var(--k-white); }
.btn--ghost-dark {
  background: transparent;
  color: var(--k-white);
  border-color: var(--k-pale);
}
.btn--ghost-dark:hover { background: var(--k-white); color: var(--k-navy); }
.btn--sm { min-height: 44px; font-size: var(--t-sec); padding-inline: var(--s4); }
.btn--block { width: 100%; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  background: var(--k-navy);
  color: var(--k-text-on-navy);
  padding-block: var(--s8) var(--s9);
  border-bottom: 1px solid var(--k-slate-line);
}
.hero__inner { max-width: 46rem; }
.hero h1 { color: var(--k-white); margin-bottom: var(--s5); }
.hero__sub {
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 36rem;
  margin-bottom: var(--s6);
  color: var(--k-pale);
}
.hero__cta { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.hero__note { font-size: var(--t-sec); color: var(--k-pale); }
.hero__rule {
  width: 56px;
  height: 4px;
  background: var(--k-sand);   /* fill only, carries no type */
  margin-bottom: var(--s5);
  border-radius: 2px;
}
@media (min-width: 48rem) {
  .hero { padding-block: var(--s9) var(--s10); }
  .hero__cta { flex-direction: row; align-items: center; gap: var(--s5); }
}

/* --- Compliance block (prominent, not a footnote) ------------------------ */
.compliance {
  background: var(--k-white);
  border-top: 4px solid var(--k-teal);
  border-bottom: 1px solid var(--k-mist);
  padding-block: var(--s7);
}
.compliance h2 { font-size: var(--t-h2); margin-bottom: var(--s4); }
.compliance__lede { max-width: 42ch; margin-bottom: var(--s6); }
.compliance__grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}
.compliance__item {
  border-top: 1px solid var(--k-mist);
  padding-top: var(--s4);
}
.compliance__item h3 { margin-bottom: var(--s2); }
.compliance__item p { font-size: var(--t-sec); color: var(--k-text-muted); }
@media (min-width: 48rem) {
  .compliance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
}
@media (min-width: 68.75rem) {
  .compliance__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Problem: numbered stack -------------------------------------------- */
.problem-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s6);
}
.problem-list > li { border-top: 1px solid var(--k-mist); padding-top: var(--s5); }
.problem-list .idx {
  display: block;
  font-family: var(--k-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--k-teal);
  margin-bottom: var(--s3);
  line-height: 1;
}
.problem-list h3 { margin-bottom: var(--s3); }
.problem-list p { font-size: var(--t-sec); }
.problem-quote {
  margin: var(--s6) 0 0;
  padding: var(--s5);
  background: var(--k-white);
  border-left: 4px solid var(--k-sand);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.problem-quote p { font-family: var(--k-display); font-size: 1.25rem; line-height: 1.35; }
.problem-quote footer { margin-top: var(--s3); font-size: var(--t-cap); color: var(--k-text-muted); }
@media (min-width: 48rem) {
  .problem-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
}

/* --- Measure -------------------------------------------------------------
   No line of prose runs longer than about 70 characters at any width, which
   keeps every page inside the 45-75 character reading band. Rows that hold
   controls rather than sentences opt out. ---------------------------------- */
main p, main li, main dd, .doc__head p { max-width: 45ch; }
.hero__actions, .notfound__actions, .doc__actions, .plan p, .mock__foot,
.compliance__grid p, .cc-banner p, .cc-panel p { max-width: none; }
.plan p, .compliance__grid p { max-width: 34ch; }

/* --- Feature rows (the four screens) ------------------------------------ */
.screens { display: grid; gap: var(--s8); }
.screen > * { min-width: 0; }
.screen {
  display: grid;
  gap: var(--s5);
  align-items: start;
  border-top: 1px solid var(--k-mist);
  padding-top: var(--s6);
}
.screen__body h3 {
  font-family: var(--k-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--s4);
}
.screen__body p, .screen__body ul { max-width: 42ch; }
.screen__body ul { padding-left: 1.1em; margin-top: var(--s4); }
.screen__body li { margin-bottom: var(--s2); font-size: var(--t-sec); }
.screen__n {
  font-family: var(--k-ui);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-text-muted);
  display: block;
  margin-bottom: var(--s3);
}
@media (min-width: 56.25rem) {
  .screen { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
  .screen:nth-child(even) .screen__body { order: 2; }
}

/* Mock panels: built from type and palette only. Decorative, aria-hidden. */
.mock {
  background: var(--k-white);
  border: 1px solid var(--k-mist);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s4);
  font-size: var(--t-cap);
  max-width: min(22rem, 100%);
}
.mock__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--k-mist);
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
}
.mock__bar b { font-family: var(--k-display); font-size: 0.9375rem; font-weight: 600; }
.mock__bar span { color: var(--k-text-muted); font-size: var(--t-cap); letter-spacing: 0.08em; text-transform: uppercase; }
.mock__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: 10px 0;
  border-bottom: 1px solid var(--k-shell);
}
.mock__row:last-child { border-bottom: 0; }
.mock__row > * { min-width: 0; overflow-wrap: anywhere; }
.mock__row span:first-child { color: var(--k-navy); }
.mock__time {
  font-variant-numeric: tabular-nums;
  color: var(--k-text-muted);
  min-width: 3.2em;
}
.pill {
  display: inline-block;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--t-cap);
  font-weight: 700;
  white-space: nowrap;
}
.pill--confirmed { background: #e3f0ea; color: #22694b; }
.pill--option { background: #f6ecd9; color: #8c5b12; }
.pill--tbc { background: var(--k-shell); color: #4d565c; }
.pill--paid { background: #e2eef3; color: var(--k-teal-deep); }
.mock__meter {
  height: 8px;
  background: var(--k-shell);
  border-radius: 4px;
  overflow: hidden;
  margin: var(--s3) 0 var(--s2);
  border: 1px solid var(--k-mist);
}
.mock__meter i { display: block; height: 100%; background: var(--k-teal); }
.mock__meter i.sand { background: var(--k-sand); }
.mock__foot { color: var(--k-text-muted); font-size: var(--t-cap); }
.mock--wl { background: var(--k-navy); border-color: var(--k-slate-line); }
.mock--wl .mock__bar { border-color: var(--k-slate-line); }
.mock--wl .mock__bar b, .mock--wl .mock__row span:first-child { color: var(--k-white); }
.mock--wl .mock__bar span, .mock--wl .mock__foot, .mock--wl .mock__time { color: var(--k-pale); }
.mock--wl .mock__row { border-color: var(--k-slate-line); }
.mock--wl .mock__meter { background: #12303f; border-color: var(--k-slate-line); }

/* --- Occasions ----------------------------------------------------------- */
.occasions {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--k-mist);
}
.occasions > li {
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--k-mist);
  display: grid;
  gap: var(--s2);
}
.occasions .o-name {
  font-family: var(--k-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
.occasions .o-num {
  font-size: var(--t-cap);
  color: var(--k-text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.occasions .o-desc { font-size: var(--t-sec); color: var(--k-text-muted); margin: 0; max-width: 45ch; }
@media (min-width: 48rem) {
  .occasions > li {
    grid-template-columns: 4rem 14rem 1fr;
    align-items: baseline;
    gap: var(--s5);
  }
}

/* --- Pricing: cards, not a table. Three plans never work as a table on a
       phone, and a horizontally scrolling price list loses the sale. ------- */
.plans {
  list-style: none;
  margin: 0 0 var(--s6);
  padding: 0;
  display: grid;
  gap: var(--s4);
}
.plan {
  position: relative;
  background: var(--k-white);
  border: 1px solid var(--k-mist);
  border-radius: var(--r-card);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.plan--featured {
  border-color: var(--k-teal);
  box-shadow: var(--shadow);
}
.plan__flag {
  align-self: flex-start;
  background: var(--k-teal);
  color: var(--k-white);
  font-size: var(--t-cap);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px var(--s3);
  border-radius: 999px;
}
.plan__name {
  font-family: var(--k-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}
.plan__price {
  font-family: var(--k-display);
  font-size: clamp(2rem, 1.7rem + 1.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.plan__price span { font-family: var(--k-ui); font-size: var(--t-sec); font-weight: 500; white-space: nowrap; }
.plan__annual { font-size: var(--t-sec); color: var(--k-text-muted); margin: 0; }
.plan__desc { font-size: var(--t-sec); margin: 0; }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.plan__list li {
  position: relative;
  padding-left: var(--s5);
  font-size: var(--t-sec);
}
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  background: var(--k-teal);
}
@media (min-width: 56.25rem) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
  .plan { padding: var(--s6); }
}
.price-notes { display: grid; gap: var(--s4); margin-top: var(--s5); }
.price-note {
  border-left: 3px solid var(--k-teal);
  padding-left: var(--s4);
  font-size: var(--t-sec);
}
@media (min-width: 48rem) { .price-notes { grid-template-columns: 1fr 1fr; gap: var(--s6); } }

/* --- "What Klikka is not" ----------------------------------------------- */
.notlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.notlist li {
  padding-left: var(--s5);
  position: relative;
  font-size: var(--t-sec);
}
.notlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 2px;
  background: var(--k-coral);   /* boundary marker, not type */
}
.notlist strong { display: block; font-size: var(--t-body); margin-bottom: 2px; }
@media (min-width: 48rem) { .notlist { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s7); } }

/* --- Contact ------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--s6); }
.contact-grid > *, .contact-grid dt, .contact-grid dd { min-width: 0; }
/* Long addresses must be allowed to break at 320px with enlarged text. */
.contact-grid a, .site-footer a[href^="mailto"], .doc__body a[href^="mailto"] { overflow-wrap: anywhere; }
.contact-grid dt {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-pale);
  margin-bottom: var(--s2);
}
.contact-grid dd { margin: 0 0 var(--s5); font-size: var(--t-sec); }
@media (min-width: 48rem) { .contact-grid { grid-template-columns: 1.2fr 1fr; gap: var(--s8); } }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--k-navy-deep);
  color: var(--k-pale);
  padding-block: var(--s7);
  border-top: 1px solid var(--k-slate-line);
  font-size: var(--t-sec);
}
.site-footer a { color: var(--k-white); }
.footer-top { display: grid; gap: var(--s6); margin-bottom: var(--s6); }
.footer-logo img { width: 140px; }
.footer-desc { margin-top: var(--s3); font-size: var(--t-cap); color: var(--k-pale); }
.footer-nav h2 {
  font-family: var(--k-ui);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-pale);
  margin-bottom: var(--s3);
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-legal {
  border-top: 1px solid var(--k-slate-line);
  padding-top: var(--s5);
  display: grid;
  gap: var(--s3);
  font-size: var(--t-cap);
  color: var(--k-pale);
}
.entity-line { max-width: 62rem; }
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--k-white);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  min-height: 44px;
}
@media (min-width: 48rem) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s7); }
}

/* --- Legal / document pages --------------------------------------------- */
.doc { background: var(--k-shell); }
.doc__head { background: var(--k-navy); color: var(--k-pale); padding-block: var(--s7); }
.doc__head h1 { color: var(--k-white); font-size: clamp(1.75rem, 1.32rem + 2.15vw, 2.75rem); margin-bottom: var(--s4); }
.doc__meta { font-size: var(--t-sec); color: var(--k-pale); }
.doc__layout { padding-block: var(--s7); }
.doc__body { max-width: 45ch; min-width: 0; }
.doc__body h2 {
  font-size: clamp(1.25rem, 1.14rem + 0.55vw, 1.625rem);
  margin: var(--s7) 0 var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--k-mist);
}
.doc__body h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.doc__body h3 { margin: var(--s5) 0 var(--s3); }
.doc__body ul, .doc__body ol { padding-left: 1.25em; }
.doc__body li { margin-bottom: var(--s3); }
.doc__body .callout {
  background: var(--k-white);
  border: 1px solid var(--k-mist);
  border-left: 4px solid var(--k-teal);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: var(--s5);
  margin: var(--s5) 0;
}
.doc__body .callout p:first-child { margin-top: 0; }
.doc__toc {
  background: var(--k-white);
  border: 1px solid var(--k-mist);
  border-radius: var(--r-card);
  padding: var(--s5);
  margin-bottom: var(--s6);
}
.doc__toc h2 {
  font-family: var(--k-ui);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--s3);
  border: 0;
  padding: 0;
  color: var(--k-text-muted);
}
.doc__toc ol { margin: 0; padding-left: 1.25em; }
.doc__toc a { min-width: 44px; }
.doc__toc li { margin-bottom: var(--s2); font-size: var(--t-sec); }
.ph {
  background: #f6ecd9;               /* Sand-tinted fill, navy type on top */
  color: var(--k-navy);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9em;
  white-space: normal;
}
.table-scroll { overflow-x: auto; margin: 0 0 var(--s5); -webkit-overflow-scrolling: touch; }
.dtable {
  min-width: 34rem;
  background: var(--k-white);
  border: 1px solid var(--k-mist);
  border-radius: var(--r-card);
  font-size: var(--t-sec);
}
.dtable caption { caption-side: top; text-align: left; font-size: var(--t-cap); color: var(--k-text-muted); padding-bottom: var(--s3); }
.dtable th, .dtable td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--k-mist); vertical-align: top; }
.dtable thead th {
  font-family: var(--k-ui);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--k-shell);
}
.dtable tbody tr:last-child th, .dtable tbody tr:last-child td { border-bottom: 0; }
@media (min-width: 64rem) {
  .doc__layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s7); align-items: start; }
  .doc__toc { position: sticky; top: 96px; margin-bottom: 0; }
}

/* --- 404 ----------------------------------------------------------------- */
.notfound {
  background: var(--k-navy);
  color: var(--k-pale);
  min-height: 60vh;          /* fallback */
  min-height: 60dvh;         /* iOS Safari toolbars change the viewport */
  display: flex;
  align-items: center;
  padding-block: var(--s8);
}
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.notfound__links { margin-top: var(--s7); }
.notfound__links h2 {
  font-family: var(--k-ui);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-pale);
  margin-bottom: var(--s3);
}
.notfound__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.notfound__links a { color: var(--k-white); font-size: var(--t-sec); }
@media (min-width: 43.75rem) {
  .notfound__links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
}
.notfound h1 { color: var(--k-white); margin-bottom: var(--s5); }
.notfound__code {
  font-family: var(--k-ui);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-pale);
  margin-bottom: var(--s4);
}
.notfound ul { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: var(--s3); }

/* --- Cookie consent ----------------------------------------------------- */
.cc-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--k-white);
  border-top: 4px solid var(--k-teal);
  box-shadow: 0 -8px 24px rgba(12, 34, 49, 0.12);
  /* Safe-area padding: a Reject button under the home indicator is a
     compliance problem, not a cosmetic one. */
  padding-top: var(--s5);
  padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cc-banner[hidden], .cc-panel[hidden] { display: none !important; }
.cc-banner__inner { display: grid; gap: var(--s4); }
.cc-banner h2 { font-size: 1.125rem; font-family: var(--k-ui); font-weight: 700; letter-spacing: 0; }
.cc-banner p { font-size: var(--t-sec); max-width: 46rem; }
.cc-actions { display: grid; gap: var(--s3); }
.cc-actions .btn { width: 100%; }
@media (min-width: 43.75rem) {
  .cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
  .cc-actions .btn { width: auto; min-width: 11rem; }
}
/* Accept and Reject are visually identical — an unequal banner is a breach. */
.cc-actions .btn--equal,
.cc-panel__actions .btn--equal {
  background: var(--k-teal);
  color: var(--k-white);
  border-color: var(--k-teal);
}
.cc-actions .btn--equal:hover,
.cc-panel__actions .btn--equal:hover { background: var(--k-teal-deep); border-color: var(--k-teal-deep); }

.cc-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(12, 34, 49, 0.55);
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  place-items: end center;
  padding: 0;
}
.cc-panel__card {
  background: var(--k-white);
  width: 100%;
  max-width: 40rem;
  max-height: 92vh;   /* fallback */
  max-height: calc(100dvh - var(--s5) - env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: var(--s6) var(--s5) var(--s5);
}
.cc-panel__card h2 { font-size: 1.375rem; margin-bottom: var(--s4); }
.cc-group {
  border: 1px solid var(--k-mist);
  border-radius: var(--r-card);
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.cc-group__top { display: flex; justify-content: space-between; gap: var(--s4); align-items: flex-start; }
.cc-group h3 { margin-bottom: var(--s2); }
.cc-group p { font-size: var(--t-sec); color: var(--k-text-muted); margin: 0; }
.cc-toggle { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: var(--t-sec); font-weight: 700; white-space: nowrap; }
.cc-toggle input { width: 22px; height: 22px; accent-color: var(--k-teal); }
.cc-locked { font-size: var(--t-cap); color: var(--k-text-muted); font-weight: 400; }
.cc-panel__actions {
  position: sticky;
  bottom: calc(-1 * var(--s5));
  background: var(--k-white);
  margin-top: var(--s5);
  padding-block: var(--s4);
  border-top: 1px solid var(--k-mist);
  display: grid;
  gap: var(--s3);
}
@media (min-width: 43.75rem) {
  .cc-panel { place-items: center; padding: var(--s5); }
  .cc-panel__card { border-radius: var(--r-card); padding: var(--s6); }
  .cc-panel__actions { display: flex; gap: var(--s4); }
  .cc-panel__actions .btn { min-width: 11rem; }
}

/* --- Print: legal pages go into operators' compliance files -------------- */
@media print {
  @page { margin: 18mm 16mm; }
  html, body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }
  .site-header, .cc-banner, .cc-panel, .skip-link, .doc__toc, .site-footer .footer-nav,
  .btn, .btn-link { display: none !important; }
  .doc__head { background: #fff !important; color: #000 !important; padding-block: 0 0 8mm !important; border-bottom: 1pt solid #000; }
  .doc__head h1, .doc__body h2, .doc__body h3 { color: #000 !important; }
  .doc__meta { color: #000 !important; }
  .doc__layout { display: block !important; padding-block: 6mm 0 !important; }
  .doc__body { max-width: none; }
  .doc__body h2 { page-break-after: avoid; margin-top: 8mm; }
  .doc__body p, .doc__body li { page-break-inside: avoid; }
  .callout, .dtable { border: 0.5pt solid #000 !important; background: #fff !important; }
  .dtable { min-width: 0; font-size: 9pt; }
  .table-scroll { overflow: visible !important; }
  .ph { background: #fff !important; border: 0.5pt dashed #000; }
  a { color: #000 !important; text-decoration: underline; }
  .doc__body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }
  .site-footer { background: #fff !important; color: #000 !important; border-top: 0.5pt solid #000; padding-block: 6mm 0; }
  .site-footer a { color: #000 !important; }
  .print-note { display: block !important; }
}
.print-note { display: none; }