/* Owner-supplied Aurora marketing system plus functional sample and route surfaces.
 * Shared tokens and the mark are maintained in services/design-system (ADR 0085). No React runtime. */
@import "./tokens.css";

@import "./mark.css";

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 35px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, a, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}

button, a {
  touch-action: manipulation;
}

button {
  cursor: pointer;
  font: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button, input, textarea, select {
  font: inherit;
}

input, textarea, select {
  min-width: 0;
}

h1, h2, h3, h4, p {
  margin: 0;
}

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -.045em;
}

h2 {
  font-size: var(--display-2);
  line-height: 1.07;
}

h3 {
  font-size: 27px;
  line-height: 1.15;
}

em {
  font-family: var(--serif);
  font-weight: 400;
}

p {
  line-height: 1.65;
}

svg {
  flex-shrink: 0;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 5px;
}

.wrap {
  width: min(1240px,calc(100% - 104px));
  margin-inline: auto;
}

.eyebrow {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  display: block;
}

.small {
  font-size: var(--text-sm);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  border-radius: var(--radius-pill);
  padding: 13px 23px;
  font-size: var(--text-base);
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform var(--dur-base),background var(--dur-base),box-shadow var(--dur-base);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.button.dark {
  background: var(--ink);
  color: var(--on-primary);
}

.button.dark:hover {
  background: var(--primary-hover);
}

.button.light {
  background: var(--lime);
  color: var(--ink);
}

.button.outline {
  border-color: var(--line);
  background: transparent;
}

.text-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: var(--text-base);
  font-weight: 500;
  background: transparent;
  border: 0;
  padding: 0;
}

.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
}

.icon-btn:hover {
  background: var(--soft);
}

.badge {
  font-size: var(--text-2xs);
  line-height: 1.4;
  letter-spacing: .045em;
  padding: 5px 9px;
  background: var(--soft);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-weight: 600;
}

.badge.lime {
  background: var(--lime);
}

.badge.paid {
  background: var(--success-surface);
  color: var(--success);
}

.badge.amber {
  background: var(--warning-surface);
  color: var(--warning);
}

/* The lockup (ADR 0086): the rising sun beside a lowercase wordmark, as on the Aurora prototype. */
.brand-lockup {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-weight: 650;
  letter-spacing: -.055em;
  font-size: 31px;
  line-height: 1;
}

.brand-lockup img {
  width: 48px;
  height: 48px;
  margin-top: -5px;
}

.brand-lockup.light {
  color: var(--on-dark);
}

.site-nav {
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  z-index: 30;
  border-bottom: 1px solid var(--line);
}

.nav-links {
  display: flex;
  gap: 32px;
  font-size: var(--text-base);
}

.nav-links a:hover {
  color: var(--green);
}

.nav-cta {
  min-height: 44px;
  padding: 10px 19px;
}

.menu-toggle {
  display: none;
}

.hero {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  min-height: 720px;
  position: relative;
  padding-top: 84px;
  gap: 20px;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 5;
  align-self: start;
  padding-top: 27px;
}

.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
}

.hero h1 {
  font-size: var(--display-hero);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  margin: 27px 0 27px;
}

/* A heading's second line is an italic serif, as the Aurora prototype set it (ADR 0086). */
:is(h1, h2) em {
  letter-spacing: -.035em;
}

.hero-description {
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 23px;
  align-items: center;
  margin-top: 32px;
}

.hero-note {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 19px;
}

/* The preview window's bar (in the day story): only the mark is interactive, and greeting it
   never starts or changes a sample. */

.preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--background);
  font-size: var(--text-sm);
}

.preview-bar strong {
  font-weight: 600;
}

.preview-company {
  padding-left: 10px;
  border-left: 1px solid var(--line-strong);
  color: var(--ink-2);
}

.preview-caption {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--text-xs);
}

.preview-mark {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

.preview-mark .aunara-mark {
  width: 30px;
  height: 30px;
  margin: -4px -2px -3px;
}

/* Greeted: the mark plays the shared sunrise again, sooner. */
.preview-mark .aunara-mark {
  --rise-delay: 350ms;
}

.preview-mark:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.preview-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.preview-card-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--soft);
  color: var(--ink-2);
}

.preview-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--text-xs);
}

.preview-card-text b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-card-text small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: var(--text-2xs);
}

/* The amber dot: this document waits for the person. */
.preview-card-text small i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--warning-accent);
}

.preview-card-button {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-2xs);
  font-weight: 500;
  white-space: nowrap;
}

/* The sunrise (ADR 0086), the site's signature, drawn in light rather than as the mark: a halo,
   five petal-shaped beams and a soft sun. In the hero it rises behind the product preview from the
   hero's horizon (the line over "Less admin"); the page closes on the same sunrise over the dark
   closing section, which rises when it comes into view. Decoration only. */
/* The hero's light reaches past the page edge; it never makes the page scroll sideways. */
.marketing {
  overflow-x: clip;
}

.hero-dawn {
  position: absolute;
  z-index: 1;
  left: 72%;
  bottom: 65px;
  width: var(--dawn-w, 900px);
  height: calc(var(--dawn-w, 900px) / 2);
  translate: -50% 0;
  pointer-events: none;
}

/* On paper the beams stay pale, so they read as light rather than leaves. */
.hero-dawn .dawn-beam {
  opacity: .72;
}

/* The hero's horizon line stays over the sunrise. */
.hero-bottom {
  position: relative;
  z-index: 2;
}

/* The closing section is the night before; the sun rises from its bottom edge. */
.closing-section {
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark) 38%, var(--dark-raised) 100%);
}

.closing-section .wrap {
  position: relative;
  z-index: 2;
}

.closing-dawn {
  position: relative;
  height: 300px;
  margin-top: -48px;
  pointer-events: none;
}

.closing-dawn .dawn {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1040px, 150vw);
  height: auto;
  aspect-ratio: 2;
  translate: -50% 0;
}

.closing-dawn .dawn-halo {
  opacity: .55;
}

.closing-dawn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--dawn-rgb) / 0), rgb(var(--dawn-rgb) / 70%) 30%, rgb(var(--dawn-rgb) / 70%) 70%, rgb(var(--dawn-rgb) / 0));
}

@media (max-width: 860px) {
  .hero-dawn { left: 50%; --dawn-w: 620px; }
}

@media (max-width: 640px) {
  .hero-dawn { --dawn-w: 460px; }
  .closing-dawn { height: 220px; }
}

@media (max-width: 480px) {
  .preview-caption { display: none; }
}

.hero-bottom {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--muted);
  border-top: 1px solid var(--line);
  height: 65px;
  margin-top: 15px;
  align-self: end;
}

.hero-bottom a {
  transform: rotate(90deg);
  border: 1px solid var(--line);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.manifesto {
  background: var(--lime);
  padding: 72px 0;
  margin-top: 20px;
}

.manifesto h2 {
  font-size: var(--display-1);
  margin: 25px 0;
}

.manifesto p:not(.eyebrow) {
  font-size: var(--text-lg);
  color: var(--brand);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 45px;
  gap: 28px;
}

.section-heading .eyebrow {
  margin-bottom: 24px;
}

.section-heading>p {
  font-size: var(--text-body);
  color: var(--muted);
  max-width: 365px;
}

.section-heading.centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.section-heading.centered .eyebrow {
  margin-bottom: 4px;
}

.section-heading.centered>p {
  max-width: none;
}

.experience-section,
.pricing-section {
  padding-top: 112px;
  padding-bottom: 20px;
}

.connected-section {
  background: var(--dark);
  color: var(--on-dark);
  margin-top: 112px;
  padding: 87px 0;
  overflow: hidden;
}

.connection-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.connected-section .eyebrow {
  color: var(--on-dark-accent);
}

.connected-section h2 {
  margin-top: 26px;
}

.connected-section p {
  color: var(--on-dark-muted);
  max-width: 405px;
  font-size: var(--text-body);
  margin-top: 25px;
}

.connected-section .button {
  margin-top: 26px;
}

.connected-section .connection-note {
  font-size: var(--text-xs);
  color: var(--on-dark-subtle);
  line-height: 1.8;
}

.control-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  padding: 112px 0 0;
  align-items: center;
}

.control-section h2 {
  margin-top: 23px;
}

.control-section>div>p {
  color: var(--muted);
  margin-top: 24px;
}

.control-section>div>.text-link {
  margin-top: 25px;
}

.status-tag {
  font-size: 10px;
  background: var(--brand-soft);
  padding: 5px 7px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.status-tag.amber {
  background: var(--warning-surface);
  color: var(--warning);
}

.pricing-section {
  padding-bottom: 0;
}

.proposal-note {
  font-size: 12px !important;
  color: var(--muted);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 19px;
}

.price-card {
  padding: 29px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
}

.price-card.featured {
  background: var(--brand-soft);
  border-color: var(--lime-line);
}

.price-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.price-card h3 {
  font-size: 27px;
}

.price-card-head .badge {
  font-size: 9px;
}

.price-card>p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 9px;
}

.price {
  display: flex;
  align-items: end;
  gap: 7px;
  margin-top: 31px;
  height: 65px;
}

.price strong {
  font-size: 47px;
  font-weight: 500;
  letter-spacing: -2px;
}

.price span {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-bottom: 12px;
}

.price-card p.billing-caption {
  font-size: var(--text-2xs);
  min-height: 25px;
  margin-top: 2px;
}

.price-card .button {
  width: 100%;
  margin-top: 20px;
  justify-content: space-between;
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 27px 0 5px;
  display: grid;
  gap: 15px;
  font-size: var(--text-sm);
}

.price-card li {
  display: flex;
  gap: 9px;
}

.price-card li svg {
  color: var(--green);
}

.pricing-full {
  padding-top: 80px;
  padding-bottom: 80px;
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  font-size: var(--text-base);
}

th {
  font-weight: 500;
}

