/* ============================================================
   assessment.css - The Robo Style, assessment application page.
   Token layer is copied verbatim from index.html (lines 39-196)
   so the two pages cannot drift. If a token changes there, it
   must change here. Components below are page-local.
   ============================================================ */
/* ============================================================
   THE ROBO STYLE - static · dotted · orange
   Locked palette: Paper #F2EFE8 · Black #131311 · Orange #FF6B1A
   Yellow #F5A623 second accent, only on explicit request.
   Dark is the HOME look (matches getrubric.app foundations) -
   the :root block below IS the dark palette. Light is the
   [data-theme="light"] override for the toggle.
   ============================================================ */
:root{
  /* DARK (home / default token layer) */
  --paper:#131311;
  --paper-2:#24221C;      /* RoboNuggets dark card surface (2026-08-19 restyle) */
  --ink:#E8E2D2;
  --ink-soft:#B8B2A2;
  --ink-faint:#8D8775;
  --rule:#332E27;
  --accent:#FF6B1A;
  --accent-text:#FF6B1A;
  --accent-soft:#2A1D14;
  --green:#6FBF84;
  /* Second ground. Alternating sections sit on --band instead of --paper so
     the page reads as chapters rather than one endless sheet. It is a shift
     of the SAME ground, not an inversion: every --ink/--rule token stays
     valid on it, so no component needs a per-band colour audit. On dark it
     goes deeper than --paper (true black-ish); on light it goes to pure
     white. --band-rule is the hairline that separates the two grounds. */
  --band:#0A0A09;
  --band-rule:#242220;
  /* Footer ground: fixed, not theme-relative. Declared once here and never
     redeclared in the [data-theme="light"] block, so it stays the same
     charcoal in both themes - the site always closes on the same dark note
     the "over mij" band opens with, instead of flipping with the toggle. */
  --foot-bg:#1C1A16;
  --foot-text:#FAF8F2;
  --foot-soft:#B8B2A2;
  --foot-faint:#8D8775;
  --foot-rule:#332E27;
  /* #plan ground. WAS fixed pale in both themes (same fixed-token pattern as
     --foot-bg above, the other direction). Changed 2026-08-28: holding this
     pale on the dark toggle left the closing CTA as a bright sheet at the end
     of an otherwise dark page - one of four surfaces that made dark theme read
     as a light/dark checkerboard rather than as a dark site. Now theme-
     relative: dark here, and redeclared pale in the [data-theme="light"] block
     below so the light look is unchanged. Deepest ground on the page, so the
     section still lands as a close rather than blending into --paper. */
  --plan-bg:#0A0A09;
  --plan-text:#E8E2D2;
  --plan-soft:#B8B2A2;
  --plan-faint:#8D8775;
  --plan-rule:#332E27;

  --nav-bg:rgba(19,19,17,0);--nav-bg-solid:rgba(19,19,17,.92);
  --shadow-col:rgba(232,226,210,.30);
  /* Shadow for buttons sitting on --inv-bg surfaces. Those surfaces are dark
     on this theme as of 2026-08-28, so this now matches --shadow-col rather
     than opposing it; kept as its own token because on [data-theme="light"]
     the inverted surfaces ARE still dark and genuinely need the opposite of
     that theme's --shadow-col. */
  --shadow-col-inv:rgba(232,226,210,.30);
  --grain:.045;   /* grain is what makes a dark ground read as material, not #111 */
  /* No bloom/glow on orange. The reference site's orange is flat-filled;
     glow made ours read as neon rather than printed. Kept as empty tokens
     so the rules referencing them stay valid. */
  --dot-color:rgba(255,146,84,.10);
  --clock-face-bg:#1C1A16;
  --clock-core-bg:#2A2721;
  --clock-core-border:#5A5446;
  --clock-core-shadow:0 12px 28px -12px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.08);
  --btn-glow:0 0 0 rgba(0,0,0,0);
  --btn-glow-hover:0 0 0 rgba(0,0,0,0);
  --em-glow:none;
  /* "Inverted" surfaces: .story, .offer-stack, .implementation-route--primary.
     These USED to flip opposite the page (light card on the dark home look),
     which is what made dark theme alternate dark/light/dark/light down the
     page. Changed 2026-08-28: on dark they now stay dark and separate by
     ELEVATION instead of inversion - --paper-2's surface sitting above
     --paper, carried by border + shadow + the orange border on the primary
     route, which is how the RoboNuggets reference distinguishes its own
     featured card. The [data-theme="light"] block still flips these to dark
     on the light page, so light theme keeps its inverted accent surfaces. */
  --inv-bg:#24221C;
  --inv-text:#E8E2D2;
  --inv-soft:#B8B2A2;
  --inv-faint:#8D8775;
  --inv-rule:#332E27;
  --inv-rule-2:#2A2620;

  --f-display:'Outfit', -apple-system, sans-serif;
  --f-pixel:'Doto', 'Outfit', monospace;      /* always at ROND 0 - see .num/.sec-num/.stat-n/.price. NOT used for .em (kept in the display face for heading consistency - see .em below) */
  --f-body:'Outfit', -apple-system, sans-serif;
  --f-mono:'Outfit', -apple-system, sans-serif; /* kickers: Outfit 400, letter-spaced */

  /* frame tile: 8px rounded corners (RoboNuggets restyle, 2026-08-19, was square)
     + hard offset shadow. Depth pass (2026-08-28): the hard offset on its own is
     the neobrutalist costume - a sticker on a flat sheet. Pairing it with an
     ambient blur layer is what makes a card read as a LIFTED plane. The ambient
     is kept in its own token because four scopes below (.implementation-route
     --primary, .offer-stack, .story, #plan) redefine --shadow-hard wholesale for
     their own grounds; they append var(--shadow-amb) so none of them silently
     drops back to the flat costume. */
  --shadow-amb:0 18px 38px -16px rgba(0,0,0,.75);
  --shadow-amb-sm:0 10px 22px -12px rgba(0,0,0,.70);
  --shadow-hard:5px 5px 0 var(--shadow-col), var(--shadow-amb);
  --shadow-hard-sm:3px 3px 0 var(--shadow-col), var(--shadow-amb-sm);

  --max:1240px;
  --gutter:clamp(20px,5vw,64px);
  --rad:8px;   /* RoboNuggets restyle (2026-08-19): rounded corners, was 0 */
}

