/* ===== WaTo — inner / service-page styles (pages.css) =====
   Loaded on service/interior pages, alongside the shared styles.css.
   Homepage-only styles live in home.css.

   Modern CSS: nesting, logical properties, :is(), fluid units. */

/* --- Hero band: breadcrumb + section sub-nav + character --- */
.svc-head {
  position: relative; overflow: visible; padding: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(18,23,42,.05) 1px, transparent 0) 0 0/1.125rem 1.125rem,
    linear-gradient(180deg, #eaf5fe 0%, #f6fbff 60%, #ffffff 100%);
  border-bottom: 1px solid #e1e9f2;
}

.svc-head .container { position: relative; z-index: 1; padding-block: 0.625rem; }
/* Character floats just left of the breadcrumb */
.svc-hero-char {
  position: absolute; left: calc(50% - 44.5625rem); top: 0.625rem;
  height: 9.375rem; width: auto; z-index: 0; pointer-events: none; user-select: none;
  filter: drop-shadow(0 0.375rem 0.75rem rgba(18,23,42,.16));
}
@media (max-width: 1399px) { .svc-hero-char { display: none; } }

.breadcrumb {
  font-size: .82rem; color: #6b7890; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4375rem;

  & a { color: var(--cyan-text); text-decoration: none; }
  & a:hover { text-decoration: underline; }
  & span[aria-current] { color: #6b7890; }
}
.subnav {
  display: flex; gap: 0.5rem; overflow-x: auto; margin-block-start: 0.375rem;
  padding-block-end: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; user-select: none;
}

.subnav::-webkit-scrollbar { display: none; height: 0; }

.subnav.dragging { cursor: grabbing; }

.subnav a {
  white-space: nowrap; font-size: .85rem; font-weight: 600; color: #33405a;
  background: #eef3f9; border: 1px solid #e2e9f2; padding: 0.4375rem 0.8125rem;
  border-radius: 999px; text-decoration: none; pointer-events: auto;
}

.subnav a:hover { background: #e3edf6; color: var(--cyan-text); }
.subnav a.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Subnav wrapper with scroll buttons */
.subnav-wrapper {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: 0.375rem;
  position: relative;
  /* min-width: 0 on both, or the pill row sizes to its content and the
     whole page scrolls sideways on tablets and phones (it did until 2026-10-04). */
  min-width: 0; max-width: 100%;
}
.subnav-wrapper .subnav { flex: 1 1 auto; min-width: 0; }
.svc-head--v2 .subnav-wrapper { flex: 1 1 100%; }

.subnav-scroll-btn {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid #e2e9f2;
  background: #eef3f9;
  color: #6b7890;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-2) var(--e-soft);
  padding: 0;
  line-height: 1;
  border-radius: 0.375rem;
  opacity: 1;
}

.subnav-scroll-btn:hover:not(.hidden) {
  background: #e3edf6;
  color: var(--cyan-text);
  border-color: #cfe4f5;
}

.subnav-scroll-btn:active:not(.hidden) {
  background: #d4e3f0;
}

.subnav-scroll-btn.hidden {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Fade indicators removed — cleaner look */

/* --- 70 / 30 body --- */
.svc-body { padding-block: 2.75rem 0.625rem; }
/* Scoped to .svc-body: styles.css has a generic :is(.svc-grid, .svc-grid.cols-2)
   rule that otherwise wins and forced 50/50 (then half-width) layouts on tablets. */
.svc-body .svc-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 2.75rem; align-items: start;
}
.svc-main {
  min-width: 0;

  & > h2 { margin: 2.5rem 0 1.125rem; font-size: 1.35rem; }
  & h1 span { color: var(--cyan-text); }
}
.svc-lead { font-size: 1.25rem; font-weight: 500; line-height: 1.65; color: #33405a; margin: 0.375rem 0 0.5rem; }
.svc-updated { font-size: 0.85rem; color: var(--muted); margin: 0 0 1rem; }
.sv-price-from { font-size: 0.95rem; color: var(--muted); margin: 0.75rem 0 1.25rem; }
.sv-price-from a { white-space: nowrap; }
.svc-define {
  background: rgba(55, 189, 242, .06); border-left: 4px solid var(--cyan); border-radius: 0 0.625rem 0.625rem 0;
  padding: 1.5rem 1.75rem; margin: 1.375rem 0 0.375rem;

  & h2 { margin: 0 0 0.5rem; }
  & p { margin: 0; line-height: 1.7; }
}
.svc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 0.375rem 0; }
.svc-card {
  background: #fff; border: 1px solid #e7ecf3; border-radius: 0.75rem; padding: 1.5rem;

  & h3 { margin: 0 0 0.375rem; font-size: 1.1rem; font-weight: 700; color: var(--navy); }
  & p { margin: 0; font-size: .92rem; line-height: 1.6; color: #44506a; }
}
.svc-list {
  margin: 0.375rem 0; padding: 0; list-style: none;

  & li {
    position: relative; padding: 0.4375rem 0 0.4375rem 1.75rem;
    line-height: 1.6; border-bottom: 1px solid #eef2f7;

    &::before { content: "\203A"; position: absolute; left: 0.4375rem; color: var(--cyan-text); font-weight: 700; }
  }
  &.check li::before { content: "\2713"; }
}
.svc-steps { margin: 0.375rem 0; padding-inline-start: 1.375rem; }
.svc-steps li { padding: 0.4375rem 0 0.4375rem 0.375rem; line-height: 1.6; }
.svc-cta {
  background: var(--navy); color: #fff; border-radius: var(--radius); padding: 1.75rem; margin: 2.125rem 0 0.5rem;

  & h2 { color: #fff; margin: 0 0 0.5rem; }
  & p { color: #c5d2e6; margin: 0 0 1rem; }
}
.svc-cta-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- Right sidebar (ads / references / CTA) --- */
.svc-side {
  position: sticky; top: 5.375rem; display: grid; gap: 1.375rem;
}
.side-card {
  background: #fff; border: 1px solid #e7ecf3; border-radius: 0.75rem; padding: 1.5rem;

  & h3 { margin: 0 0 0.625rem; font-size: 1.06rem; font-weight: 700; color: var(--navy); }
  & > p { margin: 0 0 0.75rem; font-size: .9rem; line-height: 1.55; color: #44506a; }
  & .btn { display: block; text-align: center; margin-block-start: 0.5rem; }
}
.side-links {
  display: grid; gap: 2px;

  & a {
    display: block; padding-block: 0.4375rem; font-size: .92rem; color: var(--cyan-text);
    text-decoration: none; border-bottom: 1px solid #eef2f7;

    &:last-child { border-bottom: 0; }
    &:hover { padding-inline-start: 3px; }
  }
}
.side-note { font-size: .85rem; color: #6b7890; }
.side-cta { background: var(--navy); border-color: var(--navy); }
.side-cta h3 { color: #fff; }
.side-cta > p { color: #c5d2e6; }
.side-ad { background: linear-gradient(160deg, #f0fbff, #e3f4fe); border-color: #cfeaf9; }
.ad-tag { display: inline-block; background: var(--cyan); color: #042a3b; font-weight: 800; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 0.5625rem; border-radius: 999px; margin-block-end: 0.5rem; }
.ad-link { font-weight: 700; color: var(--cyan-text); text-decoration: none; }
.ad-link:hover { text-decoration: underline; }
.side-trust { background: #f4f8fc; text-align: center; }
.side-trust strong { display: block; color: var(--navy); font-family: var(--head); }
.side-trust span { display: block; font-size: .85rem; color: #6b7890; margin-block-start: 0.25rem; }

@media (max-width: 880px) {
  .svc-body .svc-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .svc-side { display: none; }
  .svc-cards { grid-template-columns: 1fr; }
}

.svc-main > h2:not(:first-of-type) {
  padding-block-start: 1rem;
  border-top: 1px solid #e7ecf3;
}

/* --- Build-time layout variants (structural only — never color/radius/theme) --- */
@media (min-width: 881px) {
  /* Variant 1: reversed asymmetry — sidebar visually first, DOM order unchanged */
  .svc-body--v1 .svc-grid { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); }
  .svc-body--v1 .svc-main { order: 2; }
  .svc-body--v1 .svc-side { order: 1; }
}

/* Variant 2: compact head — breadcrumb + subnav collapse into one denser row */
.svc-head--v2 .container {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; padding-block: 0.625rem;
}
.svc-head--v2 .subnav-wrapper,
.svc-head--v2 .subnav { margin-block-start: 0; }

/* ===== Pillar / hub page ===== */
.pillar-hero {
  padding-block: 2.375rem 0.625rem;

  & h1 { margin: 0.5rem 0 0.875rem; }
  & .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 0.25rem; }
}
.pillar-lead { font-size: 1.15rem; line-height: 1.6; color: #33405a; max-width: 70ch; margin: 0 0 1.25rem; }
.pillar-services { padding-block: 0.5rem 1.125rem; }
.svc-group {
  margin: 0 0 2.375rem; scroll-margin-top: 5.625rem;

  & > h2 { margin: 0 0 1rem; padding-block-end: 0.625rem; border-bottom: 2px solid #e4ebf3; }
  & > h2::before { content: ""; display: inline-block; width: 1.375rem; height: 3px; background: var(--cyan); border-radius: 2px; vertical-align: middle; margin-inline-end: 0.75rem; }
}
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); gap: 1rem; }
.pillar-card {
  display: block; background: #fff; border: 1px solid #e7ecf3; border-radius: 0.75rem;
  padding: 1.125rem; text-decoration: none;
  transition: transform var(--t-1) var(--e-spring), box-shadow var(--t-1) var(--e-out), border-color var(--t-1) var(--e-out);

  &:hover { transform: translateY(var(--lift)); box-shadow: 0 0.625rem 1.5rem rgba(18,23,42,.10); border-color: rgba(55,189,242,.5); }
  & h3 { margin: 0 0 0.375rem; font-size: 1.02rem; color: var(--navy); }
  & p { margin: 0; font-size: .9rem; line-height: 1.55; color: #44506a; }
}

/* Pillar section nav: sticky left side-menu (wide) → horizontal jump-bar (narrow) */
.pillar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 13.75rem; gap: 2.5rem; align-items: start; }
.pillar-main { min-width: 0; grid-column: 1; }
.pillar-intro { font-size: 1.02rem; line-height: 1.6; color: #44506a; margin: 0 0 1.625rem; }
.pillar-nav {
  grid-column: 2; position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 3px;

  & a {
    display: block; font-size: .9rem; font-weight: 600; color: #33405a; text-decoration: none;
    padding: 0.5rem 0.75rem; border-radius: 0.5rem; border-left: 3px solid transparent;

    &:hover { background: #eef3f9; color: var(--cyan-text); border-left-color: var(--cyan); }
  }
}
.pillar-nav-label { font-family: var(--head); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8a97ac; margin-block-end: 0.5rem; }
@media (max-width: 880px) {
  .pillar-layout { grid-template-columns: 1fr; gap: 0.875rem; }
  .pillar-nav { display: none; }
}

/* ===== Core / contact page ===== */
.contact-body { padding-block: 0.5rem 1.625rem; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.75rem; align-items: start; }
:is(.contact-details, .contact-formwrap) h2 { margin: 0 0 0.875rem; }
.contact-list {
  list-style: none; padding: 0; margin: 0 0 1.125rem;

  & li { display: flex; gap: 0.875rem; align-items: baseline; padding-block: 0.625rem; border-bottom: 1px solid #eef2f7; }
  & a { color: var(--cyan-text); text-decoration: none; font-weight: 600; }
  & a:hover { text-decoration: underline; }
}
.cl-label { flex: 0 0 7.375rem; font-family: var(--head); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: #8a97ac; }
.contact-note { font-size: .92rem; color: #44506a; line-height: 1.6; margin: 0 0 1rem; }
.contact-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
/* The geo gate (gate.html, filled in by gate.php): the pass-through form under the hero. */
.gate-hero { padding-block-end: 1.5rem; }
.gate-pass { & h2 { margin: 0 0 .5rem; } & p { max-width: 70ch; } }
.gate-fine { font-size: .88rem; color: #5a6782; & code { font-size: .85em; word-break: break-all; } }
.contact-formwrap { background: #f7fafd; border: 1px solid #e7ecf3; border-radius: var(--radius); padding: 1.625rem; }
.form-note { font-size: .92rem; color: #44506a; margin: 0 0 1rem; }
.contact-form {
  & .field { margin: 0 0 0.875rem; }
  & label { display: block; font-family: var(--head); font-weight: 600; font-size: .82rem; color: var(--navy); margin: 0 0 0.375rem; }
  & label .opt { color: #8a97ac; font-weight: 400; }
  & :is(input, textarea) { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid #d6deea; border-radius: 0.5625rem; padding: 0.6875rem 0.8125rem; box-sizing: border-box; }
  & :is(input, textarea):focus { outline: 2px solid var(--cyan-text); outline-offset: 1px; border-color: var(--cyan-text); }
  & textarea { resize: vertical; }
  & button { margin-block-start: 0.25rem; }
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.form-fineprint { font-size: .78rem; color: #8a97ac; margin: 0.625rem 0 0; }
.contact-map-sec { padding-block-end: 1.625rem; }
.contact-map {
  height: 16.25rem; border-radius: var(--radius); border: 1px solid #e1e9f2;
  display: grid; place-items: center; color: #5a6a82; font-family: var(--head); font-weight: 600;
  text-align: center; padding: 1rem;
  background: radial-gradient(circle at 1px 1px, rgba(18,23,42,.06) 1px, transparent 0) 0 0/1.25rem 1.25rem, linear-gradient(135deg, #eaf5fe, #f6fbff);
}
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: 1.625rem; }
  .field-row { grid-template-columns: 1fr; }
  .cl-label { flex-basis: 6rem; }
}

/* ---------- Page entrance motion (matches home.css heroIn) ---------- */
@keyframes pageIn { from { opacity: 0; transform: translateY(1.125rem); } to { opacity: 1; transform: none; } }
:is(.svc-head .container, .svc-main, .svc-side, .pillar-hero .container, .contact-grid) {
  animation: pageIn .7s cubic-bezier(.2,.7,.2,1) both;
}
:is(.svc-main, .pillar-hero .container, .contact-grid) { animation-delay: .08s; }
.svc-side { animation-delay: .16s; }
/* Arriving on a #link: the column holding the target fades in without the rise.
   The browser scrolls to the target while the column still sits 18px low, so
   after the rise the target was 18px under the sticky header. */
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
:is(.svc-head .container, .svc-main, .svc-side, .pillar-hero .container, .contact-grid):has(:target) { animation-name: pageFade; }

/* ---------- Server status board ---------- */
.status-groups { display: grid; gap: 1.25rem; margin-block: 1.25rem; }
.status-group { background: #f7fafd; border: 1px solid #e7ecf3; border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.status-group h3 { margin: 0 0 0.75rem; }
.status-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.status-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: #fff; border: 1px solid #e7ecf3; border-radius: 8px; padding: 0.625rem 0.875rem; font-weight: 600; }
.status-ok { display: inline-flex; align-items: center; gap: 0.45rem; color: #16a34a; font-size: 0.85rem; font-weight: 700; }
.status-ok::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.45); animation: statuspulse 2.4s ease-out infinite; }
.advisory-list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.advisory-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; background: #fff; border: 1px solid #e7ecf3; border-radius: 8px; padding: 0.75rem 0.875rem; }
.advisory-title { font-weight: 600; }
.advisory-meta { display: block; margin-top: 0.2rem; color: #5f6b7a; font-size: 0.85rem; }
@keyframes statuspulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 .5rem rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

/* ---------- AI answer block ---------- */
.ai-answer {
  background: rgba(55, 189, 242, .06); border-left: 4px solid var(--cyan); padding: 1.25rem 1.5rem; border-radius: 6px; margin-block: 1.25rem;
}
.ai-answer h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.ai-answer p { margin: 0; line-height: 1.6; }

/* ---------- Sources section ---------- */
.sources-section {
  margin-block: 1.5rem; padding-top: 1rem; border-top: 1px solid #e7ecf3;
}
.sources-section h3 { margin: 0 0 0.75rem; }
.sources-section ul { margin: 0; padding: 0; list-style: none; }
.sources-section li { margin: 0.5rem 0; }
.sources-section a { color: var(--cyan-text); text-decoration: none; }
.sources-section a:hover { text-decoration: underline; }

/* Focus layout (form and help pages, e.g. /service/currency/): no sidebar,
   no character header. Everything runs the full container width, lined up
   with the logo, forms included (Wato, 2026-10-17: a narrow form left an
   empty strip beside it). Long running text keeps a readable line length. */
.svc-head--focus { padding-block: 1rem .25rem; }
.svc-body--focus { padding-top: var(--space-md); }
.svc-body--focus .svc-main { max-width: none; margin-inline: 0; min-width: 0; }
.svc-body--focus .svc-main > :is(p, ul, ol),
.svc-section-body > p,
.svc-section-body > ul,
.svc-section-body > ol { max-width: 52rem; }
/* Screenshot in a how-to guide (sections[].body HTML): framed, captioned,
   same column width as the prose. Inside .sv-steps it sits under the step text. */
.svc-section-body figure.guide-shot { margin: .75rem 0 1.25rem; max-width: 52rem; }
.svc-section-body figure.guide-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: .5rem; box-shadow: var(--shadow-sm); }
.svc-section-body figure.guide-shot figcaption { font-size: .85rem; color: var(--muted); margin-top: .4rem; }
.svc-section-body .sv-steps figure.guide-shot { margin-top: .6rem; margin-bottom: .25rem; }
.svc-section-body .guide-shot-credit { font-size: .85rem; color: var(--muted); max-width: 52rem; }
.svc-body--focus :is(.svc-form, .po-form, .eq-form) { max-width: none; }

/* /service/ hub: four big cards, one per team. The character stands on a
   disc and steps up out of the card, the same staff you meet on the service
   pages. Receipt paper is a separate wide button underneath. */
.svc-hub-title-main { margin-bottom: .35rem; }
.svc-hub-lead { color: var(--muted); margin: 0 0 1.75rem; }
/* Hub: a 6-column grid so rows run 3, 3, then 2 wider cards. Upright cards:
   the character stands on a disc and steps up out of the top. */
.svc-hub { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3.25rem 1.25rem; margin: 3.5rem 0 1rem; }
.svc-hub-card {
  grid-column: span 2; position: relative; display: flex; flex-direction: column; gap: .9rem;
  padding: 0 1.3rem 1.3rem; border: 2px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--soft-2) 0%, var(--white) 48%); color: var(--text); text-decoration: none;
  transition: border-color var(--t-1) var(--e-out), transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.svc-hub-card:nth-child(n+7) { grid-column: span 3; }
.svc-hub-card:hover, .svc-hub-card:focus-visible { border-color: var(--cyan); transform: translateY(var(--lift)); box-shadow: var(--shadow); }
.svc-hub-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.svc-hub-text { display: flex; flex-direction: column; gap: .45rem; flex: 1; position: relative; z-index: 1; }
.svc-hub-name { font-family: var(--head); font-weight: 800; font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.15; color: var(--navy); }
.svc-hub-desc { font-size: .9rem; color: var(--body); }
.svc-hub-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; }
.svc-hub-chips span { padding: .15rem .55rem; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: .76rem; font-weight: 600; color: var(--muted); }
.svc-hub-go { margin-top: auto; padding-top: .35rem; font-family: var(--head); font-weight: 700; font-size: .95rem; color: var(--cyan-text); }
.svc-hub-card:hover .svc-hub-go span { margin-left: .2rem; }
.svc-hub-go span { transition: margin var(--t-2) var(--e-out); }
/* The disc sits at the card's top edge; the character overflows above it. */
/* The image is pinned to the bottom of a fixed-height slot, so it can only
   overflow upwards (out of the card top), never down into the title.
   TOOLS/e2e-service-art.js measures this at four widths. */
.svc-hub-art { position: relative; display: block; height: 9.25rem; margin-top: -2.25rem; margin-bottom: .35rem; }
.svc-hub-art::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 7rem; height: 7rem; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark));
  opacity: .9; transition: transform var(--t-3) var(--e-out);
}
.svc-hub-art img {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 11rem; width: auto; max-width: none;
  filter: drop-shadow(0 .6rem .8rem rgba(18,23,42,.22)); transition: transform var(--t-3) var(--e-spring);
}
.svc-hub-icon { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: grid; place-items: center; width: 7rem; height: 7rem; color: var(--white); }
.svc-hub-icon svg { width: 3rem; height: 3rem; transition: transform var(--t-3) var(--e-spring); }
.svc-hub-card:hover .svc-hub-art img { transform: translateX(-50%) translateY(-.4rem) scale(1.04); }
.svc-hub-card:hover .svc-hub-icon svg { transform: translateY(-.4rem) scale(1.04); }
.svc-hub-card:hover .svc-hub-art::before { transform: translateX(-50%) scale(1.06); }
.svc-hub-note { font-size: .85rem; color: var(--muted); margin: 0 0 2rem; }
.svc-hub-sub { margin: 0 0 .75rem; }
.svc-hub-paper {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.5rem; padding: 1.4rem 1.75rem 1.4rem 1.25rem;
  border-radius: var(--radius-lg); text-decoration: none; color: var(--white); margin-bottom: var(--space-lg);
  background: radial-gradient(circle at 12% 20%, rgba(55,189,242,.35), transparent 45%), linear-gradient(120deg, var(--navy) 0%, #1b2a4a 60%, var(--blue) 140%);
  box-shadow: var(--shadow); transition: transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.svc-hub-paper:hover, .svc-hub-paper:focus-visible { transform: translateY(var(--lift)); box-shadow: var(--shadow-cyan); }
.svc-hub-paper:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.svc-hub-paper-art { flex: none; width: 9.5rem; }
.svc-hub-roll { display: block; width: 100%; height: auto; filter: drop-shadow(0 .5rem .8rem rgba(0,0,0,.3)); transition: transform var(--t-3) var(--e-spring); }
.svc-hub-paper:hover .svc-hub-roll { transform: rotate(-4deg) translateY(-.2rem); }
.svc-hub-paper-text { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.svc-hub-paper-name { font-family: var(--head); font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.45rem); color: var(--white); }
.svc-hub-paper-desc { font-size: .92rem; color: rgba(255,255,255,.82); }
.svc-hub-paper-link { font-size: .8rem; color: var(--cyan-light); }
.svc-hub-paper-link strong { color: var(--white); }
.svc-hub-paper-btn {
  flex: none; padding: .8rem 1.4rem; border-radius: 999px; background: var(--cyan); color: var(--navy);
  font-family: var(--head); font-weight: 700; font-size: .95rem; white-space: nowrap; transition: background var(--t-1) var(--e-out);
}
.svc-hub-paper:hover .svc-hub-paper-btn { background: var(--white); }
@media (max-width: 40rem) {
  .svc-hub { grid-template-columns: 1fr 1fr; gap: 2.75rem .8rem; }
  .svc-hub-card, .svc-hub-card:nth-child(n+7) { grid-column: span 1; padding: 0 .9rem 1rem; }
  .svc-hub-art { height: 7.25rem; margin-top: -1.75rem; margin-bottom: .25rem; }
  .svc-hub-art::before { width: 5.5rem; height: 5.5rem; }
  .svc-hub-art img { height: 8.75rem; }
  .svc-hub-icon { width: 5.5rem; height: 5.5rem; }
  .svc-hub-icon svg { width: 2.4rem; height: 2.4rem; }
  .svc-hub-chips { display: none; }
  .svc-hub-paper { flex-wrap: wrap; gap: .9rem 1rem; padding: 1.2rem; }
  .svc-hub-paper-art { width: 6.5rem; }
  .svc-hub-paper-text { flex-basis: calc(100% - 7.5rem); }
  .svc-hub-paper-btn { width: 100%; text-align: center; }
}

/* /support/ help portal: four big action tiles, then the shared ticket
   cards (%%service-hub%%), then the remote-access safety box. */
.sp-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 2.75rem; }
.sp-action {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.4rem 1rem 1.25rem;
  border: 2px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--soft-2), var(--white) 70%);
  color: var(--text); text-decoration: none;
  transition: border-color var(--t-1) var(--e-out), transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.sp-action:hover, .sp-action:focus-visible { border-color: var(--cyan); transform: translateY(var(--lift)); box-shadow: var(--shadow); }
.sp-action:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.sp-action-icon {
  width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; margin-bottom: .35rem; color: var(--white);
  background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark));
}
.sp-action-icon svg { width: 1.9rem; height: 1.9rem; }
.sp-action-label { font-family: var(--head); font-weight: 800; font-size: 1.1rem; color: var(--navy); }
.sp-action-hint { font-size: .85rem; color: var(--muted); }
/* /login/: two tiles centred on the page. --soon is a tile for something not
   open yet: not a link, greyed, no hover lift. */
.sp-actions.sp-actions--pair { grid-template-columns: repeat(2, minmax(0, 17rem)); justify-content: center; gap: 1.25rem; margin-block: 2rem 2.25rem; }
.sp-actions--pair .sp-action { padding-block: 2rem 1.6rem; }
.sp-action--soon { border-style: dashed; background: var(--soft-2); cursor: default; }
.sp-action--soon:hover { border-color: var(--line); transform: none; box-shadow: none; }
.sp-action--soon .sp-action-icon { background: var(--line); color: var(--muted); }
.sp-action--soon .sp-action-label { color: var(--muted); }
.sp-action-badge { margin-top: .6rem; padding: .3rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--line); color: var(--muted); }
.sp-action-badge--go { background: var(--blue); color: var(--white); }
.svc-body--focus .svc-main:has(.sp-actions--pair) > :is(h1, h2, p) { text-align: center; margin-inline: auto; }
/* /email/: three tiles (where your email is, then which hosting suits you),
   and the settings tables. */
.sp-actions.sp-actions--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 1.5rem 2rem; }
.mail-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0 1.25rem; }
.mail-table {
  width: 100%; min-width: 30rem; border-collapse: separate; border-spacing: 0; font-size: .95rem;
  border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden;

  & :is(th, td) { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
  & tr:last-child :is(th, td) { border-bottom: 0; }
  & thead th { background: var(--navy); color: var(--white); font: 700 .88rem var(--head); }
  & tbody th { background: var(--soft-2); color: var(--navy); font: 700 .88rem var(--head); width: 32%; }
  & td { font-variant-numeric: tabular-nums; }
}
.mail-sources { margin-top: 2rem; font-size: .85rem; color: var(--muted); }
@media (max-width: 40rem) {
  /* one tile per row, icon beside the words, so three tiles stay short */
  .sp-actions.sp-actions--three { grid-template-columns: 1fr; gap: .6rem; }
  /* beats the 2-up rule below (.sp-actions .sp-action:last-child spans 2, which
     would bring a second column back) */
  .sp-actions.sp-actions--three .sp-action:last-child { grid-column: auto; }
  .sp-actions--three .sp-action { align-items: flex-start; text-align: left; padding: .9rem 1rem; }
  .sp-actions--three .sp-action:has(.sp-action-icon) {
    display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .1rem; align-items: center;
    & .sp-action-icon { grid-row: span 2; width: 2.75rem; height: 2.75rem; margin: 0; }
    & .sp-action-icon svg { width: 1.35rem; height: 1.35rem; }
  }
  .sp-actions--three .sp-action-label { font-size: 1rem; }
  /* tables fit the screen: server names break only at their dots (<wbr>) */
  .mail-table { min-width: 0; font-size: .86rem;
    & :is(th, td) { padding: .55rem .6rem; }
    & tbody th { width: auto; }
  }
}
.sp-tickets-title { margin-top: .5rem; }
.sp-safety { margin: 0 0 var(--space-lg); padding: 1.25rem 1.4rem; border-radius: var(--radius-lg); background: #fdf0e6; border: 1px solid #f2c39b; color: #7a3b0c; }
.sp-safety h3 { margin: 0 0 .5rem; color: #7a3b0c; }
.sp-safety ul { margin: 0; padding-left: 1.2rem; }
.sp-safety li + li { margin-top: .3rem; }
.sp-safety a { color: inherit; font-weight: 700; }
@media (max-width: 40rem) {
  .sp-actions { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .sp-actions .sp-action:last-child { grid-column: span 2; }
  .sp-actions.sp-actions--pair { gap: .7rem; }
  .sp-actions--pair .sp-action:last-child { grid-column: auto; }
  .sp-actions--pair .sp-action { padding: 1.4rem .6rem 1.2rem; }
  .sp-action { padding: 1.1rem .7rem 1rem; }
  .sp-action-icon { width: 3.25rem; height: 3.25rem; }
}

/* /contact/: compact reach-us strip, support pointer, full-width enquiry. */
.contact-strip-sec { padding: 0 0 1.5rem; }
.contact-strip { list-style: none; margin: 0 0 1rem; padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--soft); }
.contact-strip li { display: flex; flex-direction: column; gap: .1rem; font-size: .92rem; }
.contact-strip .cl-label { flex: none; font: 700 .72rem/1.2 var(--head); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.contact-support {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius-lg);
  background: var(--navy); color: var(--white); text-decoration: none; transition: transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.contact-support:hover, .contact-support:focus-visible { transform: translateY(var(--lift-sm)); box-shadow: var(--shadow); }
.contact-support:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.contact-support-text { color: rgba(255,255,255,.85); }
.contact-support-text strong { color: var(--white); }
.contact-support-go { flex: none; padding: .6rem 1.1rem; border-radius: 999px; background: var(--cyan); color: var(--navy); font: 700 .92rem var(--head); }
.contact-enquiry { max-width: 52rem; margin: 0 auto; }
/* "Ready to work with us? Become a client" bar above the support one: the
   brand blue so it reads as the next step, not support. */
.contact-signup { background: var(--blue); margin-bottom: .75rem; }
.contact-signup .contact-support-go { background: var(--white); }
/* In the contact hero it stands as a card: title on its own line, button under. */
.ct-hero-signup { flex-direction: column; align-items: flex-start; gap: 1.1rem; margin: 0; padding: 1.75rem; box-shadow: var(--shadow); }
.ct-hero-signup .contact-support-text { font-size: 1.05rem; line-height: 1.55; }
.ct-hero-signup .contact-support-text strong { display: block; margin-bottom: .35rem; font: 800 1.45rem/1.2 var(--head); }
.contact-form-note { color: var(--muted); margin: 0 0 1rem; }
@media (max-width: 40rem) {
  .contact-support { flex-direction: column; align-items: flex-start; }
}

/* /about/: hero, "what we do" picture cards (reuses .svc-hub cards, 3 + 2),
   "how we work" points, "where we work" areas, quote and link cards. */
.ab-hero { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 2rem; margin: .5rem 0 2.5rem; }
.ab-hero h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: .4rem 0 .6rem; }
.ab-lead { font-size: 1.08rem; color: var(--body); margin: 0 0 1.25rem; }
.ab-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.ab-hero-art { position: relative; display: grid; place-items: end center; height: 17rem; }
.ab-hero-art::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 15rem; height: 15rem; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark)); opacity: .9; }
.ab-hero-art img { position: relative; height: 17rem; width: auto; filter: drop-shadow(0 .8rem 1rem rgba(18,23,42,.22)); }
.ab-h { margin: 2.5rem 0 .4rem; }
/* The same About content at the foot of /contact/ (#about). Skip what the
   contact page already says: "Talk to us" buttons and "Where we work". */
.ct-about { padding: var(--space-lg) 0 0; border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.ct-about .ab-buttons, .ct-about .ab-h:has(+ .ab-areas), .ct-about .ab-areas { display: none; }
.ab-sub { color: var(--muted); margin: 0 0 1rem; }
.ab-what .svc-hub-card:nth-child(n+4) { grid-column: span 3; }
.ab-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.ab-point { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ab-point h3 { margin: .6rem 0 .3rem; font-size: 1.05rem; }
.ab-point p { margin: 0; font-size: .9rem; color: var(--body); }
.ab-point-icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; color: var(--white);
  background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark)); }
.ab-point-icon svg { width: 1.35rem; height: 1.35rem; }
.ab-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.ab-area { display: flex; flex-direction: column; gap: .4rem; padding: 1.2rem; border: 2px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--soft-2), var(--white) 70%); color: var(--text); text-decoration: none;
  transition: border-color var(--t-1) var(--e-out), transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out); }
.ab-area:hover, .ab-area:focus-visible { border-color: var(--cyan); transform: translateY(var(--lift)); box-shadow: var(--shadow-sm); }
.ab-area-name { font-family: var(--head); font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.ab-area-body { font-size: .88rem; color: var(--body); }
.ab-quote { margin: 2.75rem 0 2rem; padding: 1.5rem 1.75rem; border-radius: var(--radius-lg); background: var(--navy); color: var(--white); }
.ab-quote p { margin: 0 0 .6rem; font-size: 1.1rem; font-style: italic; }
.ab-quote cite { font-style: normal; font-weight: 700; color: var(--cyan-light); }
.ab-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: var(--space-lg); }
.ab-link { display: flex; flex-direction: column; gap: .3rem; padding: 1.2rem 1.3rem; border: 2px solid var(--line); border-radius: var(--radius-lg);
  color: var(--text); text-decoration: none; transition: border-color var(--t-1) var(--e-out); }
.ab-link:hover, .ab-link:focus-visible { border-color: var(--cyan); }
.ab-link-name { font-family: var(--head); font-weight: 800; color: var(--navy); }
.ab-link-name::after { content: " \2192"; color: var(--cyan-text); }
.ab-link-body { font-size: .9rem; color: var(--body); }
@media (max-width: 900px) { .ab-points, .ab-areas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) {
  .ab-hero { grid-template-columns: 1fr; }
  .ab-hero-art { height: 13rem; }
  .ab-hero-art img { height: 13rem; }
  .ab-hero-art::before { width: 11rem; height: 11rem; }
  .ab-what .svc-hub-card:nth-child(n+4) { grid-column: span 1; }
  .ab-what .svc-hub-card:nth-child(5) { grid-column: span 2; }
  .ab-links { grid-template-columns: 1fr; }
}

/* /contact/ redesign: the promise and a live "open now" card, three ways to
   reach us, the support bar, the enquiry, then Find us. */
.ct-hero { padding: 1.5rem 0 2rem; }
.ct-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.5rem; align-items: center; }
.ct-hero-text h1 { margin: .5rem 0 .75rem; }











.ct-mail { color: var(--cyan-light); font-weight: 600; text-decoration: none; }
.ct-mail:hover { text-decoration: underline; }
.ct-methods-sec { padding: 0 0 2rem; }
.ct-find-sec { padding: .5rem 0 var(--space-lg); }
.ct-find { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; padding: 1.75rem; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--soft); }
.ct-find h2 { margin: 0 0 .5rem; }
.ct-find-facts { list-style: none; margin: 1rem 0 1.25rem; padding: 0; display: grid; gap: .55rem; }
.ct-find-facts li { display: flex; flex-direction: column; gap: .1rem; }
.ct-find-facts .cl-label { flex: none; font: 700 .72rem/1.2 var(--head); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ct-find-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.ct-find-map { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-sm); }
.ct-find-map img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.ct-find-map figcaption { padding: .65rem .9rem; font: 700 .82rem/1.35 var(--head); color: var(--navy); border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .ct-hero-grid, .ct-find { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) and (min-width: 40.01rem) { .sp-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Live call card as a wide band (pillar and service pages): heading and a
   line of text beside the character, buttons inline. */

/* Wide screens: words on the left, buttons stacked on the right, so the
   band has no dead half. */












/* ===== Pillar pages (2026-10-04): hero + character, four big buttons,
   service cards, specialist list folded, live call band, other areas. ===== */
.pl-hero { padding: 2.75rem 0 0; }
.pl-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2rem; align-items: end; }
.pl-hero-text { padding-bottom: 1.5rem; }
.pl-hero-text h1 { margin: .5rem 0 .75rem; }
.pl-hero-text .pillar-lead { margin: 0; }
.pl-hero-art { position: relative; height: 17rem; }
.pl-hero-art::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 14rem; height: 14rem; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark)); }
.pl-hero-art img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 18.5rem; width: auto; max-width: none;
  filter: drop-shadow(0 .8rem 1rem rgba(18,23,42,.22)); }
.pl-actions-sec { position: relative; z-index: 1; padding: 0 0 2.25rem; }
.pl-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }








.pl-body { padding: 0 0 1rem; }
.pl-intro { max-width: 75ch; margin-bottom: 2.25rem; }
.pl-group { margin: 0 0 2.75rem; scroll-margin-top: 5.625rem; }
.pl-group > h2 { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.1rem; }
.pl-count { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .5rem; border-radius: 999px;
  background: var(--soft-2); color: var(--cyan-text); font: 800 .9rem/1 var(--head); }
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pl-card {
  display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.3rem 1.15rem; border: 2px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--soft-2), var(--white) 60%); color: var(--text); text-decoration: none;
  transition: border-color var(--t-1) var(--e-out), transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.pl-card:hover, .pl-card:focus-visible { border-color: var(--cyan); transform: translateY(var(--lift)); box-shadow: var(--shadow-sm); }
.pl-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pl-card-title { font-family: var(--head); font-weight: 800; font-size: 1.08rem; line-height: 1.25; color: var(--navy); }
.pl-card-text { font-size: .9rem; line-height: 1.55; color: var(--body); }
.pl-card-go { margin-top: auto; padding-top: .35rem; font-family: var(--head); font-weight: 700; font-size: .9rem; color: var(--cyan-text); }
.pl-card-go span { display: inline-block; transition: transform var(--t-2) var(--e-out); }
.pl-card:hover .pl-card-go span { transform: translateX(.25rem); }
/* Long-tail pages: one tidy expandable list. */
.pl-more { margin: 0 0 1rem; border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--soft); scroll-margin-top: 5.625rem; }
.pl-more summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; }
.pl-more summary::-webkit-details-marker { display: none; }
.pl-more-title { font-family: var(--head); font-weight: 800; font-size: 1.2rem; color: var(--navy); }
.pl-more-hint { flex: none; font-family: var(--head); font-weight: 700; font-size: .92rem; color: var(--cyan-text); }
.pl-more-hint::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-left: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.15rem) rotate(45deg); transition: transform var(--t-2) var(--e-out); }
.pl-more[open] .pl-more-hint::after { transform: translateY(.1rem) rotate(-135deg); }
.pl-more summary:hover .pl-more-title { color: var(--cyan-text); }
.pl-more summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: var(--radius-lg); }
.pl-more-list { list-style: none; margin: 0; padding: 0 1.4rem 1.3rem; columns: 3 15rem; column-gap: 1.5rem; }
.pl-more-list li { break-inside: avoid; padding: .3rem 0; }
.pl-more-list a { color: var(--body); text-decoration: none; font-size: .93rem; }
.pl-more-list a:hover { color: var(--cyan-text); text-decoration: underline; }
.pl-call-sec { padding: 3.5rem 0 1rem; }
/* /about/how-we-work/: "Our promise in brief" panel, then the Become a client bar. */
.hw-promise { padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--soft); }
.hw-promise ul { margin: 0 0 .75rem; padding-left: 1.1rem; display: grid; gap: .45rem; }
.hw-promise p { margin: 0; }
.hw-signup { margin: 2rem 0 0; }
/* /products/#rates: the published rates (custom/about-pricing.json) as one panel. */
.pl-rates { scroll-margin-top: 5.625rem; }
.pl-rates-box { max-width: 52rem; padding: 1.75rem 2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--soft); }
.pl-rates-box h2 { margin: 0 0 .5rem; }
.pl-rates-box h3 { margin: 1.5rem 0 .4rem; font-size: 1.1rem; }
.pl-rates-box p { margin: 0 0 .75rem; }
.pl-others-sec { padding: 2.5rem 0 var(--space-lg); }
.pl-others-sec h2 { margin: 0 0 4.5rem; }
/* Row gap clears the next row's characters, which rise ~3.5rem out of the card top. */
.pl-others { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4.5rem .8rem; }



