:root {
  --paper: #f7f5f2;
  --paper-bright: #fffefb;
  --ink: #070d1a;
  --ink-soft: rgba(7, 13, 26, 0.7);
  --ink-faint: rgba(7, 13, 26, 0.58);
  --slate: #67708c;
  --slate-dark: #5a6280;
  --mint: #cefcee;
  --line: rgba(7, 13, 26, 0.13);
  --white-line: rgba(255, 255, 255, 0.2);
  --shadow: 0 1.5rem 5rem rgba(7, 13, 26, 0.1);
  --grid-gutter: 1.5rem;
  --space-section: clamp(3.5rem, 5vw, 5rem);
  --space-section-tight: clamp(2.75rem, 3.75vw, 3.75rem);
  --radius-large: 2rem;
  --radius-medium: 1.5rem;
  --site-width: 72rem;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: var(--paper);
}

body {
  min-width: 20rem;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink-soft);
  background-color: var(--paper);
  background-image: linear-gradient(rgba(247, 245, 242, 0.42), rgba(247, 245, 242, 0.42)), url("../img/noise.webp");
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.48;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

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

button,
input {
  font: inherit;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
blockquote,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  margin-bottom: 0;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3.5rem, 7.2vw, 7.25rem);
}

h2 {
  font-size: clamp(2.75rem, 5vw, 5.25rem);
}

h3 {
  font-size: clamp(1.45rem, 2vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

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

:focus-visible {
  outline: 0.2rem solid var(--ink);
  outline-offset: 0.25rem;
}

::selection {
  color: #fff;
  background: var(--slate-dark);
}

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

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

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

.site-container {
  width: min(calc(100% - 3rem), var(--site-width));
  margin-inline: auto;
}

/* 12-column layout grid.
   Container 72rem with 1.5rem gutters -> 4.625rem columns.
   Sections opt in with .site-grid and place children with span-N. */
.site-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }

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

.site-section-compact {
  padding-block: var(--space-section-tight) var(--space-section);
}

.site-section + .site-section,
.page-hero + .site-section {
  padding-top: var(--space-section-tight);
}

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.section-head > :first-child { grid-column: 1 / span 8; }
.section-head > :last-child { grid-column: 10 / span 3; }

.section-head > p {
  max-width: 31rem;
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.15rem;
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--slate);
  content: "";
}

.on-dark .eyebrow,
.on-dark h1,
.on-dark h2,
.on-dark h3 {
  color: #fff;
}

.on-dark p {
  color: rgba(255, 255, 255, 0.7);
}

.button {
  display: inline-flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--slate);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.button:hover {
  color: #fff;
  background: var(--ink);
  transform: translateY(-0.12rem);
}

.button-small {
  min-height: 2.9rem;
  padding-inline: 1.25rem;
  font-size: 0.9rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.text-link::after {
  content: "→";
  transition: transform 180ms ease;
}

.text-link:hover::after {
  transform: translateX(0.25rem);
}

.site-header-mount {
  height: 5.3rem;
}

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(247, 245, 242, 0.88);
  backdrop-filter: blur(1rem);
}

.site-header-inner {
  display: grid;
  min-height: 5.3rem;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.site-brand {
  display: inline-flex;
  width: fit-content;
}

.site-brand img {
  width: clamp(4.75rem, 6vw, 5.35rem);
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.22rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
}

.site-nav a {
  padding: 0.7rem 1rem;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  background: #fff;
}

.site-nav-cta {
  display: none;
}

.site-header-cta {
  justify-self: end;
}

.site-nav-toggle {
  display: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.site-nav-toggle span {
  display: block;
  width: 1.1rem;
  height: 1px;
  margin: 0.25rem auto;
  background: var(--ink);
  transition: transform 180ms ease, opacity 180ms ease;
}

.home-footer {
  position: relative;
  overflow: hidden;
  padding: 3.25rem 0 3rem;
  scroll-margin-top: 5rem;
  border: 1px solid rgba(153, 153, 153, 0.24);
  border-top-color: rgba(153, 153, 153, 0.48);
  border-radius: 0.75rem 0.75rem 1.35rem 1.35rem;
  background: radial-gradient(circle at 12% 24%, rgba(132, 141, 171, 0.08), transparent 24rem), linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 245, 242, 0.96) 100%);
  color: var(--ink);
  isolation: isolate;
}

.home-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(153, 153, 153, 0.18) 1px, transparent 1px), linear-gradient(rgba(153, 153, 153, 0.14) 1px, transparent 1px), url("../img/noise.webp");
  background-size: 5.25rem 5.25rem, 5.25rem 5.25rem, auto;
  opacity: 0.22;
  pointer-events: none;
}

.home-footer::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: 8%;
  z-index: -1;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 141, 171, 0.12), transparent 68%);
  filter: blur(0.25rem);
  pointer-events: none;
}

.home-footer-grid {
  display: grid;
  grid-template-columns: minmax(11rem, 0.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: stretch;
}

.home-footer-aside {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.home-footer-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.25rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.home-footer-socials a {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(153, 153, 153, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 0.75rem 1.5rem rgba(7, 13, 26, 0.045), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  opacity: 0.86;
  text-decoration: none;
  transition: border-color 180ms ease, opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.home-footer-socials a:hover {
  border-color: rgba(132, 141, 171, 0.48);
  box-shadow: 0 1rem 1.875rem rgba(132, 141, 171, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.84);
  opacity: 1;
  transform: translateY(-3px);
}

.home-footer-socials img {
  width: 1.35rem;
  height: 1.35rem;
  filter: grayscale(1);
}

.home-footer-brand {
  display: grid;
  max-width: 20rem;
  gap: 0.65rem;
}

.home-footer-brand .navbar-brand {
  display: inline-flex;
  width: fit-content;
  transition: opacity 180ms ease, transform 180ms ease;
}

.home-footer-brand .navbar-brand:hover {
  opacity: 0.84;
  transform: translateY(-1px);
}

.home-footer-brand img {
  width: 7.25rem;
  height: auto;
}

.home-footer-brand p {
  margin: 0;
  color: rgba(7, 13, 26, 0.72);
  font-size: 0.98rem;
  line-height: 1.34;
}

.home-footer-columns {
  display: grid;
  width: min(100%, 28rem);
  grid-template-columns: repeat(2, max-content);
  gap: clamp(3rem, 4vw, 4rem);
  align-items: start;
  justify-content: space-between;
  justify-items: start;
  padding-top: 0.2rem;
}

.home-footer-column h2 {
  position: relative;
  margin-bottom: 1.05rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.1;
}

.home-footer-column h2::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-top: 0.55rem;
  border-radius: 999px;
  background: rgba(132, 141, 171, 0.44);
}

.home-footer-column ul {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-footer-column a {
  position: relative;
  display: block;
  color: var(--slate);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.24;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.home-footer-column a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.9rem;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translateY(-50%) scale(0.4);
  transition: opacity 180ms ease, transform 180ms ease;
}

.home-footer-column a:hover {
  color: var(--ink);
  transform: translateX(0.35rem);
}

.home-footer-column a:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.home-footer-copyright {
  color: var(--ink-faint) !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  .home-footer-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .home-footer-aside {
    gap: 2rem;
  }

  .home-footer-columns {
    max-width: 35rem;
  }
}

@media (max-width: 576px) {
  .home-footer {
    padding-top: 3rem;
    padding-bottom: 2.25rem;
    border-radius: 1.1rem 1.1rem 0 0;
  }

  .home-footer-grid {
    gap: 2rem;
  }

  .home-footer-columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .home-footer-column h2 {
    margin-bottom: 0.85rem;
  }

  .home-footer-column ul {
    gap: 0.65rem;
  }
}

.page-hero {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 var(--space-section);
}

.page-hero-copy {
  max-width: 68rem;
}

.page-hero-copy > p:not(.eyebrow) {
  max-width: 48rem;
  margin: 2rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.35;
}

.home-hero {
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(4.5rem, 6.5vw, 6rem);
}

.home-hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

.home-hero-copy h1 {
  max-width: 62rem;
}

.home-hero-side p {
  margin-bottom: 1.6rem;
  color: var(--ink-soft);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.35;
}

.anthem-frame {
  position: relative;
  overflow: hidden;
  min-height: 34rem;
  aspect-ratio: 16 / 8.4;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-large);
  background: #d9d4d0;
  box-shadow: var(--shadow);
  isolation: isolate;
}

.anthem-frame::before,
.anthem-frame::after {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.anthem-frame::before {
  top: 50%;
  left: 50%;
  width: 22rem;
  height: 22rem;
  transform: translate(-50%, -50%);
}

.anthem-frame::after {
  top: 50%;
  left: 50%;
  width: 38rem;
  height: 38rem;
  transform: translate(-50%, -50%);
}

.anthem-frame img,
.anthem-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 33%;
}

.anthem-frame::marker {
  display: none;
}

.anthem-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(7, 13, 26, 0.58));
}

.anthem-label {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.anthem-label span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.anthem-label span:last-child::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mint);
  content: "";
}

.statement-panel {
  overflow: hidden;
  padding: clamp(3rem, 5vw, 4.75rem);
  border-radius: var(--radius-large);
  background:
    radial-gradient(circle at 88% 15%, rgba(206, 252, 238, 0.18), transparent 28%),
    var(--ink);
}

.statement-panel blockquote {
  max-width: 58rem;
  margin-bottom: 0;
  color: #fff;
  font-size: clamp(2.35rem, 4.1vw, 4.25rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.learning-difference-section {
  z-index: 1;
}

.learning-manifesto {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2rem, 3.4vw, 3.5rem);
}

.learning-manifesto::after {
  display: none;
}

.learning-manifesto-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: 2rem;
  align-items: end;
  align-items: last baseline;
}

.learning-manifesto-head > :first-child { grid-column: 1 / span 9; }
.learning-manifesto-lede { grid-column: 10 / span 3; }

.learning-manifesto-head > div {
  min-width: 0;
}

.learning-manifesto h2 {
  font-size: clamp(3rem, 6.05vw, 6.15rem);
  line-height: 0.91;
}

/* The chapter link jumps straight to this heading, and the header is fixed,
   so hold it clear of the bar the way .anthem-showcase does. */
.learning-manifesto h2 {
  scroll-margin-top: 4.5rem;
}

.learning-manifesto h2 span {
  display: block;
  text-wrap: balance;
}

/* The promise sets as one line; it only splits at its sentence break on the
   narrow screens where it cannot fit. */
.learning-manifesto h2 .learning-promise-part {
  display: inline;
}

@media (max-width: 760px) {
  .learning-manifesto h2 .learning-promise-part {
    display: block;
  }
}

.learning-manifesto h2 .learning-accent {
  color: var(--slate-dark);
}

.learning-manifesto h2 .learning-promise-period {
  display: inline;
  color: #79cdb2;
}

.learning-manifesto-lede {
  max-width: 18rem;
  margin: 0 0 0 auto;
  color: var(--ink-soft) !important;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.3;
  text-wrap: balance;
}

.learning-manifesto-copy {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: clamp(2.25rem, 4vw, 3.5rem);
  align-items: center;
  margin: clamp(2rem, 3vw, 3rem) 0 0;
  padding: clamp(2rem, 3.4vw, 3.4rem) 0 clamp(1.25rem, 2.25vw, 2.25rem);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.learning-manifesto-copy::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 74% at 53% 50%, rgba(247, 245, 242, 0.82), rgba(247, 245, 242, 0.4) 52%, transparent 78%),
    radial-gradient(ellipse 48% 90% at 72% 50%, rgba(206, 252, 238, 0.1), transparent 72%);
  content: "";
  pointer-events: none;
}

.learning-manifesto-copy > * {
  position: relative;
  z-index: 1;
}

.learning-manifesto-copy p {
  margin: 0;
}

.learning-manifesto-thesis small,
.learning-manifesto-thesis span,
.learning-manifesto-thesis strong,
.learning-manifesto-thesis em {
  display: block;
}

.learning-manifesto-thesis { grid-column: 1 / span 5; }
.learning-manifesto-art { grid-column: 7 / span 6; }

.learning-manifesto-thesis {
  color: var(--ink);
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.learning-manifesto-thesis small {
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--slate-dark);
  font-size: max(0.75rem, 0.2em);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.learning-manifesto-thesis span {
  max-width: 16ch;
  color: var(--ink-soft);
}

.learning-manifesto-thesis strong {
  max-width: 15ch;
  margin-top: 0.16em;
  color: var(--ink);
  font-weight: 500;
}

.learning-manifesto-thesis em {
  max-width: 30rem;
  margin-top: 1.15em;
  color: var(--slate-dark);
  font-size: 0.37em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

.learning-manifesto-art {
  align-self: stretch;
  display: flex;
  min-height: 22rem;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  transform: translate(-0.75rem, 0.35rem);
}

.learning-manifesto-art svg {
  display: block;
  width: 100%;
  height: auto;
  margin-left: 0;
  overflow: visible;
}

.learning-art-flow,
.learning-art-output,
.learning-art-orbit {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.learning-art-flow {
  opacity: 0.72;
  stroke: rgba(111, 120, 151, 0.76);
  stroke-width: 1.1;
}

.learning-art-flow-faint {
  opacity: 0.62;
}

.learning-art-output {
  opacity: 0.36;
  stroke: rgba(111, 120, 151, 0.62);
  stroke-width: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.88) 48%, rgba(0, 0, 0, 0.42) 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.88) 48%, rgba(0, 0, 0, 0.42) 100%);
}

.learning-art-orbit {
  opacity: 0.42;
  stroke: var(--slate-dark);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.learning-art-orbit-outer {
  opacity: 0.18;
  stroke-dasharray: 2.5 6;
}

.learning-art-orbit-middle {
  opacity: 0.32;
  stroke-dasharray: 1 0;
}

.learning-art-orbit-inner {
  animation: learning-orbit-response 7s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}

.learning-art-halo {
  fill: rgba(206, 252, 238, 0.34);
  transform-box: fill-box;
  transform-origin: center;
  animation: learning-halo-response 7s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}

.learning-art-human {
  fill: var(--mint);
  stroke: rgba(7, 13, 26, 0.12);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.learning-art-core {
  fill: var(--ink);
}

.learning-art-node {
  fill: var(--slate);
}

.learning-art-node-origin {
  fill: var(--slate-dark);
}

.learning-art-node-soft {
  opacity: 0.46;
}

.learning-art-traveler {
  fill: var(--slate-dark);
  opacity: 0;
}

.learning-art-self-label {
  fill: var(--slate-dark);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.65px;
}

.learning-art-category-label,
.learning-art-personal-label {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  dominant-baseline: middle;
}

.learning-art-category-label {
  fill: var(--slate-dark);
  font-size: 14px;
  letter-spacing: 1.1px;
  opacity: 1;
}

.learning-art-personal-label {
  fill: var(--slate-dark);
  font-size: 12px;
  letter-spacing: 1.85px;
  opacity: 0.86;
}

.learning-art-label-reactive {
  animation: learning-label-response 21s ease-in-out infinite;
}

.learning-art-label-relationships {
  animation-delay: 7s;
}

.learning-art-label-intentions {
  animation-delay: 14s;
}

.learning-art-mobile-labels {
  display: none;
}

@keyframes learning-halo-response {
  0%, 68%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  74% {
    opacity: 0.74;
    transform: scale(1.12);
  }
  88% {
    opacity: 0.92;
    transform: scale(1.018);
  }
}

@keyframes learning-orbit-response {
  0%, 68%, 100% {
    opacity: 0.42;
    transform: scale(1);
  }
  75% {
    opacity: 0.52;
    transform: scale(1.018);
  }
  89% {
    opacity: 0.44;
    transform: scale(1.004);
  }
}

@keyframes learning-label-response {
  0%, 4%, 27%, 100% {
    opacity: 0.84;
  }
  19%, 24% {
    opacity: 0.96;
  }
}

.learning-ownership-line {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: start;
  margin-top: clamp(0.25rem, 0.8vw, 0.75rem);
  padding: clamp(1rem, 1.8vw, 1.75rem) 0 clamp(1.5rem, 2.5vw, 2.5rem);
  text-align: left;
}

.learning-ownership-line::before {
  position: absolute;
  z-index: -1;
  inset: clamp(-1.5rem, -2vw, -0.75rem) -3rem clamp(-1rem, -1vw, -0.5rem);
  background: radial-gradient(ellipse 46% 92% at 68% 52%, rgba(206, 252, 238, 0.16), transparent 74%);
  content: "";
  pointer-events: none;
}

.learning-ownership-kicker {
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
}

.learning-ownership-kicker span {
  color: var(--slate-dark);
}

.learning-ownership-kicker strong {
  color: var(--ink);
  font-weight: 600;
}

.learning-ownership-statement {
  grid-column: 3 / span 10;
  max-width: 61rem;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.85rem, 2.65vw, 2.85rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.learning-ownership-statement > span,
.learning-ownership-statement > strong {
  display: inline;
}

.learning-ownership-statement > em {
  display: block;
}

.learning-ownership-statement > span {
  color: var(--ink-soft);
  font-weight: 400;
}

.learning-ownership-statement > strong {
  margin-left: 0.12em;
  color: var(--ink);
  font-weight: 500;
}

.learning-ownership-statement > em {
  max-width: 38rem;
  margin-top: 0.8rem;
  color: var(--slate-dark);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

.learning-ownership-statement em b {
  color: var(--ink);
  font-weight: 500;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.pillar-card { grid-column: span 3; }

.pillar-card,
.control-card,
.principle-card {
  position: relative;
  min-height: 15.5rem;
  padding: 1.4rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 1rem 3rem rgba(7, 13, 26, 0.05);
}

.pillar-number {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 3rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-faint);
  font-size: 0.78rem;
}

.pillar-card h3,
.control-card h3,
.principle-card h3 {
  margin-bottom: 0.8rem;
}

.pillar-card p,
.control-card p,
.principle-card p {
  margin-bottom: 0;
  font-size: 1rem;
}

.split-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.split-section > :first-child { grid-column: 1 / span 6; }
.split-section > :last-child { grid-column: 7 / span 6; }

.split-copy > p:not(.eyebrow) {
  max-width: 36rem;
  margin: 1.75rem 0 0;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}

.story-media {
  position: relative;
  display: grid;
  margin: 0;
  gap: 1.15rem;
  justify-items: center;
}

.story-media::before {
  position: absolute;
  z-index: 0;
  inset: -6% -14%;
  background: radial-gradient(circle at 50% 46%, rgba(103, 112, 140, 0.15), rgba(103, 112, 140, 0) 62%);
  content: "";
  pointer-events: none;
}

.story-media .conversation-video {
  z-index: 1;
  width: min(100%, 20rem);
  box-shadow: 0 2.5rem 5rem rgba(7, 13, 26, 0.17);
}

.story-media figcaption {
  position: relative;
  z-index: 1;
  max-width: 17rem;
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.split-copy .story-points {
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
}

.story-points {
  max-width: 27rem;
  border-top: 1px solid var(--line);
}

.story-points-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.1rem;
  row-gap: 0.32rem;
  align-items: center;
  padding-block: 1.3rem;
  border-bottom: 1px solid var(--line);
}

.story-points-icon {
  display: flex;
  width: 2.6rem;
  height: 2.6rem;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--slate);
  background: rgba(103, 112, 140, 0.09);
}

.story-points-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.story-points-label {
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.story-points-row strong {
  color: var(--ink);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.product-stage {
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1fr);
  min-height: 39rem;
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  border-radius: var(--radius-large);
  background:
    radial-gradient(circle at 12% 15%, rgba(206, 252, 238, 0.15), transparent 30%),
    var(--ink);
}

.product-phone {
  position: relative;
  width: min(100%, 25rem);
  margin: auto;
  filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, 0.34));
}

/* Daily Brief: editorial two-column story with a stage that follows the active step. */
.site-section.daily-brief-section {
  overflow: hidden;
}

.daily-brief-showcase {
  display: grid;
  grid-template-columns: minmax(19rem, 0.92fr) minmax(21rem, 1fr);
  grid-template-areas:
    "head stage"
    "steps stage";
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  row-gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(0.5rem, 2vw, 1.5rem);
}

.daily-brief-heading {
  grid-area: head;
}

.daily-brief-heading h2 {
  max-width: 11ch;
  font-size: clamp(3.25rem, 4.4vw, 4rem);
  line-height: 0.98;
}

.daily-brief-lede {
  max-width: 32rem;
  margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.42;
}

/* Steps read as a progress spine: circles sit on the rail, the active one lights up. */
.daily-brief-points {
  position: relative;
  grid-area: steps;
  margin: 0;
  padding: 0;
  list-style: none;
}

.daily-brief-points li {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-medium);
  transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease, opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.daily-brief-points li::after {
  position: absolute;
  top: 4.1rem;
  bottom: -0.5rem;
  left: 2.34rem;
  width: 1.5px;
  background-color: var(--line);
  background-image: linear-gradient(rgba(103, 112, 140, 0.85), rgba(103, 112, 140, 0.85));
  background-repeat: no-repeat;
  background-size: 100% 0%;
  content: "";
  transition: background-size 480ms cubic-bezier(0.4, 0.1, 0.2, 1);
}

.daily-brief-points li:last-child::after {
  display: none;
}

.daily-brief-showcase[data-brief-scene="1"] .daily-brief-points li:first-child::after,
.daily-brief-showcase[data-brief-scene="2"] .daily-brief-points li:first-child::after,
.daily-brief-showcase[data-brief-scene="2"] .daily-brief-points li:nth-child(2)::after {
  background-size: 100% 100%;
}

.daily-brief-points li[data-active="true"] {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 1rem 3rem rgba(7, 13, 26, 0.06);
}

.daily-brief-number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-faint);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease, color 320ms ease;
}