/* LIGHT - toggle override (fallback theme, not the primary look) */
[data-theme="light"]{
  --paper:#F2EFE8;
  --paper-2:#FAF8F2;
  --ink:#1C1A16;   /* RoboNuggets exact light ink (2026-08-19), was #131311 */
  --ink-soft:#4A463C;
  --ink-faint:#6F6A5C;
  --rule:#D8D3C6;
  --accent:#FF6B1A;
  --accent-text:#FF6B1A;  /* main brand orange. NB: this reads ~2.5:1 on paper/paper-2, below the 4.5:1 AA text threshold - a known, deliberate tradeoff, not an oversight. */
  --accent-soft:#FFEADD;
  --green:#2F5D3A;
  --band:#FAF8F2;
  --band-rule:#E7E3D9;
  /* --plan-* is theme-relative as of 2026-08-28 (see the :root note). These
     reclaim the pale closing ground for the light look; without them light
     theme would inherit :root's new dark values. */
  --plan-bg:#FAF8F2;
  --plan-text:#131311;
  --plan-soft:#4A463C;
  --plan-faint:#6F6A5C;
  --plan-rule:#D8D3C6;

  --nav-bg:rgba(242,239,232,0);--nav-bg-solid:rgba(242,239,232,.92);
  --shadow-col:var(--ink);
  --shadow-col-inv:rgba(232,226,210,.30);
  /* Light needs a much softer ambient than dark - on cream, a dark-theme-strength
     blur reads as dirt under the card rather than as lift. */
  --shadow-amb:0 14px 30px -14px rgba(19,19,17,.30);
  --shadow-amb-sm:0 8px 18px -10px rgba(19,19,17,.26);
  --grain:.055;
  --dot-color:rgba(255,104,26,.16);
  --clock-face-bg:#E5DED0;
  --clock-core-bg:#FAF8F2;
  --clock-core-border:#8A8374;
  --clock-core-shadow:0 12px 24px -12px rgba(19,19,17,.42),inset 0 1px 0 rgba(255,255,255,.9);
  --btn-glow:0 0 0 rgba(0,0,0,0);
  --btn-glow-hover:0 0 0 rgba(0,0,0,0);
  --em-glow:none;
  /* on light, the inverted band flips to dark */
  --inv-bg:#1C1A16;
  --inv-text:#FAF8F2;
  --inv-soft:#B8B2A2;
  --inv-faint:#8D8775;
  --inv-rule:#332E27;
  --inv-rule-2:#26221C;
}


