/* DomeinOpMaat — bestellen. The look of domeinopmaat.nl itself: its tokens
   (neutral greys, the blue accent #2f6bdf, square corners, hairline frame),
   its type (Schibsted Grotesk / Inter / Geist Mono / Instrument Serif, the same
   self-hosted woff2 files, SIL OFL), its header, its dark footer. No third party.
   Mobile first; the summary becomes a side "bon" from 960px. */

/* ---- fonts: the site's own files (dom-fonts), latin + latin-ext ------------ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-6ab57b19.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-b6db4a06.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/schibsted-grotesk-ad87c89a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/schibsted-grotesk-b73c42e5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/geist-mono-749b501e.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/geist-mono-341e8238.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-253e49fe.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-7f73269f.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-d65c2644.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-73b57d12.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- tokens: domeinopmaat.nl's global variables, as served ----------------- */
:root {
  --n0: #ffffff; --n25: #fbfbfc; --n50: #f6f7f9; --n100: #eceef1; --n200: #dde0e6; --n300: #c4c9d2;
  --n400: #9aa1ae; --n500: #6b7280; --n600: #4b515c; --n700: #343941; --n800: #1f2228; --n900: #131519; --n950: #0a0b0d;
  --a50: #eef3fd; --a100: #dbe6fb; --a400: #5b8def; --a500: #2f6bdf; --a600: #1f51bf; --a700: #1a409b;

  --bg: var(--n0); --bg-subtle: var(--n50); --surface: var(--n0); --text: var(--n900); --muted: var(--n500); --faint: var(--n500);
  --border: var(--n200); --border-strong: var(--n300);
  --accent: var(--a500); --accent-hover: var(--a600); --accent-soft: var(--a50); --accent-text: var(--a700); --ring: var(--a400);
  --ok: #24753a; --ok-soft: #eaf6ec; --warn: #8a5300; --warn-soft: #fff5e5; --bad: #b42323; --bad-soft: #fdecec;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Schibsted Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", "SF Mono", ui-monospace, "JetBrains Mono", monospace;

  --text-xs: .78rem; --text-sm: .875rem; --text-lg: 1.125rem; --text-xl: 1.25rem;
  --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); --text-4xl: clamp(2.4rem, 1.7rem + 3vw, 3.5rem);
  --tracking-wide: .04em;
  --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --container-max: 1200px; --container-x: clamp(1.25rem, .5rem + 3vw, 2.5rem);
  --pixel: 7px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-text); text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: var(--surface); padding: .5rem .8rem; border: 1px solid var(--border); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The site's frame: a 1200px column with a hairline on both sides. */
.bound { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-x); border-inline: 1px solid var(--border); }

/* ---- announce bar --------------------------------------------------------- */
.announce { background: var(--n950); color: #fff; border-bottom: 1px solid var(--n800); }
.announce .bound { border-color: var(--n800); }
.announce__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem var(--space-3); min-height: 42px; padding-block: var(--space-2);
  font: 400 var(--text-xs)/1.5 var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; text-align: center; }
.announce__tag { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--a400); }
.announce__tag::before { content: ""; width: 6px; height: 6px; background: var(--a500); }

