/* espDNS site: the controller's Gulf colours (controller/web/shell.css), light and dark.
   No web fonts, no scripts: the home slider turns with radios and the feature cards flip
   with <details>, in CSS. */
:root {
  --navy: #0d2b4e; --sky: #9fc7e7; --orange: #f68b2c;
  --bg: #f3f8fc; --surface: #ffffff; --fg: #0d2b4e; --muted: #4c6580;
  --line: #d3e3f1; --code: #e4f0f9; --wash: #e4f0f9;
  --primary: #f68b2c; --on-primary: #0d2b4e;
  --topbar: #0d2b4e; --topbar-fg: #ffffff; --topbar-muted: #b9d4ea;
  --soon-bg: #e4f0f9; --soon-fg: #2f4f72;
  --back: #0d2b4e; --back-fg: #ffffff; --back-muted: #b9d4ea;
  --band: #0d2b4e; --band-fg: #ffffff; --band-muted: #b9d4ea;
  --dot: #a9c3da;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1d33; --surface: #10294a; --fg: #ffffff; --muted: #b9d4ea;
    --line: #1f4470; --code: #061426; --wash: #0e2440;
    --on-primary: #0a1d33;
    --topbar: #061426; --topbar-muted: #9fc7e7;
    --soon-bg: #1f4470; --soon-fg: #b9d4ea;
    --back: #061426; --back-muted: #9fc7e7;
    --band: #061426; --band-muted: #9fc7e7;
    --dot: #3d6a99;
    color-scheme: dark;
  }
}

* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 var(--sans); min-height: 100vh; display: flex; flex-direction: column }
a { color: inherit; text-underline-offset: 2px }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px }
.skip { position: absolute; left: 8px; top: -48px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); z-index: 20 }
.skip:focus { top: 8px }

/* The top bar, with the stripe under it */
.top { background: var(--topbar); box-shadow: 0 3px 0 var(--sky), 0 6px 0 var(--orange); margin-bottom: 6px }
.top-in { max-width: 1040px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 4px 24px; min-height: 56px; flex-wrap: wrap }
.brand { font-weight: 600; font-size: 17px; text-decoration: none; color: var(--topbar-fg) }
.brand::after { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); margin-left: 6px; vertical-align: 1px }
.top nav { display: flex; gap: 0 20px; flex-wrap: wrap }
.top nav a { color: var(--topbar-muted); text-decoration: none; padding: 16px 0 }
.top nav a:hover { color: var(--topbar-fg); text-decoration: underline }
.top nav a[aria-current] { color: var(--topbar-fg); box-shadow: inset 0 -3px 0 var(--orange) }
.top nav a:focus-visible, .brand:focus-visible { outline-color: var(--topbar-fg) }

main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 48px 16px 64px }
h1 { font-size: 46px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; margin: 0 0 18px; max-width: 18ch; text-wrap: balance }
h2 { font-size: 22px; line-height: 1.2; font-weight: 650; margin: 0 0 8px }
p { margin: 0 0 12px; max-width: 68ch }
.lead { font-size: 20px; line-height: 1.5; max-width: 60ch }
.muted { color: var(--muted) }
code { font-family: var(--mono); font-size: .9em; overflow-wrap: anywhere }
.soon { display: inline-block; background: var(--soon-bg); color: var(--soon-fg); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; vertical-align: middle; white-space: nowrap }

/* Buttons */
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.button { display: inline-block; background: var(--primary); color: var(--on-primary); font-weight: 600; text-decoration: none; padding: 10px 22px; border-radius: var(--r); border: 1px solid var(--primary) }
.button:hover { text-decoration: underline }
.button.secondary { background: transparent; color: var(--fg); border-color: var(--line) }

/* Home: a slider of three heroes, A, B and C, each with its headline, lead, buttons and
   figures. No script: four radios (auto, a, b, c) come before the slides and the controls,
   which are their labels. The slides share one grid cell, so the slider is as tall as the
   tallest and nothing moves when they turn; a hidden slide is visibility: hidden, out of the
   tab order and the accessibility tree. "auto", checked at first, turns them every 8 s (one
   24 s animation, each slide a third of it later), paused while the pointer is over the
   slider or the keyboard focus is in it; choosing a slide stops it there, Play starts it
   again. With reduced motion asked for, nothing turns by itself: slide A shows, and the
   dots and arrows change it. */