/* ---- base ---------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:1.0625rem;line-height:1.6;overflow-x:hidden;position:relative;
}
/* paper grain - same fixed overlay as index.html */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
section{padding:clamp(64px,8vw,104px) 0;position:relative}
.rule-top{border-top:1px solid var(--rule)}
.band{background:var(--band);border-top:1px solid var(--band-rule)}

h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;line-height:1.04}
h1{font-size:clamp(2.4rem,3.5vw,3.1rem);letter-spacing:-.02em;line-height:1.06}
h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.15;letter-spacing:-.015em}
.num,.sec-num,.price{font-variation-settings:"ROND" 0,"wght" 900}
.em{font-family:var(--f-display);font-weight:800;color:var(--accent-text);white-space:nowrap}
p{max-width:62ch}
.lede{font-size:clamp(1.05rem,1.35vw,1.18rem);line-height:1.6;color:var(--ink-faint)}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.tag{color:var(--ink-faint)}
.num{font-family:var(--f-pixel);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sec-head{display:flex;gap:14px;align-items:center;margin-bottom:40px}
.sec-num{font-family:var(--f-pixel);font-size:1.05rem;color:var(--accent-text);font-weight:900;letter-spacing:.06em}
.sec-head .tag{font-weight:600;letter-spacing:.26em}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#1C1A16;padding:10px 16px;z-index:200;border-radius:var(--rad)}
.skip:focus{left:var(--gutter);top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- nav ----------------------------------------------------------- */
/* Transparent, same as the home page. This page has no inverted band for the
   nav to cross, so no recolouring is needed here. */
nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid transparent;}

@media(prefers-reduced-motion:reduce){nav{transition:none}}
.nav-in{max-width:var(--max);margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;gap:20px}
.logo{display:inline-flex;align-items:center;gap:.42em;font-family:var(--f-display);font-size:1.15rem;letter-spacing:.01em;text-decoration:none;color:var(--ink);white-space:nowrap;text-transform:uppercase;font-weight:800}
.logo-mark{flex:none;width:1.42em;height:1.42em;display:block}
.logo-w{display:inline-block}
.logo-w span{color:var(--accent-text);font-weight:400;letter-spacing:.03em}
.nav-actions{margin-left:auto;display:flex;gap:14px;align-items:center}
.nav-back{color:var(--ink-faint);text-decoration:none;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:color .2s}
.nav-back:hover{color:var(--accent)}
/* Compact nav (2026-09-26): below 860px the full row (two links + CTA + theme
   + lang) no longer fits, so it collapses into the same hamburger + drop-down
   menu the home page uses. Top row becomes logo + hamburger; the links, the CTA
   tile and the theme/lang controls all move into the menu. Markup and values
   mirror index.html's .menu-btn / .mobile-menu so the three pages behave alike. */
.menu-btn{display:none}
.mobile-menu{display:none}
.mobile-menu-utils{display:none}
@media(max-width:860px){
  .nav-back,.nav-actions .btn-sm,.nav-actions .util-ctrl{display:none}
  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;flex:none;
    background:var(--paper-2);color:var(--ink);
    border:2px solid var(--ink);border-radius:var(--rad);
    cursor:pointer;transition:background .15s,color .15s,transform .12s;
  }
  .menu-btn:hover{background:var(--accent);color:#1C1A16}
  .menu-btn:active{transform:scale(.94)}
  .menu-btn .bar{display:block;width:16px;height:2px;background:currentColor;position:relative}
  .menu-btn .bar::before,.menu-btn .bar::after{content:'';position:absolute;left:0;width:16px;height:2px;background:currentColor;transition:transform .2s}
  .menu-btn .bar::before{top:-5px}
  .menu-btn .bar::after{top:5px}
  .menu-btn[aria-expanded="true"] .bar{background:transparent}
  .menu-btn[aria-expanded="true"] .bar::before{transform:translateY(5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .bar::after{transform:translateY(-5px) rotate(-45deg)}
  .mobile-menu{
    display:grid;grid-template-columns:1fr;grid-template-rows:0fr;
    background:var(--nav-bg-solid);backdrop-filter:blur(12px);
    border-bottom:0 solid var(--rule);
    transition:grid-template-rows .25s ease,border-color .25s ease;
  }
  .mobile-menu.open{grid-template-rows:1fr;border-bottom-width:1px}
  .mobile-menu-in{overflow:hidden;min-height:0;display:flex;flex-direction:column;padding:0 var(--gutter)}
  .mobile-menu.open .mobile-menu-in{padding:6px var(--gutter) 18px}
  .mobile-menu a{
    color:var(--ink-soft);text-decoration:none;font-size:.95rem;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;
    padding:14px 0;border-top:1px solid var(--rule);
  }
  .mobile-menu a:first-child{border-top:none}
  .mobile-menu a:hover{color:var(--accent)}
  .mobile-menu .mobile-cta{
    display:flex;align-items:center;justify-content:space-between;
    margin:10px 0 16px;padding:15px 16px;border:1px solid var(--ink);border-radius:var(--rad);
    background:var(--accent);color:#111;font-size:.88rem;font-weight:700;
    letter-spacing:0;text-transform:none;box-shadow:none;
    transition:transform .12s ease,box-shadow .12s ease;
  }
  .mobile-menu .mobile-cta:hover{color:#111;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
  .mobile-menu-utils{display:flex;align-items:center;gap:14px;padding-top:14px;border-top:1px solid var(--rule)}
}
@media (hover:none),(pointer:coarse){.mobile-menu .mobile-cta:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-transparency:reduce){.mobile-menu{background:var(--paper);backdrop-filter:none}}
.lang{display:flex;border:2px solid var(--ink);border-radius:var(--rad);overflow:hidden}
.lang button{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;font-weight:600;background:none;border:none;padding:6px 9px;cursor:pointer;color:var(--ink-faint);transition:background-color .2s,color .2s}
.lang button.on{background:var(--ink);color:var(--paper)}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;background:var(--paper-2);color:var(--ink);border:2px solid var(--ink);border-radius:var(--rad);font-size:1rem;line-height:1;cursor:pointer;transition:background .15s,color .15s}
/* Touch targets (2026-09-11): on a coarse pointer the header controls grow to
   the 44px fingertip target. Mouse and trackpad layouts keep the tighter nav
   sizing, which is what the design was tuned against. The language pair is the
   reason this matters: NL and EN sit adjacent, so a near-miss on a phone
   silently switches a Dutch visitor to English. */
@media (pointer:coarse){
  .theme-btn{width:44px;height:44px;font-size:1.15rem}
  .lang button{padding:15px 16px;font-size:.7rem}
}

.theme-btn:hover{background:var(--accent);color:#1C1A16}

/* ---- buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#1C1A16;text-decoration:none;padding:16px 26px;border-radius:var(--rad);font-weight:700;font-size:.97rem;border:1.5px solid var(--ink);font-family:var(--f-body);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;box-shadow:var(--btn-glow)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow-col),var(--btn-glow-hover)}
.btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shadow-col),var(--btn-glow)}
.btn[disabled]{opacity:.55;cursor:progress;transform:none;box-shadow:none}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.97rem;padding:16px 4px;border-bottom:1.5px solid var(--ink);transition:color .2s,border-color .2s}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent)}
.btn-sm{background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--rad);font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .12s,color .12s,transform .12s,box-shadow .12s}
.btn-sm:hover{background:var(--accent);color:#1C1A16;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow-col)}
@media(max-width:520px){.btn,.btn-ghost{width:100%;justify-content:center}}

/* ---- hero ---------------------------------------------------------- */
.a-hero{padding-top:clamp(48px,6vw,86px)}
.a-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,68px);align-items:start}
@media(max-width:900px){.a-hero-grid{grid-template-columns:1fr}}
.a-hero h1{margin:14px 0 18px}
.a-hero .lede{max-width:56ch}
.a-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:30px}
.a-guarantee{display:flex;gap:10px;align-items:flex-start;margin-top:22px;font-size:.92rem;color:var(--ink-soft);max-width:52ch}
.a-guarantee::before{content:'';flex:none;width:9px;height:9px;margin-top:.5em;background:var(--accent);border-radius:2px}

/* facts card - elevation, not inversion (matches .offer-stack on index) */
.a-facts{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--rad);padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-hard-sm)}
.a-facts .price{font-family:var(--f-pixel);font-size:clamp(2.4rem,4.4vw,3.2rem);color:var(--accent-text);line-height:1;display:block}
.a-facts .price-note{display:block;margin-top:8px;font-size:.82rem;color:var(--ink-faint)}
.a-fact-list{list-style:none;margin-top:22px;border-top:1px solid var(--rule)}
.a-fact-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:.92rem}
.a-fact-list b{font-weight:600;color:var(--ink)}
.a-fact-list span{color:var(--ink-faint);text-align:right}

