/* A mark, a promise, a proof. The full product tour lives at how-it-works.html. */
html { background: var(--warden-black); color-scheme: dark; scrollbar-color: #666 var(--warden-black); }
body { background: var(--warden-black); }
header { position: absolute; inset: 0 0 auto; background: transparent; }
header .bar { width: 100%; max-width: 100rem; padding-inline: clamp(1.25rem, 4vw, 4rem); }
header .brand { gap: .5rem; }
header .brand .mark { width: 1.6rem; height: 1.6rem; }
header .brand .word { width: 5.2rem; }
header nav { gap: 1.5rem; }
header nav > a:not(.btn) { gap: .4rem; padding: 0; color: #b5b5b5; font-size: .8125rem; }
header nav .nav-download { color: #eee; }
.nav-download svg { width: 1rem; height: 1rem; }
.hero-zone { --hero-scroll: 0; position: relative; background: var(--warden-black); }
.hero { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; min-height: calc(100svh - 3.5rem); padding-top: calc(var(--header-height) + 2rem); padding-bottom: 1.5rem; text-align: center; }
.hero .copy { position: relative; z-index: 1; }
.hero h1 { color: var(--warden-white); font-size: var(--warden-display); font-weight: 580; letter-spacing: -.04em; line-height: 1.1; }
.hero h1 > span { color: #b0b0b0; font-weight: 400; }
.hero-description { margin-top: 1rem; color: var(--warden-muted-dark); font-size: 1rem; line-height: 1.5; }
.hero-art { position: relative; width: clamp(17rem, 44svh, 26rem); aspect-ratio: 1; max-width: 100%; margin-block: .5rem; }
.hero-sculpture { position: absolute; inset: 0; }
.hero-sculpture img, .hero-sculpture canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cta { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.hero .hero-download { min-height: 48px; padding: .85rem 1.25rem; gap: .7rem; border: 0; border-radius: var(--warden-control-radius); background: var(--warden-white); color: var(--warden-ink); font-size: .875rem; font-weight: 650; }
.hero-download > .os { width: 1rem; height: 1rem; }
.download-arrow { display: none; }
.hero-film { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--warden-muted-dark); font-size: .75rem; text-decoration: none; }
.hero-film svg { width: .8rem; height: .8rem; }
.compatibility { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2.5rem; min-height: 3.5rem; padding: .75rem 1.25rem; color: #aaa; font-size: .75rem; }

/* One continuous dark field; the rule surface is distinguished by material. */
.proof { padding-block: clamp(4rem, 9vw, 8rem); background: var(--warden-black); color: var(--warden-white); color-scheme: dark; }
.proof .main { max-width: 58rem; }
.proof-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; margin-bottom: 2.5rem; }
.proof h2 { font-size: var(--warden-title); font-weight: 550; line-height: 1.12; letter-spacing: -.04em; }
.proof-heading > a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--warden-muted-dark); font-size: .8125rem; text-decoration: none; }
.policy-example { min-inline-size: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--warden-line-dark); border-radius: var(--warden-radius); background: #121212; color: var(--warden-white); color-scheme: dark; }
.example-rule { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label state" "rule rule"; gap: .75rem 1rem; align-items: center; padding: 2rem; border-bottom: 1px solid var(--warden-line-dark); }
.example-label { grid-area: label; color: var(--warden-muted-dark); font-size: .75rem; }
.example-rule p { grid-area: rule; font-size: clamp(1.125rem, 2.6vw, 1.5rem); font-weight: 500; line-height: 1.4; letter-spacing: -.025em; }
.active-rule { grid-area: state; display: inline-flex; gap: .35rem; align-items: center; color: #b8b8b8; font-size: .75rem; }
.active-rule svg { width: 1rem; height: 1rem; }
.example-switch { display: flex; gap: 1.5rem; padding-inline: 2rem; padding-top: 1rem; }
.example-switch label { position: relative; display: inline-flex; align-items: center; min-height: 48px; color: var(--warden-muted-dark); font-size: .8125rem; cursor: pointer; }
.example-switch label::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--warden-white); transform: scaleX(0); transition: transform var(--warden-fast) var(--warden-ease); }
#example-private:checked ~ .example-switch label[for="example-private"], #example-public:checked ~ .example-switch label[for="example-public"] { color: #fff; }
#example-private:checked ~ .example-switch label[for="example-private"]::after, #example-public:checked ~ .example-switch label[for="example-public"]::after { transform: scaleX(1); }
#example-private:focus-visible ~ .example-switch label[for="example-private"], #example-public:focus-visible ~ .example-switch label[for="example-public"] { outline: 2px solid #fff; outline-offset: 4px; }
.example-case { display: none; padding: 1.5rem 2rem 2rem; }
#example-private:checked ~ .case-private, #example-public:checked ~ .case-public { display: block; }
.example-request { min-height: 3.25rem; color: #b8b8b8; font-size: clamp(1rem, 2.2vw, 1.25rem); line-height: 1.5; }
.example-decision { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.example-decision > svg { width: 1.4rem; height: 1.4rem; }
.example-decision strong { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 540; line-height: 1.2; letter-spacing: -.03em; }
.proof a:focus-visible { outline-color: var(--warden-white); }
.proof ::selection { background: var(--warden-white); color: var(--warden-ink); }

.film-bar button { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 47.999rem) {
  :root { --header-height: 4rem; }
  header nav { gap: 1.25rem; }
  header .bar nav > .nav-source { display: none; }
  header .brand .word { width: 4.75rem; }
  .hero { min-height: calc(100svh - 3.5rem); padding-top: calc(var(--header-height) + 1.5rem); padding-bottom: .75rem; }
  .hero h1 { max-width: 10ch; font-size: clamp(2.6rem, 10.5vw, 4rem); line-height: 1.08; }
  .hero h1 > span { display: block; }
  .hero-description { max-width: 26ch; margin: 1rem auto 0; font-size: .875rem; }
  .hero-art { width: clamp(14rem, 37svh, 21rem); margin-block: .5rem; }
  .compatibility { gap: 1.5rem; font-size: .6875rem; }
  .proof-heading { margin-bottom: 1.5rem; }
  .example-rule { padding: 1.5rem; }
  .example-switch { padding-inline: 1.5rem; gap: 1.5rem; }
  .example-case { padding: 2rem 1.5rem; }
  .example-request { min-height: 3rem; }
  .example-decision { gap: .6rem; }
}
@media (max-height: 650px) and (min-width: 48rem) {
  .hero { min-height: 38rem; }
  .hero-art { width: 18rem; }
}
@media (hover: hover) and (pointer: fine) {
  .hero-download:hover { background: #d7d7d3; color: #080808; }
  .hero-film:hover, header nav a:hover { color: #fff; }
  .proof-heading > a:hover { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .example-switch label::after { transition: none; }
}