/* ============================================================
   SNEL OP DE KAART — ATELIER · COMPONENTEN
   Vijf interactieve componenten in de atelier-taal. Laadt NAAST
   atelier.css (tokens, fonts, knoppen, header, reveals staan daar).
   Hier alleen het component-specifieke: commandopalet, planner,
   prijs-configurator, meldingen en de voor-en-na-schuif.
   ============================================================ */

/* ---------- aanvullende tokens ---------- */
:root{
  --sage-deep:var(--success);
  --amber:var(--warning);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-reduced-motion:reduce){ :root{ --spring:var(--ease); } }
:focus-visible{ outline:2px solid var(--plum); outline-offset:3px; border-radius:3px; }

/* ---------- commandopalet-trigger in de header ---------- */
.cmd-trigger{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--paper-card); border:1px solid var(--line-strong);
  border-radius:999px; padding:9px 12px 9px 16px; cursor:pointer;
  color:var(--ink-soft); font-family:var(--sans); font-size:14px; min-width:210px;
  transition:border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.cmd-trigger:hover{ border-color:var(--plum); color:var(--ink); }
.cmd-trigger svg{ width:15px; height:15px; flex:none; opacity:.8; }
.cmd-trigger .ct-label{ flex:1; text-align:left; white-space:nowrap; }
.cmd-trigger kbd{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line-strong); border-radius:5px; padding:3px 7px;
}
@media (max-width:1080px){ .cmd-trigger .ct-label,.cmd-trigger kbd{ display:none; } .cmd-trigger{ min-width:0; padding:10px; } }

/* ---------- intro (showcasepagina) ---------- */
.intro{ padding:clamp(52px,7vw,104px) 0 clamp(30px,4vw,54px); }
.intro h1{ font-size:clamp(44px,6.4vw,86px); line-height:1.02; margin:0 0 24px; max-width:16ch; }
.intro-lead{ max-width:56ch; color:var(--ink-soft); font-size:18px; margin:0 0 30px; }
.intro-cta{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.cmd-note{ color:var(--ink-soft); font-size:14px; }
.cmd-note kbd{ font-family:var(--mono); font-size:11px; background:var(--paper-card); border:1px solid var(--line-strong); border-radius:5px; padding:3px 8px; color:var(--ink); }

/* index-rijtje van de vijf */
.legend{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line-strong); }
.legend a{ text-decoration:none; color:var(--ink); padding:18px 16px 18px 0; border-right:1px solid var(--line); display:block; transition:padding-left var(--dur-fast) var(--ease), background var(--dur-fast); }
.legend a:last-child{ border-right:0; }
.legend a:hover{ background:var(--paper-deep); padding-left:12px; }
.legend .lg-num{ color:var(--plum); font-family:var(--mono); font-size:11px; letter-spacing:.14em; display:block; margin-bottom:10px; }
.legend .lg-name{ font-family:var(--serif); font-size:19px; line-height:1.15; }
@media (max-width:860px){ .legend{ grid-template-columns:1fr 1fr; } .legend a{ border-bottom:1px solid var(--line); } }
@media (max-width:480px){ .legend{ grid-template-columns:1fr; } }

/* ---------- ingelijst paneel met hoekvinken ---------- */
.panel{ position:relative; background:var(--paper-deep); border:1px solid var(--line); border-radius:10px; padding:clamp(20px,3vw,36px); }
.panel .tick{ position:absolute; width:13px; height:13px; border-color:var(--line-strong); border-style:solid; border-width:0; pointer-events:none; }
.panel .tick:nth-of-type(1){ top:9px; left:9px; border-top-width:1px; border-left-width:1px; }
.panel .tick:nth-of-type(2){ top:9px; right:9px; border-top-width:1px; border-right-width:1px; }
.panel .tick:nth-of-type(3){ bottom:9px; left:9px; border-bottom-width:1px; border-left-width:1px; }
.panel .tick:nth-of-type(4){ bottom:9px; right:9px; border-bottom-width:1px; border-right-width:1px; }