/* Same rule as the hub cards: image pinned to the slot bottom so it can only
   rise out of the card top, never cover the name. */





@media (max-width: 1000px) {
  .pl-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-others { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .pl-hero-grid { grid-template-columns: minmax(0, 1fr) 7.5rem; gap: .75rem; }
  .pl-hero-text { padding-bottom: 1rem; }
  .pl-hero-art { height: 9rem; }
  .pl-hero-art::before { width: 7rem; height: 7rem; }
  .pl-hero-art img { height: 10rem; }
  .pl-actions { gap: .65rem; }
  
  
  .pl-grid { grid-template-columns: 1fr; }
  .pl-more-list { columns: 1; }
  .pl-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Phones: one column, the character steps out of the top-right corner. */
  
  
  
  
  
  
  
}

/* ===== Service pages (2026-10-04): big buttons under the lead, tick cards,
   step timeline, why-WaTo tiles, live call band. Same family as the pillars. ===== */
.sv-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin: 1.25rem 0 .5rem; }
.sv-actions .pl-action { padding: .85rem .95rem; gap: .75rem; }
.sv-actions .pl-action-icon { width: 2.6rem; height: 2.6rem; }
.sv-actions .pl-action-icon svg { width: 1.2rem; height: 1.2rem; }
.sv-actions .pl-action-label { font-size: 1rem; }
.sv-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: .375rem 0; }
.sv-feat { position: relative; padding: 1.25rem 1.3rem 1.2rem 4rem; border: 2px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--soft-2), var(--white) 60%); }
.sv-feat h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--navy); }
.sv-feat p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--body); }
.sv-tick { position: absolute; left: 1.15rem; top: 1.15rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark)); }
.sv-tick::after { content: ""; position: absolute; left: .78rem; top: .5rem; width: .45rem; height: .8rem; border: solid var(--white); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.sv-who { list-style: none; margin: .375rem 0; padding: 1.1rem 1.4rem; border-radius: var(--radius-lg); background: var(--soft); border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.75rem; }
.sv-who li { position: relative; padding-left: 1.6rem; line-height: 1.55; }
.sv-who li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(55,189,242,.18); }
/* Steps: numbered discs joined by a line. */
.sv-steps { list-style: none; margin: .375rem 0; padding: 0; position: relative; }
.sv-steps li { position: relative; display: flex; gap: 1.1rem; padding: 0 0 1.35rem; }
.sv-steps li:last-child { padding-bottom: 0; }
.sv-steps li:not(:last-child)::before { content: ""; position: absolute; left: 1.2rem; top: 2.6rem; bottom: .2rem; width: 2px; background: linear-gradient(var(--cyan), var(--line)); transform: translateX(-50%); }
.sv-step-num { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; color: var(--white);
  background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark)); font: 800 1.05rem/1 var(--head); box-shadow: var(--shadow-cyan); }