.page-home main { padding-top: 36px; padding-bottom: 40px }
.slider { position: relative }
.pick { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none }
.slides { display: grid }
/* A slide is as tall as the tallest: its figures sit at the bottom, level with the others' */
.slide { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column }
.slide > ul { margin-top: auto }
.slide .actions { margin-bottom: 32px }
.slider .s-a, .slider .s-b, .slider .s-c { visibility: hidden; opacity: 0 }
#hero-a:checked ~ * .s-a, #hero-b:checked ~ * .s-b, #hero-c:checked ~ * .s-c { visibility: visible; opacity: 1; animation: hero-in .4s ease }
/* Longhands, not the animation shorthand, so the pause below is not reset to running */
#hero-auto:checked ~ * .s-a, #hero-auto:checked ~ * .s-b, #hero-auto:checked ~ * .s-c { animation-name: hero-turn; animation-duration: 24s; animation-timing-function: linear; animation-iteration-count: infinite }
#hero-auto:checked ~ * .s-b { animation-delay: -16s }
#hero-auto:checked ~ * .s-c { animation-delay: -8s }
.slider:hover *, .slider:has(:focus-visible) * { animation-play-state: paused }
@keyframes hero-turn {
  0% { visibility: visible; opacity: 0 }
  2% { opacity: 1 }
  31.3% { visibility: visible; opacity: 1 }
  33.33% { visibility: hidden; opacity: 0 }
  100% { visibility: hidden; opacity: 0 }
}
@keyframes hero-in { from { opacity: 0 } }

/* The headline: the page's one h1 on slide A, an h2 set the same on B and C */
.slide .headline { font-size: 46px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; margin: 0 0 18px; max-width: 18ch; text-wrap: balance }

/* The controls: previous, the three dots, next, and Play */
.controls { display: flex; align-items: center; gap: 10px; margin-top: 24px }
.controls label { cursor: pointer }
.arrow { display: grid }
.arrow label { grid-area: 1 / 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg) }
.arrow label:hover { border-color: var(--orange) }
.controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.dots { display: flex; align-items: center; gap: 8px; padding: 0 4px }
.dot { display: block; width: 10px; height: 10px; border-radius: 999px; background: var(--dot); transition: width .3s, background-color .3s }
.dot:hover { background: var(--sky) }
#hero-a:checked ~ .controls .d-a, #hero-b:checked ~ .controls .d-b, #hero-c:checked ~ .controls .d-c { width: 28px; background: var(--orange) }
#hero-auto:checked ~ .controls .dot { animation-name: hero-dot; animation-duration: 24s; animation-timing-function: linear; animation-iteration-count: infinite }
#hero-auto:checked ~ .controls .d-b { animation-delay: -16s }
#hero-auto:checked ~ .controls .d-c { animation-delay: -8s }
@keyframes hero-dot {
  0%, 33.32% { width: 28px; background: var(--orange) }
  33.33%, 100% { width: 10px; background: var(--dot) }
}
.play { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 6px 12px 6px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 600 }
.play svg { width: 14px; height: 14px; fill: currentColor; stroke: none }
.play:hover { border-color: var(--orange); color: var(--fg) }
.play .when-on, #hero-auto:checked ~ .controls .play .when-off { display: none }
#hero-auto:checked ~ .controls .play .when-on { display: inline }
#hero-auto:checked ~ .controls .play { color: var(--fg); border-color: var(--orange) }
/* The keyboard: Tab reaches the radios, the arrow keys change slides; the ring shows on the
   chosen one's dot (or Play) */
#hero-auto:focus-visible ~ .controls .play, #hero-a:focus-visible ~ .controls .d-a,
#hero-b:focus-visible ~ .controls .d-b, #hero-c:focus-visible ~ .controls .d-c { outline: 2px solid var(--fg); outline-offset: 3px }