/* ============================================================
   01 · COMMANDOPALET
   ============================================================ */
.cmd-overlay{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:flex-start; justify-content:center;
  padding:clamp(60px,12vh,140px) 20px 20px;
  background:color-mix(in srgb, var(--plum-deep) 40%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--dur-fast) var(--ease);
}
.cmd-overlay.open{ display:flex; opacity:1; }
.cmd-dialog{
  width:min(620px,100%); background:var(--paper); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:14px; overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(32,26,19,.7), 0 2px 0 rgba(32,26,19,.05);
  transform:translateY(-10px) scale(.98); opacity:0;
  transition:transform var(--dur-fast) var(--spring), opacity var(--dur-fast) var(--ease);
}
.cmd-overlay.open .cmd-dialog{ transform:none; opacity:1; }
.cmd-search{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.cmd-search svg{ width:18px; height:18px; color:var(--ink-soft); flex:none; }
.cmd-search input{ flex:1; border:0; background:none; outline:none; color:var(--ink); font-family:var(--serif); font-size:24px; letter-spacing:0; }
.cmd-search input::placeholder{ color:color-mix(in srgb, var(--ink-soft) 60%, transparent); }
.cmd-search .esc{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:5px; padding:4px 8px; }
.cmd-results{ max-height:min(52vh,420px); overflow-y:auto; padding:8px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.cmd-group-label{ font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); padding:14px 12px 8px; }
.cmd-item{ display:flex; align-items:center; gap:14px; width:100%; padding:12px 12px; border-radius:8px; cursor:pointer; position:relative; text-align:left; border:0; background:none; color:inherit; font-family:var(--sans); font-size:15.5px; }
.cmd-item::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--plum); transform:scaleY(0); transform-origin:center; transition:transform var(--dur-fast) var(--ease); }
.cmd-item.active{ background:var(--paper-deep); }
.cmd-item.active::before{ transform:scaleY(1); }
.cmd-ico{ width:34px; height:34px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:var(--paper-card); color:var(--plum); }
.cmd-ico svg{ width:16px; height:16px; }
.cmd-item.active .cmd-ico{ border-color:var(--plum); }
.cmd-body{ flex:1; min-width:0; }
.cmd-body .t{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd-body .s{ display:block; color:var(--ink-soft); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd-item .hint{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); flex:none; opacity:0; transition:opacity var(--dur-fast); }
.cmd-item.active .hint{ opacity:1; }
.cmd-item mark{ background:transparent; color:var(--plum); font-style:italic; font-family:var(--serif); font-size:1.05em; }
.cmd-empty{ padding:36px 12px; text-align:center; color:var(--ink-soft); }
.cmd-empty .serif-it{ font-size:26px; display:block; margin-bottom:6px; }
.cmd-foot{ display:flex; gap:20px; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--line); background:var(--paper-card); }
.cmd-foot span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-soft); display:inline-flex; align-items:center; gap:7px; }
.cmd-foot kbd{ font-family:var(--mono); background:var(--paper); border:1px solid var(--line-strong); border-radius:4px; padding:2px 6px; font-size:10px; color:var(--ink); }

/* ============================================================
   02 · AFSPRAAKPLANNER
   ============================================================ */
