/* ==========================================================================
   PlotVisionAI — AI Landscape Visualization & Concept Design Tool
   Dark teal / premium landscape-tech launch page
   Tokens → base → layout → components → responsive → motion prefs
   ========================================================================== */

/* ------------------------------- 1. TOKENS ------------------------------- */
:root {
  /* Surfaces — deep teal, near-black at the base */
  --ink-000: #03100f;
  --ink-100: #051816;
  --ink-200: #07201f;
  --ink-300: #0a2a29;
  --ink-400: #0e3634;
  --ink-500: #14453f;

  /* Ink */
  --fg: #e9f4f1;
  --fg-warm: #f6faf4; /* bright warm off-white for primary copy */
  --fg-soft: #b9cfca;
  --fg-mute: #8aa5a1;

  /* Accents */
  --teal: #3fe0c1;
  --teal-deep: #16a98d;
  --teal-glow: rgba(63, 224, 193, 0.42);
  --lume: #f4c987; /* landscape lighting warm */
  --lume-soft: rgba(244, 201, 135, 0.22);

  /* Lines */
  --line: rgba(150, 226, 212, 0.14);
  --line-strong: rgba(150, 226, 212, 0.28);

  /* Type */
  --sans: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Erode", ui-serif, Georgia, "Times New Roman", serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.0625rem;
  --text-xl: clamp(1.125rem, 0.9rem + 0.7vw, 1.375rem);
  --text-2xl: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --text-3xl: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --text-hero: clamp(2.35rem, 1.3rem + 5.2vw, 4.75rem);

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);

  --shell: 84rem;
  --measure: 78ch;
  --measure-wide: 88ch;
  --radius: 14px;
  --radius-lg: 20px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;

  --focus: 0 0 0 2px var(--ink-000), 0 0 0 4px var(--teal);
}

/* -------------------------------- 2. BASE -------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ink-000);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol,
dl {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 8px;
}

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

.skip-link {
  position: absolute;
  left: 50%;
  top: -100%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--teal);
  color: var(--ink-000);
  font-weight: 600;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
}

.skip-link:focus-visible {
  top: 0;
  box-shadow: none;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 2.5rem);
}

/* ------------------------------ 3. TYPE KIT ------------------------------ */
.eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.section-head {
  max-width: 60rem;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem);
}

.section-head h2 {
  font-family: var(--serif);
  font-size: var(--text-3xl);
  font-weight: 500;
}

.section-head p {
  margin-top: var(--sp-4);
  color: var(--fg-soft);
  font-size: var(--text-lg);
  max-width: 56rem;
}

.section-head--split {
  display: grid;
  gap: var(--sp-4) var(--sp-7);
  max-width: none;
  align-items: end;
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

/* ------------------------------- 4. BUTTONS ------------------------------ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn .ico {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn--primary {
  --btn-bg: var(--teal);
  --btn-fg: #032420;
  --btn-bd: var(--teal);
  box-shadow: 0 10px 34px -14px var(--teal-glow);
}

.btn--primary:hover {
  --btn-bg: #58f0d3;
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -14px var(--teal-glow);
}

.btn--glass {
  --btn-bg: rgba(6, 26, 25, 0.52);
  --btn-bd: rgba(198, 240, 232, 0.34);
  backdrop-filter: blur(10px) saturate(1.1);
}

.btn--glass:hover {
  --btn-bg: rgba(10, 42, 40, 0.72);
  --btn-bd: var(--teal);
}

.btn--ghost:hover {
  --btn-bd: var(--teal);
  --btn-bg: rgba(63, 224, 193, 0.08);
}

.btn--sm {
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  font-size: var(--text-sm);
}

.btn--full {
  width: 100%;
}

.microcopy {
  font-size: var(--text-sm);
  color: var(--fg-mute);
}

/* ------------------------------- 5. HEADER ------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(3, 16, 15, 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(3, 16, 15, 0.92);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--fg);
  text-decoration: none;
}

.brand__mark {
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--teal);
  filter: drop-shadow(0 0 10px rgba(63, 224, 193, 0.34));
}

.brand__word {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.tm {
  font-size: 0.5em;
  line-height: 1;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 0.06em;
  color: var(--fg-mute);
  font-weight: 500;
}

.site-footer__tm {
  margin-top: 0.6rem;
  color: var(--fg-mute);
}

.brand__ai {
  color: var(--teal);
}

.brand__descriptor {
  display: none;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.site-header__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.section-nav {
  display: none;
  gap: 1.25rem;
}

.section-nav a {
  color: var(--fg-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.section-nav a:hover {
  color: var(--fg);
  border-bottom-color: var(--teal);
}

/* -------------------------------- 6. HERO ------------------------------- */
.hero {
  position: relative;
  --split: 50%;
}

.hero__grid {
  display: grid;
}

.hero__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 78svh;
  background: var(--ink-100);
}

.hero__half {
  position: absolute;
  inset: 0;
}

.hero__half picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Left: bare, unattractive yard — cold, flat, drained of life */
.hero__half--before {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.hero__half--before img {
  object-position: 56% 60%;
  filter: saturate(0.86) contrast(1.04) brightness(0.93);
}

.hero__half--before::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(6, 26, 30, 0.2), rgba(3, 16, 18, 0.42));
}

/* Right: illuminated premium AI concept — warm light, teal lift */
.hero__half--after {
  clip-path: inset(0 0 0 var(--split));
}

.hero__half--after img {
  object-position: 44% 56%;
  filter: saturate(1.1) contrast(1.04) brightness(1.02);
}

.hero__half--after::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 48% at 62% 62%, rgba(244, 201, 135, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(3, 16, 15, 0.2), rgba(3, 16, 15, 0.04) 45%, rgba(3, 16, 15, 0.42));
}

/* Seam */
.hero__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(63, 224, 193, 0.55) 12%,
    var(--teal) 50%,
    rgba(63, 224, 193, 0.55) 88%,
    transparent
  );
  box-shadow: 0 0 18px 1px var(--teal-glow);
  pointer-events: none;
  z-index: 3;
}

.hero__labels {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 4;
  pointer-events: none;
}

.stamp {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(3, 16, 15, 0.6);
  backdrop-filter: blur(8px);
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--fg-soft);
}

.stamp b {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
}

.stamp--after b {
  color: var(--lume);
}

/* Split control — real range input, keyboard accessible */










/* Hero copy */
.hero__copy {
  position: relative;
  z-index: 6;
  padding: clamp(2rem, 1rem + 5vw, 3.5rem) 0 clamp(2.5rem, 1rem + 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(20, 69, 63, 0.55), transparent 70%),
    var(--ink-000);
}

.hero__copy .shell {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
}

.vision-mark {
  width: clamp(120px, 34vw, 188px);
  height: auto;
  color: var(--teal);
  filter: drop-shadow(0 0 22px rgba(63, 224, 193, 0.4));
}

.hero__kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.hero h1 {
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
}

.hero h1 span {
  color: var(--teal);
}

.hero__tagline {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.22;
  color: var(--fg);
  max-width: 50ch;
}

.hero__lede {
  color: var(--fg-soft);
  font-size: var(--text-lg);
  max-width: 56ch;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 24rem;
  margin-top: var(--sp-2);
}

.hero__trust {
  font-size: var(--text-sm);
  color: var(--fg-mute);
  max-width: 50ch;
}

/* ------------------------------ 7. AUDIENCES ---------------------------- */
.band {
  padding-block: var(--section-y);
  position: relative;
}

.band--tint {
  background: linear-gradient(180deg, var(--ink-100), var(--ink-000));
}

.band--panel {
  background: var(--ink-100);
  border-block: 1px solid var(--line);
}

.audiences__grid {
  display: grid;
  gap: var(--sp-4);
}

.audience {
  display: grid;
  gap: var(--sp-3);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(20, 69, 63, 0.34), rgba(5, 24, 22, 0.5));
}

.audience__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  color: var(--teal);
}

.audience__icon .ico {
  width: 20px;
  height: 20px;
}

.audience__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.audience h3 {
  font-size: var(--text-xl);
  margin-top: 0.35rem;
}

.audience p {
  color: var(--fg-soft);
  margin-top: 0.5rem;
}

.audience ul {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.audience li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--fg-soft);
  font-size: var(--text-sm);
}

.audience li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 1.7px solid var(--teal);
  border-bottom: 1.7px solid var(--teal);
  rotate: -45deg;
}

/* --------------------------- 8. PLAN OVERLAY ---------------------------- */
.value__grid {
  display: grid;
  gap: var(--sp-5);
}

.plan {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-100);
}

.plan__frame {
  position: relative;
  aspect-ratio: 4 / 3;
}

.plan__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.6) brightness(0.62);
}

.plan__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.plan__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--fg-mute);
}

.plan__caption b {
  color: var(--fg);
  font-weight: 600;
}

.panels {
  display: grid;
  gap: var(--sp-4);
}

.panel {
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 32, 31, 0.6);
}

.panel__icon {
  color: var(--teal);
  margin-bottom: var(--sp-3);
}

.panel__icon .ico {
  width: 22px;
  height: 22px;
}

.panel h3 {
  font-size: var(--text-xl);
}

.panel p {
  margin-top: 0.6rem;
  color: var(--fg-soft);
}

/* --------------------- 9b. VISUALIZATION CATEGORIES --------------------- */
/* Editorial image gallery. Non-interactive tiles: no category pages exist yet. */
.cats {
  margin-top: var(--sp-6);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 16.5rem;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: var(--sp-3);
  -webkit-overflow-scrolling: touch;
}

.cat {
  scroll-snap-align: start;
  margin-right: var(--sp-4);
  min-height: 44px;
}

.cat__fig {
  margin: 0;
  display: grid;
  gap: 0.7rem;
  position: relative;
}

.cat__fig picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-400);
}

.cat__fig img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.02);
}

.cat__flag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  background: color-mix(in srgb, var(--ink-000) 72%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  backdrop-filter: blur(6px);
}

.cat__fig figcaption {
  display: grid;
  gap: 0.3rem;
}

.cat--icon {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-top: 1px solid var(--line-strong);
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.cat__icon {
  color: var(--teal);
}

.cat__icon .ico {
  width: 26px;
  height: 26px;
}

.cat h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.cat__tm {
  font-size: 0.6em;
  vertical-align: super;
  color: var(--teal);
}

.cat p {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-soft);
}

.cats__note {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--fg-mute);
  max-width: 84ch;
}

/* ------------------------------- 9. STEPS ------------------------------- */
.steps {
  display: grid;
  gap: var(--sp-4);
  counter-reset: step;
}

.steps li {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.steps__num {
  font-family: var(--serif);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--teal);
}

.steps h3 {
  font-size: var(--text-lg);
  margin-top: 0.4rem;
}

.steps p {
  margin-top: 0.4rem;
  color: var(--fg-soft);
  font-size: var(--text-sm);
}

/* ------------------------------ 10. EDITOR ------------------------------ */
.app {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-100);
  overflow: hidden;
}

.app__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(3, 16, 15, 0.6);
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.app__dots {
  display: inline-flex;
  gap: 6px;
}

.app__dots i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--line-strong);
}

.app__file {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app__badge {
  flex: none;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.app__body {
  display: grid;
}

.stages {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--line);
}

.stage {
  flex: none;
  display: grid;
  gap: 0.1rem;
  text-align: left;
  min-height: 48px;
  padding: 0.5rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.stage strong {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-soft);
}

.stage em {
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--fg-mute);
}

.stage:hover {
  background: rgba(63, 224, 193, 0.06);
}

.stage[aria-selected="true"] {
  border-color: var(--line-strong);
  background: rgba(63, 224, 193, 0.11);
}

.stage[aria-selected="true"] strong {
  color: var(--fg);
}

.app__canvas {
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}

.canvas-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}

.canvas-top__title {
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(3, 16, 15, 0.6);
}

.seg {
  min-height: 40px;
  padding: 0.35rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-mute);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.seg[aria-pressed="true"] {
  background: var(--teal);
  color: #032420;
}

