/* askstewards.com — site.css
   Hand-authored. Every color, family, weight, tracking, caps setting, radius, spacing step, border,
   shadow, and interaction value comes from generated/tokens.css, so switching the direction or style
   guide in the Design Lab restyles this page truthfully. The only sizes chosen here are web type sizes
   (scaled from the app's tokens with calc/clamp), the content column, and the breakpoints. */

/* ---------- 1. Base ---------- */

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

html {
  background: var(--color-canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text-primary);
  font-family: var(--type-body-family);
  font-weight: var(--type-body-weight);
  font-size: calc(var(--type-body-size) * 1.25);
  line-height: 1.55;
  letter-spacing: var(--type-body-tracking);
  font-variant-caps: var(--type-body-caps);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

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

a {
  color: var(--color-accent-strong);
  text-underline-offset: 0.18em;
  transition: color var(--transition-duration) ease-out;
}

a:hover {
  color: var(--color-accent);
}

::selection {
  background: var(--color-selection);
}

:focus-visible {
  outline: var(--border-focus) solid var(--color-focus);
  outline-offset: 2px;
}

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

.skip-link:focus {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 10;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-raised-surface);
  color: var(--color-text-primary);
  border: var(--border-structural) solid var(--color-border);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-popover);
  text-decoration: none;
}

/* ---------- 2. Layout ---------- */

.container {
  width: 100%;
  max-width: calc(1120px + 2 * var(--layout-gutter-wide));
  margin-inline: auto;
  padding-inline: var(--layout-gutter-wide);
}

.section {
  padding-block: calc(var(--space-xxl) * 1.5);
}

.section-heading {
  margin-bottom: var(--space-xl);
}

/* ---------- 3. Type ---------- */

h1 {
  font-family: var(--type-display-family);
  font-weight: var(--type-display-weight);
  font-size: clamp(calc(var(--type-display-size) * 1.5), 2.1rem + 2.2vw, calc(var(--type-display-size) * 2.5));
  line-height: 1.1;
  letter-spacing: var(--type-display-tracking);
  font-variant-caps: var(--type-display-caps);
  max-width: 22ch;
  text-wrap: balance;
}

h2 {
  font-family: var(--type-title-family);
  font-weight: var(--type-title-weight);
  font-size: clamp(calc(var(--type-title-size) * 1.4), 1.4rem + 1vw, calc(var(--type-title-size) * 2));
  line-height: 1.2;
  letter-spacing: var(--type-title-tracking);
  font-variant-caps: var(--type-title-caps);
  max-width: 30ch;
  text-wrap: balance;
}

h3 {
  font-family: var(--type-title-family);
  font-weight: var(--type-title-weight);
  font-size: calc(var(--type-title-size) * 1.05);
  line-height: 1.3;
  letter-spacing: var(--type-title-tracking);
  font-variant-caps: var(--type-title-caps);
  text-wrap: balance;
}

.eyebrow,
.section-label {
  font-family: var(--type-section-family);
  font-weight: var(--type-section-weight);
  font-size: calc(var(--type-section-size) * 1.2);
  line-height: 1.4;
  letter-spacing: var(--type-section-tracking);
  font-variant-caps: var(--type-section-caps);
  max-width: none;
}

.eyebrow {
  color: var(--color-accent-strong);
}

.section-label {
  color: var(--color-text-secondary);
}

.lead {
  font-family: var(--type-reading-family);
  font-weight: var(--type-reading-weight);
  font-size: calc(var(--type-reading-size) * 1.25);
  line-height: 1.55;
  letter-spacing: var(--type-reading-tracking);
  color: var(--color-text-secondary);
  max-width: 60ch;
  text-wrap: pretty;
}

.panel p,
.step p,
.level p {
  font-family: var(--type-reading-family);
  font-weight: var(--type-reading-weight);
  font-size: calc(var(--type-reading-size) * 1.13);
  line-height: 1.55;
  letter-spacing: var(--type-reading-tracking);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.caption,
.product figcaption,
.signup-note,
.footer-line {
  font-family: var(--type-caption-family);
  font-weight: var(--type-caption-weight);
  font-size: calc(var(--type-caption-size) * 1.2);
  line-height: 1.45;
  letter-spacing: var(--type-caption-tracking);
  color: var(--color-text-secondary);
}

/* ---------- 4. Header ---------- */

.site-header {
  padding-block: var(--space-lg);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  font-size: calc(var(--type-title-size) * 1.1);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-button);
  min-height: var(--layout-min-interactive);
}