.daily-brief-points li[data-active="true"] .daily-brief-number {
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: 0 0 0 0.3rem rgba(206, 252, 238, 0.85);
  color: var(--paper-bright);
}

.daily-brief-points strong,
.daily-brief-points span:not(.daily-brief-number) {
  display: block;
}

.daily-brief-points strong {
  margin-bottom: 0.3rem;
  padding-top: 0.35rem;
  color: rgba(7, 13, 26, 0.78);
  font-size: clamp(1.1rem, 1.45vw, 1.25rem);
  font-weight: 500;
  transition: color 320ms ease;
}

.daily-brief-points li[data-active="true"] strong {
  color: var(--ink);
}

.daily-brief-points span:not(.daily-brief-number) {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.42;
}

/* Stage: three bespoke scenes cross-fade with the step that is in view. */
.brief-stage {
  position: relative;
  grid-area: stage;
  align-self: center;
  margin: 0;
}

.brief-stage::before {
  position: absolute;
  z-index: 0;
  inset: -8% -10%;
  background: radial-gradient(circle at 54% 46%, rgba(103, 112, 140, 0.16), rgba(103, 112, 140, 0) 64%);
  content: "";
  pointer-events: none;
}

.brief-stage-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-large);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42));
  box-shadow: 0 1.5rem 4rem rgba(7, 13, 26, 0.07);
}

.brief-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.965) translateY(0.75rem);
  transition: opacity 520ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.daily-brief-showcase[data-brief-scene="0"] .brief-scene[data-brief-scene-art="0"],
.daily-brief-showcase[data-brief-scene="1"] .brief-scene[data-brief-scene-art="1"],
.daily-brief-showcase[data-brief-scene="2"] .brief-scene[data-brief-scene-art="2"] {
  opacity: 1;
  transform: none;
}

.brief-sheet rect,
.brief-sheet circle {
  fill: rgba(7, 13, 26, 0.14);
}

.brief-sheet > rect:first-of-type {
  fill: var(--paper-bright);
  stroke: rgba(7, 13, 26, 0.1);
  stroke-width: 1;
}

.brief-sheet .brief-sheet-title {
  fill: rgba(7, 13, 26, 0.5);
}

.brief-sheet-row circle {
  fill: var(--slate);
}

.brief-sheet-row .is-meta {
  fill: rgba(7, 13, 26, 0.08);
}

.brief-sheet-row.is-dim {
  opacity: 0.45;
}

.brief-sheet.is-receded {
  opacity: 0.62;
}

.brief-sheet .brief-highlight {
  fill: var(--mint);
}

.brief-sheet-row.is-active circle {
  fill: var(--ink);
}

.brief-sheet-row.is-active rect {
  fill: rgba(7, 13, 26, 0.34);
}

.brief-sheet-row.is-active .is-meta {
  fill: rgba(7, 13, 26, 0.2);
}

.brief-fragments rect {
  fill: rgba(7, 13, 26, 0.12);
}

.brief-fragments rect.is-lit {
  fill: var(--mint);
  stroke: rgba(7, 13, 26, 0.08);
  stroke-width: 1;
}

.brief-threads path,
.brief-relevance,
.brief-loop {
  fill: none;
  stroke: rgba(7, 13, 26, 0.2);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 3 7;
}

.brief-relevance,
.brief-loop {
  stroke: rgba(103, 112, 140, 0.6);
}

.brief-chips rect {
  fill: rgba(255, 255, 255, 0.9);
  stroke: rgba(7, 13, 26, 0.12);
  stroke-width: 1;
}

.brief-you-ring {
  fill: none;
  stroke: rgba(7, 13, 26, 0.12);
  stroke-width: 1.25;
}

.brief-you-ring-mid {
  stroke: rgba(103, 112, 140, 0.5);
  stroke-dasharray: 3 6;
}

.brief-you-pulse {
  fill: none;
  stroke: rgba(103, 112, 140, 0.45);
  stroke-width: 1.25;
  opacity: 0;
}

.brief-you-core {
  fill: var(--ink);
}

.brief-loop-tip {
  fill: none;
  stroke: rgba(103, 112, 140, 0.75);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brief-ask-body,
.brief-ask-tail {
  fill: var(--ink);
}

.brief-wave rect {
  fill: var(--mint);
  transform-box: fill-box;
  transform-origin: center;
}

.brief-wave rect:nth-child(even) {
  fill: rgba(206, 252, 238, 0.68);
}

/* Motion: only the scene on stage animates. */
@keyframes briefDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes briefThread {
  to { stroke-dashoffset: -60; }
}

@keyframes briefPulse {
  0% { opacity: 0.5; transform: scale(0.7); }
  70% { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes briefWave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.15); }
}

.daily-brief-showcase[data-brief-scene="0"] .brief-scene[data-brief-scene-art="0"] .brief-fragments rect {
  animation: briefDrift 5.5s ease-in-out infinite;
}

.brief-fragments rect:nth-child(2) { animation-delay: -0.7s; }
.brief-fragments rect:nth-child(3) { animation-delay: -1.4s; }
.brief-fragments rect:nth-child(4) { animation-delay: -2.1s; }
.brief-fragments rect:nth-child(5) { animation-delay: -2.8s; }
.brief-fragments rect:nth-child(6) { animation-delay: -3.5s; }
.brief-fragments rect:nth-child(7) { animation-delay: -4.2s; }
.brief-fragments rect:nth-child(8) { animation-delay: -0.35s; }
.brief-fragments rect:nth-child(9) { animation-delay: -1.75s; }

.daily-brief-showcase[data-brief-scene="0"] .brief-scene[data-brief-scene-art="0"] .brief-threads path,
.daily-brief-showcase[data-brief-scene="1"] .brief-scene[data-brief-scene-art="1"] .brief-threads path {
  animation: briefThread 3.2s linear infinite;
}

.daily-brief-showcase[data-brief-scene="1"] .brief-you-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: briefPulse 3.4s ease-out infinite;
}

.daily-brief-showcase[data-brief-scene="2"] .brief-wave rect {
  animation: briefWave 1.35s ease-in-out infinite;
}

.brief-wave rect:nth-child(2) { animation-delay: 0.12s; }
.brief-wave rect:nth-child(3) { animation-delay: 0.24s; }
.brief-wave rect:nth-child(4) { animation-delay: 0.36s; }
.brief-wave rect:nth-child(5) { animation-delay: 0.18s; }
.brief-wave rect:nth-child(6) { animation-delay: 0.3s; }
.brief-wave rect:nth-child(7) { animation-delay: 0.42s; }

.has-js .daily-brief-showcase:not([data-revealed="true"]) .daily-brief-points li {
  opacity: 0;
  transform: translateY(0.65rem);
}

.has-js .daily-brief-showcase:not([data-revealed="true"]) .brief-stage-frame {
  opacity: 0;
  transform: translateY(0.9rem);
}

.brief-stage-frame {
  transition: opacity 620ms ease, transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.daily-brief-points li:nth-child(2) {
  transition-delay: 0s, 0s, 0s, 70ms, 70ms;
}

.daily-brief-points li:nth-child(3) {
  transition-delay: 0s, 0s, 0s, 140ms, 140ms;
}

@media (hover: hover) and (pointer: fine) {
  .daily-brief-points li:hover {
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.62);
  }

  .daily-brief-points li:hover strong {
    color: var(--ink);
  }
}

.product-copy h2,
.product-copy h3 {
  color: #fff;
}

.product-copy > p:not(.eyebrow) {
  max-width: 34rem;
  margin: 1.5rem 0 2rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}

.product-list {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
}

.product-list li::before {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--mint);
  content: "";
}

.vision-human {
  position: relative;
  padding-block: clamp(4.5rem, 7.5vw, 7rem);
  overflow: hidden;
  background:
    radial-gradient(120% 78% at 50% 64%, rgba(103, 112, 140, 0.13), transparent 68%),
    linear-gradient(180deg, var(--paper) 0, #f1f2f7 16%, #f1f2f7 84%, var(--paper) 100%);
}

/* The two statements sit on the same columns as the artwork below them: in the
   drawing the crowd starts at 2.6% of the width and the pair grid at 59.5%. */
.vision-scale-statements {
  display: grid;
  grid-template-columns: 2.6% 56.9% minmax(0, 1fr);
  align-items: start;
}

.vision-scale-statements .vision-scale-block:first-child {
  grid-column: 2;
}

.vision-scale-statements .vision-scale-block + .vision-scale-block {
  grid-column: 3;
}

.vision-scale-block .eyebrow {
  margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
  color: var(--slate-dark);
  font-size: 0.76rem;
  letter-spacing: 0.15em;
}

/* These two label their own column of the artwork; the site's bullet would
   read as a list marker rather than a heading cue. */
.vision-scale-block .eyebrow::before {
  content: none;
}

.vision-scale-block h2,
.vision-scale-block p.vision-scale-line {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(1.85rem, 2.75vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 1.04;
}

.vision-scale-block strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.vision-scale-block span {
  display: block;
  color: var(--slate-dark);
}

.vision-scale-figure {
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
}

.vision-scale-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.has-js .vision-human[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.has-js .vision-human[data-reveal] .vision-scale-block,
.has-js .vision-human[data-reveal] .vision-scale-figure {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 620ms ease, transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.has-js .vision-human[data-reveal][data-revealed="true"] .vision-scale-block,
.has-js .vision-human[data-reveal][data-revealed="true"] .vision-scale-figure {
  opacity: 1;
  transform: none;
}

.has-js .vision-human[data-reveal] .vision-scale-block + .vision-scale-block {
  transition-delay: 90ms;
}

.has-js .vision-human[data-reveal] .vision-scale-figure {
  transition-delay: 220ms;
}

.trust-promise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 2.8vw, 2.75rem);
  align-items: center;
  padding: 0.9rem clamp(1.25rem, 2.8vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
  background: var(--ink);
  box-shadow: 0 0.65rem 1.75rem rgba(7, 13, 26, 0.08);
}

.trust-promise-copy {
  display: contents;
}

.trust-promise-copy > .eyebrow {
  margin: 0;
  white-space: nowrap;
}

.trust-promise h2 {
  display: flex;
  min-width: 0;
  align-items: center;
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.2;
}

.trust-promise h2 span {
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.trust-promise h2 span + span::before {
  width: 1px;
  height: 1.1em;
  margin-inline: clamp(0.8rem, 2vw, 1.6rem);
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.3);
  content: "";
}

.trust-promise-link {
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.48);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 180ms ease, opacity 180ms ease;
}

.trust-promise-link:hover {
  border-color: #fff;
  opacity: 0.82;
}

.waitlist-section {
  padding-block: var(--space-section);
  text-align: center;
}

.waitlist-panel {
  padding: clamp(2.75rem, 4.5vw, 3.75rem) clamp(1.5rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  background:
    radial-gradient(125% 88% at 50% 0%, rgba(206, 252, 238, 0.42), transparent 64%),
    var(--paper-bright);
}

.waitlist-panel h2 {
  color: var(--ink);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
}

.waitlist-panel > h2 + p {
  max-width: 30rem;
  margin: 0.7rem auto 2rem;
  color: var(--ink-soft);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.36;
  text-wrap: balance;
}

.waitlist-form {
  display: grid;
  max-width: 44rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-inline: auto;
  padding: 0.35rem;
  border: 1px solid rgba(7, 13, 26, 0.12);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0.5rem 1.75rem rgba(7, 13, 26, 0.05);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.waitlist-form:hover {
  border-color: rgba(7, 13, 26, 0.22);
}

.waitlist-form:focus-within {
  border-color: rgba(7, 13, 26, 0.3);
  box-shadow: 0 0 0 0.2rem rgba(103, 112, 140, 0.32), 0 0.5rem 1.75rem rgba(7, 13, 26, 0.05);
}

.field {
  text-align: left;
}

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

.field input {
  width: 100%;
  min-height: 3.4rem;
  padding: 0.75rem 1.15rem;
  border: 0;
  border-radius: 999px;
  outline: none;
  color: var(--ink);
  background: transparent;
}

.field input::placeholder {
  color: var(--ink-faint);
}

.waitlist-form .field input:focus-visible {
  outline: none;
}

.waitlist-form .button {
  min-width: 13rem;
  min-height: 3.4rem;
  background: var(--ink);
  white-space: nowrap;
}

.waitlist-form .button:hover {
  background: #232c42;
  transform: none;
}

.waitlist-form .button:active {
  transform: scale(0.98);
}

.waitlist-form .button:disabled {
  opacity: 0.55;
  cursor: default;
}

body[data-page="home"] .section-head {
  margin-bottom: clamp(2.25rem, 3.5vw, 3.5rem);
}

body[data-page="home"] .section-head h2,
body[data-page="home"] .split-copy h2,
body[data-page="home"] .product-copy h2 {
  font-size: clamp(2.6rem, 4.2vw, 4.35rem);
}

.honeypot-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.lead-feedback {
  display: flex;
  min-height: 1.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.lead-feedback[data-state="success"] {
  color: var(--ink);
  font-weight: 500;
}

.lead-feedback[data-state="success"]::before {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
  content: "\2713";
  font-size: 0.8rem;
  line-height: 1;
}

.lead-feedback[data-state="error"] {
  color: #8f3f3f;
}

.secondary-waitlist-cta {
  display: flex;
  justify-content: center;
  margin: clamp(2.5rem, 4vw, 4rem) 0 0;
}

.secondary-waitlist-cta .text-link {
  font-size: 1.05rem;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.media-card {
  position: relative;
  min-height: 38rem;
  overflow: hidden;
  border-radius: var(--radius-large);
  background: #d8d4d0;
}

.media-card video,
.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card-copy {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  padding: 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 1.25rem;
  color: rgba(255, 255, 255, 0.93);
  background: rgba(7, 13, 26, 0.62);
  backdrop-filter: blur(0.8rem);
}

.media-card-copy h3 {
  margin-bottom: 0.5rem;
  color: #fff;
}

.media-card-copy p {
  margin-bottom: 0;
  font-size: 1rem;
}

.media-card::after {
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgba(7, 13, 26, 0.5));
  content: "";
  pointer-events: none;
}

.phone-video-stage {
  display: grid;
  grid-template-columns: minmax(20rem, 0.66fr) minmax(0, 0.8fr);
  min-height: 48rem;
  align-items: center;
  gap: clamp(3rem, 9vw, 9rem);
  padding: clamp(2rem, 6vw, 6rem);
  border-radius: var(--radius-large);
  background: #fff;
}

.conversation-video {
  position: relative;
  width: min(100%, 23rem);
  margin: auto;
  overflow: hidden;
  border-radius: var(--radius-large);
  /* Sits behind the clip so the loop dissolve dips to black, never to paper. */
  background: var(--ink);
  box-shadow: 0 2rem 5rem rgba(7, 13, 26, 0.22);
}

.conversation-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: inherit;
  object-fit: cover;
  transition: opacity 380ms ease;
}

/* Each clip ends on a caption and restarts on a different scene, so the loop
   dissolves through black instead of cutting. Driven by initVideoLoopFade. */
.conversation-video video.is-loop-fading {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .conversation-video video {
    transition: none;
  }
}

.conversation-sound {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 2;
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.42rem 0.8rem 0.42rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(7, 13, 26, 0.56);
  box-shadow: 0 0.5rem 1.5rem rgba(7, 13, 26, 0.24);
  backdrop-filter: blur(1rem) saturate(120%);
  cursor: pointer;
  transition: background-color 220ms ease, transform 220ms ease;
}

.conversation-sound-icon {
  display: flex;
  flex: 0 0 auto;
}

.conversation-sound svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

/* The browser's built-in [hidden] rule only covers HTML elements, not SVG. */
.conversation-sound svg[hidden] {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .conversation-sound:hover {
    background: rgba(7, 13, 26, 0.72);
    transform: scale(1.03);
  }
}

.learning-panel {
  padding: clamp(3rem, 7vw, 7rem);
  border-radius: var(--radius-large);
  background: var(--mint);
}

.learning-panel p:not(.eyebrow) {
  max-width: 52rem;
  margin: 1.6rem 0 0;
  color: rgba(7, 13, 26, 0.72);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.comparison-card {
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.5);
}

.comparison-card:last-child {
  border-color: rgba(132, 141, 171, 0.35);
  background: #fff;
  box-shadow: var(--shadow);
}

.comparison-card span {
  display: block;
  margin-bottom: 3rem;
  color: var(--ink-faint);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comparison-card blockquote {
  margin-bottom: 0;
  color: var(--ink);
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.2;
}

.email-demo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  margin-top: 3rem;
}

.email-demo > :first-child { grid-column: span 5; }
.email-demo > :last-child { grid-column: span 7; }

.spoken-note,
.email-draft {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-medium);
}

.spoken-note {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background: var(--slate);
}

.spoken-note .eyebrow {
  color: #fff;
}

.spoken-note blockquote {
  margin: 3rem 0;
  color: #fff;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.25;
}

.audio-wave {
  height: 2.5rem;
  opacity: 0.76;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 8px);
  mask-image: linear-gradient(0deg, transparent 5%, #000 30% 70%, transparent 95%);
}

.email-draft {
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.63);
}

.email-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
  color: var(--ink-faint);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.approval-pill {
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: var(--ink);
  background: var(--mint);
  letter-spacing: 0;
  text-transform: none;
}

.email-draft h3 {
  margin-bottom: 1.25rem;
}

.process-steps,
.control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.principle-card,
.control-card {
  min-height: 17rem;
}

.card-index {
  display: block;
  margin-bottom: 4rem;
  color: var(--ink-faint);
  font-size: 0.76rem;
}

.record-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(18rem, 0.55fr);
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 5vw, 5rem);
  border-radius: var(--radius-large);
  background: #fff;
}