.canvas {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  background: var(--ink-200);
}

.canvas__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms var(--ease);
}

.canvas__img.is-shown {
  opacity: 1;
}

.canvas__img[data-layer="before"] {
  filter: saturate(0.45) brightness(0.66);
}

.canvas__stamp {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(3, 16, 15, 0.66);
  backdrop-filter: blur(6px);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.pins {
  position: absolute;
  inset: 0;
}

.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pin__dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--teal);
  color: #032420;
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: 0 0 0 5px rgba(63, 224, 193, 0.18);
}

.pin__note {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 14rem;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(3, 16, 15, 0.94);
  font-size: var(--text-xs);
  color: var(--fg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.pin:hover .pin__note,
.pin:focus-visible .pin__note,
.pin.is-open .pin__note {
  opacity: 1;
}

.app__panel {
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
  background: rgba(3, 16, 15, 0.44);
  min-width: 0;
}

.panel-title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.panel-title__note {
  margin-left: 0.4rem;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--lume);
  text-transform: uppercase;
}

.panel-copy,
.panel-hint {
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.panel-hint {
  color: var(--fg-mute);
  font-size: var(--text-xs);
}

.rows,
.swatches,
.notes {
  display: grid;
  gap: 0.45rem;
  margin-top: var(--sp-3);
}

.rows li,
.swatches li,
.notes li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.rows .ico {
  width: 15px;
  height: 15px;
  color: var(--teal);
  flex: none;
}

.rows em {
  margin-left: auto;
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.sw {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.sw--prairie {
  background: #7f8f4e;
}
.sw--formal {
  background: #2f5b4a;
}
.sw--stone {
  background: #cdbfa6;
}
.sw--dry {
  background: #a98b62;
}

.notes__n {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 999px;
  background: rgba(63, 224, 193, 0.16);
  color: var(--teal);
  font-size: 0.6875rem;
  font-weight: 700;
}

.ledger {
  width: 100%;
  margin-top: var(--sp-3);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ledger th,
.ledger td {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 500;
  color: var(--fg-soft);
}

.ledger td {
  text-align: right;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.linkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-3);
  padding: 0.55rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  font-size: var(--text-sm);
  color: var(--fg-soft);
  overflow-wrap: anywhere;
}

.linkbox .ico {
  width: 15px;
  height: 15px;
  color: var(--teal);
  flex: none;
}

.cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  text-align: center;
}

/* --------------------------- 11. CONCEPT EDITOR ------------------------- */
.ce {
  display: grid;
  gap: var(--sp-4);
}

.ce__stage {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-100);
  overflow: hidden;
}

.ce__stagebar {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
}

.ce__stagetitle {
  font-size: var(--text-sm);
  font-weight: 600;
}

.ce__hint {
  font-size: var(--text-xs);
  color: var(--fg-mute);
}

.ce__canvas {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.ce__base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ce__layer {
  position: absolute;
  inset: 0;
}

.ce__el {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  rotate: var(--r, 0deg);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(198, 240, 232, 0.5);
  border-radius: 9px;
  background: rgba(3, 16, 15, 0.72);
  backdrop-filter: blur(6px);
  color: var(--fg);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), rotate var(--dur) var(--ease),
    left var(--dur) var(--ease), top var(--dur) var(--ease);
}

.ce__el b {
  font-weight: 400;
  color: var(--fg-mute);
}

.ce__el.is-sel {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(63, 224, 193, 0.18);
}

.ce__status {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.ce__side {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.ce__block {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 32, 31, 0.6);
}

.ce__blocktitle {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--sp-3);
}

.ce__block--preview {
  border-style: dashed;
  border-color: rgba(63, 224, 193, 0.32);
  background: rgba(7, 32, 31, 0.38);
}

.ce__tag {
  display: inline-block;
  margin-bottom: var(--sp-2);
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(63, 224, 193, 0.4);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}

.gauge {
  display: grid;
  gap: 0.45rem;
}

.gauge__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.gauge__fill {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), rgba(63, 224, 193, 0.45));
}

.gauge__read {
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.gauge__read strong {
  color: var(--fg);
  font-size: 1.05rem;
}

.ce__palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ce__add,
.ce__ctl {
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(3, 16, 15, 0.5);
  color: var(--fg-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.ce__add:hover,
.ce__ctl:hover {
  border-color: var(--teal);
  color: var(--fg);
  background: rgba(63, 224, 193, 0.09);
}

.ce__ctl .ico {
  width: 16px;
  height: 16px;
}

.ce__selname {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

.ce__group {
  margin-bottom: var(--sp-4);
}

.ce__grouplabel {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 0.5rem;
}

.ce__pad {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 0.35rem;
  justify-content: start;
}

.ce__pad .ce__ctl {
  padding: 0;
}

.ce__pad [data-move="up"] {
  grid-column: 2;
  grid-row: 1;
}
.ce__pad [data-move="left"] {
  grid-column: 1;
  grid-row: 2;
}
.ce__pad [data-move="down"] {
  grid-column: 2;
  grid-row: 2;
}
.ce__pad [data-move="right"] {
  grid-column: 3;
  grid-row: 2;
}

.ce__actions {
  display: grid;
  gap: 0.4rem;
}

.ce__note {
  font-size: var(--text-xs);
  color: var(--fg-mute);
}

.ce__log {
  display: grid;
  gap: 0.35rem;
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(3, 16, 15, 0.5);
  font-size: var(--text-sm);
  color: var(--fg-soft);
  max-height: 11rem;
  overflow-y: auto;
}

.ce__log li {
  display: flex;
  gap: 0.6rem;
}

.ce__log time {
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.ce__logempty {
  color: var(--fg-mute);
}

/* ------------------------------- 12. COURTS ----------------------------- */
.viewer {
  display: grid;
  gap: var(--sp-4);
}

.viewer__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sport {
  min-height: 48px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.sport[aria-selected="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: #032420;
}

.viewer__panel {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(20, 69, 63, 0.26), rgba(5, 24, 22, 0.5));
}

.court {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: radial-gradient(80% 80% at 50% 0%, rgba(20, 69, 63, 0.7), var(--ink-200));
}

.court svg {
  width: 100%;
  height: auto;
}

.court figcaption {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--fg-mute);
}

.viewer__sport {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 500;
}

.viewer__detail p {
  margin-top: 0.7rem;
  color: var(--fg-soft);
}

.specs {
  display: grid;
  gap: 0.7rem;
  margin-top: var(--sp-4);
}

.specs > div {
  display: grid;
  gap: 0.15rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.specs dt {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.specs dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg);
}

.viewer__detail .btn {
  margin-top: var(--sp-4);
}

/* ---------------------------- 13. HONEST STATE -------------------------- */
.state__grid {
  display: grid;
  gap: var(--sp-4);
}

.state {
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 32, 31, 0.6);
}

.state h3 {
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.state h3 .ico {
  width: 18px;
  height: 18px;
  color: var(--teal);
  flex: none;
}

.state ul {
  display: grid;
  gap: 0.45rem;
  margin-top: var(--sp-3);
}

.state li {
  font-size: var(--text-sm);
  color: var(--fg-soft);
  padding-left: 1.1rem;
  position: relative;
}

.state li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--teal);
}

.state--next li::before {
  background: var(--lume);
}

.state--next h3 .ico {
  color: var(--lume);
}

/* ------------------------------ 14. SIGN-UP ----------------------------- */
.close {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(20, 69, 63, 0.7), transparent 70%),
    linear-gradient(180deg, var(--ink-100), var(--ink-000));
  border-top: 1px solid var(--line);
}

.close__inner {
  display: grid;
  gap: var(--sp-6);
  justify-items: center;
  text-align: center;
}

.close h2 {
  font-family: var(--serif);
  font-size: var(--text-3xl);
  font-weight: 500;
  max-width: 54ch;
}

.close p {
  margin-top: var(--sp-4);
  color: var(--fg-soft);
  font-size: var(--text-lg);
  max-width: 56ch;
  margin-inline: auto;
}

.signup {
  width: 100%;
  max-width: 30rem;
  display: grid;
  gap: var(--sp-3);
  text-align: left;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-soft);
}

.field__input {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(3, 16, 15, 0.7);
  color: var(--fg);
  font: inherit;
}

.field__input::placeholder {
  color: var(--fg-mute);
}

.field__input:focus-visible {
  border-color: var(--teal);
  box-shadow: var(--focus);
}

.field__error {
  font-size: var(--text-sm);
  color: #ffb4a2;
}

.signup__done {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(63, 224, 193, 0.1);
  font-size: var(--text-sm);
  color: var(--fg);
}

.signup__done .ico {
  width: 18px;
  height: 18px;
  color: var(--teal);
  flex: none;
}

/* ------------------------------ 14b. PRICING ---------------------------- */
.tiers {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}

.tier {
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20, 69, 63, 0.24), rgba(3, 16, 15, 0.2));
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

.tier--lead {
  border-color: rgba(63, 224, 193, 0.4);
  background: linear-gradient(180deg, rgba(63, 224, 193, 0.13), rgba(3, 16, 15, 0.2));
}

.tier__name {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.tier__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--serif);
}

.tier__amount {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 500;
  color: var(--fg);
}

.tier__per,
.tier__from {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--fg-mute);
}

.tier__meta {
  font-size: var(--text-sm);
  color: var(--teal);
}

.tier__list {
  margin-top: var(--sp-2);
  display: grid;
  gap: 0.45rem;
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.tier__list li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.5;
}

.tier__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
  font-size: 0.85em;
}

.tier__cta {
  margin-top: var(--sp-4);
}

.tier__cta .btn {
  text-align: center;
}

.pricing__note {
  margin-top: var(--sp-5);
  font-size: var(--text-xs);
  color: var(--fg-mute);
  max-width: 86ch;
  line-height: 1.6;
}

.pricing__note a {
  color: var(--teal);
}

/* ---- Corporate and team callout on the pricing page ---------------------
   Team plans are a different buying motion from the self-serve tiers — they
   are activated by request, not by Stripe — so they get one panel of their own
   rather than a fifth column that would imply the same checkout. */
.teamcta {
  margin-top: var(--sp-6);
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  border: 1px solid rgba(63, 224, 193, 0.34);
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 100% 0%, rgba(63, 224, 193, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(20, 69, 63, 0.34), rgba(3, 16, 15, 0.26));
  display: grid;
  gap: var(--sp-5);
}

.teamcta__title {
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-size: var(--text-2xl);
  line-height: 1.15;
}

.teamcta__lede {
  margin-top: 0.6rem;
  max-width: 54ch;
  color: var(--fg-soft);
}

.teamcta__list {
  margin-top: var(--sp-4);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.teamcta__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.teamcta__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.75;
}

.teamcta__aside {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(3, 16, 15, 0.42);
}

.teamcta__from {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-family: var(--serif);
}

.teamcta__fromlabel {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.teamcta__amount {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--fg);
}

.teamcta__per {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--fg-mute);
}

.teamcta__alt,
.teamcta__note {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--fg-mute);
}

.teamcta__cta {
  margin-top: 0.35rem;
}

@media (min-width: 52rem) {
  .teamcta {
    grid-template-columns: minmax(0, 1.55fr) minmax(15rem, 0.95fr);
    gap: var(--sp-6);
    align-items: start;
  }
}

/* form additions */
.field--set {
  border: 0;
  padding: 0;
  margin: 0;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(3, 16, 15, 0.6);
  font-size: var(--text-sm);
  cursor: pointer;
}

.choice input {
  accent-color: var(--teal);
  width: 18px;
  height: 18px;
  flex: none;
}

.choice:has(input:checked) {
  border-color: var(--teal);
  background: rgba(63, 224, 193, 0.1);
}

.choice:focus-within {
  box-shadow: var(--focus);
}

.field__area {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.55;
}

.field__opt {
  font-weight: 400;
  color: var(--fg-mute);
}

select.field__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%),
    linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}

.signup a {
  color: var(--teal);
}

