/* ==========================================================================
   Kairos — shared site styles
   Static, dependency-free. Shared by every page so navigation stays
   consistent as the site grows past a single scroll.
   ========================================================================== */

:root {
  /* ---------- Palette ----------
     Neutral near-black canvas with the Kairos flame kept as the single
     accent. Warm cream gave way to a neutral gallery grey so screenshots
     and calendar previews carry the colour instead of the page. */
  --ink: #0a0a0b;
  --ink-soft: #141416;
  --card: #17171a;
  --card-hover: #1f1f23;
  --chip: #232327;
  --paper: #ededec;
  --paper-dim: #f5f5f4;
  --muted: #9b9ba3;
  --line-on-ink: rgba(255, 255, 255, 0.10);
  --line-on-paper: rgba(11, 11, 15, 0.12);
  --flame: #ff5a1f;
  --flame-bright: #ff7440;
  --flame-dim: rgba(255, 90, 31, 0.16);
  --flame-faint: rgba(255, 90, 31, 0.08);

  /* ---------- Type ----------
     One sans across the site, matching the gallery reference. --mono is
     retargeted to the same face so body copy reads as UI text; genuine
     tabular monospace stays available as --code for clocks, counters and
     calendar numerals where column alignment carries meaning. */
  --ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif;
  --code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --mono: var(--ui);
  --serif: var(--ui);

  /* Duty status palette, mirrored from the app's own colour language. */
  --duty-on: #ff5a1f;
  --duty-off: rgba(255, 255, 255, 0.16);
  --duty-night: #6c8cff;
  --duty-vacation: #37c98b;
  --duty-oncall: #f4c04f;

  --radius: 10px;
  --radius-sm: 8px;
}

/* Light mode. The reference offers a sun/moon switch, so the whole token
   set flips rather than a handful of components. */
[data-theme="light"] {
  --ink: #ffffff;
  --ink-soft: #f7f7f6;
  --card: #f4f4f3;
  --card-hover: #ebebe9;
  --chip: #ffffff;
  --paper: #16161a;
  --paper-dim: #0b0b0f;
  --muted: #6b6b73;
  --line-on-ink: rgba(11, 11, 15, 0.12);
  --line-on-paper: rgba(11, 11, 15, 0.10);
  --duty-off: rgba(11, 11, 15, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

.mono { font-family: var(--mono); }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.wrap-narrow {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 32px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--flame);
  color: var(--ink);
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Scroll reveal (progressive enhancement) ----------
   Without JS, .reveal elements are simply visible. Nothing is ever
   permanently hidden behind a script that failed to run. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
.js .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Reveal is decoration, never a gate on content. If the reader prefers
   reduced motion, if the page is being printed, or if the document has
   been marked done loading, show everything outright. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}
.js.reveal-off .reveal { opacity: 1; transform: none; }

/* ---------- Liquid glass surfaces ---------- */
.glass-dark {
  background: rgba(244, 241, 234, 0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(244, 241, 234, 0.12);
  box-shadow: inset 0 1px 0 rgba(244, 241, 234, 0.14), 0 10px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.glass-dark:hover {
  background: rgba(244, 241, 234, 0.08);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(244, 241, 234, 0.18), 0 16px 40px rgba(0, 0, 0, 0.32);
}
.glass-light {
  background: rgba(244, 241, 234, 0.5);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(11, 11, 15, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 30px rgba(11, 11, 15, 0.06);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.glass-light:hover {
  background: rgba(244, 241, 234, 0.72);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 16px 40px rgba(11, 11, 15, 0.1);
}
.glass-dark.is-static:hover,
.glass-light.is-static:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .glass-dark:hover, .glass-light:hover { transform: none; }
}

/* ---------- Scroll progress ---------- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--flame);
  z-index: 60;
  pointer-events: none;
}

/* ---------- Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 18px 32px;
  background: rgba(11, 11, 15, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-on-ink);
}
.site-nav .nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { width: 26px; height: 26px; border-radius: 6px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}
a.navlink {
  color: var(--paper);
  text-decoration: none;
  opacity: 0.68;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--mono);
  transition: opacity 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
a.navlink:hover { opacity: 1; }
a.navlink[aria-current="page"] {
  opacity: 1;
  color: var(--flame);
}
.nav-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--flame);
  color: var(--ink);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.nav-cta:hover { background: var(--flame-bright); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-on-ink);
  border-radius: 4px;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 13px;
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.btn-primary {
  background: var(--flame);
  color: var(--ink);
  font-weight: 700;
}
.btn-primary:hover { background: var(--flame-bright); }
.btn-secondary {
  background: transparent;
  color: var(--paper);
  border-color: var(--line-on-ink);
}
.btn-secondary:hover { border-color: var(--paper); }
.btn-dark {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
.btn-dark:hover { opacity: 0.85; }
.btn-sm {
  padding: 10px 16px;
  font-size: 11px;
}

/* Official-style App Store badge, drawn inline as SVG (no remote asset). */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  padding: 10px 18px;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.appstore-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.6);
}
.appstore-badge svg { width: 26px; height: 32px; flex-shrink: 0; fill: #fff; }
.appstore-badge .ab-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.appstore-badge .ab-small { font-size: 11px; opacity: 0.85; letter-spacing: 0.01em; }
.appstore-badge .ab-big { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) {
  .appstore-badge:hover { transform: none; }
}

/* ---------- Section shells ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--flame);
  margin: 0 0 26px;
  position: relative;
  z-index: 1;
}
.section-ink {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 90px 0;
  overflow: hidden;
}
.section-paper {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: 100px 0 110px;
  overflow: hidden;
}
.section-paper::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 45%;
  aspect-ratio: 1;
  background: radial-gradient(circle at center, rgba(255, 90, 31, 0.1), transparent 70%);
  pointer-events: none;
}
.section-ink::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -12%;
  width: 45%;
  aspect-ratio: 1;
  background: radial-gradient(circle at center, var(--flame-faint), transparent 70%);
  pointer-events: none;
}
.section-ink > *, .section-paper > * { position: relative; z-index: 1; }

h2.section-title {
  margin: 0 0 20px;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.02;
}
h3.sub-title {
  margin: 0 0 14px;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: 0.01em;
}
p.lede {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.75;
  max-width: 660px;
  opacity: 0.7;
  margin: 0 0 52px;
}

/* ---------- Page header (inner pages) ---------- */
.page-head {
  position: relative;
  padding: 86px 0 60px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-on-ink);
}
.page-head::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -12%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle at center, var(--flame-dim), transparent 70%);
  pointer-events: none;
}
.page-head h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  font-size: clamp(38px, 6.6vw, 82px);
}
.page-head p.page-sub {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  max-width: 620px;
  margin: 26px 0 0;
  opacity: 0.75;
}