.sv-step-text { padding-top: .35rem; line-height: 1.6; }
.sv-step-text b { color: var(--navy); }
.sv-why { list-style: none; margin: .375rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.sv-why li { display: flex; align-items: flex-start; gap: .8rem; padding: .95rem 1.1rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); line-height: 1.5; }
.sv-why li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sv-why-icon { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #3ddc84; }
.sv-why-icon svg { width: 1rem; height: 1rem; }
/* In the narrower main column the band keeps its buttons under the words. */
.sv-call { margin: 3.75rem 0 .5rem; }
.sv-call .ct-now--band { grid-template-columns: 9.5rem 1fr; padding: 1.6rem 1.75rem 1.6rem .75rem; }
.sv-call .ct-now--band .ct-now-art::before { width: 8rem; height: 8rem; }
.sv-call .ct-now--band .ct-now-art img { height: 12.5rem; }
.sv-call .ct-now--band .ct-now-body { display: flex; align-items: flex-start; }
.sv-call .ct-now--band .ct-now-buttons { flex-direction: row; }
.side-status { font-size: .92rem; margin: 0 0 .5rem; color: var(--white); }
.svc-main > .sv-call + h2, .svc-main > h2:first-of-type { border-top: 0; }
/* Plans and prices (product pages): the price is the loud part, the rest stays
   in the tick-card family. "Our pick" mirrors the factsheets' Recommended. */
.sv-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; margin: 1rem 0 .375rem; }
.sv-plans:has(> :only-child) { grid-template-columns: minmax(0, 24rem); }
.sv-plan { position: relative; display: flex; flex-direction: column; padding: 1.35rem 1.3rem 1.25rem; border: 2px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--soft-2), var(--white) 60%); }
.sv-plan--pick { border-color: var(--cyan); box-shadow: var(--shadow-cyan); }
.sv-plan-tag { position: absolute; top: -.8rem; left: 1.1rem; padding: .2rem .7rem; border-radius: 999px; background: var(--cyan); color: var(--ink);
  font: 800 .7rem/1.4 var(--head); letter-spacing: .06em; text-transform: uppercase; }