/* ------------------------------- 15. FOOTER ----------------------------- */
.site-footer {
  padding-block: var(--sp-7) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--ink-000);
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-5);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.site-footer__nav a {
  color: var(--fg-soft);
  font-size: var(--text-sm);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-footer__nav a:hover {
  color: var(--teal);
}

.site-footer__note {
  color: var(--fg-soft);
  font-size: var(--text-sm);
  max-width: 54ch;
}

.site-footer__legal {
  color: var(--fg-mute);
  font-size: var(--text-xs);
  max-width: 72ch;
}

.brand--sm {
  min-height: 44px;
  align-self: start;
}

.brand--sm .brand__mark {
  width: 34px;
  height: 34px;
}


.site-footer__cols {
  display: grid;
  gap: var(--sp-5);
}

.site-footer__h {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--sp-2);
}

.site-footer__list {
  display: grid;
  gap: 0.35rem;
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.site-footer__list a,
.site-footer__sister a,
.site-footer__social a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-block: 2px;
}

.site-footer__list a:hover,
.site-footer__sister a:hover,
.site-footer__social a:hover {
  color: var(--teal);
  border-color: var(--teal);
}

.site-footer__sister {
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.site-footer__sister-note,
.site-footer__social {
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--fg-mute);
  line-height: 1.6;
  max-width: 50ch;
}

.exlink {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.exlink .ico {
  width: 13px;
  height: 13px;
  flex: none;
  opacity: 0.75;
}

/* ------------------------- 15b. FOUNDER / STORIES / FAQ / BLOG ---------- */
.founder__grid {
  display: grid;
  gap: var(--sp-6);
}

.founder p + p {
  margin-top: var(--sp-4);
}

.founder p {
  color: var(--fg-soft);
  max-width: 84ch;
  line-height: 1.65;
}

.founder__source {
  margin-top: var(--sp-5);
  font-size: var(--text-sm);
  color: var(--fg-mute);
}

.founder__source a {
  color: var(--fg);
}

.creds {
  display: grid;
  gap: 0;
  align-content: start;
}

.creds li {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
}

.creds li:last-child {
  border-bottom: 1px solid var(--line);
}

.creds__k {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
}

.creds__v {
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.stories__what {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-5);
}

.stories__what h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.stories__what p {
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: 1.6;
}

.stories__cta {
  margin-top: var(--sp-6);
}

.faq__list {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
  max-width: 84ch;
}

.qa {
  border-bottom: 1px solid var(--line);
}

.qa summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-4) 2.2rem var(--sp-4) 0;
  min-height: 56px;
  position: relative;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--fg);
}

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

.qa summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.qa[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.qa summary:focus-visible {
  box-shadow: var(--focus);
  border-radius: 6px;
}

.qa > p {
  padding-bottom: var(--sp-4);
  color: var(--fg-soft);
  line-height: 1.65;
  max-width: 78ch;
}

.story-fields {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(3, 16, 15, 0.5);
}

.story-fields summary {
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 1rem;
  min-height: 52px;
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
}

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

.story-fields summary::before {
  content: "+";
  margin-right: 0.6rem;
  color: var(--teal);
  font-size: 1.1rem;
  line-height: 1;
}

.story-fields[open] summary::before {
  content: "\2212";
}

.story-fields summary:focus-visible {
  box-shadow: var(--focus);
  border-radius: 11px;
}

.story-fields__body {
  padding: 0 1rem 1rem;
  display: grid;
  gap: var(--sp-3);
}

.choice--wide {
  align-items: flex-start;
  line-height: 1.5;
}

.choice--wide input {
  margin-top: 2px;
}

/* blog page */
.blog {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter, 1.25rem);
  padding-block: var(--sp-6) var(--sp-7);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--fg-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line-strong);
}

.crumbs a {
  color: var(--fg-soft);
}

.blog__head {
  margin-top: var(--sp-5);
  max-width: 78ch;
}

.blog__head h1 {
  margin-top: var(--sp-3);
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.blog__head p {
  margin-top: var(--sp-4);
  color: var(--fg-soft);
  line-height: 1.7;
}

.blog__lede {
  font-size: var(--text-lg);
  color: var(--fg) !important;
}

.blog__status {
  margin-top: var(--sp-5) !important;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(63, 224, 193, 0.07);
  font-size: var(--text-sm);
}

.posts {
  margin-top: var(--sp-7);
  display: grid;
  gap: var(--sp-7);
  counter-reset: post;
}

.post {
  max-width: 78ch;
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-5);
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.post__tag {
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(244, 201, 135, 0.5);
  border-radius: 999px;
  color: var(--lume);
  letter-spacing: 0.08em;
}

.post h2 {
  margin-top: var(--sp-3);
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.18;
}

.post__dek {
  margin-top: var(--sp-3);
  font-size: var(--text-lg);
  color: var(--fg);
  line-height: 1.5;
}

.post p {
  margin-top: var(--sp-4);
  color: var(--fg-soft);
  line-height: 1.7;
}

.post__links {
  font-size: var(--text-sm);
  color: var(--fg-mute) !important;
}

.post__links a,
.blog__head a {
  color: var(--teal);
}

.blog__cta {
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20, 69, 63, 0.3), rgba(3, 16, 15, 0.2));
  max-width: 78ch;
}

.blog__cta h2 {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 500;
}

.blog__cta p {
  margin-top: var(--sp-3);
  color: var(--fg-soft);
  line-height: 1.65;
}

.blog__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.about__figure {
  margin-top: var(--sp-6);
  max-width: 78ch;
}

.about__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
}

.about__figure figcaption {
  margin-top: 0.7rem;
  font-size: var(--text-sm);
  color: var(--fg-mute);
  line-height: 1.55;
  max-width: 84ch;
}

.about__body {
  max-width: 78ch;
}

.about__body h2 {
  margin-top: var(--sp-7);
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.2;
}

.about__body p {
  margin-top: var(--sp-4);
  color: var(--fg-soft);
  line-height: 1.7;
}

.about__body a {
  color: var(--teal);
}


/* --------------------- 15c. COURT CONCEPT COMPARISONS ------------------- */
.courts-page__body {
  max-width: 78ch;
}

.bsc-plaque {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(233, 244, 241, 0.05);
  max-width: 78ch;
}

.bsc-plaque picture {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #f7faf9;
}

.bsc-plaque img {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin-inline: auto;
}

.bsc-plaque p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--fg-soft);
}

.cmps {
  margin-top: var(--sp-8);
  max-width: 100%;
}

.cmps__title {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.2;
  max-width: 50ch;
}

.cmp {
  margin-top: var(--sp-6);
  max-width: 100%;
}

.cmp + .cmp {
  margin-top: var(--sp-8);
}

.cmp__stage {
  --split: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: var(--ink-100);
  aspect-ratio: 4 / 3;
  touch-action: auto;
}

.cmp--grade .cmp__stage {
  aspect-ratio: 4 / 3;
}

.cmp--lighting .cmp__stage {
  aspect-ratio: 16 / 9;
}

.cmp__layer {
  position: absolute;
  inset: 0;
  display: block;
}

.cmp__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cmp__layer--before {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.cmp__layer--after {
  clip-path: inset(0 0 0 var(--split));
}

.cmp__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(63, 224, 193, 0.5) 10%,
    var(--teal) 50%,
    rgba(63, 224, 193, 0.5) 90%,
    transparent
  );
  box-shadow: 0 0 16px 1px rgba(63, 224, 193, 0.35);
  pointer-events: none;
  z-index: 3;
}

.cmp__flag,
.cmp__tag {
  position: absolute;
  z-index: 4;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(3, 16, 15, 0.72);
  backdrop-filter: blur(8px);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--fg-soft);
  pointer-events: none;
  max-width: calc(100% - 1.5rem);
}

.cmp__flag {
  top: 0.75rem;
  right: 0.75rem;
  color: var(--lume);
  border-color: rgba(244, 201, 135, 0.42);
}

.cmp__tag {
  bottom: 0.75rem;
  font-weight: 600;
  color: var(--fg);
}

.cmp__tag--before {
  left: 0.75rem;
}

.cmp__tag--after {
  right: 0.75rem;
}











.cmp figcaption {
  margin-top: 0.85rem;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--fg-mute);
  max-width: 78ch;
}

.cmp figcaption b {
  color: var(--fg);
  font-weight: 600;
}

.pricing__embed {
  margin-top: var(--sp-3);
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(244, 201, 135, 0.32);
  border-radius: 10px;
  background: rgba(244, 201, 135, 0.07);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 84ch;
}

.pricing__embed a {
  color: var(--lume);
  text-underline-offset: 3px;
}

.pricing__embed.is-blocked {
  border-color: rgba(244, 201, 135, 0.55);
}

.pricing__embed-url {
  display: block;
  margin-top: 0.45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  word-break: break-all;
  color: var(--fg);
  user-select: all;
}

/* Supporting residential lighting samples (courts page) */
.lightgal__title {
  margin: var(--sp-8) 0 var(--sp-3);
  font-family: var(--serif);
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lightgal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.lightgal__fig {
  margin: 0;
  position: relative;
  display: grid;
  gap: 0.6rem;
}

.lightgal__fig picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-400);
}

.lightgal__fig img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.lightgal__flag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  background: color-mix(in srgb, var(--ink-000) 74%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.26rem 0.58rem;
  backdrop-filter: blur(6px);
}

.lightgal__fig figcaption {
  display: grid;
  gap: 0.2rem;
  font-size: var(--text-sm);
}

.lightgal__fig figcaption b {
  color: var(--fg);
  font-weight: 560;
}

.lightgal__fig figcaption span {
  color: var(--fg-mute);
  line-height: 1.5;
}

.lightgal__note {
  margin: var(--sp-4) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-mute);
  max-width: 84ch;
}

/* ----------------------------- 16. RESPONSIVE --------------------------- */
@media (min-width: 26rem) {
  .brand__descriptor {
    display: block;
  }
}

@media (min-width: 34rem) {
  .hero__actions {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }

  .audiences__grid,
  .panels,
  .state__grid {
    grid-template-columns: 1fr 1fr;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .cta-row {
    flex-direction: row;
    justify-content: center;
    text-align: left;
  }

  .ce__actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 56rem) {
  .section-nav {
    display: flex;
  }

  .bsc-plaque {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-5);
  }

  .cmp__flag,
  .cmp__tag {
    font-size: 0.6875rem;
  }

  .cats {
    grid-auto-flow: row;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-4);
    row-gap: var(--sp-6);
    overflow: visible;
    padding-bottom: 0;
  }

  .cat {
    margin-right: 0;
    grid-column: span 4;
  }

  .cat--wide {
    grid-column: span 6;
  }

  .cat--wide .cat__fig img {
    aspect-ratio: 16 / 9;
  }

  .cat--tall {
    grid-column: span 6;
  }

  .cat--tall .cat__fig img {
    aspect-ratio: 16 / 9;
  }

  .cat--icon {
    grid-column: span 2;
    padding-right: var(--sp-2);
  }

  .site-footer__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--sp-6);
  }

  .founder__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
  }

  .stories__what {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .blog__head h1 {
    font-size: var(--text-3xl);
  }

  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .tier--addon {
    grid-column: span 3;
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 12rem) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--sp-5);
  }

  .tier--addon .tier__list {
    margin-top: 0;
    grid-column: 3;
    grid-row: 1 / span 3;
  }

  .tier--addon .tier__cta {
    grid-column: 2;
    margin-top: var(--sp-3);
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .value__grid {
    grid-template-columns: 1.35fr 1fr;
    align-items: start;
  }

  .section-head--split {
    grid-template-columns: 1.1fr 1fr;
  }

  .app__body {
    grid-template-columns: 13rem minmax(0, 1fr) 15.5rem;
  }

  .stages {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    overflow: visible;
  }

  .stage {
    flex: initial;
  }

  .app__panel {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .ce {
    grid-template-columns: minmax(0, 1.5fr) 20rem;
    align-items: start;
  }

  .viewer__panel {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }

  .site-footer__inner {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: var(--sp-7);
  }

  .site-footer__legal {
    grid-column: 1 / -1;
  }
}

/* Desktop hero: overlay copy on the split stage */
@media (min-width: 62rem) {
  .hero__grid {
    position: relative;
  }

  .hero__stage {
    aspect-ratio: auto;
    height: clamp(38rem, 88svh, 52rem);
    max-height: none;
  }

  .hero__copy {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    padding: 0;
    background: none;
    pointer-events: none;
  }

  .hero__copy::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(42% 56% at 50% 48%, rgba(3, 16, 15, 0.78), rgba(3, 16, 15, 0.4) 62%, rgba(3, 16, 15, 0.08) 82%);
  }

  .hero__copy .shell {
    position: relative;
  }

  .hero__copy .btn,
  .hero__copy a {
    pointer-events: auto;
  }

  .hero__labels {
    inset: auto 0 1.75rem 0;
    padding-inline: clamp(1.5rem, 4vw, 3rem);
  }

  .hero h1 {
    font-size: clamp(3.5rem, 1.5rem + 4.6vw, 5.25rem);
  }
}