td, th {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

thead {
  background: var(--soft);
}

.faq-section {
  padding: 112px 0;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 75px;
}

.faq-section h2 {
  margin-top: 22px;
  font-size: 46px;
}

summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: var(--text-body);
}

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

.closing-section {
  position: relative;
  overflow: hidden;
  color: var(--on-dark);
  text-align: center;
  padding: 88px 0 0;
}

.closing-section .eyebrow {
  color: var(--on-dark-accent);
  font-size: var(--text-2xs);
}

.closing-section h2 {
  margin: 28px 0;
  font-size: var(--display-1);
}

.closing-section .button {
  margin-top: 7px;
}

.site-footer {
  padding-top: 55px;
  padding-bottom: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
}

.site-footer>div>p {
  margin-top: 19px;
  font-size: var(--text-sm);
  color: var(--muted);
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: var(--text-sm);
  gap: 14px;
  justify-items: end;
}

.footer-links .text-link {
  font-size: var(--text-sm);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 23px;
  font-size: 10px;
  color: var(--muted);
  grid-column: 1/-1;
  margin-top: 13px;
}

.reveal {
  transition: transform var(--dur-reveal) var(--ease-dawn),opacity var(--dur-reveal) var(--ease-dawn);
}

.reveal:not(.revealed) {
  transform: translateY(10px);
}

@keyframes float {
  0%,100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-13px) rotate(2deg);
  }
}

@keyframes shadow-breathe {
  50% {
    transform: scale(.85);
    opacity: .6;
  }
}

@keyframes note-float {
  0%,100% {
    transform: translateY(0) rotate(-7deg);
  }

  50% {
    transform: translateY(-7px) rotate(-5deg);
  }
}

@keyframes voice-wave {
  50% {
    transform: scaleY(.45);
  }
}

@keyframes listen {
  50% {
    transform: scale(1.12);
    opacity: .4;
  }
}

@keyframes listen-face {
  50% {
    transform: scale(1.035) rotate(3deg);
  }
}

@keyframes thinking {
  0%,100% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg) translateY(-5px);
  }
}

@keyframes working {
  50% {
    transform: translateY(-8px);
  }
}

@keyframes success {
  0% {
    transform: scale(.9);
  }

  50% {
    transform: scale(1.1) translateY(-8px);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pulse-dot {
  50% {
    opacity: .3;
  }
}

.studio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.studio-card {
  padding: 25px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.studio-card h3 {
  font-size: 22px;
  margin-bottom: 15px;
}

.studio-card p {
  font-size: var(--text-base);
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.75;
}

.studio-card .eyebrow {
  font-size: var(--text-2xs);
  color: var(--muted);
  margin-bottom: 17px;
}

.trust-page {
  padding-top: 75px;
  padding-bottom: 90px;
}

.trust-page>h1 {
  font-size: var(--display-1);
  margin: 22px 0;
}

.trust-page>.intro {
  font-size: 18px;
  color: var(--muted);
  max-width: 650px;
}

.trust-page .studio-grid {
  margin-top: 42px;
}

.trust-page .studio-card {
  padding: 33px;
}

/* Terms and Privacy (ADR 0092): one readable column, sections set apart by a hairline. */
.legal-page {
  display: grid;
  gap: 22px;
  max-width: 760px;
  padding-top: 75px;
  padding-bottom: 90px;
}

.legal-page>h1 {
  font-size: var(--display-1);
  margin: 0;
}

.legal-page>.intro {
  font-size: 18px;
  color: var(--muted);
}

.legal-page .legal-draft {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.legal-page section {
  display: grid;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.legal-page h2 {
  font-size: 22px;
  margin: 0;
}

.legal-page section p, .legal-page li {
  color: var(--ink-2);
  line-height: 1.7;
}

.legal-page ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

@media (min-width:1600px) {
  .hero {
    min-height: 770px;
  }
}

@media (max-width:1100px) {
  .wrap {
    width: calc(100% - 64px);
  }

  .nav-links {
    gap: 20px;
  }

  .hero {
    min-height: 660px;
    gap: 0;
  }

  .hero h1 {
    font-size: 8.2vw;
  }

  .hero-actions {
    gap: 15px;
    flex-wrap: wrap;
  }

  .hero-description {
    font-size: var(--text-lg);
  }

  .hero-note {
    max-width: 330px;
  }

  .connection-layout, .control-section {
    gap: 45px;
  }

  

  

  .price-card {
    padding: 24px;
  }

  .price-card-head {
    align-items: start;
    flex-direction: column;
  }

  .price-card-head .badge {
    position: absolute;
    margin-left: 100px;
    margin-top: 6px;
  }

  .pricing-grid {
    gap: 12px;
  }
}

@media (max-width:860px) {
  .nav-links {
    gap: 16px;
    font-size: var(--text-xs);
  }

  .nav-cta {
    font-size: var(--text-xs);
    padding: 10px 15px;
  }

  .site-nav {
    gap: 20px;
    height: 86px;
  }

  .site-nav .brand-lockup {
    font-size: 27px;
  }

  .hero {
    padding-top: 40px;
    min-height: 610px;
    grid-template-columns: 1fr 1fr;
  }

  .hero h1 {
    font-size: 8vw;
  }

  .hero-actions {
    flex-direction: column;
    align-items: start;
    gap: 19px;
  }

  .hero-description {
    font-size: var(--text-md);
  }

  .hero .eyebrow {
    font-size: var(--text-2xs);
    gap: 7px;
  }

  .hero-bottom {
    font-size: 8px;
  }

  .experience-section,
.pricing-section {
    padding-top: 80px;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 22px;
  }

  .section-heading>p br {
    display: none;
  }

  .section-heading>p {
    max-width: 520px;
  }

  

  

  

  

  .connected-section {
    padding: 70px 0;
    margin-top: 80px;
  }

  .connection-layout {
    gap: 30px;
  }

  

  

  

  

  

  .control-section {
    gap: 30px;
    padding-top: 80px;
  }

  

  

  

  

  

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

  .price-card:last-child {
    grid-column: 1/-1;
  }

  .price-card:last-child .price-card-head {
    flex-direction: row;
  }

  .price-card:last-child ul {
    grid-template-columns: 1fr 1fr;
  }

  .price-card:last-child .price {
    height: auto;
    margin-top: 20px;
  }

  .faq-section {
    padding: 80px 0;
    gap: 40px;
    grid-template-columns: .8fr 1.2fr;
  }

  .faq-section h2 {
    font-size: 35px;
  }

  
}

@media (max-width:640px) {
  .wrap {
    width: calc(100% - 40px);
  }

  .site-nav {
    height: 79px;
    gap: 12px;
  }

  .site-nav .brand-lockup {
    font-size: 28px;
  }

  .site-nav .brand-lockup img {
    width: 32px;
    height: 32px;
  }

  .menu-toggle {
    display: flex;
    width: 37px;
    height: 37px;
    margin-left: 0;
  }

  .nav-cta {
    margin-left: auto;
    font-size: var(--text-2xs);
    gap: 8px;
    min-height: 37px;
    padding: 8px 13px;
  }

  .nav-cta svg {
    width: 14px;
  }

  .nav-links {
    display: none;
  }

  .nav-links.is-open {
    display: flex;
    position: absolute;
    top: 69px;
    left: 0;
    right: 0;
    background: var(--background);
    border: 1px solid var(--line);
    padding: 25px;
    border-radius: var(--radius-lg);
    flex-direction: column;
    font-size: var(--text-body);
    box-shadow: var(--shadow);
  }

  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 32px;
    gap: 0;
    min-height: 0;
  }

  .hero-copy {
    padding-top: 10px;
    text-align: center;
    align-self: stretch;
  }

  .hero .eyebrow {
    justify-content: center;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-caps);
  }

  .hero h1 {
    font-size: clamp(53px,12.8vw,82px);
    margin: 23px 0 20px;
  }

  .hero-description {
    font-size: var(--text-body);
    line-height: 1.65;
  }

  .hero-actions {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    gap: 19px;
  }

  .hero-actions .button {
    font-size: var(--text-xs);
    min-height: 45px;
    padding: 12px 16px;
    gap: 12px;
  }

  .hero-actions .text-link {
    font-size: var(--text-xs);
  }

  .hero-note {
    font-size: 10px;
    max-width: none;
    margin-top: 15px;
  }

  .hero-bottom {
    margin-top: 13px;
    font-size: 7px;
    letter-spacing: .075em;
    height: 55px;
    gap: 12px;
  }

  .hero-bottom span {
    max-width: 135px;
  }

  .hero-bottom span:last-child {
    text-align: right;
  }

  .manifesto {
    margin-top: 0;
    padding: 49px 0;
  }

  .manifesto .eyebrow {
    font-size: var(--text-2xs);
  }

  .manifesto h2 {
    font-size: 37px;
    margin: 23px 0;
  }

  

  .manifesto p:not(.eyebrow) {
    font-size: var(--text-base);
  }

  .manifesto .text-link {
    font-size: var(--text-sm);
  }

  .experience-section,
.pricing-section {
    padding-top: 65px;
  }

  .section-heading {
    margin-bottom: 27px;
    gap: 20px;
  }

  .section-heading .eyebrow {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-caps);
    margin-bottom: 20px;
  }

  .section-heading h2 {
    font-size: 37px;
  }

  .section-heading>p {
    font-size: var(--text-base);
  }

  

  

  

  

  

  

  

  

  

  

  .connected-section {
    margin-top: 65px;
    padding: 54px 0 42px;
  }

  .connection-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .connected-section .eyebrow {
    font-size: var(--text-2xs);
  }

  .connected-section h2 {
    font-size: 44px;
    margin-top: 22px;
  }

  .connected-section p {
    font-size: var(--text-base);
    margin-top: 20px;
  }

  .connected-section .connection-note {
    font-size: var(--text-2xs);
  }

  

  

  

  

  

  .control-section {
    grid-template-columns: 1fr;
    padding-top: 64px;
    gap: 42px;
  }

  .control-section>div:last-child {
    order: -1;
  }

  .control-section .eyebrow {
    font-size: var(--text-2xs);
  }

  .control-section h2 {
    font-size: 39px;
    margin-top: 21px;
  }

  .control-section>div>p {
    font-size: var(--text-base);
    margin-top: 20px;
  }

  

  

  

  

  .status-tag {
    font-size: 9px;
  }

  

  .section-heading.centered {
    gap: 15px;
  }

  .proposal-note {
    font-size: 11px !important;
    max-width: 320px !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .price-card {
    padding: 28px;
  }

  .price-card:last-child {
    grid-column: auto;
  }

  .price-card:last-child ul {
    grid-template-columns: 1fr;
  }

  .price-card-head {
    flex-direction: row;
    align-items: center;
  }

  .price-card-head .badge {
    position: static;
    margin: 0;
  }

  .price {
    height: auto;
  }

  .price-card>p {
    font-size: var(--text-base);
  }

  .price-card ul {
    font-size: var(--text-base);
  }

  .faq-section {
    grid-template-columns: 1fr;
    padding: 65px 0;
    gap: 25px;
  }

  .faq-section .eyebrow {
    font-size: var(--text-2xs);
  }

  .faq-section h2 {
    font-size: 38px;
  }

  

  

  .closing-section {
    padding: 50px 0 60px;
  }

  .closing-section h2 {
    font-size: 40px;
  }

  .closing-section .eyebrow {
    font-size: var(--text-2xs);
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding-top: 36px;
    gap: 25px;
  }

  .footer-links {
    justify-items: start;
    gap: 18px;
    font-size: var(--text-xs);
  }

  .footer-bottom {
    flex-direction: column;
    font-size: 9px;
    gap: 12px;
    margin-top: 5px;
  }

  .site-footer>div>p {
    font-size: var(--text-xs);
    margin-top: 16px;
  }

  .pricing-full {
    padding-top: 50px;
    padding-bottom: 45px;
  }

  .studio-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .studio-card {
    padding: 23px;
  }

  .studio-card p {
    font-size: var(--text-sm);
  }

  .trust-page {
    padding-top: 45px;
    padding-bottom: 55px;
  }

  .trust-page>h1 {
    font-size: 43px;
  }

  .trust-page>.intro {
    font-size: var(--text-body);
  }

  .trust-page .studio-card {
    padding: 25px;
  }
}

@media (max-width:360px) {
  .wrap {
    width: calc(100% - 32px);
  }

  .hero .eyebrow {
    font-size: var(--text-2xs);
  }

  .hero h1 {
    font-size: 51px;
  }

  .hero-actions {
    gap: 12px;
  }

  .hero-actions .button {
    font-size: var(--text-2xs);
  }

  .hero-actions .text-link {
    font-size: var(--text-2xs);
  }

  

  .status-tag {
    font-size: 8px;
  }

  

  .price-card-head .badge {
    font-size: 8px;
  }

  .hero-bottom {
    font-size: 6px;
  }
}

@media (prefers-reduced-motion:reduce) {
  *, *:before, *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    transform: none !important;
  }
}

html[data-motion=off] *, html[data-motion=off] *:before, html[data-motion=off] *:after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  min-width: 320px;
}

button, a {
  touch-action: manipulation;
}

img {
  max-width: 100%;
}

button:disabled {
  cursor: default;
}

button, a, input {
  font: inherit;
}

button {
  color: inherit;
}

a {
  overflow-wrap: anywhere;
}

h1, h2, h3, p {
  overflow-wrap: break-word;
}

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

.site-nav .mobile-menu {
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.site-nav .mobile-menu svg {
  width: 20px;
}

.site-nav .mobile-menu[hidden] {
  display: none !important;
}

.site-nav {
  height: auto;
  min-height: 92px;
  flex-wrap: wrap;
  padding-block: 18px;
}

.nav-links {
  align-items: center;
}

.nav-links a {
  padding-block: 12px;
}

.hero-mark {
  width: 100%;
}

.reveal {
  transform: none !important;
}

.reveal.is-waiting {
  opacity: .25;
}

.price {
  height: auto;
  min-height: 65px;
  display: block;
  font-size: 22px;
  letter-spacing: -.4px;
  font-weight: 500;
  line-height: 1.2;
}

.price-card .billing-caption {
  line-height: 1.7;
}

.pricing-section h1 {
  font-family: var(--font-sans);
  font-size: var(--display-1);
  font-weight: var(--weight-medium);
  line-height: 1.1;
}

.proposal-note {
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-block: 24px;
}

.app-bridge {
  margin-block: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--soft);
}

.app-bridge p {
  color: var(--muted);
  font-size: var(--text-base);
}

.app-bridge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.text-button, .motion-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: left;
}

