@layer reset, tokens, base, layout, chrome, components, pages, utilities;

/* site/css/tokens.css */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/onest-latin-variable.woff2) format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
@layer tokens {
  :root {
    color-scheme: dark;
    --color-canvas: #080c16;
    --color-canvas-deep: #050812;
    --color-surface: #0b101e;
    --color-surface-raised: #121b38;
    --color-surface-soft: rgb(255 255 255 / 0.035);
    --color-text: #f3f4f6;
    --color-text-muted: #acb0b9;
    --color-text-faint: #737d90;
    --color-violet: #9966ff;
    --color-violet-bright: #b48cff;
    --color-cyan: #33ccff;
    --color-success: #36d399;
    --color-warning: #fb923c;
    --color-danger: #fb7185;
    --color-line: rgb(170 178 192 / 0.18);
    --color-line-strong: rgb(170 178 192 / 0.3);
    --gradient-brand:
      linear-gradient(
        100deg,
        var(--color-violet),
        #a977ff 48%,
        var(--color-cyan));
    --gradient-surface:
      linear-gradient(
        145deg,
        rgb(153 102 255 / 0.1),
        rgb(15 23 42 / 0.56));
    --font-display:
      ui-serif,
      Georgia,
      Cambria,
      "Times New Roman",
      serif;
    --font-body:
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    --font-logo:
      "Onest",
      ui-sans-serif,
      system-ui,
      sans-serif;
    --font-mono:
      "SFMono-Regular",
      Consolas,
      "Liberation Mono",
      monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-body: 1rem;
    --text-lede: clamp(1rem, 0.95rem + 0.25vw, 1.16rem);
    --text-h3: 1.125rem;
    --text-h2: clamp(2rem, 1.42rem + 2.25vw, 3.55rem);
    --text-h1: clamp(2.55rem, 1.75rem + 3.4vw, 5.2rem);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;
    --shadow-card: 0 24px 70px rgb(0 0 0 / 0.26);
    --shadow-violet: 0 0 50px rgb(153 102 255 / 0.18);
    --focus-ring: 0 0 0 3px rgb(51 204 255 / 0.5);
    --content-wide: 75rem;
    --content-reading: 48rem;
    --header-height: 4.25rem;
    --transition-fast: 160ms ease;
    --transition-smooth: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --tracking-heading: -0.02em;
    --tracking-tight: -0.025em;
    --ink: var(--color-canvas);
    --navy: var(--color-surface);
    --paper: var(--color-text);
    --muted: var(--color-text-muted);
    --violet: var(--color-violet);
    --cyan: var(--color-cyan);
    --line: var(--color-line);
    --display: var(--font-display);
    --body: var(--font-body);
    --mono: var(--font-mono);
  }
}