/* --------------------------- 17. MOTION / PREFS ------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

.js .reveal.is-in {
  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;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --fg-soft: #dcecea;
    --fg-mute: #bcd3cf;
    --line: rgba(190, 240, 232, 0.34);
    --line-strong: rgba(190, 240, 232, 0.55);
  }
}

@media print {
  .site-header,
  .xfade__toggle,
  .ce__side,
  .signup,
  .tiers {
    display: none;
  }
}

@media (min-width: 56rem) {
  .lightgal {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--sp-5) var(--sp-5);
    align-items: start;
  }

  .lightgal__item--lead {
    grid-row: span 2;
  }

  .lightgal__item--lead .lightgal__fig img {
    aspect-ratio: 4 / 5;
    object-position: 42% 50%;
  }

  .lightgal__title {
    margin-top: var(--sp-10);
  }
}

/* ------------------- 17. MARKETING PAGES & MOBILE NAV ------------------- */
.mnav {
  position: relative;
}

.mnav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--fg);
  background: color-mix(in srgb, var(--ink-000) 55%, transparent);
}

.mnav__btn::-webkit-details-marker {
  display: none;
}

.mnav__btn:focus-visible {
  box-shadow: var(--focus);
}

.mnav__chev {
  width: 16px;
  height: 16px;
  color: var(--teal);
  transition: transform var(--dur) var(--ease);
}

.mnav[open] .mnav__chev {
  transform: rotate(180deg);
}

.mnav__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 13.5rem;
  padding: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink-100) 94%, var(--ink-000));
  box-shadow: 0 18px 40px rgba(3, 16, 15, 0.55);
  backdrop-filter: blur(10px);
}

.mnav__nav {
  display: grid;
}

.mnav__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.2rem 0.65rem;
  border-radius: 8px;
  font-size: var(--text-sm);
  color: var(--fg-soft);
  text-decoration: none;
}

.mnav__nav a[aria-current="page"] {
  color: var(--teal);
}

.mnav__nav a:hover,
.mnav__nav a:focus-visible {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--fg);
}

.pagehead {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-2);
  max-width: min(var(--shell), 100%);
}

.pagehead h1 {
  max-width: 54ch;
}

.pagehead__lede {
  margin-top: var(--sp-4);
  font-size: var(--text-lg);
  color: var(--fg);
  max-width: 72ch;
}

.pagehero {
  margin: var(--sp-5) auto 0;
}

.pagehero__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-400);
}

.pagehero__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.pagehero__flag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  background: color-mix(in srgb, var(--ink-000) 72%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  backdrop-filter: blur(6px);
}

.pagehero figcaption {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--fg-mute);
  max-width: 78ch;
}

.mlist {
  display: grid;
  gap: 0;
  max-width: 84ch;
}

.mlist li {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  color: var(--fg-soft);
  line-height: 1.65;
}

.mlist li:last-child {
  border-bottom: 1px solid var(--line);
}

.mlist strong {
  color: var(--fg);
  font-weight: 600;
}

.microcopy--wide {
  margin-top: var(--sp-5);
  max-width: 84ch;
  line-height: 1.65;
}

.gsingle {
  margin: 0;
}

.gsingle__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-400);
}

.gsingle__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.gsingle figcaption {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: 1.65;
  max-width: 78ch;
}

.band--checkout {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20, 69, 63, 0.18), transparent 70%);
}

/* Footer checkout rail */
.fco {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.fco__title {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 600;
}

.fco__lead {
  margin-top: 0.35rem;
  font-size: var(--text-sm);
  color: var(--fg-soft);
  max-width: 56ch;
}

.fco__list {
  display: grid;
  gap: var(--sp-3);
}

.fco__link {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 2.2rem 0.85rem 0.95rem;
  position: relative;
  min-height: 56px;
  align-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--teal) 6%, transparent);
  text-decoration: none;
}

.fco__link:hover,
.fco__link:focus-visible {
  background: color-mix(in srgb, var(--teal) 13%, transparent);
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line-strong));
}

.fco__link .ico {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--teal);
}

.fco__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg);
}

.fco__meta {
  font-size: var(--text-sm);
  color: var(--fg-mute);
}

.fco__note {
  font-size: var(--text-xs);
  color: var(--fg-mute);
  line-height: 1.6;
  max-width: 78ch;
}

.site-footer__nav--legal {
  margin-top: 0.35rem;
  opacity: 0.86;
}

@media (min-width: 44rem) {
  .fco__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 56rem) {
  .mnav {
    display: none;
  }

  .pagehead {
    padding-top: var(--sp-7);
  }

  .fco {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--sp-6);
  }

  .fco__note {
    grid-column: 2;
    margin-top: -0.35rem;
  }
}

/* Compact mobile header: keep nav + checkout CTA on one line */
@media (max-width: 34rem) {
  .site-header__inner,
  .site-header__controls {
    gap: 0.5rem;
  }

  .site-header__inner .btn--sm {
    white-space: nowrap;
    padding: 0.6rem 0.8rem;
  }

  .brand__mark {
    width: 34px;
    height: 34px;
  }

  .brand__word {
    font-size: 1rem;
  }

  .mnav__btn {
    padding: 0.45rem 0.55rem;
  }
}

@media (max-width: 21rem) {
  .mnav__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 22rem) {
  .site-header__inner {
    gap: 0.4rem;
  }

  .site-header__controls {
    gap: 0.4rem;
  }

  .brand__mark {
    width: 30px;
    height: 30px;
  }

  .brand__word {
    font-size: 0.9375rem;
  }

  .site-header__inner .btn--sm {
    padding: 0.6rem 0.7rem;
    font-size: 0.8125rem;
  }
}

/* ------------- 18. HERO — REFERENCE COMPOSITION (BRAND SPLIT) ------------ */
/* Left half reads as the dull existing yard, right half as the illuminated
   concept. The dimming is a presentation treatment on the same photograph and
   is disclosed in the hero caption. */
.hero__half--before img {
  filter: saturate(0.6) contrast(1.06) brightness(0.62);
}

.hero__half--before::after {
  background: linear-gradient(200deg, rgba(6, 26, 34, 0.42), rgba(2, 12, 16, 0.62));
}

.hero__half--after img {
  filter: saturate(1.14) contrast(1.05) brightness(1.05);
}

.hero__half--after::after {
  background: radial-gradient(56% 46% at 62% 60%, rgba(244, 201, 135, 0.16), transparent 72%),
    linear-gradient(180deg, rgba(3, 16, 15, 0.26), rgba(3, 16, 15, 0.02) 46%, rgba(3, 16, 15, 0.46));
}

/* Precise mint divider */
.hero__seam {
  width: 3px;
  transform: translateX(-1.5px);
  background: linear-gradient(
    180deg,
    rgba(63, 224, 193, 0.15),
    rgba(150, 245, 222, 0.9) 14%,
    #b6ffec 50%,
    rgba(150, 245, 222, 0.9) 86%,
    rgba(63, 224, 193, 0.15)
  );
  box-shadow: 0 0 14px 1px rgba(63, 224, 193, 0.55), 0 0 42px 4px rgba(63, 224, 193, 0.22);
}

/* Premium dark-teal frame around the split */
.hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(63, 224, 193, 0.22),
    inset 0 0 90px 30px rgba(2, 12, 14, 0.55);
}

/* BEFORE / AFTER labels — single pair, larger, reference-style */
.stamp b {
  font-size: clamp(0.9375rem, 0.7rem + 1.1vw, 1.5rem);
  letter-spacing: 0.16em;
}

.stamp--before b {
  color: #9fd7d0;
}

.stamp--after b {
  color: #7ff0d3;
}

.vision-mark {
  width: clamp(132px, 36vw, 208px);
  filter: drop-shadow(0 0 26px rgba(63, 224, 193, 0.45));
}

@media (min-width: 62rem) {
  .hero__copy {
    align-content: center;
  }

  .hero__copy .shell {
    transform: translateY(-2.5%);
  }

  .vision-mark {
    width: clamp(168px, 15vw, 236px);
  }

  .hero__labels {
    inset: auto 0 7% 0;
  }

}

@media (min-width: 62rem) {
}

/* ------------- 19. PRE-FOOTER CONVERSION BAND + SHARED FOOTER ------------ */
.prefooter {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-100) 0%, var(--ink-000) 100%);
}

.prefooter__inner {
  display: grid;
  gap: var(--sp-6) var(--sp-8);
  align-items: start;
}

@media (min-width: 62rem) {
  .prefooter__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

.prefooter__head h2 {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.15;
  color: var(--fg-warm);
}

.prefooter__head > p {
  margin-top: var(--sp-4);
  color: var(--fg-soft);
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 54ch;
}

.prefooter__note {
  margin-top: var(--sp-4);
  font-size: var(--text-xs) !important;
  color: var(--fg-mute) !important;
  line-height: 1.65;
  max-width: 62ch;
}

.prefooter__note a {
  color: var(--teal);
}

.prefooter__plans {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 44rem) {
  .prefooter__plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.plan {
  height: 100%;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink-300) 60%, transparent);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.plan:hover,
.plan:focus-visible {
  border-color: var(--teal);
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--ink-400) 62%, transparent);
}

.plan__name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-warm);
  line-height: 1.3;
}

.plan__name .ico {
  width: 13px;
  height: 13px;
  flex: none;
  opacity: 0.7;
}

.plan__price {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--teal);
  line-height: 1.2;
}

.plan__meta {
  font-size: var(--text-xs);
  color: var(--fg-mute);
  line-height: 1.5;
}

/* --- shared footer --- */
.site-footer {
  padding-block: var(--sp-7) var(--sp-5);
  border-top: 1px solid var(--line-strong);
  background: var(--ink-000);
}

.sf__inner {
  display: grid;
  gap: var(--sp-6);
}

.sf__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-6);
}

@media (min-width: 34rem) {
  .sf__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf__col--brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .sf__grid {
    grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-7);
  }

  .sf__col--brand {
    grid-column: auto;
  }
}

.sf__col {
  min-width: 0;
}

.sf__col--brand {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  max-width: 34rem;
}

.sf__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 0;
}

.sf__brand .brand__mark {
  width: 36px;
  height: 36px;
}

.sf__descriptor {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-warm);
  line-height: 1.45;
}

.sf__tagline {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: 1.6;
  max-width: 44ch;
}

.sf__h {
  margin: 0 0 var(--sp-3);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.sf__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.1rem;
  font-size: var(--text-sm);
}

.sf__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 34px;
  color: var(--fg-warm);
  text-decoration: none;
  line-height: 1.45;
  transition: color var(--dur) var(--ease);
}

.sf__list a:hover,
.sf__list a:focus-visible {
  color: var(--teal);
}

.sf__list a[aria-current="page"] {
  color: var(--teal);
}

.sf__list .ico {
  width: 12px;
  height: 12px;
  flex: none;
  opacity: 0.7;
}

.sf__fine {
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--fg-mute);
  line-height: 1.6;
  max-width: 34ch;
}

.sf__base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.sf__copy {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fg-soft);
}

