:root {
  /* Dakscope "North Sea". Deep ink carries the text, cobalt carries action,
     sky is a highlight rather than a second brand colour. Semantic green/amber/
     red are reserved for status and never used decoratively. */
  --color-text: #10253F;
  --color-text-strong: #0A1A2E;
  --color-text-muted: #64748B;
  --color-text-subtle: #8FA0B4;

  --color-brand: #2563EB;
  --color-brand-hover: #1D4ED8;
  --color-brand-soft: #EEF5FF;
  --color-brand-ink: #FFFFFF;
  --color-accent: #38BDF8;
  --color-warm: #F97360;

  --color-bg: #F5F8FC;
  --color-surface: #FFFFFF;
  --color-surface-2: #F5F8FC;
  --color-surface-3: #EEF5FF;
  --color-border: #DCE5EF;
  --color-border-strong: #C3D2E4;

  --color-success: #16A34A;
  --color-success-soft: #F0FDF4;
  --color-warning: #F59E0B;
  --color-warning-soft: #FFFBEB;
  --color-danger: #DC2626;
  --color-danger-soft: #FEF2F2;
  --color-info: #2563EB;
  --color-info-soft: #EEF5FF;

  /* Status badge tints and inks. Tokenised so no status colour is written as a
     raw hex in a rule, and so contrast can be adjusted in one place. */
  --badge-ok-bg: #BBF7D0; --badge-ok-ink: #14532D;
  --badge-warn-bg: #FDE68A; --badge-warn-ink: #78350F;
  --badge-stop-bg: #FECACA; --badge-stop-ink: #7F1D1D;
  --badge-info-bg: #BFDBFE; --badge-info-ink: #1E3A8A;
  --badge-neutral-bg: #E9EEF4; --badge-neutral-ink: #33465F;
  --color-on-ink: #E4ECF6; --color-on-ink-muted: #9DB0C7;
  --color-warm-soft: #FFF4F2; --color-warm-ink: #B4442F;

  /* Aliases so existing rules keep working while the tokens above are the
     single source of truth. */
  --ink: var(--color-text); --ink-2: #33465F; --ink-3: var(--color-text-muted);
  --ink-4: var(--color-text-subtle);
  --line: var(--color-border); --line-2: var(--color-border-strong);
  --surface: var(--color-surface); --surface-2: var(--color-surface-2);
  --surface-3: var(--color-surface-3);
  --brand: var(--color-brand); --brand-2: var(--color-brand-hover);
  --brand-ink: var(--color-brand-ink); --brand-wash: var(--color-brand-soft);
  --ok: var(--color-success); --ok-wash: var(--color-success-soft);
  --warn: #B45309; --warn-wash: var(--color-warning-soft);
  --stop: var(--color-danger); --stop-wash: var(--color-danger-soft);
  --info: var(--color-info); --info-wash: var(--color-info-soft);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 20px;
  --shadow-1: 0 1px 2px rgba(16,37,63,.05), 0 1px 3px rgba(16,37,63,.04);
  --shadow-2: 0 4px 14px rgba(16,37,63,.07), 0 1px 3px rgba(16,37,63,.05);
  --shadow-3: 0 20px 44px rgba(16,37,63,.13);
  --container: 1160px;
  /* One mature sans stack, served by the operating system. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: var(--surface); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.021em; font-weight: 640; }
h1 { font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -.03em; }
h2 { font-size: clamp(23px, 2.9vw, 33px); letter-spacing: -.025em; }
h3 { font-size: 18px; } h4 { font-size: 15px; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: var(--r1); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s5); }
.stack > * + * { margin-top: var(--s4); }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- wordmark */
/* No `gap` here: an inline-flex container treats "Dak" and <em>scope</em> as
   two anonymous items, so a gap prints the brand as "Dak scope". The glyph
   carries its own margin instead. */
.wordmark { display: inline-flex; align-items: center; font-weight: 680;
  font-size: 18px; letter-spacing: -.03em; color: var(--ink); }
.wordmark .glyph { width: 26px; height: 26px; flex: none; margin-right: 9px; }
.wordmark em { font-style: normal; color: var(--brand); }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r1); border: 1px solid transparent;
  font-weight: 560; font-size: 14.5px; cursor: pointer; background: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-2); }
.btn-secondary { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-3); border-color: var(--ink-4); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger { background: var(--stop); color: #fff; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15.5px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* ---------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  box-shadow: var(--shadow-1); }
.card-pad { padding: var(--s5); }
.card-head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }

/* --------------------------------------------------------------- badges */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 560; border: 1px solid transparent; }
.badge-ok { background: var(--ok-wash); color: var(--ok); border-color: var(--badge-ok-bg); }
.badge-warn { background: var(--warn-wash); color: var(--warn); border-color: var(--badge-warn-bg); }
.badge-stop { background: var(--stop-wash); color: var(--stop); border-color: var(--badge-stop-bg); }
.badge-info { background: var(--info-wash); color: var(--info); border-color: var(--badge-info-bg); }
.badge-neutral { background: var(--surface-3); color: var(--ink-2); border-color: var(--line); }
.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ---------------------------------------------------------------- forms */
.field { display: block; }
.field + .field { margin-top: var(--s4); }
.label { display: block; font-size: 13.5px; font-weight: 560; margin-bottom: 6px; color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-2);
  border-radius: var(--r1); background: var(--surface); transition: border-color .15s ease;
}
.textarea { height: auto; padding: 10px 12px; min-height: 92px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(20,121,102,.14); }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.error-text { font-size: 12.5px; color: var(--stop); margin-top: 5px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

/* --------------------------------------------------------------- tables */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3); font-weight: 600;
  padding: 10px var(--s4); border-bottom: 1px solid var(--line); }
.table td { padding: 13px var(--s4); border-bottom: 1px solid var(--line); font-size: 14.5px; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover { background: var(--surface-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- states, alerts */
.alert { display: flex; gap: var(--s3); padding: var(--s4); border-radius: var(--r2);
  border: 1px solid; font-size: 14px; }
.alert-warn { background: var(--warn-wash); border-color: var(--badge-warn-bg); color: var(--badge-warn-ink); }
.alert-stop { background: var(--stop-wash); border-color: var(--badge-stop-bg); color: var(--badge-stop-ink); }
.alert-info { background: var(--info-wash); border-color: var(--badge-info-bg); color: var(--badge-info-ink); }
.alert-ok { background: var(--ok-wash); border-color: var(--badge-ok-bg); color: var(--badge-ok-ink); }

.empty { text-align: center; padding: var(--s8) var(--s5); }
.empty .glyph { margin: 0 auto var(--s4); color: var(--ink-4); }
.empty h3 { margin-bottom: 6px; }

.skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--badge-neutral-bg) 37%, var(--surface-3) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: var(--r1); }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ------------------------------------------------------- public chrome */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .inner { display: flex; align-items: center; gap: var(--s6);
  height: 66px; }
.site-nav { display: flex; gap: var(--s5); margin-left: auto; }
.site-nav a { font-size: 14.5px; color: var(--ink-2); font-weight: 520; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: var(--s3); }
.nav-toggle { display: none; }

.hero { padding: var(--s8) 0 var(--s7); background:
  linear-gradient(180deg, var(--color-brand-soft) 0%, var(--color-surface) 78%); }
.hero h1 { margin: var(--s5) 0 var(--s4); max-width: 17ch; }
.hero .lede { font-size: 18px; color: var(--ink-2); max-width: 58ch; }
.hero .actions { display: flex; gap: var(--s3); margin-top: var(--s6); flex-wrap: wrap; }

.section { padding: var(--s9) 0; }
.section-tight { padding: var(--s8) 0; }
.section-alt { background: var(--color-surface-2); border-block: 1px solid var(--line); }
.section-ink { background: var(--color-text-strong); color: var(--color-on-ink); }
.section-ink h2, .section-ink h3 { color: #FFFFFF; }
.section-ink .muted { color: var(--color-on-ink-muted); }
.section-ink .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.rule-accent { width: 44px; height: 3px; border-radius: 3px;
  background: var(--color-accent); margin-bottom: var(--s4); }
.section-head { max-width: 62ch; margin-bottom: var(--s6); }
.section-head h2 { margin-bottom: var(--s3); }
.eyebrow-label { font-size: 12.5px; font-weight: 640; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand); margin-bottom: var(--s3); }

.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.feature { padding: var(--s5); }
.feature .glyph { color: var(--brand); margin-bottom: var(--s4); }
.feature h3 { margin-bottom: 6px; }

.steps { counter-reset: step; display: grid; gap: var(--s4); }
.steps > .step { display: grid; grid-template-columns: 36px 1fr; gap: var(--s4);
  align-items: start; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.steps > .step:last-child { border-bottom: none; }
.steps > .step .n { width: 30px; height: 30px; border-radius: 999px;
  background: var(--brand-wash); color: var(--brand); display: grid;
  place-items: center; font-weight: 640; font-size: 14px; }

.site-footer { border-top: 1px solid var(--line); padding: var(--s7) 0 var(--s6);
  background: var(--surface-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s5); }
.footer-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: var(--s3); font-weight: 620; }
.footer-grid a { display: block; padding: 4px 0; font-size: 14px; color: var(--ink-2); }
.footer-grid a:hover { color: var(--ink); }
.footer-base { margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--line); display: flex; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; font-size: 13.5px; color: var(--ink-3); }

/* --------------------------------------------------------- product shot */
.shot { margin-top: var(--s7); border-radius: var(--r4); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow-3); overflow: hidden; }
.shot-bar { height: 38px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  display: flex; align-items: center; padding: 0 var(--s4); gap: 6px; }
.shot-bar i { width: 9px; height: 9px; border-radius: 999px; background: var(--line-2); }
.shot-body { display: grid; grid-template-columns: 200px 1fr; min-height: 380px; }
.shot-side { border-right: 1px solid var(--line); padding: var(--s4); background: var(--surface-2); }
.shot-side .row { height: 30px; border-radius: var(--r1); margin-bottom: 6px;
  display: flex; align-items: center; padding: 0 10px; font-size: 13.5px; color: var(--ink-3); }
.shot-side .row.active { background: var(--brand-wash); color: var(--brand); font-weight: 560; }
.shot-main { padding: var(--s5); }

/* ---------------------------------------------------------- app chrome */
.app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.app-side { border-right: 1px solid var(--line); background: var(--color-surface);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2);
  position: sticky; top: 0; height: 100vh; }
.app-side .brand { padding: var(--s2) var(--s3) var(--s5); }
.app-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--r1); font-size: 14.5px; color: var(--ink-2); font-weight: 520; }
.app-nav a:hover { background: var(--surface-3); color: var(--ink); }
.app-nav a[aria-current="page"] { background: var(--color-brand-soft);
  color: var(--color-brand-hover); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--color-brand); }
.app-side .foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--s3); }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-top { height: 62px; border-bottom: 1px solid var(--line); display: flex;
  align-items: center; gap: var(--s4); padding: 0 var(--s5); background: var(--surface);
  position: sticky; top: 0; z-index: 20; }
.app-body { padding: var(--s5); flex: 1; background: var(--color-bg); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.page-head h1 { font-size: 25px; letter-spacing: -.02em; }
.crumbs { font-size: 13.5px; color: var(--ink-3); margin-bottom: 6px; }
.crumbs a:hover { color: var(--ink); }

.stat { padding: var(--s4) var(--s5); }
.stat .label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); font-weight: 600; }
.stat .value { font-size: 28px; font-weight: 660; margin-top: 4px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.metric { padding: var(--s4) var(--s5); }
.metric .label { font-size: 12.5px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; }
.metric .value { font-size: 26px; font-weight: 660; margin-top: 3px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.metric .sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

.toolbar { display: flex; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.toolbar .input, .toolbar .select { height: 38px; width: auto; min-width: 190px; }

.toast-wrap { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 90;
  display: flex; flex-direction: column; gap: var(--s2); }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r2);
  box-shadow: var(--shadow-3); font-size: 14px; max-width: 380px; }
.toast.err { background: var(--stop); }

.modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 80;
  display: grid; place-items: center; padding: var(--s5); }
.modal { background: var(--surface); border-radius: var(--r3); box-shadow: var(--shadow-3);
  width: min(620px, 100%); max-height: 86vh; overflow: auto; }
.modal-head { padding: var(--s5) var(--s5) var(--s3); }
.modal-body { padding: 0 var(--s5) var(--s4); }
.modal-foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: var(--s3); }

/* ---------------------------------------------------------- roof viewer */
.viewer { background: var(--surface-3); border-radius: var(--r2); position: relative;
  overflow: hidden; }
.viewer svg { width: 100%; height: auto; display: block; }
.viewer .face { cursor: pointer; transition: opacity .12s ease; }
.viewer .face:hover { opacity: .82; }
.viewer .face[data-selected="true"] { stroke: var(--ink); stroke-width: 2.5; }
.legend { display: flex; gap: var(--s4); padding: var(--s3) var(--s4); flex-wrap: wrap;
  font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line); }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  margin-right: 6px; vertical-align: -1px; }