.sv-plan h3 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--navy); }
.sv-plan-price { display: flex; align-items: center; gap: .55rem; margin: 0 0 .85rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.sv-plan-amt { font: 800 2.1rem/1 var(--head); color: var(--navy); letter-spacing: -.02em; }
.sv-plan-unit { font-size: .78rem; line-height: 1.25; color: var(--muted); max-width: 7.5rem; }
.sv-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .9rem; line-height: 1.5; color: var(--body); }
.sv-plan li { position: relative; padding-left: 1.25rem; }
.sv-plan li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cyan); }
.sv-plan-cta { margin-top: auto; align-self: flex-start; }
.sv-plan ul + .sv-plan-cta { margin-top: 1rem; }
.sv-plans-note { margin: .75rem 0 0; font-size: .86rem; color: var(--muted); }
@media (max-width: 880px) {
  .sv-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  /* Phones: three compact icon tiles in a row, labels only. */
  .sv-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .sv-actions .pl-action { flex-direction: column; align-items: center; text-align: center; gap: .45rem; padding: .75rem .4rem; }
  .sv-actions .pl-action-text { align-items: center; }
  .sv-actions .pl-action-label { font-size: .92rem; }
  .sv-actions .pl-action-hint { display: none; }
  .sv-feats, .sv-who, .sv-why, .sv-plans { grid-template-columns: 1fr; }
  .sv-call { margin-top: 7.5rem; }
  .sv-call .ct-now--band { grid-template-columns: minmax(0, 1fr); padding: 1.4rem 1.25rem; }
  .sv-call .ct-now--band .ct-now-art img { height: 9rem; }
  .sv-call .ct-now--band .ct-now-art::before { width: 5.5rem; height: 5.5rem; }
}

