/* ==========================================================================
   eggl — https://eggl.io
   Hand-written stylesheet. No framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --navy-900: #04001c;
  --navy-800: #07002f;
  --navy-700: #0c0540;
  --navy-600: #19124f;
  --navy-500: #241b66;

  --orange: #e46617;
  --orange-bright: #ff8330;
  --orange-soft: #fa8f6b;
  --violet: #7b5eed;

  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.68);
  --text-dim: rgba(255, 255, 255, 0.58);

  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-raised: rgba(255, 255, 255, 0.07);

  --font: 'Open Sauce One', ui-sans-serif, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Open Sauce One first: font fallback is per glyph, so only the three
     symbols it lacks (⌘ ⌥ ⎋) drop to the system stack. Listing it last meant
     "space", "esc" and the digits all rendered in the wrong face. */
  --font-keys: 'Open Sauce One', ui-sans-serif, -apple-system, BlinkMacSystemFont,
    'SF Pro Text', 'Apple Symbols', 'Segoe UI Symbol', 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Tight contact shadows. A 60-90px black blur on a dark ground reads as
     grime, not lift — the border and the fill do the separating. */
  --shadow-soft: 0 8px 18px -10px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 14px 30px -16px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 12px 28px -12px rgba(228, 102, 23, 0.5);

  /* One text measure (~68 characters at body size) and one inset block. */
  --measure: 36rem;
  --inset: 44rem;

  --container: 1140px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(2.75rem, 5vw, 4.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Three speeds, one scale: press, everything interactive, settles. */
  --dur-fast: 0.14s;
  --dur: 0.24s;
  --dur-slow: 0.45s;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  min-height: 100vh;
  background-color: var(--navy-800);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient light. Fixed so it never adds to document height. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% -8%, rgba(228, 102, 23, 0.22), transparent 62%),
    radial-gradient(52rem 42rem at 6% 14%, rgba(123, 94, 237, 0.2), transparent 60%),
    radial-gradient(70rem 50rem at 50% 108%, rgba(123, 94, 237, 0.14), transparent 60%);
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  text-wrap: balance;
}

/* Tracking and leading belong to the size, not to every heading at once.
   -0.02em is right at 46px and visibly tight at 18px. */
h1,
.h1 {
  letter-spacing: -0.03em;
  line-height: 1.05;
}

h2,
.h2 {
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h3,
.h3,
h4 {
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--orange-soft);
  text-decoration-color: rgba(250, 143, 107, 0.4);
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

a:hover {
  color: var(--orange-bright);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--orange-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Selecting text should not make it harder to read than leaving it alone. */
::selection {
  background: var(--orange);
  color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 760px;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

/* Rhythm, not a metronome: shortcuts and themes are one idea so they sit
   closer, and there is one genuine pause before the ask. Desktop-only —
   on a phone every section is single-column already, and a 0.55 multiplier
   would tuck the THEMES eyebrow right under the panel above it. */
@media (min-width: 760px) {
  #themes {
    padding-block-start: calc(var(--section-y) * 0.55);
  }

  #download {
    padding-block-start: calc(var(--section-y) * 1.75);
  }
}

.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--orange-soft);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px 2px rgba(228, 102, 23, 0.7);
}

h1,
.h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
}

h2,
.h2 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
}

h3,
.h3 {
  font-size: clamp(1.25rem, 1.1vw + 0.85rem, 1.45rem);
}

.lede {
  margin-top: 1.25rem;
  color: var(--text-muted);
  font-size: clamp(1.02rem, 0.9vw + 0.75rem, 1.15rem);
  line-height: 1.6;
  max-width: 38rem; /* ~62 characters at 18.4px */
}

.section__head--center .lede {
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--orange);
  color: var(--navy-800);
  font-weight: 500;
  text-decoration: none;
  transform: translate(-50%, -110%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
  color: var(--navy-800);
  transform: translate(-50%, 0);
}

.accent {
  color: var(--orange-bright);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  /* min-height governs, not padding, so buttons in a row match exactly.
     3.65rem is today's rendered 58.3px default. */
  min-height: 3.65rem;
  padding: 0.5rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* A press should land under the finger, not decelerate behind it. */
.btn:active {
  transform: translateY(0);
  transition-duration: var(--dur-fast);
}

.btn--primary {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange));
  /* White on this gradient measures 2.9:1 — below AA for 16px text. Navy
     measures 5.9:1 at the dark end and 8.1:1 at the bright end, and reads as
     a Mac control rather than a generic white-on-orange SaaS button. */
  color: var(--navy-800);
  box-shadow: var(--shadow-glow);
}