.breadcrumbs {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0 0 22px;
  position: relative;
  z-index: 1;
}
.breadcrumbs a { color: inherit; }

/* ---------- Tags / badges ---------- */
.tag-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid var(--line-on-ink);
  opacity: 0.85;
}
.section-paper .tag { border-color: var(--line-on-paper); }

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--flame);
  color: var(--ink);
  font-weight: 700;
  vertical-align: middle;
}
.pill-quiet {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  opacity: 0.6;
  font-weight: 400;
}

/* ---------- Cards ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.card {
  padding: 34px 30px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card .fnum {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}
.card h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.card p {
  margin: 0;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
  opacity: 0.74;
}
.card ul {
  margin: 0;
  padding-left: 18px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  opacity: 0.74;
}

/* ---------- Stat cells ---------- */
.stat-cell {
  padding: 26px 20px;
  text-align: center;
  border-radius: 6px;
}
.stat-cell .num {
  font-family: var(--mono);
  font-size: clamp(24px, 3vw, 34px);
  color: var(--flame);
  margin: 0 0 6px;
}
.stat-cell .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 0;
}

/* ==========================================================================
   Interactive components
   ========================================================================== */

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line-on-ink);
  padding-bottom: 14px;
}
.section-paper .tabs { border-bottom-color: var(--line-on-paper); }
.tab-btn {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid var(--line-on-ink);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  opacity: 0.65;
}
.section-paper .tab-btn { border-color: var(--line-on-paper); }
.tab-btn:hover { opacity: 1; }
.tab-btn[aria-selected="true"] {
  background: var(--flame);
  border-color: var(--flame);
  color: var(--ink);
  font-weight: 700;
  opacity: 1;
}
.tab-panel[hidden] { display: none; }

/* ---------- No-JS fallback for tabs ----------
   Without JS the tablist cannot switch panels, so hiding the inactive
   panels would bury real content. Instead we drop the tab buttons and
   stack every panel, each introduced by its own visible label. The
   [hidden] attribute stays in the markup for the JS path. */
html:not(.js) [role="tablist"] { display: none; }
html:not(.js) .tab-panel[hidden] { display: block; }
html:not(.js) .tab-panel {
  border-top: 1px solid rgba(244, 241, 234, 0.12);
  padding-top: 28px;
  margin-top: 28px;
}
html:not(.js) .tab-panel:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
html:not(.js) .tab-panel::before {
  content: attr(data-tab-label);
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flame);
  margin-bottom: 16px;
}
.tab-panel {
  animation: fade-in 0.35s ease;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Accordion (FAQ) ---------- */
.faq-item {
  border: 1px solid var(--line-on-ink);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  background: rgba(244, 241, 234, 0.03);
}
.faq-item[open] { border-color: rgba(255, 90, 31, 0.45); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 54px 20px 24px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  transition: background 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(244, 241, 234, 0.05); }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--flame);
  transition: transform 0.2s ease;
  line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer {
  padding: 0 24px 22px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.75;
  opacity: 0.75;
  max-width: 720px;
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--flame); }

.faq-search {
  width: 100%;
  max-width: 420px;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid var(--line-on-ink);
  background: rgba(244, 241, 234, 0.04);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 22px;
}
.faq-search::placeholder { color: rgba(244, 241, 234, 0.4); }
.faq-empty {
  font-family: var(--mono);
  font-size: 13px;
  opacity: 0.6;
  padding: 18px 0;
}

/* ---------- Form controls ---------- */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 26px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.field select,
.field input {
  padding: 12px 14px;
  border-radius: 5px;
  border: 1px solid var(--line-on-ink);
  background: rgba(244, 241, 234, 0.05);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  min-width: 190px;
}
.field select option { background: var(--ink); color: var(--paper); }

