/*
 * v4: the tool shop's system (alientechtools.co.uk) in our colours (docs/superpowers/specs/2026-10-22-v4-design-system-design.md).
 * Colours come from tokens.css only; a band (.band--dark / .band--light) re-scopes them. The header and footer are
 * v3's markup, driven by v3's js/site.js, drawn here.
 */

/* ======================================================================= base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--p-paper);
  color: var(--p-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* A page that is all v3's deep scene (the TunerSuite product page puts it on <body>): a charcoal page. */
body.v3-deep { background: var(--bg); color: var(--fg); }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { color: var(--fg); font-family: var(--font-display); text-wrap: balance; }
/* A v4 template spaces its paragraphs and headings itself; a v3 template drawn in v4 keeps its own spacing (its stack
   rules). :where() keeps these as light as a bare element rule. */
:where(.v4-page) p { margin: 0 0 1rem; }
:where(.v4-page) :is(h1, h2, h3, h4) { margin: 0 0 .8rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
summary { cursor: pointer; }
.v3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v3-skip { position: absolute; top: 8px; left: -999px; z-index: 100; padding: .6rem 1rem; border-radius: var(--r-sm); background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; }
.v3-skip:focus { left: 16px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; padding-inline: 0; }
.wrap--narrow { width: min(820px, 100% - 32px); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* ====================================================================== bands */
.band {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--bg);
  color: var(--fg);
}
.band--dark { background: var(--band-dark-fill); }
.band--tight { padding-block: clamp(1.8rem, 3.5vw, 2.6rem); }
.band--line { border-top: 1px solid var(--line); }
/* A light band carries the faint grid of a datasheet. */
.band--grid {
  background-color: var(--bg);
  background-image: var(--grid-fill);
  background-size: 32px 32px;
}

/* ======================================================================= type */
.h1, .h2, .h3 { color: var(--fg); font-family: var(--font-display); }
.h1 { font-size: clamp(2.2rem, 4.8vw, 3.75rem); font-weight: 830; font-stretch: 118%; line-height: 1.02; letter-spacing: -.015em; }
.h1--xl { font-size: clamp(2.6rem, 7.2vw, 5.6rem); font-weight: 880; font-stretch: 122%; line-height: .98; letter-spacing: -.02em; }
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 800; font-stretch: 114%; line-height: 1.06; letter-spacing: -.01em; }
.h2--xl { font-size: clamp(2rem, 5vw, 4rem); font-weight: 850; font-stretch: 120%; line-height: 1.02; letter-spacing: -.015em; }
.h3 { font-size: 1.3rem; font-weight: 760; font-stretch: 108%; line-height: 1.2; }
.lead { max-width: 46rem; color: var(--muted); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.55; }
.accent { color: var(--accent-ink); }

/* A section's index: its number and its name, in mono, behind a short stripe. */
.idx {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.idx::before { content: ""; flex: none; width: 30px; height: 10px; border-radius: 2px; background: var(--stripes); }
.head { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.head .lead { margin-bottom: 0; }
.head--center { margin-inline: auto; text-align: center; }
.head--center .idx { justify-content: center; }
.head--center .lead { margin-inline: auto; }

/* ==================================================================== buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 720;
  font-stretch: 104%;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.btn:hover { transform: translateY(-1px); background: var(--p-orange-hi); }
.btn:active { transform: none; }
.btn--quiet, .btn--ghost { border-color: var(--btn-ghost-line); background: transparent; color: var(--fg); }
.btn--quiet:hover, .btn--ghost:hover { border-color: var(--fg); background: transparent; }
.btn--lg { min-height: 54px; padding-inline: 1.6rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.6rem 0 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* A link that leads on: its words and an arrow. */
.go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 24px;
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
}
.go::after { content: "\2192"; color: var(--accent-ink); transition: transform var(--dur-1) var(--ease); }
.go:hover::after { transform: translateX(3px); }
.go:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ====================================================================== lists */
.ticks { list-style: none; }
.ticks li { position: relative; padding-left: 1.6em; }
.ticks li + li { margin-top: .5rem; }
.ticks li::before {
  position: absolute;
  top: .5em;
  left: .15em;
  width: .7em;
  height: .38em;
  border-bottom: 2px solid var(--tick);
  border-left: 2px solid var(--tick);
  content: "";
  transform: rotate(-45deg);
}
/* Three or four facts in mono under a hero, each after a small square. */
.proof { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.8rem 0 0; list-style: none; }
.proof li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.proof li::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--btn-bg); }
.chip {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .75rem;
}