/* site/css/foundation.css */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    min-width: 20rem;
    scroll-behavior: smooth;
    background: var(--color-canvas);
  }
  body {
    min-width: 20rem;
    min-height: 100vh;
    margin: 0;
  }
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  ul,
  ol {
    margin: 0;
    padding: 0;
  }
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  button,
  input,
  textarea,
  select {
    font: inherit;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
}
@layer base {
  body {
    color: var(--color-text);
    background:
      radial-gradient(
        55rem 34rem at 88% -6%,
        rgb(153 102 255 / 0.13),
        transparent 68%),
      radial-gradient(
        42rem 32rem at -8% 42%,
        rgb(51 204 255 / 0.07),
        transparent 70%),
      var(--color-canvas);
    font: 400 var(--text-body) / 1.5 var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  body::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    background-image:
      linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px),
      linear-gradient(
        90deg,
        rgb(255 255 255 / 0.025) 1px,
        transparent 1px);
    background-size: 1.5rem 1.5rem;
    mask-image:
      linear-gradient(
        to bottom,
        black,
        transparent 56rem);
    content: "";
    pointer-events: none;
  }
  #content-slot,
  .site-footer {
    position: relative;
    z-index: 1;
  }
  h1,
  h2,
  h3 {
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-heading);
    line-height: 1.2;
    text-wrap: balance;
  }
  h1 {
    font-size: var(--text-h1);
  }
  h2 {
    font-size: var(--text-h2);
  }
  h3 {
    font-size: var(--text-h3);
  }
  p {
    color: var(--color-text-muted);
  }
  strong {
    color: var(--color-text);
  }
  :focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
  }
  ::selection {
    color: var(--color-text);
    background: rgb(153 102 255 / 0.42);
  }
}
@layer layout {
  .l-wrap {
    width: min(var(--content-wide), calc(100% - 3rem));
    margin-inline: auto;
  }
  .l-reading {
    width: min(var(--content-reading), calc(100% - 3rem));
    margin-inline: auto;
  }
  .page {
    min-height: 60vh;
  }
  .section {
    padding-block: var(--space-24);
  }
  .section--compact {
    padding-block: var(--space-16);
  }
  .stack {
    display: grid;
    gap: var(--stack-gap, var(--space-6));
  }
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-4));
  }
  @media (max-width: 48rem) {
    .l-wrap,
    .l-reading {
      width: min(100% - 3rem, var(--content-wide));
    }
  }
}
@layer utilities {
  .u-gradient-text {
    color: transparent;
    background: var(--gradient-brand);
    background-clip: text;
    -webkit-background-clip: text;
  }
  .u-center {
    text-align: center;
  }
  .u-muted {
    color: var(--color-text-muted);
  }
  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* site/css/chrome.css */
@layer chrome {
  .skip-link {
    position: fixed;
    z-index: 100;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--color-canvas);
    background: var(--color-text);
    border-radius: var(--radius-sm);
    transform: translateY(-5rem);
  }
  .skip-link:focus {
    transform: translateY(0);
  }
  .site-header {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid var(--color-line);
    background: rgb(8 12 22 / 0.9);
    backdrop-filter: blur(1rem);
    box-shadow: 0 8px 30px -20px rgb(0 0 0 / 0.9);
  }
  .site-header__inner {
    width: min(87.5rem, 100%);
    min-height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-inline: auto;
    padding: 0.75rem 1.5rem;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    font: 700 1.25rem / 1.5 var(--font-logo);
    letter-spacing: -0.035em;
  }
  .brand__mark {
    width: 2.5rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
  }
  .brand__picture,
  .brand__icon {
    width: 100%;
    height: 100%;
    display: block;
  }
  .brand__picture {
    overflow: hidden;
  }
  .brand__icon {
    object-fit: contain;
  }
  .site-header__actions,
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  .site-nav a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
  }
  .site-nav a:hover,
  .site-actions__login:hover {
    color: var(--color-text);
  }
  .site-actions__login {
    padding: 0.45rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    background: rgb(255 255 255 / 0.03);
    font-size: var(--text-sm);
  }
  .site-menu__trigger {
    width: 2.5rem;
    height: 2.5rem;
    display: none;
    place-items: center;
    padding: 0;
    border: 0;
    color: var(--color-text-muted);
    background: transparent;
    cursor: pointer;
  }
  .site-menu {
    position: fixed;
    z-index: 100;
    inset: 0 0 0 auto;
    width: min(18.75rem, 100vw);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 1.5rem;
    overflow: hidden;
    border: 0;
    border-left: 1px solid rgb(255 255 255 / 0.1);
    color: var(--color-text);
    background: rgb(10 10 11 / 0.95);
    backdrop-filter: blur(1rem);
    box-shadow: -1.5rem 0 4rem rgb(0 0 0 / 0.34);
    opacity: 0;
    transform: translateX(100%);
    transition:
      opacity 300ms ease-in,
      transform 300ms ease-in,
      overlay 300ms allow-discrete,
      display 300ms allow-discrete;
  }
  .site-menu[open] {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateX(0);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  @starting-style {
    .site-menu[open] {
      opacity: 0;
      transform: translateX(100%);
    }
    .site-menu[open]::backdrop {
      background: rgb(0 0 0 / 0);
    }
  }
  .site-menu[open][data-closing] {
    opacity: 0;
    transform: translateX(100%);
    transition-duration: 300ms;
    transition-timing-function: ease-in;
  }
  .site-menu::backdrop {
    background: rgb(0 0 0 / 0);
    transition:
      background-color 300ms ease-in,
      overlay 300ms allow-discrete,
      display 300ms allow-discrete;
  }
  .site-menu[open]::backdrop {
    background: rgb(0 0 0 / 0.8);
    transition-duration: 500ms;
  }
  .site-menu[open][data-closing]::backdrop {
    background: rgb(0 0 0 / 0);
    transition-duration: 300ms;
  }
  .site-menu__header {
    min-height: 2.25rem;
  }
  .site-menu__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    background: rgb(255 255 255 / 0.05);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity var(--transition-fast), background var(--transition-fast);
  }
  .site-menu__close:hover {
    background: rgb(255 255 255 / 0.1);
    opacity: 1;
  }
  .site-menu__close .c-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .site-menu__panel {
    min-width: 0;
    display: grid;
    align-content: start;
    flex: 1;
    gap: var(--space-6);
    margin-top: var(--space-12);
  }
  .site-menu__panel a {
    color: var(--color-text-muted);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.75rem;
  }
  .site-menu__panel a:hover {
    color: var(--color-text);
  }
  .site-menu__signout {
    justify-self: start;
    margin-top: var(--space-4);
    padding: var(--space-4) 0 0;
    border: 0;
    border-top: 1px solid var(--color-line);
    color: var(--color-text-faint);
    background: none;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.75rem;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition-fast);
  }
  .site-menu__signout:hover {
    color: var(--color-danger);
  }
  .site-menu__signout:disabled {
    cursor: wait;
    opacity: 0.6;
  }
  .site-menu__footer {
    display: grid;
    gap: var(--space-3);
    padding-bottom: var(--space-8);
  }
  .site-menu__footer .c-button {
    width: 100%;
    min-height: 3.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .site-menu__footer .c-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .site-menu__footer [data-menu-signin] {
    min-height: 3rem;
    font-size: 1rem;
  }
  body[data-menu-open] {
    overflow: hidden;
  }
  .site-footer {
    padding-block: var(--space-12);
    border-top: 1px solid var(--color-line);
    background: rgb(5 8 18 / 0.62);
  }
  .site-footer__inner {
    width: min(42rem, calc(100% - 3rem));
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    margin-inline: auto;
    text-align: center;
  }
  .site-footer p {
    font-size: 0.8125rem;
    line-height: 1.625;
  }
  .site-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }
  .site-footer__meta {
    font-size: var(--text-xs) !important;
  }
  body[data-page=auth] .site-footer,
  body[data-page=account] .site-footer,
  body[data-page=get-started] .site-footer,
  body:has([data-page=auth]) .site-footer,
  body:has([data-page=account]) .site-footer,
  body:has([data-page=get-started]) .site-footer {
    display: none;
  }
  @media (max-width: 48rem) {
    .site-nav {
      display: none;
    }
    .site-menu__trigger {
      display: grid;
    }
    .site-header__actions {
      gap: var(--space-2);
    }
    .site-actions__login {
      min-width: 4.6125rem;
      height: 2.25rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.75rem;
      font-weight: 500;
      white-space: nowrap;
    }
    .site-actions__login[data-session=authenticated] {
      display: none;
    }
    .brand {
      font-size: 1.125rem;
    }
  }
  @media (max-width: 27rem) {
    .site-actions__login {
      display: none;
    }
  }
}
@layer components {
  .c-button {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--button-text, var(--color-canvas));
    background: var(--button-bg, var(--color-text));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition:
      transform var(--transition-fast),
      border-color var(--transition-fast),
      background var(--transition-fast);
  }
  .c-button:hover {
    transform: translateY(-2px);
  }
  .c-button--small {
    min-height: 2.25rem;
    padding-inline: 1rem;
  }
  .c-button--ghost {
    --button-bg: rgb(153 102 255 / 0.06);
    --button-border: rgb(153 102 255 / 0.24);
    --button-text: var(--color-text);
    border: 1px solid var(--button-border);
  }
  .c-button--outline {
    --button-bg: transparent;
    --button-border: var(--color-line-strong);
    --button-text: var(--color-text);
    border: 1px solid var(--button-border);
  }
  .c-button--violet {
    --button-bg: var(--color-violet);
    --button-border: var(--color-violet);
    --button-text: var(--color-canvas);
  }
  .site-menu__footer .c-button {
    min-height: 3.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .site-menu__footer .c-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .c-eyebrow {
    color: var(--color-violet-bright);
    font: 650 0.68rem / 1.3 var(--font-mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }
  .c-status {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.375rem 0.75rem;
    border: 1px solid rgb(153 102 255 / 0.24);
    border-radius: var(--radius-pill);
    color: var(--color-violet-bright);
    background: rgb(153 102 255 / 0.06);
    font: 500 0.6875rem / 1.5 var(--font-body);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .c-status__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-violet);
  }
  .c-status__dot::after {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: inherit;
    animation: status-pulse 2.2s ease-out infinite;
    content: "";
  }
  @keyframes status-pulse {
    70%, 100% {
      opacity: 0;
      transform: scale(2.6);
    }
  }
  .c-card {
    border: 1px solid var(--card-border, var(--color-line));
    border-radius: var(--radius-lg);
    background: var(--card-bg, var(--color-surface-soft));
    box-shadow: var(--card-shadow, none);
  }
  .c-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
  }
  .c-section-heading {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
  }
  .c-section-heading .c-eyebrow + h2 {
    margin-top: var(--space-4);
  }
  .c-section-heading > p:last-child {
    max-width: 36rem;
    margin: var(--space-4) auto 0;
  }
  .cookie-notice {
    position: fixed;
    z-index: 80;
    right: var(--space-4);
    bottom: var(--space-4);
    width: min(23rem, calc(100% - 2rem));
    padding: var(--space-4);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    font-size: var(--text-sm);
  }
  .cookie-notice p {
    margin: 0;
  }
  .cookie-notice a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .cookie-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  .cookie-actions button {
    padding: 0.45rem 0.7rem;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-canvas);
    background: var(--color-text);
    cursor: pointer;
  }
  .cookie-actions button[data-choice=declined] {
    color: var(--color-text-muted);
    background: transparent;
  }
  .toast-region {
    position: fixed;
    z-index: 90;
    right: var(--space-4);
    bottom: var(--space-4);
  }
  .toast-region:not(:empty) {
    padding: var(--space-3) var(--space-4);
    color: var(--color-canvas);
    background: var(--color-text);
    border-radius: var(--radius-sm);
  }
}