/* ---------- Rotation simulator ---------- */
.sim {
  border-radius: 12px;
  padding: 30px;
}
.sim-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding: 22px 24px;
  border-radius: 10px;
  border: 1px solid var(--line-on-ink);
  background: rgba(244, 241, 234, 0.04);
  margin-bottom: 26px;
}
.duty-ring {
  --pct: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--flame) calc(var(--pct) * 1%), rgba(244, 241, 234, 0.12) 0);
  transition: --pct 0.6s ease;
  position: relative;
}
.duty-ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--ink);
}
.duty-ring span {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--flame);
}
.sim-status-text { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.sim-status-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}
.sim-status-value {
  font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sim-countdown {
  font-family: var(--mono);
  font-size: 13px;
  opacity: 0.72;
}
.sim-countdown strong { color: var(--flame); font-weight: 400; }

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cal-month {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cal-nav { display: flex; gap: 8px; }
.cal-nav button {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  border: 1px solid var(--line-on-ink);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 14px;
  transition: background 0.15s ease;
}
.cal-nav button:hover { background: rgba(244, 241, 234, 0.09); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.cal-dow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.45;
  text-align: center;
  padding: 6px 0;
}
.cal-day {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid var(--line-on-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(244, 241, 234, 0.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.cal-day.is-empty { border-color: transparent; background: transparent; }
.cal-day .cal-num { opacity: 0.85; }
.cal-day .cal-mark {
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.cal-day.on {
  background: rgba(255, 90, 31, 0.22);
  border-color: rgba(255, 90, 31, 0.5);
  color: #ffd8c6;
}
.cal-day.night {
  background: rgba(108, 140, 255, 0.2);
  border-color: rgba(108, 140, 255, 0.45);
  color: #d3ddff;
}
.cal-day.today {
  box-shadow: 0 0 0 2px var(--flame);
  z-index: 1;
}
.cal-day:not(.is-empty):hover { transform: scale(1.06); z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .cal-day:not(.is-empty):hover { transform: none; }
}

.legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  font-style: normal;
}
.legend i.k-on { background: rgba(255, 90, 31, 0.55); }
.legend i.k-night { background: rgba(108, 140, 255, 0.5); }
.legend i.k-off { background: rgba(244, 241, 234, 0.14); }
.legend i.k-today { background: transparent; box-shadow: inset 0 0 0 2px var(--flame); }

.sim-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 24px;
}

/* Pattern strip: one square per day of a single cycle. */
.cycle-strip {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.cycle-strip i {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--line-on-ink);
  background: rgba(244, 241, 234, 0.06);
  display: inline-block;
  font-style: normal;
}
.cycle-strip i.on { background: rgba(255, 90, 31, 0.6); border-color: rgba(255, 90, 31, 0.7); }
.cycle-strip i.night { background: rgba(108, 140, 255, 0.55); border-color: rgba(108, 140, 255, 0.7); }

/* ---------- Pricing ---------- */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--line-on-ink);
  background: rgba(244, 241, 234, 0.04);
  margin-bottom: 34px;
}
.billing-toggle button {
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.65;
}
.billing-toggle button[aria-pressed="true"] {
  background: var(--flame);
  color: var(--ink);
  font-weight: 700;
  opacity: 1;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 820px;
}
.price-card {
  padding: 34px 30px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.price-card.is-featured { border-color: rgba(255, 90, 31, 0.5); }
.price-card .plan-name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
.price-amount {
  font-family: var(--mono);
  font-size: 42px;
  line-height: 1;
  color: var(--flame);
}
.price-amount .per {
  font-size: 14px;
  opacity: 0.6;
  color: inherit;
}
.price-note {
  font-family: var(--mono);
  font-size: 12px;
  opacity: 0.6;
  margin: -8px 0 0;
  min-height: 18px;
}
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.price-card li { display: flex; gap: 10px; align-items: flex-start; opacity: 0.82; }
.price-card li::before {
  content: "\2713";
  color: var(--flame);
  flex-shrink: 0;
}
.price-card li.no::before { content: "\00d7"; color: rgba(244, 241, 234, 0.35); }
.price-card li.no { opacity: 0.45; }

/* ---------- Comparison table ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  min-width: 560px;
}
table.compare th, table.compare td {
  padding: 15px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-on-ink);
}
.section-paper table.compare th,
.section-paper table.compare td { border-bottom-color: var(--line-on-paper); }
table.compare thead th {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 400;
}
table.compare tbody tr { transition: background 0.15s ease; }
table.compare tbody tr:hover { background: rgba(255, 90, 31, 0.07); }
table.compare td.yes { color: var(--flame); }
table.compare td.no { opacity: 0.4; }
table.compare caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 14px;
  font-size: 11.5px;
  opacity: 0.55;
}

/* ---------- Screenshot gallery + lightbox ---------- */
.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 780px;
}
.shot {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: inherit;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line-on-ink);
  background: rgba(244, 241, 234, 0.04);
}
.shot:hover { transform: translateY(-5px); }
.shot figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  padding: 10px 2px 0;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) { .shot:hover { transform: none; } }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 6, 9, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(92vw, 460px);
  max-height: 82vh;
  border-radius: 16px;
  border: 1px solid var(--line-on-ink);
}
.lightbox-cap {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(244, 241, 234, 0.08);
  border: 1px solid var(--line-on-ink);
  color: var(--paper);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  transition: background 0.15s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(244, 241, 234, 0.2); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---------- Access-code demo ---------- */
.code-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.code-box {
  font-family: var(--mono);
  font-size: clamp(26px, 5vw, 40px);
  letter-spacing: 0.28em;
  padding: 18px 26px 18px 32px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 90, 31, 0.55);
  background: rgba(255, 90, 31, 0.08);
  color: var(--flame);
  user-select: all;
}
.code-status {
  font-family: var(--mono);
  font-size: 12px;
  opacity: 0.7;
  min-height: 18px;
}

/* ---------- Timeline (changelog) ---------- */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line-on-ink);
}
.tl-item { position: relative; padding-bottom: 40px; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--flame);
}
.tl-item.is-old::before { border-color: rgba(244, 241, 234, 0.3); }
.tl-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 8px;
}
.tl-item h3 {
  margin: 0 0 12px;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
}
.tl-item ul {
  margin: 0;
  padding-left: 18px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.75;
  opacity: 0.75;
}

/* ---------- Copy blocks ---------- */
.prose {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.8;
  max-width: 720px;
}
.prose h3 {
  font-family: var(--serif);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 22px;
  margin: 40px 0 14px;
  opacity: 1;
}
.prose a { color: var(--flame); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 9px; }