/* ============================================================ the top strip */
.v3-alert { padding: .55rem 0; background: var(--p-orange-wash); color: var(--p-ink); font-size: .9rem; }
.v3-strip {
  border-bottom: 1px solid var(--bar-line);
  background: var(--bar-bg);
  color: var(--bar-muted);
  font-size: .8rem;
}
.v3-strip__in { display: flex; align-items: center; gap: 1.2rem; min-height: 36px; }
.v3-strip a { color: var(--bar-muted); text-decoration: none; white-space: nowrap; }
.v3-strip a:hover { color: var(--bar-fg); }
.v3-strip__news { display: inline-flex; flex: 1 1 auto; align-items: center; gap: .5rem; min-width: 0; overflow: hidden; }
.v3-strip__news b { color: var(--p-orange-hi); font-weight: 700; }
.v3-strip__news span { overflow: hidden; text-overflow: ellipsis; }
.v3-strip__news svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.v3-strip__live { display: inline-flex; align-items: center; gap: .45rem; }
.v3-strip__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--p-ok); }
.v3-strip__wide { display: none; }
@media (min-width: 768px) {
  .v3-strip__wide { display: inline; }
}
@media (max-width: 639px) {
  .v3-strip__news span { display: none; }
}
/* The smallest phones keep the file service and the client portal; TunerSuite is in the menu. */
@media (max-width: 419px) {
  .v3-strip__news { display: none; }
}

/* ==================================================================== the bar */
.v3-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--bar-line);
  background: var(--bar-bg);
  color: var(--bar-fg);
  transition: box-shadow var(--dur-2) var(--ease);
}
.v3-header.is-scrolled { box-shadow: var(--shadow-product); }
.admin-bar .v3-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .v3-header { top: 0; }
}
.v3-strip .wrap, .v3-header .wrap { width: min(1360px, 100% - 32px); }
.v3-header__in { display: flex; align-items: center; gap: 1rem; height: var(--header-h); }
.v3-brand { display: inline-flex; flex: none; align-items: center; color: var(--bar-fg); text-decoration: none; }

/* The wordmark: the split diamond and the name, wide and heavy, its hyphen our orange. */
.v3-logo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 850; font-stretch: 118%; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.v3-logo__mark { width: 26px; height: 26px; }
.v3-logo__mark .a { fill: var(--p-orange); }
.v3-logo__mark .b { fill: currentColor; }
.v3-logo__dash { color: var(--p-orange); }

.v3-menu { display: none; height: 100%; margin-left: .6rem; }
.v3-menu__list { display: flex; align-items: stretch; height: 100%; list-style: none; }
.v3-menu__item { display: flex; }
/* The door to a menu is as tall as the bar, so the pointer never crosses a gap on its way into the panel. */
.v3-menu__btn, .v3-menu__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 100%;
  padding: 0 .75rem;
  border: 0;
  background: none;
  color: var(--bar-fg);
  font: inherit;
  font-size: .93rem;
  font-weight: 640;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.v3-menu__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur-1) var(--ease); }
.v3-menu__btn:hover, .v3-menu__link:hover, .v3-menu__btn[aria-expanded="true"] { color: var(--p-orange-hi); }
.v3-menu__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.v3-menu__link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--p-orange); }