/* ---- steps --------------------------------------------------------- */
.a-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
@media(max-width:860px){.a-steps{grid-template-columns:1fr}}
.a-step{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--rad);padding:clamp(22px,2.4vw,28px);transition:transform .16s ease,box-shadow .16s ease}
.a-step:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.a-step .sec-num{display:block;margin-bottom:12px}
.a-step h3{font-size:1.2rem;margin-bottom:10px}
.a-step p{font-size:.94rem;color:var(--ink-faint);max-width:none}
/* Step illustrations (2026-09-25). Inline SVG drawn from the theme tokens,
   so both themes stay correct without separate image files. The figure
   bleeds to the card edge by cancelling the card padding. */
.a-step--fig{--pad:clamp(22px,2.4vw,28px);padding-top:0;overflow:hidden}
.a-fig{margin:0 calc(-1*var(--pad)) var(--pad);background:var(--paper);border-bottom:1px solid var(--rule)}
.a-ill{display:block;width:100%;height:auto;aspect-ratio:360/200}
.a-fig-cap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;padding:12px 14px;border-top:1px solid var(--rule);font-size:.78rem;line-height:1.3;color:var(--ink-soft);text-align:center}
.a-fig-arr{font-style:normal;color:var(--accent-text)}
.a-ill .i-dot{fill:var(--rule)}
.a-ill .i-card{fill:var(--paper-2);stroke:var(--rule);stroke-width:1.5}
.a-ill .i-shadow{fill:var(--shadow-col)}
.a-ill .i-rule{stroke:var(--rule);stroke-width:1.5}
.a-ill .i-cell{fill:var(--rule)}
.a-ill .i-leak{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
.a-ill .i-faint{fill:var(--ink-faint);opacity:.45}
.a-ill .i-ink{fill:var(--ink)}
.a-ill .i-ink-bar{fill:var(--ink);opacity:.8}
.a-ill .i-on-ink{fill:var(--paper)}
.a-ill .i-acc{fill:var(--accent)}
.a-ill .i-tint{fill:var(--accent-soft)}
.a-ill .i-ring{fill:none;stroke:var(--accent);stroke-width:2}
.a-ill .i-handle{stroke:var(--accent);stroke-width:11;stroke-linecap:round}
.a-ill .i-hand{stroke:var(--paper);stroke-width:3;stroke-linecap:round}
.a-ill .i-hand-acc{stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.a-ill .i-dash{stroke:var(--ink-faint);stroke-width:1.2;stroke-dasharray:3 4;opacity:.7}
.a-ill .i-dash-ring{fill:none;stroke:var(--ink-faint);stroke-width:1.2;stroke-dasharray:2 5;opacity:.6}
.a-ill .i-dash-acc{stroke:var(--accent);stroke-width:2;stroke-dasharray:3 4;fill:none}
.a-ill .i-axis{stroke:var(--ink);stroke-width:1.5}
.a-ill .i-arrow{stroke:var(--accent);stroke-width:2.5}
.a-ill .i-cross{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.a-ill .i-cross-faint{stroke:var(--ink-faint);stroke-width:2;stroke-linecap:round}
.a-ill .i-check{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ---- deliverables -------------------------------------------------- */
.a-deliver{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,4vw,60px);align-items:start}
@media(max-width:900px){.a-deliver{grid-template-columns:1fr}}
.a-items{list-style:none;counter-reset:ai}
.a-items li{counter-increment:ai;display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--rule)}
.a-items li::before{content:counter(ai,decimal-leading-zero);font-family:var(--f-pixel);font-variation-settings:"ROND" 0,"wght" 900;color:var(--accent-text);font-size:.95rem;line-height:1.7}
.a-items b{display:block;font-weight:700;font-size:1.02rem;margin-bottom:4px}
.a-items span{color:var(--ink-faint);font-size:.94rem}
/* Refund promise. Same family as .a-credit, one step stronger: heavier border
   and the label on its own line, because it is the bigger commitment. */
.a-refund{margin-top:26px;background:var(--accent-soft);border:1.5px solid var(--accent);border-radius:var(--rad);padding:18px 20px;font-size:.92rem}
.a-refund b{display:block;margin-bottom:3px;color:var(--accent-text);font-weight:700}
.a-credit{margin-top:26px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--rad);padding:18px 20px;font-size:.92rem}
.a-credit b{display:block;margin-bottom:4px}
/* Merged in from the homepage (2026-09-13): the two-step programme line under the
   hero lede, and the scope note that implementation is optional and outcomes are
   not guaranteed. Quiet by design: fine print, not a second headline. */
.a-twosteps{margin-top:1.1em}
.a-note{margin-top:32px;font-size:.86rem;line-height:1.6;color:var(--ink-soft)}
.a-note b{color:var(--ink);font-weight:700}
/* link from the scope note to /implementatie, styled like the homepage .faq-cta */
.a-note-link{display:inline-block;color:var(--ink);font-weight:600;text-decoration:none;padding:4px 0 2px;border-bottom:1.5px solid var(--rule);transition:color .2s,border-color .2s}
.a-note-link:hover,.a-note-link:focus-visible{color:var(--accent-text);border-color:var(--accent)}

/* ---- form ---------------------------------------------------------- */
.a-form-head{max-width:64ch;margin-bottom:clamp(30px,4vw,46px)}
.a-form{max-width:760px;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--rad);padding:clamp(24px,3.4vw,44px);box-shadow:var(--shadow-hard-sm)}
.fieldset{border:none;margin-bottom:34px}
.fieldset:last-of-type{margin-bottom:26px}
.fieldset legend{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.f-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.f-row .field{margin-bottom:0}
.field label{font-size:.9rem;font-weight:600;line-height:1.4}
.field .hint{font-size:.82rem;color:var(--ink-faint);font-weight:400;white-space:nowrap}
.field .req{color:var(--accent-text)}
.field input,.field textarea{
  font-family:var(--f-body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--rule);border-radius:var(--rad);
  padding:13px 15px;width:100%;transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#D93A2B}
.field .err{font-size:.82rem;color:#D93A2B;font-weight:600}
.field .err[hidden]{display:none}
.q-num{font-family:var(--f-pixel);font-variation-settings:"ROND" 0,"wght" 900;color:var(--accent-text);margin-right:8px}

/* radio pills for Q1 */
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:640px){.choices{grid-template-columns:1fr}}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:block;padding:14px 16px;border:1.5px solid var(--rule);border-radius:var(--rad);background:var(--paper);font-size:.94rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.choice input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.choice span:hover{border-color:var(--accent)}

/* honeypot - off-screen, hidden from AT and from tab order */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.88rem;color:var(--ink-soft);margin-bottom:22px}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent)}
.consent a{color:var(--accent-text)}
.form-foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.form-note{font-size:.85rem;color:var(--ink-faint);max-width:40ch}
.form-status{margin-top:18px;font-size:.92rem;font-weight:600}
.form-status[hidden]{display:none}
.form-status.is-error{color:#D93A2B}

/* success state */
.a-success{background:var(--paper-2);border:1px solid var(--accent);border-radius:var(--rad);padding:clamp(28px,3.6vw,44px);max-width:760px;box-shadow:var(--shadow-hard-sm)}
.a-success[hidden]{display:none}
.a-success h3{margin-bottom:12px}
.a-success p{color:var(--ink-faint)}
.a-success ol{margin:20px 0 0 20px;color:var(--ink-soft);font-size:.94rem}
.a-success li{margin-bottom:8px}

/* ---- faq ----------------------------------------------------------- */
.a-faq{max-width:820px}
.a-faq details{border-top:1px solid var(--rule);padding:18px 0}
.a-faq details:last-child{border-bottom:1px solid var(--rule)}
.a-faq summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:18px}
.a-faq summary::-webkit-details-marker{display:none}
.a-faq summary::after{content:'+';color:var(--accent-text);font-family:var(--f-pixel);font-variation-settings:"ROND" 0,"wght" 900;flex:none}
.a-faq details[open] summary::after{content:'\2212'}
.a-faq details p{margin-top:12px;color:var(--ink-faint);font-size:.95rem}