/* ---- header ---------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); }
.site-header__in { position: relative; display: flex; align-items: stretch; height: 70px; padding-inline: 0; }
.site-header__brand { display: flex; align-items: center; padding-inline: var(--container-x) var(--space-6); }
.site-header__brand img { height: 32px; width: auto; max-width: none; }
.site-header__nav { display: none; align-items: center; padding-inline: var(--space-6); border-left: 1px solid var(--border); }
.site-header__nav ul { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.site-header__nav a, .site-header__tel {
  font: 400 var(--text-xs)/1.5 var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .15s;
}
.site-header__tel { color: var(--text); }
.site-header__nav a:hover, .site-header__tel:hover { color: var(--text); }
.site-header__actions { display: none; align-items: center; gap: var(--space-5); margin-inline-start: auto; padding-inline: var(--space-6) var(--container-x); border-left: 1px solid var(--border); }
.site-header__cta { align-self: stretch; }

.drawer { margin-inline-start: auto; display: flex; border-left: 1px solid var(--border); }
.drawer summary { list-style: none; display: flex; align-items: center; padding-inline: var(--space-5); cursor: pointer; color: var(--text); }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary svg { width: 24px; height: 24px; }
.drawer__panel { position: absolute; top: 100%; left: -1px; right: -1px; background: var(--bg); border: 1px solid var(--border); border-top: 0;
  box-shadow: 0 12px 32px rgba(10, 11, 13, .08), 0 4px 8px rgba(10, 11, 13, .04); padding: var(--space-3) var(--container-x) var(--space-6); }
.drawer__panel ul { list-style: none; margin: 0; padding: 0; }
.drawer__panel li a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none;
  font: 500 var(--text-lg)/1.4 var(--font-display); letter-spacing: -.01em; }
.drawer__panel .btn { margin-top: var(--space-4); }

@media (min-width: 861px) {
  .site-header__nav, .site-header__actions { display: flex; }
  .drawer { display: none; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .site-header__nav { padding-inline: var(--space-4); }
  .site-header__nav ul { gap: var(--space-4); }
  .site-header__actions { padding-inline: var(--space-4) var(--container-x); gap: var(--space-4); }
  .site-header__tel { display: none; }
}

/* ---- the content frame and the steps --------------------------------------- */
.frame { padding-bottom: var(--space-8); }
.steps ol { list-style: none; margin: 0; padding: var(--space-5) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: s; }
.steps li { counter-increment: s; font: 400 var(--text-xs)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); }
.steps li::before { content: ""; display: block; height: 3px; background: var(--n200); margin-bottom: 10px; }
.steps li.done::before { background: var(--n900); }
.steps li[aria-current="step"] { color: var(--text); }
.steps li[aria-current="step"]::before { background: var(--accent); }
.steps li a { color: inherit; text-decoration: none; }
.steps li a:hover { color: var(--accent-text); }
.steps .n::before { content: "0" counter(s) " "; color: var(--n400); }

.page { padding: var(--space-6) 0 0; display: grid; gap: var(--space-5); }
@media (min-width: 960px) {
  .page--aside { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: var(--space-7); }
  .page--aside aside { position: sticky; top: 94px; }
}
.page--narrow > div { max-width: 760px; }
.page--wide > div { max-width: none; }

/* ---- type ------------------------------------------------------------------ */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--text); }
h1 { font-size: var(--text-4xl); line-height: 1; letter-spacing: -.035em; }
h2 { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -.02em; }
.lead { color: var(--muted); margin: var(--space-4) 0 0; font-size: var(--text-lg); line-height: 1.7; max-width: 46ch; }
@media (min-width: 640px) { .lead { font-size: var(--text-xl); } }
/* The hero eyebrow of the site: a 28px accent rule, then a mono label. */
.eyebrow { display: flex; align-items: center; gap: var(--space-3); font: 400 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--muted); margin: 0 0 var(--space-5); }
.eyebrow::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--accent); }
.accent-serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -.01em; font-size: 1.05em; color: var(--accent-text); }

.card { background: var(--surface); border: 1px solid var(--border); padding: var(--space-5); }
@media (min-width: 640px) { .card { padding: var(--space-6); } }
.stack > * + * { margin-top: var(--space-5); }

/* ---- package choice (the site's price tier) ------------------------------- */
.choices { display: grid; gap: var(--space-4); border: 0; padding: 0; margin: 0; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__body { position: relative; display: block; background: var(--surface); border: 1px solid var(--border); padding: var(--space-5) var(--space-5) var(--space-5) 3.5rem; transition: background .15s, border-color .15s; }
.choice:hover .choice__body { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.choice__body::before { content: ""; position: absolute; left: var(--space-5); top: calc(var(--space-5) + 2px); width: 18px; height: 18px; border: 1px solid var(--n400); background: var(--surface); }
.choice input:checked + .choice__body { background: var(--bg-subtle); border-color: var(--border); box-shadow: inset 0 3px 0 var(--accent); }
.choice input:checked + .choice__body::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--surface); }
.choice input:focus-visible + .choice__body { outline: 2px solid var(--ring); outline-offset: 2px; }
.choice__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 16px; }
.choice__name { font: 600 var(--text-xl)/1.2 var(--font-display); letter-spacing: -.02em; }
.choice__desc { color: var(--muted); margin: .35rem 0 0; }