/* A menu's panel: columns of entries, the highlighted card, a row of links. */
.v3-mega { position: absolute; top: 100%; right: 0; left: 0; padding: 0 16px 24px; }
.v3-mega[hidden] { display: none; }
.v3-mega__in {
  width: min(1180px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--bar-line);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--panel-bg);
  box-shadow: var(--shadow-product);
}
.v3-mega__cols { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.v3-mega__col { padding: 1.4rem 1.2rem 1rem; }
.v3-mega__col + .v3-mega__col { border-left: 1px solid var(--bar-line); }
.v3-mega__title { margin: 0 0 .7rem .5rem; color: var(--p-orange-hi); font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.v3-mega ul, .v3-drawer__group ul { list-style: none; }
.v3-mega__item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem .5rem;
  border-radius: var(--r-sm);
  color: var(--bar-fg);
  text-decoration: none;
}
.v3-mega__item:hover, .v3-mega__item:focus-visible { background: var(--p-char-800); }
.v3-mega__icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--p-char-800); color: var(--p-orange-hi); }
.v3-mega__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.v3-mega__item > span:last-child { display: grid; gap: .1rem; min-width: 0; }
.v3-mega__item b { font-size: .95rem; font-weight: 700; }
.v3-mega__item small { color: var(--bar-muted); font-size: .83rem; line-height: 1.4; }
.v3-mega__feature {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: 1rem;
  padding: 1.4rem;
  border-radius: var(--r-md);
  background: var(--p-char-850);
  color: var(--bar-fg);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--bar-line);
}
.v3-mega__feature b { font-size: 1.25rem; font-weight: 820; font-stretch: 112%; line-height: 1.15; }
.v3-mega__feature > span:not(.v3-mega__tag):not(.v3-mega__cta) { color: var(--bar-muted); font-size: .9rem; }
.v3-mega__tag { align-self: flex-start; color: var(--p-orange-hi); font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.v3-mega__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; color: var(--p-orange-hi); font-weight: 700; }
.v3-mega__cta svg, .v3-mega__all svg, .v3-drawer__feature svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.v3-mega__feature:hover .v3-mega__cta { text-decoration: underline; }
.v3-mega__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; padding: .9rem 1.7rem; border-top: 1px solid var(--bar-line); background: var(--p-char-950); font-size: .88rem; }
.v3-mega__foot a { color: var(--bar-muted); text-decoration: none; }
.v3-mega__foot a:hover { color: var(--bar-fg); }
.v3-mega__foot .v3-mega__all { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; color: var(--p-orange-hi); font-weight: 700; }

.v3-tools { display: flex; flex: none; align-items: center; gap: .4rem; margin-left: auto; }
.v3-icon, .v3-search-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--bar-fg);
  cursor: pointer;
}
.v3-icon:hover, .v3-search-btn:hover { background: var(--p-char-800); }
.v3-icon svg, .v3-search-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.v3-search-btn__label, .v3-search-btn kbd { display: none; }
.v3-cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--p-orange);
  color: var(--p-orange-ink);
  font-size: .7rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.v3-cart-count:empty, .v3-cart-count[data-count="0"] { display: none; }
/* v4's bands are fixed, light and dark on every page: no switch. */
.v3-theme, .v3-theme-row { display: none; }
.v3-signin, .v3-cta { display: none; min-height: 42px; padding: .5rem 1.05rem; font-size: .92rem; }
.v3-signin { border-color: var(--bar-line); color: var(--bar-fg); }
.v3-signin:hover { border-color: var(--bar-fg); }
.v3-menu-btn { display: inline-grid; }
.v3-menu-btn__close, .v3-menu-btn[aria-expanded="true"] .v3-menu-btn__open { display: none; }
.v3-menu-btn[aria-expanded="true"] .v3-menu-btn__close { display: block; }
.v3-acct { display: none; gap: .1rem; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.v3-acct__plan { color: var(--bar-muted); font-size: .72rem; font-weight: 500; }
.v3-insta-bar { display: block; padding: .35rem 16px; border-top: 1px solid var(--bar-line); color: var(--bar-muted); font-size: .8rem; text-align: center; text-decoration: none; }
.v3-insta-bar b { color: var(--p-orange-hi); }

/* Phones: the wide wordmark steps down so the logo, search, cart and menu fit one line at 360 px. */
@media (max-width: 479px) {
  .v3-header__in { gap: .5rem; }
  .v3-tools { gap: .15rem; }
  .v3-logo { gap: .45rem; font-size: .86rem; font-stretch: 108%; }
  .v3-logo__mark { width: 22px; height: 22px; }
}
@media (max-width: 379px) {
  .v3-logo { font-size: .78rem; font-stretch: 100%; }
  .v3-icon, .v3-search-btn { width: 38px; }
}
@media (min-width: 768px) {
  .v3-search-btn {
    display: inline-flex;
    gap: .5rem;
    width: auto;
    height: 40px;
    padding: 0 .5rem 0 .75rem;
    border: 1px solid var(--bar-line);
    background: var(--p-char-900);
    color: var(--bar-muted);
  }
  .v3-search-btn__label { display: inline; font-size: .85rem; white-space: nowrap; }
  .v3-search-btn kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--bar-line); border-radius: 4px; color: var(--bar-muted); font-family: var(--font-mono); font-size: .72rem; line-height: 1.4; }
}
@media (min-width: 900px) {
  .v3-cta { display: inline-flex; margin-left: .4rem; }
}
@media (min-width: 1200px) {
  .v3-menu { display: flex; }
  .v3-menu-btn, .v3-drawer { display: none; }
  .v3-signin { display: inline-flex; }
  .v3-acct { display: inline-flex; }
  .v3-insta-bar { display: none; }
}
/* Below 1600 px the search box keeps its icon and key, so the menus never wrap. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .v3-search-btn__label { display: none; }
}

.v3-search { padding-block: 1rem; border-top: 1px solid var(--bar-line); background: var(--p-char-900); }
.v3-search[hidden] { display: none; }
.v3-search form { display: flex; gap: .5rem; }
.v3-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--bar-line);
  border-radius: var(--r-md);
  background: var(--p-char-950);
  color: var(--bar-fg);
  font: inherit;
}

/* The phone and tablet menu: each menu folds, the two buttons under the thumb. */
.v3-drawer {
  max-height: calc(100dvh - 64px);
  padding-top: .5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--bar-line);
  background: var(--panel-bg);
}
.v3-drawer[hidden] { display: none; }
.v3-drawer__group { border-bottom: 1px solid var(--bar-line); }
.v3-drawer__group summary, .v3-drawer__link {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 56px;
  color: var(--bar-fg);
  font-size: 1.1rem;
  font-weight: 760;
  font-stretch: 110%;
  list-style: none;
  text-decoration: none;
}
.v3-drawer__link { border-bottom: 1px solid var(--bar-line); }
.v3-drawer__group summary::-webkit-details-marker { display: none; }
.v3-drawer__group summary span, .v3-drawer__link span { overflow: hidden; color: var(--bar-muted); font-size: .85rem; font-weight: 500; font-stretch: 100%; text-overflow: ellipsis; white-space: nowrap; }
.v3-drawer__group summary svg { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur-1) var(--ease); }
.v3-drawer__group[open] summary svg { transform: rotate(180deg); }
.v3-drawer__group ul { display: grid; gap: .1rem; padding-bottom: .8rem; }
@media (min-width: 640px) {
  .v3-drawer__group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.v3-drawer__feature { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; color: var(--p-orange-hi); font-weight: 700; text-decoration: none; }
.v3-drawer__end { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding-block: 1rem 1.2rem; }
.v3-drawer__end .btn { width: 100%; }
.v3-drawer__end .btn--quiet { border-color: var(--bar-line); color: var(--bar-fg); }
.v3-acct-card { display: grid; grid-column: 1 / -1; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--bar-line); border-radius: var(--r-md); color: var(--bar-muted); font-size: .85rem; text-decoration: none; }
.v3-acct-card__name { color: var(--bar-fg); font-weight: 800; }