.btn--primary .btn__sub {
  opacity: 1;
  color: rgba(7, 0, 47, 0.85);
}

/* The focus ring cannot be the colour of the button it rings. */
.btn--primary:focus-visible {
  outline-color: var(--text);
}

.btn--ghost {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

.btn--lg {
  min-height: 4.5rem;
  padding: 0.5rem 2rem;
  font-size: 1.05rem;
}

.btn__sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.8;
}

.btn__stack {
  text-align: left;
  line-height: 1.25;
}

.btn__stack strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

/* --------------------------------------------------------------------------
   6. Site header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(7, 0, 47, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

.brand__mark {
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
}

.brand__mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.brand__mark img:last-child {
  opacity: 0;
}

.brand:focus-visible .brand__mark img:first-child {
  opacity: 0;
}

.brand:focus-visible .brand__mark img:last-child {
  opacity: 1;
  transform: rotate(-6deg) scale(1.08);
}

/* Elevation and swap hovers only where hover is real. On a touch screen a tap
   synthesises hover and holds it, so the download button — an external link
   that leaves the page — came back raised, and the mascot stayed tilted. */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }

  .btn--primary:hover {
    color: var(--navy-800);
    box-shadow: 0 16px 34px -12px rgba(228, 102, 23, 0.62);
  }

  .btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.34);
    background: var(--surface-raised);
    color: var(--text);
  }

  .brand:hover .brand__mark img:first-child {
    opacity: 0;
  }

  .brand:hover .brand__mark img:last-child {
    opacity: 1;
    transform: rotate(-6deg) scale(1.08);
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  list-style: none;
  padding: 0;
}

.nav__link {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--text);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
}

.nav-toggle__bars::before {
  transform: translateY(-6px);
}

.nav-toggle__bars::after {
  transform: translateY(6px);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
  transform: rotate(-45deg);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: var(--gutter);
    left: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(12, 5, 64, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
      visibility 0.22s var(--ease);
  }

  .nav.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: 0.8rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 1.02rem;
  }

  @media (hover: hover) {
    .nav__link:hover {
      background: var(--surface);
    }
  }

  .nav .btn {
    margin-top: 0.5rem;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Tight below, so the promises bar reads as the hero's base rail rather
     than a stranded strip. */
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.25rem, 4vw, 3rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: 3rem;
  }
}

/* The typed word changes length every few seconds. Without a reserved box the
   h1 grows and shrinks between one and three lines, shoving the lede, the
   download button and the checklist up and down on every loop. .typed-sizer
   stacks every candidate word invisibly in the same grid cell, so the slot is
   always as tall and wide as the longest one and nothing below it ever moves.
   Add a word to data-typed and to the sizer and it stays stable by itself. */
.typed-slot {
  display: grid;
  justify-items: start;
}

.typed-sizer {
  display: grid;
  align-items: start;
  visibility: hidden;
  pointer-events: none;
}

.typed-slot > .typed-sizer,
.typed-slot > .typed,
.typed-sizer > span {
  grid-area: 1 / 1;
}

.hero__title {
  font-size: clamp(1.9rem, 8vw, 3.6rem);
}

@media (min-width: 900px) {
  .hero__title {
    font-size: clamp(2.6rem, 4.6vw, 4.15rem);
  }
}

.hero__title .typed {
  color: var(--orange);
}

.hero__title .caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 2px;
  /* Cancels its own advance width so the caret can never push the word onto an
     extra line. It overhangs by 5px, which is invisible against the glow. */
  margin-right: -5px;
  border-radius: 2px;
  background: var(--orange);
  vertical-align: -0.08em;
  animation: blink 1.05s steps(1, end) infinite;
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.hero__lede {
  max-width: 34rem;
}

.hero__actions {
  margin-top: 2.25rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.75rem;
  padding: 0;
  color: var(--text-dim);
  font-size: 0.88rem;
  list-style: none;
}

.hero__meta li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hero__meta svg {
  width: 15px;
  height: 15px;
  flex: none;
  /* Supporting marks take the colour of the text they accompany, so orange
     is left meaning "action". */
  color: var(--text-dim);
}

/* Stage: the two app windows */
.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 22rem;
}

.hero__stage::before {
  content: '';
  position: absolute;
  width: min(30rem, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 102, 23, 0.35), transparent 65%);
  filter: blur(10px);
}