.lockup:hover {
  color: var(--color-text-primary);
}

/* A guide that draws its name whole supplies generated/wordmark.svg and
   tokens.css shows it here in place of the mark-and-text pair; every other
   identity hides it and shows the pair. Both stay in the markup. */
.brand-wordmark {
  display: var(--brand-wordmark-display);
  /* Three times the 1.35em it stood at: the name is the thing the page is
     named for, and at a cap height of eighteen points it was a label beside
     the navigation rather than the head of the page.

     Written as a WIDTH capped at the row's own, not as a height. The mark is
     drawn five times as wide as it is tall, so 4.05em of height asks for
     about 383 points of width — more than a phone has once the gutters are
     taken — and a height alone would have run it off the page. Capped, the
     header shows the whole mark wherever it fits and scales it down,
     proportionally, where it does not.

     The cap is measured against the VIEWPORT, and neither a percentage nor
     a `max-width` can do it: both are resolved against the link that wraps
     the mark, and that link is sized by the mark — a floor no child can
     then fall below, so the cap never binds and the name runs off a phone.
     A percentage inside `min()` is worse than useless here; it is dropped
     while the browser works out how much room the link asks for, and the
     link claimed the mark's intrinsic 614 points and pushed the navigation
     onto a second line on a desktop with room for both. */
  aspect-ratio: 614.462 / 121.592;
  width: min(
    calc(4.05em * 614.462 / 121.592),
    calc(100vw - 2 * var(--layout-gutter-narrow))
  );
  flex: none;
}

.brand-wordmark img {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-lockup-text {
  display: var(--brand-lockup-text-display);
  align-items: center;
  gap: 0.34em;
}

.brand-mark {
  display: var(--brand-mark-display);
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.brand-mark img {
  width: 100%;
  height: 100%;
}

.wordmark {
  font-family: var(--font-serif);
  font-weight: var(--type-title-weight);
  font-size: 1em;
  line-height: 1;
  letter-spacing: var(--type-title-tracking);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs) var(--space-lg);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-min-interactive);
  font-family: var(--type-label-family);
  font-weight: var(--type-label-weight);
  font-size: calc(var(--type-label-size) * 1.17);
  letter-spacing: var(--type-label-tracking);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-button);
}

.site-nav a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

/* ---------- 5. Controls ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: max(var(--layout-min-interactive), 2.75rem);
  padding: 0 calc(var(--space-md) + var(--space-xxs));
  font-family: var(--type-label-family);
  font-weight: var(--type-label-weight);
  font-size: calc(var(--type-label-size) * 1.25);
  line-height: 1;
  letter-spacing: var(--type-label-tracking);
  border: var(--border-structural) solid;
  border-radius: var(--radius-button);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-duration) ease-out,
    color var(--transition-duration) ease-out,
    transform var(--transition-duration) ease-out,
    opacity var(--transition-duration) ease-out;
}

.button-primary {
  background: var(--color-accent);
  border-color: var(--color-accent-strong);
  color: var(--color-on-accent);
}

/* Hover and pressed follow the lab's button: the on-accent ink laid over the fill at the token opacity. */
.button-primary:hover {
  background: color-mix(in srgb, var(--color-on-accent) calc(var(--hover-opacity) * 100%), var(--color-accent));
}

.button-primary:active {
  background: color-mix(in srgb, var(--color-on-accent) calc(var(--pressed-opacity) * 100%), var(--color-accent));
  transform: scale(var(--pressed-scale));
}

.button:disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
  transform: none;
}

.link-secondary {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-min-interactive);
  font-family: var(--type-label-family);
  font-weight: var(--type-label-weight);
  font-size: calc(var(--type-label-size) * 1.25);
  letter-spacing: var(--type-label-tracking);
  border-radius: var(--radius-button);
}

.link-secondary .arrow {
  white-space: pre;
  transition: transform var(--transition-duration) ease-out;
}

.link-secondary:hover .arrow {
  transform: translateX(var(--space-xxs));
}

/* Sign-up form: a flex row that wraps; vertical rhythm comes from margins so the empty status
   line takes no space until it has something to say. */
.signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-xs);
  width: 100%;
}

.signup-label {
  flex-basis: 100%;
  margin-bottom: var(--space-xs);
  font-family: var(--type-label-family);
  font-weight: var(--type-label-weight);
  font-size: calc(var(--type-label-size) * 1.17);
  letter-spacing: var(--type-label-tracking);
  color: var(--color-text-primary);
}

