/* Level 100 working pages: the home page's type, colour and frame, laid over each page's own styles.
   Content, forms and links stay exactly as each page writes them. */
:root {
  --t-black: #060607;
  --t-iron: #2e3238;
  --t-panel: #15171b;
  --t-panel-2: #1c1f24;
  --t-bronze: #7a4826;
  --t-silver: #c9ced6;
  --t-gold: #d4af37;
  --t-paper: #f1f2f4;
  --t-muted: #b3b9c2;
  --t-font: "Epilogue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  /* the working pages are read at arm's length: their titles stop short of the home page's poster size */
  --step-title: clamp(2rem, 1.2rem + 2.8vw, 4rem);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pg :focus-visible { outline: 3px solid var(--t-gold); outline-offset: 4px; }
.pg ::selection { background: var(--t-gold); color: var(--t-black); }

/* ---------- Pay, evaluation and confirmation (one family of markup) ---------- */
.pg-a { --sans: var(--t-font); --black: var(--t-black); --panel: var(--t-panel); --panel-2: var(--t-panel-2); --line: var(--t-iron); --muted: var(--t-muted); --gold-light: var(--t-gold); --gold-dark: var(--t-gold); --white: var(--t-paper); --silver: #dfe2e7; font-size: var(--step-body); }
.pg-a .nav { background: var(--t-black); border-bottom: 0; }
.pg-a .brand .wm { font-weight: 900; letter-spacing: -0.01em; }
.pg-a .brand .sub { font-size: var(--step-small); font-weight: 500; letter-spacing: 0; }
.pg-a .backlink { font-size: var(--step-small); font-weight: 500; }
.pg-a .nav-app { border: 0; border-radius: 0; background: var(--t-paper); font-size: var(--step-small); font-weight: 500; }
.pg-a .intro::before { display: none; }
.pg-a .intro { padding: 72px 0 64px; }
.pg-a .intro-line { display: block; margin: 0 0 16px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: var(--step-lead); font-weight: 500; letter-spacing: 0; text-transform: none; }
.pg-a h1 { font-size: var(--step-title); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 24px; }
.pg-a .lede { max-width: 46ch; color: inherit; font-size: var(--step-lead); line-height: 1.4; }
.pg-a .req-note { font-size: var(--step-small); color: inherit; }

.pg-a .plan, .pg-a .fs, .pg-a .handoff, .pg-a .success { border: 0; border-radius: 0; background: var(--t-panel); }
.pg-a .plan.hero { }
.pg-a .plan-head, .pg-a .fs-head, .pg-a .plan.hero .plan-head { background: var(--t-iron); border-bottom: 0; padding: 20px 24px; }
.pg-a .plan.hero .plan-head { background: var(--t-gold); }
.pg-a .plan.hero .plan-head h2 { color: var(--t-black); }
.pg-a .plan-head h2, .pg-a .fs-head h2 { font-size: var(--step-lead); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.pg-a .tag { padding: 6px 12px; border-radius: 0; background: var(--t-black); color: var(--t-gold); font-size: var(--step-lead); font-weight: 900; letter-spacing: -0.02em; text-transform: none; }
.pg-a .plan-body, .pg-a .fs-body { padding-inline: 24px; }
.pg-a .amt, .pg-a .plan.hero .amt, .pg-a .plan.slim .amt { font-style: normal; font-weight: 900; letter-spacing: -0.04em; color: var(--t-gold); }
.pg-a .amt small { margin-left: 0.3em; font-size: var(--step-body); font-weight: 500; }
.pg-a .amt-note, .pg-a .plan.hero .amt-note, .pg-a .fs-desc, .pg-a .q-hint, .pg-a .send-note, .pg-a .s-note, .pg-a .paynote, .pg-a .handoff .link-hint { font-size: var(--step-small); }
.pg-a .trial-intro, .pg-a .fs-body p, .pg-a .handoff p, .pg-a .s-sub { font-size: var(--step-body); }
.pg-a .feats li, .pg-a .steps li { border-bottom: 0; font-size: var(--step-body); padding-block: 8px; }
.pg-a .steps li { padding-left: 48px; }
.pg-a .steps li::before { border-radius: 0; background: var(--t-gold); font-size: var(--step-small); }
.pg-a .deadline { border: 0; border-radius: 0; background: var(--t-black); color: var(--t-gold); font-size: var(--step-small); font-weight: 500; letter-spacing: 0; }
.pg-a .strike { font-size: var(--step-lead); }

.pg-a .btn { min-height: 56px; padding: 16px 28px; border: 0; border-radius: 0; background: var(--t-gold); color: #141106; font-family: var(--t-font); font-size: var(--step-body); font-weight: 500; letter-spacing: 0; transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.pg-a .btn:hover { background: #e2c25a; }
.pg-a .btn:active { transform: scale(0.97); }
.pg-a .btn-big, .pg-a .submit-row .btn { font-size: var(--step-body); }
.pg-a .submission-actions .btn-secondary, .pg-a .availability .btn-secondary { border: 2px solid #8a8f98; background: transparent; color: var(--t-paper); }

/* the evaluation form: fields keep their lines, everything else takes the house shape */
.pg-a .q-label { font-size: var(--step-body); font-weight: 500; }
.pg-a .ti { border-radius: 0; background: #0d0e11; font-family: var(--t-font); font-size: var(--step-body); }
.pg-a .ti:focus { border-color: var(--t-gold); outline: 2px solid var(--t-gold); outline-offset: 0; }
.pg-a .chip span { border-radius: 0; font-size: var(--step-small); }
.pg-a .activity-tolerance .chip span { border-radius: 0; }
.pg-a .chip input:checked + span { background: var(--t-gold); border-color: var(--t-gold); color: #141106; font-weight: 500; }
.pg-a .fs-count { border: 0; border-radius: 0; background: var(--t-black); font-size: var(--step-small); letter-spacing: 0; }
.pg-a .fs-count.full { background: var(--t-gold); }
.pg-a .availability, .pg-a .answer-review { border-top: 0; }
.pg-a .availability-fields, .pg-a .availability-day, .pg-a .error-box { border-radius: 0; }
.pg-a .s-icon { border-radius: 0; background: var(--t-gold); }
.pg-a .success h2 { font-weight: 900; letter-spacing: -0.03em; }
.pg-a .q-err { font-size: var(--step-small); }

.pg-a footer { border-top: 0; }
.pg-a .foot p, .pg-a .legal { font-size: var(--step-small); }

/* each page opens on its chapter colour from the home page */
.pg-pay .intro { background: var(--t-silver); color: var(--t-black); }
.pg-pay .intro a { color: var(--t-black); }
.pg-eval .intro { background: var(--t-iron); }
.pg-pay .intro :focus-visible { outline-color: var(--t-black); }

/* ---------- Privacy and terms (documents) ---------- */
.pg-b { --bg: var(--t-black); --surface: var(--t-panel); --hairline: rgba(200, 205, 212, 0.18); --dim: var(--t-muted); }
.pg-b body, body.pg-b { font-family: var(--t-font); font-size: var(--step-body); color: #e3e6ea; }
.pg-b header { border-bottom: 0; background: var(--t-black); }
.pg-b .brand { color: var(--t-paper); font-size: var(--step-body); font-weight: 900; letter-spacing: -0.01em; text-transform: none; }
.pg-b .bar a.back { font-size: var(--step-small); }
.pg-b .nav-app { border: 0; border-radius: 0; background: var(--t-paper); font-size: var(--step-small); font-weight: 500; }
.pg-b h1 { font-size: var(--step-title); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 16px; }
.pg-b h2 { color: var(--t-paper); font-size: var(--step-lead); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; text-transform: none; margin-top: 48px; }
.pg-b .meta { font-size: var(--step-small); }
.pg-b table { font-size: var(--step-small); }
.pg-b .note { border: 0; border-radius: 0; background: var(--t-panel); }
.pg-b footer { border-top: 0; font-size: var(--step-small); }

/* ---------- Plan preview, install and booking (built on site.css) ---------- */
.pg-c { --font: var(--t-font); --black: var(--t-black); --surface: var(--t-panel); --line: var(--t-iron); --muted: var(--t-muted); --silver: #dfe2e7; font-size: var(--step-body); }
.pg-c h1 { font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; }
.pg-c h2 { font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
.pg-c h3 { font-weight: 900; letter-spacing: -0.02em; }
.pg-c .nav { border-bottom: 0; background: var(--t-black); }
.pg-c .nav-app { border: 0; border-radius: 0; background: var(--t-paper); font-size: var(--step-small); font-weight: 500; }
.pg-c .nav-link { font-size: var(--step-small); font-weight: 500; }
.pg-c .menu-toggle { border-radius: 0; border: 2px solid var(--t-paper); }
.pg-c .btn { min-height: 56px; padding: 16px 28px; border: 0; border-radius: 0; font-size: var(--step-body); font-weight: 500; transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.pg-c .btn:active { transform: scale(0.97); }
.pg-c .text-link { font-weight: 500; text-decoration-thickness: 2px; }
.pg-c .preview-label, .pg-c .preview-copy .preview-label, .pg-c .install-label, .pg-c .booking-label { color: var(--t-gold); font-size: var(--step-lead); font-weight: 500; letter-spacing: 0; text-transform: none; }
.pg-c .preview-intro, .pg-c .install-intro, .pg-c .booking-intro { font-size: var(--step-lead); line-height: 1.4; }
.pg-c .preview-disclosure, .pg-c .booking-status { border-left: 0; padding: 20px 24px; background: var(--t-panel); font-size: var(--step-body); }
.pg-c .booking-status h2 { font-size: var(--step-lead); }
.pg-c .booking-status p, .pg-c .booking-help p, .pg-c .preview-copy > p, .pg-c .preview-next p { font-size: var(--step-body); }
.pg-c .preview-section, .pg-c .preview-next, .pg-c .preview-footer, .pg-c .install-footer, .pg-c .booking-footer, .pg-c .install-help, .pg-c .booking-help, .pg-c .install-steps li + li { border-top: 0; }
.pg-c .preview-metrics, .pg-c .preview-food { border-top: 0; }
.pg-c .preview-cta { border-left: 0; }
.pg-c .preview-card, .pg-c .install-start { border: 0; border-radius: 0; background: var(--t-panel); }
.pg-c .preview-card-label, .pg-c .preview-card-context, .pg-c .preview-metrics dt, .pg-c .preview-metrics dd span, .pg-c .preview-excerpt figcaption, .pg-c .preview-cta p, .pg-c .preview-footer p, .pg-c .preview-footer a, .pg-c .install-footer p, .pg-c .install-footer a, .pg-c .booking-footer p, .pg-c .booking-footer a, .pg-c .install-source a { font-size: var(--step-small); }
.pg-c .preview-card-label { font-weight: 500; }
.pg-c .preview-metrics dd, .pg-c .preview-food dd { font-weight: 900; letter-spacing: -0.02em; }
.pg-c .install-steps li::marker { font-weight: 900; }

/* ---------- One real picture on the short pages ---------- */
.pg-figure { margin: 32px 0 0; }
.pg-figure img { width: 100%; height: auto; }
.pg-figure figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--t-muted); }
.pg-phone { width: min(100%, 240px); }
.pg-portrait { width: min(100%, 420px); }
.pg-c h1 { font-size: var(--step-title); }
.pg-eval .intro .handoff a:not(.btn) { color: var(--t-gold); }
@media (min-width: 900px) {
  .pg-c .booking-main { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 72px; align-items: start; }
  .pg-c .booking-main > * { grid-column: 1; }
  .pg-c .booking-main > .pg-figure { grid-column: 2; grid-row: 1 / span 8; margin: 0; width: 100%; position: sticky; top: 104px; }
  .pg-c .preview-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 72px; align-items: start; grid-template-rows: auto auto auto 1fr; }
  .pg-c .preview-hero > * { grid-column: 1; }
  .pg-c .preview-hero > .pg-figure { grid-column: 2; grid-row: 1 / span 4; margin: 0; width: 100%; }
  .pg-c .install-main > header { display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 56px; align-items: start; grid-template-rows: auto auto 1fr; }
  .pg-c .install-main > header > * { grid-column: 1; }
  .pg-c .install-main > header > .pg-figure { grid-column: 2; grid-row: 1 / span 3; margin: 0; width: 100%; }
}

/* ---------- Close the drift from the system (DESIGN.md) ---------- */
.pg-c { --white: var(--t-paper); }
.pg-a .nav-app, .pg-b .nav-app, .pg-c .nav-app { padding: 10px 18px; color: var(--t-black); line-height: 1.2; transition: background-color 200ms var(--ease-out); }
.pg-a .nav-app:hover, .pg-b .nav-app:hover, .pg-c .nav-app:hover { background: var(--t-silver); color: var(--t-black); }
.pg-c .btn:hover { background: #e2c25a; border-color: #e2c25a; }
.pg-c .text-link { font-size: var(--step-body); text-underline-offset: 0.2em; transition: text-underline-offset 200ms var(--ease-out); }
.pg-c .text-link:hover { text-underline-offset: 0.35em; }
.pg-b header { position: sticky; top: 0; z-index: 10; }
/* one-off sizes mapped onto the steps */
.pg-c .preview-section h2, .pg-c .preview-next h2, .pg-a .success h2 { font-size: var(--step-title); }
.pg-c .preview-card h3, .pg-c .preview-metrics dd, .pg-c .preview-food dd, .pg-c .booking-help h2, .pg-a .handoff h2, .pg-a .handoff h3 { font-size: var(--step-lead); }
.pg-a .amt, .pg-a .plan.hero .amt { font-size: var(--step-title); line-height: 1; }
.pg-a .plan.slim .amt { font-size: var(--step-lead); }
.pg-a .answer-review dt, .pg-a .answer-review dd { font-size: var(--step-body); }
.pg-a .answer-review dt, .pg-a .availability-day legend { font-weight: 500; }
/* secondary buttons keep a quiet hover; the gold fill belongs to the primary action */
.pg-a .submission-actions .btn-secondary:hover, .pg-a .availability .btn-secondary:hover { background: var(--t-panel-2); border-color: var(--t-paper); color: var(--t-paper); }
/* the success mark was an icon tile stacked over the heading; the heading says it alone */
.pg-a .s-icon { display: none; }

/* ---------- Motion: the heading arrives, then each block once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .pg h1 { animation: pg-rise 700ms var(--ease-out) both; }
  .motion .pg [data-arrive] { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .motion .pg [data-arrive].is-in { opacity: 1; transform: none; }
}
@keyframes pg-rise { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }

.pg-c .preview-copy .preview-detail { font-size: var(--step-body); }
.pg-c .install-steps h2, .pg-c .install-help h2 { font-size: var(--step-lead); }
.pg h1 { text-wrap: balance; }
.pg-b a { overflow-wrap: anywhere; }
.pg-a .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.pg-b main { overflow-wrap: anywhere; }
.pg { overflow-wrap: break-word; }

/* Open app never breaks onto two lines; at narrow widths it gives up padding, not height */
.pg .nav-app { white-space: nowrap; }
@media (max-width: 400px) {
  .pg .nav-app { padding: 10px 12px; }
  .pg .backlink, .pg .bar a.back, .pg .nav-tools .nav-link { padding-inline: 4px; }
  /* logo and controls share one row when they fit; they wrap only on the narrowest phones */
  .pg .nav-tools { width: auto; gap: 8px; }
  .pg .nav-in, .pg .bar { column-gap: 12px; }
  .pg .brand img { width: 112px; }
}