.sf__legalnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--sp-5);
}

.sf__legalnav a {
  font-size: var(--text-xs);
  color: var(--fg-soft);
  text-decoration: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

.sf__legalnav a:hover,
.sf__legalnav a:focus-visible {
  color: var(--teal);
}

.sf__legal {
  margin: 0;
  flex: 1 1 100%;
  font-size: var(--text-xs);
  color: var(--fg-mute);
  line-height: 1.6;
  max-width: 118ch;
}

@media (max-width: 47.99rem) {
  .sf__list a {
    min-height: 42px;
  }

  .sf__base {
    gap: var(--sp-3);
  }
}

/* ------------- 20. AUTOMATIC BEFORE / CONCEPT TRANSITIONS --------------- */
.xfade {
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.xfade__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: var(--ink-400);
  box-shadow: 0 26px 64px -34px rgba(0, 0, 0, 0.8);
  isolation: isolate;
}

.xfade__layer {
  inset: 0;
  margin: 0;
}

.xfade__layer--before {
  position: relative;
}

.xfade__layer--after {
  position: absolute;
  clip-path: inset(0 100% 0 0);
  opacity: 0.4;
  transition: clip-path 1150ms var(--ease), opacity 820ms var(--ease);
  will-change: clip-path;
}

.xfade.is-after .xfade__layer--after {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.xfade__layer picture,
.xfade__layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xfade__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--teal);
  box-shadow: 0 0 16px 1px color-mix(in srgb, var(--teal) 55%, transparent);
  transition: left 1150ms var(--ease);
  z-index: 3;
  pointer-events: none;
}

.xfade.is-after .xfade__edge {
  left: calc(100% - 2px);
}

.xfade__label {
  position: absolute;
  top: 0.85rem;
  z-index: 4;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  background: color-mix(in srgb, var(--ink-000) 74%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  backdrop-filter: blur(6px);
}

.xfade__label--before {
  left: 0.85rem;
}

.xfade__label--after {
  right: 0.85rem;
  border-color: color-mix(in srgb, var(--teal) 55%, var(--line-strong));
  color: var(--teal-100, var(--fg));
}

.xfade__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem var(--sp-4);
}

.xfade figcaption {
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: 1.6;
  max-width: 78ch;
}

.xfade figcaption b {
  color: var(--fg);
  font-weight: 600;
}

.xfade__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.35rem 0.8rem;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.xfade__toggle:hover,
.xfade__toggle:focus-visible {
  color: var(--teal);
  border-color: var(--teal);
}

.xfade__toggle .ico {
  width: 14px;
  height: 14px;
}

/* Static fallback: both frames side by side, no motion. */
.xfade.is-static .xfade__stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.xfade.is-static .xfade__layer--after {
  position: relative;
  clip-path: none;
  opacity: 1;
  transition: none;
}

.xfade.is-static .xfade__edge {
  display: none;
}

.xfade.is-static .xfade__label--after {
  right: auto;
  left: calc(50% + 0.85rem);
}

@media (prefers-reduced-motion: reduce) {
  .xfade__layer--after,
  .xfade__edge {
    transition: none;
  }
}

/* Lead treatment: transition beside its explanation on wide screens. */
.xfade-lead {
  display: grid;
  gap: var(--sp-5) var(--sp-7);
  align-items: center;
}

@media (min-width: 62rem) {
  .xfade-lead {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--sp-7) var(--sp-8);
  }
}

.xfade-lead__body h2 {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.15;
}

.xfade-lead__body p {
  margin-top: var(--sp-4);
  color: var(--fg-soft);
  line-height: 1.7;
  max-width: 66ch;
}

.xfade--wide {
  margin-top: var(--sp-6);
}

/* --------------------- 21. DESIGN TYPE PAGES + LINKS -------------------- */
.mnav__h {
  margin: var(--sp-4) 0 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.mnav__panel > .mnav__h:first-child {
  margin-top: 0;
}

.typelinks {
  margin-top: var(--sp-5);
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-3);
}

.typelinks a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink-300) 55%, transparent);
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.typelinks a:hover,
.typelinks a:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-2px);
}

.typelinks .ico {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.8;
}

.typebody {
  max-width: var(--measure);
}

.typebody h2 {
  margin-top: var(--sp-7);
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.2;
}

.typebody h3 {
  margin-top: var(--sp-5);
  font-size: 1.0625rem;
  font-weight: 600;
}

.typebody p {
  margin-top: var(--sp-4);
  color: var(--fg-soft);
  line-height: 1.7;
}

.typebody a {
  color: var(--teal);
}

.typebody ul {
  margin-top: var(--sp-4);
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  color: var(--fg-soft);
  line-height: 1.65;
}

.typecols {
  display: grid;
  gap: var(--sp-5) var(--sp-7);
}

@media (min-width: 60rem) {
  .typecols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .typecols > * {
    max-width: 68ch;
  }
}

/* Category tiles become links to the seven design pages. */
.cat {
  position: relative;
}

.cat__a {
  color: var(--fg);
  text-decoration: none;
}

.cat__a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.cat:hover .cat__a,
.cat:focus-within .cat__a {
  color: var(--teal);
}

.cat:hover .cat__fig picture,
.cat:focus-within .cat__fig picture {
  border-color: var(--teal);
}

.cat__fig picture {
  transition: border-color var(--dur) var(--ease);
}

/* ------------------- 22. APP PROMOTION BAND + DEVICE FRAMES -------------- */
.appcta {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(1100px 420px at 78% 30%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 70%),
    var(--ink-100);
}

.appcta__inner {
  display: grid;
  gap: var(--sp-6) var(--sp-8);
  align-items: center;
}

@media (min-width: 62rem) {
  .appcta__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.appcta__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid color-mix(in srgb, var(--teal) 45%, var(--line-strong));
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 8%, transparent);
}

.appcta__status--live {
  color: var(--ink-000);
  background: var(--teal);
  border-color: var(--teal);
}

.appcta__body h2 {
  margin-top: var(--sp-4);
  font-family: var(--serif);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.08;
  color: var(--fg-warm);
  max-width: 26ch;
}

.appcta__lede {
  margin-top: var(--sp-4);
  color: var(--fg-soft);
  font-size: var(--text-lg);
  line-height: 1.65;
  max-width: 58ch;
}

.appcta__actions {
  margin-top: var(--sp-5);
}

.appcta__note {
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--fg-mute);
  line-height: 1.65;
  max-width: 62ch;
}

.appcta__art {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
}

.appcta__disclaimer {
  font-size: var(--text-xs);
  color: var(--fg-mute);
  line-height: 1.6;
  text-align: center;
  max-width: 56ch;
}

.phones {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0.55rem;
  width: 100%;
  max-width: 40rem;
}

.phone {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.phone__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 844;
  border-radius: clamp(12px, 3vw, 22px);
  border: 2px solid color-mix(in srgb, var(--teal) 22%, #0b1a19);
  background: linear-gradient(180deg, var(--ink-200), var(--ink-000));
  box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(150, 226, 212, 0.08);
  overflow: hidden;
}

.phone--lead .phone__frame {
  transform: translateY(-1.4rem) scale(1.05);
  border-color: color-mix(in srgb, var(--teal) 38%, #0b1a19);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.95), 0 0 44px -18px var(--teal-glow);
}

.phone__notch {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 5px;
  border-radius: 999px;
  background: rgba(3, 16, 15, 0.9);
  border: 1px solid rgba(150, 226, 212, 0.14);
}

.phone__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone__plate {
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.35rem;
  padding: 1rem 0.6rem;
  text-align: center;
}

.phone__mark {
  width: 34px;
  height: 34px;
  color: var(--teal);
}

.phone__word {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-warm);
}

.phone__label {
  font-size: 0.62rem;
  color: var(--fg-soft);
  line-height: 1.35;
}

.phone__soon {
  margin-top: 0.2rem;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.4;
}

.phone__cap {
  font-size: var(--text-xs);
  color: var(--fg-mute);
  text-align: center;
  line-height: 1.4;
}

.phone--lead .phone__cap {
  color: var(--fg-soft);
}

/* Compact variant for secondary and legal pages. */
.appcta--compact {
  padding-block: var(--sp-7);
}

.appcta--compact .appcta__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

@media (min-width: 62rem) {
  .appcta--compact .appcta__inner {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
  }
}

.appcta--compact .appcta__body h2 {
  font-size: var(--text-xl);
  max-width: 40ch;
}

.appcta--compact .appcta__body p {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--fg-mute);
  line-height: 1.6;
  max-width: 72ch;
}

.appcta--compact .appcta__actions {
  margin-top: 0;
}

@media (max-width: 26rem) {
  .phone__soon {
    display: none;
  }

  .phone__cap {
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone--lead .phone__frame {
    transform: translateY(-0.8rem);
  }
}

/* ---- 23. QR BLOCK, DESIGN-TYPE NAV, DOWNLOAD PAGE, SHOWCASE, FILTERS ---- */
.appqr {
  display: none;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink-200) 70%, transparent);
}

@media (min-width: 48rem) {
  .appqr { display: flex; }
}

.appqr__img {
  width: 104px;
  height: 104px;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  flex: 0 0 auto;
}

.appqr__cap {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-warm);
  line-height: 1.4;
}

.appqr__cap span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--fg-mute);
}

.appcta__side { display: grid; gap: var(--sp-4); justify-items: start; }
.appcta__art .appqr { margin-top: var(--sp-2); }

/* Design-types disclosure in the desktop header */
.dtnav { position: relative; }

.dtnav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  list-style: none;
  color: var(--fg-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.35rem 0;
  transition: color var(--t-fast) var(--e-out);
}

.dtnav__btn::-webkit-details-marker { display: none; }
.dtnav__btn:hover, .dtnav[open] .dtnav__btn { color: var(--teal); }
.dtnav--current .dtnav__btn { color: var(--teal); }

.dtnav__chev {
  width: 14px;
  height: 14px;
  transition: transform var(--t-fast) var(--e-out);
}

.dtnav[open] .dtnav__chev { transform: rotate(180deg); }

.dtnav__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 19rem;
  display: grid;
  gap: 0.15rem;
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink-100) 96%, #000);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.95);
}

.dtnav__h {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 0.35rem;
}

.dtnav__panel a {
  padding: 0.42rem 0.5rem;
  border-radius: 8px;
  color: var(--fg-soft);
  font-size: var(--text-sm);
  text-decoration: none;
}

.dtnav__panel a:hover,
.dtnav__panel a:focus-visible {
  color: var(--fg-warm);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}

.dtnav__panel a[aria-current="page"] { color: var(--teal); }

.dtnav__all {
  margin-top: 0.4rem;
  padding-top: 0.6rem !important;
  border-top: 1px solid var(--line);
  font-size: var(--text-xs) !important;
  color: var(--teal) !important;
}

/* Hero CTA tiering */
.hero__actions--tiered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.btn--lg {
  padding: 0.95rem 1.5rem;
  font-size: var(--text-base);
}

.hero__plain {
  margin-left: 0.5rem;
  font-size: var(--text-sm);
  color: var(--fg-soft);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--teal) 45%, transparent);
  text-underline-offset: 3px;
}

.hero__plain:hover { color: var(--teal); }

.hero__reassure {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
}

/* Download page hero */
.dlhero { display: grid; gap: var(--sp-6); align-items: center; }

@media (min-width: 58rem) {
  .dlhero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
}

.dlhero__body h2 {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.14;
  margin-top: var(--sp-4);
  color: var(--fg-warm);
  max-width: 30ch;
}

.dlhero__body p { margin-top: var(--sp-4); color: var(--fg-soft); line-height: 1.7; max-width: 62ch; }
.dlhero__body .cta-row { margin-top: var(--sp-5); }

.dlhero__qr {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  text-align: center;
}