.diff { display: inline-flex; align-items: baseline; gap: 8px; }
.diff .was { color: var(--ink-4); text-decoration: line-through; font-size: 13.5px; }
.diff .now { font-weight: 600; }

.timeline-activity { list-style: none; margin: 0; padding: 0; }
.timeline-activity li { display: grid; grid-template-columns: 12px 1fr; gap: var(--s3);
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.timeline-activity li:last-child { border-bottom: none; }
.timeline-activity .pin { width: 8px; height: 8px; border-radius: 999px; background: var(--line-2);
  margin-top: 7px; }

.progress-list { list-style: none; margin: 0; padding: 0; }
.progress-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  color: var(--ink-3); font-size: 14.5px; }
.progress-list li.done { color: var(--ink); }
.progress-list li.active { color: var(--brand); font-weight: 560; }
.spinner { width: 15px; height: 15px; border: 2px solid var(--line-2);
  border-top-color: var(--brand); border-radius: 999px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .cols-3, .cols-4, .cols-2, .grid-2, .metric-grid, .footer-grid { grid-template-columns: 1fr; }
  .site-nav { display: none; }
  .site-nav.open { display: flex; position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--line);
    padding: var(--s4) var(--s5); gap: var(--s3); }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .app { grid-template-columns: 1fr; }
  .app-side { position: static; height: auto; flex-direction: row; align-items: center;
    overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .app-side .brand { padding: 0 var(--s3) 0 0; }
  .app-nav { display: flex; gap: var(--s2); }
  .app-side .foot { display: none; }
  .shot-body { grid-template-columns: 1fr; }
  .shot-side { display: none; }
  /* Tables become cards rather than collapsing into an unusable grid. */
  .table.responsive thead { display: none; }
  .table.responsive tr { display: block; border: 1px solid var(--line);
    border-radius: var(--r2); margin-bottom: var(--s3); padding: var(--s3); background: var(--surface); }
  .table.responsive td { display: flex; justify-content: space-between; gap: var(--s4);
    border: none; padding: 5px 0; text-align: left; }
  .table.responsive td::before { content: attr(data-label); color: var(--ink-3);
    font-size: 13px; font-weight: 560; }
}
@media (max-width: 560px) {
  .hero { padding: var(--s7) 0 var(--s6); }
  .section, .section-tight { padding: var(--s7) 0; }
  .app-body { padding: var(--s4); }
}


/* ------------------------------------------------ meetstaat & quotes */
.panel { background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--r3); overflow: hidden; }
.panel + .panel { margin-top: var(--s4); }
.panel-head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.panel-head h3 { font-size: 15px; }

/* A data row reads as a measurement, not a marketing card. */
.measure-list { display: grid; }
.measure {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s4);
  align-items: baseline; padding: 11px var(--s5); border-bottom: 1px solid var(--line);
}
.measure:last-child { border-bottom: none; }
.measure .name { font-size: 14.5px; }
.measure .qty { font-variant-numeric: tabular-nums; font-weight: 620; font-size: 15px;
  color: var(--color-text-strong); }
.measure .src { font-size: 12px; color: var(--color-text-muted); }
.measure.na .qty { color: var(--color-text-subtle); font-weight: 500; }
.measure.na .name { color: var(--color-text-muted); }

.totals { border-top: 2px solid var(--color-text); }
.totals .row { display: flex; justify-content: space-between; gap: var(--s4);
  padding: 7px var(--s5); font-size: 14.5px; }
.totals .row.grand { border-top: 1px solid var(--line); margin-top: 4px;
  padding-top: 12px; font-size: 17px; font-weight: 660;
  color: var(--color-text-strong); }
.totals .row .v { font-variant-numeric: tabular-nums; }

.side-sticky { position: sticky; top: 78px; }

.line-editor { width: 100%; border-collapse: collapse; }
.line-editor th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-muted); font-weight: 620; text-align: left;
  padding: 8px var(--s3); border-bottom: 1px solid var(--line); }
.line-editor td { padding: 6px var(--s3); border-bottom: 1px solid var(--line);
  vertical-align: middle; }
.line-editor .input { height: 34px; }
.line-editor .num-input { text-align: right; font-variant-numeric: tabular-nums; }
.section-title { background: var(--color-surface-3); font-weight: 620; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-brand-hover); }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  padding: 2px 8px; border-radius: 999px; background: var(--color-surface-3);
  color: var(--color-brand-hover); font-weight: 560; }
.chip-manual { background: var(--color-warm-soft); color: var(--color-warm-ink); }
.chip-na { background: var(--color-surface-2); color: var(--color-text-subtle); }

/* Customer-facing quote: the roofer's brand, not Dakscope cobalt, and the same
   restraint as the workspace. Simpler on purpose: a customer reads this once
   to decide, and every element has to earn its place. */
.quote-doc {
  --accent: var(--color-brand);
  max-width: 880px; margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(20, 26, 33, .07), 0 12px 32px rgba(20, 26, 33, .05);
  overflow: hidden;
}
.quote-doc__masthead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding: 28px 32px; background: var(--accent); color: #fff;
}
.quote-doc__identity { min-width: 0; }
.quote-doc .logo { max-height: 52px; width: auto; display: block;
  background: #fff; padding: 6px 10px; border-radius: 8px; }
.quote-doc__company { font-size: 20px; font-weight: 680; letter-spacing: -.02em; }
.quote-doc__sender { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .88); }
.quote-doc__mark { text-align: right; flex: 0 0 auto; }
.quote-doc__kicker { display: block; font-size: 11px; font-weight: 640;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82); }
.quote-doc__number { display: block; margin-top: 4px; font-size: 20px;
  font-weight: 680; letter-spacing: -.01em; }
.quote-doc__version { display: block; margin-top: 2px; font-size: 12px;
  color: rgba(255, 255, 255, .82); }

.quote-doc__body { padding: 28px 32px 32px; }
.quote-doc__panels {
  display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 28px;
}
.quote-doc__panel { background: var(--color-surface-2);
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.quote-doc__panel p { margin: 0 0 2px; font-size: 13.5px; }
.quote-doc__label { display: block; font-size: 10.5px; font-weight: 640;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-subtle); margin-bottom: 8px; }
.quote-doc__strong { font-weight: 640; font-size: 15px !important; }
.quote-doc__meta { display: grid; grid-template-columns: auto 1fr;
  gap: 4px 16px; margin: 0; font-size: 13.5px; }
.quote-doc__meta dt { color: var(--color-text-muted); }
.quote-doc__meta dd { margin: 0; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums; }

.quote-doc h3 { font-size: 12px; font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-subtle);
  margin: 28px 0 10px; }
.quote-doc__table { border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; }
.quote-doc__table td, .quote-doc__table th { font-size: 13.5px; }
/* Numbers and their units are one thing: `175,25 m²` breaking across two lines
   reads as two values, and `€ 7.908,16` breaking after the sign reads as a
   stray symbol. */
.quote-doc__table .right { font-variant-numeric: tabular-nums;
  white-space: nowrap; }
/* The description column absorbs the extra width instead. */
.quote-doc__table td:first-child, .quote-doc__table th:first-child { width: 42%; }
.quote-doc__table .src-note { display: block; margin-top: 4px; }
.quote-doc .totals { margin-left: auto; max-width: 340px;
  background: var(--color-surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; }
.quote-doc .totals .grand { border-top: 1px solid var(--line);
  margin-top: 8px; padding-top: 10px; font-size: 16px; font-weight: 680; }

@media (max-width: 720px) {
  .quote-doc { border-radius: 0; border-left: 0; border-right: 0; }
  .quote-doc__masthead { flex-direction: column; padding: 22px 18px; }
  .quote-doc__mark { text-align: left; }
  .quote-doc__body { padding: 20px 18px 28px; }
  .quote-doc__panels { grid-template-columns: minmax(0, 1fr); }
  .quote-doc .totals { max-width: none; }
}

/* Settings tabs. Underline rather than a row of pill buttons. */
.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--line);
  overflow-x: auto; }
.tabs .tab { padding: 10px 2px; font-size: 14.5px; font-weight: 540;
  color: var(--color-text-muted); border-bottom: 2px solid transparent;
  white-space: nowrap; text-decoration: none; }
.tabs .tab:hover { color: var(--color-text); }
.tabs .tab.active { color: var(--color-brand-hover);
  border-bottom-color: var(--color-brand); }
.tabs .tab:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

.grid-2-1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
@media (min-width: 1000px) {
  .grid-2-1 { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.right { text-align: right; }

/* Line editor collapses to stacked rows on small screens rather than
   forcing a horizontal scroll through a wide price table. */
@media (max-width: 700px) {
  .line-editor thead { display: none; }
  .line-editor tr { display: grid; grid-template-columns: 1fr auto;
    gap: 2px 12px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .line-editor td { border: none; padding: 2px 0; }
  .line-editor td.right { text-align: right; }
  .line-editor tr.section-title { display: block; }
}

/* Demo banner. Deliberately not dismissible and deliberately at the very top of
   both shells: in mock mode the address and pand id are real while the measured
   values are not, and that difference has to be visible on every screen. */
.demo-banner {
  background: linear-gradient(90deg, #7C2D12 0%, #9A3412 100%);
  color: #FFF7ED;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  position: sticky; top: 0; z-index: 200;
}
.demo-banner-inner {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: 9px 0; flex-wrap: wrap;
}
.demo-tag {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px;
  font-weight: 700; background: rgba(255, 255, 255, .16);
  padding: 3px 9px; border-radius: 4px; white-space: nowrap;
}
.demo-text { color: #FFE8D5; }
@media (max-width: 700px) { .demo-text { font-size: 12.5px; } }

/* ==========================================================================
   North Sea 2.0: component layer
   Tokens stay as defined in :root. This layer adds the component vocabulary
   the product was missing: modal, drawer, tabs, inspector, viewer chrome,
   segmented controls, data tables and page headers.
   ========================================================================== */

:root {
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16,37,63,.06);
  --shadow-md: 0 6px 20px rgba(16,37,63,.10), 0 1px 3px rgba(16,37,63,.06);
  --shadow-lg: 0 24px 60px rgba(16,37,63,.20);
  --focus: 0 0 0 3px rgba(37,99,235,.28);
  /* Roof-line palette. Distinguished by width and dash as well as hue, so the
     viewer stays readable without relying on colour alone. */
  --line-ridge: #10253F;
  --line-hip: #2563EB;
  --line-valley: #0E7490;
  --line-exposed: #64748B;
  --line-unknown: #A9BACE;
}

/* ---------------------------------------------------------------- focus */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm);
}

/* ------------------------------------------------------- page furniture */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line); margin-bottom: var(--s5);
}
.page-header h1 { font-size: 26px; letter-spacing: -.015em; line-height: 1.15; }
.page-header .sub { color: var(--color-text-muted); font-size: 14px; margin-top: 4px; }
.crumbs { display: flex; gap: 6px; align-items: center; font-size: 12.5px;
  color: var(--color-text-subtle); margin-bottom: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-brand); }
.crumbs span.sep { opacity: .5; }

/* ------------------------------------------------------------ segmented */
.segmented {
  display: inline-flex; background: var(--color-surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 3px;
  gap: 2px;
}
.segmented a, .segmented button {
  padding: 6px 13px; font-size: 13.5px; font-weight: 560; border: none;
  background: transparent; color: var(--color-text-muted); cursor: pointer;
  border-radius: 6px; text-decoration: none; white-space: nowrap;
}
.segmented a.active, .segmented button.active {
  background: var(--color-surface); color: var(--color-text-strong);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------- workspace grid */
.workspace { display: grid; gap: var(--s4); grid-template-columns: minmax(0,1fr); }
@media (min-width: 1100px) {
  .workspace { grid-template-columns: minmax(0,1fr) 360px; align-items: start; }
}

/* ------------------------------------------------------------- inspector */
.inspector {
  background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 76px;
}
.inspector-head {
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
  background: var(--color-surface-3);
}
.inspector-head h3 { font-size: 16px; letter-spacing: -.01em; }
.inspector-head .kicker {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-brand-hover); font-weight: 640;
}
.inspector-body { padding: var(--s4) var(--s5); }
.inspector-row {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 8px 0; border-bottom: 1px solid var(--color-surface-2);
  font-size: 14px;
}
.inspector-row:last-child { border-bottom: none; }
.inspector-row .k { color: var(--color-text-muted); }
.inspector-row .v {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--color-text-strong); text-align: right;
}
.inspector-row .v.na { color: var(--color-text-subtle); font-weight: 500; }
.inspector-actions { display: flex; gap: var(--s2); flex-wrap: wrap;
  padding-top: var(--s4); }

details.advanced { margin-top: var(--s4); border-top: 1px solid var(--line);
  padding-top: var(--s3); }