/* ===================================================================== footer */
.v3-footer { background: var(--bar-bg); color: var(--bar-muted); font-size: .92rem; }
.v3-footer__edge { height: 10px; background: var(--stripes-edge); }
.v3-footer a { color: var(--bar-muted); text-decoration: none; }
.v3-footer a:hover { color: var(--bar-fg); }
.tdb-breadcrumbs-footer { border-bottom: 1px solid var(--bar-line); }
.tdb-breadcrumbs-footer .container { width: min(var(--wrap), 100% - 32px); margin-inline: auto; padding-block: .8rem; padding-inline: 0; }
.tdb-breadcrumbs-footer .breadcrumb { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; }
.tdb-breadcrumbs-footer .breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-right: .6rem; color: var(--p-char-700); }
.v3-footer__deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .75rem; padding-block: 2.4rem 2rem; }
.v3-ftile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: .9rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--bar-line);
  border-radius: var(--r-md);
  background: var(--p-char-900);
  color: var(--bar-fg);
}
.v3-footer .v3-ftile { color: var(--bar-fg); }
.v3-ftile:hover { border-color: var(--p-orange); }
.v3-ftile__ico { display: grid; grid-row: 1 / span 3; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--p-char-800); color: var(--p-orange-hi); }
.v3-ftile__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.v3-ftile__k { color: var(--p-orange-hi); font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.v3-ftile__v { font-size: 1.1rem; font-weight: 800; font-stretch: 110%; }
.v3-ftile__s { min-width: 0; overflow-wrap: anywhere; color: var(--bar-muted); font-size: .83rem; }
.v3-ftile--wa { border-color: var(--p-orange); background: var(--p-orange); }
.v3-footer .v3-ftile--wa, .v3-ftile--wa .v3-ftile__k, .v3-ftile--wa .v3-ftile__s { color: var(--p-orange-ink); }
.v3-ftile--wa .v3-ftile__ico { background: var(--p-orange-ink); color: var(--p-orange); }
.v3-footer__top { display: grid; gap: 2rem; padding-block: 2rem; border-top: 1px solid var(--bar-line); }
@media (min-width: 720px) {
  .v3-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .v3-footer__top { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)) 1.3fr; }
}
.v3-footer__logo { margin: 0 0 .8rem; color: var(--bar-fg); }
.v3-footer__about p:last-child { max-width: 30ch; }
.v3-footer__k { margin: 0 0 .9rem; color: var(--p-orange-hi); font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.v3-footer__col ul { display: grid; gap: .45rem; list-style: none; }
.v3-footer__status { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; padding: .3rem .7rem; border-radius: var(--radius-pill); background: var(--p-char-850); color: var(--bar-fg); font-size: .85rem; }
.v3-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-ok); }
.v3-footer__week { display: grid; overflow: hidden; border: 1px solid var(--bar-line); border-radius: var(--r-md); list-style: none; }
.v3-footer__week li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem .8rem; font-family: var(--font-mono); font-size: .78rem; }
.v3-footer__week li + li { border-top: 1px solid var(--bar-line); }
.v3-footer__week abbr { color: var(--bar-fg); font-weight: 600; text-decoration: none; }
.v3-footer__week li.is-today { background: var(--p-char-850); color: var(--bar-fg); box-shadow: inset 3px 0 0 var(--p-orange); }
.v3-footer__note { margin: .8rem 0 0; font-size: .8rem; }
.v3-footer__trust { display: flex; flex-wrap: wrap; gap: .6rem 2rem; padding-block: 1.4rem; border-top: 1px solid var(--bar-line); list-style: none; }
.v3-footer__trust li { display: inline-flex; align-items: center; gap: .55rem; color: var(--bar-fg); }
.v3-footer__ti { color: var(--p-orange-hi); }
.v3-footer__ti svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; vertical-align: middle; }
.v3-footer__langs { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding-block: 1rem; border-top: 1px solid var(--bar-line); font-size: .85rem; }
.v3-footer__langs a[aria-current] { color: var(--bar-fg); font-weight: 700; }
.v3-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding-block: 1.4rem 2rem; border-top: 1px solid var(--bar-line); font-size: .82rem; }
.v3-footer__base p { max-width: 70ch; margin: 0; }
.v3-footer__base p a { color: var(--bar-fg); text-decoration: underline; text-underline-offset: 2px; }
.v3-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