/* About: company details (partials/company-details.njk). */
.ab-company { margin: var(--space-lg) 0 1rem; scroll-margin-top: 6rem; }
.ab-company-list { margin: 0; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--soft);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.ab-company-list dt { font: 700 .72rem/1.2 var(--head); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.ab-company-list dd { margin: 0; color: var(--text); }
.ab-company-list a { color: var(--cyan-text); }
.ab-company-note { font-size: .86rem; color: var(--muted); }
@media (max-width: 40rem) { .ab-company-list { grid-template-columns: 1fr; } }

/* ---------- Embeddable web widget (spec 2026-10-18 section 1.4) ---------- */
.ww { margin-block: 2rem; padding-block: 1.5rem 0; border-top: 1px solid var(--line); container-type: inline-size; }   /* same divider and 40px rhythm as the h2 sections around it; drops the generic section padding */
.ww .eyebrow { margin-block-end: .5rem; }
.ww h2 { margin-block-start: 0; }
.ww-lede { color: var(--muted); margin: -.5rem 0 1rem; }
.ww-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.ww-item:nth-child(n + 11) { display: none; }   /* ten at a time; main.js mixes which ten by seed */
.ww-card { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; cursor: pointer; text-align: left; box-shadow: var(--shadow-sm); transition: transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out); }
.ww-card:hover, .ww-card:focus-visible { transform: translateY(var(--lift)); box-shadow: var(--shadow); outline: none; border-color: var(--cyan); }
.ww-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.ww-name { display: block; padding: .45rem .6rem; font: 700 .78rem/1.2 var(--head); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ww-all { text-align: center; margin: 1.25rem 0 0; }
@container (max-width: 640px) { .ww-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ww-item:nth-child(n + 10) { display: none; } }
@container (max-width: 420px) { .ww-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ww-item:nth-child(n + 9) { display: none; } }

/* Page <h1> on content-JSON pages (lib/page-h1.js, 2026-10-24). The first <h2>
   became the <h1> for search engines; these rules copy the <h2> rules it
   replaces at the same specificity (:where adds none), so nothing moves. */
:where(.svc-main) h1:where(.h1-as-h2) { font-family: var(--head); font-size: clamp(1.5rem, 2.9vw, 2.2rem); letter-spacing: -.01em; line-height: 1.14; text-transform: none; font-weight: 800; hyphens: manual; }
.svc-main > h1:where(.h1-as-h2) { margin: 2.5rem 0 1.125rem; font-size: 1.35rem; }
.ab-hero h1:where(.h1-as-h2) { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: .4rem 0 .6rem; }
/* the h2 after a promoted heading used to be the second h2, so it keeps its divider */
.svc-main > h1.h1-as-h2:not(.h1-added) ~ h2:first-of-type { padding-block-start: 1rem; border-top: 1px solid #e7ecf3; }

/* Client pages (/{code}/, opt-in "Own page", spec 2026-10-24 §7.3) */
.client-page__logo { display: block; max-width: 15rem; max-height: 6rem; width: auto; height: auto; margin: 0 0 var(--space-md); }
.client-page__facts { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.client-page__facts h2 { font-size: 1.15rem; margin: 0 0 var(--space-sm); }
.client-page__facts ul { margin: 0; padding-left: 1.2rem; }
.client-page__note { color: var(--muted); font-size: 0.95rem; margin: var(--space-sm) 0 0; }

/* Receipt paper ordering landing (/service/paper-supplies/): the page we
   send clients to. Same blocks as the service pages; the order form is
   folded behind one button so it takes no room until they start. */
/* How ordering works: 1 2 3 left to right so the client chat sits higher. */
.sv-steps.ps-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 0; }
.sv-steps.ps-row li { padding: 0; align-items: flex-start; }
.sv-steps.ps-row li::before { display: none; }
@media (max-width: 40rem) { .sv-steps.ps-row { grid-template-columns: 1fr; } .sv-steps.ps-row li:not(:last-child)::before { display: block; } }
/* The button sits at the right of the steps; opened, the form drops to a full row. */
.ps-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; margin-bottom: 1.5rem; }
.ps-top > h2 { grid-column: 1 / -1; margin-top: 1.5rem; }
.ps-top > .ps-order { margin: 0; }
.ps-top > .ps-order[open] { grid-column: 1 / -1; margin-top: 1.25rem; }
@media (max-width: 52rem) { .ps-top { grid-template-columns: 1fr; row-gap: 1.25rem; } }
.ps-order { margin: 1.25rem 0 1.75rem; }
.ps-start { display: inline-block; list-style: none; cursor: pointer; }
.ps-start::-webkit-details-marker { display: none; }
.ps-order[open] > .ps-start { display: none; }
.ps-form { padding-top: .25rem; }

/* One-page terms: section headings land below the sticky header. */
.svc-main h2[id] { scroll-margin-top: 5.625rem; }
.legal-toc ul { columns: 2; column-gap: var(--space-lg, 2rem); margin: 0 0 2rem; }
@media (max-width: 640px) { .legal-toc ul { columns: 1; } }

/* ===== Terms page (2026-10-31): "In short", tools, clause chips, SLA tiles ===== */
.legal-short { margin: 0 0 1.25rem; padding: 1.1rem 1.35rem; border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: var(--radius); background: var(--soft-2); }
.legal-short-title { margin: 0 0 .5rem; font-family: var(--head); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.legal-short ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.legal-short li { padding-left: 1.1rem; position: relative; line-height: 1.5; }
.legal-short li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--cyan-dark); }
.legal-short li > a:last-child { font-size: .85rem; font-weight: 600; white-space: nowrap; margin-left: .25rem; }
.legal-short-note { margin: .65rem 0 0; font-size: .85rem; color: var(--muted); }
.legal-tools { margin: 0 0 1rem; }
.legal-print { font: 600 .9rem var(--font); color: var(--cyan-text); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1rem; cursor: pointer; transition: border-color var(--t-1) var(--e-out), color var(--t-1) var(--e-out); }
.legal-print:hover { border-color: var(--cyan-dark); color: var(--navy); }
.legal-print:focus-visible, .legal-clauses a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.legal-toc-label { margin: -.75rem 0 .4rem; font-size: .85rem; font-weight: 700; color: var(--muted); }
.legal-clauses { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.legal-clauses a { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--cyan-text); background: var(--white); text-decoration: none; transition: background var(--t-1) var(--e-out), color var(--t-1) var(--e-out); }
.legal-clauses a:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.svc-main h3[id] { scroll-margin-top: 5.625rem; }
.sla-tiles { list-style: none; padding: 0; margin: .75rem 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; }
.sla-tiles li { margin: 0; padding: .9rem 1rem; border: 1px solid var(--line); border-top: 5px solid var(--cyan-light); border-radius: var(--radius); background: var(--white); line-height: 1.5; }
.sla-tiles li strong { display: block; margin-bottom: .2rem; color: var(--ink); }
.sla-tiles li:nth-child(1) { border-top-color: var(--navy); }
.sla-tiles li:nth-child(2) { border-top-color: var(--blue); }
.sla-tiles li:nth-child(3) { border-top-color: var(--cyan-dark); }

