:root {
  --bg:        #060810;
  --bg-elev:   #10141d;
  --bg-elev-2: #161c28;
  --bg-soft:   #0b0e17;
  --ink:       #f4f7fb;
  --ink-soft:  #a7b2c4;
  --ink-faint: #6d7890;
  --line:      rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.06);

  --cyan:      #22d3ee;
  --blue:      #3b82f6;
  --amber:     #f5a623;
  --gradient:  linear-gradient(90deg, var(--cyan), var(--blue));

  --accent:    var(--cyan);
  --accent-ink:#04141c;
  --warn-bg:   rgba(245,166,35,.08);
  --warn-line: rgba(245,166,35,.35);
  --ok:        #2dd4bf;
  --violet:    #a78bfa;

  --radius:    14px;
  --radius-sm: 9px;
  --wrap:      1000px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(60rem 34rem at 50% -12%, rgba(34,211,238,.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .5em;
  font-weight: 800; color: var(--ink);
}
h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); }
h2 { font-size: 1.4rem; margin-top: 2.4rem; }
h3 { font-size: 1.05rem; font-weight: 700; }
p  { margin: 0 0 1rem; }

.grad { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

.eyebrow {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: .6rem;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--gradient); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: var(--radius-sm); z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* Header */
.site-head { border-bottom: 1px solid var(--line); background: rgba(6,8,16,.82); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; }
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 66px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { display: block; height: 29px; width: auto; }
.brand-sub {
  color: var(--cyan); font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: .22rem .6rem; margin-left: .15rem;
}
.head-nav { display: flex; align-items: center; gap: 1.3rem; font-size: .93rem; flex-wrap: wrap; }
.head-nav a { color: var(--ink-soft); }
.head-nav a:hover { color: var(--ink); text-decoration: none; }
.btn-sm {
  background: var(--gradient); color: var(--accent-ink) !important;
  padding: .48rem 1.05rem; border-radius: 999px; font-weight: 700;
}
.btn-sm:hover { opacity: .9; }

/* Hero */
.hero { padding: 4rem 0 2.8rem; }
.hero p.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 34rem; margin: 0 auto 1.8rem; }
.hero.center { text-align: center; }
.hero.center h1 { margin-bottom: .6rem; }
.hero.center .eyebrow { text-align: center; }

.pillrow { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 0 0 2.2rem; }
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev);
  padding: .5rem 1rem; font-size: .86rem; color: var(--ink-soft);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gradient); flex: none; }

.searchbox { max-width: 32rem; margin: 0 auto; display: flex; gap: .5rem; }
.searchbox input {
  flex: 1; padding: .85rem 1.05rem; font-size: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--ink);
}
.searchbox input::placeholder { color: var(--ink-faint); }
.searchbox input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* Cards */
.section { padding: 2.6rem 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.1rem; }
.card {
  display: block; padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elev); color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--cyan); text-decoration: none; transform: translateY(-2px); }
.card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: .9rem;
  background: rgba(34,211,238,.12); color: var(--cyan);
}
.card:nth-of-type(3n+2) .icon { background: rgba(245,166,35,.12); color: var(--amber); }
.card:nth-of-type(3n+3) .icon { background: rgba(59,130,246,.14); color: var(--blue); }
.card h3 { margin: 0 0 .3rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .93rem; }

/* Article list */
.artlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.artlist li { border-bottom: 1px solid var(--line); }
.artlist a { display: block; padding: 1rem .2rem; color: var(--ink); }
.artlist a:hover { color: var(--cyan); text-decoration: none; }
.artlist .sub { display: block; color: var(--ink-faint); font-size: .88rem; margin-top: .15rem; }

/* Homepage */
.hero-home { padding-top: 3.6rem; padding-bottom: 1.4rem; }
.section-head { margin: 0 0 1.3rem; font-size: 1.35rem; }

/* Primary call to action, replacing the search box. */
/*
 * Hero call to action.
 *
 * The gradient pill on its own read as flat at this size, so there are three
 * layers doing the work: the gradient fill, a soft coloured cast on the page
 * beneath it, and a one pixel inner highlight along the top edge that gives the
 * pill a lit surface rather than a printed one. The arrow shifts on hover, which
 * is the whole animation budget.
 */
.btn-hero {
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--gradient); color: var(--accent-ink) !important;
  border-radius: 999px; padding: 1rem 1.5rem 1rem 2rem;
  font-weight: 750; font-size: 1.06rem; letter-spacing: -0.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 10px 28px -10px rgba(34,211,238,.5),
    0 0 0 1px rgba(34,211,238,.25);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, filter .18s;
}
.btn-hero:hover {
  text-decoration: none;
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 18px 40px -12px rgba(34,211,238,.62),
    0 0 0 1px rgba(34,211,238,.45);
}
.btn-hero svg { flex: none; transition: transform .18s cubic-bezier(.2,.8,.3,1); }
.btn-hero:hover svg { transform: translateX(3px); }
.btn-hero:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn-hero-sub { color: var(--ink-faint); font-size: .93rem; margin: 1.05rem 0 0; }

/* Article directory. Columns on desktop, one stack on a phone. */
.section-dir { padding-top: 1.6rem; }
/* Columns are filled in PHP, balanced by article count, so each is a real
   column of stacked groups rather than a grid cell that can leave a hole. */