.shot {
  position: relative;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

.hero__shot--back {
  width: min(54%, 14rem);
  transform: translate(-54%, -26%) rotate(-9deg);
  opacity: 0.94;
}

.hero__shot--front {
  width: min(68%, 17.75rem);
  transform: translate(24%, 16%) rotate(4deg);
}

.hero__shot--back,
.hero__shot--front {
  grid-area: 1 / 1;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__shot--front {
    animation: float 7s ease-in-out infinite;
  }

  .hero__shot--back {
    animation: float 7s ease-in-out infinite reverse;
  }
}

@keyframes float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}

/* The hanging lamp, kept from the original site. It is purely decorative and
   only ever shown on wide screens, so it lives in a background-image behind a
   min-width query — as an <img> the 43KB file was still downloaded on phones
   that never render it. */
.hanging-light {
  display: none;
}

@media (min-width: 1101px) {
  .hanging-light {
    display: block;
    position: absolute;
    top: -2rem;
    right: 2%;
    z-index: -1;
    width: clamp(7rem, 13vw, 12rem);
    aspect-ratio: 866 / 1279;
    background: url('../images/light.webp') top center / contain no-repeat;
    opacity: 0.85;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   8. Marquee of promises
   -------------------------------------------------------------------------- */

.promises {
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.promises__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem clamp(1.5rem, 5vw, 3.5rem);
  padding: 1.35rem 0;
  margin: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: 0.92rem;
  text-align: center;
}

.promises__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   9. Cards & feature grid
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--navy-600), var(--navy-700));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Four 250px tracks gave a 24-character measure at 1440 and a 3+1 orphan row
   between ~840 and ~1099px. An explicit template has exactly two states. */
@media (min-width: 820px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(228, 102, 23, 0.32);
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, rgba(228, 102, 23, 0.28), rgba(228, 102, 23, 0.06));
  color: var(--orange-soft);
}

.feature__icon svg {
  width: 22px;
  height: 22px;
}

.feature h3 {
  margin-bottom: 0.6rem;
}

.feature p {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. Shortcuts
   -------------------------------------------------------------------------- */

.shortcuts {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .shortcuts {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.shortcut-list {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--navy-600), var(--navy-700));
  box-shadow: var(--shadow-lift);
  /* the hairline below needs both of these */
  position: relative;
  overflow: hidden;
}

.shortcut-list::after,
.themes__panel::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}

.shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--line);
}

.shortcut:last-child {
  border-bottom: 0;
}