.book{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,3.5vw,52px); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-head h3{ font-family:var(--serif); font-size:26px; }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{ width:38px; height:38px; border-radius:8px; border:1px solid var(--line-strong); background:var(--paper-card); color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.cal-nav button:hover:not([disabled]){ border-color:var(--plum); color:var(--plum); }
.cal-nav button:active:not([disabled]){ transform:scale(.94); }
.cal-nav button[disabled]{ opacity:.35; cursor:not-allowed; }
.cal-nav svg{ width:15px; height:15px; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.cal-dow span{ text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:6px 0; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-grid.turn-in{ animation:calTurn var(--dur-fast) var(--ease); }
@keyframes calTurn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.cal-cell{ aspect-ratio:1; }
.cal-day{ width:100%; height:100%; border:1px solid transparent; border-radius:9px; background:none; color:var(--ink); cursor:pointer; font-family:var(--sans); font-size:15px; font-variant-numeric:tabular-nums; position:relative; transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--spring); }
.cal-day:hover:not([disabled]):not([aria-pressed="true"]){ background:var(--paper-card); border-color:var(--line-strong); }
.cal-day[disabled]{ color:color-mix(in srgb, var(--ink-soft) 45%, transparent); cursor:not-allowed; text-decoration:line-through; text-decoration-thickness:1px; }
.cal-day.has-slots::after{ content:""; position:absolute; bottom:7px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--sage); }
.cal-day[aria-pressed="true"]{ background:var(--plum); color:var(--paper); border-color:var(--plum); transform:scale(1.04); }
.cal-day[aria-pressed="true"].has-slots::after{ background:var(--rose); }
.slots-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.slots-head .lbl{ color:var(--plum); }
.slots-head .sel-date{ font-family:var(--serif); font-size:20px; }
.slot-empty{ color:var(--ink-soft); border:1px dashed var(--line-strong); border-radius:10px; padding:28px 20px; text-align:center; font-size:14.5px; }
.slot-group{ margin-bottom:18px; }
.slot-group > .mono{ display:block; color:var(--ink-soft); margin-bottom:10px; }
.slot-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; }
.slot{ border:1px solid var(--line-strong); border-radius:999px; background:var(--paper-card); color:var(--ink); font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; padding:11px 6px; cursor:pointer; text-align:center; transition:border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--spring); }
.slot:hover:not([disabled]):not([aria-pressed="true"]){ border-color:var(--plum); color:var(--plum); transform:translateY(-2px); }
.slot[disabled]{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.slot[aria-pressed="true"]{ background:var(--plum); border-color:var(--plum); color:var(--paper); transform:translateY(-2px); }
.slot.stagger{ animation:slotIn var(--dur-fast) var(--ease) both; animation-delay:calc(var(--si,0) * 34ms); }
@keyframes slotIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.book-summary{ grid-column:1 / -1; margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line-strong); padding-top:22px; }
.bs-copy .mono{ color:var(--plum); display:block; margin-bottom:6px; }
.bs-copy strong{ font-family:var(--serif); font-weight:400; font-size:23px; }
.bs-copy .bs-when{ color:var(--ink-soft); }
@media (max-width:900px){ .book{ grid-template-columns:1fr; } }

/* ============================================================
   03 · PRIJS-CONFIGURATOR
   ============================================================ */