/* ---------- CTA footer ---------- */
.cta-footer {
  background: var(--flame);
  color: var(--ink);
  padding: 100px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-footer .eyebrow-black {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
  margin: 0 0 22px;
}
.cta-footer h2 {
  margin: 0 0 26px;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(36px, 6.6vw, 80px);
  line-height: 0.95;
}
.cta-footer p.tag-line {
  font-family: var(--mono);
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto 36px;
  opacity: 0.85;
  line-height: 1.6;
}
.cta-footer .appstore-badge { border-color: rgba(0, 0, 0, 0.35); }

.foot-nav {
  margin-top: 80px;
  padding-top: 34px;
  border-top: 1px solid rgba(11, 11, 15, 0.2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: left;
  font-family: var(--mono);
  font-size: 13px;
}
.foot-col h3 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 400;
  font-family: var(--mono);
}
.foot-col a {
  display: block;
  color: inherit;
  text-decoration: none;
  opacity: 0.82;
  margin-bottom: 9px;
  transition: opacity 0.15s ease;
}
.foot-col a:hover { opacity: 1; text-decoration: underline; }

.foot-bottom {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(11, 11, 15, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  opacity: 0.75;
}
.foot-bottom a { color: inherit; }

/* ---------- Back to top ---------- */
#to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-on-ink);
  background: rgba(11, 11, 15, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
#to-top.show { opacity: 1; visibility: visible; transform: none; }
#to-top:hover { background: var(--flame); color: var(--ink); border-color: var(--flame); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .shots { grid-template-columns: repeat(3, 1fr); }
  .foot-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sim-summary { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .site-nav .nav-inner { flex-wrap: wrap; }
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 14px;
    margin-top: 12px;
    border-top: 1px solid var(--line-on-ink);
  }
  .nav-links.open { display: flex; }
  .nav-links a.navlink { padding: 11px 0; font-size: 13px; opacity: 0.85; }
  .nav-links .nav-cta { margin-top: 10px; }
}

@media (max-width: 640px) {
  .site-nav { padding: 16px 20px; }
  .wrap, .wrap-narrow { padding: 0 20px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .sim { padding: 20px 16px; }
  .section-paper { padding: 74px 0 84px; }
  .section-ink { padding: 70px 0; }
  .cta-footer { padding: 80px 0 44px; }
  .cal-day .cal-mark { display: none; }
  .shots { grid-template-columns: 1fr; max-width: 340px; }
  .code-box { font-size: 24px; letter-spacing: 0.2em; padding: 14px 18px 14px 24px; }
}


/* ==========================================================================
   Gallery layer — typography, chrome and card grid
   The site follows a directory/gallery layout: one sans face, a neutral
   near-black canvas, chip filters, a padded card grid and a link-column
   footer. Everything below is dependency-free and degrades without JS.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html, body { font-family: var(--ui); }
body { font-size: 15px; line-height: 1.6; }

/* Headings: tight, medium-weight sans instead of the old uppercase serif. */
h1, h2, h3, h4,
h1.headline,
h2.section-title,
h3.sub-title,
.page-head h1,
.card h3,
.tl-item h3,
.prose h3,
.cta-footer h2 {
  font-family: var(--ui);
  text-transform: none;
  font-weight: 600;
  letter-spacing: -0.02em;
}
h1.headline { line-height: 1.04; font-size: clamp(34px, 5.6vw, 62px); }
.page-head h1 { line-height: 1.05; font-size: clamp(32px, 5vw, 52px); }
h2.section-title { line-height: 1.1; font-size: clamp(24px, 3.2vw, 36px); }
h3.sub-title { font-size: clamp(19px, 2.2vw, 23px); }
.card h3 { font-size: 17px; letter-spacing: -0.01em; }
.tl-item h3 { font-size: 19px; }
.prose h3 { font-size: 19px; }
.cta-footer h2 { line-height: 1.05; font-size: clamp(28px, 4.4vw, 46px); }

/* Numerals that must stay column-aligned keep a real monospace face. */
.sim-countdown, .cal-cell, .cal-dow, .price-amount, .stat-cell .num,
.code-box, .hours-table td, .hours-table th, .card .fnum, kbd {
  font-family: var(--code);
}

/* ---------- Top chrome ---------- */
.site-nav {
  padding: 0 24px;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.site-nav .nav-inner {
  max-width: 1400px;
  height: 60px;
  gap: 18px;
}
.brand {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  color: var(--flame);
  gap: 8px;
}
.brand img { width: 22px; height: 22px; border-radius: 5px; }

.nav-links { gap: 6px; flex: 1; justify-content: center; }
a.navlink, .nav-menu > button {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--paper);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.18s ease, color 0.18s ease;
}
a.navlink:hover, .nav-menu > button:hover { background: var(--chip); opacity: 1; }
a.navlink[aria-current="page"] { color: var(--flame); background: var(--flame-faint); }

/* Dropdown menus, mirroring the reference's "Websites / Templates" panels. */
.nav-menu { position: relative; }
.nav-menu > button::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.nav-menu[data-open="true"] > button::after { transform: translateY(1px) rotate(-135deg); }
.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 520px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  background: var(--card);
  border: 1px solid var(--line-on-ink);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
}
.nav-menu[data-open="true"] .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-panel h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-panel-list { display: flex; flex-wrap: wrap; gap: 6px; }
.nav-panel a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--paper);
  text-decoration: none;
  background: var(--chip);
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-panel a:hover { background: var(--flame); border-color: var(--flame); color: #fff; }
.nav-panel a .n { font-size: 11px; opacity: 0.55; }
.nav-panel a:hover .n { opacity: 0.9; }

/* Search affordance + ⌘K */
.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px 0 12px;
  min-width: 210px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--line-on-ink);
  color: var(--muted);
  font-size: 13px;
  font-family: var(--ui);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nav-search:hover { border-color: var(--flame); }
.nav-search .sk { margin-left: auto; }
kbd {
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  border: 1px solid var(--line-on-ink);
  color: var(--paper);
}
.theme-toggle {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--line-on-ink);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { background: var(--flame); color: #fff; border-color: var(--flame); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-cta {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  padding: 9px 16px;
}

/* ---------- Search overlay ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(6px);
}
.search-overlay[hidden] { display: none; }
.search-box {
  width: min(620px, 92vw);
  background: var(--card);
  border: 1px solid var(--line-on-ink);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.search-box input {
  width: 100%;
  padding: 18px 20px;
  font-size: 16px;
  font-family: var(--ui);
  color: var(--paper);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-on-ink);
}
.search-box input:focus { outline: none; }
.search-results { max-height: 52vh; overflow-y: auto; padding: 8px; margin: 0; list-style: none; }
.search-results a {
  display: block;
  padding: 11px 14px;
  border-radius: 9px;
  color: var(--paper);
  text-decoration: none;
}
.search-results a small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.search-results li.is-active a, .search-results a:hover { background: var(--chip); }
.search-empty { padding: 22px; color: var(--muted); font-size: 14px; text-align: center; }

/* ---------- Gallery hero ---------- */
.gallery-head {
  padding: 52px 0 22px;
  text-align: center;
}
.gallery-head h1 {
  margin: 0 auto 14px;
  max-width: 900px;
  font-size: clamp(30px, 4.6vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.gallery-head h1 em { font-style: normal; color: var(--flame); }
.gallery-head p {
  margin: 0 auto;
  max-width: 620px;
  color: var(--muted);
  font-size: 17px;
}

/* ---------- Chip filter row ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 26px 0 34px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-on-ink);
  background: var(--chip);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.chip .n { font-size: 12px; opacity: 0.5; }
.chip:hover { background: var(--flame); border-color: var(--flame); color: #fff; }
.chip:hover .n { opacity: 0.95; }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--flame);
  border-color: var(--flame);
  color: #fff;
}
.chip[aria-pressed="true"] .n { opacity: 0.95; }
.chip-sep { width: 1px; align-self: stretch; background: var(--line-on-ink); margin: 0 4px; }

/* ---------- Card grid ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-bottom: 10px;
}
@media (max-width: 1180px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .gallery-grid { grid-template-columns: 1fr; } }

.g-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 14px 10px;
  background: var(--card);
  border-radius: 12px;
  position: relative;
  transition: background 0.3s ease, transform 0.3s ease;
}
.g-card:hover { background: var(--card-hover); }
.g-card .thumb {
  position: relative;
  width: 100%;
  padding-bottom: 71.146%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ink-soft);
}
.g-card .thumb img,
.g-card .thumb .thumb-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, box-shadow 0.3s ease;
}
.g-card:hover .thumb img { transform: scale(1.035); }
.g-card h3 {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.g-card .g-tags {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.g-card .g-tags span { white-space: nowrap; }
.g-card .stretch {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  z-index: 1;
}
.g-card .stretch:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.g-card .g-meta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.g-card.is-sponsor { outline: 1px solid var(--flame-dim); }
.g-empty {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
  color: var(--muted);
}

/* ---------- Pagination ---------- */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 34px 0 8px;
  flex-wrap: wrap;
}
.pager button, .pager a {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-on-ink);
  background: var(--chip);
  color: var(--paper);
  font-size: 13px;
  font-family: var(--ui);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pager button:hover:not(:disabled) { background: var(--flame); border-color: var(--flame); color: #fff; }
.pager button[aria-current="true"] { background: var(--flame); border-color: var(--flame); color: #fff; }
.pager button:disabled { opacity: 0.35; cursor: default; }
.pager .dots { border: 0; background: none; color: var(--muted); cursor: default; }

/* ---------- Footer, gallery style ---------- */
.site-foot {
  border-top: 1px solid var(--line-on-ink);
  background: var(--ink);
  padding: 60px 0 34px;
}
.site-foot .foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 34px;
}
@media (max-width: 900px) { .site-foot .foot-grid { grid-template-columns: 1fr 1fr; } }
.site-foot .foot-brand .brand { font-size: 22px; margin-bottom: 14px; }
.site-foot .foot-brand p {
  margin: 0 0 14px;
  max-width: 320px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.site-foot .foot-brand a.mail { color: var(--flame); text-decoration: none; }
.site-foot h4 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-foot ul a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s ease;
}
.site-foot ul a:hover { color: var(--flame); }
.foot-social { display: flex; gap: 14px; margin-top: 4px; }
.foot-social a { color: var(--muted); display: inline-grid; place-items: center; }
.foot-social a:hover { color: var(--flame); }
.foot-social svg { width: 17px; height: 17px; fill: currentColor; }
.foot-rule { height: 1px; background: var(--line-on-ink); margin: 44px 0 22px; }
.foot-legal { text-align: center; color: var(--muted); font-size: 13px; margin: 0; }

@media (max-width: 1040px) {
  .nav-search { display: none; }
  .nav-links { justify-content: flex-end; }
}

/* `hidden` must win over the card's own display, or filtered-out cards stay
   on screen when JavaScript hides them. */
.g-card[hidden], .pager[hidden], .pager button[hidden] { display: none !important; }

/* The reference keeps filters on one line and hides the tail behind a
   "See more" toggle; the row only wraps once that toggle is used. */
.chip-row:has(.chip-more) { flex-wrap: nowrap; overflow: hidden; }
.chip-row.is-expanded { flex-wrap: wrap; overflow: visible; }
.chip-row:has(.chip-more) .chip[data-overflow="true"] { display: none; }
.chip-row.is-expanded .chip[data-overflow="true"] { display: inline-flex; }
@media (max-width: 900px) {
  .chip-row:has(.chip-more) { flex-wrap: wrap; }
  .chip-row .chip[data-overflow="true"] { display: inline-flex; }
  .chip-more { display: none; }
}
.chip-more { border-style: dashed; }


/* ---------- One continuous canvas ----------
   The reference gallery never flips to a light band mid-scroll; alternating
   sections are separated by surface tone and a hairline instead. Light mode
   inverts the same two tones through the token set. */
.section-paper {
  background: var(--ink-soft);
  color: var(--paper);
  border-top: 1px solid var(--line-on-ink);
  border-bottom: 1px solid var(--line-on-ink);
  padding: 78px 0 84px;
}
.section-ink { padding: 78px 0; }
.section-paper .eyebrow { color: var(--flame); }
.section-paper .tag,
.section-paper .tabs { border-color: var(--line-on-ink); }
.section-paper table.compare th,
.section-paper table.compare td { border-color: var(--line-on-ink); }
.section-paper .glass-light,
.glass-light {
  background: var(--card);
  border: 1px solid var(--line-on-ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.glass-light:hover { background: var(--card-hover); box-shadow: none; }
.glass-dark {
  background: var(--card);
  border: 1px solid var(--line-on-ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.glass-dark:hover { background: var(--card-hover); box-shadow: none; }
.card, .stat-cell, .price-card, .sim { border-radius: 12px; }

/* The closing call to action is a quiet band with a flame edge, not a
   full-bleed orange page. The link columns live in the site footer below,
   so the duplicate set here is dropped. */
.cta-footer {
  background: var(--ink-soft);
  color: var(--paper);
  border-top: 1px solid var(--line-on-ink);
  padding: 78px 0 74px;
}
.cta-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -20%, var(--flame-dim), transparent 62%);
  pointer-events: none;
}
.cta-footer .foot-nav,
.cta-footer .foot-bottom { display: none; }
.cta-footer .eyebrow-black { color: var(--flame); }
.cta-footer p.tag-line { color: var(--muted); }
.cta-footer .appstore-badge { position: relative; z-index: 1; }

/* Components that used to sit on the light band inherit the dark surface
   colours now that the band is dark. */
.section-paper .btn-secondary,
.section-paper .btn-dark,
.section-paper .tab-btn,
.section-paper .faq-q,
.section-paper .card,
.section-paper .card h3,
.section-paper .stat-cell,
.section-paper .price-card,
.section-paper table.compare { color: var(--paper); }
.section-paper .btn-dark {
  background: var(--flame);
  color: #fff;
}
.section-paper .btn-dark:hover { background: var(--flame-bright); opacity: 1; }
.section-paper .shot { background: var(--card); }
.section-paper .shot figcaption { color: var(--muted); }
.section-paper .lede,
.section-paper .prose,
.section-paper p { color: var(--paper); }
.section-paper .price-note,
.section-paper .stat-cell .label,
.section-paper figcaption { color: var(--muted); }
.section-paper a:not(.btn):not(.chip):not(.appstore-badge) { color: var(--flame); }

/* ---------- Mobile chrome ----------
   The open menu is a full-width sheet under the bar, not an overlay that
   floats across the page content. */
@media (max-width: 1040px) {
  .site-nav .nav-inner { height: auto; min-height: 56px; padding: 8px 0; flex-wrap: wrap; }
  .nav-toggle { display: block; order: 3; }
  .nav-right { order: 2; margin-left: auto; }
  .nav-links {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 0 6px;
    margin-top: 8px;
    border-top: 1px solid var(--line-on-ink);
  }
  .nav-links.open { display: flex; }
  .nav-menu { position: static; width: 100%; }
  .nav-menu > button { width: 100%; justify-content: space-between; }
  .nav-panel {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 4px 0 8px;
    box-shadow: none;
    display: none;
  }
  .nav-menu[data-open="true"] .nav-panel { display: grid; transform: none; }
  .nav-links a.navlink { width: 100%; padding: 11px 12px; }
  .nav-links .nav-cta { display: none; }
}
@media (max-width: 560px) {
  .nav-cta { padding: 8px 12px; font-size: 12px; }
  .gallery-head { padding: 44px 0 18px; }
  .gallery-head h1 { font-size: 27px; }
  .gallery-head p { font-size: 15px; }
  .chip-row { padding: 20px 0 24px; gap: 6px; }
  .chip { padding: 7px 11px; font-size: 13px; }
  .site-foot .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .site-foot .foot-brand { grid-column: 1 / -1; }
}

/* Without JavaScript the filter row and pager cannot do anything, so they
   are not shown; every card stays visible instead. */
html:not(.js) #chip-row,
html:not(.js) #pager { display: none; }

/* ---------- Brand mark ----------
   The App Store icon is a fine engraving that turns to mush under 32px, so
   the nav uses a high-contrast silhouette tile derived from it. */
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--line-on-ink);
}
.site-foot .foot-brand .brand-mark { width: 30px; height: 30px; border-radius: 8px; }


/* ==========================================================================
   3D layer
   Real depth, no WebGL and no dependencies: CSS 3D transforms driven by
   pointer, scroll and a little JS. Every effect is decoration layered on
   top of flat, readable markup, and all of it collapses under
   prefers-reduced-motion or when JavaScript never runs.
   ========================================================================== */

/* ---------- Hero stage ---------- */
.stage3d {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  padding: 26px 0 6px;
}
.deck {
  position: relative;
  width: min(760px, 92vw);
  margin: 0 auto;
  aspect-ratio: 1200 / 854;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 12deg)) rotateY(var(--ry, -16deg)) rotateZ(var(--rz, 0deg));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.js .deck { transition: transform 0.18s ease-out; }
.deck-card {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  transform-style: preserve-3d;
  background: var(--card);
  border: 1px solid var(--line-on-ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px)) scale(var(--s, 1));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.deck-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deck-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14), transparent 42%);
  opacity: var(--glare, 0.5);
  pointer-events: none;
}
.deck-card.is-back { opacity: 0.55; filter: saturate(0.7); }
.deck-card.is-mid { opacity: 0.8; }
/* A flame plane behind the deck gives the scene a floor and a horizon. */
.stage3d::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: min(760px, 92vw);
  height: 210px;
  transform: translateX(-50%) rotateX(74deg);
  background: radial-gradient(ellipse at center, var(--flame-dim), transparent 68%);
  filter: blur(22px);
  pointer-events: none;
}
.deck-badges {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.deck-badge {
  position: absolute;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--line-on-ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  left: var(--bx);
  top: var(--by);
  transform: translate3d(0, 0, var(--bz));
}
.deck-badge .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--flame);
  margin-right: 7px;
  vertical-align: middle;
}
.deck-badge.is-night .dot { background: var(--duty-night); }
.deck-badge.is-off .dot { background: var(--duty-vacation); }