.motion-toggle {
  min-height: 44px;
}

.motion-symbol {
  font-size: var(--text-body);
}

.button-citron {
  background: var(--lime);
  border-color: var(--lime);
}

.button-dark {
  background: var(--ink);
  color: var(--on-primary);
}

.button {
  min-height: 44px;
}

.button svg {
  flex-shrink: 0;
}

.experience-section {
  padding-block: 86px;
  scroll-margin-top: 20px;
}

.section-index {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
  display: flex;
  gap: 14px;
}

.index-number {
  color: var(--green);
}

.experience-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-block: 25px 35px;
}

.experience-heading h2 {
  font-size: var(--display-2);
  line-height: 1.06;
  letter-spacing: -1.5px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
}

.experience-heading p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--muted);
}

.sample-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sample-tabs button {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  min-height: 44px;
  padding: 10px 17px;
  background: transparent;
  font-size: var(--text-sm);
  cursor: pointer;
}

.sample-tabs button[aria-selected=true] {
  background: var(--ink);
  color: var(--on-primary);
  border-color: var(--ink);
}

.workspace {
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.workspace-topbar {
  padding: 19px 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.workspace-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-base);
  font-weight: 500;
}

.mini-mark {
  object-fit: contain;
}

.sample-badge {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  color: var(--green);
}

.workspace-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

.conversation-preview {
  padding: 34px;
  min-width: 0;
}

.small-label {
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
}

.sample-intent {
  display: flex;
  gap: 14px;
  margin-top: 25px;
}

.intent-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
}

.sample-intent p {
  padding: 15px 18px;
  background: var(--soft);
  border-radius: var(--radius-xs) var(--radius-xl) var(--radius-xl);
  font-size: var(--text-base);
  line-height: 1.7;
  flex: 1;
  margin: 0;
}

.sample-response {
  display: flex;
  align-items: start;
  gap: 14px;
  margin-top: 28px;
}

.sample-response .response-mark {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: block;
}

.sample-response>div {
  min-width: 0;
}

.response-name {
  font-size: var(--text-base);
  font-weight: 600;
}

.sample-response p {
  font-size: var(--text-base);
  line-height: 1.8;
  margin-top: 8px;
}

.sample-steps {
  list-style: none;
  display: grid;
  gap: 15px;
  padding: 0;
  margin: 28px 0 30px 55px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.sample-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-marker {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 10px;
  flex-shrink: 0;
}

.sample-steps li[data-state=active] {
  color: var(--ink);
}

.sample-steps li[data-state=active] .step-marker, .sample-steps li[data-state=done] .step-marker {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.sample-controls {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.sample-controls button {
  font-size: var(--text-xs);
}

.play-icon {
  font-size: var(--text-body);
}

.canvas-preview {
  background: var(--soft);
  border-left: 1px solid var(--line);
  padding: 30px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.canvas-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 23px;
}

.canvas-dot, .bottom-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}

.result-document {
  background: var(--paper);
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-height: 290px;
  overflow-wrap: anywhere;
}

.document-eyebrow {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
}

.result-document h3 {
  font-size: 25px;
  line-height: 1.15;
  margin: 23px 0 8px;
  letter-spacing: -.5px;
}

.document-subtitle {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.7;
}

.document-item {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 27px;
  padding-block: 19px;
  border-block: 1px solid var(--line);
}

.lamp-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: var(--soft);
  border-radius: var(--radius-sm);
}

.lamp-icon svg {
  width: 100%;
  height: 100%;
}

.document-item strong, .document-item small {
  display: block;
  font-size: var(--text-xs);
}

.document-item small {
  color: var(--muted);
  margin-top: 6px;
}

.document-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 21px;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}

.document-total span {
  font-size: var(--text-xs);
  color: var(--muted);
}

.document-total strong {
  font-size: 22px;
  letter-spacing: -.5px;
}

.document-fine, .document-note {
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 13px;
}

.document-state {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--soft);
  border-radius: var(--radius-sm);
  padding: 11px;
  margin-top: 23px;
  font-size: 10px;
  line-height: 1.6;
}

.canvas-caption {
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--muted);
  text-align: center;
  margin-top: 19px;
}

.contact-rows, .focus-rows {
  display: grid;
  gap: 15px;
  margin-top: 23px;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 12px;
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--line);
  padding-bottom: 13px;
}

.contact-row span {
  color: var(--muted);
}

.contact-row strong {
  font-weight: 500;
}

.focus-row {
  display: flex;
  gap: 13px;
  font-size: var(--text-xs);
  line-height: 1.7;
}

.focus-row small {
  display: block;
  color: var(--muted);
  font-size: var(--text-2xs);
}

.focus-number {
  color: var(--green);
  font-size: 10px;
  padding-top: 2px;
}

.workspace-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 15px 27px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
}

.workspace-bottom .text-button {
  margin-left: auto;
  font-size: var(--text-2xs);
}

.experience-footnote {
  font-size: var(--text-2xs);
  line-height: 1.8;
  margin-top: 20px;
  color: var(--muted);
  text-align: center;
}

.experience-footnote span {
  color: var(--ink);
}

.no-script {
  font-size: var(--text-xs);
  line-height: 1.7;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--soft);
  margin-top: 20px;
}

