@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/SchibstedGrotesk-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/SchibstedGrotesk-SemiBold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/SchibstedGrotesk-ExtraBold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 800;
}

@font-face {
  font-family: "Azeret Mono";
  src: url("/assets/fonts/AzeretMonoRoman-Medium.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Azeret Mono";
  src: url("/assets/fonts/AzeretMonoRoman-Bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

:root {
  color-scheme: light;
  --ground: #f2ebdd;
  --surface: #fbf7ef;
  --surface-sunken: #f0e0be;
  --ink: #2b1f16;
  --body: #3c2f23;
  --muted: #6f604e;
  --line: #e4c984;
  --line-strong: #d9a945;
  --gold: #8c5a12;
  --gold-dark: #6b420d;
  --gold-bright: #d9a945;
  --gold-soft: #f0e0be;
  --good: #617a58;
  --danger: #a64935;
  --block: #2b1f16;
  --on-block: #fbf7ef;
  --on-block-muted: #f0e0be;
  --shadow: 0 1.7rem 5rem rgba(43, 31, 22, 0.15);
  --radius: 1.5rem;
  --sans: "Schibsted Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--ground);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 86% 0%, rgba(217, 169, 69, 0.2), transparent 30rem),
    var(--ground);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(43, 31, 22, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 31, 22, 0.03) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(circle at 55% 12%, black, transparent 72%);
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.055em; }

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

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  color: var(--surface);
  background: var(--block);
  border-radius: 0.5rem;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 0.25rem;
  border-radius: 0.2rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 5.25rem;
  padding: 0.75rem clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(43, 31, 22, 0.13);
  background: rgba(242, 235, 221, 0.92);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: start;
  width: max-content;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.brand img { width: 2.45rem; height: 2.45rem; border-radius: 0.72rem; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.site-nav a {
  padding: 0.7rem 0;
  font-family: var(--mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a:hover { color: var(--gold); }
.header-cta { justify-self: end; }
.nav-toggle { display: none; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  padding: 0.9rem 1.35rem;
  border: 1px solid var(--ink);
  border-radius: 100vmax;
  color: var(--surface);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.button--small { min-height: 2.85rem; padding: 0.7rem 1.05rem; font-size: 0.63rem; }
.button:hover { color: var(--ink); background: var(--gold-bright); transform: translateY(-2px); }

.text-link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-decoration: none;
  text-transform: uppercase;
}

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

.eyebrow {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(28rem, 0.82fr);
  align-items: start;
  gap: clamp(3rem, 6vw, 7rem);
  min-height: 152vh;
  max-width: 94rem;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 7rem);
}

.hero__copy,
.hero__visual {
  position: sticky;
  top: 5.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 5.25rem);
}

.hero__copy { z-index: 2; max-width: 55rem; }
.hero h1 { max-width: 12ch; margin-top: 1.2rem; font-size: clamp(3.75rem, 6.4vw, 6.6rem); line-height: 0.97; }
.hero__intro { max-width: 41rem; margin-top: 1.6rem; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.8rem; }
.hero__note { min-height: 1.4rem; margin-top: 1.2rem; color: var(--muted); font-size: 0.85rem; }
.hero__visual { align-items: center; }

.control-panel-demo {
  width: min(34rem, 100%);
  padding: clamp(1.45rem, 3vw, 2.2rem);
  border: 1px solid rgba(240, 224, 190, 0.22);
  border-radius: 2.25rem;
  color: var(--on-block);
  background: var(--block);
  box-shadow: 0 2.5rem 7rem rgba(43, 31, 22, 0.24);
}

.control-panel-demo__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.control-panel-demo__header span:last-child { color: var(--on-block-muted); white-space: nowrap; }
.control-panel-demo h2 { margin-top: 1.45rem; font-size: clamp(2rem, 3.1vw, 3.2rem); line-height: 0.98; letter-spacing: -0.045em; }
.control-panel-demo__meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1.4rem 0 0.8rem; }
.control-panel-demo__meter span { height: 0.42rem; border-radius: 100vmax; background: #5c4529; transition: background 280ms ease, transform 280ms ease; }
.control-panel-demo__meter span[data-on="true"] { background: var(--gold-bright); transform: scaleY(1.15); }
.control-panel-demo__rows { display: grid; }

.control-panel-row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 4rem;
  border-bottom: 1px solid rgba(240, 224, 190, 0.28);
}

.control-panel-row:last-child { border-bottom: 0; }
.control-panel-row__state { color: var(--on-block-muted); font-size: 1.8rem; font-weight: 400; line-height: 1; transition: color 240ms ease, transform 240ms ease; }
.control-panel-row[data-on="true"] .control-panel-row__state { color: var(--gold-bright); transform: scale(1.05); }
.control-panel-row__name { font-size: clamp(0.98rem, 1.5vw, 1.14rem); }
.control-panel-row__action { min-width: 4.9rem; padding: 0.55rem 0.75rem; border-radius: 100vmax; color: var(--ink); background: var(--gold-bright); font-size: 0.72rem; font-weight: 800; text-align: center; }
.control-panel-row__action:empty { visibility: hidden; }
.control-panel-demo__hint { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; color: var(--on-block-muted); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.control-panel-demo__hint > span:first-child { color: var(--gold-bright); font-size: 1rem; }

.control-panel-section { align-items: start; min-height: 145vh; padding-top: 0; padding-bottom: 0; }
.control-panel-section__copy,
.control-panel-section__visual { position: sticky; top: 5.25rem; display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 5.25rem); }
.control-panel-section__status { margin-top: 1.2rem !important; font-family: var(--mono); font-size: 0.72rem !important; }

.proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); background: rgba(251, 247, 239, 0.32); }
.proof-strip p { padding: 1.35rem; border-right: 1px solid var(--line); font-family: var(--mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.proof-strip p:last-child { border-right: 0; }

.section { max-width: 94rem; margin: 0 auto; padding: clamp(5.5rem, 10vw, 10rem) clamp(1.5rem, 6vw, 7rem); }
.section-heading { max-width: 68rem; }
.section-heading h2 { margin-top: 1rem; font-size: clamp(3rem, 5.8vw, 6rem); line-height: 0.95; }
.section-heading--split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.62fr); align-items: end; gap: 4rem; max-width: none; }
.section-heading--split > p { color: var(--muted); line-height: 1.7; }

.product-demo { display: grid; grid-template-columns: minmax(21rem, 0.9fr) minmax(28rem, 0.82fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.product-demo__copy h2 { max-width: 12ch; margin-top: 1rem; font-size: clamp(3rem, 5.3vw, 5.6rem); line-height: 0.94; }
.product-demo__copy > p:not(.eyebrow) { max-width: 40rem; margin-top: 1.35rem; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.product-demo__copy .text-link { margin-top: 2rem; }

.safari-demo { display: grid; place-items: center; width: min(34rem, 100%); margin-inline: auto; }

.safari-phone {
  position: relative;
  container-type: inline-size;
  width: min(20.5rem, 100%);
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border: 0.42rem solid var(--ink);
  border-radius: 2.8rem;
  color: #f6f2eb;
  background: #111;
  box-shadow: 0 2.5rem 6rem rgba(43, 31, 22, 0.28);
}

.safari-phone__status { position: absolute; top: 0; right: 0; left: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 13cqw; padding: 2.5cqw 5cqw 0; color: #f6f2eb; font-size: 3.4cqw; }
.safari-phone__status > span:first-of-type { width: 31cqw; height: 8cqw; border-radius: 100vmax; background: #000; }
.safari-phone__status > span:last-child { justify-self: end; font-size: 2.8cqw; }

.safari-youtube { position: absolute; inset: 0; overflow: hidden; padding: 15cqw 4cqw 0; color: #f6f2eb; background: #111; transition: filter 380ms ease, opacity 300ms ease; }
.safari-youtube__bar { display: grid; grid-template-columns: 8cqw 1fr 7cqw; align-items: center; gap: 2cqw; }
.safari-youtube__logo { display: grid; place-items: center; width: 8cqw; height: 6cqw; border-radius: 1.8cqw; color: #fff; background: #f20d35; font-size: 3.2cqw; }
.safari-youtube__search { overflow: hidden; padding: 2.3cqw 3cqw; border-radius: 100vmax; color: #b7b7b7; background: #282828; font-size: 3.2cqw; white-space: nowrap; }
.safari-youtube__chips { display: flex; gap: 2cqw; max-height: 12cqw; margin-top: 4cqw; overflow: hidden; opacity: 1; transition: max-height 340ms ease, margin 340ms ease, opacity 220ms ease, transform 340ms ease; }
.safari-youtube__chips span { padding: 1.8cqw 3cqw; border-radius: 2.2cqw; color: #eee; background: #2a2a2a; font-size: 2.8cqw; }
.safari-youtube__chips span:first-child { color: #111; background: #f2f2f2; }

.safari-youtube__shorts { max-height: 70cqw; margin-top: 5cqw; overflow: hidden; opacity: 1; transition: max-height 420ms ease, margin 420ms ease, opacity 240ms ease, transform 420ms ease; }
.safari-youtube__shorts h3 { display: flex; align-items: center; gap: 1.5cqw; font-size: 5cqw; letter-spacing: -0.03em; }
.safari-youtube__shorts h3 span { color: #f20d35; }
.safari-youtube__shorts > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-top: 3cqw; }
.safari-short { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 44cqw; overflow: hidden; padding: 3cqw; border-radius: 3cqw; box-shadow: inset 0 -15cqw 16cqw rgba(0, 0, 0, 0.58); }
.safari-short--beach { background: linear-gradient(#db9a73 0 45%, #c6b06f 46% 62%, #355b69 63% 100%); }
.safari-short--party { background: linear-gradient(150deg, #6d446e, #203f52 58%, #17272b); }
.safari-short--outfit { background: linear-gradient(145deg, #d0a059, #784323 58%, #352016); }
.safari-short strong, .safari-short small { position: relative; z-index: 3; }
.safari-short strong { font-size: 3.1cqw; line-height: 1.1; }
.safari-short small { margin-top: 1cqw; color: #ddd; font-size: 2.4cqw; }

.safari-video { max-height: 68cqw; overflow: hidden; opacity: 1; transition: max-height 420ms ease, margin 420ms ease, opacity 260ms ease, transform 420ms ease; }
.safari-video--discovery { margin-top: 5cqw; }
.safari-video__thumb { position: relative; height: 31cqw; overflow: hidden; border-radius: 3cqw; transition: filter 420ms ease, background 420ms ease; }
.safari-video__thumb::after { position: absolute; inset: 0; background: #303030; content: ""; opacity: 0; transition: opacity 340ms ease; }
.safari-video__thumb--night { background: linear-gradient(145deg, #40375d, #111d31 62%, #0b1018); }
.safari-video__thumb--kinematics { background: linear-gradient(145deg, #a0c2ac, #356b63 58%, #183736); }
.safari-video__thumb--shopping { background: linear-gradient(145deg, #d4aa86, #8f5a62 54%, #3e3246); }
.safari-video__thumb > span:last-child { position: absolute; right: 1.5cqw; bottom: 1.5cqw; z-index: 3; padding: 0.5cqw 1cqw; border-radius: 0.8cqw; background: rgba(0, 0, 0, 0.78); font-size: 2.4cqw; }

.scene-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene-horizon { position: absolute; right: -10%; bottom: 28%; left: -10%; height: 16%; border-radius: 50% 50% 0 0; background: rgba(234, 221, 174, 0.34); transform: rotate(-3deg); }
.scene-sun { position: absolute; top: 10%; right: 13%; width: 12cqw; height: 12cqw; border-radius: 50%; background: rgba(255, 231, 158, 0.82); box-shadow: 0 0 0 3cqw rgba(255, 231, 158, 0.1); }
.scene-person { position: absolute; bottom: 10%; width: 12cqw; height: 24cqw; color: #1e2424; transform-origin: bottom center; }
.scene-person::before { position: absolute; top: 0; left: 50%; z-index: 2; width: 6.5cqw; height: 7cqw; border-radius: 48% 48% 44% 44%; background: currentColor; content: ""; transform: translateX(-50%); }
.scene-person::after { position: absolute; top: 5.5cqw; right: 0; bottom: 0; left: 0; z-index: 1; background: currentColor; clip-path: polygon(42% 0, 58% 0, 65% 6%, 78% 13%, 92% 31%, 83% 40%, 69% 25%, 66% 49%, 79% 100%, 57% 100%, 50% 66%, 43% 100%, 21% 100%, 34% 49%, 31% 25%, 17% 40%, 8% 31%, 22% 13%, 35% 6%); content: ""; }
.scene-person--left { left: 19%; transform: rotate(-7deg); }
.scene-person--middle { left: 48%; transform: translateX(-50%); }
.scene-person--right { right: 18%; transform: rotate(8deg); }
.scene-art--beach .scene-person { bottom: 19%; color: #273135; }
.scene-art--beach .scene-person--left { transform: rotate(-8deg) scale(0.8); }
.scene-art--beach .scene-person--right { transform: rotate(9deg) scale(0.92); }

.scene-art--party::before, .scene-art--party::after { position: absolute; top: -20%; width: 19cqw; height: 75%; background: rgba(223, 165, 213, 0.2); content: ""; filter: blur(1cqw); transform: rotate(18deg); }
.scene-art--party::before { left: 5%; }
.scene-art--party::after { right: 5%; background: rgba(113, 204, 207, 0.2); transform: rotate(-18deg); }
.scene-art--party .scene-person { bottom: 16%; color: #171b24; }
.scene-art--party .scene-person--left { left: 14%; transform: rotate(-8deg) scale(0.76); }
.scene-art--party .scene-person--middle { transform: translateX(-50%) scale(0.95); }
.scene-art--party .scene-person--right { right: 12%; transform: rotate(9deg) scale(0.72); }
.scene-light { position: absolute; top: 10%; width: 5cqw; height: 5cqw; border-radius: 50%; background: #e7b16f; box-shadow: 0 0 4cqw rgba(231, 177, 111, 0.7); }
.scene-light--one { left: 18%; }
.scene-light--two { right: 19%; background: #8cc9ca; box-shadow: 0 0 4cqw rgba(140, 201, 202, 0.65); }

.scene-arch { position: absolute; top: 6%; right: 18%; left: 18%; height: 66%; border: 1.6cqw solid rgba(248, 220, 168, 0.34); border-bottom: 0; border-radius: 20cqw 20cqw 0 0; }
.scene-art--outfit .scene-person { bottom: 18%; height: 22cqw; color: #28201d; }
.scene-plant { position: absolute; right: 7%; bottom: 18%; width: 2cqw; height: 13cqw; background: #35261c; }
.scene-plant::before, .scene-plant::after { position: absolute; width: 7cqw; height: 3.5cqw; border-radius: 100% 0; background: #3d4e33; content: ""; transform: rotate(-25deg); }
.scene-plant::before { top: 1cqw; left: -5cqw; }
.scene-plant::after { top: 6cqw; left: 0; transform: scaleX(-1) rotate(-25deg); }

.scene-moon { position: absolute; top: 12%; right: 12%; width: 8cqw; height: 8cqw; border-radius: 50%; background: #f1dfa9; box-shadow: 0 0 5cqw rgba(241, 223, 169, 0.28); }
.scene-window { position: absolute; top: 13%; right: 9%; width: 35cqw; height: 19cqw; border: 1.4cqw solid rgba(199, 207, 223, 0.35); border-radius: 1cqw; }
.scene-window::before { position: absolute; inset: 0 48% 0 auto; width: 1.2cqw; background: rgba(199, 207, 223, 0.3); content: ""; }
.scene-desk { position: absolute; right: 13%; bottom: 17%; width: 45cqw; height: 3cqw; border-radius: 100vmax; background: #12151a; box-shadow: 10cqw 9cqw 0 -1cqw #12151a; }
.scene-person--seated { bottom: 15%; left: 23%; width: 15cqw; height: 18cqw; color: #101419; transform: rotate(5deg); }
.scene-person--seated::after { clip-path: polygon(40% 0, 60% 0, 69% 7%, 77% 27%, 96% 43%, 90% 54%, 69% 40%, 65% 58%, 82% 77%, 99% 84%, 96% 100%, 74% 94%, 54% 75%, 42% 58%, 36% 100%, 17% 100%, 25% 56%, 8% 47%, 14% 35%, 28% 28%, 31% 8%); }

.scene-chart { position: absolute; top: 14%; left: 9%; width: 42cqw; height: 17cqw; border-bottom: 1.3cqw solid rgba(237, 248, 233, 0.5); border-left: 1.3cqw solid rgba(237, 248, 233, 0.5); }
.scene-chart::after { position: absolute; right: 2cqw; bottom: 3cqw; width: 34cqw; height: 10cqw; border-top: 1.5cqw solid #e5c668; border-radius: 50% 50% 0 0; content: ""; transform: rotate(-11deg); }
.scene-flask { position: absolute; bottom: 12%; width: 11cqw; height: 12cqw; border: 1.4cqw solid rgba(226, 241, 220, 0.72); border-radius: 1cqw 1cqw 5cqw 5cqw; background: rgba(216, 184, 89, 0.34); }
.scene-flask::before { position: absolute; top: -7cqw; left: 50%; width: 4cqw; height: 7cqw; border: 1.4cqw solid rgba(226, 241, 220, 0.72); border-bottom: 0; content: ""; transform: translateX(-50%); }
.scene-flask--one { left: 60%; }
.scene-flask--two { left: 76%; transform: scale(0.72); transform-origin: bottom; }
.scene-molecule { position: absolute; top: 10%; right: 8%; width: 5cqw; height: 5cqw; border-radius: 50%; background: #e3ca75; box-shadow: -9cqw 6cqw 0 #dbe9d5, 2cqw 12cqw 0 #dbe9d5; }

.scene-art--shopping::before { position: absolute; inset: 8% 5% 12%; border: 1.2cqw solid rgba(255, 239, 218, 0.24); border-radius: 2cqw; content: ""; }
.scene-art--shopping .scene-person { bottom: 8%; color: #25202a; }
.scene-art--shopping .scene-person--left { left: 18%; transform: rotate(-5deg) scale(0.85); }
.scene-art--shopping .scene-person--right { right: 16%; transform: rotate(6deg) scale(0.78); }
.scene-rack { position: absolute; top: 20%; left: 39%; width: 34cqw; height: 2cqw; border-radius: 100vmax; background: #342936; box-shadow: 0 18cqw 0 #342936; }
.scene-rack::before { position: absolute; top: 2cqw; left: 3cqw; width: 6cqw; height: 15cqw; border-radius: 0 0 2cqw 2cqw; background: #d7b77d; box-shadow: 7cqw 0 0 #775a78, 14cqw 0 0 #b86f5d, 21cqw 0 0 #5d7d75; content: ""; clip-path: polygon(18% 0, 82% 0, 100% 23%, 84% 40%, 84% 100%, 16% 100%, 16% 40%, 0 23%); }
.scene-rack::after { position: absolute; top: 0; left: 3cqw; width: 2cqw; height: 21cqw; background: #342936; box-shadow: 28cqw 0 0 #342936; content: ""; }
.scene-bag { position: absolute; bottom: 7%; width: 8cqw; height: 8cqw; border-radius: 1cqw; background: #d5a43e; }
.scene-bag::before { position: absolute; top: -3cqw; left: 50%; width: 4cqw; height: 4cqw; border: 0.9cqw solid currentColor; border-bottom: 0; border-radius: 3cqw 3cqw 0 0; color: inherit; content: ""; transform: translateX(-50%); }
.scene-bag--one { left: 29%; color: #d5a43e; }
.scene-bag--two { right: 28%; color: #6b866f; background: #6b866f; transform: scale(0.78); transform-origin: bottom; }
.safari-video__copy { display: grid; grid-template-columns: 8cqw 1fr; gap: 2cqw; margin-top: 2.5cqw; }
.safari-video__copy i { width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--gold-bright); }
.safari-video__copy p { display: grid; gap: 0.5cqw; }
.safari-video__copy strong { font-size: 3.5cqw; line-height: 1.15; }
.safari-video__copy small { color: #aaa; font-size: 2.7cqw; }
.safari-youtube__heading { margin: 5cqw 0 3cqw; font-size: 5.3cqw; transition: margin 340ms ease; }
.safari-youtube__subscriptions { display: grid; gap: 5cqw; }

.safari-phone[data-level="1"] .safari-youtube__chips,
.safari-phone[data-level="2"] .safari-youtube__chips,
.safari-phone[data-level="3"] .safari-youtube__chips,
.safari-phone[data-level="4"] .safari-youtube__chips,
.safari-phone[data-level="1"] .safari-youtube__shorts,
.safari-phone[data-level="2"] .safari-youtube__shorts,
.safari-phone[data-level="3"] .safari-youtube__shorts,
.safari-phone[data-level="4"] .safari-youtube__shorts,
.safari-phone[data-level="1"] .safari-video--discovery,
.safari-phone[data-level="2"] .safari-video--discovery,
.safari-phone[data-level="3"] .safari-video--discovery,
.safari-phone[data-level="4"] .safari-video--discovery { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(-3cqw) scale(0.97); }
.safari-phone[data-level="1"] .safari-youtube__heading,
.safari-phone[data-level="2"] .safari-youtube__heading,
.safari-phone[data-level="3"] .safari-youtube__heading { margin-top: 5cqw; }
.safari-phone[data-level="2"] .safari-video__thumb { filter: blur(3.8cqw); }
.safari-phone[data-level="3"] .safari-youtube { filter: grayscale(1); }
.safari-phone[data-level="3"] .safari-video__thumb::after { opacity: 1; }

.safari-blocked { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 48cqw 10cqw 0; color: #f6f2eb; background: #151515; text-align: center; opacity: 0; pointer-events: none; transform: scale(0.985); transition: opacity 320ms ease, transform 320ms ease; }
.safari-blocked img { width: 15cqw; height: 15cqw; border-radius: 3.5cqw; }
.safari-blocked > span { margin-top: 3cqw; color: var(--gold-bright); font-family: var(--mono); font-size: 2.7cqw; letter-spacing: 0.16em; text-transform: uppercase; }
.safari-blocked > strong { margin-top: 5cqw; font-size: 6.4cqw; }
.safari-blocked > p { max-width: 64cqw; margin-top: 3cqw; color: #b6ada3; font-size: 3.4cqw; line-height: 1.45; }
.safari-blocked > b { width: 72cqw; margin-top: 9cqw; padding: 3.5cqw; border-radius: 2.5cqw; color: #17110d; background: #d9781e; font-size: 3.3cqw; }
.safari-phone[data-level="4"] .safari-blocked { opacity: 1; transform: scale(1); }

.safari-extension { position: absolute; right: 0; bottom: 0; left: 0; z-index: 20; min-height: 47%; padding: 5cqw 4cqw 4cqw; border-top: 1px solid #35312d; border-radius: 7cqw 7cqw 0 0; color: #f4f1ec; background: rgba(24, 22, 21, 0.98); box-shadow: 0 -5cqw 16cqw rgba(0, 0, 0, 0.42); }
.safari-extension__handle { position: absolute; top: 2.2cqw; left: 50%; width: 11cqw; height: 1cqw; border-radius: 100vmax; background: #69635d; transform: translateX(-50%); }
.safari-extension__head { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 1cqw 1cqw 3cqw; font-size: 3.5cqw; }
.safari-extension__head strong { justify-self: center; margin-left: 8cqw; }
.safari-extension__head span { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; color: #fff; background: #3388f4; font-size: 4cqw; }
.safari-extension__sites { display: grid; grid-template-columns: repeat(3, 1fr) 8cqw; gap: 1.5cqw; align-items: center; padding-bottom: 3cqw; border-bottom: 1px solid #34302c; }
.safari-extension__sites span, .safari-extension__sites i { min-height: 7cqw; border: 1px solid #3f3934; border-radius: 2cqw; color: #aaa39b; font-size: 2.4cqw; font-style: normal; }
.safari-extension__sites span { display: flex; align-items: center; justify-content: center; }
.safari-extension__sites i { display: grid; place-items: center; }
.safari-extension__sites span::before { margin-right: 1cqw; color: #65a95a; content: "•"; }
.safari-extension__sites span[data-active="true"] { border-color: #9b5918; color: #d9a945; }
.safari-extension__level { margin-top: 3cqw; padding: 3cqw; border: 1px solid #322e2a; border-radius: 3cqw; background: #1d1a18; }
.safari-extension__level > strong { font-size: 4.4cqw; }
.safari-extension input[type="range"] { width: 100%; height: 8cqw; margin-top: 2cqw; appearance: none; background: transparent; cursor: ew-resize; touch-action: pan-y; }
.safari-extension input[type="range"]::-webkit-slider-runnable-track { height: 0.9cqw; border-radius: 100vmax; background: linear-gradient(to right, #d9781e 0 var(--range-fill, 0%), #6e655d var(--range-fill, 0%) 100%); }
.safari-extension input[type="range"]::-webkit-slider-thumb { width: 5.5cqw; height: 5.5cqw; margin-top: -2.3cqw; appearance: none; border: 0.8cqw solid #1d1a18; border-radius: 50%; background: #d9781e; box-shadow: 0 0 0 0.4cqw #d9781e; }
.safari-extension input[type="range"]::-moz-range-track { height: 0.9cqw; border-radius: 100vmax; background: #6e655d; }
.safari-extension input[type="range"]::-moz-range-progress { height: 0.9cqw; border-radius: 100vmax; background: #d9781e; }
.safari-extension input[type="range"]::-moz-range-thumb { width: 4.5cqw; height: 4.5cqw; border: 0.8cqw solid #1d1a18; border-radius: 50%; background: #d9781e; }
.safari-extension__ticks { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: -0.5cqw; color: #827a73; font-size: 2cqw; text-align: center; }
.safari-extension__ticks span:first-child { text-align: left; }
.safari-extension__ticks span:last-child { text-align: right; }
.safari-extension__level > p { min-height: 10cqw; margin-top: 2.2cqw; color: #aaa39b; font-size: 2.8cqw; line-height: 1.4; }
.safari-extension__always { margin-top: 3cqw; color: #5fa957; font-family: var(--mono); font-size: 2.4cqw; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

@media (hover: hover) {
  .safari-extension input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 0.7cqw rgba(217, 120, 30, 0.35); }
}

.product-demo--routine { grid-template-columns: minmax(20rem, 0.72fr) minmax(28rem, 0.95fr); }
.routine-demo { width: min(31rem, 100%); margin-inline: auto; }
.routine-demo__status { margin-top: 1.25rem !important; font-family: var(--mono); font-size: 0.7rem !important; letter-spacing: 0.02em; }

.routine-phone { position: relative; container-type: inline-size; width: min(25rem, 100%); aspect-ratio: 393 / 790; margin-inline: auto; overflow: hidden; border: 0.42rem solid var(--ink); border-radius: 2.8rem; color: var(--ink); background: var(--surface); box-shadow: 0 2.5rem 6rem rgba(43, 31, 22, 0.22); }
.routine-phone__status { position: absolute; top: 0; right: 0; left: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 13cqw; padding: 2.5cqw 5cqw 0; font-size: 3.4cqw; }
.routine-phone__status > span:first-of-type { width: 31cqw; height: 8cqw; border-radius: 100vmax; background: #000; }
.routine-phone__status > span:last-child { justify-self: end; font-size: 2.8cqw; }
.routine-phone__app { position: absolute; inset: 0; padding: 16cqw 5cqw 8cqw; background: linear-gradient(180deg, #fbf5ea, #f4e9d8); }
.routine-phone__brand { color: var(--gold-dark); font-family: var(--mono); font-size: 2.6cqw; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.routine-phone__app > h3 { margin-top: 2cqw; font-size: 8cqw; line-height: 0.95; letter-spacing: -0.055em; }

.routine-mode { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cqw; margin-top: 5cqw; padding: 1.5cqw; border: 1px solid #dacdbb; border-radius: 4cqw; background: #eee3d2; }
.routine-mode button { display: flex; align-items: center; justify-content: center; gap: 2cqw; min-height: 13cqw; padding: 0 2cqw; border: 0; border-radius: 3cqw; color: var(--muted); background: transparent; font-size: 3.6cqw; font-weight: 700; cursor: pointer; transition: color 220ms ease, background 220ms ease, transform 220ms ease; }
.routine-demo[data-routine-stage="time"] [data-routine-mode="time"],
.routine-demo:not([data-routine-stage="time"]) [data-routine-mode="place"] { color: var(--on-block); background: var(--gold-dark); box-shadow: 0 1.2cqw 3cqw rgba(96, 55, 14, 0.18); }

.routine-icon { position: relative; display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; color: currentColor; }
.routine-icon::before, .routine-icon::after { position: absolute; box-sizing: border-box; content: ""; }
.routine-mode .routine-icon { width: 5.6cqw; height: 5.6cqw; }
.routine-icon--clock { border: 0.11em solid currentColor; border-radius: 50%; }
.routine-icon--clock::before { top: 18%; left: 47%; width: 0.11em; height: 34%; border-radius: 1em; background: currentColor; transform-origin: bottom; }
.routine-icon--clock::after { top: 48%; left: 48%; width: 30%; height: 0.11em; border-radius: 1em; background: currentColor; transform: rotate(24deg); transform-origin: left; }
.routine-icon--location { transform: rotate(45deg) scale(0.78); border: 0.12em solid currentColor; border-radius: 50% 50% 50% 0; }
.routine-icon--location::after { top: 29%; left: 29%; width: 42%; height: 42%; border: 0.1em solid currentColor; border-radius: 50%; }
.routine-icon--house::before { top: 10%; left: 16%; width: 68%; height: 68%; border-top: 0.12em solid currentColor; border-left: 0.12em solid currentColor; transform: rotate(45deg); border-radius: 0.06em 0 0 0; }
.routine-icon--house::after { right: 19%; bottom: 7%; left: 19%; height: 57%; border: 0.12em solid currentColor; border-top: 0; border-radius: 0 0 0.08em 0.08em; }
.routine-icon--house-fill::before { top: 15%; left: 21%; width: 58%; height: 58%; border-radius: 0.08em; background: currentColor; transform: rotate(45deg); }
.routine-icon--house-fill::after { right: 18%; bottom: 7%; left: 18%; height: 53%; border-radius: 0 0 0.1em 0.1em; background: currentColor; }
.routine-icon--plus::before { top: 45%; left: 14%; width: 72%; height: 0.12em; border-radius: 1em; background: currentColor; }
.routine-icon--plus::after { top: 14%; left: 45%; width: 0.12em; height: 72%; border-radius: 1em; background: currentColor; }
.routine-icon--grid::before { top: 12%; left: 12%; width: 30%; height: 30%; border-radius: 0.08em; background: currentColor; box-shadow: 0.46em 0 0 currentColor, 0 0.46em 0 currentColor, 0.46em 0.46em 0 currentColor; }
.routine-icon--check::before { top: 17%; left: 45%; width: 22%; height: 57%; border-right: 0.14em solid currentColor; border-bottom: 0.14em solid currentColor; transform: rotate(42deg); }

.routine-composer { position: absolute; top: 55cqw; right: 5cqw; bottom: 7cqw; left: 5cqw; overflow: hidden; transition: opacity 360ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.routine-composer--place { opacity: 0; pointer-events: none; transform: translateX(8cqw); }
.routine-demo:not([data-routine-stage="time"]) .routine-composer--time { opacity: 0; pointer-events: none; transform: translateX(-8cqw); }
.routine-demo:not([data-routine-stage="time"]) .routine-composer--place { opacity: 1; pointer-events: auto; transform: translateX(0); }
.routine-label { margin: 3cqw 0 1.5cqw; color: var(--gold-dark); font-family: var(--mono); font-size: 2.4cqw; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.routine-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.routine-time-fields span { display: grid; gap: 1cqw; padding: 3cqw; border: 1px solid #d8cbb8; border-radius: 3cqw; background: rgba(255, 252, 246, 0.78); }
.routine-time-fields small { color: var(--muted); font-size: 2.5cqw; }
.routine-time-fields strong { font-family: var(--mono); font-size: 4.3cqw; }
.routine-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.2cqw; }
.routine-days span, .routine-days i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-family: var(--mono); font-size: 2.7cqw; font-style: normal; font-weight: 800; }
.routine-days span { color: var(--on-block); background: var(--gold-dark); }
.routine-days i { color: var(--muted); background: #e5d8c4; }
.routine-target { display: grid; grid-template-columns: 10cqw 1fr auto; align-items: center; gap: 2.5cqw; padding: 3cqw; border: 1px solid #d8cbb8; border-radius: 3cqw; background: rgba(255, 252, 246, 0.82); }
.routine-target > span { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 2.4cqw; color: var(--on-block); background: var(--gold-dark); font-size: 4cqw; }
.routine-target p { display: grid; gap: 0.4cqw; }
.routine-target strong { font-size: 3.5cqw; }
.routine-target small { color: var(--muted); font-size: 2.4cqw; }
.routine-target b { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; color: var(--ink); background: var(--gold-bright); font-size: 2.8cqw; }
.routine-save { display: grid; place-items: center; min-height: 12cqw; margin-top: 4cqw; border-radius: 100vmax; color: var(--on-block); background: var(--block); font-size: 3.3cqw; font-weight: 800; }

.routine-place-options { display: flex; align-items: center; gap: 2cqw; }
.routine-place-card { display: flex; align-items: center; gap: 2.4cqw; min-height: 11cqw; padding: 0 4cqw; border: 1px solid #d8cbb8; border-radius: 2.5cqw; color: var(--ink); background: rgba(255, 252, 246, 0.82); font: inherit; cursor: pointer; transition: color 260ms ease, border-color 260ms ease, background 260ms ease, transform 260ms ease, box-shadow 260ms ease; }
.routine-place-card .routine-icon { width: 5.4cqw; height: 5.4cqw; }
.routine-place-card strong { font-size: 3.5cqw; }
.routine-place-add { display: grid; place-items: center; width: 11cqw; height: 11cqw; padding: 0; border: 1px solid #d8cbb8; border-radius: 50%; color: var(--ink); background: rgba(255, 252, 246, 0.82); cursor: pointer; }
.routine-place-add .routine-icon { width: 4.5cqw; height: 4.5cqw; }
.routine-demo[data-routine-stage="selecting"] .routine-place-card { transform: scale(0.94); border-color: var(--gold-dark); box-shadow: 0 0 0 1.2cqw rgba(229, 174, 55, 0.18); }
.routine-demo[data-routine-stage="selected"] .routine-place-card,
.routine-demo[data-routine-stage="active"] .routine-place-card { color: var(--on-block); border-color: var(--gold-dark); background: var(--gold-dark); box-shadow: 0 1.2cqw 3cqw rgba(96, 55, 14, 0.18); }

.routine-place-rule { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; margin-top: 3cqw; padding: 1cqw; border-radius: 2.6cqw; background: #e4d8c7; }
.routine-place-rule span, .routine-place-rule i { display: grid; place-items: center; min-height: 8cqw; border-radius: 2cqw; font-size: 2.8cqw; font-style: normal; font-weight: 700; }
.routine-place-rule span { color: var(--on-block); background: var(--gold-dark); }
.routine-place-rule i { color: var(--muted); }
.routine-label--radius { margin-top: 3cqw; }
.routine-radius p { display: flex; align-items: center; justify-content: space-between; font-size: 2.8cqw; }
.routine-radius p span { color: var(--muted); font-family: var(--mono); }
.routine-radius__track { position: relative; height: 6cqw; margin-top: 0.7cqw; }
.routine-radius__track::before { position: absolute; top: 50%; right: 0; left: 0; height: 1.1cqw; border-radius: 100vmax; background: #c9bcaa; transform: translateY(-50%); content: ""; }
.routine-radius__track span { position: absolute; top: 50%; left: 0; width: 10%; height: 1.1cqw; border-radius: 100vmax; background: var(--gold-dark); transform: translateY(-50%) scaleX(0.2); transform-origin: left; transition: transform 700ms ease; }
.routine-radius__track i { position: absolute; top: 50%; left: 10%; width: 5cqw; height: 5cqw; border: 1cqw solid var(--gold-dark); border-radius: 50%; background: var(--gold-bright); transform: translate(-50%, -50%) scale(0.75); transition: transform 700ms cubic-bezier(0.2, 0.9, 0.25, 1.2); }
.routine-demo[data-routine-stage="selected"] .routine-radius__track span,
.routine-demo[data-routine-stage="active"] .routine-radius__track span { transform: translateY(-50%) scaleX(1); }
.routine-demo[data-routine-stage="selected"] .routine-radius__track i,
.routine-demo[data-routine-stage="active"] .routine-radius__track i { transform: translate(-50%, -50%) scale(1); }
.routine-label--block { margin-top: 2.3cqw; }
.routine-block-mode { display: grid; grid-template-columns: 1.2fr 0.75fr 1.2fr; gap: 1cqw; }
.routine-block-mode span, .routine-block-mode i { display: grid; place-items: center; min-height: 8cqw; border-radius: 2cqw; font-size: 2.6cqw; font-style: normal; font-weight: 700; }
.routine-block-mode span { color: var(--ink); background: var(--gold-bright); }
.routine-block-mode i { color: var(--muted); background: rgba(255, 252, 246, 0.8); }
.routine-activity { display: flex; gap: 2cqw; margin-top: 2cqw; }
.routine-activity > span { display: grid; place-items: center; width: 10cqw; height: 10cqw; border: 1px solid #d8cbb8; border-radius: 2.5cqw; background: rgba(255, 252, 246, 0.82); }
.routine-app-shape { position: relative; width: 6cqw; height: 6cqw; overflow: hidden; border-radius: 1.4cqw; background: var(--block); }
.routine-app-shape::before, .routine-app-shape::after { position: absolute; content: ""; }
.routine-app-shape--one::before { inset: 18%; border: 0.8cqw solid var(--gold-bright); border-radius: 50%; }
.routine-app-shape--two { background: var(--gold-dark); }
.routine-app-shape--two::before { top: 20%; left: 22%; width: 56%; height: 16%; border-radius: 100vmax; background: var(--on-block); box-shadow: 0 1.6cqw 0 var(--on-block), 0 3.2cqw 0 var(--on-block); }
.routine-app-shape--three::before { top: 16%; left: 40%; width: 20%; height: 68%; border-radius: 100vmax; background: var(--gold-bright); transform: rotate(35deg); }
.routine-activity__add .routine-icon { width: 4.5cqw; height: 4.5cqw; }
.routine-active-card { position: absolute; right: 0; bottom: 0; left: 0; z-index: 10; display: grid; grid-template-columns: 10cqw 1fr; align-items: center; gap: 3cqw; padding: 3cqw; border-radius: 3.5cqw; color: var(--on-block); background: var(--block); box-shadow: 0 2cqw 5cqw rgba(43, 31, 22, 0.28); opacity: 0; transform: translateY(5cqw); transition: opacity 340ms ease, transform 420ms cubic-bezier(0.2, 0.85, 0.25, 1.15); }
.routine-active-card > span { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; color: var(--ink); background: var(--gold-bright); }
.routine-active-card .routine-icon { width: 4.5cqw; height: 4.5cqw; }
.routine-active-card p { display: grid; gap: 0.6cqw; }
.routine-active-card strong { font-size: 3.5cqw; }
.routine-active-card small { color: var(--on-block-muted); font-size: 2.4cqw; line-height: 1.35; }
.routine-demo[data-routine-stage="active"] .routine-active-card { opacity: 1; transform: translateY(0); }
.routine-demo[data-routine-stage="active"] .routine-save { color: var(--ink); background: var(--gold-bright); }

.routine-demo__footer { display: flex; align-items: center; justify-content: center; margin-top: 1rem; }
.routine-demo__steps { display: flex; justify-content: center; gap: 0.4rem; }
.routine-demo__steps span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--line-strong); }
.routine-demo[data-routine-stage="place"] .routine-demo__steps span:nth-child(1),
.routine-demo[data-routine-stage="selecting"] .routine-demo__steps span:nth-child(2),
.routine-demo[data-routine-stage="selected"] .routine-demo__steps span:nth-child(3),
.routine-demo[data-routine-stage="active"] .routine-demo__steps span:nth-child(4) { background: var(--gold); transform: scale(1.2); }

.product-demo--approval { grid-template-columns: minmax(19rem, 0.65fr) minmax(38rem, 1.2fr); gap: clamp(3rem, 5vw, 5rem); }

.approval-demo {
  position: relative;
  width: min(43rem, 100%);
  margin-inline: auto;
  overflow: hidden;
  padding: 1.25rem 1.15rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: linear-gradient(145deg, var(--surface), #f1e4cb);
  box-shadow: 0 2rem 5rem rgba(43, 31, 22, 0.18);
}

.approval-demo__phones {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr);
  align-items: end;
  gap: 0.7rem;
}

.approval-demo__phone-wrap { min-width: 0; }
.approval-demo__person { display: flex; align-items: baseline; gap: 0.6rem; min-height: 1.8rem; padding-left: 0.35rem; color: var(--muted); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.11em; text-transform: uppercase; }
.approval-demo__person strong { color: var(--gold-dark); }
.approval-demo__signal { align-self: center; color: var(--gold); font-family: var(--mono); font-size: 1.45rem; font-weight: 700; opacity: 0; transform: translateX(-0.35rem); }
.approval-demo[data-approval-stage="waiting"] .approval-demo__signal,
.approval-demo[data-approval-stage="notification"] .approval-demo__signal,
.approval-demo[data-approval-stage="review"] .approval-demo__signal,
.approval-demo[data-approval-stage="approving"] .approval-demo__signal { animation: approval-signal 900ms ease-in-out infinite; }

.approval-phone {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border: clamp(0.26rem, 0.6vw, 0.42rem) solid var(--ink);
  border-radius: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--ground);
  box-shadow: 0 1.15rem 2.5rem rgba(43, 31, 22, 0.2);
}

.approval-phone__status { position: absolute; top: 0; right: 0; left: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 3.7cqw 5.2cqw 0; color: var(--ink); font-size: 3.5cqw; }
.approval-phone__status > span:last-child { justify-self: end; font-size: 2.8cqw; }
.approval-phone__status--light { color: var(--surface); transition: color 180ms ease; }
.approval-phone__island { width: 31cqw; height: 8cqw; border-radius: 100vmax; background: #000; }
.approval-demo[data-approval-stage="review"] .approval-phone__status--light,
.approval-demo[data-approval-stage="approving"] .approval-phone__status--light,
.approval-demo[data-approval-stage="approved"] .approval-phone__status--light { color: var(--ink); }

.requester-home { position: absolute; inset: 0; padding: 20cqw 7cqw; background: var(--ground); }
.requester-home__brand { color: var(--gold); font-family: var(--mono); font-size: 3.6cqw; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.requester-home > strong { display: block; margin-top: 5cqw; font-size: 9cqw; line-height: 0.94; }
.requester-home > i { display: block; height: 19cqw; margin-top: 6cqw; border: 1px solid var(--line); border-radius: 5cqw; background: var(--surface); }
.requester-dim { position: absolute; inset: 0; z-index: 2; background: rgba(43, 31, 22, 0.42); }

.request-sheet { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; flex-direction: column; height: 76%; padding: 5cqw 5.5cqw 6cqw; border-radius: 9cqw 9cqw 0 0; background: var(--surface); box-shadow: 0 -2cqw 8cqw rgba(43, 31, 22, 0.14); }
.request-sheet__handle { position: absolute; top: 3cqw; left: 50%; width: 12cqw; height: 1.3cqw; border-radius: 100vmax; background: var(--line-strong); transform: translateX(-50%); }
.request-sheet__kicker { margin-top: 3cqw; color: var(--gold-dark); font-family: var(--mono); font-size: 3cqw; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.request-sheet h3 { margin-top: 2cqw; font-size: 8cqw; line-height: 0.94; }
.request-sheet__impact { display: grid; grid-template-columns: 6cqw 1fr; gap: 3cqw; align-items: start; margin-top: 4cqw; padding: 4cqw; border: 1px solid var(--line); border-radius: 5cqw; background: var(--surface); }
.request-sheet__impact > span { color: var(--danger); font-size: 5cqw; font-weight: 700; }
.request-sheet__impact p { display: grid; gap: 0.7cqw; font-size: 4cqw; line-height: 1.12; }
.request-sheet__impact small { color: var(--muted); font-size: 3.4cqw; font-weight: 400; }
.request-sheet__label { margin-top: 4cqw; font-family: var(--mono); font-size: 3cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.request-sheet__reason { display: flex; align-items: center; min-height: 11.5cqw; margin-top: 2cqw; padding: 0 3.5cqw; border: 1px solid var(--line); border-radius: 4cqw; background: var(--ground); font-size: 3.6cqw; }
.request-sheet__caret { width: 0.5cqw; height: 5cqw; margin-left: 0.6cqw; background: var(--gold); animation: approval-caret 800ms steps(1) infinite; }
.request-sheet__buddy { align-items: center; gap: 2.5cqw; min-height: 13cqw; margin-top: 3cqw; }
.request-sheet__buddy--waiting { display: flex; }
.request-sheet__buddy--approved { display: none; padding: 0 3.5cqw; border-radius: 4cqw; color: #31583d; background: #e0eddf; }
.request-sheet__buddy > p { display: grid; gap: 0.3cqw; font-size: 3.7cqw; }
.request-sheet__buddy small { color: var(--muted); font-family: var(--mono); font-size: 2.7cqw; letter-spacing: 0.05em; }
.request-sheet__avatar { display: grid; place-items: center; width: 10cqw; height: 10cqw; flex: 0 0 auto; border-radius: 50%; color: var(--ink); background: var(--gold-soft); font-size: 4.6cqw; font-weight: 800; }
.approval-demo[data-approval-stage="approved"] .request-sheet__buddy--waiting { display: none; }
.approval-demo[data-approval-stage="approved"] .request-sheet__buddy--approved { display: flex; }

.request-sheet__button { display: flex; align-items: center; justify-content: center; gap: 2.5cqw; width: 100%; min-height: 14cqw; margin-top: auto; border: 0; border-radius: 5cqw; color: var(--surface); background: var(--block); font-size: 4.2cqw; font-weight: 800; cursor: pointer; }
.request-sheet__dots { display: none; gap: 1cqw; }
.request-sheet__dots i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--gold); animation: approval-dot 850ms ease-in-out infinite; }
.request-sheet__dots i:nth-child(2) { animation-delay: 120ms; }
.request-sheet__dots i:nth-child(3) { animation-delay: 240ms; }
.approval-demo[data-approval-stage="waiting"] .request-sheet__button,
.approval-demo[data-approval-stage="notification"] .request-sheet__button,
.approval-demo[data-approval-stage="review"] .request-sheet__button,
.approval-demo[data-approval-stage="approving"] .request-sheet__button { color: var(--ink); background: var(--gold-soft); cursor: default; }
.approval-demo[data-approval-stage="waiting"] .request-sheet__dots,
.approval-demo[data-approval-stage="notification"] .request-sheet__dots,
.approval-demo[data-approval-stage="review"] .request-sheet__dots,
.approval-demo[data-approval-stage="approving"] .request-sheet__dots { display: flex; }
.approval-demo[data-approval-stage="waiting"] .request-sheet__caret,
.approval-demo[data-approval-stage="notification"] .request-sheet__caret,
.approval-demo[data-approval-stage="review"] .request-sheet__caret,
.approval-demo[data-approval-stage="approving"] .request-sheet__caret,
.approval-demo[data-approval-stage="approved"] .request-sheet__caret { display: none; }

.buddy-lock, .buddy-request { position: absolute; inset: 0; }
.buddy-lock[hidden], .buddy-request[hidden] { display: none; }
.buddy-lock { padding-top: 17cqw; color: var(--surface); background: radial-gradient(circle at 50% 8%, #5c4529 0, #30231a 32%, #17120e 78%); text-align: center; }
.buddy-lock > p { font-size: 3.8cqw; font-weight: 600; opacity: 0.82; }
.buddy-lock > strong { display: block; margin-top: 1cqw; font-size: 18cqw; font-weight: 600; letter-spacing: -0.06em; }
.buddy-lock__home { position: absolute; bottom: 3.5cqw; left: 50%; width: 34cqw; height: 1.4cqw; border-radius: 100vmax; background: rgba(255, 255, 255, 0.82); transform: translateX(-50%); }
.buddy-notification { position: absolute; top: 61cqw; right: 3cqw; left: 3cqw; display: grid; grid-template-columns: 10cqw 1fr; gap: 3cqw; padding: 4cqw; border-radius: 6cqw; color: var(--ink); background: rgba(251, 247, 239, 0.96); box-shadow: 0 4cqw 8cqw rgba(0, 0, 0, 0.28); text-align: left; opacity: 0; transform: translateY(-12cqw); }
.buddy-notification__mark { display: grid; place-items: center; width: 10cqw; height: 10cqw; border: 1px solid var(--line); border-radius: 3cqw; color: var(--ink); font-size: 5cqw; }
.buddy-notification > div { min-width: 0; }
.buddy-notification small { display: flex; justify-content: space-between; color: var(--muted); font-size: 3cqw; }
.buddy-notification small i { font-style: normal; font-weight: 400; }
.buddy-notification strong { display: block; margin-top: 0.7cqw; font-size: 3.7cqw; }
.buddy-notification p { margin-top: 0.5cqw; font-size: 3.45cqw; line-height: 1.2; }
.approval-demo[data-approval-stage="notification"] .buddy-notification { animation: approval-notification-in 420ms cubic-bezier(0.2, 0.85, 0.25, 1.2) both; }

.buddy-request { padding: 19cqw 5cqw 5cqw; background: var(--ground); animation: approval-screen-in 280ms ease both; }
.buddy-request__header { display: grid; grid-template-columns: 12cqw 1fr 9cqw; align-items: center; gap: 3cqw; }
.buddy-request__header .request-sheet__avatar { width: 12cqw; height: 12cqw; }
.buddy-request__header p { display: grid; gap: 0.5cqw; }
.buddy-request__header strong { font-size: 5.6cqw; line-height: 1; }
.buddy-request__header small, .buddy-request__history-label { color: var(--muted); font-family: var(--mono); font-size: 2.8cqw; letter-spacing: 0.08em; text-transform: uppercase; }
.buddy-request__close { display: grid; place-items: center; width: 9cqw; height: 9cqw; border: 1px solid var(--line); border-radius: 50%; font-size: 5cqw; }
.buddy-request__ask { margin-top: 5cqw; padding: 5cqw; border-radius: 6cqw; color: var(--on-block); background: var(--block); }
.buddy-request__ask strong { display: flex; align-items: center; gap: 2.5cqw; font-size: 5cqw; }
.buddy-request__ask strong span { color: var(--gold-bright); }
.buddy-request__ask p { margin-top: 3cqw; color: var(--on-block-muted); font-size: 3.8cqw; }
.buddy-request__history-label { margin-top: 5cqw; }
.buddy-request__history { margin-top: 2.5cqw; overflow: hidden; border: 1px solid var(--line); border-radius: 5cqw; background: var(--surface); }
.buddy-request__history > p { display: grid; grid-template-columns: 2cqw 1fr auto; align-items: center; gap: 3cqw; min-height: 15cqw; padding: 0 4cqw; border-top: 1px solid var(--line); }
.buddy-request__history > p:first-child { border-top: 0; }
.buddy-request__history i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #3d6b49; }
.buddy-request__history > p:nth-child(2) i { background: var(--danger); }
.buddy-request__history span { display: grid; }
.buddy-request__history strong { font-size: 3.6cqw; }
.buddy-request__history small { color: var(--muted); font-size: 2.8cqw; }
.buddy-request__history b { padding: 1.4cqw 2cqw; border-radius: 3cqw; color: #31583d; background: #e0eddf; font-family: var(--mono); font-size: 2.7cqw; }
.buddy-request__history > p:nth-child(2) b { color: var(--danger); background: #f3e3dc; }
.buddy-request__actions { position: absolute; right: 5cqw; bottom: 6cqw; left: 5cqw; display: grid; grid-template-columns: 14cqw 1fr; gap: 2.5cqw; }
.buddy-request__decline, .buddy-request__approve { display: flex; align-items: center; justify-content: center; min-height: 14cqw; border: 1px solid var(--line); border-radius: 5cqw; }
.buddy-request__decline { color: var(--danger); background: var(--surface); font-size: 6cqw; font-weight: 600; }
.buddy-request__approve { position: relative; gap: 2.5cqw; overflow: hidden; border: 0; color: var(--surface); background: var(--block); font-size: 3.4cqw; cursor: pointer; }
.buddy-request__approve::before { position: absolute; inset: 0; background: var(--gold-bright); content: ""; transform: scaleX(0); transform-origin: left center; }
.buddy-request__approve > * { position: relative; z-index: 1; }
.approval-demo[data-approval-stage="approving"] .buddy-request__approve { color: var(--ink); }
.approval-demo[data-approval-stage="approving"] .buddy-request__approve::before { animation: approval-hold 1.05s linear both; }
.approval-demo[data-approval-stage="approved"] .buddy-request__approve { color: var(--surface); background: #3d6b49; box-shadow: 0 0 0 1.2cqw rgba(61, 107, 73, 0); animation: approval-approved-ring 650ms ease-out; }
.approval-demo[data-approval-stage="approved"] .buddy-request__approve::before { display: none; }

.approval-demo__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0.35rem 0; }
.approval-demo__steps { display: flex; gap: 0.3rem; }
.approval-demo__steps span { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--line-strong); }
.approval-demo__steps span[data-on="true"] { background: var(--gold); }
.approval-demo__footer button { padding: 0; border: 0; color: var(--muted); background: transparent; font-family: var(--mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: underline; text-transform: uppercase; text-underline-offset: 0.2rem; cursor: pointer; }

@keyframes approval-caret { 50% { opacity: 0; } }
@keyframes approval-dot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-0.8cqw); } }
@keyframes approval-signal { 0%, 100% { opacity: 0.25; transform: translateX(-0.35rem); } 50% { opacity: 1; transform: translateX(0.35rem); } }
@keyframes approval-notification-in { from { opacity: 0; transform: translateY(-12cqw); } to { opacity: 1; transform: translateY(0); } }
@keyframes approval-screen-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes approval-hold { to { transform: scaleX(1); } }
@keyframes approval-approved-ring { 0% { box-shadow: 0 0 0 0 rgba(61, 107, 73, 0.6); } 100% { box-shadow: 0 0 0 2.5cqw rgba(61, 107, 73, 0); } }

.buddy-watch-section { display: grid; grid-template-columns: minmax(20rem, 0.82fr) minmax(27rem, 0.78fr); align-items: center; gap: clamp(4rem, 8vw, 9rem); }
.buddy-watch-section__copy { max-width: 47rem; }
.buddy-watch-section__copy h2 { max-width: 11ch; margin-top: 1rem; font-size: clamp(3.5rem, 6.4vw, 7rem); line-height: 0.9; }
.buddy-watch-section__copy > p:last-child { max-width: 39rem; margin-top: 2rem; color: var(--muted); font-size: clamp(1.05rem, 1.45vw, 1.25rem); line-height: 1.75; }

.buddy-watch-demo { --buddy-screen: #15100c; --buddy-card: #211910; --buddy-inset: #2b2118; --buddy-line: #4a3b2f; --buddy-text: #fbf7ef; --buddy-muted: #bcaa8e; --buddy-good: #8fb183; position: relative; width: min(29rem, 100%); min-height: 46rem; margin-inline: auto; padding: 5.8rem 1.45rem 1.6rem; overflow: hidden; border: 0.48rem solid #2b1f16; border-radius: 3.2rem; color: var(--buddy-text); background: var(--buddy-screen); box-shadow: 0 2.5rem 6rem rgba(43, 31, 22, 0.28); }
.buddy-watch-demo__status { position: absolute; top: 1.15rem; right: 1.8rem; left: 1.8rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--buddy-text); font-size: 0.82rem; }
.buddy-watch-demo__status > span { width: 7.2rem; height: 2.1rem; border-radius: 100vmax; background: #000; }
.buddy-watch-demo__status i { justify-self: end; font-size: 0.65rem; font-style: normal; }
.buddy-watch-demo > h3 { text-align: center; font-size: 1.45rem; letter-spacing: -0.03em; }
.buddy-watch-demo__section-title { margin: 2.7rem 0 1rem; font-size: 1.4rem; font-weight: 700; }
.buddy-watch-card { padding: 1.25rem; border: 1px solid var(--buddy-line); border-radius: 1.8rem; background: var(--buddy-card); }
.buddy-watch-card__identity { display: grid; grid-template-columns: 3.4rem 1fr; align-items: center; gap: 0.95rem; }
.buddy-watch-card__avatar { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: #f0e0be; background: #3b2e20; font-family: var(--mono); font-size: 1.25rem; font-weight: 800; }
.buddy-watch-card__identity > div { display: grid; gap: 0.16rem; min-width: 0; }
.buddy-watch-card__identity strong { font-size: 1.25rem; }
.buddy-watch-card__identity small { color: var(--buddy-muted); font-family: var(--mono); font-size: 0.78rem; }
.buddy-watch-card__identity p { display: flex; align-items: center; gap: 0.45rem; color: var(--buddy-good); font-size: 0.8rem; }
.buddy-watch-card__live-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--buddy-good); box-shadow: 0 0 0 0 rgba(143, 177, 131, 0.5); animation: buddy-status-blink 1.8s ease-out infinite; }
.buddy-watch-card__verdict { margin-top: 1.2rem; padding: 1.2rem; border: 1px solid rgba(143, 177, 131, 0.22); border-radius: 1.25rem; background: rgba(143, 177, 131, 0.12); }
.buddy-watch-card__verdict > p, .buddy-watch-card__protections > p { color: var(--buddy-good); font-family: var(--mono); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.buddy-watch-card__verdict > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.65rem; }
.buddy-watch-card__verdict strong { font-size: 1.9rem; line-height: 1; }
.buddy-watch-card__verdict small { display: block; margin-top: 0.65rem; color: #f0e0be; font-size: 0.85rem; line-height: 1.45; }
.buddy-watch-card__pulse { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: var(--buddy-screen); background: var(--buddy-good); font-weight: 900; box-shadow: 0 0 0 0 rgba(143, 177, 131, 0.55); animation: buddy-status-blink 1.8s 0.25s ease-out infinite; }
.buddy-watch-card__protections { display: grid; gap: 0.15rem; margin-top: 1.25rem; }
.buddy-watch-card__protections > p { margin-bottom: 0.45rem; color: var(--buddy-muted); }
.buddy-watch-card__protections > div { display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: center; gap: 0.65rem; min-height: 2.85rem; border-top: 1px solid rgba(188, 170, 142, 0.12); }
.buddy-watch-card__protections > div > span { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: var(--buddy-screen); background: var(--buddy-good); font-size: 0.72rem; font-weight: 900; }
.buddy-watch-card__protections strong { font-size: 0.93rem; }
.buddy-watch-card__protections small { color: var(--buddy-good); font-size: 0.78rem; }

@keyframes buddy-status-blink {
  0%, 35% { box-shadow: 0 0 0 0 rgba(143, 177, 131, 0.48); transform: scale(1); }
  65% { box-shadow: 0 0 0 0.7rem rgba(143, 177, 131, 0); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(143, 177, 131, 0); transform: scale(1); }
}

.faq-section { display: grid; grid-template-columns: 0.8fr 1fr; gap: 6rem; }
.faq-section .section-heading h2 { font-size: clamp(3rem, 5vw, 5.2rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 1.5rem 3rem 1.5rem 0; font-size: 1.05rem; font-weight: 600; line-height: 1.45; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 1.45rem; right: 0; color: var(--gold); content: "+"; font-family: var(--mono); font-size: 1.3rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 43rem; padding: 0 2rem 1.6rem 0; color: var(--muted); line-height: 1.7; }

.waitlist-section { display: grid; grid-template-columns: 1fr minmax(26rem, 0.8fr); align-items: center; gap: 5rem; padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 8vw, 9rem); color: var(--on-block); background: var(--gold-dark); }
.waitlist-section .eyebrow { color: var(--gold-bright); }
.waitlist-section h2 { margin-top: 0.8rem; font-size: clamp(3.5rem, 6vw, 6.5rem); }
.waitlist-section > div > p:not(.eyebrow) { max-width: 35rem; margin-top: 1rem; color: var(--gold-soft); line-height: 1.7; }
.waitlist-form label { display: block; margin-bottom: 0.55rem; font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.waitlist-form__row { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; }
.waitlist-form input { min-width: 0; min-height: 3.55rem; padding: 0.9rem 1rem; border: 1px solid rgba(251, 247, 239, 0.58); border-radius: 100vmax; color: var(--ink); background: var(--surface); }
.waitlist-form .button { border-color: var(--ink); }
.form-note, .form-status { margin-top: 0.75rem; color: var(--gold-soft); font-size: 0.72rem; line-height: 1.5; }
.waitlist-unconfigured { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.waitlist-unconfigured p { color: inherit; }

.site-footer { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 4rem; padding: 4rem clamp(1.5rem, 6vw, 7rem); border-top: 1px solid var(--line); }
.brand--footer { margin-bottom: 1rem; }
.footer-intro p { color: var(--muted); }
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.footer-links > div { display: grid; align-content: start; gap: 0.65rem; }
.footer-links a { color: var(--muted); font-size: 0.78rem; text-decoration: none; }
.footer-links a:hover { color: var(--gold); }
.footer-label { margin-bottom: 0.35rem; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-legal { align-self: end; color: var(--muted); font-size: 0.7rem; text-align: right; }

/* Inner pages */
.page-hero { max-width: 94rem; margin: 0 auto; padding: clamp(5.5rem, 11vw, 10rem) clamp(1.5rem, 8vw, 9rem) 4rem; }
.page-hero__copy { max-width: 72rem; }
.page-hero h1 { max-width: 14ch; margin-top: 1rem; font-size: clamp(4rem, 8vw, 8.5rem); line-height: 0.88; }
.page-hero__intro { max-width: 47rem; margin-top: 2rem; color: var(--muted); font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.7; }
.page-shell { max-width: 94rem; margin: 0 auto; padding: 0 clamp(1.5rem, 8vw, 9rem) clamp(6rem, 10vw, 10rem); }
.content-section { display: grid; grid-template-columns: minmax(16rem, 0.72fr) minmax(20rem, 1fr); gap: clamp(3rem, 8vw, 8rem); padding: clamp(4rem, 7vw, 7rem) 0; border-top: 1px solid var(--line); }
.content-section h2 { max-width: 14ch; font-size: clamp(2.8rem, 5vw, 5rem); line-height: 0.96; }
.content-section__body { display: grid; gap: 1.25rem; color: var(--muted); font-size: 1.05rem; line-height: 1.75; }
.content-section__body h3 { margin-top: 1rem; color: var(--ink); font-size: 1.35rem; letter-spacing: -0.02em; }
.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.fact-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.fact-card strong { display: block; color: var(--ink); font-size: 1rem; }
.fact-card p { margin-top: 0.5rem; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.inline-cta { display: grid; grid-template-columns: 1fr minmax(24rem, 0.7fr); align-items: center; gap: 4rem; margin-top: 4rem; padding: 3rem; border-radius: 1.5rem; color: var(--on-block); background: var(--gold-dark); }
.inline-cta h2 { margin-top: 0.6rem; font-size: clamp(2.5rem, 4vw, 4.3rem); }
.inline-cta .eyebrow { color: var(--gold-bright); }
.inline-cta .form-note, .inline-cta .form-status { color: var(--gold-soft); }

.simple-card { max-width: 48rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--surface); }
.simple-card p + p { margin-top: 1rem; }
.simple-card a { color: var(--gold); }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; align-items: stretch; padding: 0.7rem 1.25rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--ground); box-shadow: 0 1rem 2rem rgba(43, 31, 22, 0.08); }
  .site-nav[data-open] { display: grid; }
  .site-nav a { padding: 0.8rem; border-bottom: 1px solid var(--line); }
  .header-cta { display: none; }
  .nav-toggle { display: grid; gap: 0.35rem; width: 2.8rem; height: 2.8rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
  .nav-toggle > span:not(.sr-only) { width: 100%; height: 1px; background: var(--ink); transition: transform 160ms ease; }
  .nav-toggle[aria-expanded="true"] > span:nth-last-child(2) { transform: translateY(0.18rem) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] > span:last-child { transform: translateY(-0.18rem) rotate(-45deg); }
  .hero { grid-template-columns: 1fr; gap: 3rem; min-height: auto; padding-top: 4.5rem; padding-bottom: 5rem; }
  .hero__copy, .hero__visual { position: relative; top: auto; min-height: auto; }
  .hero__visual { align-items: start; }
  .hero--safari-demo .hero__visual { align-items: center; }
  .section-heading--split, .faq-section { grid-template-columns: 1fr; gap: 2rem; }
  .buddy-watch-section { grid-template-columns: 1fr; gap: 3.5rem; }
  .buddy-watch-section__copy { max-width: 52rem; }
  .buddy-watch-demo { margin-inline: 0; }
  .product-demo { grid-template-columns: 1fr; gap: 3.5rem; }
  .product-demo__copy { max-width: 48rem; }
  .safari-demo, .routine-demo, .approval-demo { margin-inline: 0; }
  .control-panel-section { min-height: auto; padding-top: 5rem; padding-bottom: 7rem; }
  .control-panel-section__copy,
  .control-panel-section__visual { position: relative; top: auto; min-height: auto; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-legal { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 760px) {
  .hero { padding-top: 3.5rem; }
  .hero h1 { font-size: clamp(3.2rem, 13vw, 4.75rem); }
  .control-panel-demo { padding: 1.25rem; border-radius: 1.6rem; }
  .control-panel-demo h2 { font-size: 2.15rem; }
  .control-panel-row { grid-template-columns: 1.15rem minmax(0, 1fr) auto; gap: 0.65rem; min-height: 3.65rem; }
  .control-panel-row__action { min-width: 4.25rem; padding: 0.48rem 0.55rem; font-size: 0.64rem; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip p { border-right: 0; border-bottom: 1px solid var(--line); }
  .proof-strip p:last-child { border-bottom: 0; }
  .product-demo__copy h2 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .safari-demo { width: 100%; }
  .safari-phone { width: min(20rem, 100%); border-width: 0.34rem; border-radius: 2.35rem; }
  .routine-demo { width: 100%; }
  .routine-phone { width: min(23rem, 100%); border-width: 0.34rem; border-radius: 2.35rem; }
  .approval-demo { padding: 0.85rem 0.7rem 0.7rem; border-radius: 1.5rem; }
  .approval-demo__phones { grid-template-columns: minmax(0, 1fr) 0.55rem minmax(0, 1fr); gap: 0.35rem; }
  .approval-demo__signal { overflow: visible; font-size: 0.9rem; }
  .approval-demo__person { gap: 0.35rem; min-height: 1.55rem; padding-left: 0.15rem; font-size: 0.48rem; letter-spacing: 0.08em; }
  .buddy-watch-section__copy h2 { font-size: clamp(3.2rem, 13vw, 5rem); }
  .buddy-watch-demo { width: min(25rem, 100%); min-height: 42rem; padding-inline: 1rem; border-width: 0.34rem; border-radius: 2.5rem; }
  .buddy-watch-card { padding: 1rem; }
  .waitlist-section, .inline-cta { grid-template-columns: 1fr; gap: 2.5rem; }
  .waitlist-form__row { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-legal { grid-column: auto; }
  .content-section { grid-template-columns: 1fr; gap: 2rem; }
  .fact-grid { grid-template-columns: 1fr; }
  .inline-cta { padding: 2rem 1.25rem; }
}

@media (max-width: 420px) {
  .control-panel-demo__header { font-size: 0.6rem; }
  .control-panel-row__name { font-size: 0.88rem; }
  .approval-demo__footer { padding-inline: 0.1rem; }
  .approval-demo__footer button { font-size: 0.52rem; }
}

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