.dir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; align-items: start; }
.dir-col { min-width: 0; display: flex; flex-direction: column; gap: 1.15rem; }
@media (max-width: 980px) { .dir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .dir { grid-template-columns: 1fr; } }

/*
 * Each group is its own card.
 *
 * As plain lists the five groups ran together into one grey field and the
 * column boundaries were invisible, which is what made the page read as a wall.
 * Giving every group a surface, a border and a colour makes the grouping the
 * first thing you see instead of something you have to infer from a rule line.
 *
 * --ac is set per group from PHP so the accent is tied to the section rather
 * than to whatever position the balancing algorithm happened to put it in.
 */
.dir-group {
  --ac: var(--cyan);
  margin: 0; scroll-margin-top: 100px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.15rem 1.25rem 1.25rem;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.dir-group:hover {
  border-color: color-mix(in srgb, var(--ac) 42%, transparent);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.9);
}
.dir-group h2 {
  display: flex; align-items: center; gap: .55rem;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-soft); font-weight: 700;
  margin: 0 0 .35rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
/* Small accent bead, the only colour each card carries at rest. */
.dir-group h2::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 16%, transparent);
}
.dir-group ul { list-style: none; margin: 0; padding: 0; }
.dir-group a {
  display: block; padding: .72rem .6rem .72rem .7rem;
  margin: 0 -.45rem; border-radius: 11px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  transition: background .15s, color .15s;
}
.dir-group li:last-child a { border-bottom: 0; }
.dir-group a:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--ac) 9%, transparent);
  border-bottom-color: transparent;
}
.dir-group a:hover .dir-title { color: var(--ac); }
.dir-title { display: block; font-weight: 600; font-size: .97rem; line-height: 1.35; }
.dir-sub { display: block; color: var(--ink-faint); font-size: .86rem; margin-top: .2rem; line-height: 1.45; }

/* Footer logo replaces the plain wordmark. */
.foot-logo { display: inline-block; line-height: 0; margin-bottom: .7rem; }
.foot-logo img { height: 26px; width: auto; display: block; }

.status-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev);
  padding: .38rem .95rem; font-size: .84rem; color: var(--ink-soft) !important;
  margin-bottom: 1.4rem; transition: border-color .15s;
}
.status-pill:hover { text-decoration: none; border-color: var(--cyan); }

.grid-two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/*
 * The two closing panels.
 *
 * These are the last thing on the page and the two actions somebody actually
 * takes, so they get a rounder, lighter treatment than the directory cards
 * above: a soft accent wash behind the icon bubble, and a coloured halo on
 * hover. Read as buttons rather than as two more list items.
 */
.grid-two { gap: 1.4rem; }
.panel {
  --ac: var(--cyan);
  position: relative; overflow: hidden;
  display: flex; gap: 1.15rem; align-items: flex-start;
  padding: 1.6rem 1.7rem; border: 1px solid var(--line); border-radius: 22px;
  background: var(--bg-elev); color: var(--ink);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
/* Accent wash bleeding in from the icon corner. Decorative, sits under text. */
.panel::before {
  content: ""; position: absolute; inset: auto auto 0 0;
  width: 15rem; height: 15rem; transform: translate(-38%, 42%);
  background: radial-gradient(circle, color-mix(in srgb, var(--ac) 22%, transparent), transparent 68%);
  pointer-events: none; opacity: .8; transition: opacity .18s;
}
.panel > * { position: relative; }
.panel:hover {
  border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  text-decoration: none; transform: translateY(-3px);
  box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--ac) 70%, transparent);
}
.panel:hover::before { opacity: 1; }
.panel h3 { margin: 0 0 .35rem; font-size: 1.12rem; }
.panel p  { margin: 0 0 .8rem; color: var(--ink-soft); font-size: .93rem; }
.panel-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: color-mix(in srgb, var(--ac) 15%, transparent);
  color: var(--ac);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 26%, transparent);
}
.panel-icon-amber { }
.panel-cta { color: var(--ac); font-size: .9rem; font-weight: 650; }

.artlist-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 0 2.2rem; border-top: 0; }
.artlist-two li { border-bottom: 1px solid var(--line); }