.about-dialog {
  width: min(550px,calc(100% - 32px));
  max-height: 90dvh;
  overflow: auto;
  border: 1px solid var(--line);
  padding: 40px;
  border-radius: var(--radius-2xl);
  margin: auto;
  color: var(--ink);
  background: var(--paper);
}

.about-dialog::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(4px);
}

.about-dialog .dialog-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 44px;
  height: 44px;
  background: var(--soft);
  border: 0;
  border-radius: 50%;
  font-size: var(--text-2xl);
}

.dialog-mark {
  margin: 15px 0;
  display: block;
}

.about-dialog h2 {
  font-size: 39px;
  line-height: 1.1;
  margin: 20px 0;
}

.about-dialog p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--muted);
  margin-block: 18px;
}

.about-dialog .button {
  margin-top: 14px;
}

@media (max-width:900px) {
  .site-nav {
    gap: 15px;
  }

  .site-nav .nav-links {
    gap: 20px;
    font-size: var(--text-xs);
  }

  .experience-heading {
    display: block;
  }

  .experience-heading p {
    margin-top: 20px;
  }

  .conversation-preview {
    padding: 25px;
  }

  .canvas-preview {
    padding: 23px;
  }

  .result-document {
    padding: 20px;
  }

  .sample-steps {
    margin-left: 0;
  }
}

@media (max-width:640px) {
  .site-nav {
    min-height: 75px;
  }

  .site-nav .nav-links {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    order: 5;
  }

  .site-nav[data-navigation=ready] .nav-links {
    display: none;
  }

  .site-nav[data-navigation=ready] .nav-links.is-open {
    display: flex;
  }

  .site-nav .mobile-menu {
    display: inline-flex;
  }

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

  .wrap {
    width: calc(100% - 36px);
  }

  .hero-bottom {
    font-size: 7px;
    gap: 8px;
  }

  .hero-description {
    font-size: var(--text-body);
  }

  .experience-section {
    padding-block: 58px;
  }

  .experience-heading h2 {
    font-size: 40px;
  }

  .workspace-body {
    grid-template-columns: 1fr;
  }

  .canvas-preview {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 22px;
  }

  .conversation-preview {
    padding: 24px 22px;
  }

  .workspace-topbar {
    padding: 18px;
    align-items: start;
  }

  .workspace-brand {
    font-size: var(--text-xs);
    gap: 8px;
  }

  .sample-badge {
    font-size: var(--text-2xs);
    max-width: 90px;
    text-align: right;
    line-height: 1.6;
  }

  .workspace-bottom {
    padding: 16px 18px;
  }

  .workspace-bottom .text-button {
    margin-left: 0;
  }

  .sample-tabs {
    gap: 5px;
  }

  .sample-tabs button {
    font-size: var(--text-2xs);
    padding: 9px 10px;
  }

  .sample-controls {
    gap: 12px;
  }

  .sample-response p, .sample-intent p {
    font-size: var(--text-sm);
  }

  .sample-steps {
    margin-left: 0;
  }

  .result-document {
    padding: 23px;
  }

  .about-dialog {
    padding: 27px;
  }

  .about-dialog h2 {
    font-size: 31px;
  }

  .app-bridge {
    padding: 22px;
  }

  .price-card-head .badge {
    font-size: 10px;
  }
}