.stage-hint {
  margin: 34px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.stage-hint kbd { margin: 0 2px; }

/* ---------- Card tilt ---------- */
.tilt {
  transform: perspective(900px)
             rotateX(var(--tx, 0deg))
             rotateY(var(--ty, 0deg))
             translateZ(var(--tz, 0px));
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tilt.is-tilting { transition: transform 0.08s linear; }
.g-card.tilt .thumb { transform: translateZ(26px); transition: transform 0.4s ease; }
.g-card.tilt h3, .g-card.tilt .g-meta { transform: translateZ(14px); }
.g-card.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 0%),
              rgba(255, 255, 255, 0.10), transparent 68%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.g-card.tilt:hover::after { opacity: 1; }

/* ---------- 3D tab switcher ---------- */
[data-tabs].tabs-3d { perspective: 1600px; }
.tabs-3d .tab-panel {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.js .tabs-3d .tab-panel.is-entering {
  animation: panel-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes panel-in {
  from { opacity: 0; transform: rotateY(-14deg) translateZ(-90px); }
  to   { opacity: 1; transform: none; }
}
.tabs-3d .tab-btn { transform-style: preserve-3d; transition: transform 0.25s ease; }
.tabs-3d .tab-btn[aria-selected="true"] { transform: translateZ(18px); }

/* ---------- Depth on section cards ---------- */
.depth-row { perspective: 1200px; }

@media (prefers-reduced-motion: reduce) {
  .deck, .deck-card, .tilt, .tabs-3d .tab-btn { transform: none !important; transition: none !important; }
  .js .tabs-3d .tab-panel.is-entering { animation: none; }
  .stage3d::before { display: none; }
}
@media (max-width: 700px) {
  .deck-badge { font-size: 11px; padding: 6px 10px; }
  .stage-hint { display: none; }
}

/* ---------- Deck tab bar ---------- */
.deck-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  position: relative;
  z-index: 2;
}
.deck-tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-on-ink);
  background: var(--chip);
  color: var(--paper);
  font-family: var(--ui);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.deck-tab:hover { border-color: var(--flame); transform: translateY(-2px); }
.deck-tab .dt-name { font-size: 14px; font-weight: 600; }
.deck-tab .dt-meta { font-size: 11px; color: var(--muted); }
.deck-tab[aria-selected="true"] {
  background: var(--flame);
  border-color: var(--flame);
  color: #fff;
}
.deck-tab[aria-selected="true"] .dt-meta { color: rgba(255, 255, 255, 0.85); }
.stage3d { padding-bottom: 18px; }
.deck { width: min(680px, 86vw); }
.stage3d::before { width: min(680px, 86vw); }
@media (max-width: 640px) {
  .deck-tab { padding: 7px 12px; }
  .deck-tab .dt-meta { display: none; }
}

.badge-a { --bx: -9%; --by: 11%; --bz: 130px; }
.badge-b { --bx: 74%; --by: 30%; --bz: 160px; }
.badge-c { --bx: 4%; --by: 73%; --bz: 104px; }

@media (max-width: 700px) {
  /* Badges float outside the deck on desktop; on a phone that pushes them
     off-canvas, so they tuck inside the frame instead. */
  .deck-badge { --bz: 60px; }
  .badge-a { --bx: 3%; --by: 5%; }
  .badge-b { --bx: 46%; --by: 24%; }
  .badge-c { --bx: 4%; --by: 74%; }
  .stage3d { padding-top: 10px; }
  .deck { width: min(560px, 90vw); }
  .stage3d::before { width: min(560px, 90vw); }
}

/* ---------- WebGL stage ----------
   The canvas replaces the CSS fallback only once a context exists, so a
   machine without WebGL still gets the layered calendar deck. */
.gl-stage {
  position: relative;
  width: min(1000px, 94vw);
  height: clamp(300px, 38vw, 470px);
  margin: 6px auto 0;
  touch-action: pan-y;
}
.gl-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.gl-stage.is-grabbing canvas { cursor: grabbing; }
.gl-stage.gl-live .gl-fallback { display: none; }
.gl-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 70%;
  height: 130px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--flame-dim), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}