/* The cookie choice and the cart's exit offer. */
.v3-consent {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: min(420px, calc(100% - 32px));
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--bar-line);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  color: var(--bar-fg);
  box-shadow: var(--shadow-product);
  font-size: .9rem;
}
.v3-consent[hidden] { display: none; }
.v3-consent p { margin-bottom: .8rem; }
.v3-consent .btn { min-height: 40px; }
.v3-consent .btn--quiet { border-color: var(--bar-line); color: var(--bar-fg); }
.v3-dialog { width: min(460px, calc(100% - 32px)); padding: 1.6rem; border: 0; border-radius: var(--r-lg); background: var(--p-white); color: var(--p-ink); }
.v3-dialog::backdrop { background: var(--scrim); }
.v3-dialog form { display: grid; gap: .6rem; }
.v3-dialog input[type="email"] { min-height: 48px; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); font: inherit; }
.v3-x { position: absolute; top: 10px; right: 10px; color: var(--p-ink); }
.v3-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ====================================================================== hero */
/* A dark band, the words on the left and the product on the right with no frame round it. */
.hero { padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem); overflow: clip; }
.hero__in { display: grid; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 1000px) {
  .hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.hero .lead { margin: 1.3rem 0 0; color: var(--muted); }
.hero__shot { position: relative; margin: 0; }
.hero__shot img { display: block; width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-product); }
.crumbs { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin: 0 0 1.4rem; list-style: none; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.crumbs li + li::before { content: "/"; margin-right: .6rem; color: var(--line-strong); }

/* ========================================================== figures strip */
/* MMT's strip: each figure behind a short orange rule, its words in mono under it. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.4rem 2rem; list-style: none; }
.stats li { display: grid; align-content: start; gap: .25rem; padding-left: 1rem; border-left: 3px solid var(--btn-bg); }
.stats b { color: var(--fg); font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 850; font-stretch: 118%; line-height: 1; }
.stats span { color: var(--muted); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }

/* ====================================================================== cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; list-style: none; }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--fg);
}
.band--light .card { box-shadow: var(--shadow-card); }
.card h3 { margin: 0; font-size: 1.15rem; font-weight: 760; font-stretch: 108%; line-height: 1.25; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.card .go { margin-top: auto; padding-top: .6rem; }
.card__n { color: var(--accent-ink); font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; }
.card__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--btn-bg); color: var(--btn-ink); }
.card__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.card--big { justify-content: center; border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink); }
.card--big h3, .card--big p { color: var(--btn-ink); }
.card .card__big { color: var(--btn-ink); font-family: var(--font-display); font-size: clamp(2.8rem, 2rem + 2.4vw, 4rem); font-weight: 900; font-stretch: 122%; line-height: 1; }

/* ============================================================= price cards */
/* The four doors: each card's name, note, price, line, button and list sit on the same row as its neighbours'. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; align-items: stretch; }
.plan {
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: .55rem;
  align-content: start;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--fg);
}
.band--light .plan { box-shadow: var(--shadow-card); }
.plan--lead { border-color: var(--btn-bg); box-shadow: var(--glow-pick); }
.plan__ribbon {
  position: absolute;
  top: 0;
  left: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 0;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateY(-50%);
}
.plan__name { margin: 0; font-size: 1.45rem; font-weight: 820; font-stretch: 114%; }
.plan__for { margin: 0; color: var(--muted); font-size: .95rem; }
.plan__price { align-self: end; margin: .4rem 0 0; color: var(--muted); font-size: .95rem; }
.plan__price b { color: var(--fg); font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); font-weight: 880; font-stretch: 118%; letter-spacing: -.01em; }
.plan__sub { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.plan > p:has(.btn) { margin: .4rem 0 0; }
.plan__gets { padding-top: .9rem; border-top: 1px solid var(--line); font-size: .92rem; }
.plans__note { max-width: 62rem; margin: 1.6rem 0 0; color: var(--muted); }
.plans__note a, .lead a { color: var(--fg); font-weight: 700; text-underline-offset: 3px; }
.rule-line { margin: 0 0 1.8rem; padding: .9rem 1.1rem; border-left: 3px solid var(--btn-bg); background: var(--surface); color: var(--fg); font-size: .98rem; }

/* ===================================================================== steps */
/* A process in numbered steps, read left to right (the shop's three connections). */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.6rem 1.4rem; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-top: 1.1rem; border-top: 1px solid var(--line-strong); }
.steps__n { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: .8rem; border: 2px solid var(--btn-bg); border-radius: 50%; color: var(--accent-ink); font-family: var(--font-mono); font-size: .8rem; font-weight: 600; }
.steps h3 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 780; font-stretch: 110%; }
.steps p { margin: 0; color: var(--muted); font-size: .95rem; }
/* Six facts read as two rows of three, never five and one. */
.steps--six { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 900px) {
  .steps--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.steps__tag { display: block; margin-bottom: .35rem; color: var(--accent-ink); font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* ============================================================ text and media */
.duo { display: grid; align-items: center; gap: clamp(1.8rem, 5vw, 4rem); }
@media (min-width: 960px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .duo--flip > :first-child { order: 2; }
}
.duo__media { margin: 0; }
.duo__media img { display: block; width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-product); }
.items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .9rem 1.6rem; margin-top: 1.4rem; list-style: none; }
.items li { padding-top: .8rem; border-top: 1px solid var(--line); }
.items b { display: block; margin-bottom: .2rem; color: var(--fg); font-weight: 720; }
.items span { color: var(--muted); font-size: .92rem; line-height: 1.5; }