@media (min-width:641px) {
  .site-nav .mobile-menu {
    display: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .reveal.is-waiting {
    opacity: 1;
  }
}

html[data-motion=off] .reveal.is-waiting {
  opacity: 1;
}

@media (max-width:640px) {
  .site-nav:not([data-navigation=ready])>.nav-cta {
    display: inline-flex;
    font-size: var(--text-2xs);
    padding-inline: 15px;
  }

  .site-nav:not([data-navigation=ready]) {
    gap: 12px;
  }
}

/* ── The brand bible (/brand/, ADR 0086) ─────────────────────────────────────────────────────
   Drawn with the product's own tokens, marks and motion; brand.mjs fills in measured values. */
.inline-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.brand-bible {
  padding-bottom: var(--space-8);
}

.brand-bible code {
  font-family: var(--font-mono);
  font-size: .86em;
  color: var(--ink-2);
}

.bb-hero {
  padding-top: var(--space-8);
  text-align: center;
}

.bb-hero h1 {
  margin: var(--space-5) 0 var(--space-4);
  font-size: var(--display-1);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.bb-hero .intro {
  max-width: 44ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
}

.bb-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.bb-toc a {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.bb-toc a:hover {
  border-color: var(--lime-line);
  background: var(--brand-soft);
}

/* The hero's sunrise: the mark, large, on a horizon across the page, with lime light behind. */
.bb-sunrise {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
  border-bottom: 1px solid var(--line-strong);
}

.bb-sunrise::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: min(900px, 100%);
  height: 260px;
  translate: -50% 0;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgb(var(--dawn-rgb) / 90%), rgb(var(--dawn-rgb) / 0) 72%);
}

.bb-hero-mark {
  width: 300px;
  height: 300px;
  margin-bottom: calc(-11 / 32 * 300px);
}

.bb-hero-mark :is(.mark-horizon, .mark-ledger) {
  display: none;
}

.bb-section {
  padding-top: var(--space-9);
}

.bb-head {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  max-width: 900px;
  margin-bottom: var(--space-6);
}

.bb-head .index-number {
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
}

.bb-head h2 {
  font-size: var(--display-2);
  line-height: var(--leading-display);
}

.bb-head p {
  grid-column: 2;
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.bb-section h3 {
  margin: var(--space-7) 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
}

.bb-lede {
  max-width: 70ch;
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.bb-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

/* The mark on its construction grid. */
.bb-construction {
  margin: 0;
}

.bb-grid-art {
  position: relative;
  aspect-ratio: 1;
  max-width: 460px;
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

.bb-grid-art > * {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
}

.bb-guides {
  overflow: visible;
  pointer-events: none;
}

.bb-grid-lines {
  fill: none;
  stroke: var(--line);
  stroke-width: .06;
}

.bb-guide {
  fill: none;
  stroke: var(--focus);
  stroke-width: .08;
  stroke-dasharray: .4 .3;
  opacity: .7;
}

.bb-construction figcaption {
  max-width: 460px;
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.bb-facts {
  display: grid;
  margin: 0 0 var(--space-5);
  border-top: 1px solid var(--line);
}

.bb-facts > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.bb-facts dt {
  font-weight: var(--weight-semibold);
}

.bb-facts dd {
  margin: 0;
  color: var(--muted);
}

/* Lockups, sizes, rules and things never to do. */
.bb-lockups, .bb-uses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.bb-uses {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bb-tile {
  display: grid;
  align-content: space-between;
  gap: var(--space-5);
  min-height: 190px;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
}

.bb-tile > small {
  color: var(--muted);
  font-size: var(--text-sm);
}

.bb-tile.is-dark {
  border-color: transparent;
  background: var(--dark);
  color: var(--on-dark);
}

.bb-tile.is-dark > small {
  color: var(--on-dark-muted);
}

.bb-tile.is-dark .aunara-mark {
  color: var(--horizon-on-dark);
}

.bb-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 34px;
  font-weight: var(--weight-bold);
  letter-spacing: -.055em;
}

.bb-lockup .aunara-mark {
  width: 54px;
  height: 54px;
  margin-top: -6px;
}

.bb-sizes {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}

.bb-sizes > span {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
}

.bb-sizes .aunara-mark {
  width: var(--size);
  height: var(--size);
}

.bb-sizes small {
  color: var(--muted);
  font-size: var(--text-2xs);
}

.bb-rules {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
}

.bb-donts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-donts li {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-xl);
  background: var(--paper);
}

.bb-donts small {
  color: var(--danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.bb-dont {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
}

.bb-dont::after {
  content: "";
  position: absolute;
  inset: 44% -6%;
  height: 2px;
  border-radius: 2px;
  background: var(--danger);
  rotate: -18deg;
}

.bb-dont .aunara-mark {
  width: 72px;
  height: 72px;
}

.bb-dont.is-boxed .aunara-mark {
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--dark);
  color: var(--horizon-on-dark);
}

.bb-dont.is-recoloured .aunara-mark {
  filter: hue-rotate(150deg) saturate(1.6);
}

.bb-dont.is-stretched .aunara-mark {
  scale: 1.5 .8;
  rotate: -12deg;
}

.bb-dont.is-outlined .aunara-mark {
  filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(0 8px 6px rgb(var(--forest-rgb) / 40%));
}

/* Colour. */
.bb-proportion {
  display: flex;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.bb-proportion span {
  flex: var(--share) 1 0;
  background: var(--swatch);
}

.bb-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-swatch {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  font-size: var(--text-sm);
}

.bb-chip {
  height: 72px;
  margin-bottom: var(--space-2);
  border: 1px solid rgb(var(--forest-rgb) / 8%);
  border-radius: var(--radius-sm);
  background: var(--swatch);
}

.bb-swatch > :not(.bb-chip) {
  padding-inline: var(--space-1);
}

.bb-swatch .bb-value {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.bb-swatch small {
  color: var(--muted);
  font-size: var(--text-xs);
}

.bb-swatches.is-dark .bb-swatch {
  border-color: transparent;
  background: var(--dark);
  color: var(--on-dark);
}

.bb-swatches.is-dark :is(code, small, .bb-value) {
  color: var(--on-dark-muted);
}

.bb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.bb-table th {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: left;
}

.bb-table td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.bb-pair {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.bb-ratio {
  color: var(--success);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.bb-ratio.is-below {
  color: var(--danger);
}

/* Type. */
.bb-specimen {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  margin-bottom: var(--space-6);
}

.bb-display {
  font-size: var(--display-hero);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.bb-specimen-notes {
  display: grid;
  gap: var(--space-3);
  color: var(--ink-2);
}

.bb-figures {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.bb-scale td:first-child {
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--tracking-heading);
}

/* Motion. */
.bb-motions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-motions li {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
}

.bb-motions small {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.bb-stage {
  display: grid;
  place-items: center;
  justify-self: stretch;
  height: 120px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--soft);
}

.bb-stage .aunara-mark {
  width: 96px;
  height: 96px;
}

.bb-dawn-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark) 45%, var(--dark-raised) 100%);
  color: var(--on-dark);
}

.bb-dawn-demo p {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--on-dark-muted);
  line-height: var(--leading-body);
}

.bb-dawn-demo code {
  color: var(--on-dark-accent);
}

.bb-dawn-stage {
  aspect-ratio: 2;
  border-bottom: 1px solid rgb(var(--dawn-rgb) / 60%);
}

.bb-dawn-stage .dawn-halo {
  opacity: .6;
}

.bb-timeline {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.bb-lane {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.bb-track {
  position: relative;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--soft);
}

.bb-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--start);
  width: var(--span);
  display: flex;
  align-items: center;
  padding-inline: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--sun), var(--ray));
  color: var(--ink);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bb-curves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-curves li {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.bb-curves svg {
  width: 100%;
  max-height: 180px;
}

.bb-axis {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
}

.bb-curve {
  fill: none;
  stroke: var(--moss-500);
  stroke-width: 3;
  stroke-linecap: round;
}

.bb-curves small {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Shape, space and depth. */
.bb-shapes, .bb-shadows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-shapes li, .bb-shadows li, .bb-spaces li {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.bb-shapes small, .bb-shadows small, .bb-spaces small {
  color: var(--muted);
  font-size: var(--text-xs);
}

.bb-radius {
  height: 84px;
  margin-bottom: var(--space-2);
  border: 2px solid var(--ray);
  background: var(--brand-soft);
}

.bb-spaces {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-spaces li {
  grid-template-columns: 120px 110px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.bb-space {
  height: 14px;
  border-radius: 2px;
  background: var(--ray);
}

.bb-shadow {
  height: 96px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

/* In use. */
.bb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.bb-uses .preview-card {
  max-width: 420px;
  background: var(--paper);
}

.bb-voice td:first-child {
  color: var(--ink);
}

.bb-voice td:last-child {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--danger-line);
}

@media (max-width: 1000px) {
  .bb-motions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-donts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-lockups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .bb-split, .bb-specimen, .bb-dawn-demo, .bb-uses, .bb-curves { grid-template-columns: minmax(0, 1fr); }
  .bb-head { grid-template-columns: minmax(0, 1fr); }
  .bb-head p { grid-column: 1; }
  .bb-hero-mark { width: 220px; height: 220px; margin-bottom: calc(-11 / 32 * 220px); }
  .bb-lane { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .bb-spaces li { grid-template-columns: 110px 28px minmax(0, 1fr); }
  .bb-spaces code { white-space: nowrap; }
  .bb-table { font-size: var(--text-xs); table-layout: fixed; }
  .bb-scale td:first-child { white-space: normal; overflow-wrap: anywhere; }
  .bb-scale th:nth-child(3), .bb-scale td:nth-child(3) { display: none; }
  .bb-contrast td:nth-child(2) code { display: none; }
}

@media (max-width: 480px) {
  .bb-motions, .bb-donts { grid-template-columns: minmax(0, 1fr); }
  .bb-scale th:nth-child(4), .bb-scale td:nth-child(4) { display: none; }
}

/* ── The hero's sunrise names what Aunara handles (ADR 0086) ─────────────────────────────────
   Each petal of the sunrise carries a label at its tip, and each label leads to that part of the
   day below. The labels open with their petals; hovering one brightens its beam. */
.hero {
  --dawn-w: 900px;
}

.hero-petals {
  position: absolute;
  z-index: 3;
  left: 72%;
  bottom: 65px;
  width: var(--dawn-w);
  height: calc(var(--dawn-w) / 2);
  translate: -50% 0;
  pointer-events: none;
  --rise-delay: 1700ms;
  --rise-stagger: 150ms;
}

.petal-label {
  --r: calc(var(--dawn-w) * .39);
  position: absolute;
  left: calc(50% + sin(var(--angle)) * var(--r));
  bottom: calc(cos(var(--angle)) * var(--r));
  translate: -50% 50%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--lime-line);
  border-radius: var(--radius-pill);
  background: rgb(var(--white-rgb) / 82%);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  pointer-events: auto;
  transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
  animation: petal-label-in var(--dur-bloom) var(--ease-bloom) calc(var(--rise-delay) + var(--ray-order) * var(--rise-stagger)) both;
}

.petal-label:hover, .petal-label:focus-visible {
  border-color: var(--ray);
  background: var(--lime);
  box-shadow: var(--shadow-md);
}

.hero-dawn .dawn-beam {
  transition: opacity var(--dur-slow) var(--ease-dawn);
}

.hero:has(.petal-label[data-beam="1"]:is(:hover, :focus-visible)) .beam-1,
.hero:has(.petal-label[data-beam="2"]:is(:hover, :focus-visible)) .beam-2,
.hero:has(.petal-label[data-beam="3"]:is(:hover, :focus-visible)) .beam-3,
.hero:has(.petal-label[data-beam="4"]:is(:hover, :focus-visible)) .beam-4,
.hero:has(.petal-label[data-beam="5"]:is(:hover, :focus-visible)) .beam-5 {
  opacity: 1;
}

@keyframes petal-label-in {
  from { opacity: 0; scale: .7; }
}

/* ── The details gather (ADR 0086) ───────────────────────────────────────────────────────────
   A working week's loose ends lie around Aunara's conversation. On a wide screen the section is
   pinned while the reader scrolls and the details travel into the conversation (story.mjs sets
   --gather from 0 to 1); on a phone they gather once, on their own, when the scene is in view.
   Without scripting, or with motion paused or reduced, they lie where they are beside the reply. */
@property --gather {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.manifesto {
  --gather: 0;
  margin-top: var(--space-5);
  padding: 0;
  overflow-x: clip;
}

.manifesto-frame {
  display: grid;
  align-items: center;
  padding: var(--space-8) 0;
}

/* The room to scroll through is set here, never by the script, so the page never changes length
   under a reader who is already scrolling or following a link. */
@media (min-width: 861px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion=off]) .manifesto {
    height: 230vh;
  }

  html:not([data-motion=off]) .manifesto-frame {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: var(--space-6) 0;
  }
}

.manifesto[data-scrub="time"] {
  transition: --gather calc(var(--dur-dawn) * 1.4) var(--ease-dawn) var(--dur-slow);
}

.manifesto.is-arriving {
  --gather: 1;
}

.manifesto-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: var(--space-6);
}

.manifesto-copy h2 {
  margin: var(--space-5) 0;
}

.manifesto-copy .text-link {
  margin-top: var(--space-6);
}

.details-field {
  position: relative;
  height: 520px;
  container-type: size;
}

/* Each detail leaves in its turn (--o) and swirls into the conversation along a curve, spinning a
   little and softening as it lands. While it waits it drifts, as paper does on a desk by a window. */
.detail {
  --g: clamp(0, (var(--gather) - var(--o) * .045) * 2.1, 1);
  --bend: sin(var(--g) * 180deg);
  --bob: calc(6px * (1 - var(--g)));
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow-md);
  color: var(--ink);
  font-size: var(--text-sm);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  translate:
    calc(var(--x) * 1cqw * (1 - var(--g)) - var(--y) * .42cqh * var(--bend))
    calc(var(--y) * 1cqh * (1 - var(--g)) + var(--x) * .42cqw * var(--bend));
  rotate: calc(var(--r) * (1 - var(--g)) + var(--g) * var(--g) * 32deg);
  scale: calc(var(--detail-size, 1) * (1 - var(--g) * .74));
  opacity: calc(1 - var(--g) * var(--g) * var(--g));
  filter: blur(calc(var(--g) * var(--g) * 2px));
  animation: detail-drift calc(var(--dur-settle) * 1.6) var(--ease-breathe) calc(var(--o) * var(--dur-slow) * -1.7) infinite alternate;
}

@keyframes detail-drift {
  from { transform: translate(-50%, -50%); }
  to { transform: translate(-50%, calc(-50% - var(--bob))); }
}

[data-page-hidden="true"] .detail {
  animation-play-state: paused;
}

.detail small {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.detail b {
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.detail i {
  font-style: normal;
}

.detail-receipt {
  padding-bottom: var(--space-4);
  border-bottom: 2px dashed var(--line-strong);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  font-family: var(--font-mono);
}

.detail-invoice {
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--space-3);
}

.detail-invoice i, .detail-bill i {
  justify-self: start;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--warning-surface);
  color: var(--warning);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.detail-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
}

.detail-file i {
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--success-surface);
  color: var(--success);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.detail-sticky {
  width: 132px;
  padding: var(--space-4);
  border-radius: var(--radius-xs);
  background: var(--amber-50);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.25;
  white-space: normal;
}

.detail-payout {
  border-left: 3px solid var(--partner-stripe);
}

/* Aunara's conversation: it asks, and once everything has arrived, it answers. */
.details-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  gap: var(--space-3);
  width: min(330px, 72cqw);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
  scale: calc(1 + var(--gather) * .05);
}

.details-card::after {
  content: "";
  position: absolute;
  right: var(--space-5);
  bottom: 0;
  left: var(--space-5);
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--sun), var(--ray));
  transform-origin: left;
  scale: var(--gather) 1;
}

.manifesto:not([data-scrub]) .details-card::after {
  display: none;
}

.details-who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.details-mark {
  width: 30px;
  height: 30px;
}

.details-ask, .details-reading, .details-reply {
  grid-area: 2 / 1;
}

.details-ask {
  color: var(--muted);
  font-size: var(--text-lg);
  opacity: clamp(0, 1 - (var(--gather) - .02) * 12, 1);
}

.details-reading {
  display: none;
  align-self: start;
  color: var(--ink-2);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  opacity: clamp(0, min((var(--gather) - .05) * 12, (.84 - var(--gather)) * 12), 1);
}

.manifesto[data-scrub="scroll"] .details-reading {
  display: block;
}

.details-reply {
  --in: clamp(0, (var(--gather) - .82) * 7, 1);
  display: grid;
  gap: var(--space-3);
  color: var(--ink);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  opacity: var(--in);
  translate: 0 calc((1 - var(--in)) * 8px);
}

.details-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.details-chips i:nth-child(1) { --c: 0; }
.details-chips i:nth-child(2) { --c: 1; }
.details-chips i:nth-child(3) { --c: 2; }

.details-chips i {
  --chip: clamp(0, (var(--gather) - .86 - var(--c) * .035) * 12, 1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--tint-lime);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-semibold);
  opacity: var(--chip);
  scale: calc(.85 + var(--chip) * .15);
}

/* Still: the details lie where they are, and Aunara has already answered. */
.manifesto:not([data-scrub]) .details-ask {
  opacity: 0;
}

.manifesto:not([data-scrub]) .details-reply {
  --in: 1;
}

.manifesto:not([data-scrub]) .details-chips i {
  --chip: 1;
}

/* ── A day with Aunara ───────────────────────────────────────────────────────────────────────
   The working day as five chapters. While a chapter is on screen, the stage beside it plays that
   scene in a small Aunara window floating in the day's sky, the sun crosses from sunrise to
   evening, and each scene ends with the person's go-ahead. The scenes are fixed samples; the
   chapter text carries the meaning. */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: .08;
}

.day-section {
  padding: var(--space-9) 0 var(--space-8);
}

.day-intro {
  max-width: 860px;
  text-align: center;
}

.day-intro h2 {
  margin: var(--space-5) 0 var(--space-4);
  font-size: var(--display-2);
  line-height: var(--leading-display);
}

.day-intro p:not(.eyebrow) {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.day-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--space-8);
  margin-top: var(--space-7);
}

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