details.advanced summary {
  cursor: pointer; font-size: 13px; color: var(--color-text-muted);
  font-weight: 560; list-style: none;
}
details.advanced summary::-webkit-details-marker { display: none; }
details.advanced summary::before { content: "▸ "; }
details.advanced[open] summary::before { content: "▾ "; }
details.advanced dl { margin-top: var(--s3); font-size: 12.5px; }
details.advanced dt { color: var(--color-text-subtle); }
details.advanced dd { margin: 0 0 8px; font-family: var(--mono); font-size: 11.5px;
  color: var(--color-text-muted); word-break: break-all; }

/* ---------------------------------------------------------- roof viewer */
.viewer-shell {
  background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.viewer-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.viewer-canvas {
  /* A faint technical grid, like a drawing sheet. */
  background:
    linear-gradient(var(--color-surface-2) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--color-surface-2) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--color-surface);
  padding: var(--s4);
}
.viewer-canvas svg { width: 100%; height: auto; display: block; }
.face { cursor: pointer; transition: fill-opacity .12s ease; }
.face:hover { fill-opacity: .82; }
.face.selected { fill-opacity: .9; stroke: var(--color-text-strong); stroke-width: 2.2; }
.edge { cursor: pointer; fill: none; stroke-linecap: round; }
.edge-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
.edge.ridge   { stroke: var(--line-ridge);   stroke-width: 3.4; }
.edge.hip     { stroke: var(--line-hip);     stroke-width: 3.0; }
.edge.valley  { stroke: var(--line-valley);  stroke-width: 3.0; stroke-dasharray: 9 4; }
.edge.exposed { stroke: var(--line-exposed); stroke-width: 1.8; }
.edge.unknown { stroke: var(--line-unknown); stroke-width: 1.8; stroke-dasharray: 3 4; }
.edge.selected { stroke: var(--color-warm); stroke-width: 4.6; }
.edge-group:hover .edge { stroke: var(--color-warm); stroke-width: 4.2; }

.viewer-legend {
  display: flex; gap: var(--s4); flex-wrap: wrap; padding: 10px var(--s4);
  border-top: 1px solid var(--line); font-size: 12.5px;
  color: var(--color-text-muted); background: var(--color-surface-2);
}
.viewer-legend span { display: inline-flex; align-items: center; gap: 6px; }
.viewer-legend i { width: 20px; height: 0; display: inline-block;
  border-top-width: 3px; border-top-style: solid; }
.lg-ridge  { border-color: var(--line-ridge); }
.lg-hip    { border-color: var(--line-hip); }
.lg-valley { border-color: var(--line-valley); border-top-style: dashed; }
.lg-exposed{ border-color: var(--line-exposed); border-top-width: 2px; }
.lg-unknown{ border-color: var(--line-unknown); border-top-style: dashed;
  border-top-width: 2px; }

/* --------------------------------------------------------------- modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,26,46,.5);
  display: grid; place-items: center; z-index: 400; padding: var(--s4);
  animation: fade .14s ease;
}
.modal {
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: min(520px, 100%);
  max-height: 88vh; overflow: auto; animation: rise .16s ease;
}
.modal-head { padding: var(--s5) var(--s5) var(--s3);
  border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 19px; letter-spacing: -.01em; }
.modal-head .sub { color: var(--color-text-muted); font-size: 13.5px; margin-top: 4px; }
.modal-body { padding: var(--s5); }
.modal-foot {
  padding: var(--s4) var(--s5); border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: var(--s2);
  background: var(--color-surface-2);
}
.compare {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3);
  align-items: center; background: var(--color-surface-3);
  border-radius: var(--radius-md); padding: var(--s4); margin-bottom: var(--s4);
}
.compare .lab { font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-text-muted); }
.compare .val { font-size: 19px; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
.compare .arrow { color: var(--color-text-subtle); font-size: 18px; }

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal { animation: none; }
  .face, .edge { transition: none; }
}

/* -------------------------------------------------------- status badges */
.pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  font-weight: 580; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.pill-auto    { background: var(--color-success-soft); color: #166534;
  border-color: #BBF7D0; }
.pill-review  { background: var(--color-warning-soft); color: #92400E;
  border-color: #FDE68A; }
.pill-manual  { background: var(--color-brand-soft); color: var(--color-brand-hover);
  border-color: #BFDBFE; }
.pill-na      { background: var(--color-surface-2); color: var(--color-text-subtle);
  border-color: var(--line); }

/* --------------------------------------------------------- public hero */
.hero-product {
  background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  overflow: hidden;
}
.hero-product .bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s4); border-bottom: 1px solid var(--line);
  background: var(--color-surface-2); font-size: 12.5px;
  color: var(--color-text-muted);
}
.hero-product .bar .addr {
  background: var(--color-surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px;
  color: var(--color-text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-split { display: grid; gap: 0; grid-template-columns: minmax(0,1fr); }
@media (min-width: 860px) { .hero-split { grid-template-columns: 1.35fr 1fr; } }
.hero-split > .pane + .pane { border-top: 1px solid var(--line); }
@media (min-width: 860px) {
  .hero-split > .pane + .pane { border-top: none; border-left: 1px solid var(--line); }
}
.hero-split .pane { padding: var(--s4); min-width: 0; }

.stat-strip {
  display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat-strip .item { border-left: 2px solid var(--color-accent); padding-left: var(--s3); }
.stat-strip .item .k { font-size: 12.5px; color: var(--color-text-muted); }
.stat-strip .item .v { font-size: 20px; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--color-text-strong); }

.steps-flow { display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.steps-flow > .step { display: block; position: relative; padding-top: var(--s4);
  padding-bottom: 0; border-top: 2px solid var(--color-border); border-bottom: none;
  grid-template-columns: none; }
.steps-flow > .step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 12px; color: var(--color-brand);
  font-weight: 700; display: block; margin-bottom: 6px;
}
.steps-flow > .step h3 { font-size: 15.5px; margin-bottom: 4px; }
.steps-flow > .step p { font-size: 13.5px; color: var(--color-text-muted); }

/* ==========================================================================
   App shell: M5.0W2 rebuild
   Grouped sidebar, collapsible on desktop, drawer on mobile, context top bar.
   ========================================================================== */

.app { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }

.app-side {
  display: flex; flex-direction: column; background: var(--color-surface);
  border-right: 1px solid var(--line); position: sticky; top: 0;
  height: 100vh; overflow: hidden auto;
}
.side-brand {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); padding: var(--s4) var(--s3) var(--s4) var(--s4);
  border-bottom: 1px solid var(--line); min-height: 60px;
}
.icon-btn {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid transparent; background: transparent; border-radius: 6px;
  color: var(--color-text-muted); cursor: pointer;
}
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); }

.app-nav { padding: var(--s4) var(--s3); flex: 1; }
.side-group + .side-group { margin-top: var(--s4); }
.side-group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--color-text-subtle); font-weight: 680; padding: 0 10px 6px;
}
.side-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  border-radius: var(--radius-sm); color: var(--color-text-muted);
  font-size: 14px; font-weight: 540; text-decoration: none; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
}
.side-item:hover { background: var(--color-surface-2); color: var(--color-text); }
.side-item.active {
  background: var(--color-brand-soft); color: var(--color-brand-hover);
  font-weight: 620; box-shadow: inset 2px 0 0 var(--color-brand);
}
.side-ic { display: grid; place-items: center; width: 20px; flex: 0 0 20px; }

.side-foot { padding: var(--s3); border-top: 1px solid var(--line); }
.side-company {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  font-size: 12.5px; color: var(--color-text-subtle); font-weight: 560;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-top {
  display: flex; align-items: center; gap: var(--s4);
  padding: 10px var(--s5); background: var(--color-surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60;
  min-height: 60px;
}
.top-context { min-width: 0; flex: 1; }
.top-title { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.top-title h2 {
  font-size: 15.5px; font-weight: 620; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-actions { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.avatar {
  width: 32px; height: 32px; border-radius: 999px; flex: 0 0 32px;
  background: var(--color-brand-soft); color: var(--color-brand-hover);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 660;
}
.app-body { padding: var(--s5); flex: 1; background: var(--color-bg); }
.drawer-btn { display: none; }
.scrim { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-side {
    position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 300;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: var(--shadow-lg);
  }
  .app.drawer-open .app-side { transform: none; }
  .drawer-btn { display: grid; }
  [data-toggle-sidebar] { display: none; }
  .scrim {
    display: block; position: fixed; inset: 0; background: rgba(10,26,46,.45);
    z-index: 290;
  }
  .scrim[hidden] { display: none; }
  .app-body { padding: var(--s4); }
  .app-top { padding: 10px var(--s4); }
}
@media (prefers-reduced-motion: reduce) { .app-side { transition: none; } }

/* --------------------------------------------------------- public pages */
.page-hero { padding: var(--s7) 0 var(--s6);
  background: linear-gradient(180deg, var(--color-brand-soft) 0%, var(--color-surface) 84%);
  border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(30px, 3.8vw, 44px); letter-spacing: -.022em;
  line-height: 1.1; margin-top: var(--s3); }
.page-hero .lede { max-width: 62ch; margin-top: var(--s4); }
.section-cta { background: var(--color-surface-3); border-top: 1px solid var(--line); }

.split-story { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .split-story { grid-template-columns: 1fr 1fr; } }
.story-step { display: flex; gap: var(--s4); align-items: flex-start;
  padding-top: var(--s4); border-top: 2px solid var(--color-border); }
.story-n { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--color-brand); flex: 0 0 auto; padding-top: 2px; }
.story-step h3 { font-size: 15.5px; margin-bottom: 4px; }

.feature-grid { display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.feature { border-top: 2px solid var(--color-border); padding-top: var(--s4); }
.feature-ic { display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius-md); background: var(--color-brand-soft);
  color: var(--color-brand); margin-bottom: var(--s3); }
.feature h3 { font-size: 15.5px; margin-bottom: 4px; }

.jobs { display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.job { background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--s4) var(--s5); }
.job h3 { font-size: 15px; margin-bottom: 6px; }

.timeline { list-style: none; margin: var(--s5) 0 0; padding: 0 0 0 var(--s5);
  border-left: 2px solid var(--color-border); }
.timeline li { display: block; position: relative; padding-bottom: var(--s5);
  grid-template-columns: none; }
.timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--s5) - 6px);
  top: 6px; width: 10px; height: 10px; border-radius: 999px;
  background: var(--color-brand); box-shadow: 0 0 0 4px var(--color-bg); }
.timeline h3 { font-size: 16px; margin-bottom: 4px; }

.spec { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--s4); }
.spec dt { font-weight: 620; color: var(--color-text-strong); }
.spec dd { margin: 0; color: var(--color-text-muted); }

ul.tick { list-style: none; padding: 0; margin: 0; }
ul.tick li { position: relative; padding-left: 26px; margin-bottom: 9px;
  color: var(--color-text-muted); font-size: 14.5px; }
ul.tick li::before { content: ""; position: absolute; left: 4px; top: 7px;
  width: 6px; height: 10px; border: solid var(--color-success);
  border-width: 0 2px 2px 0; transform: rotate(45deg); }

.status-list > div { padding-bottom: var(--s4); }
.status-list p { margin-top: 6px; font-size: 14px; }

.chain { display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.chain-step { background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--s4); border-top: 3px solid var(--color-accent); }
.chain-step .k { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); }
.chain-step .v { font-size: 19px; font-weight: 650; margin-top: 4px;
  font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
.chain-step .s { font-size: 12.5px; color: var(--color-text-subtle); margin-top: 4px; }

.source-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }

.faq-item { border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--color-surface); margin-bottom: var(--s2); }
.faq-item summary { cursor: pointer; padding: var(--s4) var(--s5);
  font-weight: 580; font-size: 15px; list-style: none; position: relative;
  padding-right: var(--s7); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: var(--s5);
  color: var(--color-brand); font-size: 19px; line-height: 1; }
.faq-item[open] summary::after { content: "-"; }
.faq-item p { padding: 0 var(--s5) var(--s4); font-size: 14.5px; }

/* Responsive column utilities.
   These replace inline `grid-template-columns`, which beat the media query and
   was the cause of 89 px of horizontal overflow on every mobile page. */
.split-wide { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .split-wide { grid-template-columns: 1.05fr 1fr; } }
.cols-2, .cols-3, .cols-4 { min-width: 0; }
.cols-2 > *, .cols-3 > *, .cols-4 > *, .split-wide > * { min-width: 0; }

/* The public header CTA is the second overflow cause: at 375 px the nav is a
   drawer but the actions row still held a full-width button. */