.gl-tabs { margin-top: 8px; }
@media (max-width: 640px) {
  .gl-stage { height: clamp(300px, 78vw, 420px); }
}

/* The WebGL tab bar belongs to the live scene; the fallback ships its own
   inside #stage-fallback, so only one is ever on screen. */
.gl-tabs { display: none; }
.gl-stage.gl-live + .gl-tabs { display: flex; }
.gl-stage.gl-live ~ .stage-hint { display: block; }
.gl-stage:not(.gl-live) ~ .stage-hint { display: none; }

/* ---------- Tab previews ----------
   Every tab carries a picture of what it opens: the App Store screen for the
   app tabs, the generated calendar for the rotation tabs. */
.deck-tab, .tab-btn.has-thumb {
  position: relative;
  overflow: hidden;
}
.tab-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 264 / 185;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--line-on-ink);
  transform: translateZ(0) scale(1);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
  filter: saturate(0.85) brightness(0.9);
}
.deck-tab:hover .tab-thumb,
.tab-btn:hover .tab-thumb { transform: scale(1.06); filter: none; }
.deck-tab[aria-selected="true"] .tab-thumb,
.tab-btn[aria-selected="true"] .tab-thumb { filter: none; border-color: rgba(255, 255, 255, 0.35); }

.deck-tabs { gap: 12px; align-items: stretch; }
.deck-tab {
  width: 168px;
  padding: 10px 10px 12px;
  align-items: stretch;
  text-align: left;
}
.deck-tab .dt-name { font-size: 13px; }
.deck-tab .dt-meta { font-size: 10.5px; }