.signup input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: max(var(--layout-min-interactive), 2.75rem);
  padding: 0 var(--space-md);
  font-family: var(--type-body-family);
  font-weight: var(--type-body-weight);
  font-size: calc(var(--type-body-size) * 1.25);
  letter-spacing: var(--type-body-tracking);
  color: var(--color-text-primary);
  background: var(--color-raised-surface);
  /* The field's boundary must clear 3:1 on its own; --color-border is a hairline token that does not. */
  border: var(--border-structural) solid var(--color-text-tertiary);
  border-radius: var(--radius-field);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transition-duration) ease-out;
}

.signup input[type="email"]::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}

.signup input[type="email"]:hover {
  border-color: var(--color-text-secondary);
}

.signup .button {
  flex: none;
}

.signup-status {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--type-label-family);
  font-weight: var(--type-label-weight);
  font-size: calc(var(--type-label-size) * 1.17);
  line-height: 1.45;
  letter-spacing: var(--type-label-tracking);
  color: var(--color-text-primary);
}

.signup-status:not(:empty) {
  margin-top: var(--space-sm);
}

.signup-status:focus {
  outline: none;
}

.signup .signup-note {
  flex-basis: 100%;
  margin-top: var(--space-sm);
}

.signup[data-state="success"] input[type="email"],
.signup[data-state="success"] .signup-label,
.signup[data-state="success"] .button {
  display: none;
}

.signup .button[aria-disabled="true"] {
  cursor: default;
}

.signup[data-state="success"] .signup-status {
  margin-top: 0;
}

.signup[aria-busy="true"] .button {
  opacity: var(--disabled-opacity);
}

/* ---------- 6. Hero ---------- */

.hero {
  padding-block: var(--space-xl) var(--space-xxl);
}

.hero-inner {
  display: grid;
  gap: var(--space-lg);
  max-width: 46rem;
}

.hero .eyebrow {
  margin-bottom: calc(-1 * var(--space-sm));
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-xs);
}

.hero-actions .signup {
  flex: 1 1 22rem;
  max-width: 32rem;
}

.hero .signup-note {
  margin-top: calc(-1 * var(--space-sm));
}

/* ---------- 7. Product image ---------- */

.product {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-md) var(--space-xl);
}

.product-frame {
  background: var(--color-raised-surface);
  border: var(--border-structural) solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-document);
  padding: var(--space-xs);
}

.product-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 1024;
  object-fit: cover;
  border-radius: calc(var(--radius-panel) - var(--space-xs));
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.product figcaption {
  padding-inline: var(--space-xs);
}

/* ---------- 8. What: three panels ---------- */

.panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

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

.panel {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: var(--border-structural) solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-surface);
}

/* ---------- 9. How: numbered list of four ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-xxl);
}

.step {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: var(--border-divider) solid var(--color-border);
}

.step-number {
  font-family: var(--type-display-family);
  font-weight: var(--type-display-weight);
  font-size: calc(var(--type-display-size) * 1.1);
  line-height: 1;
  letter-spacing: var(--type-display-tracking);
  color: var(--color-accent);
  margin-bottom: var(--space-xxs);
}

/* ---------- 10. Levels: three cards ---------- */

.levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.level {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-raised-surface);
  border: var(--border-structural) solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-surface);
}

.level-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}

.level-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* The state marker echoes the app's Matter rows, which draw an unconditional circle: a neutral ring for
   Standard, jade (the private-state token) filled only for the two protected levels. The shape and ring
   are fixed on purpose — no direction token describes this marker. Color never carries the meaning
   alone: the name does. */
.state-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-text-tertiary);
}

.level-protected .state-dot {
  background: var(--color-private);
  border-color: var(--color-private);
}

.tag {
  display: inline-block;
  padding: var(--space-xxs) calc(var(--space-xs) + var(--space-xxs));
  font-family: var(--type-status-family);
  font-weight: var(--type-status-weight);
  font-size: calc(var(--type-status-size) * 1.1);
  line-height: 1.2;
  letter-spacing: var(--type-status-tracking);
  font-variant-caps: var(--type-status-caps);
  color: var(--color-accent-strong);
  background: var(--color-selection);
  border-radius: var(--radius-status);
  white-space: nowrap;
}