.dlhero__qr img {
  width: min(15rem, 100%);
  height: auto;
  background: #fff;
  padding: 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

.dlhero__qr figcaption {
  font-size: var(--text-xs);
  color: var(--fg-mute);
  line-height: 1.6;
  max-width: 30ch;
}

/* Filter chips (Community Showcase + Gallery) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-5);
}

.chips--role { margin-top: 0.6rem; }

.chip {
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg-soft);
  transition: color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out),
    background-color var(--t-fast) var(--e-out);
}

.chip:hover { color: var(--fg-warm); border-color: color-mix(in srgb, var(--teal) 50%, var(--line-strong)); }

.chip.is-on {
  color: var(--ink-000);
  background: var(--teal);
  border-color: var(--teal);
  font-weight: 600;
}

.chips__count {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--fg-mute);
}

/* Showcase cards */
.sccards {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 58rem) {
  .sccards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sccard {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ink-100) 80%, transparent);
}

.sccard[hidden] { display: none; }

.sccard__fig { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; }
.sccard__fig img { display: block; width: 100%; height: auto; }

.sccard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--fg-mute);
}

.sccard__tag {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--teal) 40%, var(--line-strong));
  color: var(--teal);
  font-weight: 600;
}

.sccard__body h3 {
  margin-top: var(--sp-3);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-warm);
}

.sccard__dl {
  margin: var(--sp-4) 0 0;
  display: grid;
  gap: 0.55rem 1rem;
  font-size: var(--text-sm);
}

@media (min-width: 34rem) {
  .sccard__dl { grid-template-columns: 11rem minmax(0, 1fr); }
}

.sccard__dl dt {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.sccard__dl dd { margin: 0; color: var(--fg-soft); line-height: 1.6; }

.sccard__more { margin-top: var(--sp-4); font-size: var(--text-sm); }
.sccard__more a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--teal); }
.sccard__more .ico { width: 15px; height: 15px; }

/* Technique spotlight */
.techs {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 46rem) { .techs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 74rem) { .techs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tech {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink-200) 55%, transparent);
}

.tech h3 { font-size: var(--text-base); font-weight: 600; color: var(--fg-warm); }
.tech p { margin-top: 0.6rem; font-size: var(--text-sm); color: var(--fg-soft); line-height: 1.65; }

/* Submit block */
.scsubmit { display: grid; gap: var(--sp-6); align-items: start; }

@media (min-width: 58rem) {
  .scsubmit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.scsubmit h2 {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  margin-top: var(--sp-3);
  color: var(--fg-warm);
}

.scsubmit p { margin-top: var(--sp-4); color: var(--fg-soft); line-height: 1.7; max-width: 60ch; }
.scsubmit__what { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ink-100) 80%, transparent); }
.scsubmit__what h3 { font-size: var(--text-base); font-weight: 600; color: var(--fg-warm); }
.scsubmit__what .mlist { margin-top: var(--sp-3); }

/* Gallery items grid */
.gitems {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 58rem) { .gitems { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gitem {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ink-100) 78%, transparent);
}

.gitem[hidden] { display: none; }
.gitem__fig { margin: 0; }
.gitem__frame { position: relative; border-radius: var(--r-md); overflow: hidden; }
.gitem__frame img { display: block; width: 100%; height: auto; }
.gitem__fig figcaption { margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--fg-soft); line-height: 1.65; }

.gitem__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--fg-mute);
}

.gitem__more { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: var(--text-sm); }
.gitem__more a { color: var(--teal); }
.mlist--key strong { color: var(--fg-warm); }

/* Steps + minis (download page) */
.step__n {
  font-family: var(--serif);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--teal);
  min-width: 2ch;
}

.minis {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 46rem) { .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 74rem) { .minis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mini {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink-200) 55%, transparent);
}

.mini h3 { font-size: var(--text-base); font-weight: 600; color: var(--fg-warm); }
.mini p { margin-top: 0.5rem; font-size: var(--text-sm); color: var(--fg-soft); line-height: 1.6; }

/* ------ 24. MOBILE MENU — FULL-WIDTH OPAQUE SHEET (overrides §17) ------- */
.mnav { position: static; }

.mnav__btn {
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
}

.mnav__bars {
  display: grid;
  gap: 3px;
  width: 16px;
}

.mnav__bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}

.mnav[open] .mnav__bars span:nth-child(2) { opacity: 0.35; }

/* The sheet: fixed, below the opaque header, full width, no page bleed */
.mnav__panel {
  position: fixed;
  top: var(--header-h, 4.25rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  background: #03100f;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mnav__sheet {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) max(1.5rem, env(safe-area-inset-right)) 0 max(1.5rem, env(safe-area-inset-left));
  padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.mnav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: 0.35rem;
}

.mnav__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.mnav__close {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--ink-200) 70%, transparent);
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: 600;
}

.mnav__close svg { width: 18px; height: 18px; }
.mnav__close:focus-visible { box-shadow: var(--focus); }

.mnav__group {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink-100) 70%, transparent);
  padding: 0.25rem 0.5rem;
}

.mnav__gbtn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 0.35rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: 650;
  color: var(--fg-warm);
}

.mnav__gbtn::-webkit-details-marker { display: none; }
.mnav__gbtn:focus-visible { box-shadow: var(--focus); border-radius: 8px; }

.mnav__count {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--teal);
}

.mnav__gbtn .mnav__chev { width: 18px; height: 18px; color: var(--teal); }
.mnav__group[open] .mnav__gbtn .mnav__chev { transform: rotate(180deg); }

.mnav__h {
  margin: var(--sp-3) 0 0.2rem;
  padding: 0 0.35rem;
}

.mnav__nav { display: grid; gap: 0; }

.mnav__nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0.55rem 0.35rem;
  border-radius: 10px;
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--fg-soft);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.mnav__nav a:last-child { border-bottom: 0; }

.mnav__nav--types a {
  padding-left: 0.6rem;
  color: var(--fg);
  font-weight: 550;
}

.mnav__nav a[aria-current="page"] {
  color: var(--teal);
  font-weight: 650;
}

/* The drawer's action stack. Try Free, Corporate Pricing and Share are the
   three things the header used to carry; here they get the full sheet width
   and a real label instead of a pill squeezed in beside the hamburger. */
.mnav__actions {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--sp-4);
}

.mnav__cta {
  justify-content: center;
  width: 100%;
  min-height: 52px;
}

.mnav__foot {
  margin-top: 0.6rem;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
}

/* header stays above the sheet and stays opaque while the menu is open */
.site-header { z-index: 100; }
.mnav-open .site-header { background: #03100f; }
.mnav-open, .mnav-open body { overflow: hidden; }

@media (min-width: 30rem) {
  .mnav__sheet { padding-left: max(2rem, env(safe-area-inset-left)); padding-right: max(2rem, env(safe-area-inset-right)); }
}

@media (max-width: 20rem) {
  .mnav__label { display: none; }
  .mnav__sheet { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Summary children must not steal taps from the summary itself */
.mnav__btn > *, .mnav__gbtn > * { pointer-events: none; }
.mnav__close > * { pointer-events: none; }

/* The header's backdrop-filter creates a containing block that would trap the
   fixed menu sheet inside the 65px header bar. Below the desktop nav breakpoint
   (where the sheet lives) the header is opaque instead of glass. */
@media (max-width: 55.999rem) {
  .site-header,
  .site-header.is-stuck {
    background: #03100f;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Desktop nav: never wrap labels; tighten the gap on mid-size laptops */
.section-nav a,
.dtnav__btn,
.site-header .btn--sm {
  white-space: nowrap;
}

/* Label sizes stay at the base --text-sm everywhere; the bands below buy room
   with gaps and by folding Showcase away, never by shrinking the type. (The
   font-size these blocks used to set was inert anyway — `.section-nav a` is the
   more specific selector and always won.) */
@media (min-width: 56rem) and (max-width: 68rem) {
  .section-nav {
    gap: 0.7rem;
  }

  .site-header__controls {
    gap: 0.7rem;
  }

  .brand__descriptor {
    display: none;
  }
}

/* Showcase is the one nav item with a home elsewhere — it is in the footer and
   in the Design types panel — so it is what folds away when the bar is tight.
   It carries the whole cost of the longer "Corporate Pricing" label, which is
   the trade: the word Corporate has to be legible in the bar, Showcase does not
   have to be in two places at once.

   Two tight bands, both measured on a cold load rather than a resize, because
   resizing an already-laid-out bar hides the overflow:
     56-68rem  the two-row bar, tightest around 1024-1072px
     75-84rem  the single-row bar, which does not fit its own defaults until the
               mid-1300s; the upper bound is set against a face noticeably wider
               than Switzer so a substituted font cannot push it over either. */
@media (min-width: 56rem) and (max-width: 68rem),
       (min-width: 75rem) and (max-width: 84rem) {
  .section-nav a[href="community-showcase.html"] {
    display: none;
  }
}

@media (min-width: 75rem) and (max-width: 84rem) {
  .section-nav {
    gap: 0.7rem;
  }

  .site-header__controls {
    gap: 0.7rem;
  }
}

/* ---- 25. REAL 3-PHONE APP COMPOSITE (replaces illustrative frames) ------ */
.appshot {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
}

.appshot picture {
  display: block;
  width: 100%;
}

.appshot img {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  filter: drop-shadow(0 28px 46px rgba(3, 16, 15, 0.55));
}

.appshot figcaption {
  max-width: 34rem;
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-mute);
}

.appshot--sm img {
  max-width: 22rem;
}

.appshot--sm figcaption {
  font-size: var(--text-xs);
}

@media (min-width: 56rem) {
  .appshot img {
    max-width: 100%;
  }

  .appshot--sm img {
    max-width: 20rem;
  }
}

/* ---- 26. PRICING LADDER: Starter tier + request-link states ------------- */
.tier__note {
  margin-top: 0.6rem;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--fg-mute);
}

.plan--request .plan__meta {
  color: var(--lume);
}

.prefooter__starter {
  margin-top: var(--sp-3);
  max-width: 46rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--fg-mute);
}


/* ---- 27. NATURAL LIGHTING BEFORE/AFTER REVEAL ---------------------------
   No wipe, nothing draggable, and nothing drawn on the photograph. The concept
   warms up out of the before frame the way a yard does when the light changes,
   so one sequence reads correctly on a pool, a court, a planted yard and a
   house facade alike.

   --dawn (0..1) is written by script.js and is the only input. Two things ride
   on it: a soft diagonal mask that carries the concept in from the lit corner,
   and a warm wash over the frame that peaks mid-sequence and settles.          */
.hero,
.cmp__stage,
.xfade__stage {
  cursor: default;
}

.hero.is-lit .hero__half--after,
.cmp.is-lit .cmp__layer--after,
.xfade.is-lit .xfade__layer--after {
  clip-path: none;
  opacity: 1;
  transition: none;
  /* The soft edge is wide on purpose: a narrow one reads as a wipe, which is
     the effect this replaces. */
  -webkit-mask-image: linear-gradient(
    118deg,
    #000 calc(var(--dawn, 0) * 190% - 62%),
    transparent calc(var(--dawn, 0) * 190% - 4%));
  mask-image: linear-gradient(
    118deg,
    #000 calc(var(--dawn, 0) * 190% - 62%),
    transparent calc(var(--dawn, 0) * 190% - 4%));
}

.hero.is-resolved .hero__half--after,
.cmp.is-resolved .cmp__layer--after,
.xfade.is-resolved .xfade__layer--after {
  -webkit-mask-image: none;
  mask-image: none;
}

/* The before photo sits whole underneath while the light comes up. */
.hero.is-lit .hero__half--before,
.cmp.is-lit .cmp__layer--before {
  clip-path: none;
}

.hero.is-lit .hero__seam,
.cmp.is-lit .cmp__seam,
.xfade.is-lit .xfade__edge {
  opacity: 0;
}

/* The warm wash. Golden low sun from the same corner the mask travels from,
   strongest at the midpoint and gone by the end, so the frame lands on the
   concept's own colour rather than a tint. */
.hero.is-lit .hero__stage::after,
.cmp.is-lit .cmp__stage::after,
.xfade.is-lit .xfade__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(sin(var(--dawn, 0) * 180deg) * 0.5);
  background:
    radial-gradient(78% 96% at 84% 8%, rgba(255, 214, 152, 0.5), transparent 62%),
    radial-gradient(96% 74% at 16% 96%, rgba(63, 224, 193, 0.22), transparent 68%);
}

/* A restrained breath on the frame while the light is moving. */
.hero.is-lighting .hero__stage,
.cmp.is-lighting .cmp__stage,
.xfade.is-lighting .xfade__stage {
  box-shadow: 0 0 0 1px rgba(63, 224, 193, calc(0.16 + sin(var(--dawn, 0) * 180deg) * 0.28)),
    0 26px 64px -34px rgba(0, 0, 0, 0.8);
}

/* --- prefers-reduced-motion ----------------------------------------------
   Nothing moves and nothing fades: the concept is simply already resolved
   beside the before photo, exactly as it looks when the sequence finishes. */
@media (prefers-reduced-motion: reduce) {
  .hero__stage::after,
  .cmp__stage::after,
  .xfade__stage::after {
    display: none;
  }

  .hero.is-static .hero__seam,
  .cmp.is-static .cmp__seam {
    transition: none;
    box-shadow: none;
  }

  .hero.is-static .hero__half--after,
  .cmp.is-static .cmp__layer--after,
  .xfade.is-static .xfade__layer--after {
    -webkit-mask-image: none;
    mask-image: none;
    transition: none;
  }
}

/* --- labels follow the reveal -------------------------------------------- */
/* While the light is coming up the frame is not split, so the Before badge
   dims as the After badge comes up. Both stay legible at all times. */
.hero.is-lit .stamp--before,
.cmp.is-lit .cmp__tag--before,
.xfade.is-lit .xfade__label--before {
  opacity: max(0.3, calc(1 - var(--dawn, 0)));
  transition: opacity 200ms var(--ease);
}

.hero.is-lit .stamp--after,
.cmp.is-lit .cmp__tag--after,
.xfade.is-lit .xfade__label--after {
  opacity: max(0.35, var(--dawn, 0));
  transition: opacity 200ms var(--ease);
}


/* ------------------- 28. PHONE MEDIA FRAMING (visualizations) ------------------- */
/* Disclosure chips and long qualifiers now live outside the image. */
.cmp__flag--out,
.cat__flag--out,
.pagehero__flag--out {
  position: static;
  inset: auto;
  pointer-events: auto;
  backdrop-filter: none;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 201, 135, 0.38);
  background: rgba(244, 201, 135, 0.07);
  color: var(--lume);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
}