.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-list li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.activity-list li:last-child {
  border-bottom: 0;
}

.activity-list time {
  color: var(--ink-faint);
  font-size: 0.8rem;
}

.activity-list strong {
  color: var(--ink);
  font-weight: 500;
}

.privacy-hero {
  padding: clamp(2.75rem, 4.5vw, 4rem) 0 clamp(2.5rem, 3.75vw, 3.5rem);
}

.privacy-hero .page-hero-copy {
  max-width: 72rem;
}

.privacy-hero h1 strong {
  color: var(--slate-dark);
  font-weight: inherit;
}

/* Below ~700px the balanced two-line break no longer fits and starts
   splitting clauses, so give each one its own line. */
@media (max-width: 700px) {
  .privacy-hero h1 > span,
  .privacy-hero h1 > strong {
    display: block;
  }
}

body[data-page="privacy"] .ownership-statement {
  position: relative;
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding: clamp(3.25rem, 6vw, 5.5rem) clamp(1.5rem, 4.8vw, 4.5rem);
  text-align: center;
  border: 1px solid rgba(7, 13, 26, 0.055);
  border-radius: var(--radius-large);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1.5rem 4rem rgba(7, 13, 26, 0.035);
}

body[data-page="privacy"] .ownership-lockmark,
body[data-page="privacy"] .ownership-intro,
body[data-page="privacy"] .ownership-signals {
  position: relative;
  z-index: 1;
}

body[data-page="privacy"] .ownership-intro {
  min-width: 0;
  max-width: 46rem;
}

body[data-page="privacy"] .ownership-lockmark {
  width: clamp(4.5rem, 7vw, 6.25rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  opacity: 1;
  transform: none;
  transition: opacity 900ms ease 90ms, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 90ms;
}

.has-js body[data-page="privacy"] .ownership-statement[data-reveal]:not([data-revealed="true"]) .ownership-lockmark {
  opacity: 0;
  transform: translateY(0.5rem) scale(0.965);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="privacy"] .ownership-lockmark,
  .has-js body[data-page="privacy"] .ownership-statement[data-reveal]:not([data-revealed="true"]) .ownership-lockmark {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

body[data-page="privacy"] .ownership-lockmark svg {
  display: block;
  width: 100%;
  height: auto;
}

body[data-page="privacy"] .ownership-intro h2 {
  max-width: 100%;
  font-size: clamp(2.65rem, 4.5vw, 4.75rem);
  text-wrap: balance;
}

body[data-page="privacy"] .ownership-intro .eyebrow {
  margin-bottom: 1rem;
  gap: 0;
  color: rgba(67, 77, 110, 0.82);
  letter-spacing: 0.13em;
}

/* centred lockup reads cleaner without the leading dot */
body[data-page="privacy"] .ownership-intro .eyebrow::before {
  content: none;
}

body[data-page="privacy"] .ownership-intro > p:last-child {
  max-width: 41rem;
  margin: 1.35rem auto 0;
  font-size: clamp(1.15rem, 1.75vw, 1.45rem);
  line-height: 1.5;
}

.has-js body[data-page="privacy"] .ownership-statement[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

body[data-page="privacy"] .ownership-signals {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 2.5vw, 2.5rem);
  margin-top: clamp(2.75rem, 4.5vw, 4rem);
  margin-bottom: 0;
  padding-top: clamp(2.25rem, 3.5vw, 3rem);
  padding-left: 0;
  border-top: 1px solid rgba(7, 13, 26, 0.075);
  list-style: none;
}

body[data-page="privacy"] .ownership-signal {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-content: start;
  justify-items: center;
  padding: 0;
  text-align: center;
}

body[data-page="privacy"] .ownership-signal-icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
  background: var(--slate-dark);
  box-shadow: 0 0.5rem 1.35rem rgba(7, 13, 26, 0.08), inset 0 0 0 0.3rem rgba(255, 255, 255, 0.045);
}

body[data-page="privacy"] .ownership-signal-icon svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body[data-page="privacy"] .ownership-signal h3 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  line-height: 1.16;
}

body[data-page="privacy"] .ownership-signal p {
  max-width: 22rem;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.55;
}

.privacy-patent-section {
  position: relative;
  isolation: isolate;
}

.privacy-patent-section::before {
  position: absolute;
  inset: 5% 0;
  z-index: -2;
  background:
    radial-gradient(circle at 72% 44%, rgba(132, 141, 171, 0.12), transparent 28rem),
    radial-gradient(circle at 22% 58%, rgba(206, 252, 238, 0.2), transparent 23rem),
    linear-gradient(180deg, transparent, rgba(241, 242, 247, 0.76) 24%, rgba(241, 242, 247, 0.76) 76%, transparent);
  content: "";
  pointer-events: none;
}

.privacy-patent-section::after {
  position: absolute;
  inset: 12% 3% 8% 38%;
  z-index: -1;
  background-image:
    linear-gradient(24deg, transparent 49.75%, rgba(111, 120, 151, 0.42) 50%, transparent 50.25%),
    linear-gradient(152deg, transparent 49.75%, rgba(111, 120, 151, 0.34) 50%, transparent 50.25%),
    radial-gradient(circle, rgba(111, 120, 151, 0.58) 0 1.5px, transparent 1.8px);
  background-position: center, center, 0 0;
  background-size: 8.5rem 7rem, 11rem 8.5rem, 3.7rem 3.7rem;
  content: "";
  opacity: 0.055;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 8%, transparent 72%);
  pointer-events: none;
}

.patent-panel {
  position: relative;
  display: grid;
  min-height: clamp(31rem, 42vw, 36rem);
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 5.4vw, 5.25rem);
  overflow: hidden;
  border: 1px solid rgba(111, 120, 151, 0.22);
  border-radius: clamp(1.75rem, 2.5vw, 2.25rem);
  background:
    radial-gradient(circle at 80% 42%, rgba(255, 255, 255, 0.84), transparent 24rem),
    radial-gradient(circle at 8% 10%, rgba(206, 252, 238, 0.15), transparent 20rem),
    linear-gradient(135deg, rgba(255, 254, 251, 0.78), rgba(237, 239, 246, 0.7));
  box-shadow:
    0 2.5rem 6rem rgba(52, 60, 88, 0.1),
    0 0.5rem 1.5rem rgba(52, 60, 88, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  isolation: isolate;
  backdrop-filter: blur(1.5rem) saturate(115%);
}

.patent-panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/noise.webp");
  content: "";
  opacity: 0.08;
  pointer-events: none;
}

.patent-panel::after {
  position: absolute;
  bottom: -5rem;
  left: -4rem;
  z-index: -1;
  width: clamp(16rem, 27vw, 24rem);
  aspect-ratio: 1;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
  content: "";
  opacity: 0.028;
  transform: rotate(-7deg);
  pointer-events: none;
}

.patent-heading,
.patent-card {
  position: relative;
  z-index: 1;
}

.patent-eyebrow {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: clamp(1.4rem, 2vw, 1.9rem);
  color: var(--slate-dark);
}

.patent-eyebrow-mark {
  position: relative;
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  border: 1px solid rgba(111, 120, 151, 0.38);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 0.25rem rgba(206, 252, 238, 0.28);
}

.patent-eyebrow-mark::before,
.patent-eyebrow-mark::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--slate-dark);
  content: "";
  transform: translate(-50%, -50%);
}

.patent-eyebrow-mark::before {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
}

.patent-eyebrow-mark::after {
  width: 0.72rem;
  height: 1px;
  box-shadow: 0 0.26rem 0 rgba(111, 120, 151, 0.45), 0 -0.26rem 0 rgba(111, 120, 151, 0.45);
}

.patent-heading h2 {
  max-width: 11.5ch;
  font-size: clamp(3.65rem, 5.5vw, 4.75rem);
  letter-spacing: -0.052em;
  line-height: 0.93;
}

.patent-heading h2 span {
  color: var(--slate-dark);
}

.patent-summary {
  max-width: 27rem;
  margin: clamp(1.7rem, 2.8vw, 2.35rem) 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  letter-spacing: -0.018em;
  line-height: 1.48;
}

.patent-card {
  min-width: 0;
  padding: clamp(2.25rem, 3.5vw, 3.35rem);
  overflow: hidden;
  border: 1px solid rgba(111, 120, 151, 0.25);
  border-radius: clamp(1.6rem, 2.4vw, 2rem);
  background:
    radial-gradient(circle at 82% 15%, rgba(206, 252, 238, 0.22), transparent 13rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(249, 250, 253, 0.66));
  box-shadow:
    0 1.75rem 4rem rgba(52, 60, 88, 0.12),
    0 0.35rem 1rem rgba(52, 60, 88, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  transition: border-color 520ms ease, box-shadow 520ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.patent-card::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(126deg, transparent 48.5%, rgba(111, 120, 151, 0.06) 49%, transparent 49.5%),
    radial-gradient(circle, rgba(111, 120, 151, 0.3) 0 1px, transparent 1.4px);
  background-position: center, 0 0;
  background-size: 9rem 7rem, 3.25rem 3.25rem;
  content: "";
  opacity: 0.16;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000);
  mask-image: linear-gradient(90deg, transparent 28%, #000);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .patent-card:hover {
    border-color: rgba(111, 120, 151, 0.42);
    box-shadow:
      0 2rem 4.5rem rgba(52, 60, 88, 0.135),
      0 0.4rem 1.1rem rgba(52, 60, 88, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }

  .patent-card:hover::after {
    transform: translate3d(4px, -3px, 0);
  }
}

.patent-card-label,
.patent-number,
.patent-card h3,
.patent-metadata {
  position: relative;
  z-index: 1;
}

.patent-card-label {
  margin: 0 0 1.15rem;
  color: var(--slate-dark);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
}

.patent-number {
  margin: 0;
  color: var(--ink);
  font-size: clamp(3.45rem, 5.1vw, 4.45rem);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.92;
  white-space: nowrap;
}

.patent-card h3 {
  max-width: 21ch;
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ink-soft);
  font-size: clamp(1.2rem, 1.75vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.25;
}

.patent-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 4vw, 3.65rem);
  padding-top: clamp(1.5rem, 2.4vw, 2rem);
  border-top: 1px solid rgba(111, 120, 151, 0.2);
}

.patent-metadata p {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-right: clamp(1rem, 2.5vw, 2rem);
}

.patent-metadata p + p {
  padding-right: 0;
  padding-left: clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid rgba(111, 120, 151, 0.2);
}

.patent-metadata span {
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.patent-metadata strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.patent-seal {
  position: absolute;
  top: clamp(1.75rem, 3vw, 2.7rem);
  right: clamp(1.75rem, 3vw, 2.7rem);
  z-index: 1;
  display: grid;
  width: clamp(4.75rem, 7vw, 6rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(111, 120, 151, 0.12);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.55rem rgba(132, 141, 171, 0.035), inset 0 0 0 0.65rem rgba(111, 120, 151, 0.1);
  opacity: 0.55;
}

.patent-seal::before,
.patent-seal::after {
  position: absolute;
  border: 1px solid rgba(111, 120, 151, 0.22);
  border-radius: 50%;
  content: "";
}

.patent-seal::before {
  inset: 0.95rem;
  border-style: dashed;
}

.patent-seal::after {
  inset: 1.45rem;
}

.patent-seal span {
  width: 1.5rem;
  height: 1.5rem;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
  opacity: 0.7;
}

.has-js .patent-card[data-reveal] {
  transform: translateY(1rem);
  transition: opacity 620ms ease, transform 680ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 520ms ease, box-shadow 520ms ease;
}

.has-js .patent-card[data-reveal][data-revealed="true"] {
  transform: none;
}

.has-js .patent-card[data-reveal] .patent-number {
  filter: blur(7px);
  opacity: 0;
  transform: translateY(0.35rem);
  transition: filter 650ms 130ms ease, opacity 560ms 130ms ease, transform 650ms 130ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.has-js .patent-card[data-reveal][data-revealed="true"] .patent-number {
  filter: none;
  opacity: 1;
  transform: none;
}

body[data-page="privacy"] .privacy-faq {
  padding-bottom: var(--space-section);
}

body[data-page="privacy"] .privacy-faq + .site-section {
  padding-top: 0;
}

body[data-page="privacy"] .privacy-faq + .site-section .secondary-waitlist-cta {
  margin-top: 0;
}

.privacy-faq-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.privacy-faq-layout > :first-child { grid-column: 1 / span 4; }
.privacy-faq-layout > :last-child { grid-column: 6 / span 7; }

.privacy-faq-heading {
  position: sticky;
  top: 8rem;
}

.privacy-faq-heading h2 {
  max-width: 8ch;
}

.privacy-faq-heading > p:last-child {
  max-width: 23rem;
  margin-top: 1.5rem;
}

.privacy-faq-list {
  border-top: 1px solid var(--line);
}

.privacy-faq-item {
  border-bottom: 1px solid var(--line);
}

.privacy-faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem;
  gap: 1.5rem;
  align-items: center;
  padding-block: 1.65rem;
  color: var(--ink);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  cursor: pointer;
  list-style: none;
}

.privacy-faq-item summary::-webkit-details-marker {
  display: none;
}

.privacy-faq-item summary:focus-visible {
  border-radius: 0.25rem;
}

.privacy-faq-toggle {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.privacy-faq-toggle::before,
.privacy-faq-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 1px;
  background: var(--ink);
  content: "";
  transform: translate(-50%, -50%);
}

.privacy-faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.privacy-faq-item[open] .privacy-faq-toggle {
  border-color: transparent;
  background: var(--mint);
  transform: rotate(45deg);
}

.privacy-faq-item > p {
  max-width: 44rem;
  margin: -0.25rem 4rem 0;
  padding-bottom: 1.75rem;
}

.team-hero {
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.team-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.45fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.team-hero-grid > p {
  margin-bottom: 0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.team-section-head {
  margin-bottom: 2.5rem;
}

.team-section-head h1,
.team-page-title {
  font-size: clamp(2.75rem, 5vw, 5.25rem);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: stretch;
}

.team-card {
  grid-column: span 3;
}

/* The advisors row holds three cards in a four-across grid, which left a
   card-sized gap on the right. Narrow the grid to that row's own width and
   centre it, keeping the cards the same size as the founders' above. */
@media (min-width: 1051px) {
  .team-grid.secondary {
    max-width: calc(75% - 0.25 * var(--grid-gutter));
    margin-inline: auto;
  }

  .team-grid.secondary .team-card {
    grid-column: span 4;
  }
}

.team-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.58);
}

.team-photo {
  flex: 0 0 auto;
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
  background: linear-gradient(160deg, #e4e1dd, #d7d4d0);
}

.team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--team-photo-x, 50%) var(--team-photo-y, 50%);
  filter: var(--team-photo-filter, none);
  transform: scale(var(--team-photo-scale, 1));
  transform-origin: var(--team-photo-x, 50%) var(--team-photo-y, 50%);
}

.team-photo--bejoy {
  --team-photo-y: 29%;
  --team-photo-scale: 1.02;
  --team-photo-filter: brightness(1.01) contrast(0.97) saturate(0.92);
}

.team-photo--paul {
  --team-photo-y: 21%;
  --team-photo-filter: brightness(1.055) contrast(0.95) saturate(0.93);
}

.team-photo--duke {
  --team-photo-y: 5%;
  --team-photo-filter: brightness(1.01) contrast(0.98) saturate(0.94);
}

.team-photo--grace {
  --team-photo-y: 23%;
  --team-photo-scale: 1.025;
  --team-photo-filter: brightness(0.99) contrast(0.97) saturate(0.91);
}

.team-photo--anuj {
  --team-photo-y: 24%;
  --team-photo-scale: 1.035;
  --team-photo-filter: brightness(1.02) contrast(0.95) saturate(0.87);
}

.team-photo--tingkham {
  --team-photo-y: 0%;
  --team-photo-filter: brightness(1.01) contrast(0.98) saturate(0.92);
}

.team-photo--arun {
  --team-photo-y: 32%;
  --team-photo-filter: brightness(1.035) contrast(0.95) saturate(0.9);
}

.team-card-copy {
  padding: 1.2rem 1.25rem 1.3rem;
}

.team-role {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.team-card-copy h3 {
  margin-bottom: 0.65rem;
  font-size: 1.55rem;
}

.team-card-copy p {
  margin-bottom: 0;
  font-size: 0.96rem;
}

.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.has-js [data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
}

@media (max-width: 1050px) {
  .home-hero-copy,
  .section-head > :first-child,
  .section-head > :last-child {
    grid-column: 1 / -1;
  }

  .team-hero-grid {
    grid-template-columns: 1fr;
  }

  .home-hero-side,
  .section-head > p,
  .team-hero-grid > p {
    max-width: 39rem;
  }

  .learning-manifesto-head {
    row-gap: 1.75rem;
  }

  .learning-manifesto-head > :first-child,
  .learning-manifesto-lede {
    grid-column: 1 / -1;
  }

  .learning-manifesto-lede {
    max-width: 20rem;
  }

  .learning-art-category-label {
    font-size: 14px;
    letter-spacing: 1.1px;
  }

  .pillar-card {
    grid-column: span 6;
  }

  .team-card {
    grid-column: span 6;
  }

  body[data-page="privacy"] .ownership-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 6vw, 4rem);
    row-gap: 0;
  }

  body[data-page="privacy"] .ownership-signal:nth-child(n + 3) {
    margin-top: clamp(2rem, 4vw, 2.75rem);
    padding-top: clamp(2rem, 4vw, 2.75rem);
    border-top: 1px solid rgba(7, 13, 26, 0.065);
  }
}