.cfg{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr); gap:clamp(24px,3.5vw,56px); align-items:start; }
.cfg-seg{ display:inline-flex; background:var(--paper-card); border:1px solid var(--line-strong); border-radius:999px; padding:4px; position:relative; margin-bottom:26px; }
.cfg-seg button{ position:relative; z-index:1; border:0; background:none; cursor:pointer; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); padding:9px 18px; border-radius:999px; transition:color var(--dur-fast); }
.cfg-seg button[aria-selected="true"]{ color:var(--paper); }
.cfg-seg .seg-pill{ position:absolute; z-index:0; top:4px; bottom:4px; border-radius:999px; background:var(--plum); transition:left var(--dur-fast) var(--spring), width var(--dur-fast) var(--spring); }
.cfg-block{ border-top:1px solid var(--line); padding:22px 0; }
.cfg-block:first-of-type{ border-top:0; }
.cfg-block > .mono{ color:var(--ink-soft); display:block; margin-bottom:16px; }
.slider-wrap{ display:flex; align-items:center; gap:20px; }
.slider-wrap .sw-val{ font-family:var(--serif); font-size:40px; line-height:1; min-width:2.4ch; text-align:right; font-variant-numeric:tabular-nums; }
.slider-wrap .sw-val small{ font-family:var(--serif); font-style:italic; color:var(--plum); font-size:.42em; margin-left:2px; }
.rng{ -webkit-appearance:none; appearance:none; flex:1; height:2px; background:var(--line-strong); border-radius:2px; outline:none; }
.rng::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--paper); border:1px solid var(--plum); box-shadow:0 0 0 5px color-mix(in srgb, var(--plum) 16%, transparent); cursor:grab; transition:transform var(--dur-fast) var(--spring); }
.rng::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.12); }
.rng::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--paper); border:1px solid var(--plum); box-shadow:0 0 0 5px color-mix(in srgb, var(--plum) 16%, transparent); cursor:grab; }
.slider-hint{ color:var(--ink-soft); font-size:13px; margin:12px 0 0; }
.mods{ list-style:none; margin:0; padding:0; }
.mod{ display:flex; align-items:center; gap:16px; padding:15px 0; border-top:1px solid var(--line); cursor:pointer; }
.mod:first-child{ border-top:0; }
.mod-txt{ flex:1; }
.mod-txt b{ font-weight:500; }
.mod-txt small{ display:block; color:var(--ink-soft); font-size:13.5px; margin-top:2px; }
.mod-price{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--plum); white-space:nowrap; }
.mod--unavailable{ cursor:not-allowed; background:rgba(184,50,79,.045); }
.mod--unavailable .mod-price{ max-width:10rem; white-space:normal; text-align:right; }
.sw{ --w:46px; --h:26px; position:relative; width:var(--w); height:var(--h); flex:none; }
.sw input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.sw .track{ position:absolute; inset:0; background:var(--paper-card); border:1px solid var(--line-strong); border-radius:999px; transition:background var(--dur-fast), border-color var(--dur-fast); }
.sw .knob{ position:absolute; top:3px; left:3px; width:calc(var(--h) - 8px); height:calc(var(--h) - 8px); background:var(--ink-soft); border-radius:50%; transition:transform var(--dur-fast) var(--spring), background var(--dur-fast); }
.sw input:checked ~ .track{ background:var(--plum); border-color:var(--plum); }
.sw input:checked ~ .knob{ transform:translateX(calc(var(--w) - var(--h))); background:var(--paper); }
.sw input:focus-visible ~ .track{ outline:2px solid var(--plum); outline-offset:2px; }
.cfg-bill{ position:sticky; top:96px; background:var(--paper-card); border:1px solid var(--line); border-radius:12px; padding:clamp(22px,2.6vw,30px); }
.cfg-bill .p-label{ color:var(--plum); display:block; margin-bottom:18px; }
.bill-total{ font-family:var(--serif); font-size:clamp(52px,6vw,74px); line-height:1; font-variant-numeric:tabular-nums; }
.bill-total .cur{ font-size:.42em; vertical-align:.55em; color:var(--ink-soft); margin-right:2px; }
.bill-sub{ color:var(--ink-soft); margin:8px 0 0; }
.bill-sub b{ color:var(--plum); font-weight:500; }
.bill-lines{ list-style:none; margin:22px 0 0; padding:22px 0 0; border-top:1px solid var(--line); display:grid; gap:11px; }
.bill-lines li{ display:flex; justify-content:space-between; gap:16px; font-size:14.5px; color:var(--ink-soft); }
.bill-lines li span:last-child{ font-family:var(--mono); font-size:12.5px; color:var(--ink); white-space:nowrap; }
.bill-lines li.muted{ opacity:.5; }
.cfg-bill .btn{ width:100%; justify-content:center; margin-top:24px; }
@media (max-width:900px){ .cfg{ grid-template-columns:1fr; } .cfg-bill{ position:static; } }

/* ============================================================
   04 · MELDINGEN (TOASTS)
   ============================================================ */