.cmp__flag--real {
  border-color: rgba(63, 224, 193, 0.4);
  background: rgba(63, 224, 193, 0.08);
  color: var(--teal);
}

.pagehero__flag--out {
  margin-right: 0.45rem;
  vertical-align: 0.05em;
  white-space: normal;
}

.gitem__meta .cat__flag--out {
  white-space: normal;
}

.cmp__reveal {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.9rem;
}

/* Disclosure first, control second. On phones the row wraps rather than
   truncating the disclosure, since the chip is the honest label for the image. */
.cmp__reveal .cmp__flag--out {
  min-width: 0;
  flex: 0 1 auto;
}

@media (max-width: 34rem) {
  .cmp__reveal {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .cmp__reveal .cmp__flag--out {
    flex: 1 1 100%;
    white-space: normal;
  }
}

@media (max-width: 40rem) {
  /* Media runs to the viewport edges whatever the band padding happens to be.
     The 50% - 50vw breakout is independent of how deeply the figure is nested,
     which the earlier padding-matched negative margin was not. */
  .cmp__stage,
  .xfade__stage,
  .gitem__frame,
  .pagehero__frame {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* Taller frame: a phone shows far more of a yard in 4:5 than in 4:3. */
  .cmp__stage,
  .cmp--lighting .cmp__stage,
  .cmp--grade .cmp__stage,
  .xfade__stage,
  .gitem__frame {
    aspect-ratio: 4 / 5;
  }

  .pagehero__frame {
    aspect-ratio: 4 / 5;
  }

  .pagehero__frame img,
  .gitem__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Only tiny corner labels stay over the picture. */
  .tag__q {
    display: none;
  }

  .cmp__tag,
  .xfade__label {
    font-size: 0.58rem;
    padding: 0.22rem 0.5rem;
    letter-spacing: 0.08em;
  }

  .cmp__tag {
    bottom: 0.5rem;
  }

  .cmp__tag--before,
  .xfade__label--before {
    left: 0.5rem;
  }

  .cmp__tag--after,
  .xfade__label--after {
    right: 0.5rem;
  }

  .xfade__label {
    top: 0.5rem;
  }

  .xfade__toggle {
    min-height: 44px;
    padding-inline: 0.95rem;
  }

  .cmp__reveal,
  .xfade__foot {
    margin-top: 0.7rem;
  }

  .cmp figcaption,
  .xfade figcaption {
    margin-top: 0.55rem;
  }

  /* Phones keep only the word Before / After: the descriptive line is a text
     node inside .stamp, so it is collapsed rather than hidden with markup. */
  .stamp {
    font-size: 0;
    padding: 0.26rem 0.55rem;
    max-width: 7rem;
  }

  .stamp b {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 26rem) {
  .stamp b {
    font-size: 0.58rem;
  }

  .cmp__flag--out,
  .cat__flag--out {
    font-size: 0.58rem;
  }
}

/* ------------------- 29. FOUNDER'S SEAL ("DC Approved") ------------------- */
.sealnote {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--sp-5);
  align-items: start;
  margin: var(--sp-7) 0 var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(244, 201, 135, 0.07), transparent 60%),
    var(--ink-100);
}

/* figure carries a UA margin that was shrinking the seal inside its column */
.sealnote__figure {
  margin: 0;
}

.sealnote__seal {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}

.sealnote__h {
  margin: 0 0 var(--sp-3);
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.25;
}

.sealnote__body p {
  margin: 0 0 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--fg-soft);
}

.sealnote__body p:last-child {
  margin-bottom: 0;
}

.sealnote__body b {
  color: var(--fg);
  font-weight: 600;
}

.sealnote__caption {
  margin-top: 0.7rem;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
}

/* Restrained trust line beside the app status. */
.sealline {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.sealline__seal {
  flex: none;
  width: 56px;
  height: 56px;
  display: block;
}

.sealline__copy {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--fg-mute);
  max-width: 46ch;
}

.sealline__copy b {
  color: var(--fg-soft);
  font-weight: 600;
}

@media (max-width: 40rem) {
  .sealnote {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;
    padding: var(--sp-4);
  }

  .sealnote__figure {
    max-width: 9.5rem;
  }
}

/* ------------------- 30. SHARE + DESKTOP VIEW CONTROLS -------------------- */
.mnav__tools {
  display: grid;
  gap: 0.5rem;
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.toolbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
/* Share moved up into the action stack with Try Free and Corporate Pricing, and
   its status message and copy-link fallback came with it so the confirmation
   still appears beside the button that was pressed. `.toolbtn` sets
   min-height:44px, so this modifier has to stay after it to win. */
.toolbtn--share {
  width: 100%;
  min-height: 52px;
  font-weight: 600;
  border-color: rgba(63, 224, 193, 0.42);
  background: rgba(63, 224, 193, 0.06);
  color: var(--fg);
}


.toolbtn:hover {
  border-color: rgba(63, 224, 193, 0.5);
  color: var(--fg-warm);
}

.toolbtn .ico {
  width: 17px;
  height: 17px;
}

.toolnote {
  margin: 0.15rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--teal);
}

.toolmanual {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.toolmanual input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--ink-000);
  color: var(--fg);
  font-size: 0.75rem;
}

.sf__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--sp-4) 0 0;
}

.viewbar {
  position: sticky;
  top: 0;
  z-index: 95;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  background: var(--teal);
  color: #04211d;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.viewbar button {
  min-height: 36px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(4, 33, 29, 0.4);
  background: #04211d;
  color: var(--teal);
  font: inherit;
  cursor: pointer;
}

html[data-view="desktop"] .mnav {
  display: none;
}

/* ------------------- 31. FOUNDER ILLUSTRATION ("Darin Designs") ----------- */
.founderart {
  margin: 0 0 var(--sp-6);
  float: right;
  width: min(20rem, 42%);
  margin-left: var(--sp-6);
}

.founderart img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.founderart figcaption {
  margin-top: 0.7rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--fg-mute);
}

.founderart figcaption b {
  color: var(--fg-soft);
  font-weight: 600;
}

.foundertease {
  margin: var(--sp-7) 0 0;
}

.foundertease__link {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--ink-100);
  text-decoration: none;
  color: inherit;
}

.foundertease__link:hover {
  border-color: rgba(63, 224, 193, 0.45);
}

.foundertease__link img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.foundertease__body {
  display: grid;
  gap: 0.3rem;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--fg-soft);
}

.foundertease__body b {
  font-family: var(--serif);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--fg);
}

.foundertease__cta {
  color: var(--teal);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (max-width: 46rem) {
  .founderart {
    float: none;
    width: min(22rem, 100%);
    margin-left: 0;
    margin-inline: auto;
  }
}

@media (max-width: 30rem) {
  .foundertease__link {
    grid-template-columns: 5.5rem 1fr;
    gap: var(--sp-3);
  }
}

/* -------------- 32. SECONDARY IN-PAGE FIGURE (design-type pages) ----------- */
.pagefig {
  margin: var(--sp-7) auto 0;
}

.pagefig--flush {
  margin-top: var(--sp-5);
}

.pagefig figcaption {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--fg-mute);
  max-width: 78ch;
}

/* --------------------- 33. SURFACES EXAMPLE PAIR OF CARDS ----------------- */
.surfgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

.surfcard {
  margin: 0;
}

.surfcard .pagehero__frame {
  aspect-ratio: 4 / 3;
}

.surfcard .pagehero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.surfcard figcaption {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--fg-mute);
}

.surfcard .pagehero__flag--out {
  margin-right: 0.4rem;
}

@media (max-width: 46rem) {
  .surfgrid {
    gap: var(--sp-7);
  }
}

.surfgrid--four {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

.surfcard figcaption b {
  display: block;
  color: var(--fg-soft);
  font-weight: 600;
}

/* ------------- 34. HEADER 'SHARE THIS PAGE' CONTROL ---------------------- */
/* Visible in the initial header at every width. On phones it drops to its own
   slim second row so it never crowds the wordmark, Menu or the CTA. */
.hshare-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.hshare {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg-soft);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.hshare:hover {
  color: var(--fg);
  border-color: rgba(63, 224, 193, 0.55);
  background: rgba(63, 224, 193, 0.07);
}

.hshare:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  color: var(--fg);
}

.hshare[aria-busy="true"] {
  border-color: rgba(63, 224, 193, 0.55);
  color: var(--teal);
}

.hshare__ico {
  width: 16px;
  height: 16px;
  flex: none;
}

.hshare > * {
  pointer-events: none;
}

.hshare__flash {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 60;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(63, 224, 193, 0.4);
  background: #041917;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.hshare__msg {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--teal);
}

.hshare__manual {
  margin-top: 0.4rem;
}

.hshare__manual input {
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.75rem;
}

