: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: transparent; padding: 0; border-radius: 0; }
.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; }
}

/* M5.38 — public aanvraag. The prospect sees the roofer first; Dakscope is infrastructure. */
.public-request-shell {
  --request-accent:#2f6fed;
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb,var(--request-accent) 8%, transparent) 0, transparent 32rem),
    linear-gradient(180deg,#f7f9fc 0,#fbfcfe 34rem,#fff 100%);
  color:#14263c;
}
.public-request-topbar { border-bottom:1px solid rgba(177,188,202,.32);background:rgba(255,255,255,.84);backdrop-filter:blur(14px); }
.public-request-topbar__inner { max-width:1120px;min-height:74px;margin:0 auto;padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px; }
.public-request-company-brand { min-width:0;display:flex;align-items:center;gap:11px;color:#172b43;font-size:15px; }
.public-request-company-brand>strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;letter-spacing:-.01em; }
.public-request-company-logo { display:block;max-width:190px;max-height:42px;width:auto;height:auto;object-fit:contain;object-position:left center; }
.public-request-company-mark { width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:color-mix(in srgb,var(--request-accent) 12%,#fff);color:var(--request-accent);font-size:13px;font-weight:850;letter-spacing:.02em; }
.public-request-company-mark--check { border-radius:50%;background:#e8f7ef;color:#24845c; }
.public-request-powered { color:#8a96a7;font-size:11.5px;white-space:nowrap; }
.public-request-powered strong { color:#65758a;font-weight:750; }
.public-request-main { max-width:1120px;margin:0 auto;padding:64px 26px 90px; }
.public-request-layout { display:grid;grid-template-columns:minmax(250px,330px) minmax(0,720px);gap:58px;align-items:start;justify-content:space-between; }
.public-request-intro { position:sticky;top:28px;padding:18px 0 0; }
.public-request-kicker { margin:0;color:var(--request-accent);font-size:11px;font-weight:850;letter-spacing:.11em;text-transform:uppercase; }
.public-request-intro h1 { max-width:8ch;margin:10px 0 15px;font-size:clamp(38px,4.2vw,56px);line-height:.99;letter-spacing:-.055em;color:#12243a; }
.public-request-intro>p:not(.public-request-kicker) { margin:0;max-width:31ch;color:#65758a;font-size:15.5px;line-height:1.7; }
.public-request-trust-list { display:grid;gap:8px;margin-top:29px; }
.public-request-trust-list>div { display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;padding:10px 0; }
.public-request-trust-list>div>span { width:32px;height:32px;display:grid;place-items:center;border:1px solid #dde5ef;border-radius:9px;background:rgba(255,255,255,.72);color:#67809d; }
.public-request-trust-list p { display:grid;gap:2px;margin:0; }
.public-request-trust-list strong { color:#334a65;font-size:12px;line-height:1.4; }
.public-request-trust-list small { color:#8995a5;font-size:11px;line-height:1.45; }
.public-request-card { overflow:hidden;border:1px solid #dde4ed;border-radius:19px;background:#fff;box-shadow:0 18px 55px rgba(32,52,78,.09),0 2px 6px rgba(32,52,78,.035); }
.public-request-card__head { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 28px 18px; }
.public-request-card__head h2 { margin:4px 0 0;color:#152b45;font-size:23px;letter-spacing:-.035em; }
.public-request-card__eyebrow { color:#8592a3;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.public-request-step-count { margin-top:5px;color:#7b8797;font-size:11.5px;font-weight:650; }
.public-request-progress { position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0 28px 20px;list-style:none;border-bottom:1px solid #edf0f4; }
.public-request-progress::before { content:"";position:absolute;left:calc(28px + 16.66%);right:calc(28px + 16.66%);top:15px;height:1px;background:#dde4ed; }
.public-request-progress li { position:relative;z-index:1;display:grid;justify-items:center;gap:6px;color:#9aa5b4;font-size:10.5px;font-style:normal;font-weight:650; }
.public-request-progress li span { width:30px;height:30px;display:grid;place-items:center;border:1px solid #dbe3ed;border-radius:50%;background:#fff;color:#8290a2;font-size:11px;font-weight:800;transition:.18s ease; }
.public-request-progress li em { font-style:normal; }
.public-request-progress li.is-active { color:#39516e; }
.public-request-progress li.is-active span { border-color:var(--request-accent);background:var(--request-accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--request-accent) 10%,transparent); }
.public-request-progress li.is-done span { border-color:color-mix(in srgb,var(--request-accent) 34%,#dbe3ed);background:color-mix(in srgb,var(--request-accent) 9%,#fff);color:var(--request-accent); }
.public-request-form { display:block; }
.public-request-honeypot { position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important; }
.public-request-step { padding:26px 28px 28px; }
.public-request-step[hidden],.public-request-company[hidden] { display:none!important; }
.public-request-step__title { display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:22px; }
.public-request-step__title>span { width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--request-accent) 9%,#fff);color:var(--request-accent);font-size:12px;font-weight:850; }
.public-request-step__title h3 { margin:1px 0 3px;color:#1a304a;font-size:17px;letter-spacing:-.02em; }
.public-request-step__title p { margin:0;color:#8793a3;font-size:11.5px;line-height:1.5; }
.public-request-form label:not(.btn):not(.public-request-leak):not(.public-request-work-grid label):not(.public-request-choice label) { display:grid;gap:7px;margin-top:15px;color:#43566e;font-size:11.5px;font-weight:730; }
.public-request-form .input { width:100%;min-height:48px;border:1px solid #d7dfe8;border-radius:10px;background:#fbfcfe;color:#1d3048;padding:11px 13px;font:inherit;font-size:14px;box-shadow:0 1px 1px rgba(28,47,71,.015);transition:border .15s,box-shadow .15s,background .15s; }
.public-request-form textarea.input { min-height:88px;resize:vertical;line-height:1.55; }
.public-request-form .input::placeholder { color:#a9b2be; }
.public-request-form .input:hover { border-color:#c5cfdb; }
.public-request-form .input:focus { outline:none;border-color:color-mix(in srgb,var(--request-accent) 64%,#a7b8ca);background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--request-accent) 10%,transparent); }
.public-request-grid { display:grid;gap:12px; }
.public-request-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.public-request-grid--postcode { grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr); }
.public-request-form .optional { float:right;color:#9da7b4;font-size:9.5px;font-weight:600;letter-spacing:0;text-transform:none; }
.public-request-choice { display:grid;gap:8px;margin:0 0 18px; }
.public-request-choice--customer { grid-template-columns:1fr 1fr; }
.public-request-choice--roof { grid-template-columns:repeat(4,1fr);margin:7px 0 0; }
.public-request-choice label { margin:0!important;display:block!important;cursor:pointer; }
.public-request-choice input,.public-request-work-grid input { position:absolute;opacity:0;pointer-events:none; }
.public-request-choice span { min-height:43px;display:flex;align-items:center;justify-content:center;padding:9px 11px;border:1px solid #dbe2eb;border-radius:10px;background:#f9fbfd;color:#5f7188;font-size:11.5px;font-weight:750;transition:.16s ease; }
.public-request-choice input:checked+span { border-color:color-mix(in srgb,var(--request-accent) 52%,#dbe2eb);background:color-mix(in srgb,var(--request-accent) 8%,#fff);color:color-mix(in srgb,var(--request-accent) 88%,#1f3653);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--request-accent) 8%,transparent); }
.public-request-company { margin:-4px 0 4px; }
.public-request-address-block { margin-top:19px;padding:16px 17px 17px;border:1px solid #e4e9ef;border-radius:12px;background:#fafbfd; }
.public-request-address-block label:first-of-type { margin-top:8px!important; }
.public-request-mini-label { display:block;color:#6e7c8f;font-size:10px;font-weight:820;letter-spacing:.075em;text-transform:uppercase; }
.public-request-work-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:22px; }
.public-request-work-grid label { cursor:pointer; }
.public-request-work-grid span { min-height:74px;display:grid;align-content:center;gap:4px;padding:12px 13px;border:1px solid #dfe5ec;border-radius:11px;background:#fbfcfd;transition:.16s ease; }
.public-request-work-grid strong { color:#354a63;font-size:12px; }
.public-request-work-grid small { color:#8a96a5;font-size:10px;line-height:1.35; }
.public-request-work-grid input:checked+span { border-color:color-mix(in srgb,var(--request-accent) 52%,#dfe5ec);background:color-mix(in srgb,var(--request-accent) 6%,#fff);box-shadow:inset 3px 0 0 var(--request-accent); }
.public-request-field-group { margin:0 0 18px; }
.public-request-leak { display:grid;grid-template-columns:24px 1fr;gap:11px;align-items:start;margin:18px 0 3px;padding:13px 14px;border:1px solid #eadfdc;border-radius:11px;background:#fffaf8;color:#3c4f65;cursor:pointer; }
.public-request-leak input { position:absolute;opacity:0; }
.public-request-leak__icon { width:24px;height:24px;display:grid;place-items:center;color:#cf5a48; }
.public-request-leak>span:last-child { display:grid;gap:2px; }
.public-request-leak strong { font-size:11.5px; }
.public-request-leak small { color:#8b7b79;font-size:10px;font-weight:500;line-height:1.4; }
.public-request-leak:has(input:checked) { border-color:#e6b7af;background:#fff5f2;box-shadow:inset 3px 0 0 #d75b48; }
.public-request-leak:has(input:checked) .public-request-leak__icon { color:#bd4636; }
.public-request-upload { display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:13px;align-items:center;margin:3px 0 12px;padding:16px;border:1px dashed #c7d2df;border-radius:13px;background:#f9fbfd; }
.public-request-upload.is-dragging { border-color:var(--request-accent);background:color-mix(in srgb,var(--request-accent) 5%,#f9fbfd);box-shadow:0 0 0 4px color-mix(in srgb,var(--request-accent) 8%,transparent); }
.public-request-upload__icon { width:44px;height:44px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--request-accent) 9%,#fff);color:var(--request-accent); }
.public-request-upload strong { color:#354a63;font-size:12px; }
.public-request-upload p { margin:3px 0 0;color:#8c97a6;font-size:10.5px;line-height:1.4; }
.public-request-files { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 17px; }
.public-request-files__empty { grid-column:1/-1;margin:0;padding:7px 2px;color:#9aa5b2;font-size:10.5px; }
.public-request-file { position:relative;min-width:0;display:grid;grid-template-columns:58px minmax(0,1fr) 27px;gap:9px;align-items:center;padding:7px;border:1px solid #e1e6ed;border-radius:10px;background:#fff; }
.public-request-file img { width:58px;height:48px;display:block;object-fit:cover;border-radius:7px;background:#eef2f6; }
.public-request-file>div { min-width:0;display:grid;gap:2px; }
.public-request-file strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#455970;font-size:10.5px; }
.public-request-file small { color:#9aa5b2;font-size:9.5px; }
.public-request-file button { width:26px;height:26px;border:0;border-radius:7px;background:#f4f6f8;color:#7d8997;cursor:pointer;font:700 17px/1 sans-serif; }
.public-request-file button:hover { background:#fff0ee;color:#bd4c3d; }
.public-request-privacy { display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;margin-top:17px;padding:12px 13px;border-radius:10px;background:#f7f9fb;color:#68788b; }
.public-request-privacy>.glyph { color:#6c819b; }
.public-request-privacy p { display:grid;gap:2px;margin:0; }
.public-request-privacy strong { color:#52657b;font-size:10.5px; }
.public-request-privacy span { font-size:9.8px;line-height:1.45; }
.public-request-step-actions { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:23px;padding-top:18px;border-top:1px solid #edf0f4; }
.public-request-step-actions--end { justify-content:flex-end; }
.public-request-step-actions .btn { min-width:128px;justify-content:center; }
.public-request-step-actions .btn-primary { background:var(--request-accent);border-color:var(--request-accent); }
.public-request-step-actions .btn-primary:hover { filter:brightness(.96); }
.public-request-success { max-width:650px;margin:0 auto;padding:112px 24px 90px;text-align:center; }
.public-request-success__icon { width:64px;height:64px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;background:#e7f7ee;color:#22805a;box-shadow:0 0 0 8px rgba(40,137,96,.06); }
.public-request-success h1 { margin:9px auto 12px;color:#162b44;font-size:clamp(32px,5vw,46px);line-height:1.06;letter-spacing:-.045em; }
.public-request-success>p:not(.public-request-kicker) { max-width:560px;margin:0 auto 26px;color:#68778a;font-size:15.5px;line-height:1.65; }
.public-request-success__note { max-width:520px;margin:0 auto;padding:15px 17px;display:grid;gap:4px;border:1px solid #e1e7ed;border-radius:12px;background:#fafbfd;color:#7f8b9a;font-size:11.5px;line-height:1.5; }
.public-request-success__note strong { color:#52657b; }
.public-request-success__note--warn { border-color:#f1d9aa;background:#fffaf0;color:#806b45; }
.public-request-success__note--warn strong { color:#684f21; }
.public-request-success--error { padding-top:135px; }
@media (max-width: 900px) {
  .public-request-main { padding-top:42px; }
  .public-request-layout { grid-template-columns:1fr;gap:26px; }
  .public-request-intro { position:static;padding:0; }
  .public-request-intro h1 { max-width:none;font-size:40px; }
  .public-request-intro>p:not(.public-request-kicker) { max-width:680px; }
  .public-request-trust-list { grid-template-columns:repeat(3,1fr);gap:8px;margin-top:19px; }
  .public-request-trust-list>div { grid-template-columns:1fr;gap:6px;padding:10px 11px;border:1px solid #e2e8ef;border-radius:10px;background:rgba(255,255,255,.7); }
}
@media (max-width: 680px) {
  .public-request-topbar__inner { min-height:64px;padding:11px 15px; }
  .public-request-company-logo { max-width:145px;max-height:36px; }
  .public-request-powered { font-size:9.8px; }
  .public-request-main { padding:28px 12px 58px; }
  .public-request-layout { gap:19px; }
  .public-request-intro { padding:0 4px; }
  .public-request-intro h1 { margin-top:7px;font-size:34px; }
  .public-request-intro>p:not(.public-request-kicker) { font-size:14px;line-height:1.6; }
  .public-request-trust-list { display:none; }
  .public-request-card { border-radius:15px;box-shadow:0 10px 30px rgba(32,52,78,.07); }
  .public-request-card__head { padding:18px 17px 14px; }
  .public-request-card__head h2 { font-size:19px; }
  .public-request-card__eyebrow { font-size:9.5px; }
  .public-request-step-count { font-size:10px; }
  .public-request-progress { padding:0 14px 16px; }
  .public-request-progress::before { left:calc(14px + 16.66%);right:calc(14px + 16.66%);top:13px; }
  .public-request-progress li { font-size:9.5px; }
  .public-request-progress li span { width:27px;height:27px; }
  .public-request-step { padding:21px 16px 19px; }
  .public-request-step__title { grid-template-columns:32px 1fr;gap:9px;margin-bottom:18px; }
  .public-request-step__title>span { width:30px;height:30px;border-radius:8px; }
  .public-request-step__title h3 { font-size:15.5px; }
  .public-request-grid--2,.public-request-grid--postcode { grid-template-columns:1fr;gap:0; }
  .public-request-choice--roof { grid-template-columns:1fr 1fr; }
  .public-request-work-grid { grid-template-columns:1fr;gap:7px; }
  .public-request-work-grid span { min-height:62px; }
  .public-request-address-block { padding:14px; }
  .public-request-upload { grid-template-columns:42px 1fr;padding:14px; }
  .public-request-upload__icon { width:40px;height:40px; }
  .public-request-upload .btn { grid-column:1/-1;width:100%; }
  .public-request-files { grid-template-columns:1fr; }
  .public-request-step-actions { gap:8px; }
  .public-request-step-actions .btn { min-width:0;flex:1; }
  .public-request-step-actions--end .btn { flex:1; }
  .public-request-success { padding:88px 18px 70px; }
}

/* M5.43: mobile trial CTA keeps premium contrast. */
@media (max-width: 760px) {
  .nav-mobile-actions .btn,
  .nav-mobile-actions .btn:visited,
  .nav-mobile-actions .btn:hover,
  .nav-mobile-actions .btn:focus { color: #fff !important; }
}


/* M5.44 mobile public CTA contrast */
@media (max-width: 960px) {
  .site-nav .btn-primary, .nav-drawer .btn-primary, .mobile-nav .btn-primary,
  .site-header .btn-primary, .nav-login.btn-primary { color: #fff !important; }
}

/* ==========================================================================
   M5.45 Public Site R2
   Conversion-first field-service presentation for cold Meta traffic.
   ========================================================================== */
.public-workflow {
  --r2-navy: #0b1c31;
  --r2-navy-2: #102944;
  --r2-blue: #2468d3;
  --r2-blue-2: #1457bd;
  --r2-sky: #e9f2ff;
  --r2-cream: #f7f5ef;
  --r2-paper: #fbfcfe;
  --r2-line: #dce5ef;
  --r2-muted: #607188;
  --r2-green: #1b7a55;
  background: #fff;
  color: var(--r2-navy);
  overflow: clip;
}
.site-header--workflow {
  border-bottom: 1px solid rgba(27, 52, 82, .09);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.25) blur(14px);
}
.site-header--workflow .inner { max-width: 1240px; min-height: 72px; }
.site-header--workflow .wordmark { color: var(--r2-navy, #0b1c31); font-weight: 760; }
.site-header--workflow .site-nav > a { color: #53657b; font-size: 14px; font-weight: 620; }
.site-header--workflow .header-actions .btn-primary { box-shadow: 0 7px 20px rgba(36, 104, 211, .18); }
.site-footer--workflow { background: #091a2d; border: 0; color: #d9e3ef; }
.site-footer--workflow .wordmark { color: #fff; }
.site-footer--workflow h4 { color: #fff; }
.site-footer--workflow a { color: #b9c8d9; }
.site-footer--workflow .muted { color: #8fa4ba; }
.site-footer--workflow .footer-base { border-top-color: rgba(255,255,255,.1); color: #8fa4ba; }

.r2-kicker {
  margin: 0 0 13px !important;
  color: var(--r2-blue) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.r2-section-head { max-width: 780px; margin-bottom: 42px; }
.r2-section-head h2 { max-width: 20ch; font-size: clamp(32px, 4vw, 52px); line-height: 1.04; letter-spacing: -.045em; }
.r2-section-head > p:last-child { max-width: 680px; margin-top: 16px; color: var(--r2-muted); font-size: 17px; line-height: 1.72; }
.r2-section-head--center { margin-inline: auto; text-align: center; }
.r2-section-head--center h2, .r2-section-head--center > p:last-child { margin-inline: auto; }

.r2-hero {
  position: relative;
  padding: 92px 0 90px;
  background:
    radial-gradient(circle at 77% 15%, rgba(64, 139, 235, .14), transparent 31%),
    linear-gradient(180deg, #f9fbfe 0%, #fff 92%);
}
.r2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: linear-gradient(rgba(17,45,76,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,45,76,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.r2-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(540px, 1.16fr); gap: 66px; align-items: center; }
.r2-hero__copy { max-width: 620px; }
.r2-hero__copy h1 {
  max-width: 12ch;
  color: var(--r2-navy) !important;
  font-size: clamp(45px, 5.55vw, 74px);
  line-height: .99;
  letter-spacing: -.058em;
  font-weight: 770;
}
.r2-hero__copy h1 span { color: var(--r2-blue); }
.r2-hero__copy > p:not(.r2-kicker):not(.r2-micro) { max-width: 590px; margin-top: 24px; color: #53657b; font-size: 18px; line-height: 1.68; }
.r2-hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.r2-hero__actions .btn { min-height: 50px; border-radius: 10px; font-weight: 720; }
.r2-hero__actions .btn-primary { background: var(--r2-blue); box-shadow: 0 12px 25px rgba(36,104,211,.18); }
.r2-micro { margin-top: 14px !important; color: #7d8c9e !important; font-size: 12px !important; line-height: 1.45 !important; }
.r2-hero__visual { min-width: 0; transform: perspective(1500px) rotateY(-1.8deg) rotateX(.8deg); transform-origin: center; }

.r2-product {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 446px;
  overflow: hidden;
  border: 1px solid #cdd9e6;
  border-radius: 20px;
  background: #f7f9fc;
  box-shadow: 0 34px 72px rgba(22, 48, 79, .19), 0 5px 18px rgba(22,48,79,.08);
}
.r2-product__nav { display: flex; flex-direction: column; padding: 20px 13px; background: #0d2037; color: #a8b9cb; }
.r2-product__mini-brand { display: flex; align-items: center; gap: 8px; margin: 0 5px 28px; color: #fff; font-size: 13px; }
.r2-product__mini-brand > span { width: 18px; height: 14px; border: 2px solid #68a5ff; border-top: 0; transform: skewY(-24deg); }
.r2-product__nav nav { display: grid; gap: 5px; }
.r2-product__nav nav strong { padding: 8px 9px; border-radius: 8px; color: #9db0c5; font-size: 10px; font-weight: 650; }
.r2-product__nav nav strong.is-active { background: rgba(86,146,233,.16); color: #fff; }
.r2-product__nav > small { margin: auto 6px 0; color: #71869e; font-size: 8px; line-height: 1.5; }
.r2-product__canvas { min-width: 0; padding: 26px 24px 20px; }
.r2-product__canvas > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.r2-product__canvas > header > div { display: grid; }
.r2-product__canvas > header small { color: #8b99aa; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.r2-product__canvas > header strong { margin-top: 3px; color: #142b45; font-size: 19px; letter-spacing: -.03em; }
.r2-product__canvas > header > span { padding: 6px 8px; border-radius: 7px; background: #edf3fb; color: #60738a; font-size: 8px; }
.r2-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.r2-task-grid article { min-width: 0; padding: 15px; border: 1px solid #dbe4ed; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(25,54,89,.035); }
.r2-task-grid article.is-urgent { border-color: #efc8c2; background: #fff9f8; }
.r2-task-grid small { color: #8291a3; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.r2-task-grid strong { display: block; margin-top: 4px; color: #1a324e; font-size: 12px; }
.r2-task-grid p { min-height: 30px; margin-top: 5px; color: #748397; font-size: 8px; line-height: 1.5; }
.r2-task-grid b { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; color: #2663ad; font-size: 8px; }
.r2-task-grid .is-urgent b { color: #b04b42; }
.r2-mini-journey { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-top: 18px; padding: 14px 10px 4px; border-top: 1px solid #e2e8ef; }
.r2-mini-journey span { position: relative; padding-top: 12px; color: #a0aab7; font-size: 6.5px; text-align: center; }
.r2-mini-journey span::before { content: ""; position: absolute; top: 2px; left: 50%; width: 6px; height: 6px; border: 1.5px solid #c8d2de; border-radius: 50%; background: #fff; transform: translateX(-50%); }
.r2-mini-journey span.is-done { color: #5d7694; }
.r2-mini-journey span.is-done::before { border-color: #6e9ed9; background: #dcecff; }
.r2-mini-journey span.is-current { color: #1f548e; font-weight: 800; }
.r2-mini-journey span.is-current::before { border-color: var(--r2-blue); background: var(--r2-blue); box-shadow: 0 0 0 3px rgba(36,104,211,.12); }

.r2-pain { padding: 98px 0 104px; background: var(--r2-navy); color: #fff; }
.r2-pain .r2-kicker { color: #7cb2ff !important; }
.r2-pain .r2-section-head h2 { color: #fff !important; }
.r2-pain .r2-section-head > p:last-child { color: #9eb0c4; }
.r2-pain-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(255,255,255,.11); }
.r2-pain-grid article { min-height: 250px; padding: 26px 22px; background: #102640; }
.r2-pain-grid article > span { color: #6b9bd3; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.r2-pain-grid h3 { margin-top: 25px; color: #fff !important; font-size: 18px; line-height: 1.25; }
.r2-pain-grid p { margin-top: 12px; color: #9db0c4; font-size: 13px; line-height: 1.65; }

.r2-flow { padding: 108px 0 112px; background: #fff; }
.r2-journey { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.r2-journey li { position: relative; display: grid; justify-items: center; gap: 13px; min-width: 0; text-align: center; }
.r2-journey li > i { position: absolute; top: 21px; left: calc(50% + 25px); right: calc(-50% + 25px); height: 1px; background: #ccd8e5; }
.r2-journey__number { position: relative; z-index: 1; display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #cbd8e5; border-radius: 50%; background: #fff; color: var(--r2-blue); font-size: 10px; font-weight: 800; box-shadow: 0 5px 14px rgba(20,57,95,.06); }
.r2-journey li > div { display: grid; gap: 5px; }
.r2-journey strong { color: #17314e; font-size: 13px; }
.r2-journey small { max-width: 140px; color: #718196; font-size: 10.5px; line-height: 1.45; }

.r2-action-first, .r2-field, .r2-morework { padding: 105px 0; }
.r2-action-first { background: #f5f8fc; border-block: 1px solid #e5ebf2; }
.r2-field { background: var(--r2-cream); }
.r2-morework { background: #fff; }
.r2-split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); gap: 74px; align-items: center; }
.r2-split--reverse { grid-template-columns: minmax(520px, 1.18fr) minmax(0, .82fr); }
.r2-copy { max-width: 540px; }
.r2-copy h2 { max-width: 15ch; color: var(--r2-navy) !important; font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -.045em; }
.r2-copy > p:not(.r2-kicker):not(.r2-note) { margin-top: 19px; color: var(--r2-muted); font-size: 16px; line-height: 1.72; }
.r2-copy ul { display: grid; gap: 10px; margin: 25px 0 0; padding: 0; list-style: none; }
.r2-copy li { position: relative; padding-left: 26px; color: #344b64; font-size: 14px; }
.r2-copy li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--r2-blue); font-weight: 850; }
.r2-split__visual .r2-product { min-height: 405px; }

.r2-capabilities { padding: 108px 0; background: #fff; }
.r2-cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.r2-cap { overflow: hidden; border: 1px solid #dbe4ed; border-radius: 20px; background: #fbfcfe; }
.r2-cap__visual { min-height: 290px; display: grid; place-items: center; padding: 38px; background: linear-gradient(155deg, #eaf3ff, #f8fbff); border-bottom: 1px solid #dce6ef; }
.r2-cap > div:last-child { padding: 28px 30px 31px; }
.r2-cap > div:last-child > small { color: var(--r2-blue); font-size: 10px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.r2-cap h3 { margin-top: 8px; color: #122a45 !important; font-size: 24px; letter-spacing: -.03em; }
.r2-cap p { margin-top: 11px; color: #63748a; font-size: 14px; line-height: 1.65; }
.r2-roof { position: relative; width: 265px; height: 175px; filter: drop-shadow(0 18px 20px rgba(25,60,100,.14)); }
.r2-roof i { position: absolute; display: block; background: linear-gradient(150deg, #3d79c9, #21569a); border: 1px solid rgba(255,255,255,.65); }
.r2-roof i:nth-child(1) { left: 9px; top: 55px; width: 126px; height: 92px; clip-path: polygon(42% 0,100% 24%,88% 100%,0 75%); }
.r2-roof i:nth-child(2) { left: 110px; top: 24px; width: 144px; height: 105px; clip-path: polygon(0 30%,64% 0,100% 64%,20% 100%); background: linear-gradient(145deg,#5c93d7,#2a68b2); }
.r2-roof i:nth-child(3) { left: 79px; top: 100px; width: 111px; height: 60px; clip-path: polygon(0 0,100% 10%,80% 100%,10% 80%); background: #1c4d89; }
.r2-roof span { position: absolute; right: -2px; bottom: -7px; z-index: 2; padding: 7px 10px; border-radius: 8px; background: #fff; color: #173d6d; font-size: 13px; font-weight: 820; box-shadow: 0 5px 16px rgba(19,50,85,.12); }
.r2-quote { width: min(350px,100%); padding: 20px; border: 1px solid #d2dce7; border-radius: 15px; background: #fff; box-shadow: 0 17px 37px rgba(26,59,96,.13); }
.r2-quote header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #e4eaf1; }
.r2-quote header span { color: #6c7e92; font-size: 10px; font-weight: 760; }
.r2-quote header b { color: #173451; font-size: 15px; }
.r2-quote > p { margin: 16px 0 !important; color: #283f59 !important; font-weight: 730; }
.r2-quote > div { display: flex; justify-content: space-between; gap: 8px; padding: 11px; border-radius: 9px; background: #f1f6fc; color: #56708e; font-size: 10px; }
.r2-quote > div strong { color: #a25b29; }
.r2-quote button { width: 100%; margin-top: 13px; padding: 10px; border: 0; border-radius: 8px; background: #2264b5; color: #fff; font-size: 10px; font-weight: 760; }

.r2-field-scene { position: relative; min-height: 475px; }
.r2-week-card { position: absolute; left: 0; top: 35px; width: 80%; min-height: 330px; padding: 22px; border: 1px solid #d3dde8; border-radius: 18px; background: #fff; box-shadow: 0 22px 45px rgba(34,58,84,.1); }
.r2-week-card header { display: flex; justify-content: space-between; align-items: flex-start; }
.r2-week-card header div { display: grid; }
.r2-week-card header small { color: #8090a2; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.r2-week-card header strong { color: #19324d; font-size: 18px; }
.r2-week-card header span { color: #758699; font-size: 9px; }
.r2-week-grid { display: grid; grid-template-columns: repeat(5,1fr); grid-template-rows: 27px 70px 70px; gap: 7px; margin-top: 23px; }
.r2-week-grid > b { color: #7c8c9e; font-size: 8px; text-align: center; }
.r2-week-grid > span { border-radius: 8px; background: #e7f0fb; border: 1px solid #c8dbf1; color: #2e5e97; font-size: 8px; padding: 8px; }
.r2-week-grid .job-a { background: #e8f1fe; }
.r2-week-grid .job-b { background: #ecf5ee; border-color: #cde2d2; color: #3b7350; }
.r2-week-grid .job-c { background: #f4effa; border-color: #ddd1eb; color: #6a5481; }
.r2-phone-card { position: absolute; right: 0; bottom: 0; z-index: 2; width: 205px; min-height: 398px; padding: 14px; border: 5px solid #142a42; border-radius: 29px; background: #fff; box-shadow: 0 28px 52px rgba(17,41,68,.22); }
.r2-phone-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; color: #18314d; font-size: 10px; }
.r2-phone-card__top span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8f0fb; color: #2b63a5; font-size: 7px; }
.r2-phone-card > small { color: #8493a4; font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.r2-phone-card h3 { margin-top: 4px; color: #132c47 !important; font-size: 17px; }
.r2-phone-card > p { color: #7b8999; font-size: 9px; }
.r2-phone-task { display: grid; gap: 2px; margin-top: 18px; padding: 11px; border-radius: 9px; background: #eef5fd; }
.r2-phone-task small { color: #6d86a2; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.r2-phone-task strong { color: #1e548f; font-size: 10px; }
.r2-phone-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.r2-phone-info span { display: grid; padding: 8px; border: 1px solid #e4e9ef; border-radius: 8px; }
.r2-phone-info small { color: #909baa; font-size: 6px; }
.r2-phone-info b { color: #334a63; font-size: 7px; }
.r2-phone-card > button { position: absolute; left: 14px; right: 14px; bottom: 15px; padding: 10px; border: 0; border-radius: 9px; background: var(--r2-blue); color: #fff; font-size: 9px; font-weight: 770; }

.r2-morework .r2-split { grid-template-columns: minmax(0, 1fr) minmax(380px, .75fr); }
.r2-morework-flow { display: flex; align-items: center; gap: 9px; margin-top: 28px; }
.r2-morework-flow span { display: inline-flex; align-items: center; gap: 7px; color: #344c65; font-size: 11px; font-weight: 720; white-space: nowrap; }
.r2-morework-flow span b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eaf2fc; color: #2c65a8; font-size: 8px; }
.r2-morework-flow i { flex: 1; height: 1px; background: #d9e2ec; }
.r2-note { margin-top: 20px !important; padding: 13px 14px; border-left: 3px solid #5b90cf; background: #f6f9fd; color: #5c6e83; font-size: 12px; line-height: 1.55; }
.r2-change-card { padding: 27px; border: 1px solid #e1d7d3; border-radius: 18px; background: linear-gradient(155deg,#fff,#fff9f7); box-shadow: 0 20px 48px rgba(83,54,44,.09); }
.r2-change-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.r2-change-card header small { color: #8b756d; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.r2-change-card header strong { padding: 5px 8px; border-radius: 999px; background: #fde9e5; color: #ad4d40; font-size: 8px; }
.r2-change-card h3 { margin-top: 24px; color: #312a28 !important; font-size: 22px; }
.r2-change-card > p { margin-top: 11px; color: #786b67; font-size: 13px; line-height: 1.65; }
.r2-change-card > div { display: flex; justify-content: space-between; margin-top: 22px; padding: 13px 0; border-block: 1px solid #ebe2df; color: #746863; font-size: 11px; }
.r2-change-card > div b { color: #352b27; font-size: 15px; }
.r2-change-card button { width: 100%; margin-top: 17px; padding: 11px; border: 0; border-radius: 9px; background: #b24d41; color: #fff; font-size: 11px; font-weight: 760; }

.r2-invoice { padding: 108px 0; background: #f4f7fb; border-block: 1px solid #e2e8f0; }
.r2-invoice-tabs { display: flex; justify-content: center; gap: 7px; margin: 0 auto 18px; }
.r2-invoice-tabs span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #d5dfe9; border-radius: 9px; background: #fff; color: #6a7b8f; font-size: 11px; font-weight: 720; }
.r2-invoice-tabs span.is-active { border-color: #afc9e7; background: #eaf3fe; color: #245b9b; }
.r2-invoice-tabs b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(32,79,132,.08); font-size: 9px; }
.r2-invoice-card { max-width: 910px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 28px; align-items: center; padding: 21px 23px; border: 1px solid #d4dfe9; border-radius: 15px; background: #fff; box-shadow: 0 10px 28px rgba(31,55,81,.06); }
.r2-invoice-card > div:first-child { display: grid; gap: 2px; }
.r2-invoice-card small { color: #8997a7; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.r2-invoice-card strong { color: #1a334f; font-size: 15px; }
.r2-invoice-card p { color: #78889a; font-size: 9px; }
.r2-invoice-card > b { color: #173452; font-size: 17px; white-space: nowrap; }
.r2-invoice-card > div:last-child { display: grid; gap: 6px; }
.r2-invoice-card button { min-width: 175px; padding: 8px 10px; border: 1px solid #bfcddd; border-radius: 8px; background: #fff; color: #31526f; font-size: 8px; font-weight: 730; }
.r2-invoice-card button:first-child { border-color: var(--r2-blue); background: var(--r2-blue); color: #fff; }
.r2-integration-note { max-width: 790px; margin: 15px auto 0 !important; color: #7c8a9a; font-size: 11px; text-align: center; }

.r2-audience { padding: 105px 0; background: #fff; }
.r2-audience-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.r2-audience-grid article { min-height: 215px; padding: 26px; border: 1px solid #dce4ed; border-radius: 16px; background: #fbfcfe; }
.r2-audience-grid small { color: var(--r2-blue); font-size: 9px; font-weight: 830; letter-spacing: .11em; }
.r2-audience-grid h3 { max-width: 17ch; margin-top: 26px; color: #17314c !important; font-size: 20px; line-height: 1.18; }
.r2-audience-grid p { margin-top: 12px; color: #718196; font-size: 13px; line-height: 1.6; }

.r2-pricing { padding: 102px 0; background: var(--r2-navy); }
.r2-pricing .r2-kicker { color: #77b0ff !important; }
.r2-pricing .r2-section-head h2 { color: #fff !important; }
.r2-pricing .r2-section-head > p:last-child { color: #9fb1c4; }
.r2-pricing .plancard {
  background: #ffffff;
  border-color: #d8e2ed;
  color: #10253f;
  box-shadow: 0 18px 46px rgba(8, 28, 52, .12);
}
.r2-pricing .plancard h3,
.r2-pricing .plancard__price strong,
.r2-pricing .plancard__volume strong {
  color: #0a1a2e;
}
.r2-pricing .plancard__aud,
.r2-pricing .plancard__price span,
.r2-pricing .plancard__volume span {
  color: #64748b;
}
.r2-pricing .plancard__volume {
  border-color: #dce5ef;
}
.r2-pricing .plancard__points,
.r2-pricing .plancard__points li {
  color: #52647a;
}
.r2-pricing .plancard--pick {
  border-color: #2f6fed;
  box-shadow:
    0 22px 58px rgba(47, 111, 237, .20),
    0 0 0 1px rgba(47, 111, 237, .35);
  transform: translateY(-7px);
}
.r2-pricing .plancard--pick .tag--info {
  background: #eaf2ff;
  color: #1d4ed8;
  border: 1px solid #bfd4fb;
}
.r2-pricing .plancard .btn-secondary {
  border-color: #9fb0c4;
  background: #ffffff;
  color: #17304d;
}
.r2-pricing .plancard .btn-secondary:hover {
  border-color: #2f6fed;
  background: #f4f8ff;
  color: #1d4ed8;
}
.r2-pricing .plancard__micro {
  color: #77889a;
}
@media (max-width: 1023px) {
  .r2-pricing .plancard--pick {
    transform: none;
  }
}

.r2-faq { padding: 105px 0; background: #f7f8fa; }
.r2-faq__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: start; }
.r2-faq__grid > div:first-child h2 { max-width: 14ch; color: var(--r2-navy) !important; font-size: clamp(32px,4vw,49px); line-height: 1.05; letter-spacing: -.045em; }
.r2-faq__grid > div:first-child > p:last-child { margin-top: 18px; color: var(--r2-muted); font-size: 15px; line-height: 1.65; }
.r2-faq__items { border-top: 1px solid #d9e1e9; }
.r2-faq__items details { border-bottom: 1px solid #d9e1e9; }
.r2-faq__items summary { position: relative; padding: 20px 40px 20px 0; list-style: none; color: #1d3652; font-size: 15px; font-weight: 730; cursor: pointer; }
.r2-faq__items summary::-webkit-details-marker { display: none; }
.r2-faq__items summary::after { content: "+"; position: absolute; right: 4px; top: 18px; color: #6f8093; font-size: 20px; font-weight: 400; }
.r2-faq__items details[open] summary::after { content: "−"; }
.r2-faq__items details p { padding: 0 35px 20px 0; color: #65768a; font-size: 13px; line-height: 1.68; }

.r2-final { padding: 105px 0; background: linear-gradient(135deg,#eaf3ff,#f8fbff); text-align: center; }
.r2-final h2 { max-width: 18ch; margin: 0 auto; color: var(--r2-navy) !important; font-size: clamp(36px,5vw,58px); line-height: 1.02; letter-spacing: -.05em; }
.r2-final > .rail > p:not(.r2-kicker) { max-width: 620px; margin: 18px auto 0; color: #5e7188; font-size: 17px; }
.r2-final .btn { min-height: 50px; margin-top: 29px; border-radius: 10px; font-weight: 760; }
.r2-final small { display: block; margin-top: 11px; color: #76879a; font-size: 11px; }

.r2-page-hero { padding: 102px 0 88px; background: linear-gradient(180deg,#f4f8fe,#fff); text-align: center; }
.r2-page-hero h1 { max-width: 15ch; margin: 0 auto; color: var(--r2-navy) !important; font-size: clamp(44px,6vw,70px); line-height: .99; letter-spacing: -.055em; }
.r2-page-hero > .rail > p:not(.r2-kicker) { max-width: 680px; margin: 22px auto 0; color: #607188; font-size: 17px; line-height: 1.7; }
.r2-page-hero .r2-hero__actions { justify-content: center; }

@media (max-width: 1120px) {
  .r2-hero__grid { grid-template-columns: minmax(0,1fr); gap: 48px; }
  .r2-hero__copy { max-width: 780px; }
  .r2-hero__copy h1 { max-width: 13ch; }
  .r2-hero__visual { max-width: 800px; transform: none; }
  .r2-pain-grid { grid-template-columns: repeat(3,1fr); }
  .r2-pain-grid article:nth-child(n+4) { min-height: 210px; }
  .r2-split, .r2-split--reverse, .r2-morework .r2-split { grid-template-columns: 1fr; gap: 52px; }
  .r2-copy { max-width: 720px; }
  .r2-copy h2 { max-width: 18ch; }
  .r2-field-scene { max-width: 750px; }
  .r2-faq__grid { gap: 50px; }
}

@media (max-width: 760px) {
  .site-header--workflow .inner { min-height: 64px; }
  .r2-hero { padding: 62px 0 62px; }
  .r2-hero__grid { gap: 38px; }
  .r2-hero__copy h1 { max-width: 100%; font-size: clamp(40px,12vw,55px); }
  .r2-hero__copy > p:not(.r2-kicker):not(.r2-micro) { margin-top: 19px; font-size: 16px; }
  .r2-hero__actions { display: grid; grid-template-columns: 1fr; }
  .r2-hero__actions .btn { width: 100%; }
  .r2-micro { font-size: 11px !important; }
  .r2-product { grid-template-columns: 72px minmax(0,1fr); min-height: 380px; border-radius: 15px; }
  .r2-product__nav { padding: 14px 7px; }
  .r2-product__mini-brand { margin: 0 2px 19px; }
  .r2-product__mini-brand b { display: none; }
  .r2-product__nav nav strong { overflow: hidden; padding: 7px 5px; font-size: 7px; text-overflow: ellipsis; }
  .r2-product__nav > small { display: none; }
  .r2-product__canvas { padding: 18px 13px 14px; }
  .r2-product__canvas > header > span { display: none; }
  .r2-task-grid { grid-template-columns: 1fr; gap: 7px; margin-top: 16px; }
  .r2-task-grid article { padding: 10px; }
  .r2-task-grid article:nth-child(n+4) { display: none; }
  .r2-task-grid p { min-height: 0; }
  .r2-mini-journey { margin-top: 12px; padding-inline: 0; }
  .r2-mini-journey span { font-size: 5px; }
  .r2-pain, .r2-flow, .r2-action-first, .r2-capabilities, .r2-field, .r2-morework, .r2-invoice, .r2-audience, .r2-pricing, .r2-faq, .r2-final { padding: 72px 0; }
  .r2-section-head { margin-bottom: 30px; }
  .r2-section-head h2 { max-width: 100%; font-size: 36px; }
  .r2-section-head > p:last-child { font-size: 15px; }
  .r2-pain-grid { grid-template-columns: 1fr; }
  .r2-pain-grid article { min-height: 0; padding: 22px; }
  .r2-pain-grid h3 { margin-top: 16px; }
  .r2-journey { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin: 0 auto; }
  .r2-journey li { grid-template-columns: 43px 1fr; justify-items: start; gap: 14px; padding: 0 0 23px; text-align: left; }
  .r2-journey li > i { top: 43px; bottom: 0; left: 21px; right: auto; width: 1px; height: auto; }
  .r2-journey li > div { padding-top: 4px; }
  .r2-journey small { max-width: none; }
  .r2-copy h2 { max-width: 100%; font-size: 37px; }
  .r2-cap-grid { grid-template-columns: 1fr; }
  .r2-cap__visual { min-height: 230px; padding: 24px; }
  .r2-roof { transform: scale(.82); }
  .r2-field-scene { min-height: 490px; }
  .r2-week-card { width: 100%; top: 0; min-height: 300px; padding: 16px; }
  .r2-week-grid { gap: 4px; }
  .r2-phone-card { right: 12px; width: 185px; min-height: 360px; }
  .r2-morework-flow { align-items: flex-start; flex-direction: column; }
  .r2-morework-flow i { width: 1px; height: 15px; flex: none; margin-left: 11px; }
  .r2-change-card { padding: 21px; }
  .r2-invoice-tabs { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .r2-invoice-tabs::-webkit-scrollbar { display: none; }
  .r2-invoice-tabs span { white-space: nowrap; }
  .r2-invoice-card { grid-template-columns: 1fr; gap: 14px; }
  .r2-invoice-card > div:last-child { grid-template-columns: 1fr; }
  .r2-invoice-card button { width: 100%; min-width: 0; }
  .r2-audience-grid { grid-template-columns: 1fr; }
  .r2-audience-grid article { min-height: 0; }
  .r2-audience-grid h3 { max-width: 100%; margin-top: 16px; }
  .r2-faq__grid { grid-template-columns: 1fr; gap: 38px; }
  .r2-faq__grid > div:first-child h2 { max-width: 100%; font-size: 37px; }
  .r2-final h2 { max-width: 100%; font-size: 42px; }
  .r2-page-hero { padding: 72px 0 66px; }
  .r2-page-hero h1 { max-width: 100%; font-size: 45px; }
}


/* M5.45 conversion details: pricing proof and a compact mobile trial rail. */
.r2-pricing--page { padding-top: 82px; }
.r2-included {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
  align-items: start;
  margin-top: 54px;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}
.r2-included h2 { max-width: 14ch; color: #fff !important; font-size: clamp(28px,3.4vw,42px); line-height: 1.05; }
.r2-included p:not(.r2-kicker) { max-width: 48ch; margin-top: 13px; color: #9fb1c4; line-height: 1.65; }
.r2-included ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.r2-included li { position: relative; padding: 10px 0 10px 25px; border-bottom: 1px solid rgba(255,255,255,.08); color: #c1cfdd; font-size: 13px; line-height: 1.45; }
.r2-included li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: #74b7ff; font-weight: 800; }

.public-mobile-trial { display: none; }

@media (max-width: 760px) {
  .public-workflow { padding-bottom: 76px; }
  .public-mobile-trial {
    position: fixed;
    z-index: 65;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: #145fc5;
    color: #fff;
    box-shadow: 0 16px 42px rgba(10,32,61,.3);
  }
  .public-mobile-trial span { font-size: 14px; font-weight: 790; }
  .public-mobile-trial small { color: #dcecff; font-size: 9.5px; font-weight: 650; text-align: right; }
  .r2-included { grid-template-columns: 1fr; gap: 28px; padding: 23px; }
  .r2-included ul { grid-template-columns: 1fr; }
  .r2-page-hero .r2-micro { text-align: center; }
}


/* M5.45.2 | pricing conversion polish */
.r2-pricing .plancard {
  position: relative;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(8, 28, 52, .13);
}

.r2-pricing .plancard__aud {
  min-height: 42px;
  color: #64748b;
  line-height: 1.5;
}

.r2-pricing .plancard__price {
  margin-top: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dce5ef;
}

.r2-pricing .plancard__price strong {
  display: flex;
  align-items: baseline;
  gap: 0;
  color: #0a1a2e;
  line-height: 1;
}

.r2-pricing .plancard__amount {
  font-size: 42px;
  font-weight: 820;
  letter-spacing: -.04em;
}

.r2-pricing .plancard__period {
  margin: 0 0 3px 3px;
  color: #64748b;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.r2-pricing .plancard__volume {
  display: none;
}

.r2-pricing .plancard__points {
  margin-top: 22px;
}

.r2-pricing .plancard__go {
  width: 100%;
  padding-top: 26px;
}

.r2-pricing .plancard__go .btn {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.r2-pricing .btn-trial-soft {
  border: 1px solid #b9d0f7;
  background: #eaf2ff;
  color: #1d4ed8;
  box-shadow: 0 6px 16px rgba(47, 111, 237, .08);
}

.r2-pricing .btn-trial-soft:hover {
  border-color: #8db4f2;
  background: #dceaff;
  color: #1847c4;
}

.r2-pricing .plancard--pick {
  border-color: #2f6fed;
  box-shadow:
    0 24px 62px rgba(47, 111, 237, .20),
    0 0 0 1px rgba(47, 111, 237, .28);
}

@media (max-width: 760px) {
  .public-workflow {
    padding-bottom: 0;
  }

  .public-mobile-trial {
    display: none !important;
  }

  .r2-pricing .plancard {
    padding: 26px 22px;
  }

  .r2-pricing .plancard__aud {
    min-height: 0;
  }
}

/* M5.45.2.4 | premium mobile login action */
.site-header--workflow .nav-mobile-actions > .btn-ghost[href="/inloggen"] {
  border-color: #d7e1ec;
  background: #f2f6fb;
  color: #16324a !important;
  box-shadow: 0 1px 2px rgba(16, 42, 64, .04);
}

.site-header--workflow .nav-mobile-actions > .btn-ghost[href="/inloggen"]:hover {
  border-color: #c8d6e4;
  background: #eaf1f8;
  color: #102a40 !important;
}

.site-header--workflow .nav-mobile-actions > .btn-ghost[href="/inloggen"]:focus-visible {
  outline: 3px solid rgba(36, 104, 211, .20);
  outline-offset: 2px;
}

/* M5.46.1 — prevent iOS form-focus zoom across the public website without
   disabling the user's ability to pinch-zoom. A focus zoom could persist into
   the next page, which made action-button navigation appear slightly enlarged. */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  a,
  button,
  [role="button"] {
    touch-action: manipulation;
  }
}

/* M5.47 R3 — premium customer quote. */
.quote-doc--premium .quote-doc__intro{margin:28px 0 0;max-width:74ch;color:#3d4d5d;line-height:1.65}.quote-doc__scope{display:grid;gap:24px;margin-top:30px}.quote-doc__work-section{border:1px solid #dfe7ef;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(16,42,64,.03)}.quote-doc__work-heading{padding:17px 20px;border-bottom:1px solid #e8edf2;background:linear-gradient(180deg,#fbfcfe,#f7f9fc);position:relative}.quote-doc__work-heading:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}.quote-doc__work-heading h3{margin:0;font-size:18px;letter-spacing:-.02em;color:#102a40;text-transform:none}.quote-doc__work-lines{display:grid}.quote-doc__work-line{display:grid;grid-template-columns:minmax(260px,2.4fr) repeat(3,minmax(90px,.65fr)) minmax(112px,.8fr);gap:18px;align-items:center;padding:16px 20px;border-bottom:1px solid #edf1f4}.quote-doc__work-copy{display:grid;gap:3px;min-width:0}.quote-doc__work-copy strong{font-size:14px;color:#132c42}.quote-doc__work-copy span,.quote-doc__work-copy small{font-size:12px;color:#667482;line-height:1.45}.quote-doc__work-metric,.quote-doc__work-total{display:grid;gap:3px;text-align:right}.quote-doc__work-metric span,.quote-doc__work-total span{font-size:10.5px;color:#778592;text-transform:uppercase;letter-spacing:.04em}.quote-doc__work-metric strong,.quote-doc__work-total strong{font-size:13px;font-variant-numeric:tabular-nums}.quote-doc__work-total strong{font-size:14px;color:#102a40}.quote-doc__work-subtotal{display:flex;justify-content:flex-end;gap:30px;padding:11px 20px;background:#fbfcfd;font-size:12px;color:#667482}.quote-doc__work-subtotal strong{min-width:100px;text-align:right;color:#20384d;font-variant-numeric:tabular-nums}.quote-doc__total-card{display:flex;justify-content:flex-end;margin-top:24px}.quote-doc__total-card .quote-doc__totals{width:min(440px,100%);margin:0;border:1px solid #dce5ee;border-radius:14px;padding:15px 18px;background:#f8fafc}.quote-doc__total-card .grand{margin-top:7px;padding-top:12px;border-top:1px solid #d8e1e9}.quote-doc__total-card .grand .v{font-size:21px;color:#102a40}.quote-doc__payments{margin-top:28px;border:1px solid #dce6ef;border-radius:16px;background:#f8fbfe;overflow:hidden}.quote-doc__payments-head{padding:18px 20px;border-bottom:1px solid #e3eaf1}.quote-doc__payments-head>span,.quote-doc__options-head>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700}.quote-doc__payments-head h3,.quote-doc__options-head h3{margin:4px 0 3px;font-size:18px;color:#102a40;text-transform:none}.quote-doc__payments-head p,.quote-doc__options-head p{margin:0;color:#667482;font-size:12.5px}.quote-doc__payments-grid{display:grid}.quote-doc__payments-grid article{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:14px 20px;border-bottom:1px solid #e5ebf1}.quote-doc__payments-grid article:last-child{border-bottom:0}.quote-doc__payment-index{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e8f1f9;color:#153f62;font-weight:700}.quote-doc__payments-grid article>div{display:grid;gap:2px}.quote-doc__payments-grid small{color:#71808e}.quote-doc__payment-amount{font-size:15px;color:#102a40;font-variant-numeric:tabular-nums}.quote-doc__payments-note{margin:0;padding:11px 20px;background:#fff;color:#71808e;font-size:11.5px;border-top:1px solid #e7edf2}.quote-doc__options{margin-top:34px}.quote-doc__options-head{margin-bottom:14px}.quote-doc__options .quote-doc__scope{margin-top:0}.quote-doc__options-total{display:flex;justify-content:flex-end;gap:28px;margin-top:12px;font-size:12px}.quote-doc__text-section{margin-top:28px}.quote-doc__text-section h3{font-size:15px;margin:0 0 6px;text-transform:none;letter-spacing:0}.quote-doc__text-section p{margin:0;color:#526273;line-height:1.6}.quote-doc__outro{margin-top:28px}.quote-doc__footer{margin-top:38px;border-top:1px solid var(--line);padding-top:14px}
@media(max-width:780px){.quote-doc__work-line{grid-template-columns:1fr 1fr;gap:12px;padding:15px}.quote-doc__work-copy{grid-column:1/-1}.quote-doc__work-metric,.quote-doc__work-total{text-align:left}.quote-doc__work-total{grid-column:2}.quote-doc__work-subtotal{justify-content:space-between}.quote-doc__payments-grid article{grid-template-columns:30px 1fr}.quote-doc__payment-amount{grid-column:2}.quote-doc__total-card{display:block}.quote-doc__payments{margin-top:22px}}