.day-chapter {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--space-3);
  min-height: 64vh;
  padding-left: var(--space-7);
  opacity: .38;
  transition: opacity var(--dur-slow) var(--ease-dawn);
}

.day-chapter.is-active {
  opacity: 1;
}

/* The rail: a line through the day, filled with daylight up to the hour on stage. */
.day-chapter::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 2px;
  background: var(--line);
}

.day-chapter.is-past::after {
  background: linear-gradient(180deg, var(--sun), var(--ray));
}

.day-chapter.is-active::after {
  background: linear-gradient(180deg, var(--ray) 0 calc(50% - 60px), var(--line) 0);
}

.day-time {
  color: var(--green);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  font-variant-numeric: tabular-nums;
}

/* Each hour is a point on the rail; the hour on stage is the sun. */
.day-time::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 1px;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--background);
  transition: background var(--dur-slow) var(--ease-dawn), border-color var(--dur-slow) var(--ease-dawn), box-shadow var(--dur-slow) var(--ease-dawn);
}

.day-chapter.is-past .day-time::before {
  border-color: var(--ray);
  background: var(--ray);
}

.day-chapter.is-active .day-time::before {
  border-color: var(--sun-deep);
  background: var(--sun);
  box-shadow: 0 0 0 6px rgb(var(--dawn-rgb) / 55%), 0 0 22px 6px rgb(var(--dawn-rgb) / 60%);
}

.day-chapter h3 {
  font-size: var(--display-3);
  line-height: var(--leading-heading);
}

.day-chapter p {
  max-width: 40ch;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.day-stage {
  position: sticky;
  top: 7vh;
  align-self: start;
  display: grid;
  gap: var(--space-3);
  --p: .08;
  --arc-top: 34px;
  --arc-h: 104px;
  --tally-at: calc(6 * var(--rise-stagger) * 1.6 + var(--dur-reveal) * 1.8);
}

.day-stage[data-scene="1"] { --p: .29; }
.day-stage[data-scene="2"] { --p: .5; }
.day-stage[data-scene="3"] { --p: .71; }
.day-stage[data-scene="4"] { --p: .92; }

/* The frame is the day's sky, and the window floats in it. */
.day-frame {
  position: relative;
  background: var(--tint-mist);
  isolation: isolate;
  padding: calc(var(--arc-top) + var(--arc-h) + var(--space-2)) var(--space-5) var(--space-5);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
}

.day-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.sky {
  position: absolute;
  inset: 0;
  opacity: clamp(0, (var(--p) - var(--from)) / .22, 1);
}

/* Dawn, morning, noon and afternoon stay in the brand's lime light; the evening is the closing
   section's forest, lit from the horizon where the sun is setting. */
.sky-0 { --from: -1; background: linear-gradient(180deg, var(--tint-mist) 0%, var(--sun-light) 55%, var(--dawn) 100%); }
.sky-1 { --from: .06; background: linear-gradient(180deg, var(--tint-mist) 0%, var(--lime-50) 75%); }
.sky-2 { --from: .28; background: linear-gradient(180deg, var(--tint-mist) 0%, var(--white) 100%); }
.sky-3 { --from: .5; background: linear-gradient(180deg, var(--tint-mist) 0%, var(--tint-sand) 55%, var(--dawn) 100%); }
/* Night falls from the top down, and the horizon keeps the last light longest. */
.sky-4 {
  --dusk: clamp(0, (var(--p) - .78) / .16, 1);
  opacity: 1;
  mask-image: linear-gradient(180deg, rgb(var(--forest-rgb) / 100%) calc(var(--dusk) * 130% - 30%), rgb(var(--forest-rgb) / 0%) calc(var(--dusk) * 130%));
  background:
    radial-gradient(ellipse 70% 45% at 92% 100%, rgb(var(--lime-rgb) / 26%), transparent 70%),
    linear-gradient(180deg, var(--forest-900) 0%, var(--forest-800) 60%, var(--forest-600) 100%);
}

.day-arc {
  position: absolute;
  top: var(--arc-top);
  left: 0;
  width: 100%;
  height: var(--arc-h);
  overflow: visible;
}

.day-arc path {
  fill: none;
  stroke: rgb(var(--forest-rgb) / 18%);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}

.day-stage[data-scene="4"] .day-arc path {
  stroke: rgb(var(--white-rgb) / 24%);
}

/* The sun rides the arc: across with the day, up to noon and down again. */
/* The sun in a sky is the mark's own sun risen whole (sunSvg): the same disc and the same light
   rays, all round, turning slowly, in a halo of dawn light. It always shines. */
.day-sun, .plan-sun {
  display: block;
}

.day-sun::before, .plan-sun::before {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  box-shadow: 0 0 18px 10px rgb(var(--dawn-rgb) / 90%), 0 0 70px 34px rgb(var(--dawn-rgb) / 45%);
}

.day-sun .sun, .plan-sun .sun {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The whole sun turns as one piece (its halo is round), which the browser does without redrawing
   it. */
.day-sun, .plan-sun {
  animation: sun-turn var(--dur-orbit) linear infinite;
}

[data-page-hidden="true"] :is(.day-sun, .plan-sun) {
  animation-play-state: paused;
}

/* Out of view, a section's continuing motion rests (story.mjs marks it quiet). */
[data-quiet] :is(.day-sun, .plan-sun, .say-track, .flow-pulse, .detail, .aunara-mark *, .dawn *) {
  animation-play-state: paused;
}

@keyframes sun-turn {
  to { rotate: 36deg; }
}

.day-sun {
  position: absolute;
  top: calc(var(--arc-top) + var(--arc-h) * (1 - sin(var(--p) * 180deg) * .96));
  left: calc(3% + var(--p) * 94%);
  width: 60px;
  height: 60px;
  translate: -50% -50%;
}

/* In the evening its light is the lime of the closing sunrise. */
.day-stage[data-scene="4"] .day-sun::before {
  box-shadow: 0 0 18px 10px rgb(var(--lime-rgb) / 55%), 0 0 70px 34px rgb(var(--lime-rgb) / 28%);
}

.day-clock {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.day-stage[data-scene="4"] .day-clock {
  color: var(--on-dark);
}

/* The window: the product's own look, in miniature. */
.day-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}

.day-scenes {
  position: relative;
  height: 360px;
}

.day-scene {
  --step: calc(var(--rise-stagger) * 1.6);
  --approve-at: calc(var(--approve) * var(--step) + var(--dur-reveal) * 1.3);
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-dawn), visibility var(--dur-slow);
}

.day-scene:not(.is-active) {
  transition-duration: var(--dur-fast);
}

.day-scene.is-active {
  visibility: visible;
  opacity: 1;
}

.day-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.day-msg {
  margin: 0;
  color: var(--ink-2);
}

.day-msg.is-you {
  align-self: flex-end;
  max-width: 92%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--ink);
}

/* Aunara's replies carry its mark. */
.day-msg.is-aunara {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
}

.day-avatar {
  width: 20px;
  height: 20px;
}

.day-file {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--success-surface);
  color: var(--success);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

/* A composer under the conversation, as in the app. */
.day-composer {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  width: calc(45% - var(--space-6));
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--subtle);
  font-size: var(--text-xs);
}

/* The document page, as in the app's panel (ADR 0087). */
.day-page {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  margin: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
}

.day-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ink);
}

.day-page-head > span {
  display: grid;
  gap: 2px;
}

.day-page-head b {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-heading);
}

.day-page-head small {
  color: var(--muted);
}

.day-page-head strong {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

.day-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
}

.day-fields span {
  display: grid;
}