@media (max-width: 900px) {
  body {
    font-size: 1rem;
  }

  .site-container {
    width: min(calc(100% - 2rem), var(--site-width));
  }

  .site-header-inner {
    grid-template-columns: 1fr auto;
  }

  .site-nav-toggle {
    display: block;
    justify-self: end;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 1rem;
    left: 1rem;
    display: grid;
    visibility: hidden;
    padding: 0.6rem;
    border-radius: 1.25rem;
    background: rgba(247, 245, 242, 0.98);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }

  .site-nav a {
    padding: 1rem;
    border-radius: 0.9rem;
    font-size: 1.05rem;
  }

  .site-header[data-menu-open="true"] .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .site-header[data-menu-open="true"] .site-nav-toggle span:first-child {
    transform: translateY(0.31rem) rotate(45deg);
  }

  .site-header[data-menu-open="true"] .site-nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-header[data-menu-open="true"] .site-nav-toggle span:last-child {
    transform: translateY(-0.31rem) rotate(-45deg);
  }

  .site-header-cta {
    display: none;
  }

  .site-nav-cta {
    display: inline-flex;
    width: 100%;
    margin-top: 0.35rem;
  }

  .split-section > :first-child,
  .split-section > :last-child {
    grid-column: 1 / -1;
  }

  .product-stage,
.phone-video-stage,
.record-panel,
.patent-panel {
    grid-template-columns: 1fr;
  }

  .media-card {
    min-height: 32rem;
  }

  .vision-human {
    padding-block: clamp(3.5rem, 8vw, 5rem);
  }

  .vision-scale-statements {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }

  .vision-scale-statements .vision-scale-block:first-child,
  .vision-scale-statements .vision-scale-block + .vision-scale-block {
    grid-column: 1;
  }

  .vision-scale-block h2,
  .vision-scale-block p.vision-scale-line {
    max-width: 16ch;
    font-size: clamp(2.1rem, 5.4vw, 2.9rem);
  }

  /* Run the diagram to the viewport edges so it keeps some scale once the
     container narrows. .vision-human clips the overflow. */
  .vision-scale-figure {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .product-stage {
    min-height: 0;
  }

  .product-stage-evidence {
    gap: 3rem;
  }

  .daily-brief-showcase {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "stage"
      "steps";
    gap: 1.75rem;
    padding-inline: 1rem;
  }

  .daily-brief-heading h2 {
    max-width: 11ch;
    font-size: clamp(2.75rem, 6vw, 3.25rem);
  }

  .brief-stage {
    justify-self: center;
    width: min(100%, 26rem);
  }

  .phone-video-stage {
    min-height: 0;
  }

  body[data-page="privacy"] .ownership-statement {
    padding: clamp(2.75rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  }

  body[data-page="privacy"] .ownership-intro {
    max-width: none;
  }

  body[data-page="privacy"] .ownership-signal {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0;
  }

  body[data-page="privacy"] .ownership-signal h3 {
    font-size: 1.2rem;
  }

  .learning-ownership-statement {
    font-size: clamp(1.65rem, 3.5vw, 2.4rem);
  }

  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {

  .learning-ownership-line {
    display: block;
    margin-top: 0;
    padding: 1.25rem 0 0.5rem;
  }

  .learning-ownership-line::before {
    inset: -1rem -1.5rem -0.5rem;
    background: radial-gradient(ellipse 90% 82% at 30% 56%, rgba(206, 252, 238, 0.14), transparent 76%);
  }

  .learning-ownership-kicker {
    margin: 0 0 1.15rem;
  }

  .learning-ownership-statement {
    max-width: 21rem;
    font-size: clamp(1.75rem, 7.2vw, 2.35rem);
    line-height: 1.08;
  }

  .learning-ownership-statement > span,
  .learning-ownership-statement > strong {
    display: block;
  }

  .learning-ownership-statement > strong {
    margin-top: 0.16em;
    margin-left: 0;
  }

  .learning-ownership-statement > em {
    margin-top: 0.9rem;
    font-size: 0.95rem;
  }

  .trust-promise {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem 1rem;
    padding: 0.8rem 1rem;
    border-radius: 0.65rem;
  }

  .trust-promise-copy > .eyebrow {
    grid-row: 1;
    grid-column: 1;
  }

  .trust-promise h2 {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.35rem;
    width: 100%;
  }

  .trust-promise h2 span + span::before {
    display: none;
  }

  .trust-promise-link {
    grid-row: 1;
    grid-column: 2;
    width: fit-content;
  }
}

@media (max-width: 680px) {
  h1 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  h2 {
    font-size: clamp(2.4rem, 11vw, 3.5rem);
  }

  .vision-human {
    padding-block: 3.25rem;
  }

  .vision-scale-block h2,
  .vision-scale-block p.vision-scale-line {
    max-width: 15ch;
    font-size: clamp(1.95rem, 8.2vw, 2.45rem);
  }

  .site-section {
    padding-block: 4.75rem;
  }

  .site-section + .site-section,
  .page-hero + .site-section {
    padding-top: var(--space-section-tight);
  }

  .page-hero,
  .home-hero {
    padding-top: 2.5rem;
  }

  .home-hero-copy {
    gap: 1.5rem;
  }

  .anthem-frame {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .anthem-frame::before {
    width: 14rem;
    height: 14rem;
  }

  .anthem-frame::after {
    width: 24rem;
    height: 24rem;
  }

  .anthem-label {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
  }

  .statement-panel {
    padding: 2.25rem 1.5rem;
  }

  .statement-panel blockquote {
    font-size: clamp(2.05rem, 9.5vw, 2.45rem);
    line-height: 1.04;
  }

  .learning-manifesto {
    padding-block: 2rem;
  }

  .learning-manifesto h2 {
    font-size: clamp(2.75rem, 12vw, 4.8rem);
  }

  .learning-manifesto-head {
    gap: 1.35rem;
  }

  .learning-manifesto-lede {
    max-width: 19rem;
    margin-left: 0;
  }

  .learning-manifesto-copy {
    row-gap: 2.5rem;
    align-items: start;
    margin: 2.35rem 0 3rem;
    padding-block: 2rem;
  }

  .learning-manifesto-thesis,
  .learning-manifesto-art {
    grid-column: 1 / -1;
  }

  .learning-manifesto-copy::before {
    background:
      radial-gradient(ellipse 70% 27% at 50% 49%, rgba(247, 245, 242, 0.82), rgba(247, 245, 242, 0.35) 60%, transparent 88%),
      radial-gradient(ellipse 90% 45% at 55% 64%, rgba(206, 252, 238, 0.08), transparent 76%);
  }

  .learning-manifesto-thesis small {
    margin-bottom: 2.5rem;
  }

  .learning-manifesto-thesis em {
    font-size: 0.48em;
  }

  .learning-manifesto-art {
    width: min(100%, 26rem);
    min-height: 0;
    margin-inline: auto;
    transform: none;
  }

  .learning-manifesto-art svg {
    width: 100%;
    max-height: 20rem;
    margin-left: 0;
  }

  .learning-art-category-labels {
    display: none;
  }

  .learning-art-mobile-labels {
    display: grid;
    width: min(100%, 19rem);
    grid-template-columns: repeat(2, max-content);
    gap: 0.65rem clamp(1.75rem, 7vw, 3rem);
    justify-content: center;
    margin: 0.65rem auto 0;
    padding: 0;
    color: var(--slate-dark);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.2;
    list-style: none;
    text-transform: uppercase;
  }

  .learning-art-mobile-labels li {
    opacity: 0.73;
  }

  .media-grid,
  .process-steps,
  .control-grid,
  .site-footer-grid {
    grid-template-columns: 1fr;
  }

  .site-footer-brand {
    grid-column: auto;
  }

  body[data-page="privacy"] .ownership-statement {
    padding: 2.5rem 1.5rem;
  }

  body[data-page="privacy"] .ownership-signals {
    grid-template-columns: 1fr;
    margin-top: 1.25rem;
    padding-top: 0.35rem;
    border-top-color: rgba(7, 13, 26, 0.075);
  }

  body[data-page="privacy"] .ownership-signal,
  body[data-page="privacy"] .ownership-signal + .ownership-signal {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    margin-top: 0;
    padding: 1.4rem 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    border-left: 0;
  }

  body[data-page="privacy"] .ownership-signal:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  body[data-page="privacy"] .ownership-signal-icon {
    width: 3.65rem;
    height: 3.65rem;
  }

  body[data-page="privacy"] .ownership-signal-icon svg {
    width: 1.85rem;
    height: 1.85rem;
  }

  body[data-page="privacy"] .ownership-signal h3 {
    font-size: 1.2rem;
  }

  body[data-page="privacy"] .ownership-intro h2 {
    font-size: clamp(2.25rem, 10vw, 3.2rem);
  }

  .pillar-card {
    min-height: 0;
  }

  .pillar-number {
    margin-bottom: 1.75rem;
  }

  .product-stage,
  .phone-video-stage,
  .learning-panel,
  body[data-page="privacy"] .ownership-statement,
  .statement-panel,
  .waitlist-panel {
    border-radius: 1.5rem;
  }

  .patent-panel {
    min-height: 0;
    gap: 2rem;
    padding: 2rem 1.25rem;
    border-radius: 1.5rem;
  }

  .patent-heading h2 {
    font-size: clamp(2.15rem, 10vw, 2.75rem);
  }

  .patent-details {
    grid-template-columns: 1fr;
  }

  .patent-details p {
    min-height: 0;
    min-height: 7.25rem;
    padding: 1.15rem;
  }

  .patent-details p + p {
    border-top: 1px solid rgba(111, 120, 151, 0.16);
  }

  .product-phone {
    width: min(80%, 20rem);
  }

  .product-stage-evidence {
    gap: 2.25rem;
  }

  .daily-brief-showcase {
    gap: 1.5rem;
    padding: 1.75rem 0.25rem 1.25rem;
  }

  .daily-brief-heading h2 {
    font-size: clamp(2.65rem, 11vw, 3.1rem);
  }

  .daily-brief-lede {
    margin-top: 1rem;
    font-size: 1.15rem;
  }

  .daily-brief-points li {
    grid-template-columns: 2.15rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.85rem 0.75rem;
  }

  .daily-brief-points li::after {
    top: 3.55rem;
    left: 1.79rem;
  }

  .daily-brief-number {
    width: 2.15rem;
    height: 2.15rem;
    font-size: 0.72rem;
  }

  .privacy-faq-heading {
    position: static;
  }

  .privacy-faq-heading h2 {
    max-width: 10ch;
  }

  .privacy-faq-item > p {
    margin-right: 0;
    margin-left: 0;
  }

  .waitlist-panel {
    padding: clamp(2.5rem, 8vw, 3rem) 1.5rem;
  }

  .waitlist-form {
    grid-template-columns: 1fr;
    padding: 0.5rem;
    border-radius: 1.65rem;
  }

  .waitlist-form .button {
    width: 100%;
    min-width: 0;
  }

  .team-photo {
    aspect-ratio: 4 / 4.25;
  }

  .team-photo--bejoy {
    --team-photo-y: 30%;
  }

  .team-photo--paul {
    --team-photo-y: 24%;
  }

  .team-photo--duke {
    --team-photo-y: 3%;
  }

  .team-photo--grace {
    --team-photo-y: 30%;
  }

  .team-photo--anuj {
    --team-photo-y: 26%;
  }

  .team-photo--tingkham {
    --team-photo-y: 5%;
  }

  .team-photo--arun {
    --team-photo-y: 26%;
  }

  .site-footer-copyright {
    margin-top: 3rem;
    line-height: 1.5;
  }
}

/* Premium type and spacing pass: a quieter, product-led visual rhythm. */

body {
  font-size: 1.0625rem;
  line-height: 1.5;
}

h1,
h2,
h3 {
  letter-spacing: -0.032em;
  line-height: 1.04;
}

h1 {
  font-size: clamp(3.25rem, 5.4vw, 5.25rem);
}

h2 {
  font-size: clamp(2.4rem, 3.9vw, 4rem);
}

h3 {
  font-size: clamp(1.4rem, 1.8vw, 1.85rem);
  letter-spacing: -0.022em;
  line-height: 1.1;
}

.site-header-mount,
.site-header-inner {
  height: 3.75rem;
  min-height: 3.75rem;
}

.site-header {
  border-bottom-color: rgba(7, 13, 26, 0.08);
  background: rgba(247, 245, 242, 0.82);
  backdrop-filter: saturate(180%) blur(1.25rem);
}

.site-header-inner {
  gap: 1.25rem;
}

.site-brand img {
  width: 4rem;
}

.site-nav {
  gap: 0.15rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.site-nav a {
  padding: 0.65rem 0.85rem;
  font-size: 0.8rem;
  letter-spacing: -0.01em;
}

.site-nav a:hover {
  background: rgba(255, 255, 255, 0.64);
}

.site-nav a[aria-current="page"] {
  background: transparent;
  font-weight: 500;
}

.button {
  min-height: 3.25rem;
  padding-inline: 1.55rem;
  font-size: 0.95rem;
}

.button-small {
  min-height: 2.45rem;
  padding-inline: 1.05rem;
  font-size: 0.8rem;
}

.eyebrow {
  margin-bottom: 0.95rem;
  font-size: 0.8rem;
  letter-spacing: 0.085em;
}

.home-hero {
  padding: clamp(3.5rem, 5vw, 4.5rem) 0 clamp(4.25rem, 6vw, 5.5rem);
}

.home-hero-copy {
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.4fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-bottom: clamp(3rem, 4.5vw, 4.25rem);
}

.home-hero-copy h1 {
  max-width: 54rem;
}

.home-hero-side p {
  margin-bottom: 1.4rem;
  font-size: clamp(1.08rem, 1.45vw, 1.3rem);
  line-height: 1.42;
}

.page-hero {
  padding: clamp(3.75rem, 5.5vw, 5rem) 0 var(--space-section);
}

.page-hero-copy {
  max-width: 61rem;
}

.page-hero-copy > p:not(.eyebrow) {
  max-width: 43rem;
  margin-top: 1.6rem;
  font-size: clamp(1.12rem, 1.55vw, 1.4rem);
  line-height: 1.42;
}

.section-head {
  row-gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: clamp(2.25rem, 4vw, 4rem);
}

.section-head > p {
  max-width: 28rem;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.45;
}

.learning-manifesto h2 {
  font-size: clamp(2.75rem, 4.6vw, 3.45rem);
  line-height: 0.98;
}

body[data-page="home"] .section-head h2,
body[data-page="home"] .split-copy h2,
body[data-page="home"] .product-copy h2 {
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
}

.daily-brief-heading h2 {
  font-size: clamp(2.5rem, 3.6vw, 3.6rem);
}

body[data-page="privacy"] .ownership-intro h2 {
  font-size: clamp(2.4rem, 3.7vw, 3.8rem);
}

.team-section-head h1,
.team-page-title {
  font-size: clamp(2.65rem, 4.3vw, 4.4rem);
}

body[data-page="avtar"] .section-head h2,
body[data-page="avtar"] .split-copy h2,
.avtar-control-intro h2 {
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
}

body[data-page="avtar"] .comparison-intro h2 {
  font-size: clamp(2.35rem, 3.25vw, 3.4rem);
}

@media (max-width: 1050px) {
  .home-hero-copy {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body {
    font-size: 1rem;
  }

  .site-header-inner {
    grid-template-columns: 1fr auto;
  }

  .site-brand img {
    width: 3.65rem;
  }

  .site-nav-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .site-nav {
    top: calc(100% + 0.45rem);
    padding: 0.5rem;
    border: 1px solid var(--line);
    background: rgba(247, 245, 242, 0.98);
  }

  .site-nav a {
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
  }

  .site-nav a[aria-current="page"] {
    background: #fff;
  }
}

@media (max-width: 680px) {
  h1 {
    font-size: clamp(2.7rem, 11vw, 3.5rem);
  }

  h2 {
    font-size: clamp(2.25rem, 9.5vw, 3rem);
  }

  .home-hero,
  .page-hero {
    padding-top: 3rem;
  }

  .home-hero-copy {
    gap: 1.35rem;
    margin-bottom: 2.75rem;
  }

  .learning-manifesto h2 {
    font-size: clamp(2.3rem, 9.9vw, 3.25rem);
    line-height: 1;
  }

  body[data-page="home"] .section-head h2,
body[data-page="home"] .split-copy h2,
body[data-page="home"] .product-copy h2,
.daily-brief-heading h2,
body[data-page="privacy"] .ownership-intro h2,
.team-section-head h1,
.team-page-title,
body[data-page="avtar"] .section-head h2,
body[data-page="avtar"] .split-copy h2,
.avtar-control-intro h2,
body[data-page="avtar"] .comparison-intro h2 {
  font-size: clamp(2.2rem, 9.5vw, 2.85rem);
  }
}

/* Patent proof: open editorial composition without nested surfaces. */
body[data-page="privacy"] .privacy-patent-section {
  padding-bottom: var(--space-section);
  background: none;
}

.privacy-patent-section::before,
.privacy-patent-section::after {
  display: none;
}

.patent-composition {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(4rem, 7vw, 6.25rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.patent-heading,
.patent-composition > :first-child { grid-column: 1 / span 5; }

.patent-proof {
  position: relative;
  min-width: 0;
  grid-column: 7 / span 6;
}

.patent-eyebrow-mark {
  background: transparent;
  box-shadow: inset 0 0 0 0.25rem rgba(206, 252, 238, 0.22);
}

.patent-heading h2 {
  max-width: 11.5ch;
  font-size: clamp(3.35rem, 5.1vw, 4.5rem);
  letter-spacing: -0.048em;
  line-height: 0.95;
}

.patent-proof {
  padding: clamp(0.5rem, 1vw, 1rem) clamp(4rem, 7vw, 6rem) clamp(0.5rem, 1vw, 1rem) clamp(3rem, 5vw, 5rem);
  border-left: 1px solid rgba(111, 120, 151, 0.25);
}

.patent-proof-label {
  margin: 0 0 1.1rem;
  color: var(--slate-dark);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
}

.patent-proof .patent-number {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.65rem, 3.65vw, 3.4rem);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}

.patent-proof h3 {
  max-width: 24ch;
  margin-top: clamp(1.25rem, 2vw, 1.7rem);
  color: var(--ink);
  font-size: clamp(1.25rem, 1.65vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.3;
}

.patent-proof .patent-metadata {
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
}

.patent-proof .patent-status {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  margin: clamp(1rem, 1.6vw, 1.35rem) 0 0;
  padding-top: clamp(1rem, 1.6vw, 1.35rem);
  border-top: 1px solid rgba(111, 120, 151, 0.2);
}

.patent-proof .patent-status span {
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.patent-proof .patent-status strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.patent-proof .patent-seal {
  top: 0;
  right: 0;
  width: clamp(3.75rem, 5vw, 4.5rem);
  border-color: rgba(111, 120, 151, 0.24);
  box-shadow: inset 0 0 0 0.45rem rgba(132, 141, 171, 0.05), inset 0 0 0 0.52rem rgba(111, 120, 151, 0.15);
  opacity: 0.72;
}

.patent-proof .patent-seal::before,
.patent-proof .patent-seal::after {
  border-color: rgba(111, 120, 151, 0.4);
}

.patent-proof .patent-seal::before {
  inset: 0.75rem;
}

.patent-proof .patent-seal::after {
  inset: 1.15rem;
}

.patent-proof .patent-seal span {
  width: 1.15rem;
  height: 1.15rem;
  opacity: 0.92;
}

.has-js .patent-proof[data-reveal] {
  transform: translateY(0.85rem);
  transition: opacity 620ms ease, transform 680ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.has-js .patent-proof[data-reveal][data-revealed="true"] {
  transform: none;
}

.has-js .patent-proof[data-reveal] .patent-number {
  filter: blur(5px);
  opacity: 0;
  transform: translateY(0.3rem);
  transition: filter 600ms 120ms ease, opacity 520ms 120ms ease, transform 600ms 120ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.has-js .patent-proof[data-reveal][data-revealed="true"] .patent-number {
  filter: none;
  opacity: 1;
  transform: none;
}

@media (max-width: 1050px) {
  .patent-composition {
    grid-template-columns: 1fr;
    gap: 3.25rem;
  }

  .patent-heading h2 {
    max-width: 12ch;
  }

  .patent-summary {
    max-width: 34rem;
  }

  .patent-proof {
    padding: 3rem 0 0;
    border-top: 1px solid rgba(111, 120, 151, 0.25);
    border-left: 0;
  }
}

@media (max-width: 680px) {
  .patent-composition {
    gap: 2.75rem;
    padding-block: 3.25rem;
  }

  .patent-heading {
    padding-inline: 0;
  }

  .patent-heading h2 {
    font-size: clamp(2.65rem, 12vw, 3.35rem);
  }

  .patent-proof {
    padding: 2.5rem 0 0;
  }

  .patent-proof .patent-number {
    font-size: clamp(2.35rem, 10.5vw, 2.9rem);
  }

  .patent-proof h3 {
    max-width: 20ch;
    padding-right: 2.5rem;
    font-size: 1.15rem;
  }

  .patent-proof .patent-seal {
    top: 2.25rem;
    width: 3.5rem;
    opacity: 0.62;
  }

  .patent-proof .patent-status {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .patent-proof[data-reveal],
  .has-js .patent-proof[data-reveal] .patent-number {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Avtar product page refinement */
body[data-page="avtar"] .site-section + .site-section {
  padding-top: clamp(2.5rem, 3.75vw, 3.75rem);
}

body[data-page="avtar"] .section-head {
  margin-bottom: clamp(2rem, 3.5vw, 3.25rem);
}

body[data-page="avtar"] .section-head h2,
body[data-page="avtar"] .split-copy h2 {
  font-size: clamp(2.75rem, 4.2vw, 4.15rem);
}

body[data-page="avtar"] .page-hero-copy > p:last-child {
  max-width: 43rem;
}

body[data-page="avtar"] .learning-panel {
  position: relative;
  padding: clamp(1rem, 2vw, 1.75rem) 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="avtar"] .comparison-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: 1.5rem;
  align-items: end;
}

body[data-page="avtar"] .comparison-intro h2 { grid-column: 1 / span 8; }
body[data-page="avtar"] .comparison-intro > p:not(.eyebrow) { grid-column: 10 / span 3; }

body[data-page="avtar"] .comparison-intro .eyebrow {
  grid-column: 1 / -1;
}

body[data-page="avtar"] .comparison-intro h2 {
  max-width: 15ch;
  font-size: clamp(2.6rem, 4vw, 3.85rem);
  line-height: 1;
}

body[data-page="avtar"] .comparison-intro > p:not(.eyebrow) {
  max-width: 28rem;
  margin: 0 0 0.15rem;
  color: var(--ink-soft);
  font-size: clamp(1.03rem, 1.35vw, 1.2rem);
  line-height: 1.45;
}

body[data-page="avtar"] .comparison {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  margin-top: clamp(2rem, 3.5vw, 3.25rem);
}

body[data-page="avtar"] .comparison-card { grid-column: span 6; }

body[data-page="avtar"] .comparison-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows:
    1rem
    5rem
    clamp(13.25rem, 16vw, 14rem)
    1px
    auto;
  gap: clamp(0.55rem, 0.8vw, 0.7rem);
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
  overflow: hidden;
  border: 1px solid rgba(7, 13, 26, 0.12);
  border-radius: clamp(1.5rem, 2.1vw, 2rem);
  background: #f5f1e9;
  box-shadow: 0 1.25rem 3.5rem rgba(7, 13, 26, 0.04);
  isolation: isolate;
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

body[data-page="avtar"] .comparison-card span {
  margin-bottom: 0;
}

body[data-page="avtar"] .comparison-card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/noise.webp");
  opacity: 0.12;
  content: "";
  pointer-events: none;
}

body[data-page="avtar"] .comparison-avtar {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.8);
  background-color: #66708d;
  background-image:
    radial-gradient(circle at 72% 34%, rgba(255, 255, 255, 0.13), transparent 19rem),
    linear-gradient(145deg, rgba(81, 91, 124, 0.22), rgba(120, 131, 164, 0.16));
  box-shadow: 0 1.8rem 4.5rem rgba(52, 60, 88, 0.2);
}

body[data-page="avtar"] .comparison-panel-label {
  position: relative;
  z-index: 3;
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1rem;
  text-transform: uppercase;
}

body[data-page="avtar"] .comparison-card h3 {
  position: relative;
  z-index: 3;
  max-width: 13ch;
  margin: 0;
  font-size: clamp(1.65rem, 2.35vw, 2.15rem);
  line-height: 1.03;
}

body[data-page="avtar"] .comparison-avtar .comparison-panel-label,
body[data-page="avtar"] .comparison-avtar h3 {
  color: #fff;
}

body[data-page="avtar"] .comparison-visual {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(7, 13, 26, 0.075);
  border-radius: clamp(1rem, 1.5vw, 1.35rem);
  background: rgba(255, 255, 255, 0.26);
}

body[data-page="avtar"] .comparison-visual::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(7, 13, 26, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 13, 26, 0.022) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}

body[data-page="avtar"] .comparison-visual-general::after {
  position: absolute;
  width: 72%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.65), transparent 68%);
  content: "";
  pointer-events: none;
}

body[data-page="avtar"] .general-model {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(92%, 25rem);
  grid-template-columns: minmax(6.2rem, 1fr) minmax(2.4rem, 0.4fr) minmax(9.25rem, 1.05fr);
  align-items: center;
}

body[data-page="avtar"] .general-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

body[data-page="avtar"] .general-inputs i {
  position: relative;
  display: block;
  min-height: 2.8rem;
  border: 1px solid rgba(7, 13, 26, 0.09);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 0.45rem 1.25rem rgba(7, 13, 26, 0.025);
}

body[data-page="avtar"] .general-inputs i::before {
  position: absolute;
  top: 0.62rem;
  left: 50%;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: rgba(29, 37, 54, 0.17);
  content: "";
  transform: translateX(-50%);
}

body[data-page="avtar"] .general-inputs i::after {
  position: absolute;
  right: 22%;
  bottom: 0.63rem;
  left: 22%;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(29, 37, 54, 0.1);
  content: "";
}

body[data-page="avtar"] .general-inputs i:nth-child(2),
body[data-page="avtar"] .general-inputs i:nth-child(4) {
  opacity: 0.64;
}

body[data-page="avtar"] .general-inputs i:nth-child(3),
body[data-page="avtar"] .general-inputs i:nth-child(6) {
  opacity: 0.42;
}

body[data-page="avtar"] .general-convergence {
  display: grid;
  gap: 0.55rem;
  align-content: center;
}

body[data-page="avtar"] .general-convergence i {
  height: 1px;
  background: linear-gradient(90deg, rgba(7, 13, 26, 0.07), rgba(7, 13, 26, 0.2));
  transform-origin: right center;
}

body[data-page="avtar"] .general-convergence i:first-child {
  transform: rotate(14deg);
}

body[data-page="avtar"] .general-convergence i:last-child {
  transform: rotate(-14deg);
}

body[data-page="avtar"] .general-module {
  display: grid;
  min-height: 5.9rem;
  padding: 1rem 0.75rem;
  align-content: center;
  border: 1px solid rgba(7, 13, 26, 0.12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 0.8rem 2.2rem rgba(7, 13, 26, 0.05);
  text-align: center;
}

body[data-page="avtar"] .general-module span {
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: nowrap;
}

body[data-page="avtar"] .comparison-visual-personal {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 53% 45%, rgba(255, 255, 255, 0.11), transparent 45%),
    rgba(45, 53, 82, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="avtar"] .comparison-visual-personal::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
}

body[data-page="avtar"] .personal-model {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(92%, 25rem);
  height: min(82%, 13.5rem);
  grid-template-columns: minmax(4.4rem, 1fr) minmax(9.1rem, 10rem) minmax(4.4rem, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
}

body[data-page="avtar"] .personal-stack {
  position: relative;
  width: 9.1rem;
  height: 8.7rem;
  grid-column: 2;
  grid-row: 1 / -1;
  place-self: center;
  transition: transform 320ms ease;
}

body[data-page="avtar"] .personal-layer,
body[data-page="avtar"] .personal-core {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.35rem;
  transition: transform 320ms ease, border-color 320ms ease, background-color 320ms ease;
}

body[data-page="avtar"] .personal-layer-back {
  inset: 0.15rem 0.85rem 1.5rem 0;
  background: rgba(255, 255, 255, 0.045);
  transform: translate(-0.65rem, 0.6rem) scale(0.94);
}

body[data-page="avtar"] .personal-layer-middle {
  inset: 0.55rem 0.35rem 0.7rem 0.45rem;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 1.15rem 2.4rem rgba(21, 27, 48, 0.09);
  transform: translate(0.55rem, -0.45rem) scale(0.97);
}

body[data-page="avtar"] .personal-core {
  inset: 1rem 0.45rem 0 0.45rem;
  display: grid;
  place-content: center;
  place-items: center;
  padding-inline: 0.35rem;
  border-color: rgba(255, 255, 255, 0.31);
  background: rgba(255, 255, 255, 0.115);
  box-shadow: 0 1.4rem 3rem rgba(20, 27, 50, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(0.65rem);
 }

body[data-page="avtar"] .personal-core img {
  width: 2.85rem;
  height: auto;
  filter: brightness(0) invert(1);
}

body[data-page="avtar"] .personal-core small {
  margin-top: 0.7rem;
  color: rgba(255, 255, 255, 0.93);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  text-wrap: nowrap;
}

body[data-page="avtar"] .personal-chip {
  position: relative;
  z-index: 3;
  width: max-content;
  max-width: 100%;
  padding: 0.48rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.55rem;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(44, 52, 80, 0.25);
  box-shadow: 0 0.6rem 1.6rem rgba(23, 29, 52, 0.08);
  font-size: clamp(0.75rem, 0.75vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(0.45rem);
  transition: border-color 240ms ease, background-color 240ms ease, transform 240ms ease;
}

body[data-page="avtar"] .personal-chip::after {
  position: absolute;
  top: 50%;
  width: clamp(0.65rem, 1.5vw, 1rem);
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  content: "";
}

body[data-page="avtar"] .personal-chip-preferences {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: end;
}

body[data-page="avtar"] .personal-chip-preferences::after,
body[data-page="avtar"] .personal-chip-corrections::after {
  left: 100%;
}

body[data-page="avtar"] .personal-chip-context {
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
}

body[data-page="avtar"] .personal-chip-context::after {
  right: 100%;
}

body[data-page="avtar"] .personal-chip-corrections {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-self: end;
}

body[data-page="avtar"] .comparison-divider {
  position: relative;
  z-index: 3;
  height: 1px;
  background: rgba(7, 13, 26, 0.11);
}

body[data-page="avtar"] .comparison-avtar .comparison-divider {
  background: rgba(255, 255, 255, 0.16);
}

body[data-page="avtar"] .comparison-points {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: repeat(3, 4.35rem);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-page="avtar"] .comparison-points li {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 0.7rem 0 0.7rem 1.25rem;
  align-items: center;
  color: rgba(7, 13, 26, 0.7);
  font-size: clamp(0.96rem, 1.2vw, 1.06rem);
  line-height: 1.35;
}

body[data-page="avtar"] .comparison-points li + li {
  border-top: 1px solid rgba(7, 13, 26, 0.075);
}

body[data-page="avtar"] .comparison-points li::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: rgba(7, 13, 26, 0.26);
  content: "";
  transform: translateY(-50%);
}

body[data-page="avtar"] .comparison-avtar .comparison-points li {
  color: rgba(255, 255, 255, 0.96);
}

body[data-page="avtar"] .comparison-avtar .comparison-points li + li {
  border-top-color: rgba(255, 255, 255, 0.115);
}

body[data-page="avtar"] .comparison-avtar .comparison-points li::before {
  background: rgba(255, 255, 255, 0.64);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="avtar"] .comparison-card:hover {
    border-color: rgba(7, 13, 26, 0.2);
    box-shadow: 0 1.65rem 4rem rgba(7, 13, 26, 0.08);
    transform: translateY(-0.2rem);
  }

  body[data-page="avtar"] .comparison-avtar:hover {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 2rem 5rem rgba(52, 60, 88, 0.25);
  }

  body[data-page="avtar"] .comparison-avtar:hover .personal-stack {
    transform: translateY(-0.18rem);
  }

  body[data-page="avtar"] .comparison-avtar:hover .personal-layer-back {
    border-color: rgba(255, 255, 255, 0.28);
    transform: translate(-0.82rem, 0.72rem) scale(0.94);
  }

  body[data-page="avtar"] .comparison-avtar:hover .personal-layer-middle {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.085);
    transform: translate(0.68rem, -0.55rem) scale(0.97);
  }

  body[data-page="avtar"] .comparison-avtar:hover .personal-chip {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(52, 62, 93, 0.34);
  }
}

.avtar-conversation-section .phone-video-stage {
  min-height: 0;
  grid-template-columns: minmax(16rem, 0.58fr) minmax(0, 1fr);
  grid-template-areas:
    "product copy"
    "product flow";
  column-gap: clamp(2rem, 5vw, 4.25rem);
  row-gap: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(2rem, 4.5vw, 4rem);
  border: 1px solid rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(circle at 10% 12%, rgba(132, 141, 171, 0.11), transparent 22rem),
    rgba(255, 255, 255, 0.76);
  box-shadow: 0 1.25rem 4rem rgba(7, 13, 26, 0.055);
}

.avtar-conversation-section .conversation-product {
  display: grid;
  grid-area: product;
  gap: 0.9rem;
  justify-items: center;
}

.avtar-conversation-section .conversation-video {
  width: min(100%, 19.5rem);
  box-shadow: 0 1.5rem 3.5rem rgba(7, 13, 26, 0.16);
}

.avtar-conversation-section .phone-video-stage .split-copy {
  grid-area: copy;
  align-self: end;
}

.avtar-conversation-section .split-copy > p:not(.eyebrow) {
  max-width: 32rem;
  font-size: clamp(1.1rem, 1.55vw, 1.3rem);
  line-height: 1.45;
}

.avtar-conversation-section .conversation-cues {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.avtar-conversation-section .conversation-cues li {
  padding: 0.48rem 0.72rem;
  border: 1px solid rgba(111, 120, 151, 0.18);
  border-radius: 999px;
  color: rgba(54, 64, 96, 0.8);
  background: rgba(255, 255, 255, 0.42);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1;
}

.avtar-conversation-section .conversation-flow {
  display: grid;
  grid-area: flow;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: start;
  margin: 0;
  padding: clamp(1.15rem, 2vw, 1.5rem) 0 0;
  border-top: 1px solid rgba(7, 13, 26, 0.09);
  list-style: none;
}

.avtar-conversation-section .conversation-flow li {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  gap: 0.45rem 0.65rem;
  align-items: center;
  padding-right: clamp(0.75rem, 2vw, 1.4rem);
}

.avtar-conversation-section .conversation-flow li + li {
  padding-left: clamp(0.75rem, 2vw, 1.4rem);
}

.avtar-conversation-section .conversation-flow li:not(:last-child)::after {
  position: absolute;
  top: 0.92rem;
  right: -0.22rem;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 1px solid rgba(71, 82, 118, 0.36);
  border-right: 1px solid rgba(71, 82, 118, 0.36);
  content: "";
  transform: rotate(45deg);
}

.avtar-conversation-section .conversation-flow-number {
  grid-column: 1 / -1;
  color: var(--slate);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.avtar-conversation-section .conversation-flow-icon {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border: 1px solid rgba(111, 120, 151, 0.22);
  border-radius: 50%;
  color: var(--slate-dark);
  background: rgba(255, 255, 255, 0.46);
}

.avtar-conversation-section .conversation-flow-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.avtar-conversation-section .conversation-flow strong {
  color: rgba(7, 13, 26, 0.82);
  font-size: clamp(0.76rem, 1vw, 0.86rem);
  font-weight: 600;
  line-height: 1.25;
}

.has-js .avtar-conversation-section .phone-video-stage[data-reveal] .conversation-product,
.has-js .avtar-conversation-section .phone-video-stage[data-reveal] .split-copy,
.has-js .avtar-conversation-section .phone-video-stage[data-reveal] .conversation-flow li {
  opacity: 1;
  transform: none;
  transition: opacity 620ms ease, transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.has-js .avtar-conversation-section .phone-video-stage[data-reveal] .conversation-product {
  transition-delay: 80ms;
}

.has-js .avtar-conversation-section .phone-video-stage[data-reveal] .split-copy {
  transition-delay: 140ms;
}

.has-js .avtar-conversation-section .phone-video-stage[data-reveal] .conversation-flow li:nth-child(1) {
  transition-delay: 250ms;
}

.has-js .avtar-conversation-section .phone-video-stage[data-reveal] .conversation-flow li:nth-child(2) {
  transition-delay: 340ms;
}

.has-js .avtar-conversation-section .phone-video-stage[data-reveal] .conversation-flow li:nth-child(3) {
  transition-delay: 430ms;
}

.has-js .avtar-conversation-section .phone-video-stage[data-reveal]:not([data-revealed="true"]) .conversation-product,
.has-js .avtar-conversation-section .phone-video-stage[data-reveal]:not([data-revealed="true"]) .split-copy,
.has-js .avtar-conversation-section .phone-video-stage[data-reveal]:not([data-revealed="true"]) .conversation-flow li {
  opacity: 0;
  transform: translateY(0.65rem);
}

body[data-page="avtar"] .avtar-email-section .email-demo {
  margin-top: 0;
}

body[data-page="avtar"] .avtar-email-section .process-steps {
  margin-top: 1rem;
}

body[data-page="avtar"] .avtar-email-section .principle-card {
  min-height: 12.5rem;
}

body[data-page="avtar"] .avtar-email-section .card-index {
  margin-bottom: 2.25rem;
}

/* Compact closing panel: restrained hierarchy, minimal decoration, direct actions. */
.avtar-control-panel {
  display: grid;
  grid-template-areas:
    "intro actions"
    "points points";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 2.5vw, 2rem) clamp(2rem, 4vw, 4rem);
  padding: clamp(2rem, 3.5vw, 3rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(1.75rem, 3vw, 2.5rem);
  color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(145deg, #070b14 0%, #121a2b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.avtar-control-intro {
  grid-area: intro;
  align-self: center;
}

.avtar-control-intro h2,
.avtar-control-points h3 {
  color: #fff;
}

.avtar-control-intro h2 {
  font-size: clamp(2.25rem, 3.4vw, 3.35rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.avtar-control-points {
  display: grid;
  grid-area: points;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.avtar-control-points article {
  padding: clamp(1.25rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.75rem) 0;
  text-align: center;
}

.avtar-control-points article + article {
  border-left: 1px solid var(--white-line);
}

.avtar-control-points h3 {
  margin-bottom: 0;
  font-size: clamp(1.08rem, 1.4vw, 1.3rem);
  font-weight: 550;
  letter-spacing: -0.018em;
}

.avtar-control-actions {
  display: flex;
  grid-area: actions;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
}

.avtar-control-actions .text-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: #fff;
  font-size: 0.9rem;
}

.avtar-control-actions .button {
  min-height: 2.75rem;
  padding: 0.7rem 1.2rem;
  color: var(--ink);
  font-size: 0.9rem;
  background: #fff;
}

.avtar-control-actions .button:hover {
  color: #fff;
  background: var(--slate);
}

@media (max-width: 900px) {
  .avtar-conversation-section .phone-video-stage {
    grid-template-columns: 1fr;
  }

  .avtar-conversation-section .phone-video-stage {
    grid-template-areas:
      "copy"
      "product"
      "flow";
    row-gap: clamp(2rem, 5vw, 3rem);
  }

  .avtar-conversation-section .phone-video-stage .split-copy {
    align-self: auto;
  }

  .avtar-conversation-section .conversation-video {
    width: min(100%, 18rem);
  }

  .avtar-control-panel {
    grid-template-areas:
      "intro"
      "points"
      "actions";
    grid-template-columns: 1fr;
    gap: 0;
  }

  .avtar-control-points {
    margin-top: 1.75rem;
  }

  .avtar-control-actions {
    justify-content: space-between;
    margin-top: 1.75rem;
  }
}

@media (max-width: 820px) {
  body[data-page="avtar"] .comparison-intro {
    row-gap: 1.25rem;
  }

  body[data-page="avtar"] .comparison-intro h2,
  body[data-page="avtar"] .comparison-intro > p:not(.eyebrow) {
    grid-column: 1 / -1;
  }

  body[data-page="avtar"] .comparison-intro > p:not(.eyebrow) {
    max-width: 37rem;
  }

  body[data-page="avtar"] .comparison-card {
    grid-column: 1 / -1;
  }

  body[data-page="avtar"] .comparison-card {
    min-height: 0;
    grid-template-rows: auto auto clamp(14rem, 44vw, 17rem) 1px auto;
    gap: clamp(0.8rem, 1.35vw, 1.1rem);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
  }

  body[data-page="avtar"] .comparison-card h3 {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  }

  body[data-page="avtar"] .comparison-points {
    grid-template-rows: none;
  }

  body[data-page="avtar"] .comparison-points li {
    min-height: 0;
    padding: 1rem 0 1rem 1.25rem;
  }

}

@media (max-width: 680px) {
  body[data-page="avtar"] .site-container {
    width: min(calc(100% - 2rem), var(--site-width));
  }

  body[data-page="avtar"] .site-section + .site-section,
  body[data-page="avtar"] .page-hero + .site-section {
    padding-top: 2.25rem;
  }

  body[data-page="avtar"] .section-head h2,
  body[data-page="avtar"] .split-copy h2 {
    font-size: clamp(2.35rem, 11vw, 3rem);
  }

  .avtar-control-intro h2 {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  body[data-page="avtar"] .section-head {
    row-gap: 1.25rem;
  }

  body[data-page="avtar"] .learning-panel,
  .avtar-conversation-section .phone-video-stage,
  .avtar-control-panel {
    padding: 1.5rem;
    border-radius: 1.5rem;
  }

  body[data-page="avtar"] .learning-panel {
    padding: 0.5rem 0;
  }

  body[data-page="avtar"] .comparison-intro h2 {
    font-size: clamp(2.3rem, 10.5vw, 2.9rem);
  }

  body[data-page="avtar"] .comparison {
    gap: 0.9rem;
    margin-top: 2rem;
  }

  body[data-page="avtar"] .comparison-card {
    gap: 0.9rem;
    padding: 1.25rem;
    border-radius: 1.35rem;
  }

  body[data-page="avtar"] .general-model {
    width: min(88%, 23rem);
  }

  body[data-page="avtar"] .personal-model {
    width: min(90%, 23rem);
  }

  body[data-page="avtar"] .comparison-points li {
    font-size: 1rem;
  }

  .avtar-conversation-section .conversation-video {
    width: min(88%, 17rem);
    border-radius: var(--radius-medium);
  }

  .avtar-conversation-section .conversation-flow {
    padding-top: 1.25rem;
  }

  body[data-page="avtar"] .avtar-email-section .principle-card {
    min-height: 0;
  }

  body[data-page="avtar"] .avtar-email-section .card-index {
    margin-bottom: 1.5rem;
  }

  .avtar-control-points {
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
  }

  .avtar-control-points article {
    padding: 1rem 0;
  }

  .avtar-control-points article + article {
    padding-left: 0;
    border-top: 1px solid var(--white-line);
    border-left: 0;
  }

  .avtar-control-actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 1.25rem;
  }

  .avtar-control-actions .button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .avtar-conversation-section .phone-video-stage {
    row-gap: 2rem;
  }

  .avtar-conversation-section .conversation-flow {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0.7rem;
  }

  .avtar-conversation-section .conversation-flow li,
  .avtar-conversation-section .conversation-flow li + li {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    padding: 0.7rem 0;
  }

  .avtar-conversation-section .conversation-flow li:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -0.22rem;
    left: 0.78rem;
    transform: rotate(135deg);
  }

  .avtar-conversation-section .conversation-flow-number {
    grid-column: 2;
    grid-row: 1;
  }

  .avtar-conversation-section .conversation-flow-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .avtar-conversation-section .conversation-flow strong {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.86rem;
  }
}

@media (max-width: 360px) {
  body[data-page="avtar"] .general-model {
    grid-template-columns: minmax(6rem, 1.05fr) minmax(1.6rem, 0.32fr) minmax(6.5rem, 0.8fr);
  }

  body[data-page="avtar"] .personal-model {
    grid-template-columns: minmax(4.4rem, 1fr) minmax(7rem, 8rem) minmax(4.4rem, 1fr);
  }

  body[data-page="avtar"] .personal-chip {
    padding-inline: 0.45rem;
    letter-spacing: 0.04em;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .has-js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .learning-art-halo,
  .learning-art-orbit-inner,
  .learning-art-label-reactive {
    animation: none;
  }

  .learning-art-travelers {
    display: none;
  }

  .has-js .vision-human[data-reveal] .vision-scale-block,
  .has-js .vision-human[data-reveal] .vision-scale-figure {
    opacity: 1;
    transform: none;
    transition: none;
  }  .has-js .daily-brief-showcase:not([data-revealed="true"]) .daily-brief-points li {
    opacity: 1;
    transform: none;
  }

  .daily-brief-points li {
    opacity: 1;
  }

  .daily-brief-points li,
  .daily-brief-points li[data-active="true"] {
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: none;
  }

  .daily-brief-points li + li {
    margin-top: 0.4rem;
  }

  .daily-brief-points li::after {
    background-size: 100% 100%;
  }

  .daily-brief-points li[data-active="true"] .daily-brief-number {
    box-shadow: none;
  }

  .daily-brief-points strong,
  .daily-brief-points li[data-active="true"] strong {
    color: var(--ink);
  }

  .has-js .daily-brief-showcase:not([data-revealed="true"]) .brief-stage-frame {
    opacity: 1;
    transform: none;
  }

  .brief-scene {
    transition: none;
  }

  .brief-fragments rect,
  .brief-threads path,
  .brief-you-pulse,
  .brief-wave rect {
    animation: none;
  }

  .has-js .avtar-conversation-section .phone-video-stage[data-reveal] .conversation-product,
  .has-js .avtar-conversation-section .phone-video-stage[data-reveal] .split-copy,
  .has-js .avtar-conversation-section .phone-video-stage[data-reveal] .conversation-flow li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  .learning-manifesto-copy {
    row-gap: 2.5rem;
    align-items: center;
    margin-bottom: 3rem;
    padding-block: 2.75rem;
  }

  .learning-manifesto-thesis { grid-column: 1 / span 5; }
  .learning-manifesto-art { grid-column: 6 / span 7; }

  .learning-manifesto-copy::before {
    background:
      radial-gradient(ellipse 42% 48% at 72% 34%, rgba(247, 245, 242, 0.82), rgba(247, 245, 242, 0.35) 62%, transparent 88%),
      radial-gradient(ellipse 62% 54% at 66% 42%, rgba(206, 252, 238, 0.08), transparent 76%);
  }

  .learning-manifesto-thesis {
    max-width: 19rem;
    align-self: center;
  }

  .learning-manifesto-thesis small {
    margin-bottom: 2.5rem;
  }

  .learning-manifesto-thesis em {
    font-size: 0.44em;
  }

  .learning-manifesto-art {
    width: min(100%, 24rem);
    min-height: 0;
    justify-self: center;
    margin: 0;
    transform: none;
  }

  .learning-manifesto-art svg {
    width: 100%;
    max-height: 20rem;
    margin-left: 0;
  }

  .learning-art-category-labels {
    display: none;
  }

  .learning-art-mobile-labels {
    display: grid;
    width: min(100%, 19rem);
    grid-template-columns: repeat(2, max-content);
    gap: 0.65rem 2.5rem;
    justify-content: center;
    margin: 0.65rem auto 0;
    padding: 0;
    color: var(--slate-dark);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.2;
    list-style: none;
    text-transform: uppercase;
  }

  .learning-art-mobile-labels li {
    opacity: 0.73;
  }
}

/* Patent proof: preserve hierarchy as the two-column composition collapses. */
@media (max-width: 1050px) {
  .patent-panel {
    gap: clamp(2.75rem, 6vw, 4rem);
  }

  .patent-heading h2 {
    max-width: 12ch;
  }

  .patent-summary {
    max-width: 34rem;
  }
}

@media (max-width: 680px) {
  .privacy-patent-section::after {
    inset-inline: 8%;
  }

  .patent-panel {
    gap: 2.5rem;
    padding: 2.25rem 1.25rem 1.25rem;
    border-radius: 1.75rem;
  }

  .patent-heading {
    padding-inline: 0.25rem;
  }

  .patent-heading h2 {
    font-size: clamp(2.65rem, 12.5vw, 3.45rem);
    line-height: 0.95;
  }

  .patent-summary {
    margin-top: 1.5rem;
    font-size: 1.05rem;
  }

  .patent-card {
    padding: 2rem 1.35rem 1.6rem;
    border-radius: 1.45rem;
  }

  .patent-number {
    font-size: clamp(2.7rem, 12.5vw, 3.65rem);
  }

  .patent-seal {
    top: 1.25rem;
    right: 1.25rem;
    width: 4.25rem;
    opacity: 0.35;
  }

  .patent-card h3 {
    padding-right: 2rem;
    font-size: 1.15rem;
  }

  .patent-metadata {
    margin-top: 2.5rem;
  }
}

@media (max-width: 520px) {
  .patent-metadata {
    grid-template-columns: 1fr;
  }

  .patent-metadata p {
    padding: 0 0 1.25rem;
  }

  .patent-metadata p + p {
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(111, 120, 151, 0.18);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .patent-card[data-reveal],
  .has-js .patent-card[data-reveal] .patent-number {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Keep the product-page refinements on the same restrained scale. */
body[data-page="avtar"] .section-head h2,
body[data-page="avtar"] .split-copy h2 {
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
}

body[data-page="avtar"] .comparison-intro h2 {
  font-size: clamp(2.35rem, 3.25vw, 3.4rem);
}

@media (max-width: 680px) {
  body[data-page="avtar"] .section-head h2,
  body[data-page="avtar"] .split-copy h2,
  body[data-page="avtar"] .comparison-intro h2 {
    font-size: clamp(2.2rem, 9.5vw, 2.85rem);
  }
}

/* Face + voice: an editorial process paired with a focused product preview. */
body[data-page="avtar"] .avtar-face-section {
  overflow: clip;
}

.personalization-showcase {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) clamp(2.75rem, 5.5vw, 5.5rem) minmax(18rem, 0.72fr);
  align-items: start;
  min-height: clamp(39rem, 57vw, 45rem);
  padding-block: clamp(3rem, 5.5vw, 5rem);
}

.personalization-showcase::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 84% 48%, rgba(255, 255, 255, 0.7), transparent 24rem),
    radial-gradient(circle at 76% 50%, rgba(132, 141, 171, 0.07), transparent 31rem);
  content: "";
  pointer-events: none;
}

.personalization-process {
  min-width: 0;
}

.personalization-heading {
  display: block;
  margin: 0 0 clamp(2.75rem, 5vw, 4.5rem);
  padding: 0;
}

.personalization-heading h2,
body[data-page="avtar"] .personalization-heading h2 {
  max-width: 10.5ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(3.15rem, 5vw, 4.65rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

.personalization-steps {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.personalization-steps::before {
  position: absolute;
  top: 2.55rem;
  bottom: 2.55rem;
  left: 1.1rem;
  width: 1px;
  background: linear-gradient(rgba(132, 141, 171, 0.78), rgba(132, 141, 171, 0.15));
  content: "";
}

.personalization-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: clamp(1.15rem, 2.3vw, 1.85rem);
  align-items: start;
  padding-block: clamp(1.55rem, 2.5vw, 2rem);
}

.personalization-step + .personalization-step {
  border-top: 1px solid rgba(7, 13, 26, 0.1);
}

.personalization-step-number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 1px solid rgba(132, 141, 171, 0.26);
  border-radius: 50%;
  color: var(--slate-dark);
  background: color-mix(in srgb, var(--paper) 92%, white 8%);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
}

.personalization-step-content {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

.personalization-step-copy h3 {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: clamp(1.55rem, 2.1vw, 1.95rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.personalization-step-copy p {
  max-width: 18rem;
  margin: 0;
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1.42;
}

.personalization-input {
  min-width: 0;
  margin: 0;
}

.personalization-input figcaption {
  margin-bottom: 0.65rem;
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.115em;
  line-height: 1;
  text-transform: uppercase;
}

.personalization-photo-input {
  width: 7.15rem;
}

.personalization-photo-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  padding: 0.24rem;
  border: 1px solid rgba(132, 141, 171, 0.2);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0.8rem 2rem rgba(7, 13, 26, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.personalization-photo-frame img {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  object-fit: cover;
  object-position: center 31%;
}

.personalization-voice-input {
  width: clamp(11rem, 17vw, 13.5rem);
}

.personalization-voice-wave {
  position: relative;
  display: grid;
  min-height: 3.6rem;
  grid-template-columns: repeat(16, minmax(1px, 1fr));
  gap: clamp(0.18rem, 0.38vw, 0.3rem);
  align-items: center;
  padding-inline: 0.55rem;
  border-top: 1px solid rgba(7, 13, 26, 0.1);
  border-bottom: 1px solid rgba(7, 13, 26, 0.1);
}

.personalization-voice-wave::before {
  position: absolute;
  right: 0.55rem;
  left: 0.55rem;
  height: 1px;
  background: rgba(132, 141, 171, 0.12);
  content: "";
}

.personalization-voice-wave i {
  position: relative;
  display: block;
  width: 1px;
  height: 0.65rem;
  justify-self: center;
  border-radius: 999px;
  background: rgba(71, 82, 118, 0.72);
  transform-origin: center;
  animation: personalization-wave 2.8s ease-in-out infinite;
}

.personalization-voice-wave i:nth-child(3n + 1) { height: 2rem; animation-delay: -0.6s; }
.personalization-voice-wave i:nth-child(4n + 2) { height: 1.2rem; animation-delay: -1.2s; }
.personalization-voice-wave i:nth-child(5n) { height: 2.45rem; animation-delay: -1.8s; }

.personalization-connector {
  position: relative;
  align-self: center;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(132, 141, 171, 0.12), rgba(132, 141, 171, 0.5));
}

.personalization-connector::after {
  position: absolute;
  top: 50%;
  right: -0.2rem;
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid rgba(71, 82, 118, 0.48);
  border-radius: 50%;
  background: var(--paper);
  content: "";
  transform: translateY(-50%);
}

.personalization-result {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 0.9rem;
  margin: 0;
}

.personalization-device {
  position: relative;
  width: min(100%, 18.5rem);
  aspect-ratio: 9 / 19.55;
  padding: 0.3rem;
  border: 1px solid rgba(7, 13, 26, 0.5);
  border-radius: 3.05rem;
  background: linear-gradient(145deg, #555962 0%, #202229 36%, #484b54 68%, #181a20 100%);
  box-shadow:
    0 1.75rem 4rem rgba(7, 13, 26, 0.13),
    0 0.35rem 0.9rem rgba(7, 13, 26, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(7, 13, 26, 0.5);
}

.personalization-device::before,
.personalization-device::after {
  position: absolute;
  z-index: -1;
  width: 0.16rem;
  border-radius: 999px;
  background: rgba(20, 22, 28, 0.88);
  content: "";
}

.personalization-device::before {
  top: 7.15rem;
  left: -0.18rem;
  height: 4.1rem;
}

.personalization-device::after {
  top: 9rem;
  right: -0.18rem;
  height: 4.6rem;
}

.personalization-screen {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 2.72rem;
  background: #d8d4d0;
  box-shadow: inset 0 0 0 1px rgba(7, 13, 26, 0.72);
}

.personalization-screen::after {
  position: absolute;
  bottom: 0.52rem;
  left: 50%;
  width: 4.25rem;
  height: 0.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  content: "";
  transform: translateX(-50%);
}

.personalization-screen video {
  display: block;
  width: 100%;
  height: 100%;
  background: #d8d4d0;
  object-fit: cover;
  object-position: 50% 46%;
}

.personalization-device-island {
  position: absolute;
  top: 0.62rem;
  left: 50%;
  width: 5.05rem;
  height: 1.3rem;
  border-radius: 999px;
  background: rgba(5, 7, 11, 0.95);
  box-shadow: 0 0.2rem 0.65rem rgba(7, 13, 26, 0.16);
  transform: translateX(-50%);
}

.personalization-result figcaption {
  max-width: 18.5rem;
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

@keyframes personalization-wave {
  0%,
  100% {
    opacity: 0.58;
    transform: scaleY(0.76);
  }

  50% {
    opacity: 1;
    transform: scaleY(1.04);
  }
}

@media (max-width: 980px) {
  .personalization-showcase {
    grid-template-columns: minmax(0, 1fr) 2rem minmax(16rem, 0.62fr);
    min-height: 39rem;
  }

  .personalization-heading h2,
  body[data-page="avtar"] .personalization-heading h2 {
    font-size: clamp(2.9rem, 5.5vw, 3.85rem);
  }

  .personalization-step-content {
    grid-template-columns: minmax(10rem, 1fr) auto;
    gap: 1.25rem;
  }

  .personalization-photo-input {
    width: 6.25rem;
  }

  .personalization-voice-input {
    width: 10.5rem;
  }

  .personalization-device {
    width: min(100%, 17.25rem);
  }
}

@media (max-width: 820px) {
  .personalization-showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: 3.5rem;
  }

  .personalization-heading h2,
  body[data-page="avtar"] .personalization-heading h2 {
    max-width: 11ch;
  }

  .personalization-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 5vw, 3rem);
  }

  .personalization-steps::before {
    display: none;
  }

  .personalization-step {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }

  .personalization-step-content {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .personalization-photo-input,
  .personalization-voice-input {
    justify-self: start;
  }

  .personalization-connector {
    width: 1px;
    height: 3.5rem;
    justify-self: center;
    background: linear-gradient(rgba(132, 141, 171, 0.12), rgba(132, 141, 171, 0.5));
  }

  .personalization-connector::after {
    top: auto;
    right: auto;
    bottom: -0.2rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .personalization-result {
    margin-top: 0.5rem;
  }

  .personalization-device {
    width: min(100%, 18rem);
  }
}

@media (max-width: 620px) {
  .personalization-showcase {
    padding-block: 2.75rem 3.25rem;
  }

  .personalization-heading {
    margin-bottom: 2.5rem;
  }

  .personalization-heading h2,
  body[data-page="avtar"] .personalization-heading h2 {
    font-size: clamp(2.55rem, 11vw, 3.1rem);
  }

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

  .personalization-steps::before {
    display: block;
    top: 2.55rem;
    bottom: 2.55rem;
    left: 1.1rem;
    width: 1px;
    height: auto;
    background: linear-gradient(rgba(132, 141, 171, 0.78), rgba(132, 141, 171, 0.15));
  }

  .personalization-step {
    gap: 1rem;
  }

  .personalization-step-content {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .personalization-voice-input {
    width: 100%;
    grid-column: 1 / -1;
  }

  .personalization-photo-input {
    width: 5.75rem;
  }

  .personalization-step-copy h3 {
    font-size: 1.55rem;
  }

  .personalization-device {
    width: min(88vw, 18rem);
  }

  .personalization-result figcaption {
    max-width: 18rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .personalization-voice-wave i {
    animation: none;
  }
}

/* Homepage: cinematic product story with a clear path into the site. */
body[data-page="home"] .landing-hero {
  position: relative;
  overflow: clip;
  padding: clamp(3.75rem, 6vw, 6rem) 0 var(--space-section);
}

body[data-page="home"] .landing-hero::before {
  position: absolute;
  inset: -12rem -18rem auto 42%;
  z-index: -1;
  height: 42rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 141, 171, 0.11), rgba(206, 252, 238, 0.035) 42%, transparent 70%);
  content: "";
  filter: blur(1.5rem);
  pointer-events: none;
}

.landing-hero-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: clamp(3rem, 5vw, 4rem);
  align-items: end;
}

.landing-hero-title { grid-column: 1 / span 8; }
.landing-hero-copy { grid-column: 10 / span 3; }

.landing-hero-title h1 {
  max-width: 11.5em;
  margin: 0;
  color: var(--ink);
  font-size: clamp(4rem, 6.7vw, 6.9rem);
  font-weight: 500;
  letter-spacing: -0.067em;
  line-height: 0.91;
}

.landing-hero-title h1 > span {
  display: block;
}

.landing-hero-title h1 em {
  color: var(--slate-dark);
  font-style: italic;
  font-weight: 450;
  letter-spacing: -0.075em;
}

.landing-hero-copy {
  position: relative;
  padding: 0 0 0.15rem clamp(1.5rem, 2.5vw, 2.25rem);
  border-left: 1px solid rgba(132, 141, 171, 0.32);
}

.landing-hero-copy p {
  max-width: 25rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.12rem, 1.55vw, 1.4rem);
  letter-spacing: -0.022em;
  line-height: 1.42;
  text-wrap: balance;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.35rem;
  align-items: center;
  margin-top: 1.75rem;
}

.landing-film-link {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.landing-film-link > span {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(71, 82, 118, 0.32);
  border-radius: 50%;
  transition: border-color 220ms ease, background-color 220ms ease;
}

.landing-film-link > span::after {
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  border-top: 0.24rem solid transparent;
  border-bottom: 0.24rem solid transparent;
  border-left: 0.38rem solid var(--slate-dark);
  content: "";
  transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .landing-film-link:hover > span {
    border-color: rgba(71, 82, 118, 0.55);
    background: rgba(132, 141, 171, 0.09);
  }
}

.anthem-showcase {
  margin: clamp(3.5rem, 6vw, 5.75rem) 0 0;
  scroll-margin-top: 6rem;
}

.anthem-player {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(7, 13, 26, 0.16);
  border-radius: clamp(1.5rem, 2.5vw, 2.4rem);
  background: #090a0e;
  box-shadow:
    0 2.25rem 5.5rem rgba(7, 13, 26, 0.14),
    0 0.45rem 1.25rem rgba(7, 13, 26, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.anthem-video {
  display: block;
  width: 100%;
  height: 100%;
  background: #090a0e;
  object-fit: cover;
}

.anthem-film-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 13, 26, 0.06), rgba(7, 13, 26, 0.22)),
    radial-gradient(circle at 50% 50%, transparent 20%, rgba(7, 13, 26, 0.18) 100%);
  pointer-events: none;
  transition: opacity 360ms ease;
}

.anthem-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  background: rgba(7, 13, 26, 0.56);
  box-shadow: 0 1rem 2.5rem rgba(7, 13, 26, 0.24);
  backdrop-filter: blur(1rem) saturate(120%);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: opacity 260ms ease, background-color 220ms ease, transform 260ms ease;
}

.anthem-play-icon {
  position: relative;
  display: block;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
}

.anthem-play-icon::after {
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  border-top: 0.36rem solid transparent;
  border-bottom: 0.36rem solid transparent;
  border-left: 0.58rem solid var(--ink);
  content: "";
  transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .anthem-play:hover {
    background: rgba(7, 13, 26, 0.72);
    transform: translate(-50%, -50%) scale(1.025);
  }
}

.anthem-showcase.is-playing .anthem-play,
.anthem-showcase.is-playing .anthem-film-shade {
  opacity: 0;
  pointer-events: none;
}

.anthem-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-inline: 0.15rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.anthem-meta span:last-child {
  color: var(--slate-dark);
}

.landing-chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  border-top: 1px solid rgba(7, 13, 26, 0.13);
  border-bottom: 1px solid rgba(7, 13, 26, 0.13);
}

.landing-chapters a {
  position: relative;
  display: grid;
  gap: 0.42rem;
  min-width: 0;
  padding: clamp(1.35rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2.25rem);
  color: inherit;
  text-decoration: none;
}

.landing-chapters a + a {
  border-left: 1px solid rgba(7, 13, 26, 0.11);
}

.landing-chapters a::after {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 1px solid var(--slate-dark);
  border-right: 1px solid var(--slate-dark);
  content: "";
  opacity: 0.44;
  transform: rotate(45deg);
  transition: opacity 220ms ease, transform 220ms ease;
}

.landing-chapters a > span {
  color: var(--slate);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.landing-chapters strong {
  padding-right: 1.5rem;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.landing-chapters small {
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .landing-chapters a:hover::after {
    opacity: 0.9;
    transform: translateX(0.2rem) rotate(45deg);
  }
}

@media (max-width: 980px) {
  .landing-hero-intro {
    row-gap: 3rem;
  }

  .landing-hero-title { grid-column: 1 / span 7; }
  .landing-hero-copy { grid-column: 8 / span 5; }

  .landing-hero-title h1 {
    font-size: clamp(3.7rem, 7.1vw, 5.4rem);
  }
}

@media (max-width: 820px) {
  .landing-hero-intro {
    row-gap: 2.25rem;
  }

  .landing-hero-title,
  .landing-hero-copy {
    grid-column: 1 / -1;
  }

  .landing-hero-title h1 {
    max-width: 10em;
  }

  .landing-hero-copy {
    max-width: 34rem;
  }

  .landing-chapters {
    grid-template-columns: 1fr;
  }

  .landing-chapters a + a {
    border-top: 1px solid rgba(7, 13, 26, 0.11);
    border-left: 0;
  }
}

@media (max-width: 680px) {
  body[data-page="home"] .landing-hero {
    padding-top: 3rem;
  }

  .landing-hero-title h1 {
    font-size: clamp(3rem, 13.5vw, 4.25rem);
    line-height: 0.94;
  }

  .landing-hero-copy {
    padding: 1.35rem 0 0;
    border-top: 1px solid rgba(132, 141, 171, 0.28);
    border-left: 0;
  }

  .landing-hero-actions {
    margin-top: 1.5rem;
  }

  .anthem-showcase {
    margin-top: 3.25rem;
  }

  .anthem-player {
    border-radius: 1.25rem;
  }

  .anthem-play {
    padding: 0.5rem;
  }

  .anthem-play-icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .anthem-meta {
    align-items: flex-start;
    font-size: 0.75rem;
  }

  .landing-chapters a {
    padding: 1.35rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anthem-play,
  .anthem-film-shade,
  .landing-film-link > span,
  .landing-chapters a::after {
    transition: none;
  }
}

/* Avtar hero: a bare statement, so the headline carries the full column. */
body[data-page="avtar"] .avtar-hero {
  padding: clamp(4.5rem, 7.5vw, 7.5rem) 0 clamp(6rem, 11vw, 11rem);
}

body[data-page="avtar"] .avtar-hero .page-hero-copy {
  max-width: 72rem;
  margin: 0;
  text-align: left;
}

/* Sizing, tracking and leading all come from the type scale below. The spans
   keep each sentence on its own line so the pivot holds; within a sentence the
   text is free to wrap, which is what lets the phone tier stay readable. */
body[data-page="avtar"] .avtar-hero h1 {
  max-width: none;
  margin: 0;
  font-size: var(--type-hero);
  font-weight: 500;
  letter-spacing: var(--type-hero-ls);
  line-height: var(--type-hero-lh);
  text-wrap: pretty;
}

body[data-page="avtar"] .avtar-hero h1 span,
body[data-page="avtar"] .avtar-hero h1 strong {
  display: block;
}

/* The payoff clause carries the brand accent, the same device the privacy hero
   uses on "Just ask." -- 5.53:1 on paper, so it clears AA at any size. */
body[data-page="avtar"] .avtar-hero h1 strong {
  color: var(--slate-dark);
  font-weight: inherit;
}

/* The hero's own bottom padding now carries the whole gap, so the statement gets
   a field of its own instead of sharing the screen with the next headline. */
body[data-page="avtar"] .avtar-hero + .site-section {
  padding-top: 0;
}

@media (max-width: 680px) {
  body[data-page="avtar"] .avtar-hero {
    padding: 3.25rem 0 2.5rem;
  }

  body[data-page="avtar"] .avtar-hero + .site-section {
    padding-top: 1.75rem;
  }
}

/* Privacy page: keep the opening statement and ownership card visually connected. */
body[data-page="privacy"] .privacy-hero {
  padding-top: clamp(3rem, 3.7vw, 3.5rem);
  padding-bottom: var(--space-section);
}

body[data-page="privacy"] .privacy-hero h1 {
  font-size: clamp(4.4rem, 5.1vw, 5rem);
}

body[data-page="privacy"] .privacy-hero + .ownership-section {
  padding-top: clamp(1.25rem, 1.6vw, 1.5rem);
}

body[data-page="privacy"] .ownership-statement {
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.75rem, 4vw, 4rem);
  border-color: rgba(7, 13, 26, 0.085);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1.5rem 4.5rem rgba(7, 13, 26, 0.065);
}

body[data-page="privacy"] .ownership-signals {
  margin-top: clamp(2.75rem, 4.5vw, 4rem);
  padding-top: clamp(2.25rem, 3.5vw, 3rem);
}

@media (max-width: 980px) {
  body[data-page="privacy"] .privacy-hero h1 {
    font-size: clamp(3.75rem, 8.4vw, 4.75rem);
  }

  body[data-page="privacy"] .ownership-statement {
    padding: clamp(2.75rem, 5.5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  }
}

@media (max-width: 680px) {
  body[data-page="privacy"] .privacy-hero {
    padding-top: 3rem;
    padding-bottom: 2.25rem;
  }

  body[data-page="privacy"] .privacy-hero h1 {
    font-size: clamp(2.7rem, 11vw, 3.5rem);
  }

  body[data-page="privacy"] .privacy-hero + .ownership-section {
    padding-top: 1rem;
  }

  body[data-page="privacy"] .ownership-statement {
    padding: 2.75rem 1.5rem;
  }
}

/* Comparison diagrams: the side-by-side composition cannot hold 12px labels
   at phone widths, so both stack vertically instead of overflowing their cards. */
@media (max-width: 680px) {
  body[data-page="avtar"] .general-model {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.85rem;
  }

  body[data-page="avtar"] .general-convergence {
    grid-auto-flow: column;
    gap: 0.5rem;
  }

  body[data-page="avtar"] .general-inputs {
    width: min(100%, 15rem);
  }

  body[data-page="avtar"] .general-module {
    width: min(100%, 12rem);
    min-height: 0;
    padding: 0.9rem 0.75rem;
  }

  body[data-page="avtar"] .personal-model {
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 0.85rem 0.7rem;
  }

  body[data-page="avtar"] .personal-stack {
    grid-column: 1 / -1;
    grid-row: 1;
    place-self: center;
  }

  body[data-page="avtar"] .personal-chip-preferences {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: end;
  }

  body[data-page="avtar"] .personal-chip-context {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  body[data-page="avtar"] .personal-chip-corrections {
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: center;
    justify-self: center;
  }

  /* horizontal connectors read as broken once the layout is vertical */
  body[data-page="avtar"] .personal-chip::after {
    display: none;
  }

  /* the stacked diagrams are taller than the fixed visual row */
  body[data-page="avtar"] .comparison-card {
    grid-template-rows: auto auto auto 1px auto;
  }

  body[data-page="avtar"] .comparison-visual {
    min-height: 0;
    padding-block: 1.35rem;
  }
}

/* The patent panel switches to a top divider at 900, so it must stack there too. */
@media (max-width: 900px) {
  .patent-composition > :first-child,
  .patent-proof {
    grid-column: 1 / -1;
  }
}

/* Single-column collapse for the 12-column grids.
   Kept last so it wins on source order over the base span rules. */
@media (max-width: 680px) {
  .pillar-card,
  .team-card,
  .landing-hero-title,
  .landing-hero-copy,
  .section-head > :first-child,
  .section-head > :last-child,
  .learning-manifesto-head > :first-child,
  .learning-manifesto-lede,
  .learning-manifesto-thesis,
  .learning-manifesto-art,
  .split-section > :first-child,
  .split-section > :last-child,
  .privacy-faq-layout > :first-child,
  .privacy-faq-layout > :last-child,
  .patent-composition > :first-child,
  .patent-proof,
  .email-demo > :first-child,
  .email-demo > :last-child,
  .avtar-control-intro h2,
  .avtar-control-intro > p:not(.eyebrow),
  body[data-page="avtar"] .comparison-card,
  body[data-page="avtar"] .comparison-intro h2,
  body[data-page="avtar"] .comparison-intro > p:not(.eyebrow) {
    grid-column: 1 / -1;
  }
}

/* Keep the meaning story compact and complete on narrow screens without
   changing the established desktop and tablet composition. */
@media (max-width: 680px) {
  .learning-difference-section {
    padding-bottom: 3.75rem;
  }

  .learning-manifesto {
    padding-block: 1.25rem 0;
  }

  .learning-manifesto-copy {
    row-gap: clamp(1.25rem, 4.5vw, 1.75rem);
    margin: clamp(1.75rem, 6vw, 2.25rem) 0 0;
    padding: clamp(1.5rem, 5vw, 2rem) 0 0.5rem;
  }

  .learning-manifesto-thesis {
    font-size: clamp(1.95rem, 8.2vw, 2.35rem);
    line-height: 1.03;
  }

  .learning-manifesto-thesis small {
    margin-bottom: 1.25rem;
  }

  .learning-manifesto-thesis em {
    max-width: 26rem;
    margin-top: 1rem;
    font-size: clamp(0.98rem, 4vw, 1.1rem);
    line-height: 1.4;
  }

  .learning-manifesto-art {
    left: 50%;
    width: min(100%, 27rem);
    max-width: none;
    margin-inline: 0;
    transform: translateX(-50%);
  }

  .learning-manifesto-art svg {
    max-height: none;
  }

  .learning-art-category-labels {
    display: inline;
  }

  .learning-art-category-label {
    font-size: 14.5px;
    letter-spacing: 0.55px;
    opacity: 0.88;
  }

  .learning-art-personal-label {
    font-size: 12.5px;
    letter-spacing: 1px;
    opacity: 0.78;
  }

  .learning-art-self-label {
    font-size: 12px;
    opacity: 0.82;
  }

  .learning-art-mobile-labels {
    display: none;
  }

  .learning-ownership-line {
    margin-top: clamp(1.25rem, 5vw, 1.75rem);
    padding: 0.25rem 0 0.5rem;
  }

  .learning-ownership-kicker {
    margin-bottom: 0.9rem;
  }

  .learning-ownership-statement {
    max-width: 23rem;
  }
}

@media (max-width: 420px) {
  .learning-art-category-label {
    font-size: 15.5px;
    letter-spacing: 0.45px;
  }

  .learning-art-personal-label {
    font-size: 14px;
    letter-spacing: 0.85px;
  }
}

/* ---------------------------------------------------------------------------
   Apple's marketing type scale, measured from apple.com at 1440 / 900 / 390px.

   Three things move together as type grows: the size steps up, the tracking
   tightens, and the leading closes. Tracking crosses zero around 40px and turns
   POSITIVE below it -- small display type needs opening up, not closing in.

     80  1.05   -0.015em      32  1.125  +0.004em
     64  1.063  -0.009em      24  1.167  +0.009em
     56  1.071  -0.005em      21  1.19   +0.011em
     48  1.083  -0.003em      19  1.211  +0.012em
     40  1.1     0            17  1.471  -0.022em

   Display tiers step at Apple's 734 / 1068 breakpoints rather than scaling with
   the viewport; text tiers (24 and below) hold one size at every width.
   --------------------------------------------------------------------------- */
body[data-page="avtar"] {
  /* Hero statement -- Apple's 80 tier. */
  --type-hero: 5rem;
  --type-hero-lh: 1.05;
  --type-hero-ls: -0.015em;

  /* Section headings -- Apple's 48 tier, so the page reads at 80/48 = 1.67. */
  --type-section: 3rem;
  --type-section-lh: 1.083;
  --type-section-ls: -0.003em;

  /* Card headings -- Apple's 24 tier. Note the positive tracking. */
  --type-card: 1.5rem;
  --type-card-lh: 1.167;
  --type-card-ls: 0.009em;

  /* Section intro -- Apple's 19 tier. */
  --type-intro: 1.1875rem;
  --type-intro-lh: 1.421;
  --type-intro-ls: 0.012em;

  /* Body -- Apple's 17 tier. */
  --type-body: 1.0625rem;
  --type-body-lh: 1.471;
  --type-body-ls: -0.022em;
}

@media (max-width: 1068px) {
  body[data-page="avtar"] {
    --type-hero: 4rem;          /* 64 */
    --type-hero-lh: 1.063;
    --type-hero-ls: -0.009em;

    --type-section: 2.5rem;     /* 40 */
    --type-section-lh: 1.1;
    --type-section-ls: 0em;
  }
}

@media (max-width: 734px) {
  body[data-page="avtar"] {
    --type-hero: 3rem;          /* 48 */
    --type-hero-lh: 1.083;
    --type-hero-ls: -0.003em;

    --type-section: 2rem;       /* 32 */
    --type-section-lh: 1.125;
    --type-section-ls: 0.004em;
  }
}

/* Scoped to the landing section only -- the hero above, and the pillars section
   keyed off #pillars-title. Every section below it keeps the older scale, so the
   selectors here stay deliberately narrow: no .split-copy, .comparison-intro or
   .principle-card. .pillar-card exists only in this section. */
body[data-page="avtar"] #pillars-title {
  font-size: var(--type-section);
  letter-spacing: var(--type-section-ls);
  line-height: var(--type-section-lh);
}

body[data-page="avtar"] .pillar-card h3 {
  font-size: var(--type-card);
  letter-spacing: var(--type-card-ls);
  line-height: var(--type-card-lh);
}

body[data-page="avtar"] [aria-labelledby="pillars-title"] .section-head > p {
  font-size: var(--type-intro);
  letter-spacing: var(--type-intro-ls);
  line-height: var(--type-intro-lh);
}

body[data-page="avtar"] .pillar-card p {
  font-size: var(--type-body);
  letter-spacing: var(--type-body-ls);
  line-height: var(--type-body-lh);
}

/* --- Landing section, cleaned up -------------------------------------------
   The pillar cards were translucent white (rgba(255,255,255,.58)) on #f7f5f2 --
   about 2% off the page -- with a white border that never showed, so only the
   shadow described them. Dropping the container removes that half-there object
   and, more importantly, puts the card text back on the section headline's left
   rail: the 1.4rem padding had been pushing it 23px to the right of every other
   element in the column. A hairline carries the column instead. */
body[data-page="avtar"] .pillar-card {
  min-height: 0;
  padding: 1.5rem 0 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Plain numeral rather than a 40px ring around 13px of type. The 3rem gap below
   it was sized for that ring inside a 248px-tall card; with both gone it read as
   a void. The column now runs 24 / 28 / 14 -- the numeral sits with the rule as
   a column marker, and the title and body group as one unit. */
body[data-page="avtar"] .pillar-number {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 1.75rem;
  border: 0;
  border-radius: 0;
  color: var(--ink-faint);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* No reserved second line: dropping the card padding widened the column from
   223px to 270px, so all four titles now set on one line and the paragraphs
   align on their own. Reserving the line only bought insurance against a wider
   fallback font, and it cost a visible 28px of slack in every column. */
body[data-page="avtar"] .pillar-card h3 {
  margin-bottom: 0.9rem;
}

/* The intro sat in 3 columns (270px -> ~28 characters a line) and was bottom
   aligned to the headline, which floated its first line above the h2's cap.
   A wider column, aligned from the top. Confined to the two-column range: below
   1051px the section head stacks to full width, and overriding that here left
   the intro trapped in a narrow right-hand column on phones. */
@media (min-width: 1051px) {
  body[data-page="avtar"] [aria-labelledby="pillars-title"] .section-head {
    align-items: start;
  }

  body[data-page="avtar"] [aria-labelledby="pillars-title"] .section-head > :last-child {
    grid-column: 9 / span 4;
    max-width: none;
    /* Optically aligns the intro's cap height with the 48px headline's. */
    padding-top: 0.35rem;
  }
}

/* One column below 680px: there is nothing to align across, so the reserved
   second title line is just dead space, and the number returns to the tighter
   spacing the phone layout already used. */
@media (max-width: 680px) {
  body[data-page="avtar"] .pillar-number {
    margin-bottom: 1.5rem;
  }
}

/* ---------------------------------------------------------------------------
   Privacy page: privacy built in.

   The ownership card above states the promise; this is the machinery behind
   it. It carries one headline, one statement and three named protections, so
   the composition is nothing but type, air and three hairlines: no eyebrow, no
   second card, no icon chips. Headline and statement stack on one left rail,
   the statement one step down from the headline and well above body copy.
   ------------------------------------------------------------------------ */

body[data-page="privacy"] .privacy-architecture {
  padding-block: clamp(4.5rem, 7.5vw, 8rem) clamp(4rem, 6.5vw, 7rem);
}

/* The copy is one block, so the drawing beside it cannot stretch the headline
   and the statement apart. */
.architecture-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: clamp(2.5rem, 4vw, 3.5rem);
  align-items: center;
}

.architecture-copy {
  grid-column: 1 / span 7;
}

.architecture-head h2 {
  max-width: 9ch;
  margin-bottom: clamp(1.75rem, 2.8vw, 2.5rem);
  font-size: clamp(3.25rem, 5.5vw, 5.5rem);
  letter-spacing: -0.042em;
  line-height: 0.95;
}

/* Each sentence carries one idea and takes its own line, the same device the
   hero headlines use, rather than breaking wherever the measure runs out. */
.architecture-lead {
  max-width: 36rem;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.15vw, 2.05rem);
  letter-spacing: -0.025em;
  line-height: 1.28;
  text-wrap: pretty;
}

.architecture-lead span {
  display: block;
}

/* Layered access, drawn rather than described: your context is the core, each
   ring is a layer of protection around it, and the one corridor cut through
   every ring is the approved session -- the only way in. Nothing else on the
   site draws this; the ownership card carries the padlock and the patent
   section the blueprint, so neither is repeated here. */
.architecture-art {
  grid-column: 8 / span 5;
  width: clamp(15rem, 25vw, 23rem);
  justify-self: end;
}

.architecture-art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The key arrives along the corridor as the section scrolls in. */
.has-js .architecture-head[data-reveal] .architecture-art-key {
  opacity: 0;
  transform: translate(15px, -9.4px);
  transition: opacity 700ms ease 380ms, transform 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) 380ms;
}

.has-js .architecture-head[data-revealed="true"] .architecture-art-key {
  opacity: 0.9;
  transform: none;
}

.architecture-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3.5rem);
  margin: clamp(4rem, 7vw, 7rem) 0 0;
  padding: 0;
  list-style: none;
}

.architecture-pillar {
  min-width: 0;
  padding-top: clamp(1.6rem, 2.1vw, 2rem);
  border-top: 1px solid var(--line);
}

/* A bare glyph rather than a chip: the ownership signals above already carry
   filled marks, and a ring around a 30px icon is one object more than this
   section needs. Kept close to its title, so the glyph belongs to the column
   rather than to the rule. */
.architecture-pillar-icon {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: 1.1rem;
  color: var(--slate-dark);
}

.architecture-pillar-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.architecture-pillar h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.15rem, 1.35vw, 1.35rem);
  letter-spacing: -0.022em;
  line-height: 1.12;
}

.architecture-pillar p {
  max-width: 22rem;
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* The columns rise together with the list, one after another. */
.architecture-pillar {
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.has-js .architecture-pillars:not([data-revealed="true"]) .architecture-pillar {
  opacity: 0;
  transform: translateY(0.65rem);
}

.architecture-pillar:nth-child(2) { transition-delay: 80ms; }
.architecture-pillar:nth-child(3) { transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .architecture-pillar {
    transition: none;
  }

  .has-js .architecture-head[data-reveal] .architecture-art-key {
    opacity: 0.9;
    transform: none;
    transition: none;
  }
}

/* Three columns of any copy stop reading at tablet width. Stacked, the
   hairlines become the section's spine. */
@media (max-width: 900px) {
  .architecture-copy {
    grid-column: 1 / -1;
  }

  .architecture-head h2 {
    max-width: none;
  }

  /* Stacked, there is no empty column for the drawing to fill, and a phone
     does not need 340px of ornament above the protections. */
  .architecture-art {
    display: none;
  }

  .architecture-pillars {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .architecture-pillar {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
  }

  .architecture-pillar-icon {
    grid-row: span 2;
    margin-bottom: 0;
    /* Optically centres the glyph on the title's cap height. */
    margin-top: 0.1rem;
  }

  .architecture-pillar + .architecture-pillar {
    margin-top: clamp(1.85rem, 3.5vw, 2.35rem);
  }

  .architecture-pillar p {
    max-width: 32rem;
  }
}

/* Below ~680px the longest sentence no longer fits its own line, so the
   statement goes back to running as one paragraph. */
@media (max-width: 680px) {
  .architecture-lead span {
    display: inline;
  }
}

@media (max-width: 520px) {
  .architecture-pillar {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .architecture-pillar-icon {
    grid-row: auto;
    margin-top: 0;
    margin-bottom: 0.95rem;
  }
}

/* Touch targets: coarse pointers only, so desktop sizing is untouched.
   Kept last so it wins on source order. */
@media (pointer: coarse) {
  .site-nav a {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
  }

  .home-footer-column a {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
  }

  .home-footer-socials a,
  .site-nav-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }

  .secondary-waitlist-cta .text-link,
  .home-footer-brand .navbar-brand,
  .site-brand {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }
}