@media (max-width: 700px) {
  /* The header row is logo + toggle + actions. On a 375 px screen "Account
     aanmaken" alone is wider than the space left, so the secondary link drops
     into the drawer and the primary shortens. */
  .header-actions .btn-ghost { display: none; }
  .header-actions .btn { font-size: 13px; padding: 0 11px; white-space: nowrap; }
  .site-header .inner { gap: var(--s2); flex-wrap: nowrap; }
  .site-header .inner > a:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .header-actions { flex: 0 0 auto; }
  .hero-product .bar { flex-wrap: wrap; }
  .hero-product .bar .addr { flex: 1 1 100%; order: 2; }
}
/* Nothing may exceed the viewport. A long address or pand id truncates rather
   than pushing the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }
.container { max-width: min(var(--container), 100%); }
.hero-product, .viewer-shell, .panel, .card, .inspector { max-width: 100%; }
.addr, .top-title h2, .side-company { min-width: 0; }
.nav-login { display: none; }
@media (max-width: 960px) { .nav-login { display: block; } }

/* Mobile inspector as a bottom sheet.
   §40: stacking the desktop inspector under the viewer produces a poor
   workflow: you tap a line, then have to scroll to find out what you tapped.
   Below 900 px the inspector becomes a sheet anchored to the bottom of the
   screen, so the selection and its detail are visible together. */
@media (max-width: 900px) {
  .workspace > aside .inspector {
    position: fixed; inset: auto 0 0 0; z-index: 250;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid var(--line); border-bottom: none;
    box-shadow: var(--shadow-lg); max-height: 62vh; overflow: auto;
    animation: sheet-up .18s ease;
  }
  .workspace > aside .inspector::before {
    content: ""; display: block; width: 38px; height: 4px; border-radius: 999px;
    background: var(--color-border-strong); margin: 8px auto 0;
  }
  .workspace > aside .inspector .inspector-head { background: var(--color-surface); }
  /* Room so the sheet never hides the last row of the page. */
  .app-body:has(.workspace) { padding-bottom: 45vh; }
}
@keyframes sheet-up { from { transform: translateY(100%) } to { transform: none } }
@media (prefers-reduced-motion: reduce) {
  .workspace > aside .inspector { animation: none; }
}

/* Dashboard */
.kpi-row { display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi {
  display: grid; gap: 2px; background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--s4); text-decoration: none; min-width: 0;
  border-top: 3px solid var(--color-border);
}
.kpi:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.kpi-ic { color: var(--color-text-subtle); }
.kpi-v { font-size: 26px; font-weight: 660; font-variant-numeric: tabular-nums;
  color: var(--color-text-strong); line-height: 1.1; }
.kpi-k { font-size: 12.5px; color: var(--color-text-muted); }
.kpi-warn { border-top-color: var(--color-warning); }
.kpi-warn .kpi-ic { color: var(--color-warning); }
.kpi-ok { border-top-color: var(--color-success); }
.kpi-ok .kpi-ic { color: var(--color-success); }

.timeline-compact { list-style: none; margin: 0; padding: 0; }
.timeline-compact li { display: flex; gap: var(--s3); padding: 9px 0;
  font-size: 14px; align-items: flex-start; }
.timeline-compact .dot { width: 7px; height: 7px; border-radius: 999px;
  background: var(--color-brand); flex: 0 0 7px; margin-top: 7px; }

@media (max-width: 700px) { .hide-sm { display: none; } }

/* Quote builder workspace: editor left, sticky summary right.
   On mobile the summary becomes a bottom bar, because totals a roofer cannot
   see while editing lines are totals they will get wrong. */
.quote-workspace { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1080px) {
  .quote-workspace { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .quote-workspace > aside { position: sticky; top: 76px; }
}
@media (max-width: 1079px) {
  .quote-workspace > aside .panel:first-child {
    position: sticky; bottom: 0; z-index: 80; box-shadow: 0 -6px 20px rgba(16,37,63,.10);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .quote-workspace > aside .totals .row:not(.grand) { display: none; }
  .quote-workspace > aside .totals .row.grand { padding: 12px var(--s5); }
  .quote-workspace > aside .panel:first-child .panel-head { display: none; }
}

/* Project workspace tabs.
   Horizontal scroll on mobile rather than a menu: a roofer moving between
   Dakvlakken and Daklijnen does it constantly, and burying that in a dropdown
   would cost a tap every time. */
.tabbar {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s5);
  -webkit-overflow-scrolling: touch;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar a {
  padding: 10px 14px; font-size: 14px; font-weight: 560; white-space: nowrap;
  color: var(--color-text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; flex: 0 0 auto;
}
.tabbar a:hover { color: var(--color-text); }
.tabbar a[aria-current="page"] {
  color: var(--color-brand-hover); border-bottom-color: var(--color-brand);
  font-weight: 640;
}
.tabbar .count {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 680;
  background: var(--color-warning-soft); color: #92400E;
  padding: 1px 6px; border-radius: 999px;
}

/* Review checklist */
.checklist { display: grid; }
.check-item {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: 12px var(--s5); border-bottom: 1px solid var(--line);
}
.check-item:last-child { border-bottom: none; }
.check-item input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px;
  flex: 0 0 17px; accent-color: var(--color-brand); cursor: pointer; }
.check-item .body { min-width: 0; }
.check-item .name { font-size: 14.5px; font-weight: 560; }
.check-item.done .name { color: var(--color-text-muted); }
.check-item .meta { font-size: 12.5px; color: var(--color-text-subtle); margin-top: 2px; }
.check-item.optional { background: var(--color-surface-2); }

/* Pricing */
.plan-grid { display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.plan { background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s5); position: relative; }
.plan-featured { border-color: var(--color-brand); box-shadow: var(--shadow-md); }
.plan-flag { position: absolute; top: -11px; left: var(--s5);
  background: var(--color-brand); color: #fff; font-size: 11.5px; font-weight: 640;
  padding: 3px 10px; border-radius: 999px; }
.plan h2 { font-size: 20px; letter-spacing: -.01em; }
.plan-aud { font-size: 13.5px; color: var(--color-text-muted); margin-top: 2px;
  min-height: 2.6em; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin-top: var(--s4); }
.plan-price .amount { font-size: 38px; font-weight: 680; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
.plan-price .per { font-size: 14px; color: var(--color-text-muted); }
.plan-vat { font-size: 12.5px; color: var(--color-text-subtle); }
.plan-volume { margin: var(--s4) 0; padding: 10px var(--s3);
  background: var(--color-surface-3); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--color-text); }
.plan-volume strong { font-size: 17px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { ul.tick[style*="columns"] { columns: 1 !important; } }

/* Trial banner */
.trial-banner { background: var(--color-brand-soft);
  border-bottom: 1px solid #BFDBFE; font-size: 13.5px; }
.trial-banner.urgent { background: var(--color-warning-soft); border-bottom-color: #FDE68A; }
.trial-inner { display: flex; align-items: center; gap: var(--s3);
  padding: 8px 0; flex-wrap: wrap; }
.trial-text { color: var(--color-text); flex: 1; min-width: 0; }
.trial-banner .btn { flex: 0 0 auto; }

/* Billing / lock page */
.lock-shell { min-height: 100vh; display: grid; place-items: center;
  padding: var(--s5); background: var(--color-bg); }
.lock-card { max-width: 720px; width: 100%; background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden; }
.lock-head { padding: var(--s6) var(--s6) var(--s4);
  border-bottom: 1px solid var(--line); }
.lock-head h1 { font-size: 26px; letter-spacing: -.02em; }
.lock-head p { color: var(--color-text-muted); margin-top: var(--s3); }
.mock-notice { background: var(--color-warning-soft); border: 1px solid #FDE68A;
  border-radius: var(--radius-sm); padding: 9px var(--s4); font-size: 13px;
  color: #92400E; margin-bottom: var(--s4); }
.usage-bar { height: 7px; background: var(--color-surface-2);
  border-radius: 999px; overflow: hidden; margin-top: 8px; }
.usage-bar i { display: block; height: 100%; background: var(--color-brand); }
.usage-bar.high i { background: var(--color-warning); }
.usage-bar.full i { background: var(--color-danger); }

/* Customer quote document.
   The share page is the roofer's document, so it carries no site navigation and
   no Dakscope billing chrome. */
.quote-doc .src-note {
  display: inline-block; margin-top: 3px; font-size: 12px;
  color: var(--color-brand-hover); background: var(--color-brand-soft);
  padding: 1px 7px; border-radius: 999px;
}
.measure-summary {
  margin-top: var(--s5); padding: var(--s4) var(--s5);
  background: var(--color-surface-3); border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
}
.measure-summary h3 { font-size: 14px; margin: 0 0 var(--s3); }
.measure-summary dl {
  display: grid; grid-template-columns: auto auto; gap: 5px var(--s5);
  justify-content: start; margin: 0; font-size: 13.5px;
}
.measure-summary dt { color: var(--color-text-muted); }
.measure-summary dd {
  margin: 0; font-weight: 620; font-variant-numeric: tabular-nums;
  color: var(--color-text-strong);
}

/* The share page needs its own footer, since it has no site chrome. */
.quote-foot {
  max-width: 820px; margin: var(--s5) auto 0; text-align: center;
  font-size: 12.5px; color: var(--color-text-subtle);
}

/* Mobile: a four-column financial table at 390 px would be unreadable, so each
   line becomes a card with its values labelled. */
@media (max-width: 640px) {
  .quote-doc { border-radius: 0; }
  .quote-doc > div { padding-left: var(--s4) !important; padding-right: var(--s4) !important; }
  .quote-doc table.table thead { display: none; }
  .quote-doc table.table, .quote-doc table.table tbody,
  .quote-doc table.table tr, .quote-doc table.table td { display: block; width: 100%; }
  .quote-doc table.table tr {
    border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: var(--s3); margin-bottom: var(--s3);
  }
  .quote-doc table.table td {
    border: none; padding: 3px 0; display: flex; justify-content: space-between;
    gap: var(--s4); text-align: left !important;
  }
  .quote-doc table.table td[data-label="Omschrijving"] {
    display: block; font-weight: 600; padding-bottom: var(--s2);
    border-bottom: 1px solid var(--color-surface-2); margin-bottom: var(--s2);
  }
  .quote-doc table.table td:not([data-label="Omschrijving"])::before {
    content: attr(data-label); color: var(--color-text-muted);
    font-weight: 500; font-size: 13px;
  }
  .measure-summary dl { grid-template-columns: 1fr auto; }
  .quote-doc .logo { max-height: 48px; }
}

/* Settings: a left rail on desktop, a scrolling row on mobile. Eight sections
   in one wrapped tab bar would read as a wall of links. */
.settings-shell { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .settings-shell { grid-template-columns: 210px minmax(0, 1fr); } }
.settings-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.settings-nav::-webkit-scrollbar { display: none; }
.settings-nav-item {
  padding: 9px 13px; font-size: 14px; font-weight: 550; white-space: nowrap;
  color: var(--color-text-muted); text-decoration: none; border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.settings-nav-item:hover { background: var(--color-surface-2); color: var(--color-text); }
.settings-nav-item.active {
  background: var(--color-brand-soft); color: var(--color-brand-hover); font-weight: 640;
}
@media (min-width: 900px) {
  .settings-nav { flex-direction: column; border-bottom: none; overflow: visible;
    position: sticky; top: 76px; align-self: start; }
  .settings-nav-item.active { box-shadow: inset 2px 0 0 var(--color-brand); }
}
.settings-body { min-width: 0; }
tr.archived { opacity: .58; }

/* Search bar shared by customers and the article library. */
.searchbar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.searchbar .input { flex: 1 1 240px; min-width: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Customers: a real table on desktop, deliberate cards on mobile. Seven columns
   at 390 px would be unreadable whatever the font size. */
.cust-cards { display: none; }
@media (max-width: 760px) {
  .hide-mobile { display: none; }
  .cust-cards { display: grid; gap: var(--s3); padding: var(--s4); }
  .cust-card {
    border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: var(--s4); background: var(--color-surface); cursor: pointer;
  }
  .cust-card:hover { border-color: var(--color-border-strong); }
  .cust-head { display: flex; justify-content: space-between; gap: var(--s3);
    align-items: baseline; }
  .cust-meta { display: flex; justify-content: space-between; gap: var(--s3);
    margin-top: var(--s3); padding-top: var(--s3);
    border-top: 1px solid var(--color-surface-2);
    font-size: 12.5px; color: var(--color-text-subtle); }
}
@media (max-width: 980px) { .hide-md { display: none; } }

/* The commercial derivation on a quote line. Three rows, because measurement,
   factor and quote quantity are three different facts. */
.derivation {
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  background: var(--color-surface-3); border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-accent); font-size: 13px;
}
.deriv-row {
  display: flex; align-items: center; gap: var(--s3);
  justify-content: space-between; padding: 2px 0;
  color: var(--color-text-muted);
}
.deriv-row .v { font-variant-numeric: tabular-nums; color: var(--color-text); }
.deriv-row.total {
  border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 5px;
  font-weight: 620; color: var(--color-text-strong);
}
.deriv-row.total .v { font-weight: 680; color: var(--color-text-strong); }
.btn-link {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-brand); text-decoration: underline;
}

/* Cancellation sits below the plan controls as a quiet note, not a red button
   competing with upgrade and payment. Findable without being loud. */
.cancel-note { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.cancel-note p { margin: 0; }
.cancel-note .btn-link { color: var(--color-text-muted); }
.cancel-note .btn-link:hover { color: var(--stop); }

/* ==========================================================================
   M5.4: project roof map and measurement summary
   ========================================================================== */

/* A fixed aspect on desktop and a workable height on a phone. Leaflet needs a
   sized container at init or it renders 0x0, so the height is never `auto`. */
.roof-map {
  height: 420px; width: 100%; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--surface-2); overflow: hidden;
  z-index: 0; /* keeps tiles under the app's own overlays and modals */
}
.roof-map:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.face-legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.face-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 13px; cursor: pointer;
}
.face-chip:hover { border-color: var(--line-2); }
.face-chip.face-active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-wash); }

/* The swatch is a redundant cue beside the face name, never the only one:
   colour alone must not carry identity. */
.face-swatch {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  margin-right: 6px; vertical-align: baseline; border: 1px solid rgba(0, 0, 0, .18);
}
.measure[data-face-row].face-active { background: var(--brand-wash); }

.leaflet-container { font: inherit; }

@media (max-width: 900px) {
  .roof-map { height: 300px; }
  .face-legend { gap: 6px; }
}

/* M5.5: roof-line rows.
   `.measure` is `1fr auto auto`, which squeezes the label on a phone once the
   status pill is wide ("Gecorrigeerd: nog niet vastgesteld" beside "Gevelrand
   / mogelijke windveer"). Below 560px the label takes its own line and the
   value and status sit under it. Scoped to `[data-daklijn]` so the roof-face
   list, which shares the `.measure` class, is not affected. */
@media (max-width: 560px) {
  .measure[data-daklijn] {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name name" "qty status";
    row-gap: 4px;
  }
  .measure[data-daklijn] .name { grid-area: name; }
  .measure[data-daklijn] .qty { grid-area: qty; }
  .measure[data-daklijn] .src { grid-area: status; justify-self: end; }
}


/* ==========================================================================
   M5.31 public design system
   New spacing scale, new layout primitives, new product-scene surfaces. This
   replaces the M5.30 public block entirely rather than layering over it.
   ========================================================================== */

:root {
  /* One spacing scale. Every margin below is a token, never a one-off. */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px; --sp-11: 160px;
  --rail: 1180px;
  --rail-wide: 1320px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* The rail every section shares, including the header. */
.rail {
  width: 100%; max-width: var(--rail); margin: 0 auto;
  padding-left: var(--sp-6); padding-right: var(--sp-6);
}
.rail--wide { max-width: var(--rail-wide); }

.tnum { font-variant-numeric: tabular-nums; }
.r { text-align: right; }

/* ------------------------------------------------------------ navigation */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .inner {
  display: flex; align-items: center; gap: var(--sp-7);
  min-height: 68px; max-width: var(--rail); margin: 0 auto;
  padding-left: var(--sp-6); padding-right: var(--sp-6);
}
.site-nav { display: flex; align-items: center; gap: var(--sp-5); flex: 1; }
.site-nav > a, .nav-product__trigger {
  font-size: 14.5px; font-weight: 500; color: var(--color-text);
  text-decoration: none; padding: 6px 0;
}
.site-nav > a:hover, .nav-product__trigger:hover { color: var(--color-brand); }
.site-nav > a[aria-current="page"] { color: var(--color-brand); font-weight: 580; }
.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

.nav-product { position: relative; }
.nav-product__trigger {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; cursor: pointer; font-family: inherit;
}
.nav-product__trigger svg { transition: transform .16s ease; }
.nav-product__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-product__menu {
  position: absolute; top: calc(100% + 14px); left: -14px; z-index: 60;
  min-width: 268px; padding: var(--sp-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 14px;
  box-shadow: 0 20px 48px rgba(16, 37, 63, .14);
  display: flex; flex-direction: column;
}
/* The attribute must beat the layout rule, or the menu paints open. */
.nav-product__menu[hidden] { display: none; }
.nav-product__menu a {
  padding: 10px 12px; border-radius: 9px; font-size: 14.5px;
  color: var(--color-text); text-decoration: none;
}
.nav-product__menu a:hover { background: var(--color-surface-3); }
.nav-mobile-actions { display: none; }

/* ------------------------------------------------------------------ hero */

/* Asymmetric on purpose: the copy takes the smaller column so the product
   scene can be the thing you actually look at. */
.hero { padding: var(--sp-9) 0 var(--sp-11); background: var(--color-surface); }
.hero__rail {
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: var(--sp-8); align-items: center; min-height: 620px;
}
.hero__title {
  font-size: clamp(38px, 4.4vw, 58px); line-height: 1.04;
  letter-spacing: -.032em; margin: var(--sp-5) 0 0; color: var(--color-text-strong);
}
.hero__lead {
  margin: var(--sp-6) 0 0; max-width: 46ch;
  font-size: 17.5px; line-height: 1.6; color: var(--color-text-muted);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__micro { margin: var(--sp-4) 0 0; font-size: 13.5px; color: var(--color-text-subtle); }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 620;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand);
}

/* The product scene reaches past the rail, so it reads as a surface the page
   sits on rather than a picture pasted into a column. */
.hero__scene { position: relative; }
.worktop {
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 16px;
  box-shadow: 0 30px 70px rgba(16, 37, 63, .12);
  overflow: hidden;
}
.worktop__bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border); background: var(--color-surface-2);
}
.worktop__addr { font-size: 13.5px; font-weight: 560; color: var(--color-text); }
.worktop__figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-border);
}
.worktop__figures div {
  padding: var(--sp-4) var(--sp-5);
  border-right: 1px solid var(--color-border);
}
.worktop__figures div:last-child { border-right: 0; }
.worktop__figures span { display: block; font-size: 11.5px; color: var(--color-text-muted); }
.worktop__figures strong {
  display: block; margin-top: 3px; font-size: 18px; letter-spacing: -.02em;
}