.day-fields small {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.day-rows {
  display: grid;
  gap: var(--space-1);
}

.day-row, .day-total {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.day-row em, .day-total em {
  font-family: var(--font-sans);
  font-style: normal;
}

.day-total {
  grid-template-columns: 1fr auto;
  padding-top: var(--space-1);
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* The go-ahead: the button is pressed, and the page says what it now is. */
.swap {
  display: inline-grid;
}

.swap > span {
  grid-area: 1 / 1;
  transition: opacity var(--dur-base) var(--ease-dawn), translate var(--dur-base) var(--ease-dawn);
}

.swap > span + span {
  opacity: 0;
  translate: 0 6px;
}

.day-scene.is-active .swap > span:first-child {
  opacity: 0;
  translate: 0 -6px;
  transition-delay: var(--approve-at);
}

.day-scene.is-active .swap > span + span {
  opacity: 1;
  translate: 0 0;
  transition-delay: var(--approve-at);
}

.day-action {
  position: relative;
  justify-self: start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: var(--weight-medium);
}

.day-scene.is-active .day-action {
  background: var(--success-surface);
  color: var(--success);
  transition: opacity var(--dur-slow) var(--ease-dawn) calc(var(--i) * var(--step)),
    translate var(--dur-slow) var(--ease-dawn) calc(var(--i) * var(--step)),
    background var(--dur-slow) var(--ease-dawn) var(--approve-at),
    color var(--dur-slow) var(--ease-dawn) var(--approve-at);
}

.day-cursor {
  position: absolute;
  z-index: 2;
  top: 55%;
  left: 62%;
  width: 16px;
  height: 20px;
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 1.3;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgb(var(--forest-rgb) / 30%));
}

.day-scene.is-active .day-cursor {
  animation: day-cursor calc(var(--dur-reveal) * 2) var(--ease-dawn) calc(var(--approve-at) - var(--dur-reveal) * 1.3) both;
}

@keyframes day-cursor {
  0% { opacity: 0; translate: -120px 64px; }
  18% { opacity: 1; }
  60% { translate: 0 0; scale: 1; }
  66% { scale: .8; }
  74% { scale: 1; opacity: 1; }
  100% { opacity: 0; translate: 4px 4px; }
}

.day-action::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--ray);
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
}

.day-scene.is-active .day-action::after {
  animation: day-press var(--dur-reveal) var(--ease-dawn) calc(var(--approve-at) - var(--dur-fast) * 2) both;
}

@keyframes day-press {
  0% { opacity: 0; scale: .9; }
  35% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.2; }
}

.day-stamp {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-4);
  padding: 2px var(--space-3);
  border: 2px solid var(--success);
  border-radius: var(--radius-xs);
  color: var(--success);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  rotate: -8deg;
  opacity: 0;
  scale: 1.6;
}

.day-scene.is-active .day-stamp {
  opacity: 1;
  scale: 1;
  transition: opacity var(--dur-fast) var(--ease-dawn) var(--approve-at), scale var(--dur-slow) var(--ease-bloom) var(--approve-at);
}

.day-bars {
  display: grid;
  gap: var(--space-2);
}

.day-bars span {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.day-bars small {
  color: var(--muted);
}

.day-bars i {
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--sun), var(--ray));
  transform-origin: left;
  scale: 0 1;
  transition: scale var(--dur-dawn) var(--ease-dawn);
  transition-delay: calc(var(--i) * var(--rise-stagger));
}

.day-scene.is-active .day-bars i {
  scale: var(--share) 1;
}

/* Each scene builds itself step by step while it is on stage. */
.day-in {
  opacity: 0;
  translate: 0 10px;
  transition: opacity var(--dur-slow) var(--ease-dawn), translate var(--dur-slow) var(--ease-dawn);
  transition-delay: calc(var(--i) * var(--step));
}

.day-scene.is-active .day-in {
  opacity: 1;
  translate: 0 0;
}

/* The day's books keep up: each step, once approved, joins the tally. */
.day-tally {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--text-xs);
}

.day-tally small {
  margin-right: var(--space-1);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.day-tally span {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--success-surface);
  color: var(--success);
  font-weight: var(--weight-semibold);
  opacity: 0;
  scale: .8;
  transition: opacity var(--dur-slow) var(--ease-dawn), scale var(--dur-slow) var(--ease-bloom);
}

.day-stage:is([data-scene="1"], [data-scene="2"], [data-scene="3"], [data-scene="4"]) .tally-0,
.day-stage:is([data-scene="2"], [data-scene="3"], [data-scene="4"]) .tally-1,
.day-stage:is([data-scene="3"], [data-scene="4"]) .tally-2,
.day-stage[data-scene="4"] .tally-3 {
  opacity: 1;
  scale: 1;
}

.day-stage[data-scene="0"] .tally-0,
.day-stage[data-scene="1"] .tally-1,
.day-stage[data-scene="2"] .tally-2,
.day-stage[data-scene="3"] .tally-3 {
  opacity: 1;
  scale: 1;
  transition-delay: var(--tally-at);
}

.day-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* ── Say it the way you'd say it ─────────────────────────────────────────────────────────────
   What people type, drifting past in three lanes, each with what it becomes. The lanes pause
   under the pointer or keyboard focus, with motion paused, and when the page is hidden; with
   motion reduced they are still, wrapped rows. */
.say-section {
  padding: var(--space-9) 0 var(--space-8);
  overflow: hidden;
}

.say-intro {
  max-width: 860px;
  text-align: center;
}

.say-intro h2 {
  margin: var(--space-5) 0 var(--space-4);
  font-size: var(--display-2);
  line-height: var(--leading-display);
}

.say-intro p:not(.eyebrow) {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.say-rows {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
  mask-image: linear-gradient(90deg, rgb(var(--forest-rgb) / 0%), rgb(var(--forest-rgb) / 100%) 12%, rgb(var(--forest-rgb) / 100%) 88%, rgb(var(--forest-rgb) / 0%));
}

.say-row {
  overflow: hidden;
}

.say-track {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  margin: 0;
  padding: var(--space-1) var(--space-3) var(--space-1) 0;
  list-style: none;
  animation: say-drift calc(var(--dur-orbit) * .85) linear infinite;
}

.say-row:nth-child(2) .say-track {
  animation-duration: var(--dur-orbit);
  animation-direction: reverse;
}

.say-row:nth-child(3) .say-track {
  animation-duration: calc(var(--dur-orbit) * .75);
}

.say-rows:hover .say-track,
.say-rows:focus-within .say-track,
[data-page-hidden="true"] .say-track {
  animation-play-state: paused;
}

@keyframes say-drift {
  to { translate: -50% 0; }
}

.say {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: var(--text-md);
  white-space: nowrap;
}

.say-kind {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-semibold);
}

.say-kind::before {
  content: "→ ";
}

.tone-sales { background: var(--tint-lime); color: var(--ink); }
.tone-in { background: var(--success-surface); color: var(--success); }
.tone-out { background: var(--tint-sand); color: var(--ink-2); }
.tone-answer { background: var(--tint-mist); color: var(--ink-2); }

.say-foot {
  margin-top: var(--space-6);
  color: var(--muted);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  text-align: center;
}

.say-foot .text-link {
  margin-left: var(--space-2);
}

/* ── Connections: what you bring flows into the sun ─────────────────────────────────────────── */
.connected-section h2 {
  margin-top: var(--space-5);
}

.flow-art {
  position: relative;
  aspect-ratio: 600 / 460;
}

.flow-art::after {
  content: "";
  position: absolute;
  top: 86.5%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--lime-rgb) / 38%), transparent);
}

.flow-lines {
  position: absolute;
  inset: 0;
  will-change: transform;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.flow-path {
  fill: none;
  stroke: rgb(var(--lime-rgb) / 24%);
  stroke-width: 1.5;
}

.flow-path.is-planned {
  stroke: rgb(var(--lime-rgb) / 18%);
  stroke-dasharray: 1 2;
}

/* A little light travels each path into the sun, one after another. */
.flow-pulse {
  fill: none;
  stroke: var(--lime);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 100;
  stroke-dashoffset: 7;
  animation: flow-pulse calc(var(--dur-dawn) * 1.6) var(--ease-breathe) calc(var(--i) * var(--dur-reveal) * -1.1) infinite;
}

[data-page-hidden="true"] .flow-pulse {
  animation-play-state: paused;
}

@keyframes flow-pulse {
  from { stroke-dashoffset: 7; }
  to { stroke-dashoffset: -100; }
}

.flow-node {
  position: absolute;
  z-index: 2;
  top: var(--ny);
  left: var(--nx);
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 118px;
  padding: var(--space-3) var(--space-4);
  translate: -50% 0;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-lg);
  background: var(--dark-raised);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.flow-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--brand);
  font-size: var(--text-xl);
  font-style: normal;
  font-weight: var(--weight-bold);
}

.node-gmail .flow-icon { color: var(--partner-gmail); }
.node-stripe .flow-icon { color: var(--partner-stripe); }

.flow-node b {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.flow-node small {
  color: var(--on-dark-subtle);
  font-size: var(--text-2xs);
}

.flow-core {
  position: absolute;
  z-index: 1;
  top: 86.5%;
  left: 50%;
  translate: -50% -65.6%;
}

.flow-core::before {
  content: "";
  position: absolute;
  inset: -70%;
  background: radial-gradient(circle at 50% 66%, rgb(var(--lime-rgb) / 30%), transparent 60%);
}

.flow-mark {
  position: relative;
  width: 116px;
  height: 116px;
  color: var(--horizon-on-dark);
}

/* ── Control: every action leaves a receipt ──────────────────────────────────────────────────
   A small printer feeds out the day's activity when it comes into view; with motion paused or
   without scripting the receipt is simply printed. */
.control-section {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--space-8);
}

.receipt {
  position: relative;
  display: grid;
  justify-items: center;
  padding: var(--space-6) var(--space-5) var(--space-7);
  border-radius: var(--radius-2xl);
  background: var(--soft);
}

.receipt.reveal.is-waiting {
  opacity: 1;
  transform: none;
}

.receipt-slot {
  position: relative;
  z-index: 2;
  width: 88%;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--dark);
  box-shadow: inset 0 -4px 0 rgb(var(--white-rgb) / 8%);
}