.price { text-align: right; }
.price__main { font: 600 clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem)/1 var(--font-display); letter-spacing: -.03em; }
.price__per { font: 400 var(--text-sm)/1 var(--font-mono); color: var(--muted); margin-left: .25rem; }
.price__basis { display: block; font: 400 var(--text-xs)/1.4 var(--font-mono); color: var(--muted); margin-top: 6px; }

/* Maatwerk: a link, not a radio — no square, a dashed edge, the same rhythm as the packages. */
.choice--custom { color: inherit; text-decoration: none; }
.choice--custom .choice__body { padding-left: var(--space-5); border-style: dashed; }
.choice--custom .choice__body::before { content: none; }
.choice--custom:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.price__main--text { font-size: var(--text-xl); }
.choice__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--space-4); font: 500 var(--text-sm)/1.2 var(--font-mono); color: var(--accent); }
.choice__more svg { width: 16px; height: 16px; }

/* The site's pix-list: a 7px accent square, hairlines between. */
.features { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; column-gap: var(--space-6); }
@media (min-width: 560px) { .features { grid-template-columns: 1fr 1fr; } }
.features li { position: relative; padding: var(--space-2) 0 var(--space-2) calc(var(--space-4) + var(--pixel)); border-top: 1px solid var(--border); font-size: var(--text-sm); line-height: 1.4; }
.features li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-2) + .4em); width: var(--pixel); height: var(--pixel); background: var(--accent); }

.chip { display: inline-flex; align-items: center; gap: .35rem; font: 400 var(--text-xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: #fff; background: var(--accent); padding: .25rem .5rem; }

/* ---- forms (the site's .field) --------------------------------------------- */
.field { display: grid; gap: var(--space-2); }
.field label, .legend { font: 500 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text); }
.legend { display: block; margin-bottom: var(--space-3); }
.field .opt { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.field .hint { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 0; padding: var(--space-3) var(--space-4); min-height: 50px;
  transition: border-color .15s, box-shadow .15s;
}
.input:hover { border-color: var(--n400); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.input[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-soft); }
.input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--bad); }
.error { color: var(--bad); font-size: var(--text-sm); font-weight: 500; margin: 0; display: flex; gap: .4rem; }
.error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; margin-top: .15em; background: var(--bad); color: #fff; font: 700 .7rem/1 var(--font-sans); }
.grid2 { display: grid; gap: var(--space-5); }
@media (min-width: 560px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid2--pc { grid-template-columns: 9.5rem 1fr; } }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-strong); }
.seg label { position: relative; text-align: center; cursor: pointer; }
.seg label + label { border-left: 1px solid var(--border-strong); }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: .8rem .5rem; font-weight: 600; font-size: var(--text-sm); color: var(--muted); transition: background .15s, color .15s; }
.seg label:hover span { color: var(--text); }
.seg input:checked + span { background: var(--accent); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }

.check { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-4); border: 1px solid var(--border); background: var(--bg-subtle); cursor: pointer; font-size: .95rem; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.check small { display: block; color: var(--muted); font: 400 var(--text-xs)/1.4 var(--font-mono); margin-top: 4px; }
.check[data-invalid] { border-color: var(--bad); background: var(--bad-soft); }

.search { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .search { grid-template-columns: 1fr auto; } }
.result { padding: var(--space-3) var(--space-4); font-weight: 500; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; align-items: baseline; border-left: 3px solid; }
.result:empty { display: none; }
.result--ok { background: var(--ok-soft); color: var(--ok); }
.result--bad { background: var(--bad-soft); color: var(--bad); }
.result--wait { background: var(--n100); color: var(--n600); }
.result .result__price { color: var(--text); font: 400 var(--text-sm)/1.3 var(--font-mono); }