/* site/css/pages.css */
@layer pages {
  .island-fallback {
    padding-block: calc(var(--header-height) + clamp(1.75rem, 4vw, 2.875rem)) clamp(2.5rem, 6vw, 4.25rem);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  [data-page=home] .home-hero {
    min-height: 100svh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-16);
    padding-block: var(--space-24) var(--space-16);
    text-align: center;
  }
  [data-page=home] .home-hero__copy {
    max-width: 64rem;
    display: grid;
    justify-items: center;
    gap: var(--space-8);
  }
  [data-page=home] .home-hero__message {
    display: grid;
    justify-items: center;
    gap: var(--space-6);
  }
  [data-page=home] .home-hero h1 {
    max-width: 64rem;
    font-size: 4.5rem;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
  }
  [data-page=home] .home-hero__lede {
    max-width: 42rem;
    font-size: 1.125rem;
    line-height: 1.625;
  }
  [data-page=home] .home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    padding-top: var(--space-2);
  }
  [data-page=home] .home-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    padding-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  [data-page=home] .home-trust span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.375rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.05);
    border-radius: var(--radius-pill);
    background: rgb(18 27 56 / 0.3);
    line-height: 1.25rem;
  }
  [data-page=home] .home-trust span[data-tone=success] .c-icon {
    color: #34d399;
  }
  [data-page=home] .home-trust span[data-tone=blue] .c-icon {
    color: #60a5fa;
  }
  [data-page=home] .home-trust span[data-tone=violet] .c-icon {
    color: #c084fc;
  }
  [data-page=home] .product-window {
    width: min(56rem, 100%);
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-canvas-deep);
    box-shadow: var(--shadow-card), var(--shadow-violet);
  }
  [data-page=home] .product-window__chrome {
    height: 2.3125rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-inline: var(--space-4);
    border-bottom: 1px solid rgb(255 255 255 / 0.05);
    background: rgb(0 0 0 / 0.4);
  }
  [data-page=home] .product-window__chrome i {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 1px solid currentcolor;
    background: color-mix(in srgb, currentcolor 20%, transparent);
    opacity: 1;
  }
  [data-page=home] .product-window__chrome i:nth-child(1) {
    color: #ef4444;
  }
  [data-page=home] .product-window__chrome i:nth-child(2) {
    color: #eab308;
  }
  [data-page=home] .product-window__chrome i:nth-child(3) {
    color: #22c55e;
  }
  [data-page=home] .product-window__media {
    position: relative;
  }
  [data-page=home] .product-window__media::after {
    position: absolute;
    inset: auto 0 0;
    height: 8rem;
    background: linear-gradient(transparent, var(--color-canvas));
    content: "";
  }
  [data-page=home] .product-window img {
    width: 100%;
    height: auto;
    opacity: 0.9;
  }
  [data-page=home] .home-price {
    width: min(48rem, 100%);
    min-height: 13rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-10);
    text-align: left;
    --card-border: rgb(153 102 255 / 0.34);
    --card-bg: var(--gradient-surface);
  }
  [data-page=home] .home-price .c-eyebrow {
    width: max-content;
    padding: 0.125rem 0.5rem;
    border: 1px solid rgb(51 204 255 / 0.2);
    border-radius: var(--radius-sm);
    color: var(--color-cyan);
    background: rgb(51 204 255 / 0.1);
    font: 500 0.625rem / 1.5 var(--font-body);
    letter-spacing: 0.05em;
  }
  [data-page=home] .home-price h2 {
    margin-top: var(--space-3);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
  }
  [data-page=home] .home-price h2 + p {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.625;
  }
  [data-page=home] .home-price > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  [data-page=home] .home-price__amount {
    color: var(--color-text);
    font: 700 2.25rem / 2.5rem var(--font-body);
    text-align: center;
    letter-spacing: var(--tracking-tight);
  }
  [data-page=home] .home-price__amount small {
    color: var(--color-text-muted);
    font-size: var(--text-body);
    font-weight: 400;
  }
  [data-page=home] .home-price__button {
    min-height: 2.5rem;
    margin-top: var(--space-4);
    padding-inline: var(--space-5);
    border-radius: var(--radius-md);
    font-weight: 600;
  }
  [data-page=home] .platform-note {
    padding-block: var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
  }
  [data-page=home] .benefit-grid {
    max-width: 64rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: var(--space-16) auto 0;
  }
  [data-page=home] .c-section-heading h2 {
    font-size: 3rem;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
  }
  [data-page=home] .c-section-heading .c-eyebrow {
    color: var(--color-text-muted);
    font: 400 0.6875rem / 1.5 var(--font-body);
    letter-spacing: 0.1em;
  }
  [data-page=home] .c-section-heading > p:last-child {
    font-size: 0.9375rem;
  }
  [data-page=home] .benefit-card {
    padding: var(--space-6);
    background:
      linear-gradient(
        145deg,
        var(--benefit-tint),
        transparent 70%),
      rgb(11 16 30 / 0.4);
  }
  [data-page=home] .benefit-card[data-tone=amber] {
    --benefit-tint: rgb(245 158 11 / 0.1);
    --card-border: rgb(245 158 11 / 0.2);
  }
  [data-page=home] .benefit-card[data-tone=violet] {
    --benefit-tint: rgb(153 102 255 / 0.12);
    --card-border: rgb(153 102 255 / 0.2);
  }
  [data-page=home] .benefit-card[data-tone=cyan] {
    --benefit-tint: rgb(51 204 255 / 0.1);
    --card-border: rgb(51 204 255 / 0.2);
  }
  [data-page=home] .benefit-card__icon,
  [data-page=home] .feature-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    margin-bottom: var(--space-4);
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 0.05);
  }
  [data-page=home] .benefit-card__icon .c-icon,
  [data-page=home] .feature-card__icon .c-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  [data-page=home] .benefit-card[data-tone=amber] .benefit-card__icon {
    color: #f59e0b;
  }
  [data-page=home] .benefit-card[data-tone=violet] .benefit-card__icon {
    color: #8b5cf6;
  }
  [data-page=home] .benefit-card[data-tone=cyan] .benefit-card__icon {
    color: #06b6d4;
  }
  [data-page=home] .benefit-card h3,
  [data-page=home] .feature-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.75rem;
  }
  [data-page=home] .benefit-card p,
  [data-page=home] .feature-card p {
    margin-top: var(--space-1);
    font-size: 0.8125rem;
    line-height: 1.625;
  }
  [data-page=home] .feature-grid {
    max-width: 64rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin: var(--space-16) auto 0;
  }
  [data-page=home] .feature-card {
    min-height: 12.125rem;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    --card-bg: rgb(11 16 30 / 0.5);
  }
  [data-page=home] .feature-card > div {
    margin-top: var(--space-6);
  }
  [data-page=home] .feature-card__icon {
    margin-bottom: var(--space-3);
  }
  [data-page=home] .feature-card[data-span="2"] {
    grid-column: span 2;
  }
  [data-page=home] .feature-card[data-variant=glow] {
    --card-border: rgb(153 102 255 / 0.42);
    --card-bg:
      radial-gradient(
        circle at 75% 20%,
        rgb(153 102 255 / 0.25),
        transparent 45%),
      var(--color-surface-raised);
    --card-shadow: var(--shadow-violet);
  }
  [data-page=home] .feature-card[data-variant=solid] {
    --card-border: var(--color-violet);
    --card-bg: var(--color-violet);
  }
  [data-page=home] .feature-card[data-variant=solid] :is(.feature-card__label, h3, p) {
    color: var(--color-canvas);
  }
  [data-page=home] .feature-card[data-variant=solid] .feature-card__icon {
    color: white;
    background: rgb(255 255 255 / 0.2);
  }
  [data-page=home] .feature-card[data-variant=glow] .feature-card__icon {
    color: var(--color-violet);
    background: rgb(153 102 255 / 0.2);
  }
  [data-page=home] .feature-card__label {
    color: var(--color-text-muted);
    font: 500 0.625rem / 1.5 var(--font-body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  [data-page=home] .ethics-card {
    max-width: 48rem;
    min-height: 13.6875rem;
    margin-inline: auto;
    padding: var(--space-10);
    text-align: center;
    --card-bg: rgb(11 16 30 / 0.5);
  }
  [data-page=home] .ethics-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
  }
  [data-page=home] .ethics-card p {
    max-width: 42rem;
    margin: var(--space-4) auto 0;
    font-size: var(--text-sm);
    line-height: 1.625;
  }
  [data-page=home] .ethics-signals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-6);
    color: var(--color-cyan);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  [data-page=home] .ethics-signals span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  [data-page=home] .final-cta {
    padding-block: var(--space-16);
    text-align: center;
  }
  [data-page=home] .final-cta h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    letter-spacing: var(--tracking-tight);
  }
  [data-page=home] .final-cta p {
    max-width: 32rem;
    margin: var(--space-6) auto;
    font-size: 0.9375rem;
    line-height: 1.625;
  }
  [data-page=home] .final-cta small {
    display: block;
    margin-top: var(--space-3);
    color: var(--color-text-faint);
  }
  [data-page=home] .faq-section {
    padding-block: var(--space-20);
  }
  [data-page=home] .faq-section h2 {
    font-size: 2.25rem;
    letter-spacing: var(--tracking-tight);
  }
  [data-page=home] .faq {
    width: min(42rem, 100%);
    display: grid;
    gap: var(--space-3);
    margin: var(--space-12) auto 0;
  }
  [data-page=home] .faq details {
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius-lg);
    background: rgb(11 16 30 / 0.5);
  }
  [data-page=home] .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-5);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: -0.02rem;
    list-style: none;
    cursor: pointer;
  }
  [data-page=home] .faq summary::-webkit-details-marker {
    display: none;
  }
  [data-page=home] .faq summary .c-icon {
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
  }
  [data-page=home] .faq details[open] summary .c-icon {
    transform: rotate(180deg);
  }
  [data-page=home] .faq p {
    padding: 0 var(--space-5) var(--space-5);
    font-size: 0.8125rem;
    line-height: 1.625;
  }
  [data-page=blog] .blog-hero {
    max-width: 58rem;
    margin-inline: auto;
    padding-block: 12rem var(--space-24);
    text-align: center;
  }
  [data-page=blog] .blog-hero h1 {
    margin-top: var(--space-5);
  }
  [data-page=blog] .blog-hero h1 {
    font-size: 4.5rem;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
  }
  [data-page=blog] .blog-hero > p:last-child {
    max-width: 42rem;
    margin: var(--space-8) auto 0;
    font-size: 1.25rem;
    line-height: 1.625;
  }
  [data-page=blog] .featured-post {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    overflow: hidden;
    margin-bottom: var(--space-16);
    --card-border: rgb(153 102 255 / 0.28);
    --card-bg: rgb(15 23 42 / 0.54);
  }
  [data-page=blog] .featured-post__image {
    min-height: 26rem;
  }
  [data-page=blog] .featured-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  [data-page=blog] .featured-post__copy {
    display: grid;
    align-content: center;
    gap: var(--space-5);
    padding: var(--space-10);
  }
  [data-page=blog] .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  [data-page=blog] .tag {
    padding: 0.25rem 0.55rem;
    border: 1px solid rgb(153 102 255 / 0.2);
    border-radius: var(--radius-pill);
    color: var(--color-violet-bright);
    background: rgb(153 102 255 / 0.08);
    font-size: 0.68rem;
  }
  [data-page=blog] .post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    padding-bottom: var(--space-24);
  }
  [data-page=blog] .post-card {
    overflow: hidden;
    transition: transform var(--transition-smooth), border-color var(--transition-fast);
  }
  [data-page=blog] .post-card:hover {
    border-color: rgb(153 102 255 / 0.34);
    transform: translateY(-3px);
  }
  [data-page=blog] .post-card__image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  [data-page=blog] .post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth);
  }
  [data-page=blog] .post-card:hover img {
    transform: scale(1.025);
  }
  [data-page=blog] .post-card__copy {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
  }
  [data-page=blog] .post-card__copy p {
    font-size: var(--text-sm);
  }
  [data-page=blog] .post-card__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
    color: var(--color-text-faint);
    font-size: var(--text-xs);
  }
  [data-page=article] .article-header {
    padding-block: 11rem var(--space-12);
  }
  [data-page=article] .c-back-link {
    display: inline-block;
    margin-bottom: var(--space-8);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  [data-page=article] .c-back-link:hover {
    color: var(--color-text);
  }
  [data-page=article] .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  [data-page=article] .tag {
    padding: 0.25rem 0.55rem;
    border: 1px solid rgb(153 102 255 / 0.2);
    border-radius: var(--radius-pill);
    color: var(--color-violet-bright);
    background: rgb(153 102 255 / 0.08);
    font-size: 0.68rem;
  }
  [data-page=article] .article-header h1 {
    margin-top: var(--space-6);
    font-size: 3.75rem;
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
  }
  [data-page=article] .article-dek {
    margin-top: var(--space-6);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.625;
  }
  [data-page=article] .article-byline {
    margin-top: var(--space-6);
    color: var(--color-text-faint);
    font-size: var(--text-sm);
  }
  [data-page=article] .article-hero {
    margin-bottom: var(--space-16);
  }
  [data-page=article] .article-hero img {
    width: 100%;
    aspect-ratio: 1.9;
    object-fit: cover;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
  }
  [data-page=article] .article-product-card,
  [data-page=article] .article-closing-cta {
    display: grid;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
    padding: var(--space-8);
    --card-border: rgb(153 102 255 / 0.3);
    --card-bg: var(--gradient-surface);
  }
  [data-page=article] .article-product-card h2,
  [data-page=article] .article-closing-cta h2 {
    margin-top: var(--space-2);
    font-size: clamp(1.55rem, 1.3rem + 0.8vw, 2rem);
  }
  [data-page=article] .article-product-card p:not(.c-eyebrow),
  [data-page=article] .article-closing-cta p:not(.c-eyebrow) {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
  }
  [data-page=article] .article-product-card .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  [data-page=article] .article-closing-cta {
    margin-top: var(--space-4);
  }
  [data-page=article] .article-content {
    padding-bottom: var(--space-16);
    font-size: 1.08rem;
    line-height: 1.82;
  }
  [data-page=article] .article-content h2 {
    margin: var(--space-16) 0 var(--space-4);
    font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem);
  }
  [data-page=article] .article-content h3 {
    margin: var(--space-10) 0 var(--space-3);
  }
  [data-page=article] .article-content p,
  [data-page=article] .article-content li {
    color: var(--color-text-muted);
  }
  [data-page=article] .article-content p + p {
    margin-top: var(--space-5);
  }
  [data-page=article] .article-content ul,
  [data-page=article] .article-content ol {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-5) 0;
    padding-left: 1.4rem;
  }
  [data-page=article] .article-content a {
    color: var(--color-cyan);
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }
  [data-page=article] .article-content blockquote {
    margin: var(--space-8) 0;
    padding-left: var(--space-5);
    border-left: 2px solid var(--color-violet);
    font: 1.25rem / 1.55 var(--font-display);
  }
  [data-page=article] .article-content pre {
    overflow: auto;
    margin-block: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  [data-page=article] .article-footer {
    padding-block: var(--space-10) var(--space-20);
    border-top: 1px solid var(--color-line);
  }
  [data-page=article] .article-neighbors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }
  [data-page=article] .article-neighbors a {
    padding: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
  }
  [data-page=article] .article-neighbors span {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-cyan);
    font: var(--text-xs) var(--font-mono);
    text-transform: uppercase;
  }
  [data-page=pricing] .pricing-hero {
    max-width: 55rem;
    padding-block: 10rem var(--space-10);
    text-align: center;
  }
  [data-page=pricing] .pricing-hero .c-status {
    margin-inline: auto;
  }
  [data-page=pricing] .pricing-hero h1 {
    margin-top: var(--space-6);
    font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
  }
  [data-page=pricing] .pricing-hero > p:last-child {
    max-width: 42rem;
    margin: var(--space-6) auto 0;
    color: var(--color-text-muted);
    font-size: var(--text-lede);
  }
  [data-page=pricing] .pricing-stage {
    max-width: 62rem;
    padding-bottom: var(--space-24);
  }
  [data-page=pricing] .billing-switch {
    width: max-content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    margin: 0 auto var(--space-6);
    padding: 0.25rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.025);
  }
  [data-page=pricing] .billing-switch button {
    min-width: 9rem;
    min-height: 2.75rem;
    padding-inline: var(--space-5);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    background: transparent;
    font: 600 0.8125rem / 1 var(--font-body);
    cursor: pointer;
  }
  [data-page=pricing] .billing-switch button[aria-pressed=true] {
    color: var(--color-canvas);
    background: var(--color-text);
  }
  [data-page=pricing] .billing-switch span {
    margin-left: 0.35rem;
    color: var(--color-violet-bright);
    font-size: 0.625rem;
    text-transform: uppercase;
  }
  [data-page=pricing] .billing-switch button[aria-pressed=true] span {
    color: #5b30a8;
  }
  [data-page=pricing] .pricing-focus {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-10);
    padding: var(--space-10);
    --card-border: rgb(153 102 255 / 0.38);
    --card-bg:
      linear-gradient(
        135deg,
        rgb(153 102 255 / 0.13),
        rgb(8 12 22 / 0.96) 48%,
        rgb(51 204 255 / 0.06));
  }
  [data-page=pricing] .pricing-focus::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.2rem;
    background: linear-gradient(var(--color-violet), var(--color-cyan));
    content: "";
  }
  [data-page=pricing] .pricing-focus__copy h2 {
    max-width: 30rem;
    margin-top: var(--space-3);
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.75rem);
  }
  [data-page=pricing] .pricing-focus__copy > p:last-child {
    max-width: 34rem;
    margin-top: var(--space-4);
    color: var(--color-text-muted);
  }
  [data-page=pricing] .pricing-focus__price {
    min-width: 15rem;
    align-self: end;
    text-align: right;
  }
  [data-page=pricing] .pricing-focus__price > p:first-child {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-2);
  }
  [data-page=pricing] .pricing-focus__price strong {
    color: var(--color-text);
    font-size: clamp(2.8rem, 2.2rem + 2vw, 4.25rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
  }
  [data-page=pricing] .pricing-focus__price small,
  [data-page=pricing] [data-pricing-note] {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
  }
  [data-page=pricing] [data-pricing-note] {
    margin-top: var(--space-3);
  }
  [data-page=pricing] .pricing-saving {
    width: max-content;
    margin: var(--space-3) 0 0 auto;
    padding: 0.25rem 0.55rem;
    border: 1px solid rgb(51 204 255 / 0.24);
    border-radius: var(--radius-pill);
    color: var(--color-cyan);
    background: rgb(51 204 255 / 0.07);
    font: 650 0.6875rem / 1.5 var(--font-mono);
  }
  [data-page=pricing] [data-billing-interval=month] .pricing-saving {
    display: none;
  }
  [data-page=pricing] .pricing-cta {
    grid-column: 1 / -1;
    min-height: 3.5rem;
  }
  [data-page=pricing] .pricing-assurance {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding-top: var(--space-6);
    color: var(--color-text-muted);
    font-size: 0.75rem;
  }
  [data-page=pricing] .pricing-assurance span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  [data-page=pricing] .pricing-assurance .c-icon {
    width: 0.9rem;
    color: var(--color-cyan);
  }
  [data-page=get-started] .purchase-hero {
    max-width: 58rem;
    margin-inline: auto;
    padding-block: 9rem var(--space-12);
    text-align: center;
  }
  [data-page=get-started] .purchase-hero p {
    max-width: 40rem;
    margin: var(--space-4) auto 0;
    font-size: 0.9375rem;
    line-height: 1.625;
  }
  [data-page=get-started] .purchase-hero h1 {
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
  }
  [data-page=get-started] .purchase-plans {
    max-width: 64rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
  [data-page=get-started] .purchase-option {
    position: relative;
    min-height: 23rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8);
  }
  [data-page=get-started] .purchase-option[data-featured] {
    --card-border: rgb(153 102 255 / 0.55);
    --card-bg:
      linear-gradient(
        145deg,
        rgb(153 102 255 / 0.15),
        rgb(8 12 22 / 0.96) 62%,
        rgb(51 204 255 / 0.07));
  }
  [data-page=get-started] .purchase-option[data-selected=true] {
    box-shadow: 0 0 0 1px var(--color-violet), 0 1.5rem 4rem rgb(72 42 130 / 0.18);
  }
  [data-page=get-started] .purchase-option__badge {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    padding: 0.3rem 0.55rem;
    border: 1px solid rgb(51 204 255 / 0.24);
    border-radius: var(--radius-pill);
    color: var(--color-cyan);
    background: rgb(51 204 255 / 0.07);
    font: 650 0.625rem / 1.4 var(--font-mono);
    text-transform: uppercase;
  }
  [data-page=get-started] .purchase-option h2 {
    margin-top: var(--space-3);
    font-size: 1.6rem;
  }
  [data-page=get-started] .purchase-price {
    margin-top: var(--space-8);
    color: var(--color-text);
    font-size: clamp(2.8rem, 2rem + 2vw, 4rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.05em;
  }
  [data-page=get-started] .purchase-price small {
    margin-left: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-body);
    font-weight: 400;
    letter-spacing: 0;
  }
  [data-page=get-started] .purchase-billing {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
  }
  [data-page=get-started] .purchase-option .c-button {
    width: 100%;
  }
  [data-page=get-started] .purchase-includes {
    max-width: 64rem;
    margin-top: var(--space-5);
    padding: var(--space-8);
  }
  [data-page=get-started] .purchase-features {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-5);
    list-style: none;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
  }
  [data-page=get-started] .purchase-features li,
  [data-page=get-started] .purchase-trust span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  [data-page=get-started] .purchase-features .c-icon {
    color: var(--color-cyan);
  }
  [data-page=get-started] .purchase-trust {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    padding-block: var(--space-10) var(--space-24);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
  }
  [data-page=get-started] .purchase-trust .c-icon {
    width: 0.875rem;
    height: 0.875rem;
  }
  [data-page=how-to] .guide-hero {
    padding-block: var(--space-32) var(--space-16);
  }
  [data-page=how-to] .guide-hero h1,
  [data-page=legal] .legal-hero h1 {
    margin-top: var(--space-4);
  }
  [data-page=how-to] .guide-hero h1 {
    font-size: 4.5rem;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
  }
  [data-page=how-to] .guide-hero > p:last-child,
  [data-page=legal] .legal-hero > p {
    max-width: 45rem;
    margin-top: var(--space-5);
    font-size: var(--text-lede);
  }
  [data-page=how-to] .success-banner {
    margin-bottom: var(--space-12);
    padding: var(--space-5);
    border: 1px solid rgb(54 211 153 / 0.26);
    border-radius: var(--radius-lg);
    background: rgb(54 211 153 / 0.07);
  }
  [data-page=how-to] .success-banner p {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
  }
  [data-page=how-to] .success-banner a {
    color: var(--color-cyan);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  [data-page=how-to] .guide-steps {
    display: grid;
    gap: var(--space-16);
    padding-bottom: var(--space-24);
  }
  [data-page=how-to] .guide-step {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-8);
  }
  [data-page=how-to] .guide-step__marker {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--space-4);
  }
  [data-page=how-to] .guide-step__marker > span {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-canvas);
    color: var(--color-violet);
  }
  [data-page=how-to] .guide-step__marker > span .c-icon {
    width: 2rem;
    height: 2rem;
  }
  [data-page=how-to] .guide-step__marker b {
    color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
    font: 700 2.5rem / 1 var(--font-body);
  }
  [data-page=how-to] .guide-step h2 {
    margin-top: var(--space-2);
    font-size: clamp(1.7rem, 1.45rem + 1vw, 2.5rem);
  }
  [data-page=how-to] .guide-step__card {
    margin-top: var(--space-5);
    padding: var(--space-6);
  }
  [data-page=how-to] .guide-step__card p + * {
    margin-top: var(--space-5);
  }
  [data-page=how-to] .guide-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  [data-page=how-to] .guide-points span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    font-size: var(--text-sm);
  }
  [data-page=how-to] .guide-points .c-icon {
    color: var(--color-cyan);
  }
  [data-page=how-to] .shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid rgb(153 102 255 / 0.28);
    border-radius: var(--radius-md);
    color: var(--color-violet-bright);
    background: rgb(153 102 255 / 0.07);
  }
  [data-page=how-to] .shortcut span {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  [data-page=how-to] .shortcut code {
    font: 700 var(--text-xs) var(--font-mono);
  }
  [data-page=legal] .legal-hero {
    margin-top: 9rem;
    padding: var(--space-8);
  }
  [data-page=legal] .legal-hero h1 {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
  }
  [data-page=legal] .legal-sections {
    display: grid;
    gap: var(--space-5);
    padding-bottom: var(--space-24);
  }
  [data-page=legal] .legal-section {
    padding: var(--space-8);
  }
  [data-page=legal] .legal-section h2 {
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  }
  [data-page=legal] .legal-section p {
    margin-top: var(--space-4);
  }
  ic-auth-app {
    box-sizing: border-box;
    min-height: 100vh;
    display: block;
    padding: 8rem 1.5rem 4rem;
    color: var(--color-text);
    font: 400 1rem / 1.5 var(--font-body);
  }
  ic-auth-app *,
  ic-auth-app *::before,
  ic-auth-app *::after {
    box-sizing: border-box;
  }
  ic-auth-app .auth {
    width: min(100%, 336px);
    margin: auto;
  }
  ic-auth-app .auth-header {
    margin-bottom: 2.5rem;
    text-align: center;
  }
  ic-auth-app h1,
  ic-auth-app p {
    margin: 0;
  }
  ic-auth-app h1 {
    margin-bottom: 0.5rem;
    font: 500 24px / 32px var(--font-display);
    letter-spacing: -0.025em;
  }
  ic-auth-app .intro {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: 1.21875rem;
  }
  ic-auth-app button,
  ic-auth-app input {
    font-family: var(--font-body);
  }
  ic-auth-app button {
    cursor: pointer;
  }
  ic-auth-app .providers {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  ic-auth-app .providers button {
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: rgb(255 255 255 / 0.02);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  ic-auth-app .providers button:hover {
    border-color: rgb(255 255 255 / 0.12);
    background: rgb(255 255 255 / 0.05);
  }
  ic-auth-app .providers svg {
    width: 1rem;
    height: 1rem;
    flex: none;
  }
  ic-auth-app .or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
    font-size: 0.6875rem;
    line-height: 1.03125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  ic-auth-app .or::before,
  ic-auth-app .or::after {
    height: 1px;
    flex: 1;
    background: rgb(255 255 255 / 0.06);
    content: "";
  }
  ic-auth-app form {
    display: grid;
    gap: 1rem;
  }
  ic-auth-app .field {
    display: grid;
    grid-template-rows: 1.5rem 2.75rem;
    gap: 0.375rem;
  }
  ic-auth-app .field label {
    align-self: center;
    margin-left: 0.125rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.03125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  ic-auth-app input {
    width: 100%;
    height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: rgb(255 255 255 / 0.02);
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  ic-auth-app input::placeholder {
    color: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
  }
  ic-auth-app input:focus {
    outline: 1px solid rgb(255 255 255 / 0.1);
    outline-offset: 0;
    border-color: rgb(255 255 255 / 0.15);
  }
  ic-auth-app .submit {
    width: 100%;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--radius-md);
    color: #000;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
  }
  ic-auth-app .submit svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  ic-auth-app .submit:disabled,
  ic-auth-app button:disabled {
    cursor: wait;
    opacity: 0.5;
  }
  ic-auth-app .auth-toggle {
    margin-top: 2rem;
    text-align: center;
  }
  ic-auth-app .auth-toggle p {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: 1.21875rem;
  }
  ic-auth-app .auth-toggle button,
  ic-auth-app .auth-toggle a {
    padding: 0;
    border: 0;
    color: var(--color-text);
    background: none;
    font-size: inherit;
    text-decoration: none;
  }
  ic-auth-app .auth-toggle button:hover,
  ic-auth-app .auth-toggle a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
  }
  ic-auth-app .notice,
  ic-auth-app .verify {
    margin: 0 0 1.5rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
  }
  ic-auth-app .error {
    border-left: 3px solid #fa8c8c;
    background: rgb(250 140 140 / 0.1);
  }
  ic-auth-app .success {
    border-left: 3px solid var(--color-success);
    background: rgb(54 211 153 / 0.09);
  }
  ic-auth-app .status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  ic-auth-app .verify {
    border: 1px solid rgb(153 102 255 / 0.2);
    background: rgb(153 102 255 / 0.06);
  }
  ic-auth-app .verify p {
    margin: 0.25rem 0;
    color: var(--color-text-muted);
  }
  ic-auth-app .verify button {
    padding: 0;
    border: 0;
    color: var(--color-violet);
    background: none;
    font-weight: 500;
  }
  [data-page=not-found] {
    padding-block: 9rem var(--space-24);
  }
  [data-page=not-found] h1 {
    margin-top: var(--space-4);
  }
  [data-page=not-found] p {
    margin-top: var(--space-5);
  }
  [data-page=not-found] .cluster {
    margin-top: var(--space-6);
  }
  @media (max-width: 63.999rem) {
    [data-page=home] .home-hero h1 {
      font-size: 3rem;
      line-height: 1;
    }
    [data-page=home] .c-section-heading h2 {
      font-size: 1.875rem;
      line-height: 2.25rem;
    }
  }
  @media (min-width: 64rem) {
    [data-page=home] .final-cta {
      min-height: 21.9375rem;
    }
    [data-page=home] .faq-section {
      min-height: 71.5rem;
    }
  }
  @media (max-width: 48rem) {
    [data-page=home] .benefit-grid,
    [data-page=home] .feature-grid {
      grid-template-columns: 1fr;
    }
    [data-page=home] .feature-card[data-span="2"] {
      grid-column: auto;
    }
    [data-page=home] .home-price {
      grid-template-columns: 1fr;
      gap: 1.8125rem;
      padding: var(--space-8);
      text-align: left;
    }
    [data-page=home] .home-price > div:first-child {
      transform: translateY(4px);
    }
    [data-page=home] .home-price .c-eyebrow {
      margin-inline: 0;
    }
    [data-page=blog] .featured-post {
      grid-template-columns: 1fr;
    }
    [data-page=blog] .featured-post__image {
      min-height: 18rem;
    }
    [data-page=blog] .post-grid {
      grid-template-columns: 1fr 1fr;
    }
    ic-auth-app input {
      font-size: 0.8125rem;
    }
  }
  @media (max-width: 24rem) {
    ic-auth-app {
      padding-inline: 1rem;
    }
  }
  @media (max-width: 42rem) {
    [data-page=home] .home-hero h1 {
      font-size: 2.25rem;
      line-height: 1.1;
    }
    [data-page=home] .home-hero__lede {
      font-size: 1.125rem;
    }
    [data-page=home] .final-cta h2,
    [data-page=home] .faq-section h2 {
      font-size: 1.875rem;
      line-height: 2.25rem;
    }
    [data-page=home] .ethics-card {
      padding: var(--space-8);
    }
    [data-page=home] .ethics-card h3 {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
    [data-page=home] .final-cta {
      min-height: 25.4453125rem;
    }
    [data-page=blog] .post-grid {
      grid-template-columns: 1fr;
    }
    [data-page=blog] .featured-post__copy {
      padding: var(--space-6);
    }
    [data-page=article] .article-hero {
      width: 100%;
    }
    [data-page=article] .article-hero img {
      border-radius: 0;
    }
    [data-page=article] .article-neighbors {
      grid-template-columns: 1fr;
    }
    [data-page=pricing] .pricing-hero {
      padding-top: 8rem;
    }
    [data-page=pricing] .pricing-focus {
      grid-template-columns: 1fr;
      padding: var(--space-6);
    }
    [data-page=pricing] .pricing-focus__price {
      text-align: left;
    }
    [data-page=pricing] .pricing-focus__price > p:first-child {
      justify-content: flex-start;
    }
    [data-page=pricing] .pricing-saving {
      margin-left: 0;
    }
    [data-page=pricing] .billing-switch {
      width: 100%;
    }
    [data-page=pricing] .billing-switch button {
      min-width: 0;
      padding-inline: var(--space-3);
    }
    [data-page=pricing] .pricing-assurance {
      align-items: center;
      flex-direction: column;
    }
    [data-page=get-started] .purchase-plans {
      grid-template-columns: 1fr;
    }
    [data-page=get-started] .purchase-option {
      min-height: 21rem;
      padding: var(--space-6);
    }
    [data-page=get-started] .purchase-includes {
      padding: var(--space-6);
    }
    [data-page=get-started] .purchase-features {
      grid-template-columns: 1fr;
    }
    [data-page=get-started] .purchase-trust {
      flex-direction: column;
      align-items: center;
    }
    [data-page=how-to] .guide-step {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }
    [data-page=how-to] .guide-points {
      grid-template-columns: 1fr;
    }
    [data-page=blog] .blog-hero {
      padding-block: 10rem var(--space-16);
    }
    [data-page=blog] .blog-hero h1,
    [data-page=how-to] .guide-hero h1 {
      font-size: 3rem;
    }
    [data-page=article] .article-header h1 {
      font-size: 2.25rem;
    }
    [data-page=article] .article-dek {
      font-size: 1.25rem;
    }
    [data-page=get-started] .purchase-hero h1 {
      font-size: 2.25rem;
    }
    [data-page=article] .article-header {
      padding-top: 9rem;
    }
    [data-page=how-to] .guide-hero {
      padding-top: var(--space-24);
    }
    [data-page=legal] .legal-hero {
      margin-top: var(--space-32);
    }
  }
}

/* site/native.css */