/* The signals sit BELOW the worktop, offset to the right. Overlapping the
   surface looked layered but hid two of the four measurements, and a product
   scene that covers its own numbers is decoration, not proof. */
.hero__signals {
  display: flex; gap: var(--sp-3); justify-content: flex-end;
  margin-top: calc(var(--sp-4) * -1); padding-right: var(--sp-2);
  position: relative; z-index: 2;
}
.hero__signals .signal { transform: translateY(var(--sp-5)); }
.signal {
  min-width: 186px; padding: var(--sp-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; box-shadow: 0 16px 36px rgba(16, 37, 63, .13);
}
.signal--won { border-color: #BBE7C9; background: var(--color-success-soft); }
.signal__label { display: block; font-size: 11.5px; color: var(--color-text-muted); }
.signal__value {
  display: block; margin: 4px 0 var(--sp-3); font-size: 19px; letter-spacing: -.02em;
}

/* ------------------------------------------------------------------ tags */

.tag {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 580; white-space: nowrap;
}
.tag--ok { background: var(--color-success-soft); color: #12703A; }
.tag--info { background: var(--color-brand-soft); color: var(--color-brand-hover); }
.tag--warm { background: #FDECE8; color: #B4402C; }
.tag--quiet { background: var(--color-surface-3); color: var(--color-text-muted); }

/* --------------------------------------------------------------- chapters */

.chapter { padding: var(--sp-10) 0; background: var(--color-surface); }
.chapter--cloud { background: var(--color-surface-2); }
.chapter--ink { background: var(--color-text-strong); color: #DCE6F3; }
.chapter--ink .chapter__title { color: #FFFFFF; }
.chapter--ink .chapter__lead, .chapter--ink .chapter__foot { color: #A9BCD4; }
.chapter--ink .chapter__label { color: var(--color-accent); }

.chapter__label {
  display: flex; align-items: center; gap: var(--sp-3); margin: 0;
  font-size: 12px; font-weight: 620; letter-spacing: .12em;
  color: var(--color-brand);
}
.chapter__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; border-radius: 5px;
  background: var(--color-brand-soft); color: var(--color-brand);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.chapter--ink .chapter__num { background: rgba(56, 189, 248, .16); color: var(--color-accent); }
.chapter__title {
  margin: var(--sp-5) 0 0; max-width: 22ch;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.026em;
}
.chapter__lead {
  margin: var(--sp-5) 0 0; max-width: 62ch;
  font-size: 17px; line-height: 1.62; color: var(--color-text-muted);
}
.chapter__foot { margin: var(--sp-6) 0 0; max-width: 62ch; color: var(--color-text-muted); }
.chapter__cta { margin-top: var(--sp-6); }
.chapter > .rail > .split, .chapter > .rail > .ledger,
.chapter > .rail > .trace { margin-top: var(--sp-8); }

/* ------------------------------------------------------------- roof scene */

.roof { margin: 0; position: relative; color: var(--color-brand); }
.roof svg { display: block; width: 100%; height: auto; }
.roof__mesh { color: var(--color-brand); opacity: .55; }
.roof__face {
  fill: rgba(37, 99, 235, .20); stroke: none;
  animation: roofIn .5s ease both; animation-delay: var(--delay);
}
.roof__face--0 { fill: rgba(37, 99, 235, .34); }
.roof__face--1 { fill: rgba(37, 99, 235, .27); }
.roof__face--2 { fill: rgba(56, 189, 248, .30); }
.roof__face--5 { fill: rgba(56, 189, 248, .22); }
.roof__edge { fill: none; stroke: var(--color-brand); stroke-width: 2.2;
              stroke-linejoin: round; opacity: 1; }
.roof__caption {
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  font-size: 12.5px; color: var(--color-text-muted);
}
.roof svg { padding: var(--sp-4) var(--sp-5) 0; }
.roof--compact svg { max-height: 300px; }
@keyframes roofIn { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------- surfaces */

.scene {
  position: relative; background: var(--color-surface-2);
  border: 1px solid var(--color-border); border-radius: 14px;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
/* Chapter 01's roof is the section's centrepiece, so it gets real size. */
.split--measure .scene .roof svg { min-height: 420px; }
.scene__tag {
  position: absolute; right: var(--sp-4); bottom: var(--sp-3);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-subtle);
}

.split { display: grid; gap: var(--sp-8); align-items: start; }
.split--measure { grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); }
.split--follow { grid-template-columns: minmax(0, 68fr) minmax(0, 32fr); }
.split__narrow > * + * { margin-top: var(--sp-7); }
/* The progression and the read-out are two different kinds of information;
   they need a visible break, not a paragraph gap. */
.split__narrow .readout {
  padding-top: var(--sp-6); border-top: 1px solid var(--color-border);
}

.readout { margin: 0; display: grid; gap: 0; }
.readout__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-4); padding: 11px 0; border-bottom: 1px solid var(--color-border);
}
.readout__row:last-child { border-bottom: 0; }
.readout dt { font-size: 14px; color: var(--color-text-muted); }
.readout dd { margin: 0; font-size: 16px; font-weight: 580; letter-spacing: -.015em; }
.readout__note { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--color-text-subtle); }
.readout--ink .readout__row { border-color: rgba(255, 255, 255, .13); }
.readout--ink dt { color: #93A9C4; }
.readout--ink dd { color: #FFFFFF; }

.progress { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.progress li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-left: var(--sp-5); position: relative; font-size: 14px;
}
.progress li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border-strong);
}
.progress li.is-you::before { background: var(--color-brand); }
.progress li span { color: var(--color-text-muted); }
.progress li em { font-style: normal; font-weight: 560; }

/* ------------------------------------------------------------- ledger (02) */

.ledger { display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
          gap: var(--sp-7); align-items: start; }
.ledger__caption { margin: 0 0 var(--sp-4); font-size: 12px; font-weight: 620;
                   letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.ledger__table { width: 100%; border-collapse: collapse; font-size: 14.5px; color: #DCE6F3; }
.ledger__table th {
  padding: 0 0 var(--sp-3); text-align: left; font-size: 11.5px; font-weight: 620;
  letter-spacing: .06em; text-transform: uppercase; color: #8AA2BF;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.ledger__table td { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.ledger__table th + th, .ledger__table td + td { padding-left: var(--sp-5); }
.ledger__table .is-manual td { color: #A9BCD4; }
.ledger__table tfoot td {
  padding-top: var(--sp-4); font-weight: 620; color: #FFFFFF;
  border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .28);
}

/* ------------------------------------------------------- follow-up (03) */

.board { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.board th {
  padding: 0 var(--sp-4) var(--sp-3) 0; text-align: left;
  font-size: 11.5px; font-weight: 620; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.board td { padding: 16px var(--sp-4) 16px 0; border-bottom: 1px solid var(--color-border); }
.board tr.is-warm td { background: #FFF8F6; }
.board tr.is-won td { background: var(--color-success-soft); }
.board tr.is-warm td:first-child { box-shadow: inset 3px 0 0 var(--color-warm); }

.timeline__caption { margin: 0 0 var(--sp-4); font-size: 12px; font-weight: 620;
                     letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--sp-5); position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px;
  width: 1px; background: var(--color-border-strong);
}
.timeline li { position: relative; padding: 0 0 var(--sp-4); font-size: 14px; }
.timeline li::before {
  content: ""; position: absolute; left: calc(var(--sp-5) * -1 + 0px); top: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-warm);
}
.timeline li.is-sent::before { background: var(--color-border-strong); }
.timeline time { display: block; font-size: 12px; color: var(--color-text-subtle); }

/* ---------------------------------------------------------- provenance (04) */

.trace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.trace__step {
  padding: var(--sp-5) var(--sp-6); border-left: 2px solid var(--color-border);
}
.trace__step:first-child { padding-left: 0; border-left: 0; }
.trace__step--you { border-left-color: var(--color-brand); }
.trace__label { display: block; font-size: 12.5px; color: var(--color-text-muted); }
.trace__step strong { display: block; margin: var(--sp-2) 0 var(--sp-1);
                      font-size: 26px; letter-spacing: -.025em; }

/* ------------------------------------------------------------- pricing (05) */

.pricing { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
           gap: var(--sp-8); align-items: start; }
.pricing__intro .chapter__title { margin-top: var(--sp-5); }
.pricing__intro .muted { margin-top: var(--sp-5); }
.plans { display: grid; gap: var(--sp-3); }
.plan {
  display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 24fr)
                                        minmax(0, 24fr) auto;
  gap: var(--sp-5); align-items: center;
  padding: var(--sp-5) var(--sp-6);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px;
}
.plan--pick { border-color: var(--color-brand); box-shadow: 0 10px 30px rgba(37, 99, 235, .10); }
.plan__id h3 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.plan__id .tag { margin-top: var(--sp-2); }
.plan__volume strong, .plan__price strong {
  display: block; font-size: 24px; letter-spacing: -.025em;
}
.plan__volume span, .plan__price span {
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--color-text-muted);
}

/* ------------------------------------------------------------ closing CTA */

.closing { padding: var(--sp-10) 0; background: var(--color-text-strong); color: #DCE6F3; }
.closing__rail { text-align: center; }
.closing__title {
  margin: 0 auto; max-width: 20ch; color: #FFFFFF;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.026em;
}
.closing__lead { margin: var(--sp-5) auto 0; max-width: 46ch; color: #A9BCD4; font-size: 17px; }
.closing__actions {
  display: flex; justify-content: center; align-items: center;
  gap: var(--sp-5); margin-top: var(--sp-7); flex-wrap: wrap;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 560; color: var(--color-brand); text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform .15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow--light { color: var(--color-accent); }

/* -------------------------------------------------------------- page hero */

.page-hero { padding: var(--sp-9) 0 var(--sp-7); background: var(--color-surface); }
.page-hero h1 {
  margin: var(--sp-5) 0 0; max-width: 20ch;
  font-size: clamp(32px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -.03em;
}
.page-hero .lede { margin: var(--sp-6) 0 0; max-width: 58ch; font-size: 17px;
                   line-height: 1.6; color: var(--color-text-muted); }
.page-hero .actions { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .hero__rail { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); min-height: 0; }
  .hero__signals { margin-top: var(--sp-4); justify-content: flex-start; }
  .hero__signals .signal { transform: none; }
  .split--measure, .split--follow, .ledger, .pricing {
    grid-template-columns: minmax(0, 1fr);
  }
  .trace { grid-template-columns: minmax(0, 1fr); }
  .trace__step { padding-left: var(--sp-5); border-left: 2px solid var(--color-border); }
  .trace__step:first-child { padding-left: var(--sp-5); border-left: 2px solid var(--color-border); }
}

@media (max-width: 860px) {
  .plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--sp-4); }
  .plan__go { grid-column: 1 / -1; }
  .plan__go .btn { width: 100%; justify-content: center; }
}

@media (max-width: 960px) {
  /* Below this width the bar becomes a drawer. Stated here because the
     M5.31 nav rules would otherwise win on source order. */
  .site-nav { display: none; }
  .site-nav.open {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--sp-4);
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    padding: var(--sp-6) var(--sp-5) var(--sp-7);
    box-shadow: 0 24px 48px rgba(16, 37, 63, .12);
  }
  .nav-toggle { display: inline-flex; }
  .header-actions { display: none; }
}

@media (max-width: 720px) {
  :root { --sp-9: 64px; --sp-10: 72px; }
  .rail, .site-header .inner { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .hero { padding: var(--sp-8) 0 var(--sp-9); }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__signals { flex-direction: column; }
  .signal { min-width: 0; }
  .worktop__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roof svg { min-height: 260px; padding: var(--sp-3) var(--sp-3) 0; }
  .worktop__figures div:nth-child(2n) { border-right: 0; }
  .worktop__figures div:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
  .chapter__title { max-width: none; }

  /* Wide product tables scroll inside their own surface. */
  .board, .ledger__table { display: block; overflow-x: auto; white-space: nowrap; }

  .nav-mobile-actions {
    display: flex; flex-direction: column; gap: var(--sp-3);
    margin-top: var(--sp-5); padding-top: var(--sp-5);
    border-top: 1px solid var(--color-border);
  }
  .nav-mobile-actions .btn { width: 100%; justify-content: center; }
  .nav-product { width: 100%; }
  .nav-product__menu {
    position: static; min-width: 0; box-shadow: none; border: 0;
    padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
    border-left: 2px solid var(--color-border); border-radius: 0;
  }
  body.nav-locked { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .roof__face { animation: none; }
  .nav-product__trigger svg, .link-arrow::after { transition: none; }
}

/* Shared components on supporting routes, brought into the M5.31 system. */
.chapter__head { max-width: 62ch; margin-bottom: var(--sp-7); }
.chapter > .rail > * + * { margin-top: var(--sp-6); }
.chapter > .rail > .chapter__label + .chapter__title { margin-top: var(--sp-5); }
.chapter > .rail > h2:first-child { margin-top: 0; }

/* The legacy grid/card helpers still used by secondary pages now read in the
   new language: quieter borders, the shared radius, the shared spacing. */
.chapter .card, .chapter .panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: none;
}
.chapter .card-pad { padding: var(--sp-5) var(--sp-6); }
.chapter--ink .card, .chapter--ink .panel {
  background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14);
  color: #DCE6F3;
}
.chapter--ink .card h3, .chapter--ink .panel h3 { color: #FFFFFF; }
.chapter--ink .muted { color: #A9BCD4; }
.chapter .stack { display: grid; gap: var(--sp-4); }
.chapter .cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.chapter .cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.chapter h2 { font-size: clamp(26px, 2.9vw, 36px); line-height: 1.12; letter-spacing: -.024em; }
.chapter h3 { font-size: 17px; letter-spacing: -.015em; }
.chapter .lede { font-size: 17px; line-height: 1.6; color: var(--color-text-muted); }

@media (max-width: 900px) {
  .chapter .cols-2, .chapter .cols-3 { grid-template-columns: minmax(0, 1fr); }
}

/* The three follow-up signals, stated as notes rather than as feature cards. */
.signals-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7);
}
.signal-note h3 { margin: var(--sp-4) 0 var(--sp-3); font-size: 18px;
                  letter-spacing: -.015em; }
.signal-note p { margin: 0; color: var(--color-text-muted); }
@media (max-width: 900px) { .signals-grid { grid-template-columns: minmax(0, 1fr); } }

.signals-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
.signal-note h3 { margin: var(--sp-4) 0 var(--sp-3); font-size: 17px; letter-spacing: -.015em; }
.signal-note p { margin: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); max-width: 60ch; }
.plain-list li { position: relative; padding-left: var(--sp-5); color: var(--color-text-muted); }
.plain-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 10px; height: 2px; background: var(--color-border-strong);
}
@media (max-width: 900px) { .signals-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   M5.32 | pricing cards and public enrichment
   ========================================================================== */

/* Three equal columns from 1024 up. Equal-height cards with the CTA pinned to
   the same line, so the eye compares offers rather than hunting for buttons. */
.plancards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5); align-items: stretch;
}
.plancard {
  display: flex; flex-direction: column;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 16px;
}
.plancard--pick {
  border-color: var(--color-brand);
  box-shadow: 0 16px 40px rgba(37, 99, 235, .12);
}
.plancard__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.plancard__head h3 { margin: 0; font-size: 19px; letter-spacing: -.018em; }
.plancard__aud {
  flex: 1 0 100%; margin: 0; font-size: 13.5px; color: var(--color-text-muted);
}
.plancard__price { margin: var(--sp-6) 0 0; }
.plancard__price strong {
  display: block; font-size: 40px; line-height: 1.05; letter-spacing: -.03em;
}
.plancard__price span {
  display: block; margin-top: 4px; font-size: 13px; color: var(--color-text-muted);
}
.plancard__volume {
  margin: var(--sp-5) 0 0; padding: var(--sp-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: 14.5px; color: var(--color-text-muted);
}
.plancard__volume strong { font-size: 18px; color: var(--color-text-strong); }
.plancard__points {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-3);
}
.plancard__points li {
  position: relative; padding-left: 24px;
  font-size: 14px; color: var(--color-text-muted);
}
.plancard__points li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--color-brand); border-bottom: 2px solid var(--color-brand);
  transform: rotate(-45deg);
}
/* margin-top:auto pins every CTA to the same baseline regardless of how many
   points a plan lists. */
.plancard__go { margin-top: auto; padding-top: var(--sp-6); }
.plancard__micro {
  margin: var(--sp-3) 0 0; text-align: center;
  font-size: 12.5px; color: var(--color-text-subtle);
}

@media (max-width: 1023px) {
  /* Below the desktop breakpoint the three columns stop being legible, so
     they stack. Order stays START, PRO, TEAM. */
  .plancards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .plancard { padding: 28px; }
  .plancard__price strong { font-size: 34px; }
}

/* Illustrative context outline and dimension lines. The dimension lines carry
   measured values; the outline is composition only and makes no claim about
   parcel boundaries. */
.roof__context path {
  fill: none; stroke: var(--color-text-subtle);
  stroke-width: 1; stroke-dasharray: 6 5; opacity: .45;
}
.roof__dims line { stroke: var(--color-text-muted); stroke-width: 1; opacity: .6; }
.roof__callout {
  position: absolute; padding: 3px 9px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--color-text); box-shadow: 0 4px 12px rgba(16, 37, 63, .07);
}
/* Callouts sit clear of the caption strip at the bottom of the figure; the
   eave label previously landed on top of it. */