.toast-demo{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.toast-demo .mono{ color:var(--ink-soft); width:100%; margin-bottom:4px; }
.chip{ border:1px solid var(--line-strong); background:var(--paper-card); color:var(--ink); border-radius:999px; padding:11px 20px; cursor:pointer; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:9px; transition:border-color var(--dur-fast), transform var(--dur-fast), background var(--dur-fast); }
.chip:hover{ transform:translateY(-2px); }
.chip:active{ transform:translateY(0); }
.chip .swatch{ width:9px; height:9px; border-radius:50%; }
.chip[data-type="success"]:hover{ border-color:var(--sage-deep); }
.chip[data-type="success"] .swatch{ background:var(--sage); }
.chip[data-type="info"]:hover{ border-color:var(--plum); }
.chip[data-type="info"] .swatch{ background:var(--plum); }
.chip[data-type="warn"]:hover{ border-color:var(--amber); }
.chip[data-type="warn"] .swatch{ background:var(--amber); }
.toast-stack{ position:fixed; z-index:130; right:22px; bottom:22px; display:flex; flex-direction:column; gap:12px; align-items:flex-end; width:min(360px, calc(100vw - 44px)); pointer-events:none; }
.toast{ pointer-events:auto; position:relative; width:100%; background:var(--paper); border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 24px 50px -30px rgba(32,26,19,.6); overflow:hidden; display:flex; gap:13px; padding:15px 16px 16px; transform:translateX(120%); opacity:0; transition:transform var(--dur-fast) var(--spring), opacity var(--dur-fast) var(--ease), margin var(--dur-fast) var(--ease); }
.toast.in{ transform:none; opacity:1; }
.toast.out{ transform:translateX(120%); opacity:0; margin-bottom:-64px; }
.toast .t-ico{ width:34px; height:34px; flex:none; border-radius:8px; display:grid; place-items:center; }
.toast .t-ico svg{ width:17px; height:17px; }
.toast[data-type="success"] .t-ico{ background:color-mix(in srgb, var(--sage) 24%, var(--paper)); color:var(--sage-deep); }
.toast[data-type="info"] .t-ico{ background:color-mix(in srgb, var(--plum) 18%, var(--paper)); color:var(--plum); }
.toast[data-type="warn"] .t-ico{ background:color-mix(in srgb, var(--amber) 22%, var(--paper)); color:var(--amber); }
.toast .t-body{ flex:1; min-width:0; }
.toast .t-title{ font-weight:500; font-size:15px; }
.toast .t-msg{ color:var(--ink-soft); font-size:13.5px; margin-top:2px; }
.toast .t-close{ flex:none; width:26px; height:26px; border-radius:6px; border:0; background:none; color:var(--ink-soft); cursor:pointer; display:grid; place-items:center; transition:background var(--dur-fast), color var(--dur-fast); }
.toast .t-close:hover{ background:var(--paper-deep); color:var(--ink); }
.toast .t-close svg{ width:13px; height:13px; }
.toast .t-bar{ position:absolute; left:0; bottom:0; height:2px; width:100%; transform-origin:left; }
.toast[data-type="success"] .t-bar{ background:var(--sage); }
.toast[data-type="info"] .t-bar{ background:var(--plum); }
.toast[data-type="warn"] .t-bar{ background:var(--amber); }

/* ============================================================
   05 · VOOR & NA
   ============================================================ */
.ba{ position:relative; border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; aspect-ratio:16/10; background:var(--paper); user-select:none; touch-action:pan-y; --pos:52%; }
.ba-layer{ position:absolute; inset:0; overflow:hidden; }
.ba-after{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-tag{ position:absolute; top:14px; z-index:6; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.ba-tag--na{ left:14px; background:var(--plum); color:var(--paper); }
.ba-tag--voor{ right:14px; background:rgba(20,20,20,.7); color:#fff; }
.ba-divider{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--paper); z-index:7; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(32,26,19,.15); }
.ba-handle{ position:absolute; top:50%; left:var(--pos); z-index:8; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:var(--paper); border:1px solid var(--line-strong); box-shadow:0 10px 26px -12px rgba(32,26,19,.7); cursor:ew-resize; display:grid; place-items:center; color:var(--plum); transition:transform var(--dur-fast) var(--spring); }
.ba-handle:hover,.ba-handle:focus-visible{ transform:translate(-50%,-50%) scale(1.08); }
.ba-handle svg{ width:22px; height:22px; }
.ba-hint{ margin-top:16px; color:var(--ink-soft); font-size:14px; display:inline-flex; align-items:center; gap:9px; }
.ba-hint kbd{ font-family:var(--mono); font-size:11px; background:var(--paper-card); border:1px solid var(--line-strong); border-radius:5px; padding:2px 7px; }
.mock{ position:absolute; inset:0; font-size:clamp(9px,1.4vw,13px); }
.mock-na{ background:var(--paper); color:var(--ink); padding:6% 7%; display:flex; flex-direction:column; }
.mock-na .mn-top{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:3.5%; }
.mock-na .mn-brand{ font-family:var(--serif); font-size:1.5em; display:inline-flex; align-items:center; gap:.5em; }
.mock-na .mn-brand i{ width:.55em; height:.55em; border-radius:50%; background:var(--rose); display:inline-block; }
.mock-na .mn-nav{ display:flex; gap:1.4em; font-family:var(--mono); font-size:.72em; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.mock-na .mn-hero{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:6% 0; }
.mock-na .mn-kick{ font-family:var(--mono); font-size:.72em; letter-spacing:.18em; text-transform:uppercase; color:var(--plum); margin-bottom:1em; }
.mock-na .mn-h{ font-family:var(--serif); font-size:3.4em; line-height:1.02; }
.mock-na .mn-h em{ font-style:italic; color:var(--plum); }
.mock-na .mn-p{ color:var(--ink-soft); max-width:22em; margin:1em 0 1.6em; line-height:1.5; }
.mock-na .mn-cta{ display:inline-flex; align-items:center; gap:.7em; align-self:flex-start; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:.74em; letter-spacing:.1em; text-transform:uppercase; padding:.9em 1.6em; border-radius:999px; }
.mock-na .mn-strip{ display:flex; gap:1.4em; border-top:1px solid var(--line); padding-top:3.5%; font-family:var(--mono); font-size:.7em; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.mock-voor{ background:#eef0f2; color:#1a1a1a; font-family:Georgia,'Times New Roman',serif; display:flex; flex-direction:column; }
.mock-voor .mv-band{ background:#b5121b; color:#fff; text-align:center; padding:1.6% 0; font-size:.9em; letter-spacing:.02em; }
.mock-voor .mv-head{ background:#1f3d7a; color:#fff; text-align:center; padding:4% 3% 3%; }
.mock-voor .mv-head h3{ margin:0; font-size:2.3em; font-weight:700; text-shadow:1px 1px 0 rgba(0,0,0,.35); }
.mock-voor .mv-head p{ margin:.4em 0 0; font-size:.95em; font-style:italic; color:#ffe27a; }
.mock-voor .mv-nav{ background:#ddd; border-bottom:2px solid #999; display:flex; justify-content:center; gap:1.4em; padding:1.5% 0; font-size:.85em; }
.mock-voor .mv-nav a{ color:#1f3d7a; text-decoration:underline; }
.mock-voor .mv-body{ flex:1; padding:4% 5%; display:flex; gap:5%; }
.mock-voor .mv-main{ flex:1; }
.mock-voor .mv-main h4{ margin:0 0 .5em; color:#b5121b; font-size:1.25em; }
.mock-voor .mv-main p{ margin:0 0 .8em; font-size:.92em; line-height:1.4; color:#333; }
.mock-voor .mv-btn{ display:inline-block; background:linear-gradient(#7fd23c,#4a8f14); border:1px solid #3a6f10; color:#fff; font-weight:700; padding:.5em 1.1em; border-radius:4px; font-size:.9em; }
.mock-voor .mv-side{ width:34%; }
.mock-voor .mv-box{ border:2px ridge #b9b9b9; background:#fff; padding:5%; text-align:center; font-size:.82em; }
.mock-voor .mv-box .hit{ font-family:'Courier New',monospace; background:#000; color:#39ff14; display:inline-block; padding:.2em .5em; letter-spacing:.25em; margin-top:.4em; }
.mock-voor .mv-foot{ background:#1f3d7a; color:#cdd6ea; text-align:center; font-size:.75em; padding:2% 0; }