/* =================================================================== questions */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3, .faq summary span { flex: 1 1 auto; margin: 0; color: var(--fg); font-size: 1.08rem; font-weight: 720; font-stretch: 104%; }
.faq summary::after { content: "+"; flex: none; color: var(--accent-ink); font-family: var(--font-mono); font-size: 1.3rem; line-height: 1; transition: transform var(--dur-1) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 62rem; margin: 0 0 1.2rem; color: var(--muted); }
.faq-split { display: grid; gap: 2rem; }
@media (min-width: 960px) {
  .faq-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
}

/* =========================================================== partners strip */
.marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem 1.4rem; align-items: center; list-style: none; }
.marks a { display: grid; place-items: center; height: 64px; padding: .6rem; border-radius: var(--r-sm); text-decoration: none; }
.marks img { max-height: 44px; width: auto; filter: grayscale(1); opacity: .75; transition: opacity var(--dur-2) var(--ease), filter var(--dur-2) var(--ease); }
.marks a:hover img, .marks a:focus-visible img { filter: none; opacity: 1; }
.marks__word { color: var(--muted); font-size: .95rem; font-weight: 800; font-stretch: 100%; text-align: center; white-space: nowrap; }

/* ==================================================================== close */
.close { text-align: center; }
.close .acts { justify-content: center; }
.close .lead { margin-inline: auto; }
.xsell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.xsell h3 { margin: 0 0 .3rem; }
.xsell p { margin: 0; max-width: 46rem; color: var(--muted); }