/* Status page */
.status-banner {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev);
  padding: .6rem 1.25rem; font-size: .95rem; margin: 0 0 1.2rem;
}
.status-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--ink-faint); display: inline-block; margin-right: .1rem;
}
.status-up   .status-dot, .status-dot.status-up   { background: var(--ok);    box-shadow: 0 0 0 3px rgba(45,212,191,.15); }
.status-slow .status-dot, .status-dot.status-slow { background: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,.15); }
.status-down .status-dot, .status-dot.status-down { background: #f26d6d;      box-shadow: 0 0 0 3px rgba(242,109,109,.15); }

.incident {
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  background: var(--bg-elev); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.4rem; margin: 0 0 1.6rem;
}
.incident-down { border-left-color: #f26d6d; }
.incident-up   { border-left-color: var(--ok); }
.incident h2   { margin: .1rem 0 .5rem; font-size: 1.15rem; }
.incident p    { color: var(--ink-soft); margin: 0 0 .5rem; }
.incident-stage {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber);
}
.incident-down .incident-stage { color: #f26d6d; }
.incident-up   .incident-stage { color: var(--ok); }
.incident-updated { color: var(--ink-faint); font-size: .85rem; margin: 0; }

.statuslist { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.statusrow {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elev); padding: 1.1rem 1.3rem; margin-bottom: .8rem;
}
.statusrow-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.statusrow-id { display: flex; align-items: flex-start; gap: .65rem; }
.statusrow-id .status-dot { margin-top: .45rem; }
.statusrow-note { display: block; color: var(--ink-faint); font-size: .87rem; margin: .2rem 0 0; }

.statusrow-meta {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  color: var(--ink-soft); font-size: .9rem; font-variant-numeric: tabular-nums;
}
/* Plain-language verdict, which is the whole of what a healthy row says. */
.statusrow-state { font-weight: 600; color: var(--ink-soft); }
.statusrow-state-up   { color: var(--ok); }
.statusrow-state-slow { color: var(--amber); }
.statusrow-state-down { color: #f26d6d; }

/* Evidence for a verdict worth questioning. Only rendered when the row is not
   green, so nobody has to wonder what HTTP 307 means on a working service. */
.statusrow-code {
  border: 1px solid var(--line); border-radius: 7px;
  padding: .1rem .45rem; font-size: .76rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Why this row is not green, in words. */
.statusrow-reason {
  margin: .75rem 0 0; padding: .55rem .8rem;
  border-left: 2px solid var(--amber); border-radius: 0 8px 8px 0;
  background: var(--warn-bg);
  color: var(--ink-soft); font-size: .86rem;
}

/*
 * Hourly strip. One bar per hour, colour is the worst state seen in it.
 *
 * Height used to encode the median response time. Those numbers are no longer
 * published, and a bar height standing in for a hidden figure is decoration
 * that looks like data, so every bar is now the same size.
 */
.sparkbar {
  display: flex; align-items: stretch; gap: 3px;
  height: 26px; margin: .95rem 0 0;
}
.spark {
  flex: 1 1 0; min-width: 4px;
  border-radius: 3px;
  transition: filter .12s;
}
.sparkbar:hover .spark { filter: saturate(.5) brightness(.85); }
.sparkbar .spark:hover { filter: none; }
.spark-up   { background: var(--ok); }
.spark-slow { background: var(--amber); }
.spark-down { background: #f26d6d; }
/* No sample for this hour. Visible enough to read as "nothing recorded" rather
   than as a missing element, but clearly not a reading. */
.spark-none { background: rgba(255,255,255,.09); }

.statusrow-uptime {
  display: flex; gap: 1.2rem; margin: .6rem 0 0;
  color: var(--ink-faint); font-size: .82rem; font-variant-numeric: tabular-nums;
}

.status-foot, .status-note { color: var(--ink-faint); font-size: .87rem; max-width: 46rem; }
.status-note {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); padding: .9rem 1.1rem; margin: 0 0 1.4rem;
}
.status-stale { color: var(--amber); font-weight: 600; }

/* Video embed */
.video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-elev); margin: 1.5rem 0;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Video with language tabs */
.video-tabs { margin: 1.5rem 0; }
.video-tabs .video-embed { margin: 0; }
.vt-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.vt-tab {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  color: var(--ink-soft); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .4rem .95rem;
}
.vt-tab:hover { color: var(--ink); }
.vt-tab.on { color: #0b0e14; background: var(--cyan); border-color: var(--cyan); }

/* ============================================================
   Article body
   Long-form reading, so this sets its own type scale rather than
   inheriting the denser UI scale used elsewhere on the site.
   ============================================================ */
.article {
  /* Centred, not pinned left. The wrap centres at 1000px; without this the
     column sat against its left edge with dead space beside it on any wide
     screen, which read as a broken layout rather than a narrow measure. */
  max-width: 43rem;
  margin-inline: auto;
  padding: 2.4rem 0 4rem;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

.article h1 {
  font-size: clamp(2rem, 4.5vw, 2.6rem);
  line-height: 1.12;
  margin: 0 0 1.2rem;
}

/* Space above a heading, not below it, is what separates sections. */
.article h2 {
  font-size: 1.42rem;
  margin: 3rem 0 .9rem;
  letter-spacing: -0.015em;
}
.article h3 {
  font-size: 1.08rem;
  margin: 2.2rem 0 .6rem;
}
.article h2 + p,
.article h3 + p { margin-top: 0; }

.article p { margin: 0 0 1.15rem; }

/* Opening paragraph carries the weight before the first heading. */
.article > p.lead,
.article > p:first-of-type {
  font-size: 1.18rem;
  line-height: 1.62;
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.article .crumb + h1 + p { margin-top: 0; }

.article strong { color: var(--ink); font-weight: 650; }

.article ul, .article ol { margin: 0 0 1.3rem; padding-left: 1.35rem; }
.article li { margin-bottom: .55rem; padding-left: .2rem; }
.article li::marker { color: var(--ink-faint); }

.article a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: rgba(34,211,238,.4); }
.article a:hover { text-decoration-color: var(--cyan); }


.crumb { font-size: .85rem; color: var(--ink-faint); margin-bottom: 1.4rem; letter-spacing: .01em; }
.crumb a { color: var(--ink-faint); text-decoration: none; }
.crumb a:hover { color: var(--ink-soft); }

.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  background: var(--bg-elev); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.15rem 1.35rem; margin: 1.9rem 0;
  font-size: .99rem; line-height: 1.65;
}
.callout p:last-child { margin: 0; }
.callout.warn { border-left-color: var(--amber); background: var(--warn-bg); }

/* Knowledge base index.
   The groups are the same cards as the homepage directory, two up instead of
   three because every article's blurb is shown here. Sticky header is 66px, so
   an un-offset anchor jump buries the section title underneath it. */
.dir-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .dir-two { grid-template-columns: 1fr; } }
.kb-section { scroll-margin-top: 100px; }
.dir-group .artlist { border-top: 0; }
.dir-group .artlist li { border-bottom: 0; }
.artlist a { transition: padding-left .12s; }
.artlist a:hover { padding-left: .35rem; }

/* Form */
.formwrap { max-width: 36rem; padding: 2.6rem 0 3.6rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 650; font-size: .92rem; margin-bottom: .35rem; }
.field .hint { font-size: .85rem; color: var(--ink-faint); margin: .3rem 0 0; }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .9rem; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--ink);
}
.field textarea { min-height: 165px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }

.sched-inline-row { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 .2rem; }
.sched-inline-row input { flex: 1 1 220px; padding: .7rem .9rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); }
.sched-inline-row input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.sched-inline-row .btn { padding: .7rem 1.2rem; font-size: .93rem; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.btn {
  background: var(--gradient); color: var(--accent-ink);
  border: 0; border-radius: 999px;
  padding: .8rem 1.6rem; font: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer;
}
.btn:hover { opacity: .92; }
.btn[disabled] { opacity: .5; cursor: default; }

.formmsg { padding: .9rem 1.05rem; border-radius: var(--radius-sm); margin-bottom: 1.3rem; font-size: .95rem; border: 1px solid var(--line); }
.formmsg.err { background: var(--warn-bg); border-color: var(--warn-line); }
.formmsg.ok  { background: var(--bg-elev); }
.formmsg.ok strong { color: var(--ok); }

/* Footer */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-soft); margin-top: 3rem; padding: 2.6rem 0 1.5rem; }
.foot-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.8rem; }
.foot-col h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: .7rem; font-weight: 700; }
.foot-col a { display: block; color: var(--ink-soft); font-size: .93rem; padding: .2rem 0; }
.foot-col a:hover { color: var(--cyan); text-decoration: none; }
.foot-brand { font-weight: 800; letter-spacing: -0.01em; }
.foot-note { color: var(--ink-faint); font-size: .9rem; margin: .4rem 0 0; }
.foot-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: .85rem;
}
.foot-legal a { color: var(--ink-faint); }
.foot-legal a:hover { color: var(--cyan); text-decoration: none; }