.roof__callout--total { top: 5%; right: 4%; }
.roof__callout--eave { bottom: 16%; left: 4%; }
.roof__callout--valley { top: 44%; right: 5%; }
@media (max-width: 720px) {
  /* Two callouts stay legible on a phone; three crowd the plan. */
  .roof__callout--valley { display: none; }
  .roof__callout { font-size: 11px; padding: 2px 7px; }
}

/* Explanatory paragraphs stay inside a comfortable reading measure. */
.note {
  margin: var(--sp-5) 0 0; max-width: 62ch;
  font-size: 14.5px; line-height: 1.62; color: var(--color-text-muted);
}
.chapter__foot + .chapter__foot { margin-top: var(--sp-4); }

/* ========================================================================== 
   M5.37 — public workflow website
   Public-only visual layer. It borrows the authenticated workspace's navy,
   cobalt, soft surfaces, restrained borders and action-stage colour system.
   No selectors below target the React member application.
   ========================================================================== */

.public-workflow {
  --mw-ink: #13233a;
  --mw-ink-2: #34465e;
  --mw-muted: #6e7d90;
  --mw-subtle: #8d99a8;
  --mw-blue: #2f6fed;
  --mw-blue-dark: #2458c8;
  --mw-blue-soft: #eaf2ff;
  --mw-line: #e2e8f0;
  --mw-line-2: #edf1f5;
  --mw-cloud: #f8fafc;
  --mw-cloud-2: #f3f7fb;
  --mw-white: #ffffff;
  --mw-shadow: 0 20px 60px rgba(23, 43, 72, .09);
  --mw-radius: 18px;
  color: var(--mw-ink);
  background: var(--mw-white);
}
.public-workflow h1,
.public-workflow h2,
.public-workflow h3,
.public-workflow p { margin-top: 0; }
.public-workflow h1,
.public-workflow h2,
.public-workflow h3 { color: var(--mw-ink); }