/* ===================================================== the hosting ways (run-ways) */
.hp-ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.hp-rule { margin: 0; padding: .9rem 1.1rem; border-left: 3px solid var(--btn-bg); background: var(--surface); color: var(--fg); }
.hp-opt { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.hp-opt__head { max-width: 50rem; margin-bottom: 1.2rem; }
.hp-opt__head h3 { margin: 0 0 .4rem; font-size: 1.5rem; font-weight: 820; font-stretch: 114%; }
.hp-opt__head p { margin: 0; color: var(--muted); }
.hp-opt__tag { margin-bottom: .5rem; color: var(--accent-ink); font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hp-opt__head .hp-opt__tag { color: var(--accent-ink); }
.hp-opt__compare { margin-top: .5rem; font-size: .9rem; }
.hp-opt__own { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (min-width: 960px) {
  .hp-opt__own { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
}
.hp-way { position: relative; display: grid; gap: .55rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.hp-way--lead { border-color: var(--btn-bg); }
.hp-way__ribbon { justify-self: start; margin: 0; padding: .15rem .6rem; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-ink); font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hp-way__name { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.2rem; font-weight: 800; font-stretch: 110%; }
.hp-way__note { margin: 0; color: var(--muted); font-size: .92rem; }
.hp-way__price { margin: 0; color: var(--muted); font-size: .9rem; }
.hp-way__price b { color: var(--fg); font-family: var(--font-display); font-size: 1.9rem; font-weight: 860; font-stretch: 116%; }
.hp-way__facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; font-size: .88rem; }
.hp-way__facts dt { color: var(--muted); }
.hp-way__facts dd { margin: 0; color: var(--fg); }
.hp-way__here { margin: 0; color: var(--accent-ink); font-family: var(--font-mono); font-size: .72rem; }
.hp-meter { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line); }
.hp-meter span { display: block; width: 100%; height: 100%; background: var(--btn-bg); }
.hp-ico { display: inline-grid; place-items: center; color: var(--accent-ink); }
.hp-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.hp-opt__gets { display: grid; gap: .5rem; list-style: none; }
.hp-opt__gets li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; }
.hp-ico--ok { margin-top: .15rem; }
.hp-opt__extra { margin: 1rem 0 0; color: var(--muted); font-size: .92rem; }
.hp-servers { display: grid; gap: .6rem; margin-top: 1.2rem; }
.hp-servers__head h4 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .2rem; font-size: 1rem; }
.hp-servers__head p { margin: 0; font-size: .88rem; }
.hp-server { display: grid; gap: .35rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--fg); text-decoration: none; }
.hp-server:hover { border-color: var(--btn-bg); }
.hp-server__name { font-weight: 800; }
.hp-server__use { color: var(--muted); font-size: .88rem; }
.hp-server__spec { display: flex; flex-wrap: wrap; gap: .35rem; }
.hp-server__eur { color: var(--muted); font-size: .88rem; }
.hp-server__eur b { color: var(--fg); }
.hp-or { display: flex; align-items: center; gap: 1rem; margin: 0; color: var(--muted); font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; }
.hp-or::before, .hp-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.hp-web { display: grid; gap: .6rem 1.4rem; align-items: center; padding: 1.3rem 1.4rem; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
@media (min-width: 900px) {
  .hp-web { grid-template-columns: auto 1fr auto auto; }
}
.hp-web h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.hp-web p { margin: 0; color: var(--muted); font-size: .92rem; }
.hp-web__price { color: var(--fg); white-space: nowrap; }

/* ===================================================================== films */
.clip { margin: 0; }
.clip__frame { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--p-char-950); box-shadow: var(--shadow-product); aspect-ratio: 16 / 9; }
.clip__frame img, .clip__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The film taken in the band's own scene: dark on a dark band, light on a light one. */
.band--dark .clip__l, .band--light .clip__d { display: none; }
.clip__toggle { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: none; color: var(--fg); font: inherit; font-size: .85rem; cursor: pointer; }
.clip__toggle[hidden] { display: none; }
.clip__ico svg { width: 14px; height: 14px; fill: currentColor; }
.clip[data-state="playing"] .clip__ico--play, .clip:not([data-state="playing"]) .clip__ico--pause { display: none; }
.clip figcaption { margin-top: .5rem; color: var(--muted); font-size: .85rem; }