/* ---- footer -------------------------------------------------------- */
footer{background:var(--foot-bg);border-top:1px solid var(--foot-rule);padding:44px 0 60px;font-size:.88rem;color:var(--foot-faint);position:relative}
footer::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(250,248,242,.08) 1.1px,transparent 1.1px);background-size:6px 6px}
.foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer .logo{color:var(--foot-text)}
footer p{color:var(--foot-soft)}
footer .tag{color:var(--foot-faint)}
footer a{color:var(--foot-soft);text-decoration:none;border-bottom:1px solid var(--foot-rule)}
footer a:hover{color:var(--accent);border-color:var(--accent)}
.foot-bottom{margin-top:34px;padding-top:18px;border-top:1px solid var(--foot-rule);font-size:.78rem;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
/* Footer tap targets (2026-09-13), same fix as index.html: the links were 19-21px
   tall, under the 24px WCAG 2.2 floor. Transparent overlay grows the hit area only. */
.foot-contact{line-height:2}
.foot-contact a,.foot-legal a{position:relative}
.foot-contact a::after,.foot-legal a::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:24px}

/* ===== implementatie.html (2026-09-13) =====
   Built from this stylesheet's existing components; only what the page needs
   beyond the assessment page lives here. */
.a-steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1060px){.a-steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.a-steps--4{grid-template-columns:1fr}}
.i-route-h{margin-top:12px;font-weight:700;font-size:1.08rem;line-height:1.35;color:var(--ink)}
.i-route-p{margin-top:8px;font-size:.92rem;color:var(--ink-faint)}
.a-fact-list a{color:var(--accent-text);font-weight:600;text-decoration:none;text-align:right}
.a-fact-list a:hover{text-decoration:underline}
.i-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
@media(max-width:860px){.i-modes{grid-template-columns:1fr}}
/* Flex column so both buttons sit on the same baseline, like the homepage modes. */
.i-mode{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--rad);padding:clamp(22px,2.6vw,32px);box-shadow:var(--shadow-hard-sm)}
.i-mode-n{font-size:1.18rem;line-height:1.3;margin-bottom:10px}
.i-mode-for{font-size:.94rem;color:var(--ink-faint);margin-bottom:14px}
.i-mode-price{font-size:.92rem;color:var(--ink-soft);padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:16px}
.i-mode-price .num{color:var(--accent-text);font-size:1.25em}
.i-mode-price .num--was{color:var(--ink-faint);text-decoration:line-through;font-size:1em}
/* AI Concierge price: same pixel-face headline figure as the /assessment price card */
.i-mode-price--big{padding:16px 0 14px}
.i-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.i-mode-price--big .price{font-family:var(--f-pixel);font-size:clamp(2.4rem,4.4vw,3.2rem);color:var(--accent-text);line-height:1}
.i-price-per{font-size:.95rem;font-weight:600;color:var(--ink)}
.i-price-note{display:block;margin-top:8px;font-size:.82rem;color:var(--ink-faint)}
.i-price-was{font-family:var(--f-pixel);font-variation-settings:"ROND" 0,"wght" 900;letter-spacing:.04em;color:var(--ink-faint)}
.i-mode-list{list-style:none;margin:0 0 22px;display:grid;gap:10px}
.i-mode-list li{position:relative;padding-left:18px;font-size:.94rem;color:var(--ink-soft)}
.i-mode-list li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--accent);border-radius:2px}
.i-mode-cta{margin-top:auto;align-self:flex-start}
.i-credit{margin-top:clamp(22px,2.8vw,32px)}
.i-build-time{display:block;margin-top:4px;font-size:.84rem;color:var(--accent-text)}
.i-builds-link{margin-top:18px}
.i-close{text-align:left}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}