.site-header--workflow {
  border-bottom-color: #e5eaf1;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px) saturate(135%);
}
.site-header--workflow .inner { min-height: 72px; gap: 46px; }
.site-header--workflow .site-nav { gap: 30px; }
.site-header--workflow .site-nav > a { color: #45566d; font-weight: 570; }
.site-header--workflow .site-nav > a:hover,
.site-header--workflow .site-nav > a[aria-current="page"] { color: var(--mw-blue); }
.site-header--workflow .header-actions { margin-left: auto; }
.site-footer--workflow { background: #0f2036; color: #d9e3ee; border-top: 0; }
.site-footer--workflow h4 { color: #fff; }
.site-footer--workflow a { color: #afbed0; }
.site-footer--workflow a:hover { color: #fff; }
.site-footer--workflow .muted,
.site-footer--workflow .small,
.site-footer--workflow .footer-base { color: #8ea2b9; }
.site-footer--workflow .footer-base { border-top-color: rgba(255,255,255,.1); }

.mw-kicker {
  margin: 0 0 14px;
  color: var(--mw-blue);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .105em;
  text-transform: uppercase;
}
.mw-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mw-blue);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}
.mw-textlink:hover { color: var(--mw-blue-dark); }
.mw-icon { width: 20px; height: 20px; display: block; }

/* hero */
.mw-hero {
  position: relative;
  overflow: hidden;
  padding: 94px 0 104px;
  background:
    radial-gradient(circle at 82% 8%, rgba(47,111,237,.10), transparent 31%),
    radial-gradient(circle at 95% 70%, rgba(56,189,248,.07), transparent 28%),
    #fff;
}
.mw-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #dce5ef 18%, #dce5ef 82%, transparent);
}
.mw-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(620px, 1.17fr);
  gap: 58px;
  align-items: center;
  max-width: 1320px;
}
.mw-hero__copy h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(45px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.048em;
}
.mw-hero__copy h1 span { color: var(--mw-blue); }
.mw-hero__copy > p:not(.mw-kicker) {
  max-width: 51ch;
  margin: 27px 0 0;
  color: var(--mw-muted);
  font-size: 18px;
  line-height: 1.66;
}
.mw-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.mw-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
  color: var(--mw-subtle);
  font-size: 12.5px;
}
.mw-hero__proof span { display: inline-flex; align-items: center; gap: 8px; }
.mw-hero__proof span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #56b58a;
}
.mw-hero__scene { min-width: 0; transform: translateX(18px); }