.mode { display: grid; gap: var(--space-4); }
.mode__extra { margin-top: 14px; }

.tlds { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.tlds li { font: 400 var(--text-xs)/1 var(--font-mono); color: var(--n600); border: 1px solid var(--border); background: var(--bg-subtle); padding: .45rem .6rem; }

/* ---- buttons (the site's .btn) --------------------------------------------- */
.actions { display: flex; flex-direction: column-reverse; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 560px) { .actions { flex-direction: row; justify-content: space-between; align-items: center; } }
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 50px; padding: .8rem 1.5rem;
  font: 600 1rem/1 var(--font-sans); letter-spacing: -.01em; border-radius: 0; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--dark { background: var(--n950); color: #fff; }
.btn--dark:hover { background: var(--n700); color: #fff; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--text); color: var(--text); }
.btn--link { background: none; border: 0; color: var(--text); padding-left: 0; padding-right: 0; min-height: 44px; font-size: var(--text-sm); }
.btn--link:hover { color: var(--accent-text); text-decoration: underline; }
.btn--wide { width: 100%; }
.btn svg { width: 18px; height: 18px; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.btn--bracket::before, .btn--bracket::after { content: ""; position: absolute; width: 5px; height: 5px; opacity: 0; transition: opacity .15s; }
.btn--bracket::before { top: -3px; left: -3px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.btn--bracket::after { bottom: -3px; right: -3px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.btn--bracket:hover::before, .btn--bracket:hover::after { opacity: 1; }
.site-header .btn { min-height: 0; font-size: var(--text-sm); padding: .8rem 1.4rem; }

/* ---- notices --------------------------------------------------------------- */
.notice { padding: var(--space-4); border: 1px solid; border-left-width: 3px; font-size: .95rem; }
.notice--bad { background: var(--bad-soft); border-color: #f3c4c4; border-left-color: var(--bad); color: var(--bad); }
.notice--info { background: var(--bg-subtle); border-color: var(--border); border-left-color: var(--accent); color: var(--n600); }
.notice--warn { background: var(--warn-soft); border-color: #f1d6a6; border-left-color: var(--warn); color: var(--warn); }
.notice strong { color: inherit; }

/* ---- the bon (summary): the site's featured tier --------------------------- */
.bon { background: var(--bg-subtle); border: 1px solid var(--border); box-shadow: inset 0 3px 0 var(--accent); }
.bon summary { list-style: none; cursor: pointer; padding: var(--space-5) var(--space-5) var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; }
.bon summary::-webkit-details-marker { display: none; }
.bon summary .chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.bon[open] summary .chev { transform: rotate(180deg); }
@media (min-width: 960px) { .bon summary { cursor: default; pointer-events: none; } .bon summary .chev { display: none; } }
.bon__body { padding: 0 var(--space-5) var(--space-5); }
.bon__title { font: 400 var(--text-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); }
.lines { margin: 0; display: grid; gap: 0; font-variant-numeric: tabular-nums; }
.lines div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.lines div:first-child { border-top: 0; }
.lines dt { color: var(--muted); font-size: .95rem; }
.lines dt b { display: block; color: var(--text); font-weight: 600; }
.lines dd { margin: 0; font-family: var(--font-mono); font-size: .9rem; white-space: nowrap; }
.lines .total { border-top: 1px solid var(--n900); margin-top: 4px; padding-top: 14px; align-items: baseline; }
.lines .total dt { color: var(--text); font-weight: 600; }
.lines .total dd { font: 600 1.6rem/1 var(--font-display); letter-spacing: -.03em; }
.basis { margin: var(--space-3) 0 0; font: 400 var(--text-xs)/1.5 var(--font-mono); color: var(--muted); }
.then { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--n600); }

/* ---- overview -------------------------------------------------------------- */
.review { margin: 0; display: grid; gap: 0; }
.review > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.review > div:first-child { border-top: 0; padding-top: 0; }
.review > div:last-child { padding-bottom: 0; }
.review dt { font: 400 var(--text-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); grid-column: 1; }
.review dd { margin: 0; grid-column: 1; }
.review a.edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--text-sm); color: var(--text); }
.review a.edit:hover { color: var(--accent-text); }

/* ---- status pages (return, errors) ----------------------------------------- */
.status { padding: var(--space-6) var(--space-5); }
@media (min-width: 640px) { .status { padding: var(--space-7) var(--space-6); } }
.status h1 { font-size: var(--text-3xl); letter-spacing: -.03em; }
.status__icon { width: 56px; height: 56px; margin: 0 0 var(--space-5); display: grid; place-items: center; }
.status__icon svg { width: 26px; height: 26px; }
.status--ok { box-shadow: inset 0 3px 0 var(--ok); }
.status--ok .status__icon { background: var(--ok-soft); color: var(--ok); }
.status--bad { box-shadow: inset 0 3px 0 var(--bad); }
.status--bad .status__icon { background: var(--bad-soft); color: var(--bad); }
.status--wait, .status--info { box-shadow: inset 0 3px 0 var(--accent); }
.status--wait .status__icon, .status--info .status__icon { background: var(--accent-soft); color: var(--accent-text); }
.status--wait .status__icon svg { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .status--wait .status__icon svg { animation: none; } * { transition: none !important; } }
.status p { color: var(--muted); max-width: 52ch; margin: var(--space-3) 0 0; font-size: var(--text-lg); line-height: 1.6; }
.status p.small { font-size: var(--text-sm); }
.ref { font: 400 var(--text-sm)/1 var(--font-mono); color: var(--n600); border: 1px solid var(--border); background: var(--bg-subtle); padding: .5rem .65rem; display: inline-block; margin-top: var(--space-5); }
.track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.track li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.track li:first-child { border-top: 0; }
.track .dot { flex: none; width: 18px; height: 18px; border: 1px solid var(--n400); display: grid; place-items: center; }
.track .done .dot { background: var(--ok); border-color: var(--ok); }
.track .done .dot::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.track .state { margin-left: auto; font: 400 var(--text-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); }
.track .done .state { color: var(--ok); }

/* ---- the closed page: a domeinopmaat.nl hero, then where to go ------------- */
.hero-title { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem); line-height: .95; letter-spacing: -.045em; max-width: 14ch; }
.hero-lead { max-width: 40rem; }
.contact-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.contact-line li { position: relative; padding-left: calc(var(--space-3) + var(--pixel)); }
.contact-line li::before { content: ""; position: absolute; left: 0; top: .5em; width: var(--pixel); height: var(--pixel); background: var(--accent); }
.contact-line b { font-weight: 600; }
.section-tag { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-8) 0 var(--space-5); font: 400 var(--text-xs)/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); }
.section-tag::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.tiles { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); border-left: 1px solid var(--border); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tiles li { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tiles a { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-6) var(--space-5); color: var(--text); text-decoration: none; transition: background .15s; }
.tiles a:hover { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); color: var(--text); }
.tiles .n { font: 400 var(--text-xs)/1 var(--font-mono); color: var(--muted); letter-spacing: var(--tracking-wide); }
.tiles strong { font: 600 var(--text-xl)/1.2 var(--font-display); letter-spacing: -.02em; margin-top: var(--space-3); }
.tiles span:not(.n) { color: var(--muted); font-size: .95rem; }
.tiles .go { margin-top: auto; padding-top: var(--space-4); font-weight: 600; font-size: var(--text-sm); color: var(--accent-text) !important; }

/* ---- footer (the site's dark footer) ---------------------------------------- */
.site-footer { background: var(--n950); color: #fff; border-top: 1px solid rgba(255, 255, 255, .08); }
.site-footer .bound { border-color: var(--n800); }
.site-footer__in { padding-block: clamp(3.5rem, 6vw, 5.5rem) 1.75rem; }
.site-footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.25rem, 4vw, 3.25rem) clamp(1.75rem, 3vw, 3rem); align-items: start; }
.site-footer__brand { grid-column: 1 / -1; max-width: 30rem; }
@media (min-width: 760px) { .site-footer__top { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .site-footer__top { grid-template-columns: 1.35fr 1.1fr .9fr 1.35fr 1fr 1.05fr; } .site-footer__brand { grid-column: auto; } }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: -.03em; color: rgba(255, 255, 255, .7); text-decoration: none; }
.wordmark span { color: var(--a500); }
.wordmark:hover { color: #fff; }
.site-footer__brand p { color: rgba(255, 255, 255, .55); font-size: .95rem; line-height: 1.6; margin: 1.1rem 0 0; max-width: 28rem; }
.site-footer__col h2 { font: 500 .66rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .5); margin: 0 0 1.05rem; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col a { display: inline-block; color: rgba(255, 255, 255, .75); font-size: .9rem; line-height: 1.35; padding: .3rem 0; text-decoration: none; transition: color .15s; overflow-wrap: break-word; }
.site-footer__col a:hover { color: #fff; }
.site-footer__address { display: block; color: rgba(255, 255, 255, .5); font-size: .82rem; line-height: 1.5; margin-top: .5rem; }
.site-footer__bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.5rem;
  font: 400 .8rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: rgba(255, 255, 255, .55); }
.pixrow { display: flex; gap: 3px; }
.pixrow i { width: 6px; height: 6px; background: var(--a500); opacity: .85; }
.pixrow i:nth-child(n+4) { opacity: .5; }
.pixrow i:nth-child(n+6) { opacity: .25; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; list-style: none; margin: 0; padding: 0; width: 100%; }
.site-footer__legal a { color: rgba(255, 255, 255, .6); text-decoration: none; display: inline-block; padding: .3rem 0; }
.site-footer__legal a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--a400); }