/* ================================================================ phone bar */
/* On a phone, the page's two actions stay under the thumb once the hero has scrolled away (v4/js/site.js). */
.phonebar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  gap: .6rem;
  padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bar-line);
  background: var(--bar-bg);
  transform: translateY(110%);
  transition: transform var(--dur-2) var(--ease);
}
.phonebar[hidden] { display: none; }
.phonebar.is-on { transform: none; }
.phonebar .btn { flex: 1 1 0; min-height: 46px; padding-inline: .6rem; font-size: .95rem; }
.phonebar .btn--ghost { border-color: var(--bar-line); color: var(--bar-fg); }
@media (min-width: 900px) {
  .phonebar { display: none; }
}

/* ================================================================== motion */
/* Arrivals only, once, and none for a visitor who asked for less (v4/js/site.js adds .is-in). */
.arrive { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.arrive.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms; animation-duration: .01ms; scroll-behavior: auto; }
  .arrive { opacity: 1; transform: none; }
}

/* ================================================================ fields */
.field-in, .tdb-dg-f input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
}
.field-in:focus-visible, .tdb-dg-f input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.tdb-dg-f input[aria-invalid="true"] { border-color: var(--p-bad); }

/* ========================================================== the demo sign-up */
/* Another plugin's form (tdb-demo-gate): it shows and hides itself with the hidden attribute and locks the page. */
.tdb-dg {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 16px;
}
.tdb-dg[hidden] { display: none; }
html.tdb-dg-lock { overflow: hidden; }
.tdb-dg-back { position: absolute; inset: 0; background: var(--scrim); }
.tdb-dg-box {
  --bg: var(--p-paper);
  --surface: var(--p-white);
  --fg: var(--p-ink);
  --muted: var(--p-ink-2);
  --focus: var(--p-orange-deep);
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  border-top: 6px solid var(--p-orange);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-product);
}
.tdb-dg-box h2 { margin: 0 2.6rem .5rem 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); font-weight: 830; font-stretch: 116%; line-height: 1.1; }
.tdb-dg-lead { margin: 0 0 1.2rem; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.tdb-dg-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.tdb-dg-x:hover, .tdb-dg-x:focus-visible { background: var(--p-paper-2); color: var(--fg); }
.tdb-dg-f { margin-bottom: .9rem; }
.tdb-dg-f label { display: block; margin-bottom: .35rem; color: var(--fg); font-size: .9rem; font-weight: 700; }
.tdb-dg-hint { margin: .35rem 0 0; color: var(--muted); font-size: .82rem; }
.tdb-dg-err { margin: .35rem 0 0; color: var(--p-bad); font-size: .85rem; font-weight: 600; }
.tdb-dg-err:empty { display: none; }
.tdb-dg-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tdb-dg-go {
  width: 100%;
  min-height: 52px;
  margin-top: .4rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 760;
  cursor: pointer;
}
.tdb-dg-go:hover { background: var(--p-orange-hi); }
.tdb-dg-go[disabled] { opacity: .7; cursor: progress; }
.tdb-dg-priv { margin: .9rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.tdb-dg-priv a { color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .tdb-dg:not([hidden]) .tdb-dg-box { animation: v4-rise .2s var(--ease); }
}
@keyframes v4-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ===================================================== v3's pages, drawn in v4 */
/* A v3 template on v4's system (v4/bootstrap.php): its page head is a dark band like a v4 hero, its sunk bands are
   charcoal between paper ones, and its headings take the wide face. Its own sheet lays out its parts. */
main:not(.v4-page) .page-head {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.4rem, 5vw, 4rem);
  border-bottom: 0;
  background: var(--band-dark-fill);
  color: var(--fg);
}
main:not(.v4-page) .page-head h1 {
  max-width: 20ch;
  color: var(--fg);
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  font-weight: 860;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -.015em;
}
main:not(.v4-page) .page-head p, main:not(.v4-page) .page-head .lede { color: var(--muted); }
.band--sunk { background: var(--band-dark-fill); color: var(--fg); }
.band + .band { border-top: 0; }
main h1, main h2 { font-weight: 820; font-stretch: 114%; letter-spacing: -.012em; }
main h3, main h4 { font-weight: 740; font-stretch: 104%; }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.06; }
.lede { color: var(--muted); }