@media (max-width: 620px) {
  .head-inner { min-height: 0; padding-top: .8rem; padding-bottom: .8rem; }
  .head-nav { gap: .9rem; font-size: .88rem; width: 100%; }
  .hero { padding: 2.6rem 0 2rem; }
}


/* ============================================================
   riverArk waves

   The wordmark's swoosh, reused as page furniture. Two places only: a wide
   band behind the hero and a thin one above the footer, so the motif frames
   the page instead of decorating every inch of it.

   Drawn as tapered strokes with gradients that fade to nothing at both ends,
   which is what stops them reading as three lines across the screen. Purely
   decorative, so aria-hidden in the markup and no layout role here.
   ============================================================ */
.waves {
  position: absolute; inset: 0 0 auto; z-index: 0;
  pointer-events: none; overflow: hidden;
  line-height: 0;
}
.waves svg { display: block; width: 100%; height: 100%; }
.waves path { fill: none; stroke-linecap: round; }

/* Hero band. Tall enough to pass behind the headline and the button. */
.hero-home { position: relative; }
/* The shared lede measure is 34rem, which is right for a paragraph and wraps
   this one line in half. It is a single sentence, so it gets room to stay on
   one line on a desktop and still wraps naturally on a phone. */
.hero-home p.lede { max-width: 46rem; }
.hero-home > .wrap { position: relative; z-index: 1; }
/*
 * The band runs behind the headline, so it is masked out through the middle.
 * Without this a stroke cuts straight through "How can we help" and the eye
 * reads it as a strikethrough rather than as a current behind the type.
 */