.receipt-slot i {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 6px;
  height: 6px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}

.receipt-paper {
  width: 82%;
  margin-top: -9px;
  padding: var(--space-6) var(--space-5) 0;
  background: var(--paper);
  box-shadow: var(--shadow-md);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  clip-path: inset(0 -20px -20px -20px);
  transition: clip-path calc(var(--dur-dawn) * 1.1) var(--ease-dawn) var(--dur-slow), translate calc(var(--dur-dawn) * 1.1) var(--ease-dawn) var(--dur-slow);
}

.receipt.is-waiting .receipt-paper {
  clip-path: inset(0 -20px 100% -20px);
  translate: 0 -24px;
}

/* The torn edge. */
.receipt-paper::after {
  content: "";
  display: block;
  height: 10px;
  margin: var(--space-4) calc(-1 * var(--space-5)) -1px;
  background: radial-gradient(circle at 50% 100%, var(--soft) 5px, transparent 5.5px) 0 0 / 14px 10px repeat-x;
}

.receipt-head {
  display: grid;
  gap: 2px;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--line-strong);
  text-align: center;
}

.receipt-head b {
  color: var(--ink);
  letter-spacing: var(--tracking-caps);
}

.receipt-lines {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.receipt-lines li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  transition: opacity var(--dur-slow) var(--ease-dawn) calc(var(--dur-reveal) + var(--i) * var(--dur-slow));
}

.receipt.is-waiting .receipt-lines li {
  opacity: 0;
}

.receipt-lines time {
  color: var(--muted);
}

.receipt-lines span {
  color: var(--ink);
}

.receipt-lines em {
  grid-column: 2;
  color: var(--success);
  font-family: inherit;
  font-style: normal;
}

.receipt-lines li:first-child em {
  color: var(--muted);
}

.receipt-foot {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line-strong);
  color: var(--ink);
  font-weight: var(--weight-semibold);
  text-align: center;
}

.rules {
  display: grid;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.rules li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-md);
}

.rule {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.rule-prepare { background: var(--success-surface); color: var(--success); }
.rule-ask { background: var(--warning-surface); color: var(--warning); }

/* ── Pricing: each plan is a later hour of the same sunrise ──────────────────────────────────
   The sun stands higher over the mark's horizon and ledger lines from plan to plan. The mark
   itself is never altered to say it. */
.plan-sky {
  --horizon: 26px;
  position: relative;
  height: 116px;
  margin-bottom: var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--tint-mist) 0%, var(--lime-50) 100%);
}

.plan-sky[data-hour="first"] {
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgb(var(--dawn-rgb) / 95%), transparent 70%),
    linear-gradient(180deg, var(--tint-mist) 0%, var(--lime-50) 100%);
}

/* Only the sky above the horizon shows the sun. */
.plan-air {
  position: absolute;
  inset: 0 0 var(--horizon);
  overflow: hidden;
}

.plan-sun {
  --size: 68px;
  position: absolute;
  bottom: calc(var(--rise) - var(--size) / 2);
  left: 50%;
  width: var(--size);
  height: var(--size);
  translate: -50% 0;
}

.plan-sky[data-hour="first"] { --rise: 0px; }
.plan-sky[data-hour="morning"] { --rise: 30px; }
.plan-sky[data-hour="day"] { --rise: 52px; }

.plan-sky::before, .plan-sky::after {
  content: "";
  position: absolute;
  z-index: 1;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--ink);
}

.plan-sky::before {
  left: 24%;
  right: 24%;
  bottom: calc(var(--horizon) - 1px);
}

.plan-sky::after {
  left: 38%;
  right: 38%;
  bottom: calc(var(--horizon) - 11px);
  opacity: .38;
}

.plan-sky small {
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  color: var(--ink-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ── Questions, asked as you would ask Aunara ───────────────────────────────────────────────── */
.faq-section {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  align-items: start;
}

.faq-intro h2 {
  margin-top: var(--space-5);
  font-size: var(--display-2);
  line-height: var(--leading-display);
}

.faq-intro p:not(.eyebrow) {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--text-lg);
}

.faq-list {
  display: grid;
  gap: var(--space-4);
}

.faq-list summary {
  justify-content: flex-end;
  border-radius: var(--radius-xl);
}

.faq-list summary:focus-visible {
  outline: none;
}

.faq-q {
  max-width: 88%;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xs) var(--radius-xl);
  background: var(--soft);
  color: var(--ink);
  font-size: var(--text-lg);
  line-height: 1.4;
  transition: background var(--dur-base) var(--ease-dawn), color var(--dur-base) var(--ease-dawn);
}

.faq-list summary:hover .faq-q {
  background: var(--hover);
}

.faq-list summary:focus-visible .faq-q {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.faq-list details[open] .faq-q {
  background: var(--primary);
  color: var(--on-primary);
}

.faq-q::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: var(--space-3);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate var(--dur-base) var(--ease-dawn), translate var(--dur-base) var(--ease-dawn);
}

.faq-list details[open] .faq-q::after {
  rotate: 225deg;
  translate: 0 1px;
}

.faq-a {
  display: grid;
  gap: var(--space-2);
  max-width: 92%;
  margin-top: var(--space-4);
  animation: faq-in var(--dur-slow) var(--ease-dawn) both;
}

.faq-who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.faq-mark {
  width: 24px;
  height: 24px;
}

.faq-a p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}

@keyframes faq-in {
  from { opacity: 0; translate: 0 6px; }
}

/* ── The footer: the wordmark, large, on its horizon ──────────────────────────────────────── */
.footer-wordmark {
  position: relative;
  display: flex;
  justify-content: center;
  grid-column: 1 / -1;
  margin: var(--space-4) 0 0;
  padding-bottom: var(--space-5);
  font-size: clamp(88px, 25vw, 380px);
  font-weight: var(--weight-bold);
  letter-spacing: -.06em;
  line-height: 1;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

.footer-wordmark span {
  display: inline-block;
  margin: -.44em 0 -.12em;
  padding: 0 .04em .04em;
  background: linear-gradient(180deg, var(--ink) 45%, var(--moss-700));
  background-clip: text;
  color: transparent;
}

/* The mark's horizon and ledger lines, under the name. */
.footer-wordmark::before, .footer-wordmark::after {
  content: "";
  position: absolute;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--ink);
}

.footer-wordmark::before {
  left: 0;
  right: 0;
  bottom: var(--space-3);
}

.footer-wordmark::after {
  left: 32%;
  right: 32%;
  bottom: 0;
  opacity: .38;
}

/* ── Wide and narrow screens ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero { --dawn-w: 760px; }
  .hero-dawn { width: var(--dawn-w); height: calc(var(--dawn-w) / 2); left: 72%; }

  .details-field {
    height: 460px;
  }
}

/* On a phone the petals' names sit as a row under the headline, the manifesto's scene sits under
   its words, and the day's stage stays pinned above the chapters as they pass. */
@media (max-width: 860px) {
  .hero-petals {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    width: auto;
    height: auto;
    margin: var(--space-6) 0 230px;
    translate: none;
  }

  .petal-label {
    position: static;
    translate: none;
  }

  .manifesto-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  /* Smaller details spread wider round a narrower conversation, so they stay clear of it. */
  .details-field {
    --detail-size: .78;
    height: 470px;
  }

  .details-card {
    width: 62cqw;
    padding: var(--space-4);
  }

  .details-ask {
    font-size: var(--text-md);
  }

  .details-reply {
    font-size: var(--text-sm);
  }

  .day-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .day-stage {
    grid-row: 1;
    top: 0;
    z-index: 4;
    padding-top: var(--space-2);
    background: var(--background);
    --arc-top: 22px;
    --arc-h: 36px;
  }

  .day-frame {
    padding: calc(var(--arc-top) + var(--arc-h) + var(--space-2)) var(--space-3) var(--space-3);
    border-radius: var(--radius-xl);
  }

  .day-clock {
    top: var(--space-2);
    right: var(--space-4);
  }

  .day-sun {
    width: 40px;
    height: 40px;
  }

  .day-scenes {
    height: 272px;
  }

  .day-scene {
    grid-template-columns: minmax(0, 1fr);
  }

  .day-chat, .day-tally, .day-composer {
    display: none;
  }

  /* Each chapter is no taller than the gap between the pinned stage and the point where the next
     one takes over, so the words of the chapter on stage are always in view. */
  .day-chapter {
    min-height: 28vh;
    align-content: start;
    padding-top: var(--space-3);
    padding-left: var(--space-6);
  }

  .day-chapter.is-active::after {
    background: linear-gradient(180deg, var(--ray) 0 var(--space-5), var(--line) 0);
  }

  .connection-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow-node {
    min-width: 0;
    padding: var(--space-2) var(--space-3);
  }

  .flow-node small {
    display: none;
  }

  .flow-icon {
    width: 28px;
    height: 28px;
    font-size: var(--text-md);
  }

  .flow-mark {
    width: 84px;
    height: 84px;
  }

  .control-section, .faq-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .receipt {
    order: 2;
  }
}

@media (max-width: 640px) {
  .say {
    font-size: var(--text-sm);
  }

  .faq-q {
    max-width: 100%;
    font-size: var(--text-md);
  }

  .receipt-paper {
    width: 92%;
    padding-inline: var(--space-4);
  }
}

/* Still: the lanes are wrapped rows, and nothing drifts. */
@media (prefers-reduced-motion: reduce) {
  .say-rows { mask-image: none; }
  .say-track { flex-wrap: wrap; justify-content: center; width: auto; padding: 0 var(--space-4); }
  .say[aria-hidden="true"] { display: none; }
}

html[data-motion=off] .say-rows { mask-image: none; }
html[data-motion=off] .say-track { flex-wrap: wrap; justify-content: center; width: auto; padding: 0 var(--space-4); }
html[data-motion=off] .say[aria-hidden="true"] { display: none; }