/* The features tab strip becomes a row of picture tabs. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 0 !important;
  padding-bottom: 4px;
}
.tab-btn.has-thumb {
  width: 172px;
  padding: 10px 10px 12px;
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius-sm);
  background: var(--chip);
  color: var(--paper);
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}
.tab-btn.has-thumb:hover { border-color: var(--flame); }
.tab-btn.has-thumb[aria-selected="true"] {
  background: var(--flame);
  border-color: var(--flame);
  color: #fff;
}
.tab-btn.has-thumb::after { display: none; }
.tab-label { display: block; }

@media (max-width: 640px) {
  .deck-tab, .tab-btn.has-thumb { width: 132px; }
  .deck-tab .dt-meta { display: none; }
}

/* ==========================================================================
   Motion — 3D, and in the app's language
   Duty colour, cycle rhythm and depth. Every animation below is decoration:
   it runs only with JavaScript and only when motion is welcome.
   ========================================================================== */

/* Cards arrive as if turning toward the reader, not sliding up flat. */
.js .reveal {
  transform: perspective(1000px) rotateX(9deg) translate3d(0, 26px, -60px);
  transform-origin: 50% 100%;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal.revealed { transform: perspective(1000px) rotateX(0) translate3d(0, 0, 0); }

/* Nav panels swing down on a hinge. */
.nav-panel {
  transform-origin: 50% -10px;
  transform: translateX(-50%) perspective(1200px) rotateX(-14deg) translateY(-6px);
}
.nav-menu[data-open="true"] .nav-panel {
  transform: translateX(-50%) perspective(1200px) rotateX(0) translateY(0);
}

/* Chips and buttons have a press depth rather than a colour flash. */
.chip, .pager button, .deck-tab, .tab-btn.has-thumb, .nav-cta, .btn {
  transform: perspective(600px) translateZ(0);
}
.chip:active, .pager button:active, .nav-cta:active, .btn:active {
  transform: perspective(600px) translateZ(-8px) scale(0.985);
}
.deck-tab:active, .tab-btn.has-thumb:active { transform: perspective(600px) translateZ(-10px); }

/* The duty dot pulses on the app's own cadence. */
@keyframes duty-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(255, 90, 31, 0); }
}
.js .deck-badge .dot { animation: duty-pulse 2.6s ease-out infinite; }
.js .deck-badge.is-night .dot { animation-delay: 0.9s; }
.js .deck-badge.is-off .dot { animation-delay: 1.7s; }

