:root {
    /* palette — dark is primary */
    --bg:        #0A0F16;
    --bg-2:      #0D131C;
    --surface:   #131C28;
    --surface-2: #18222F;
    --text:      #EAEDF1;
    --muted:     #8E9CAD;
    --faint:     #5E6C7C;
    --border:    rgba(255,255,255,0.09);
    --border-2:  rgba(255,255,255,0.16);
    --accent:    #F0A24B;   /* warm amber */
    --accent-ink:#0A0F16;
    --signal:    #57BEAF;   /* teal signal */
    --glow:      rgba(240,162,75,0.14);

    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, serif;
    --font-body: -apple-system, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "Cascadia Code", "SF Mono", "Consolas", ui-monospace, monospace;

    --maxw: 1180px;
    --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
    --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
    --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
    --step-2:  clamp(1.55rem, 1.35rem + 1vw, 2.1rem);
    --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
    --step-4:  clamp(2.9rem, 1.9rem + 4.6vw, 5.6rem);
  }

  @media (prefers-color-scheme: light) {
    :root {
      --bg:        #F6F2EA;
      --bg-2:      #FBF8F2;
      --surface:   #FFFFFF;
      --surface-2: #FBF7F0;
      --text:      #182231;
      --muted:     #56606E;
      --faint:     #8A93A0;
      --border:    rgba(20,30,45,0.11);
      --border-2:  rgba(20,30,45,0.2);
      --accent:    #B96B22;
      --accent-ink:#FFFFFF;
      --signal:    #2C8577;
      --glow:      rgba(185,107,34,0.12);
    }
  }
  :root[data-theme="dark"] {
    --bg:#0A0F16; --bg-2:#0D131C; --surface:#131C28; --surface-2:#18222F;
    --text:#EAEDF1; --muted:#8E9CAD; --faint:#5E6C7C;
    --border:rgba(255,255,255,0.09); --border-2:rgba(255,255,255,0.16);
    --accent:#F0A24B; --accent-ink:#0A0F16; --signal:#57BEAF; --glow:rgba(240,162,75,0.14);
  }
  :root[data-theme="light"] {
    --bg:#F6F2EA; --bg-2:#FBF8F2; --surface:#FFFFFF; --surface-2:#FBF7F0;
    --text:#182231; --muted:#56606E; --faint:#8A93A0;
    --border:rgba(20,30,45,0.11); --border-2:rgba(20,30,45,0.2);
    --accent:#B96B22; --accent-ink:#FFFFFF; --signal:#2C8577; --glow:rgba(185,107,34,0.12);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1,h2,h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

  :where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .label {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent);
    font-weight: 500;
  }

  /* ---------- nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    border-bottom: 1px solid var(--border);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
  .brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; letter-spacing: -0.02em; }
  .brand .mark { width: 26px; height: 26px; flex: none; }
  .brand b { color: var(--accent); font-weight: 600; }
  nav.links { display: flex; gap: 2rem; align-items: center; }
  nav.links a { font-size: 0.94rem; color: var(--muted); transition: color .2s; }
  nav.links a:hover { color: var(--text); }
  .nav-cta {
    font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em;
    padding: 0.55rem 1rem; border: 1px solid var(--border-2); border-radius: 2px; color: var(--text);
    transition: border-color .2s, background .2s;
  }
  .nav-cta:hover { border-color: var(--accent); background: var(--glow); }
  @media (max-width: 900px){ nav.links { display: none; } }

  /* ---------- hero ---------- */
  .hero { position: relative; overflow: hidden; }
  #net { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(120% 80% at 78% 8%, transparent 30%, var(--bg) 82%),
      linear-gradient(180deg, transparent 55%, var(--bg) 100%);
  }
  .hero-inner { position: relative; z-index: 2; padding: clamp(4.5rem, 12vh, 9rem) 0 clamp(3.5rem, 8vh, 6rem); }
  .hero h1 { font-size: var(--step-4); max-width: 15ch; margin: 1.4rem 0 0; }
  .hero h1 em { font-style: italic; color: var(--accent); }
  .hero p.lead { max-width: 52ch; color: var(--muted); font-size: var(--step-1); margin: 1.6rem 0 0; line-height: 1.5; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }
  .btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.85rem 1.5rem; border-radius: 2px; font-weight: 600; font-size: 0.98rem;
    border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .2s, border-color .2s;
    font-family: inherit;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
  .btn-ghost { border-color: var(--border-2); color: var(--text); background: transparent; }
  .btn-ghost:hover { border-color: var(--accent); background: var(--glow); }

  .metrics { display: flex; flex-wrap: wrap; gap: clamp(1.5rem,5vw,3.5rem); margin-top: clamp(3rem,7vh,4.5rem); padding-top: 2rem; border-top: 1px solid var(--border); }
  .metric .n { font-family: var(--font-display); font-size: var(--step-2); color: var(--text); font-weight: 600; }
  .metric .k { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-top: 0.2rem; }

  /* ---------- section frame ---------- */
  section { padding: clamp(4rem, 10vh, 7rem) 0; }
  .sec-head { max-width: 60ch; margin-bottom: clamp(2.2rem,5vh,3.4rem); }
  .sec-head h2 { font-size: var(--step-3); margin-top: 0.9rem; }
  .sec-head p { color: var(--muted); font-size: var(--step-1); margin: 1rem 0 0; line-height: 1.5; }

  /* ---------- capabilities ---------- */
  .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
  @media (max-width: 900px){ .cap-grid { grid-template-columns: repeat(2,1fr);} }
  @media (max-width: 600px){ .cap-grid { grid-template-columns: 1fr;} }
  .cap {
    background: var(--surface); padding: 2rem 1.7rem 2.1rem; position: relative;
    transition: background .25s;
  }
  .cap:hover { background: var(--surface-2); }
  .cap .idx { font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); letter-spacing: 0.1em; }
  .cap .ico { width: 34px; height: 34px; margin: 0.9rem 0 1.1rem; color: var(--accent); }
  .cap h3 { font-size: var(--step-1); }
  .cap p { color: var(--muted); font-size: 0.96rem; margin: 0.6rem 0 0; line-height: 1.55; }

  /* ---------- technology ---------- */
  .tech { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem,5vw,4.5rem); }
  @media (max-width: 720px){ .tech-grid { grid-template-columns: 1fr; } }
  .tech-row { display: flex; gap: 1.2rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--border); }
  .tech-row .t-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.08em; flex: none; width: 2.4rem; }
  .tech-row .t-body h3 { font-size: 1.12rem; font-family: var(--font-body); font-weight: 650; letter-spacing: 0; }
  .tech-row .t-body p { color: var(--muted); font-size: 0.92rem; margin: 0.3rem 0 0; }

  /* ---------- outcomes ---------- */
  .out-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; }
  @media (max-width: 880px){ .out-grid { grid-template-columns: repeat(2,1fr);} }
  @media (max-width: 480px){ .out-grid { grid-template-columns: 1fr;} }
  .out { padding: 1.6rem 1.5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
  .out .bar { width: 32px; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 1rem; }
  .out h3 { font-family: var(--font-body); font-weight: 650; font-size: 1.05rem; letter-spacing:0; }
  .out p { color: var(--muted); font-size: 0.92rem; margin: 0.5rem 0 0; }

  /* ---------- products ---------- */
  .products { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .tier-note {
    font-family: var(--font-mono); font-size: var(--step--1); color: var(--faint);
    letter-spacing: 0.06em; margin-bottom: 1.1rem;
  }
  /* Three columns, because five of the six groups hold exactly three services.
     At four the rows ended one short and left a hole on the right of nearly
     every group. "Run" has four and wraps 3 + 1, which is the only ragged row. */
  .pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; }
  @media (max-width: 900px){ .pack-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .pack-grid { grid-template-columns: 1fr; } }

  .pack {
    display: flex; flex-direction: column; gap: 0.9rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
    padding: 1.5rem 1.35rem 1.4rem;
    transition: border-color .2s, background .25s;
  }
  .pack:hover { border-color: var(--border-2); background: var(--surface-2); }
  .pack.featured { border-color: var(--accent); background: linear-gradient(180deg, var(--glow), transparent 42%), var(--surface); }
  .pack .pack-tag {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--signal);
  }
  .pack h3 { font-family: var(--font-body); font-weight: 650; font-size: 1.06rem; letter-spacing: 0; }
  .pack .price {
    font-family: var(--font-display); font-size: 1.95rem; font-weight: 600;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1;
  }
  .pack .price .from { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--faint); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.35rem; }
  .pack .blurb { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin: 0; }
  .pack .price .per { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); letter-spacing: 0.08em; margin-left: 0.35rem; text-transform: uppercase; }
  .pack ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
  .pack li { color: var(--muted); font-size: 0.89rem; line-height: 1.45; padding-left: 1.05rem; position: relative; }
  .pack li::before {
    content: ""; position: absolute; left: 0; top: 0.55em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  }
  .pack .btn { justify-content: center; padding: 0.7rem 1rem; font-size: 0.9rem; }

  .build-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 1.1rem; }
  @media (max-width: 760px){ .build-grid { grid-template-columns: 1fr; } }
  .build {
    display: flex; flex-direction: column; gap: 0.9rem;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: 4px;
    padding: 1.9rem 1.7rem;
  }
  .build h3 { font-size: var(--step-1); }
  .build p { color: var(--muted); font-size: 0.94rem; margin: 0; }
  .build .price { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
  .build .price .from { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--faint); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.35rem; }
  .build .btn { align-self: flex-start; }

  .bespoke {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.4rem; margin-top: 1.1rem;
    border: 1px dashed var(--border-2); border-radius: 4px;
    padding: 1.7rem clamp(1.4rem, 3vw, 2.2rem);
    background: transparent;
  }
  .bespoke h3 { font-family: var(--font-body); font-weight: 650; font-size: 1.06rem; letter-spacing: 0; }
  .bespoke p { color: var(--muted); font-size: 0.92rem; margin: 0.35rem 0 0; max-width: 62ch; }

  /* ---------- request form ---------- */
  .form-panel {
    margin-top: clamp(2.4rem, 6vh, 3.6rem);
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: clamp(1.7rem, 4vw, 2.8rem);
    scroll-margin-top: 88px;
  }
  .form-head { max-width: 56ch; margin-bottom: 1.8rem; }
  .form-head h3 { font-size: var(--step-2); margin-top: 0.7rem; }
  .form-head p { color: var(--muted); font-size: 0.96rem; margin: 0.7rem 0 0; }

  .field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  @media (max-width: 640px){ .field-grid { grid-template-columns: 1fr; } }
  .field { display: flex; flex-direction: column; gap: 0.42rem; }
  .field.full { grid-column: 1 / -1; }
  .field label {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }
  .field label .opt { color: var(--faint); letter-spacing: 0.08em; }
  .field input, .field select, .field textarea {
    font-family: var(--font-body); font-size: 0.96rem; color: var(--text);
    background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 3px;
    padding: 0.72rem 0.85rem; width: 100%;
    transition: border-color .2s, background .2s;
  }
  .field textarea { resize: vertical; min-height: 122px; line-height: 1.55; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--accent); }
  .field input::placeholder, .field textarea::placeholder { color: var(--faint); }
  .field select { appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
    padding-right: 2.4rem;
  }
  .field .err { font-size: 0.8rem; color: var(--accent); min-height: 1.1em; }
  .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--accent); }

  .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 1.6rem; }
  .form-foot .fine { color: var(--faint); font-size: 0.84rem; max-width: 46ch; margin: 0; }
  .consent { margin-top: 1.4rem; }
  .check { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; }
  .check input {
    width: 17px; height: 17px; flex: none; margin-top: 0.18rem;
    accent-color: var(--accent); cursor: pointer;
  }
  .check span { font-size: 0.89rem; color: var(--muted); line-height: 1.5; }
  .check a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

  /* honeypot — hidden from people, visible to bots that fill everything */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .form-status {
    margin-top: 1.2rem; font-size: 0.94rem; color: var(--signal);
    display: none; padding: 0.9rem 1.05rem; border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
    background: color-mix(in srgb, var(--signal) 10%, transparent);
  }
  .form-status.show { display: block; }
  .form-status.error {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  .form-status a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

  /* ---------- prose pages (privacy, 404) ---------- */
  .prose { max-width: 68ch; padding: clamp(3rem, 9vh, 5.5rem) 0 clamp(4rem, 10vh, 6rem); }
  .prose h1 { font-size: var(--step-3); margin-top: 0.9rem; }
  .prose h2 { font-size: var(--step-1); margin: 2.6rem 0 0; }
  .prose h3 { font-family: var(--font-body); font-weight: 650; font-size: 1.02rem; letter-spacing: 0; margin: 1.8rem 0 0; }
  .prose em { color: var(--text); }
  .prose p, .prose li { color: var(--muted); font-size: 0.98rem; line-height: 1.65; }
  .prose p { margin: 0.9rem 0 0; }
  .prose ul { margin: 0.9rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; }
  .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .prose .updated { font-family: var(--font-mono); font-size: var(--step--1); color: var(--faint); letter-spacing: 0.08em; }
  /* A button inside prose is still a button. Without this, `.prose a` (0,1,1)
     out-specifies `.btn-primary` (0,1,0) and paints the label in the accent
     colour - amber text on an amber fill, i.e. an empty-looking block. */
  .prose .btn { margin-top: 2rem; text-decoration: none; }
  .prose .btn-primary { color: var(--accent-ink); }
  .prose .btn-ghost { color: var(--text); }
  .center { text-align: center; margin-left: auto; margin-right: auto; }

  /* The page after a completed payment carries nothing but the message: no nav,
     no footer, no next step. The transaction is over - anything else is just
     something to misread. Centred in the viewport rather than sat at the top. */
  .done {
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding-top: 0; padding-bottom: 0;
  }
  .done h1 { margin-top: 1.1rem; }
  .done p { font-size: var(--step-1); color: var(--muted); margin-top: 1.2rem; }

  /* "Details" link on the home page cards */
  .svc-more {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
    color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
    margin-top: auto;
  }
  .svc-more:hover { color: var(--accent); }
  header.nav .nav-cta { font-family: var(--font-mono); cursor: pointer; }

  /* ---------- service checkout pages ---------- */
  /* checkout pages carry no nav or footer, so the page itself provides the frame */
  .co { padding: clamp(2.4rem, 7vh, 4rem) 0 clamp(3rem, 8vh, 5rem); }
  .co-layout > .co-form-side { min-width: 0; }
  .crumbs {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--faint);
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin-bottom: clamp(1.4rem, 3vh, 2rem);
  }
  .crumbs a { color: var(--muted); }
  .crumbs a:hover { color: var(--accent); }

  /* step bar */
  .steps {
    list-style: none; display: flex; margin: 0 0 clamp(2rem, 5vh, 3rem); padding: 0;
    border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
    background: var(--surface);
  }
  .step {
    flex: 1; display: flex; align-items: center; gap: 0.7rem;
    padding: 0.95rem 1.2rem;
    font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--faint);
    border-right: 1px solid var(--border);
  }
  .step:last-child { border-right: 0; }
  .step-n {
    width: 1.55rem; height: 1.55rem; flex: none; border-radius: 50%;
    display: grid; place-items: center; font-size: 0.72rem;
    border: 1px solid var(--border-2); color: inherit;
  }
  .step.is-active { color: var(--text); background: var(--surface-2); }
  .step.is-active .step-n { border-color: var(--accent); color: var(--accent); }
  .step.is-done { color: var(--muted); }
  .step.is-done .step-n { border-color: var(--signal); color: var(--signal); }
  /* On a phone three labels do not fit - 'Confirmation' ran off the edge and was
     silently clipped by overflow-x:hidden. Name only the step you are on; the
     others stay as numbered circles, which is enough to show progress. */
  @media (max-width: 620px) {
    .step { padding: 0.85rem 0.9rem; gap: 0.5rem; justify-content: center; }
    .step-t { display: none; }
    .step.is-active { flex: 2; }
    .step.is-active .step-t { display: inline; }
  }

  .co-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(2rem, 4vw, 3rem); align-items: start;
  }
  @media (max-width: 940px) { .co-layout { grid-template-columns: 1fr; } }

  .co-title { font-size: var(--step-3); margin: 0; }
  .co-lead { color: var(--muted); font-size: var(--step-1); line-height: 1.55; margin: 1rem 0 0; max-width: 58ch; }
  .co-section {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted); font-weight: 500;
    margin: 2.4rem 0 1.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border);
  }
  .co-summary .co-section { margin-top: 0; }

  #checkout-form {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: clamp(1.4rem, 3vw, 2rem);
  }

  /* order summary */
  .osb { background: var(--surface); border: 1px solid var(--border-2); border-radius: 6px; overflow: hidden; }
  .osb-head { padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--border); }
  .osb-name { font-family: var(--font-body); font-weight: 650; font-size: 1.08rem; }
  .osb-cat {
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--signal); margin-top: 0.35rem;
  }
  .osb-feats { list-style: none; margin: 0; padding: 1.1rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; border-bottom: 1px solid var(--border); }
  .osb-feats li { color: var(--muted); font-size: 0.86rem; line-height: 1.45; padding-left: 1rem; position: relative; }
  .osb-feats li::before {
    content: ""; position: absolute; left: 0; top: 0.55em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  }
  .osb-totals { padding: 1.1rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .osb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .osb-vat span:last-child { font-size: 0.8rem; color: var(--faint); }
  .osb-total {
    border-top: 1px solid var(--border); padding-top: 0.85rem; margin-top: 0.15rem;
    font-family: var(--font-display); font-size: 1.5rem; color: var(--text); font-weight: 600;
  }
  .osb-total span:first-child { font-family: var(--font-body); font-size: 0.9rem; font-weight: 400; color: var(--muted); }
  .osb-total .per { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); letter-spacing: 0.08em; margin-left: 0.3rem; text-transform: uppercase; }

  .co-terms { margin-top: 1.2rem; }
  .co-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; }
  .co-actions .btn { justify-content: center; padding: 0.95rem 1.2rem; }

  /* ---------- payment buttons, in the providers' own colours ----------
     These are the two marks people recognise at the moment they decide to pay,
     so they keep their brand colours in both light and dark themes rather than
     following our palette. Fixed hex on purpose - a token would drift.

     Stripe  #635BFF on white text
     PayPal  #FFC439 with #003087 text, which is PayPal's own button styling  */
  .btn-stripe {
    background: #635BFF;
    color: #FFFFFF;
    border-color: #635BFF;
  }
  .btn-stripe:hover { background: #7A73FF; border-color: #7A73FF; }

  .btn-paypal {
    background: #FFC439;
    color: #003087;
    border-color: #FFC439;
    font-weight: 700;
  }
  .btn-paypal:hover { background: #FFD466; border-color: #FFD466; }

  /* Both sit on a light card and a dark one, so give the focus ring something
     that reads against either fill. */
  .btn-stripe:focus-visible, .btn-paypal:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }

  .co-status {
    display: none; margin: 1rem 0 0; font-size: 0.88rem; line-height: 1.5;
    padding: 0.85rem 1rem; border-radius: 3px; color: var(--signal);
    border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
    background: color-mix(in srgb, var(--signal) 10%, transparent);
  }
  .co-status.show { display: block; }
  .co-status.error {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  .co-status a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

  .co-trust { margin-top: 1.2rem; text-align: center; }
  .cards { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
  .cards span {
    font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--faint);
    border: 1px solid var(--border); border-radius: 3px; padding: 0.3rem 0.55rem;
  }
  .co-secure { color: var(--faint); font-size: 0.78rem; line-height: 1.5; margin: 0.8rem 0 0; }

  .co-detail {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(3rem, 7vh, 4.5rem);
    padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--border);
  }
  @media (max-width: 760px) { .co-detail { grid-template-columns: 1fr; } }
  .co-detail .co-section { margin-top: 0; }
  .svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
  .svc-list li { color: var(--muted); font-size: 0.94rem; line-height: 1.55; padding-left: 1.2rem; position: relative; }
  .svc-list li::before {
    content: ""; position: absolute; left: 0; top: 0.6em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  }
  .svc-list a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

  /* ---------- request dialog ---------- */
  #request-dialog {
    width: min(680px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    padding: 0;
    border: 1px solid var(--border-2);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    overflow: auto;
    overscroll-behavior: contain;
  }
  #request-dialog::backdrop {
    background: rgba(4, 8, 14, 0.62);
    backdrop-filter: blur(3px);
  }
  #request-dialog .form-panel {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .dialog-close {
    position: sticky; top: 0; float: right; z-index: 2;
    margin: 0.6rem 0.6rem 0 0;
    width: 34px; height: 34px; line-height: 1;
    font-size: 1.4rem; font-family: var(--font-body);
    color: var(--muted); background: transparent; cursor: pointer;
    border: 1px solid transparent; border-radius: 3px;
    transition: color .2s, border-color .2s, background .2s;
  }
  .dialog-close:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }

  /* ---------- step two: checkout ---------- */
  .pay-step { padding: clamp(1.7rem, 4vw, 2.8rem); }
  .pay-step h3 { font-size: var(--step-2); margin-top: 0.7rem; }
  .pay-note { color: var(--muted); font-size: 0.98rem; line-height: 1.6; margin: 0.9rem 0 0; max-width: 52ch; }
  .pay-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.8rem 0 1.6rem; }
  .pay-actions:empty { margin: 0.6rem 0 0; }

  /* ---------- cta ---------- */
  .cta-band { position: relative; overflow: hidden; border-radius: 6px; border: 1px solid var(--border-2);
    background:
      radial-gradient(90% 140% at 15% 10%, var(--glow), transparent 60%),
      var(--surface);
    padding: clamp(2.8rem,7vw,4.8rem); text-align: center;
  }
  .cta-band h2 { font-size: var(--step-3); max-width: 20ch; margin: 0.8rem auto 0; }
  .cta-band p { color: var(--muted); max-width: 48ch; margin: 1.1rem auto 0; font-size: var(--step-1); }
  .cta-band .hero-actions { justify-content: center; }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--border); padding: 3rem 0 3.5rem; }
  .foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: center; }
  footer .brand { font-size: 1.1rem; }
  .foot-meta { color: var(--faint); font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.05em; }
  .foot-links { display: flex; gap: 1.6rem; flex-wrap: wrap; }
  .foot-links a { color: var(--muted); font-size: 0.9rem; }
  .foot-links a:hover { color: var(--accent); }

  /* ---------- legal identity ---------- */
  .legal { border-top: 1px solid var(--border); margin-top: 2.4rem; padding-top: 1.8rem; }
  .legal-name {
    font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); margin: 0 0 1rem;
  }
  .legal-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem 2rem; margin: 0;
  }
  @media (max-width: 780px){ .legal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 460px){ .legal-grid { grid-template-columns: 1fr; } }
  .legal-grid dt {
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--faint);
  }
  .legal-grid dd {
    margin: 0.25rem 0 0; color: var(--muted); font-size: 0.84rem;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .legal-note { color: var(--faint); font-size: 0.8rem; margin: 1.4rem 0 0; }

  @media (prefers-reduced-motion: reduce) { #net { display: none; } .btn:hover { transform: none; } }