/* ---- small helpers --------------------------------------------------------- */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.mono { font-family: var(--font-mono); }
.chip--below { margin-top: var(--space-4); }
.choice__name, .choice__desc { display: block; }
/* Small screens: the bon sits above the step, folded; from 960px it is the sticky side column. */
@media (max-width: 959px) { .page--aside aside { order: -1; } }
@media (max-width: 559px) { .choice__head { display: block; } .price { text-align: left; margin-top: 8px; } }
@media (max-width: 959px) { .bon--empty { display: none; } }
@media (max-width: 479px) { .steps .n::before { content: none; } .steps li { letter-spacing: .02em; } }

/* ---- the portal (mijn.domeinopmaat.nl) -------------------------------------- */
.portal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.portal-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; }
.portal-nav a { color: var(--text); font-weight: 600; text-decoration: none; display: inline-block; min-height: 44px; line-height: 44px; }
.portal-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
.portal-nav a:hover { color: var(--accent-text); }
.portal-nav__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--muted); }
.service__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.service__head h2 { margin: 0; }
.state { display: inline-block; font: 500 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border: 1px solid var(--border); color: var(--muted); }
.state--ok { color: var(--ok); border-color: currentColor; }
.state--warn { color: var(--warn); border-color: currentColor; }
.lines dd.wrap { white-space: normal; text-align: right; }
.service__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.service__actions form { margin: 0; }
.invoices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
.invoices th, .invoices td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--border); vertical-align: top; }
.invoices th { font: 500 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-top: 0; }
.invoices td.num { font-family: var(--font-mono); white-space: nowrap; }
@media (max-width: 639px) {
  .invoices thead { display: none; }
  .invoices tr { display: block; padding: 10px 0; border-top: 1px solid var(--border); }
  .invoices td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; }
  .invoices td::before { content: attr(data-label); color: var(--muted); }
}

/* ---- closed-state page (owner go 2026-10-20, round seven item 1) --------- */
/* A read-only price list: the choice card without its radio dot or hover state. */
.choice--plain { cursor: default; }
.choice--plain .choice__body { padding-left: var(--space-5); }
.choice--plain .choice__body::before { content: none; }
.choice--plain:hover .choice__body { background: var(--surface); }
.two-up { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .two-up { grid-template-columns: 1fr 1fr; } }
.two-up form.card h2 { margin: 0 0 var(--space-3); font: 600 var(--text-lg)/1.2 var(--font-display); }