/* Phone and tablet: own row, right aligned, under the wordmark row. */
@media (max-width: 74.999rem) {
  /* Two fixed rows, not flex wrapping: the wordmark and the nav or Menu/CTA
     cluster always share row one and the share control always owns row two.
     Applies up to 1200px, where the desktop bar finally has room for it inline. */
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    row-gap: 0.1rem;
    padding-bottom: 0.4rem;
    min-height: 0;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .site-header__controls {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .hshare-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-end;
  }

  .hshare {
    min-height: 34px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 22rem) {
  .hshare {
    padding: 0.3rem 0.5rem;
    font-size: 0.6875rem;
  }
}

/* ---- Phone header: one tall bar, one hamburger ---------------------------
   Three stacked pills used to make the bar its own screenful and put a second
   and third tappable control beside the menu. The bar is now the brand and one
   hamburger, nothing else: Try Free, Corporate Pricing and Share all live
   inside the drawer, full width, where there is room to label them properly.
   The height that buys goes into the logo, which is the one thing a phone
   visitor should be able to read at a glance. ----------------------------- */
@media (max-width: 47.999rem) {
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.9rem;
    min-height: 88px;
  }

  .brand {
    gap: 0.7rem;
    min-width: 0;
  }

  .brand__mark {
    width: 52px;
    height: 52px;
  }

  .brand__word {
    font-size: 1.375rem;
    line-height: 1.1;
  }

  /* There is room for it now, and it says what the site is before the visitor
     has to open anything. */
  .brand__descriptor {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
  }

  .site-header__controls {
    gap: 0;
  }

  .mnav__btn {
    min-height: 56px;
    gap: 0.5rem;
    padding: 0 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .mnav__bars {
    width: 22px;
    gap: 4px;
  }

  .mnav__bars span {
    height: 2.5px;
  }

  .mnav__label {
    display: inline;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  /* Both moved into the drawer. */
  .site-header__controls > .btn--primary,
  .hshare-wrap {
    display: none;
  }

  /* Scrolled, the bar is floating over the content it belongs to, so it gives
     some of the height back. The logo stays legible. */
  .site-header.is-stuck .site-header__inner {
    padding-block: 0.5rem;
    min-height: 66px;
  }

  .site-header.is-stuck .brand__mark {
    width: 40px;
    height: 40px;
  }

  .site-header.is-stuck .brand__word {
    font-size: 1.125rem;
  }

  .site-header.is-stuck .brand__descriptor {
    display: none;
  }

  .site-header.is-stuck .mnav__btn {
    min-height: 48px;
  }

  /* The picture is the argument this page makes, so it gets the first screen.
     Taller than square reads as dominant, but every extra bit of height crops
     width off a 16:9 source, and the pool and the court sit near those edges —
     8/9 is the tallest ratio that still holds both inside the frame. */
  .hero__stage {
    aspect-ratio: 8 / 9;
    max-height: 62svh;
  }

  /* Decorative only, and the same mark already sits in the header. */
  .hero__copy .vision-mark {
    display: none;
  }

  /* The pair is stacked and each frame is captioned in the text beneath it, so
     the badges only cover the photograph they are labelling. */
  .hero__labels,
  .cmp__tag,
  .xfade__label {
    display: none;
  }
}

/* ---- The narrowest phones --------------------------------------------------
   At 320 the 52px mark and the 1.375rem wordmark together need more room than
   is left beside the hamburger, and the two boxes overlap. Everything gives a
   little rather than one thing giving a lot: the mark drops to the 44px tap
   size, the wordmark to the 20px legibility floor, and the hamburger keeps its
   text label on tighter padding. That clears the collision with room to spare
   and still reads as a logo. ------------------------------------------------- */
@media (max-width: 21.875rem) {
  .site-header__inner {
    gap: 0.5rem;
  }

  .brand {
    gap: 0.5rem;
  }

  .brand__mark {
    width: 44px;
    height: 44px;
  }

  .brand__word {
    font-size: 1.25rem;
  }

  .mnav__btn {
    padding: 0 0.6rem;
    gap: 0.4rem;
  }
}


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

/* Card grids: the 100vw breakout inside a grid cell is only exact when the cell
   itself spans the viewport, so on phones the grid breaks out and the captions
   carry the side padding. Keeps the mobile full-bleed rule without overflow. */
@media (max-width: 40rem) {
  .surfgrid {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .surfcard figcaption {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
}

/* ------------- 35. FREE PREVIEW EMAIL GATE ------------------------------- */
.gate {
  margin-top: var(--sp-6);
}

/* Honeypot: off-screen rather than display:none so bots still fill it, and
   hidden from assistive tech and from tab order. */
.gate__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.choice--opt {
  align-items: flex-start;
  margin-top: var(--sp-4);
  line-height: 1.55;
}

.gate__consent {
  margin-top: var(--sp-3);
}

.gate__window {
  margin-top: var(--sp-3);
  color: var(--fg-mute);
}

.gate__submit {
  margin-top: var(--sp-5);
  width: 100%;
}

.gate__submit[aria-disabled="true"],
.gate__submit[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.gate__submit[aria-busy="true"] .gate__spin {
  display: inline-block;
}

.gate__spin {
  display: none;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.45rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: gate-spin 0.7s linear infinite;
}

@keyframes gate-spin {
  to {
    transform: rotate(360deg);
  }
}

.gate__status,
.gate__alert,
.gate__manual {
  margin-top: var(--sp-4);
}

.gate__alert {
  color: var(--lume);
}

.gate__manual a {
  font-weight: 600;
}

.gate__offline {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
}

.gate__offline h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-lg);
}

.gate__offline p {
  margin: 0 0 var(--sp-3);
  color: var(--fg-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.gate__offline p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gate__spin {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.5;
  }
}

/* ------------- 36. FOUNDING PREVIEW MILESTONE BANNER --------------------- */
/* One quiet band above the page head. Illuminated teal on the dark surface,
   contour lines borrowed from the logo's topographic language, no shouting. */
.milestone {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 180% at 12% 0%, rgba(63, 224, 193, 0.14), rgba(63, 224, 193, 0) 62%),
    linear-gradient(180deg, rgba(63, 224, 193, 0.07), rgba(3, 16, 15, 0));
}

.milestone__inner {
  position: relative;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}

.milestone__topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--teal);
  opacity: 0.32;
  pointer-events: none;
  animation: milestone-drift 34s ease-in-out infinite alternate;
}

.milestone__sign {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.milestone__dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(63, 224, 193, 0.5);
  animation: milestone-pulse 3.6s ease-out infinite;
}

.milestone__line {
  position: relative;
  margin: 0.5rem 0 0;
  max-width: 46ch;
  color: var(--fg);
  font-family: var(--font-display, inherit);
  font-size: 1.0625rem;
  line-height: 1.5;
}

@media (min-width: 48rem) {
  .milestone__inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-5);
  }

  .milestone__line {
    margin-top: 0;
    max-width: 62ch;
    text-align: right;
    font-size: 1.125rem;
  }
}

@keyframes milestone-drift {
  from {
    transform: translate3d(-1.5%, 1px, 0) scaleY(1);
  }
  to {
    transform: translate3d(1.5%, -1px, 0) scaleY(1.04);
  }
}

@keyframes milestone-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(63, 224, 193, 0.45);
  }
  70% {
    box-shadow: 0 0 0 0.55rem rgba(63, 224, 193, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(63, 224, 193, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .milestone__topo,
  .milestone__dot {
    animation: none;
  }
}

/* ========================================================================== */
/* Persistent app bar                                                         */
/* Sits on every route. On phones it is a slim sticky bottom bar: still a
   full-width, 52px, large-finger target, but low enough that it reads as a
   footer rail rather than a second hero. It steps aside while the inline app
   section is on screen so only one app CTA is ever competing for the tap —
   see .is-shown below. Body padding-bottom reserves its height so it never
   overlaps the footer. On desktop it drops to a bottom-right card. */
.appbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 0.375rem 0.625rem calc(0.375rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(3, 16, 15, 0) 0%, rgba(3, 16, 15, 0.82) 45%, var(--ink-000) 100%);
  pointer-events: none;
}

.appbar__btn {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 52px;
  padding: 0.3125rem 0.875rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal);
  color: #032420;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 10px 28px -16px var(--teal-glow);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.appbar__label {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.005em;
}

.appbar__sub {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0.74;
}

.appbar__btn:hover {
  background: #58f0d3;
  transform: translateY(-1px);
  box-shadow: 0 18px 44px -14px var(--teal-glow);
}

.appbar__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

body {
  padding-bottom: 76px;
}

/* One app CTA per viewport. With JS the phone bar starts out of the way and
   script.js reveals it once the page has been scrolled and the inline app
   section is off screen. Without JS there is nothing to drive it, so the bar
   simply stays put — the no-JS default has to be the visible one. */
@media (max-width: 47.999rem) {
  html.js .appbar {
    transform: translateY(calc(100% + 0.75rem));
    opacity: 0;
    visibility: hidden;
    transition: transform 0.26s ease, opacity 0.2s ease, visibility 0.26s;
  }

  html.js .appbar.is-shown {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
}

/* Desktop: a compact card in the bottom-right rather than a full-width bar. */
@media (min-width: 48rem) {
  .appbar {
    left: auto;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(21rem, calc(100vw - 2.5rem));
    padding: 0;
    background: none;
  }

  .appbar__btn {
    min-height: 60px;
    gap: 0.1rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
  }

  .appbar__label {
    font-size: 1.0625rem;
    line-height: 1.15;
  }

  .appbar__sub {
    font-size: 0.8125rem;
    line-height: 1.2;
    opacity: 0.78;
  }

  body {
    padding-bottom: 0;
  }
}

/* The sticky bar and the collapsed header both float over the page; keep the
   direct-open link on the free-preview page clear of the bar as well. */
.gate__open {
  margin: 0 0 0.5rem;
}

.gate__open .btn {
  width: 100%;
  min-height: 60px;
  font-size: 1.0625rem;
  font-weight: 700;
}

.gate__optional-title {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
}

@media (min-width: 48rem) {
  .gate__open .btn {
    width: auto;
    min-width: 18rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .appbar,
  .appbar__btn {
    transition: none;
  }

  .appbar__btn:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------------------- */
/* Corporate and team pricing                                                 */
/* Reuses .tier wholesale; this only adds the billing toggle, the two extra   */
/* lines a team card carries, and the treatment that marks a button as an     */
/* activation request rather than live checkout.                              */

.tiers--corp,
.tiers--pair {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 34rem) {
  .tiers--corp,
  .tiers--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .tiers--corp {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tier--corp .tier__amount {
  font-size: 2.1rem;
}

.tier__alt {
  font-size: var(--text-xs);
  color: var(--fg-mute);
  line-height: 1.5;
}

/* Reads as an amber caution rather than a teal call to action, so a request
   button is never mistaken for a live payment link. */
.reqnote {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--lume-soft);
  border-left: 3px solid var(--lume);
  border-radius: var(--radius);
  background: rgba(244, 201, 135, 0.06);
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: 1.6;
  max-width: var(--measure-wide);
}

.reqnote strong {
  color: var(--lume);
}

.reqtag {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--lume-soft);
  border-radius: 999px;
  background: rgba(244, 201, 135, 0.08);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lume);
  white-space: nowrap;
}

.btn--request {
  border-color: rgba(244, 201, 135, 0.38);
  color: var(--lume);
}

.btn--request:hover,
.btn--request:focus-visible {
  border-color: var(--lume);
  background: rgba(244, 201, 135, 0.1);
}

.billtoggle {
  margin-top: var(--sp-5);
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(3, 16, 15, 0.5);
}

.billtoggle__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-soft);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.billtoggle__opt.is-on {
  background: var(--teal);
  color: #032420;
}

.billtoggle__opt:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.billtoggle__save {
  font-size: var(--text-xs);
  font-weight: 600;
  opacity: 0.8;
}

.billtoggle__state {
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--fg-mute);
}

/* The toggle is the only way to reach annual prices, so without scripting the
   cards stay on monthly and the control is hidden rather than shown dead. */
html:not(.js) .billtoggle,
html:not(.js) .billtoggle__state {
  display: none;
}

/* Plan carried over from a pricing page, shown above the contact form. */
.planpick {
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid rgba(63, 224, 193, 0.32);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  background: rgba(63, 224, 193, 0.07);
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: 1.6;
}

.planpick strong {
  color: var(--fg-warm);
}

@media (max-width: 47.999rem) {
  .billtoggle {
    display: flex;
    width: 100%;
  }

  .billtoggle__opt {
    flex: 1 1 0;
    justify-content: center;
    min-height: 56px;
    padding: 0 0.75rem;
  }

  .billtoggle__save {
    display: block;
    font-size: 0.6875rem;
  }

  .tier--corp .tier__cta .btn {
    min-height: 56px;
  }
}

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