.footnote {
  margin-top: var(--space-lg);
  max-width: 70ch;
  font-size: calc(var(--type-body-size) * 1.15);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* ---------- 11. Fine print: a band one step of tint from the canvas ---------- */

.band {
  padding-block: var(--space-xxl);
  background: var(--color-surface);
  border-top: var(--border-divider) solid var(--color-divider);
  border-bottom: var(--border-divider) solid var(--color-divider);
}

.band .section-label {
  margin-bottom: var(--space-lg);
}

.fine-print-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl);
}

.fine-print-items li {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}

.fine-print-items h3 {
  font-family: var(--type-label-family);
  font-weight: var(--type-section-weight);
  font-size: calc(var(--type-body-size) * 1.15);
  line-height: 1.4;
  letter-spacing: var(--type-label-tracking);
  font-variant-caps: var(--type-label-caps);
  color: var(--color-text-primary);
}

.fine-print-items p {
  font-size: calc(var(--type-body-size) * 1.15);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* ---------- 12. Updates ---------- */

.updates-inner {
  display: grid;
  gap: var(--space-md);
  max-width: 40rem;
}

.updates .section-heading {
  margin-bottom: 0;
}

.updates .signup {
  margin-top: var(--space-xs);
}

/* ---------- 13. Footer ---------- */

.site-footer {
  padding-block: var(--space-lg) var(--space-xxl);
}

.footer-line {
  padding-top: var(--space-lg);
  border-top: var(--border-divider) solid var(--color-divider);
}

/* ---------- 14. Breakpoints: 1440 (default), 820, 390 ---------- */

@media (max-width: 820px) {
  .container {
    padding-inline: var(--layout-gutter-narrow);
  }

  .section {
    padding-block: calc(var(--space-xxl) + var(--space-md));
  }

  .panels,
  .steps,
  .levels,
  .fine-print-items {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps {
    gap: var(--space-lg);
  }

  .band {
    padding-block: calc(var(--space-xl) + var(--space-xs));
  }
}

@media (max-width: 600px) {
  .header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xxs);
  }

  .site-nav ul {
    gap: var(--space-xxs) var(--space-md);
  }

  .site-nav a {
    font-size: calc(var(--type-label-size) * 1.1);
  }
}

@media (max-width: 480px) {
  .hero {
    padding-block: var(--space-lg) var(--space-xl);
  }

  .section {
    padding-block: var(--space-xxl);
  }

  .signup input[type="email"],
  .signup .button {
    flex-basis: 100%;
  }

  .signup .button {
    margin-top: var(--space-xs);
  }

  .hero-actions .signup {
    max-width: none;
  }

  .panel,
  .level {
    padding: var(--space-md);
  }
}

/* ---------- 15. Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }

  .button-primary:active {
    transform: none;
  }

  .link-secondary:hover .arrow {
    transform: none;
  }
}

.signup-consent {
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 1rem;
}
.signup-consent input {
  flex: 0 0 auto;
  margin-top: 0.3em;
}

/* ---------- 15. Legal pages (privacy/, terms/, processing/, security/) ---------- */
/* Rendered from the app's own copy by LegalPages.swift; the frame is index.html's. */

.legal .container {
  max-width: calc(72ch + 2 * var(--layout-gutter-wide));
}

.legal h1 {
  margin-block: var(--space-sm) var(--space-md);
}

.legal-note {
  font-family: var(--type-caption-family);
  font-weight: var(--type-caption-weight);
  font-size: calc(var(--type-caption-size) * 1.2);
  line-height: 1.45;
  letter-spacing: var(--type-caption-tracking);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

.legal-body {
  font-family: var(--type-reading-family);
  font-weight: var(--type-reading-weight);
  font-size: calc(var(--type-reading-size) * 1.2);
  line-height: 1.6;
  letter-spacing: var(--type-reading-tracking);
  text-wrap: pretty;
}

.legal-body h2 {
  margin-block: var(--space-xxl) var(--space-md);
}

.legal-body h3 {
  margin-block: var(--space-xl) var(--space-xs);
}

.legal-body .legal-group {
  font-size: calc(var(--type-title-size) * 0.85);
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.legal-body p {
  margin-bottom: var(--space-md);
}

.legal-body ul,
.legal-body ol {
  margin: 0 0 var(--space-md) 1.4em;
  padding: 0;
}

.legal-body li {
  margin-bottom: var(--space-xs);
}

.footer-line a {
  color: inherit;
}