/* ===== Rates (2026-10-31): cards + worked-example receipts ===== */
.rate-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: .85rem; margin: .5rem 0 1.25rem; }
.rate-card { padding: 1rem 1.15rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.pl-rates-box .rate-card p { margin: 0; }
.rate-card-name { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pl-rates-box .rate-card-price { margin: .2rem 0 .55rem; color: var(--navy); font-size: .95rem; }
.rate-amt { font-family: var(--head); font-weight: 800; font-size: 1.85rem; letter-spacing: -.01em; color: var(--ink); margin-right: .2rem; font-variant-numeric: tabular-nums; }
.rate-card p:last-child { font-size: .93rem; line-height: 1.55; }
.rate-ex-intro { color: var(--muted); }
.rate-ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .85rem; margin: .5rem 0 1.25rem; }
.rate-ex-card { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-top: 4px solid var(--cyan); border-radius: var(--radius); background: var(--white); font-variant-numeric: tabular-nums; }
.rate-ex-card figcaption { margin: 0 0 .6rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.rate-ex-card table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.rate-ex-card th, .rate-ex-card td { padding: .3rem 0; text-align: right; vertical-align: top; }
.rate-ex-card th:first-child, .rate-ex-card td:first-child { text-align: left; padding-right: .5rem; }
.rate-ex-card thead th { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.rate-ex-card tbody td { border-bottom: 1px dashed var(--line); }
.rate-ex-card td:nth-child(2) { width: 2.2rem; } .rate-ex-card td:nth-child(3) { width: 4.2rem; } .rate-ex-card td:nth-child(4) { width: 4.6rem; }
.rate-ex-card tfoot th, .rate-ex-card tfoot td { padding-top: .55rem; border-top: 2px solid var(--navy); font-weight: 800; color: var(--ink); }
.rate-ex-card tfoot td { font-family: var(--head); font-size: 1.1rem; color: var(--cyan-text); }
.pl-rates-box .rate-ex-note { margin: .6rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }

/* ===== Print: terms (and any content page) print as a clean document ===== */
@media print {
  .topbar, .site-header, .site-footer, .cta-band, section.statement, section.soft, section.proof, .float-help, .wato-egg, .wide-mark, #sc-jail,
  .svc-head, .svc-side, .legal-tools, .legal-toc, .breadcrumb { display: none !important; }
  .svc-grid { display: block !important; }
  .svc-main { max-width: none !important; font-size: 10.5pt; line-height: 1.45; color: var(--ink); }
  .svc-main h2 { font-size: 15pt; break-after: avoid; } .svc-main h3 { font-size: 11.5pt; break-after: avoid; }
  .legal-short, .sla-tiles li { break-inside: avoid; background: none; }
  .svc-main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: var(--muted); }
  @page { margin: 16mm 14mm; }
}
/* Two-up grids: an odd last card spans the row instead of sitting alone */
.rate-cards, .rate-ex, .sla-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rate-cards > :last-child:nth-child(odd), .rate-ex > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 640px) { .rate-cards, .rate-ex, .sla-tiles { grid-template-columns: 1fr; } }