.hero-waves {
  height: 32rem; top: -4rem;
  -webkit-mask-image: radial-gradient(ellipse 46% 52% at 50% 44%, transparent 35%, #000 82%);
          mask-image: radial-gradient(ellipse 46% 52% at 50% 44%, transparent 35%, #000 82%);
}
.hero-waves .w1 { stroke-width: 2.2; opacity: .85; }
.hero-waves .w2 { stroke-width: 1.6; opacity: .6; }
.hero-waves .w3 { stroke-width: 1.1; opacity: .4; }

/* Footer band. Sits in the rule above the footer columns. */
.foot-waves { position: relative; height: 5.5rem; margin-bottom: -1.6rem; }
.foot-waves .w1 { stroke-width: 1.8; opacity: .7; }
.foot-waves .w2 { stroke-width: 1.2; opacity: .45; }
.foot-waves .w3 { stroke-width: 1; opacity: .3; }

@media (prefers-reduced-motion: no-preference) {
  .hero-waves .w1 { animation: wave-drift 14s ease-in-out infinite alternate; }
  .hero-waves .w2 { animation: wave-drift 19s ease-in-out infinite alternate-reverse; }
  .hero-waves .w3 { animation: wave-drift 24s ease-in-out infinite alternate; }
}
@keyframes wave-drift {
  from { transform: translate3d(-1.2%, 0, 0); }
  to   { transform: translate3d(1.2%, .6%, 0); }
}

@media (max-width: 620px) {
  .hero-waves { height: 24rem; top: -2rem; }
  .foot-waves { height: 4rem; }
}

/* ============================================================
   Point of sale kit grid

   The kit was six paragraphs of bolded names, which is the worst way to
   describe objects somebody has never seen. Showing the pieces makes the
   article scannable and settles the question the copy kept having to answer in
   words: whether a given piece sticks, clings, or does neither.
   ============================================================ */

/* Gentle bleed past the 43rem measure, so the cards have room without the
   article turning into a full width page. Collapses back in line on narrow
   screens, where there is nothing to bleed into. */
.bleed { margin-inline: -4.5rem; }
@media (max-width: 62rem) { .bleed { margin-inline: 0; } }

.kit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem; margin: 1.6rem 0 2.2rem; padding: 0; list-style: none;
}
.kit-item {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--bg-elev); overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.kit-item:hover {
  border-color: color-mix(in srgb, var(--ac, var(--cyan)) 45%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -30px rgba(0,0,0,.95);
}
/* The renders are already composited on --bg-elev, so the artwork sits on the
   card with no visible plate edge. */
.kit-item img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; background: var(--bg-elev);
}
.kit-body { padding: .2rem 1.1rem 1.2rem; }
.kit-item h3 { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.3; }
.kit-item p { margin: .55rem 0 0; color: var(--ink-soft); font-size: .89rem; line-height: 1.5; }

.kit-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: .2rem .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--line); color: var(--ink-soft);
  white-space: nowrap;
}
/* Material is the distinction people get wrong, so it is the chip that
   carries colour. Size stays neutral. */
.chip-mat {
  color: var(--ac); border-color: color-mix(in srgb, var(--ac) 38%, transparent);
  background: color-mix(in srgb, var(--ac) 11%, transparent);
}

/* Size options, for the piece that ships in more than one. */
.kit-sizes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.kit-sizes span {
  border: 1px solid var(--line); border-radius: 8px;
  padding: .16rem .45rem; font-size: .74rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Article design pass

   Articles used the same furniture as a plain document: a grey crumb line, a
   heading, paragraphs, and a bare list at the bottom. Everything below brings
   them into the same language as the homepage, so a reader arriving on an
   article from a sticker's QR code lands somewhere that looks built rather than
   dumped.
   ============================================================ */

/* Wave band across the top of every page except the homepage, which has its
   own taller one inside the hero. */
main { position: relative; }
/*
 * Pulled up and cropped, so only the tail of the curve shows under the header.
 * At full height a stroke ran straight through the article title, which reads
 * as a strikethrough rather than as depth.
 */
.page-waves { height: 13rem; top: -5.5rem; z-index: 0; }
.page-waves .w1 { stroke-width: 1.5; opacity: .38; }
.page-waves .w2 { stroke-width: 1.1; opacity: .24; }
.page-waves .w3 { stroke-width: 1;   opacity: .16; }
main > * { position: relative; z-index: 1; }

/* Breadcrumb reads as a trail of steps rather than a sentence of slashes. */
.crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  font-size: .82rem; color: var(--ink-faint);
  margin-bottom: 1.5rem;
}
.crumb a {
  color: var(--ink-soft); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .7rem; transition: border-color .15s, color .15s;
}
.crumb a:hover { color: var(--ink); border-color: var(--cyan); }

/* A gradient hairline under the title, closing the header block. */
.article h1 { margin-bottom: 1rem; }
.article h1::after {
  content: ""; display: block; width: 3.4rem; height: 3px;
  margin-top: 1.1rem; border-radius: 999px; background: var(--gradient);
}

/*
 * Section headings get the same accent bead as the homepage groups. It is the
 * cheapest way to make a long article scannable: the eye finds the beads and
 * the section boundaries stop depending on remembering a type size.
 */
.article h2 {
  display: flex; align-items: baseline; gap: .65rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line-soft);
  margin: 2.8rem 0 1rem;
}
.article h2::before {
  content: ""; flex: none; align-self: center;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34,211,238,.14);
}
/* The first heading follows the lead paragraph, which is separation enough. */
.article > h2:first-of-type { border-top: 0; padding-top: 0; }

/*
 * Ordered lists become steps.
 *
 * Several articles are procedures, and a default decimal marker in the gutter
 * gives them no more weight than a shopping list. Numbered bubbles on the
 * baseline make the sequence the structure of the section.
 */