.shortcut dt {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.shortcut dd {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  flex: none;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: var(--text);
  font-family: var(--font-keys);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
}

kbd.kbd--wide {
  min-width: 4.5rem;
}

/* Keys sitting inside a sentence need to sit on the line, not push it around. */
.prose kbd,
.faq__answer kbd {
  min-width: 1.6rem;
  height: 1.55rem;
  padding: 0 0.42rem;
  font-size: 0.78rem;
  /* -0.35em dropped the whole box below the baseline. */
  vertical-align: middle;
  margin-block: -0.3rem;
}

.prose kbd.kbd--wide,
.faq__answer kbd.kbd--wide {
  min-width: 3.2rem;
}

.shortcut dd span {
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   11. Theme switcher
   -------------------------------------------------------------------------- */

.themes__panel {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(40rem 22rem at 50% 0%, rgba(123, 94, 237, 0.22), transparent 70%),
    linear-gradient(180deg, var(--navy-600), var(--navy-700));
  overflow: hidden;
}

.theme-toggle {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 1.75rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(4, 0, 28, 0.55);
}

.theme-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.theme-toggle button svg {
  width: 15px;
  height: 15px;
}

.theme-toggle button[aria-selected='true'] {
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.theme-stage {
  display: grid;
  place-items: center;
  width: min(21rem, 82%);
}

/* One live timer that restyles itself, rather than two stacked screenshots
   crossfading. The theme swap is a real preview of the app, and there is no
   second copy sitting in the accessibility tree. */
.theme-stage .timer {
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
}

.theme-stage .timer__close,
.theme-stage .timer__face,
.theme-stage .timer__ticks line,
.theme-stage .timer__time,
.theme-stage .timer__unit {
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
    fill 0.45s var(--ease), stroke 0.45s var(--ease);
}

/* --------------------------------------------------------------------------
   12. Privacy strip
   -------------------------------------------------------------------------- */

.privacy-panel {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid rgba(228, 102, 23, 0.22);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(38rem 20rem at 85% 10%, rgba(228, 102, 23, 0.18), transparent 70%),
    linear-gradient(180deg, var(--navy-600), var(--navy-700));
}

@media (min-width: 820px) {
  .privacy-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.privacy-panel__icon {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border: 1px solid rgba(228, 102, 23, 0.35);
  border-radius: var(--radius);
  background: linear-gradient(140deg, rgba(228, 102, 23, 0.3), rgba(228, 102, 23, 0.06));
  color: var(--orange-soft);
}

.privacy-panel__icon svg {
  width: 28px;
  height: 28px;
}

.privacy-panel p {
  max-width: var(--measure);
  margin-top: 0.9rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.75rem;
  max-width: var(--inset);
  margin-inline: auto;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy-700);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.faq__item[open] {
  border-color: var(--line-strong);
  background: var(--navy-600);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 1.4rem;
  font-size: 1.08rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur) var(--ease);
}

/* .faq__item is overflow: hidden, so an outset focus ring was sliced off on
   every side and keyboard users got no indicator at all. */
.faq__item summary:focus-visible {
  outline-offset: -3px;
  border-radius: calc(var(--radius) - 1px);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '';
  width: 10px;
  height: 10px;
  flex: none;
  /* The chevron reports state instead of decorating eight identical rows. */
  border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.faq__item[open] summary::after {
  border-right-color: var(--orange-bright);
  border-bottom-color: var(--orange-bright);
}

@media (hover: hover) {
  .faq__item:not([open]) summary:hover {
    background: var(--surface-raised);
  }

  .faq__item[open] summary:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .faq__item summary:hover::after {
    border-right-color: var(--orange-bright);
    border-bottom-color: var(--orange-bright);
  }
}

.faq__item[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq__answer {
  max-width: var(--measure);
  padding: 0 1.4rem 1.35rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.faq__answer p + p {
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   14. Final call to action
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(34rem 22rem at 88% 50%, rgba(228, 102, 23, 0.3), transparent 68%),
    linear-gradient(135deg, rgba(36, 27, 102, 0.9), rgba(7, 0, 47, 0.95));
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

@media (min-width: 820px) {
  .cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    gap: 3rem;
  }

  .cta__art {
    width: 100%;
  }
}

.cta h2 {
  max-width: 20ch;
}

.cta p {
  margin-top: 1rem;
  max-width: 42ch;
  color: var(--text-muted);
}

.cta__actions {
  margin-top: 2rem;
}

.cta__art {
  width: min(13rem, 60%);
  justify-self: center;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.55));
}

@media (prefers-reduced-motion: no-preference) {
  .cta__art {
    animation: float 8s ease-in-out infinite;
  }
}

/* --------------------------------------------------------------------------
   15. Page header (inner pages)
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
}

.page-hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
}

.breadcrumbs {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin-bottom: 1.25rem;
  color: var(--text-dim);
  font-size: 0.86rem;
  list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  opacity: 0.55;
}

.breadcrumbs a {
  color: var(--text-dim);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--text);
}

/* Long-form copy */
.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: 3rem;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose ul {
  margin-top: 1rem;
  color: var(--text-muted);
}

.prose ul {
  padding-left: 1.2rem;
}

.prose li + li {
  margin-top: 0.5rem;
}

.prose strong {
  color: var(--text);
  font-weight: 500;
}

.prose__updated {
  display: inline-block;
  margin-bottom: 2.5rem;
  color: var(--text-dim);
  font-size: 0.86rem;
}

/* Support options */
.support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Three cards: 1-up or 3-up. 2-up strands one. */
@media (min-width: 880px) {
  .support-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.support-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.support-card p {
  flex: 1;
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.support-card .btn {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: 0;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
  /* The page ends darker, rather than stopping on a wash. */
  background: var(--navy-900);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer__links a {
  color: var(--text-muted);
  font-size: 0.93rem;
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--text);
}

.acknowledgement {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 2rem;
}

.acknowledgement img {
  width: 3.25rem;
  flex: none;
  opacity: 0.55;
}

.acknowledgement p {
  max-width: 30rem; /* ~68 characters at 13.4px */
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.6;
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-top: 2rem;
  color: var(--text-dim);
  font-size: 0.84rem;
}

/* --------------------------------------------------------------------------
   17. Error pages
   -------------------------------------------------------------------------- */

.error-page {
  display: grid;
  place-items: center;
  min-height: 72vh;
  padding-block: 4rem;
  text-align: center;
}

/* Was a monospace numeral in an orange-to-violet clipped gradient: the site's
   only second typeface and its only off-palette colour, on its least
   important page. */
.error-page__code {
  margin-bottom: 0.9rem;
  color: var(--orange-soft);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1;
}

.error-page img {
  width: clamp(7rem, 18vw, 10rem);
  margin: 0 auto 1.75rem;
}

.error-page .lede {
  margin-inline: auto;
  max-width: 34rem;
}

.error-page .btn-row {
  justify-content: center;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   18. Scroll reveal
   -------------------------------------------------------------------------- */

/* Only ever hide content when scripting is available to bring it back. With JS
   off — or in a browser that doesn't support the `scripting` query — every
   .reveal element simply renders as normal. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Printing a timer's website is a choice, but let's make it legible. */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  body::before,
  .site-header,
  .hanging-light,
  .cta__art {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   19. Live timer
   A CSS + SVG recreation of the app window, so the hero can actually tick.
   Everything is driven by one custom property, --progress, which is the
   remaining time as a fraction of a SIXTY-MINUTE CLOCK FACE — not of the
   timer's own duration. So 25:00 draws 25/60 of the ring, ending at 150°
   clockwise from twelve (SSE), exactly where 25 sits on a clock. JS updates it
   once a second; with JS off it holds the 25:00 the markup already shows.
   -------------------------------------------------------------------------- */

.timer {
  --progress: 0.4167; /* 25 of 60 minutes */
  --timer-bg: linear-gradient(155deg, #150c4b 0%, #0b0336 60%, #0e0640 100%);
  --timer-edge: rgba(255, 255, 255, 0.1);
  --timer-face: rgba(255, 255, 255, 0.07);
  --timer-face-edge: rgba(255, 255, 255, 0.05);
  --timer-digits: #f4f4f8;
  --timer-unit: rgba(255, 255, 255, 0.68);
  --timer-tick: rgba(255, 255, 255, 0.32);
  --timer-close: #ec5c57;
  --timer-close-glyph: #8f0b08;

  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--timer-edge);
  border-radius: 13%;
  background: var(--timer-bg);
  box-shadow: var(--shadow-lift);
  container-type: inline-size;
}

.timer--light {
  --timer-bg: linear-gradient(158deg, #f0f0f2 0%, #dedee1 55%, #cfcfd4 100%);
  --timer-edge: rgba(0, 0, 0, 0.12);
  --timer-face: #ffffff;
  --timer-face-edge: rgba(0, 0, 0, 0.04);
  --timer-digits: #1d1547;
  --timer-unit: #6f6c88;
  --timer-tick: rgba(29, 21, 71, 0.28);
  --timer-close: #c9c9ce;
  --timer-close-glyph: transparent;
}

.timer__close {
  position: absolute;
  top: 7.5%;
  left: 7.5%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--timer-close);
  color: var(--timer-close-glyph);
  font-size: 4cqi;
  line-height: 1;
}

.timer__dial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.timer__dial svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.timer__face {
  fill: var(--timer-face);
  stroke: var(--timer-face-edge);
  stroke-width: 1;
}

.timer__ticks line {
  stroke: var(--timer-tick);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.timer__track {
  fill: none;
  stroke: transparent;
}

/* The ring hugs the face: r=72 with a 4-unit stroke spans 70..74, one unit
   clear of the face edge at r=69. C = 2*pi*72. The marker's base is an ARC of
   r=70, not a chord — a straight base's corners always sit further out than
   its midpoint, which is what made them graze the ring. */
.timer__arc {
  fill: none;
  stroke: var(--orange);
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-dasharray: 452.39;
  stroke-dashoffset: calc(452.39px * (1 - var(--progress)));
  transform: rotate(-90deg);
  transform-origin: center;
  transform-box: view-box;
  transition: stroke-dashoffset 0.4s linear;
}

.timer__head {
  fill: var(--orange);
  /* Right-aligned: the marker's clockwise edge sits ON the mark, so the whole
     shape falls inside the swept arc. Centred, its trailing 4.92deg hung
     past the end of the ring. */
  transform: rotate(calc(var(--progress) * 360deg - 4.92deg));
  transform-origin: center;
  transform-box: view-box;
  transition: transform 0.4s linear;
}

.timer__readout {
  grid-area: 1 / 1;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.15em;
  margin: 0;
  text-align: center;
  pointer-events: none;
}

/* Open Sauce One has no tabular figures — "1" is a third narrower than "0" —
   so every digit gets an equal cell or the clock jitters as it counts. */
.timer__time {
  display: flex;
  align-items: baseline;
  color: var(--timer-digits);
  font-size: 17cqi;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

.timer__time > span {
  width: 0.63em;
  text-align: center;
}

.timer__time > .timer__colon {
  width: 0.3em;
}

.timer__unit {
  color: var(--timer-unit);
  font-size: 5.4cqi;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .timer__arc,
  .timer__head {
    transition: none;
  }
}