/* authenticated-product composition */
.mw-appscene {
  display: grid;
  grid-template-columns: 152px minmax(0,1fr);
  min-width: 700px;
  overflow: hidden;
  border: 1px solid #dfe6ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(19,35,58,.14);
  font-size: 11px;
}
.mw-appscene__side {
  display: flex;
  min-height: 452px;
  flex-direction: column;
  padding: 18px 12px 14px;
  border-right: 1px solid #e5eaf1;
  background: #fff;
}
.mw-appscene__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 5px 16px;
  color: #13233a;
  font-size: 14px;
  font-weight: 800;
}
.mw-appscene__brand span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #eaf2ff;
  color: #2f6fed;
}
.mw-appscene__brand svg { width: 14px; height: 14px; }
.mw-appscene__nav { display: grid; gap: 2px; }
.mw-appscene__nav span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 8px;
  color: #647389;
  font-weight: 650;
}
.mw-appscene__nav span i {
  width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px;
}
.mw-appscene__nav span.is-active { color: #2f6fed; background: #eaf2ff; }
.mw-appscene__plan {
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding: 11px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: #f9fbfd;
}
.mw-appscene__plan small { color: #7d8998; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.mw-appscene__plan strong { font-size: 12px; }
.mw-appscene__plan span { color: #748195; font-size: 9px; }
.mw-appscene__plan i { height: 4px; overflow: hidden; border-radius: 99px; background: #e4eaf2; }
.mw-appscene__plan b { display: block; height: 100%; border-radius: inherit; background: #2f6fed; }
.mw-appscene__main { min-width: 0; padding: 23px; background: #f8fafc; }
.mw-appscene__top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.mw-appscene__top div { display: grid; gap: 4px; }
.mw-appscene__top span { color: #13233a; font-size: 18px; font-weight: 820; letter-spacing: -.025em; }
.mw-appscene__top small { color: #7a8798; font-size: 9.5px; }
.mw-appscene__top em { padding: 5px 8px; border: 1px solid #e1e7ee; border-radius: 7px; background: #fff; color: #6e7d90; font-size: 9px; font-style: normal; }
.mw-stagegrid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.mw-stage {
  position: relative;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.mw-stage::after { content:""; position:absolute; width:62px; height:62px; right:-22px; bottom:-26px; border-radius:50%; background: var(--soft); opacity:.55; }
.mw-stage__head { display: flex; align-items: center; gap: 7px; min-height: 25px; }
.mw-stage__head > span { display:grid; width:25px; height:25px; place-items:center; border-radius:7px; color:var(--tone); background:var(--soft); }
.mw-stage__head svg { width: 13px; height: 13px; }
.mw-stage__head small { color: #4f6076; font-size: 8.2px; font-weight: 760; line-height: 1.2; }
.mw-stage > strong { display:block; margin-top: 11px; color:var(--tone); font-size: 22px; line-height:1; }
.mw-stage p { min-height: 28px; margin: 7px 0 9px; color:#8793a2; font-size:7.9px; line-height:1.35; }
.mw-stage > b { position:relative; z-index:1; color:var(--tone); font-size:8px; }
.mw-stage--amber { --tone:#df8500; --soft:#fff3dc; }
.mw-stage--blue { --tone:#2f6fed; --soft:#eaf2ff; }
.mw-stage--coral { --tone:#dd4b4b; --soft:#ffebeb; }
.mw-stage--green { --tone:#209966; --soft:#e7f7ef; }
.mw-followup { margin-top: 13px; padding: 12px; border: 1px solid #e2e8f0; border-radius:10px; background:#fff; }
.mw-followup > div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.mw-followup > div strong { font-size: 10px; }
.mw-followup > div small { color:#8a95a3; font-size:8px; }
.mw-followup > span { display:grid; grid-template-columns:1.1fr .9fr .8fr .7fr; gap:8px; align-items:center; padding:7px 0; border-top:1px solid #edf1f5; color:#68778b; font-size:8px; }
.mw-followup > span:first-of-type { margin-top:8px; }
.mw-followup span b { color:#2b3d54; }
.mw-followup span i { font-style:normal; }
.mw-followup mark { justify-self:end; padding:3px 6px; border-radius:99px; background:#fff1e9; color:#bf5a34; font-size:7px; }

/* section primitives */
.mw-process,
.mw-story,
.mw-actions,
.mw-pricepreview,
.mw-productscene,
.mw-journey,
.mw-pain,
.mw-oneproject,
.mw-roles,
.mw-benefits { padding: 104px 0; }
.mw-process { background: #fff; }
.mw-process--home { padding-top: 82px; }
.mw-process__intro { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.72fr); column-gap:70px; align-items:end; margin-bottom:38px; }
.mw-process__intro .mw-kicker { grid-column:1/-1; }
.mw-process__intro h2,
.mw-sectionhead h2,
.mw-story__copy h2,
.mw-pain h2,
.mw-closing h2,
.mw-oneproject h2 {
  margin: 0;
  font-size: clamp(31px,3.5vw,46px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.mw-process__intro > p:not(.mw-kicker),
.mw-sectionhead > p,
.mw-sectionlead {
  margin: 0;
  color: var(--mw-muted);
  font-size: 16px;
  line-height: 1.65;
}
.mw-flow {
  display: grid;
  grid-template-columns: repeat(8,minmax(0,1fr));
  gap: 0;
  padding: 18px 16px;
  border: 1px solid var(--mw-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(26,46,72,.045);
}
.mw-flow__step { position:relative; display:flex; align-items:center; gap:10px; min-width:0; padding:10px 13px; }
.mw-flow__icon { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border-radius:9px; background:#eaf2ff; color:#2f6fed; }
.mw-flow__icon svg { width:16px; height:16px; }
.mw-flow__step div { min-width:0; }
.mw-flow__step strong { display:block; overflow:hidden; color:#253950; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.mw-flow__step small { display:block; margin-top:2px; overflow:hidden; color:#8a96a5; font-size:8.5px; text-overflow:ellipsis; white-space:nowrap; }
.mw-flow__arrow { position:absolute; top:50%; right:-8px; z-index:2; display:grid; width:17px; height:17px; place-items:center; border:1px solid #e2e8f0; border-radius:50%; background:#fff; color:#a0aab7; transform:translateY(-50%); }
.mw-flow__arrow svg { width:9px; height:9px; }

.mw-story--soft,
.mw-productscene--soft,
.mw-oneproject { background: var(--mw-cloud); }
.mw-story__grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:70px; align-items:center; }
.mw-story__grid--reverse { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); }
.mw-story__copy h2 { max-width: 13ch; }
.mw-story__copy > p:not(.mw-kicker) { max-width: 52ch; margin:22px 0 0; color:var(--mw-muted); font-size:16px; line-height:1.68; }
.mw-story__copy ul { display:grid; gap:10px; margin:24px 0; padding:0; list-style:none; }
.mw-story__copy li { position:relative; padding-left:23px; color:#53647a; font-size:14px; }
.mw-story__copy li::before { content:""; position:absolute; left:0; top:4px; width:12px; height:7px; border-left:2px solid #2f6fed; border-bottom:2px solid #2f6fed; transform:rotate(-45deg); }
.mw-story__visual { min-width:0; }

.mw-quotechain { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:12px; align-items:center; padding:28px; border:1px solid var(--mw-line); border-radius:18px; background:#fff; box-shadow:var(--mw-shadow); }
.mw-quotechain article { min-width:0; padding:22px; border:1px solid #e4eaf1; border-radius:13px; background:#fbfcfe; }
.mw-quotechain article.is-won { border-color:#cce9da; background:#effaf4; }
.mw-quotechain small { display:block; color:#8a96a5; font-size:9px; font-weight:760; letter-spacing:.08em; }
.mw-quotechain strong { display:block; margin-top:10px; color:#15283f; font-size:24px; letter-spacing:-.03em; }
.mw-quotechain span { display:block; margin-top:5px; color:#758398; font-size:10px; line-height:1.4; }
.mw-quotechain > i { color:#a3aebc; font-size:20px; font-style:normal; }

/* planning composition */
.mw-roster { display:grid; grid-template-columns:190px minmax(0,1fr); overflow:hidden; border:1px solid #dfe6ee; border-radius:18px; background:#fff; box-shadow:var(--mw-shadow); }
.mw-roster__queue { padding:20px 14px; border-right:1px solid #e3e9f0; background:linear-gradient(180deg,#f4f9ff,#fafcfe); }
.mw-roster__queue > small,
.mw-roster__week header small { display:block; color:#72829a; font-size:9px; font-weight:760; letter-spacing:.09em; }
.mw-roster__queue > strong,
.mw-roster__week header strong { display:block; margin-top:3px; color:#15263d; font-size:16px; letter-spacing:-.02em; }
.mw-roster__queue article { display:grid; gap:5px; margin-top:17px; padding:12px; border:1px solid #dfe6ee; border-radius:11px; background:#fff; }
.mw-roster__queue article b { color:#24374e; font-size:11px; }
.mw-roster__queue article span { color:#7a8797; font-size:9px; }
.mw-roster__queue article em { padding-top:7px; border-top:1px solid #eef1f5; color:#2f6fed; font-size:7.5px; font-style:normal; font-weight:750; text-transform:uppercase; }
.mw-roster__queue article button { margin-top:4px; padding:7px; border:0; border-radius:7px; background:#2f6fed; color:#fff; font-size:9px; font-weight:700; }
.mw-roster__week { min-width:0; }
.mw-roster__week header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 20px; border-bottom:1px solid #e3e9f0; }
.mw-roster__week header span { color:#53647a; font-size:10px; font-weight:650; }
.mw-roster__grid { display:grid; grid-template-columns:120px repeat(5,minmax(72px,1fr)); min-height:250px; }
.mw-roster__names,
.mw-roster__day { display:grid; grid-template-rows:45px repeat(3,64px); }
.mw-roster__names { border-right:1px solid #e5eaf0; }
.mw-roster__names span,
.mw-roster__day > strong { display:flex; align-items:center; padding:0 12px; border-bottom:1px solid #e8edf2; color:#6e7d91; font-size:8px; font-weight:760; text-transform:uppercase; }
.mw-roster__names b { display:flex; align-items:center; padding:0 12px; border-bottom:1px solid #edf1f5; color:#293b52; font-size:9px; }
.mw-roster__day { position:relative; border-right:1px solid #edf1f5; background:#fff; }
.mw-roster__day:last-child { border-right:0; }
.mw-roster__day::after { content:""; position:absolute; inset:45px 0 0; pointer-events:none; background:repeating-linear-gradient(to bottom,transparent 0,transparent 63px,#edf1f5 63px,#edf1f5 64px); }
.mw-roster__day > strong { justify-content:center; padding:0; color:#34465e; }
.mw-roster__day .job { position:relative; z-index:1; align-self:center; margin:8px 5px; padding:7px; border-radius:7px; color:#20477f; font-size:7.5px; font-weight:720; background:#edf4ff; border-left:3px solid #2f6fed; }
.mw-roster__day .job--a { grid-row:2; }
.mw-roster__day .job--b { grid-row:3; color:#31604b; background:#edf9f2; border-left-color:#38a36d; }

/* field + review composition */
.mw-fieldscene { display:grid; grid-template-columns:minmax(270px,.72fr) minmax(330px,1.28fr); gap:22px; align-items:center; padding:28px; border:1px solid var(--mw-line); border-radius:18px; background:#f8fafc; box-shadow:var(--mw-shadow); }
.mw-phone { max-width:320px; margin:0 auto; overflow:hidden; border:1px solid #dce4ed; border-radius:24px; background:#fff; box-shadow:0 18px 38px rgba(25,43,67,.11); }
.mw-phone header { display:flex; justify-content:space-between; align-items:center; padding:13px 15px; border-bottom:1px solid #e6ebf1; color:#15263d; }
.mw-phone header b { font-size:12px; }
.mw-phone header span { display:grid; width:25px; height:25px; place-items:center; border-radius:50%; background:#1f6a96; color:#fff; font-size:8px; font-weight:800; }
.mw-phone main { padding:18px 16px 17px; }
.mw-phone main > small,
.mw-reviewcard > small,
.mw-prep > small { color:#708198; font-size:8px; font-weight:780; letter-spacing:.09em; }
.mw-phone h3 { margin:4px 0 2px; font-size:19px; letter-spacing:-.025em; }
.mw-phone main > p { margin:0; color:#7a8797; font-size:10px; }
.mw-contact { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:15px; }
.mw-contact span { padding:9px; border:1px solid #e4eaf0; border-radius:8px; background:#fbfcfe; }
.mw-contact small,.mw-contact b { display:block; }
.mw-contact small { color:#8a96a5; font-size:7px; }
.mw-contact b { margin-top:3px; color:#2c3d53; font-size:9px; }
.mw-prep { margin-top:10px; padding:11px; border-radius:9px; background:#f0f5fb; }
.mw-prep p { margin:5px 0 0; color:#516279; font-size:9px; line-height:1.5; }
.mw-phone main > button { width:100%; margin-top:13px; padding:10px; border:0; border-radius:8px; background:#2f6fed; color:#fff; font-size:9px; font-weight:760; }
.mw-reviewcard { padding:22px; border:1px solid #dfe6ee; border-radius:15px; background:#fff; }
.mw-reviewcard h3 { margin:5px 0 14px; font-size:20px; letter-spacing:-.025em; }
.mw-reviewcard__photos { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.mw-reviewcard__photos i { aspect-ratio:1.25; border-radius:8px; background:linear-gradient(145deg,#dce9f2,#bccfdd 56%,#9eb7c9); }
.mw-reviewcard__photos i:nth-child(2) { background:linear-gradient(145deg,#e9edf1,#c7d1d9 50%,#9baab5); }
.mw-reviewcard__photos i:nth-child(3) { background:linear-gradient(145deg,#e2ebdf,#bccdb6 54%,#8fa483); }
.mw-reviewcard ul { display:grid; gap:7px; margin:15px 0; padding:0; list-style:none; color:#5e6e82; font-size:10px; }
.mw-reviewcard li::before { content:"✓"; margin-right:7px; color:#209966; font-weight:800; }
.mw-reviewcard > div:last-child { display:flex; gap:8px; justify-content:flex-end; padding-top:14px; border-top:1px solid #edf1f5; }
.mw-reviewcard button { padding:8px 11px; border:1px solid #dfe6ee; border-radius:8px; background:#fff; color:#485a70; font-size:9px; font-weight:700; }
.mw-reviewcard button.primary { border-color:#2f6fed; background:#2f6fed; color:#fff; }

/* action cards */
.mw-actions { background:#fff; }
.mw-sectionhead { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.62fr); gap:70px; align-items:end; margin-bottom:39px; }
.mw-sectionhead .mw-kicker { margin-bottom:12px; }
.mw-sectionhead h2 { max-width: 15ch; }
.mw-actioncards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.mw-actioncards article { --tone:#2f6fed; --soft:#eaf2ff; display:grid; min-height:165px; align-content:start; padding:20px; border:1px solid #e1e7ef; border-radius:15px; background:#fff; }
.mw-actioncards article > svg { width:36px; height:36px; padding:8px; border-radius:10px; color:var(--tone); background:var(--soft); box-sizing:border-box; }
.mw-actioncards strong { margin-top:20px; color:#2b3e55; font-size:14px; }
.mw-actioncards span { margin-top:6px; color:#7b8899; font-size:12px; line-height:1.5; }
.mw-actioncards .amber { --tone:#df8500; --soft:#fff3dc; }
.mw-actioncards .blue { --tone:#2f6fed; --soft:#eaf2ff; }
.mw-actioncards .coral { --tone:#dd4b4b; --soft:#ffebeb; }
.mw-actioncards .green { --tone:#209966; --soft:#e7f7ef; }

.mw-pricepreview { background:var(--mw-cloud); }
.mw-pricepreview .plancard { box-shadow:0 10px 30px rgba(20,41,68,.045); }
.mw-pricepreview .plancard--pick { box-shadow:0 18px 40px rgba(47,111,237,.11); }

/* page hero + product detail */
.mw-pagehero { padding:96px 0 82px; border-bottom:1px solid #e7ecf2; background:linear-gradient(180deg,#fff,#fbfdff); }
.mw-pagehero .rail { max-width:1060px; }
.mw-pagehero h1 { max-width:14ch; margin:0; font-size:clamp(45px,5.2vw,66px); line-height:1.02; letter-spacing:-.046em; }
.mw-pagehero > .rail > p:not(.mw-kicker) { max-width:63ch; margin:25px 0 0; color:var(--mw-muted); font-size:18px; line-height:1.66; }
.mw-pagehero .mw-hero__actions { margin-top:29px; }
.mw-process > .rail > h2,
.mw-oneproject h2 { margin:0; max-width:15ch; font-size:clamp(32px,3.5vw,46px); letter-spacing:-.035em; }
.mw-sectionlead { max-width:65ch; margin-top:18px; }
.mw-process > .rail > .mw-flow,
.mw-oneproject .mw-flow { margin-top:37px; }
.mw-journey { background:#0f2036; color:#dce6f2; }
.mw-journey .rail { max-width:940px; }
.mw-journey__step { display:grid; grid-template-columns:64px minmax(0,1fr); gap:25px; padding:28px 0; border-bottom:1px solid rgba(255,255,255,.10); }
.mw-journey__step:first-child { padding-top:0; }
.mw-journey__step:last-child { border-bottom:0; padding-bottom:0; }
.mw-journey__step > span { display:grid; width:42px; height:30px; place-items:center; border-radius:8px; background:rgba(47,111,237,.25); color:#88b0ff; font-size:11px; font-weight:800; }
.mw-journey__step h3 { margin:0; color:#fff; font-size:23px; letter-spacing:-.025em; }
.mw-journey__step p { max-width:67ch; margin:8px 0 0; color:#a9bbce; font-size:14.5px; line-height:1.67; }
.mw-productscene .mw-appscene,
.mw-productscene .mw-roster,
.mw-productscene .mw-fieldscene { margin-top:38px; }

/* voor dakdekkers */
.mw-pain { background:#fff; }
.mw-pain__grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:80px; align-items:center; }
.mw-pain h2 { max-width:13ch; }
.mw-pain__grid > div:first-child > p:not(.mw-kicker) { max-width:52ch; margin:22px 0 0; color:var(--mw-muted); font-size:16px; line-height:1.7; }
.mw-chaos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mw-chaos span { display:grid; gap:4px; min-height:93px; align-content:center; padding:16px; border:1px solid #e1e7ef; border-radius:12px; background:#fbfcfe; color:#34465e; font-size:14px; font-weight:740; }
.mw-chaos small { color:#8995a4; font-size:10px; font-weight:500; }
.mw-oneproject .mw-sectionhead { margin-bottom:0; }
.mw-rolegrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.mw-rolegrid article { padding:25px; border:1px solid #e1e7ef; border-radius:15px; background:#fff; }
.mw-rolegrid article > span { display:grid; width:42px; height:42px; place-items:center; border-radius:11px; background:#eaf2ff; color:#2f6fed; }
.mw-rolegrid h3 { margin:19px 0 8px; font-size:20px; }
.mw-rolegrid p { margin:0; color:var(--mw-muted); font-size:13.5px; line-height:1.6; }
.mw-rolegrid ul { display:grid; gap:8px; margin:19px 0 0; padding:16px 0 0; border-top:1px solid #edf1f5; list-style:none; }
.mw-rolegrid li { color:#596a7e; font-size:12px; }
.mw-rolegrid li::before { content:"•"; margin-right:8px; color:#2f6fed; }
.mw-benefits { background:#fff; }
.mw-benefitgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.mw-benefitgrid article { padding:22px; border-top:2px solid #2f6fed; background:#f8fafc; }
.mw-benefitgrid strong { color:#2a3d54; font-size:15px; }
.mw-benefitgrid p { margin:9px 0 0; color:#738196; font-size:12.5px; line-height:1.6; }

/* closing */
.mw-closing { padding:100px 0; text-align:center; background:#13233a; color:#dce6f2; }
.mw-closing .rail { max-width:850px; }
.mw-closing .mw-kicker { color:#7fa9ff; }
.mw-closing h2 { max-width:17ch; margin:0 auto; color:#fff; }
.mw-closing p:not(.mw-kicker) { max-width:52ch; margin:20px auto 0; color:#aebdd0; font-size:16px; line-height:1.65; }
.mw-closing > .rail > div { display:flex; justify-content:center; align-items:center; gap:20px; margin-top:29px; }
.mw-closing .mw-textlink { color:#aecdff; }
.mw-closing .mw-textlink:hover { color:#fff; }

@media (max-width: 1180px) {
  .mw-hero__grid { grid-template-columns:minmax(0,1fr); }
  .mw-hero__copy { max-width:760px; }
  .mw-hero__copy h1 { max-width:14ch; }
  .mw-hero__scene { transform:none; }
  .mw-appscene { min-width:0; }
  .mw-flow { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:8px; }
  .mw-flow__step:nth-child(4) .mw-flow__arrow { display:none; }
  .mw-story__grid,
  .mw-story__grid--reverse { grid-template-columns:minmax(0,1fr); gap:48px; }
  .mw-story__grid--reverse .mw-story__visual { order:2; }
  .mw-story__grid--reverse .mw-story__copy { order:1; }
}

@media (max-width: 960px) {
  .site-header--workflow .site-nav.open { top:72px; gap:15px; }
  .site-header--workflow .site-nav > a { padding:9px 0; }
  .mw-process,
  .mw-story,
  .mw-actions,
  .mw-pricepreview,
  .mw-productscene,
  .mw-journey,
  .mw-pain,
  .mw-oneproject,
  .mw-roles,
  .mw-benefits { padding:80px 0; }
  .mw-process__intro,
  .mw-sectionhead,
  .mw-pain__grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .mw-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mw-flow__step:nth-child(even) .mw-flow__arrow { display:none; }
  .mw-flow__step:nth-child(4) .mw-flow__arrow { display:none; }
  .mw-actioncards,
  .mw-benefitgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mw-rolegrid { grid-template-columns:minmax(0,1fr); }
  .mw-roster { grid-template-columns:150px minmax(560px,1fr); overflow-x:auto; }
  .mw-fieldscene { grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr); }
}

@media (max-width: 720px) {
  .site-header--workflow .inner { min-height:64px; }
  .site-header--workflow .site-nav.open { top:64px; }
  .mw-hero { padding:66px 0 72px; }
  .mw-hero__copy h1,
  .mw-pagehero h1 { font-size:clamp(39px,12vw,52px); }
  .mw-hero__copy > p:not(.mw-kicker),
  .mw-pagehero > .rail > p:not(.mw-kicker) { font-size:16px; }
  .mw-hero__actions { flex-direction:column; }
  .mw-hero__actions .btn { width:100%; justify-content:center; }
  .mw-hero__proof { display:grid; gap:8px; }
  .mw-appscene { grid-template-columns:1fr; border-radius:14px; }
  .mw-appscene__side { display:none; }
  .mw-appscene__main { padding:15px; }
  .mw-stagegrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mw-stage p { min-height:0; }
  .mw-followup > span { grid-template-columns:1fr auto; }
  .mw-followup span i,
  .mw-followup span em { display:none; }
  .mw-flow { grid-template-columns:minmax(0,1fr); padding:10px; }
  .mw-flow__step { padding:8px; }
  .mw-flow__arrow { display:none !important; }
  .mw-flow__step strong,
  .mw-flow__step small { white-space:normal; }
  .mw-quotechain { grid-template-columns:1fr; }
  .mw-quotechain > i { transform:rotate(90deg); text-align:center; }
  .mw-roster { grid-template-columns:1fr; overflow:hidden; }
  .mw-roster__queue { border-right:0; border-bottom:1px solid #e3e9f0; }
  .mw-roster__week { overflow-x:auto; }
  .mw-roster__grid { min-width:610px; }
  .mw-fieldscene { grid-template-columns:1fr; padding:16px; }
  .mw-phone { width:100%; max-width:340px; }
  .mw-actioncards,
  .mw-benefitgrid,
  .mw-chaos { grid-template-columns:1fr; }
  .mw-pagehero { padding:68px 0 58px; }
  .mw-journey__step { grid-template-columns:45px 1fr; gap:14px; }
  .mw-journey__step h3 { font-size:20px; }
  .mw-closing { padding:76px 0; }
  .mw-closing > .rail > div { flex-direction:column; }
  .mw-closing .btn { width:100%; justify-content:center; }
}