.article ol {
  list-style: none; counter-reset: step; padding-left: 0; margin: 1.4rem 0 1.6rem;
}
.article ol > li {
  counter-increment: step; position: relative;
  padding: 0 0 0 2.9rem; margin-bottom: 1rem; min-height: 2rem;
}
.article ol > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.95rem; height: 1.95rem; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--line);
  color: var(--cyan); font-size: .85rem; font-weight: 750;
  font-variant-numeric: tabular-nums;
}

/* Unordered lists keep their marker but pick up the accent colour. */
.article ul > li::marker { color: var(--cyan); }

/*
 * Related articles as cards.
 *
 * Replaces the CSS that targeted "the list after the last h2", which was
 * fragile: any article that ended with a different section silently lost the
 * styling or applied it to the wrong list. The class is explicit now.
 */
.article .related {
  list-style: none; padding: 0; margin: 1.3rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem;
}
.article .related li { margin: 0; padding: 0; }
.article .related a {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .95rem 1.1rem; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-elev); color: var(--ink);
  text-decoration: none; font-size: .97rem; font-weight: 600; line-height: 1.35;
  transition: border-color .15s, transform .15s, color .15s;
}
.article .related a::after {
  content: "\2192"; color: var(--ink-faint); flex: none; transition: transform .15s, color .15s;
}
.article .related a:hover {
  border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px);
}
.article .related a:hover::after { color: var(--cyan); transform: translateX(3px); }

/* Closing help block, on every article. */
.article-help {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem;
  margin: 3rem 0 0; padding-top: 2.2rem; border-top: 1px solid var(--line);
}
.help-card {
  --ac: var(--cyan);
  /* .article a underlines every link in the body copy, which is right for prose
     and wrong for a card. */
  text-decoration: none !important;
  display: block; padding: 1.25rem 1.35rem;
  border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elev);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.help-card:hover {
  border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -30px color-mix(in srgb, var(--ac) 70%, transparent);
}
.help-card strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: .25rem; }
.help-card span { display: block; color: var(--ink-soft); font-size: .89rem; line-height: 1.5; }
.help-card em {
  display: block; font-style: normal; margin-top: .7rem;
  color: var(--ac); font-size: .87rem; font-weight: 650;
}

/* Images inside an article, so a screenshot does not sit on the page raw. */
.article figure { margin: 1.8rem 0; }
.article figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elev);
}
.article figcaption { color: var(--ink-faint); font-size: .85rem; margin-top: .6rem; }

/* ============================================================
   FAQ
   ============================================================ */
/*
  Built on <details>, so a question opens with no script and the page is usable
  if the stylesheet or JavaScript never arrives. Everything below is presentation
  on top of behaviour that already works.
*/
.faq-page .lede { color: var(--ink-soft); font-size: 1.06rem; margin-bottom: 2.4rem; }

.faq-group { margin: 0 0 2.6rem; }
.faq-group > h2 {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.12rem; letter-spacing: .01em;
  margin: 0 0 .9rem;
}
.faq-group > h2::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--ac, var(--cyan)); flex: 0 0 auto;
}

.faq-item {
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: 10px;
  background: var(--elev);
  margin-bottom: .55rem;
  transition: border-color .15s, background .15s;
}
.faq-item[open] {
  border-left-color: var(--ac, var(--cyan));
  background: color-mix(in srgb, var(--ac, var(--cyan)) 5%, var(--elev));
}
.faq-item:hover { border-color: color-mix(in srgb, var(--ac, var(--cyan)) 35%, var(--line)); }

.faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: .85rem 2.6rem .85rem 1rem;
  position: relative;
  font-weight: 600;
  color: var(--ink);
  font-size: .98rem;
  line-height: 1.45;
}
.faq-item > summary::-webkit-details-marker { display: none; }
/* Chevron drawn in CSS: two borders rotated, so no icon font and no image. */
.faq-item > summary::after {
  content: "";
  position: absolute; right: 1.05rem; top: 1.15rem;
  width: .45rem; height: .45rem;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform .18s, border-color .18s;
}
.faq-item[open] > summary::after {
  transform: rotate(-135deg);
  border-color: var(--ac, var(--cyan));
}
.faq-item > summary:focus-visible {
  outline: 2px solid var(--ac, var(--cyan));
  outline-offset: -2px;
  border-radius: 10px;
}

.faq-body { padding: 0 1.2rem 1rem 1rem; }
.faq-body p { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.faq-body p:last-child { margin-bottom: 0; }

.faq-more { display: flex; flex-wrap: wrap; gap: 1rem; }
.faq-more a {
  color: var(--ac, var(--cyan));
  font-weight: 600;
  font-size: .89rem;
  text-decoration: none;
}
.faq-more a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .faq-item > summary { padding-right: 2.2rem; font-size: .95rem; }
}

/* ============================================================
   Book a call
   ============================================================ */
.sched-signout { font-size: .9rem; color: var(--ink-faint); }
.sched-signout:hover { color: var(--ink); }

.sched-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.8rem;
}
@media (max-width: 700px) { .sched-grid { grid-template-columns: 1fr; } }