/* Badges float at their own depth, so the fallback deck still has parallax. */
@keyframes badge-float {
  0%, 100% { transform: translate3d(0, 0, var(--bz)); }
  50% { transform: translate3d(0, -7px, calc(var(--bz) + 18px)); }
}
.js .deck-badge { animation: badge-float 6s ease-in-out infinite; }
.js .badge-b { animation-duration: 7.4s; animation-delay: -2s; }
.js .badge-c { animation-duration: 8.2s; animation-delay: -4s; }

/* The section eyebrow ticks in like a shift starting. */
@keyframes eyebrow-in {
  from { opacity: 0; letter-spacing: 0.34em; }
  to { opacity: 1; letter-spacing: 0.16em; }
}
.js .reveal .eyebrow, .js .eyebrow.reveal { animation: eyebrow-in 0.8s ease both; }

/* Gallery thumbnails settle back after the card lands. */
@keyframes thumb-settle {
  from { transform: scale(1.08) translateZ(0); }
  to { transform: scale(1) translateZ(0); }
}
.js .g-card.revealed .thumb img { animation: thumb-settle 1s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Feature panels turn in on the Y axis when a picture tab is chosen. */
@keyframes panel-turn {
  from { opacity: 0; transform: perspective(1400px) rotateY(-12deg) translateZ(-70px); }
  to { opacity: 1; transform: none; }
}
.js .tabs-3d .tab-panel.is-entering { animation: panel-turn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* The scroll progress bar carries the duty colour across the top. */
#scroll-progress {
  background: linear-gradient(90deg, var(--flame), var(--duty-night), var(--flame));
  background-size: 200% 100%;
}
.js #scroll-progress { animation: duty-sweep 6s linear infinite; }
@keyframes duty-sweep {
  from { background-position: 0 0; }
  to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.revealed { transform: none !important; }
  .js .deck-badge, .js .deck-badge .dot, .js #scroll-progress,
  .js .g-card.revealed .thumb img, .js .tabs-3d .tab-panel.is-entering,
  .js .reveal .eyebrow { animation: none !important; }
}