/* A: the eyebrow, the buttons and the four figures */
.eyebrow { color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 3px; background: var(--orange); margin-right: 10px; vertical-align: 3px }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.stats li { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--r); padding: 12px 16px; display: grid; gap: 2px }
.stats strong { font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em }
.stats span { color: var(--muted); font-size: 14px }

/* B: the pill eyebrow, the 8px corners, the ghost button and the numbers strip */
.hero-b { --r: 8px }
.hero-b .eyebrow { text-transform: none; font-weight: 400; letter-spacing: .01em; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.hero-b .eyebrow::before { content: none }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--orange); color: var(--on-primary); font-weight: 650; font-size: 13px; letter-spacing: .02em }
.hero-b .headline { line-height: 1.08 }
.hero-b .actions { gap: 14px 20px; margin-top: 6px }
.hero-b .button { font-weight: 650; padding: 11px 22px; border-width: 2px }
.button.ghost { background: transparent; color: var(--fg); border-color: var(--line) }
.hero-b .button.ghost:hover { border-color: var(--sky) }
.numbers { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px }
.numbers li { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--r); padding: 14px 18px; display: grid; gap: 2px }
.numbers strong { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; font-weight: 700 }
.numbers span { color: var(--muted); font-size: 14px }

/* C: the mono kicker, the heavier headline, the ghost button and the navy numbers band */
.hero-c .headline { font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; margin-bottom: 20px; max-width: none; text-wrap: wrap }
.hero-c .lead { font-size: 21px; line-height: 1.45; max-width: 56ch }
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin: 0 0 14px }
.hero-c .actions { gap: 12px 16px; margin-top: 24px; margin-bottom: 36px }
.hero-c .button { font-weight: 700; padding: 12px 24px; border-width: 2px }
.hero-c .button.ghost:hover { border-color: var(--fg) }
.band { margin: 0; list-style: none; background: var(--band); color: var(--band-fg); border-radius: var(--r); box-shadow: inset 0 -4px 0 var(--orange); padding: 24px 24px 28px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 24px }
.band li { display: grid; gap: 4px; min-width: 0 }
.band strong { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--band-fg) }
.band span { color: var(--band-muted); font-size: 14px; line-height: 1.35 }

@media (prefers-reduced-motion: reduce) {
  #hero-auto:checked ~ * .s-a, #hero-auto:checked ~ * .s-b, #hero-auto:checked ~ * .s-c,
  #hero-a:checked ~ * .s-a, #hero-b:checked ~ * .s-b, #hero-c:checked ~ * .s-c,
  #hero-auto:checked ~ .controls .dot { animation: none }
  #hero-auto:checked ~ * .s-a { visibility: visible; opacity: 1 }
  #hero-auto:checked ~ .controls .d-a { width: 28px; background: var(--orange) }
  #hero-auto, .play { display: none }
  .dot { transition: none }
}

/* Features: six cards, three by two on a desktop screen, sized so the heading and all six
   fit without scrolling. Each card is a <details>: its <summary> holds the front (the icon
   and the word) and, once open, the x; the details are the back, laid over the whole card.
   The cards share a name, so opening one closes the others. */
.page-features main { padding-top: 28px; padding-bottom: 20px }
.page-features h1 { font-size: 36px; max-width: none; margin-bottom: 4px }
.intro { margin-bottom: 18px }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); --card-h: clamp(220px, calc((100vh - 222px) / 2), 300px) }
.card { position: relative; height: var(--card-h); perspective: 1200px }
.card > summary { list-style: none; cursor: pointer }
.card > summary::-webkit-details-marker { display: none }
.card > summary:focus-visible { outline: none }
.face { position: absolute; inset: 0; border-radius: var(--r); backface-visibility: hidden; -webkit-backface-visibility: hidden }
.front { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--sky);
  font-size: 24px; font-weight: 650; letter-spacing: -.01em; transition: transform .5s ease, border-color .15s }