/*
  Same accent-card shape the knowledge base directory uses, so the two meeting
  types read as a choice between peers rather than as a primary and a fallback.
*/
.sched-card {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1.2rem 1.15rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--ac, var(--cyan));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ac, var(--cyan)) 5%, var(--elev));
  text-decoration: none;
  transition: transform .15s, border-color .15s, background .15s;
}
.sched-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ac, var(--cyan)) 45%, var(--line));
  background: color-mix(in srgb, var(--ac, var(--cyan)) 9%, var(--elev));
  text-decoration: none;
}
.sched-kind {
  font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ac, var(--cyan));
}
.sched-card strong { color: var(--ink); font-size: 1.05rem; }
.sched-card span:not(.sched-kind) { color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }
.sched-card em {
  font-style: normal; font-weight: 600; font-size: .89rem;
  color: var(--ac, var(--cyan)); margin-top: .35rem;
}

/* ============================================================
   Consumer opt-in

   The block on the onboarding article where a shopper can mail themselves the
   steps. It has to read as a small aside inside an instruction page, not as a
   newsletter box bolted to the bottom, so it sits inline where the decision
   happens and takes one line of height more than the paragraph above it.
   ============================================================ */
.optin {
  margin: 2rem 0;
  padding: 1.3rem 1.4rem 1.4rem;
  background: color-mix(in srgb, var(--cyan) 6%, var(--elev));
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, var(--line));
  border-radius: 14px;
}
.optin-head { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; }
.optin-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
}
.optin-head h2 { margin: 0 0 .2rem; font-size: 1.05rem; color: var(--ink); }
.optin-head p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }

.optin-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.optin-row input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  box-sizing: border-box;
  padding: .7rem .9rem;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 1rem;
}
.optin-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* The tick is drawn rather than left to the browser, which paints a white box
   on a dark page. */
.optin-consent {
  display: flex; align-items: flex-start; gap: .55rem;
  margin: .9rem 0 0;
  color: var(--ink-soft); font-size: .88rem; line-height: 1.5; cursor: pointer;
}
.optin-consent input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 auto;
  width: 1.05rem; height: 1.05rem; margin: .15rem 0 0;
  background: var(--elev); border: 1px solid var(--line); border-radius: 4px;
  display: inline-grid; place-content: center; cursor: pointer;
}
.optin-consent input[type="checkbox"]::before {
  content: ""; width: .5rem; height: .28rem;
  border-left: 2px solid #04141c; border-bottom: 2px solid #04141c;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.optin-consent input[type="checkbox"]:checked { background: var(--cyan); border-color: var(--cyan); }
.optin-consent input[type="checkbox"]:checked::before { opacity: 1; }
.optin-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.optin-note { margin: .85rem 0 0; color: var(--ink-faint); font-size: .82rem; line-height: 1.55; }
.optin-note a { color: var(--ink-faint); text-decoration: underline; }
.optin-note a:hover { color: var(--cyan); }

.optin .formmsg { margin-top: .9rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Article h2s carry an accent bead and a rule. Inside this box the heading is
   the box's own title, so it drops both. */
.optin-head h2::before,
.optin-head h2::after { display: none !important; }
.optin-head h2 { padding: 0 !important; border: 0 !important; }

/* Language switcher. Both options always visible; the current one is filled. */
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; }
.head-nav .lang-switch a { font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: .22rem .55rem; border-radius: 999px; color: var(--ink-faint); line-height: 1.2; }
.head-nav .lang-switch a:hover { color: var(--ink); }
.head-nav .lang-switch a[aria-current="true"] { background: var(--bg-elev-2); color: var(--ink); }
.lang-hint { margin: 0 0 .6rem; font-size: .92rem; }
.lang-hint a { color: var(--cyan); }

/* ============================================================
   Sleek pass
   Smaller type scale, lighter weights, tighter chrome. Sections get
   numbered markers, steps read as a connected timeline, and the
   directory groups carry their accent as a top glow.
   ============================================================ */
body { font-size: 15px; line-height: 1.6; }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.025em; }

/* Header */
.head-inner { min-height: 56px; }
.brand img { height: 24px; }
.brand-sub { font-size: .6rem; padding: .16rem .5rem; }
.head-nav { gap: 1.1rem; font-size: .84rem; }
.btn-sm { padding: .36rem .85rem; font-weight: 600; font-size: .82rem; }

/* Home hero */
.hero-home { padding-top: 2.6rem; padding-bottom: .6rem; }
.hero h1, .hero-home h1 { font-size: clamp(1.55rem, 3.2vw, 2.1rem); font-weight: 650; }
.hero p.lede { font-size: .98rem; margin-bottom: 1.3rem; }
.btn-hero {
  padding: .62rem 1.05rem .62rem 1.35rem; font-size: .9rem; font-weight: 650; gap: .5rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -12px rgba(34,211,238,.5);
}
.btn-hero:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 28px -12px rgba(34,211,238,.6); }
.btn-hero svg { width: 15px; height: 15px; }
.btn-hero-sub { font-size: .8rem; margin-top: .7rem; }
.hero-waves { height: 24rem; top: -3rem; }
.section-hero-video .wrap { max-width: 760px !important; }
.section { padding: 2rem 0; }

/* Video tabs */
.vt-tab { font-size: .76rem; padding: .28rem .75rem; }
.video-embed { border-radius: 12px; box-shadow: 0 24px 60px -36px rgba(0,0,0,.9); }

/* Directory groups */
.dir, .dir-col { gap: .9rem; }
.dir-group {
  position: relative; overflow: hidden;
  border-radius: 14px; padding: .95rem 1rem 1rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 7%, var(--bg-elev)), var(--bg-elev) 5.5rem);
}
.dir-group::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent); opacity: .7;
}
.dir-group h2 { font-size: .64rem; letter-spacing: .14em; padding-bottom: .6rem; margin-bottom: .2rem; color: var(--ac); border-bottom-color: var(--line-soft); }
.dir-group h2::before { width: 6px; height: 6px; }
.dir-group a {
  position: relative; padding: .55rem 1.6rem .55rem .55rem; margin: 0 -.35rem; border-radius: 9px;
  border-bottom: 0;
}
.dir-group a::after {
  content: "\2192"; position: absolute; right: .55rem; top: .55rem;
  color: var(--ac); opacity: 0; transform: translateX(-4px);
  transition: opacity .15s, transform .15s; font-size: .85rem;
}
.dir-group a:hover::after { opacity: 1; transform: none; }
.dir-title { font-size: .87rem; font-weight: 550; line-height: 1.35; }
.dir-sub { font-size: .78rem; margin-top: .1rem; line-height: 1.4; }

/* Closing panels and help cards */
.grid-two { gap: 1rem; }
.panel { padding: 1.15rem 1.25rem; border-radius: 14px; gap: .9rem; }
.panel h3 { font-size: .98rem; margin-bottom: .2rem; }
.panel p { font-size: .84rem; margin-bottom: .55rem; }
.panel-icon { width: 38px; height: 38px; }
.panel-icon svg { width: 17px; height: 17px; }
.panel-cta { font-size: .82rem; }
.help-card { padding: 1rem 1.1rem; border-radius: 12px; }
.help-card strong { font-size: .92rem; }
.help-card span, .help-card em { font-size: .82rem; }

/* Article */
.article { max-width: 41rem; padding: 1.8rem 0 3rem; font-size: .98rem; line-height: 1.72; counter-reset: sec; }
.crumb { font-size: .74rem; margin-bottom: 1.1rem; gap: .3rem; }
.crumb a { padding: .12rem .55rem; }
.article h1 { font-size: clamp(1.45rem, 2.8vw, 1.85rem); line-height: 1.2; font-weight: 650; margin-bottom: .7rem; }
.article h1::after { width: 2.2rem; height: 2px; margin-top: .8rem; }
.article > p.lead, .article > p:first-of-type { font-size: 1.04rem; line-height: 1.6; margin-bottom: 1.3rem; }

/* Numbered sections. The Related heading carries no number. */
.article h2 {
  font-size: 1.08rem; font-weight: 650; align-items: center; gap: .7rem;
  margin: 2.4rem 0 .8rem; padding-top: 0; border-top: 0;
}
.article h2::before {
  counter-increment: sec; content: counter(sec, decimal-leading-zero);
  width: auto; height: auto; min-width: 1.9rem; padding: .18rem .4rem; border-radius: 7px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--cyan); text-align: center; align-self: center;
  background: rgba(34,211,238,.08); box-shadow: 0 0 0 1px rgba(34,211,238,.22) inset;
}
.article h2:has(+ .related)::before, .article h2:has(+ ul.related)::before {
  counter-increment: none; content: ""; min-width: 0; width: 1.1rem; height: 2px; padding: 0;
  border-radius: 2px; background: var(--gradient); box-shadow: none;
}
.article h2::after {
  content: ""; flex: 1; height: 1px; align-self: center;
  background: linear-gradient(90deg, var(--line), transparent);
}
.article h3 { font-size: .98rem; font-weight: 650; }

/* Steps as a timeline */
.article ol { margin: 1.1rem 0 1.4rem; }
.article ol > li { padding-left: 2.5rem; margin-bottom: .85rem; min-height: 1.7rem; }
.article ol > li::before {
  width: 1.6rem; height: 1.6rem; font-size: .74rem; font-weight: 700; top: .05rem;
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--cyan) 35%, transparent);
}
.article ol > li:not(:last-child)::after {
  content: ""; position: absolute; left: .78rem; top: 1.85rem; bottom: -.75rem;
  width: 1px; background: linear-gradient(var(--line), transparent);
}

/* Callouts */
.callout { border-radius: 12px; border: 1px solid var(--line); border-left-width: 1px; padding: .95rem 1.1rem .95rem 1.2rem; font-size: .92rem; position: relative; overflow: hidden; background: color-mix(in srgb, var(--cyan) 5%, var(--bg-elev)); }
.callout::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gradient); }
.callout.warn { background: color-mix(in srgb, var(--amber) 6%, var(--bg-elev)); }
.callout.warn::before { background: var(--amber); }

/* Related */
.article .related { gap: .6rem; margin-top: .9rem; }
.article .related a { padding: .7rem .9rem; border-radius: 10px; font-size: .86rem; font-weight: 550; }
.article-help { margin-top: 2.4rem; padding-top: 1.8rem; }

/* Footer */
.site-foot { padding: 2rem 0 1.2rem; }
.foot-col a { font-size: .84rem; }
.foot-col h3 { font-size: .68rem; }
.foot-legal { font-size: .76rem; }

@media (max-width: 620px) {
  .hero-home { padding-top: 2rem; }
  .article { padding-top: 1.2rem; }
}