.front svg { width: 60px; height: 60px; padding: 16px; box-sizing: content-box; border-radius: 50%; background: var(--wash); stroke: var(--fg); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.front svg .accent { stroke: var(--orange) }
.front .hint { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted) }
.card > summary:hover .front { border-color: var(--sky); border-top-color: var(--orange) }
.card:not([open]) > summary:focus-visible .front { outline: 3px solid var(--orange); outline-offset: 2px }
.card[open] .front { transform: rotateY(180deg) }

.back { z-index: 1; background: var(--back); color: var(--back-fg); border-top: 3px solid var(--orange); padding: 14px 18px 12px; overflow: hidden; animation: flip-in .5s ease }
.back .title { font-size: 18px; font-weight: 650; margin: 0 40px 8px 0 }
.back ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px }
.back li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.4 }
.back li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--sky) }
.back b { font-weight: 650 }
.back .soon { background: var(--orange); color: var(--navy); font-size: 10px; padding: 1px 6px }
.back .note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--back-muted) }
/* A short window (a 1366x768 laptop's browser has about 650 px): the cards get shorter, so
   the backs get tighter, and every line still shows without scrolling inside the card */
@media (min-width: 641px) and (max-height: 740px) {
  .back { padding: 10px 16px 8px }
  .back .title { font-size: 16px; margin-bottom: 4px }
  .back ul { gap: 2px }
  .back li { font-size: 13px; line-height: 1.35 }
  .back .note { margin-top: 4px; font-size: 12px; line-height: 1.35 }
}
@keyframes flip-in { from { transform: rotateY(-180deg) } to { transform: none } }

.x { display: none; position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--back-fg); background: rgba(255, 255, 255, .1) }
.x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none }
.card[open] .x { display: grid; animation: fade-in .5s steps(1, end) }
.card[open] > summary:hover .x { background: rgba(255, 255, 255, .22) }
.card[open] > summary:focus-visible .x { outline: 3px solid var(--orange); outline-offset: 1px }
@keyframes fade-in { from { opacity: 0 } }

/* No motion wanted: the card swaps faces at once */
@media (prefers-reduced-motion: reduce) {
  .front, .back, .card[open] .x { transition: none; animation: none }
}

/* Get started: what the walkthrough will be */
.soon-big { font-size: 13px; padding: 3px 10px; margin-bottom: 14px }
.plan { margin: 28px 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
.plan li { counter-increment: n; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; min-width: 0 }
.plan li::before { content: counter(n); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 50%; background: var(--orange); color: var(--on-primary); font-size: 14px; font-weight: 700 }
.plan h2 { font-size: 17px; margin-bottom: 2px }
.plan p { font-size: 15px; color: var(--muted); margin: 0 }

footer { border-top: 1px solid var(--line) }
.foot-in { max-width: 1040px; margin: 0 auto; padding: 16px 16px 24px; color: var(--muted); font-size: 14px }
.alpha { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .03em; padding: 1px 8px; border-radius: 999px; background: var(--soon-bg); color: var(--soon-fg) }

@media (max-width: 900px) {
  .band { grid-template-columns: repeat(3, 1fr) }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); --card-h: 280px }
}
@media (max-width: 640px) {
  h1 { font-size: 32px }
  .page-features h1 { font-size: 28px }
  .lead { font-size: 17px }
  main { padding-top: 28px }
  .top nav a { padding: 6px 0 12px }
  .top nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--orange) }
  .stats strong { font-size: 22px }
  .slide .headline { font-size: 32px }
  .hero-c .headline { font-size: 34px }
  .hero-c .lead { font-size: 18px }
  .numbers strong { font-size: 26px }
  .band { padding: 22px 18px 26px; grid-template-columns: repeat(2, 1fr); gap: 18px 16px }
  .band strong { font-size: 32px }
  .page-home main { padding-top: 24px }
  /* On a phone the slides are long: the controls go above them, where they can be seen */
  .slider { display: flex; flex-direction: column }
  .controls { order: -1; margin: 0 0 20px }
  /* and each slide's figures follow its buttons, so a short slide has no gap in its middle */
  .slide > ul { margin-top: 0 }
  .cards { grid-template-columns: 1fr; --card-h: 290px }
}