:root {
        --bg: #fbf8f3;
        --panel: #ffffff;
        --text: #171717;
        --muted: #6a625b;
        --border: rgba(123, 92, 44, 0.18);
        --accent: #b8741a;
        --link: #b8741a;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: Inter, ui-sans-serif, system-ui, sans-serif;
        color: var(--text);
        background: linear-gradient(180deg, #fffdfa 0%, var(--bg) 100%);
      }
      .page {
        max-width: 1080px;
        margin: 0 auto;
        padding: 28px 24px 96px;
      }
      .breadcrumbs {
        margin: 0 0 48px;
        color: var(--muted);
        font: 600 0.95rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .breadcrumbs a {
        color: inherit;
        text-decoration: none;
      }
      .static-search {
        max-width: 860px;
        margin: 0 auto 36px;
      }
      .static-search-label {
        display: block;
        margin-bottom: 10px;
        color: var(--muted);
        font: 700 0.82rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .static-search-row {
        display: flex;
        gap: 12px;
      }
      .static-search-input {
        flex: 1;
        min-width: 0;
        height: 54px;
        padding: 0 18px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--text);
        font: 500 1rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .static-search-button {
        height: 54px;
        padding: 0 22px;
        border: 0;
        border-radius: 999px;
        background: var(--text);
        color: #fff;
        font: 700 0.98rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
        cursor: pointer;
      }
      .eyebrow {
        margin: 0 0 24px;
        color: var(--accent);
        font: 700 0.9rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        text-align: center;
      }
      h1 {
        margin: 0 auto 22px;
        max-width: 9ch;
        font-size: clamp(3.8rem, 9vw, 6.2rem);
        font-weight: 800;
        line-height: 0.95;
        letter-spacing: -0.05em;
        text-align: center;
      }
      .summary {
        margin: 0 auto 44px;
        color: var(--muted);
        font-size: 1.2rem;
        line-height: 1.72;
        max-width: 44rem;
        text-align: center;
      }
      .hero-media {
        margin: 0 auto 56px;
        max-width: 860px;
      }
      .hero-media-frame {
        position: relative;
        overflow: hidden;
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, #5d463e 0%, #c5865d 18%, #c5865d 82%, #5d463e 100%);
        border-radius: 2px;
      }
      .hero-media-frame::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0,0,0,0.28), transparent 12%, transparent 88%, rgba(0,0,0,0.28));
      }
      .hero-media-frame img {
        position: relative;
        z-index: 1;
        width: auto;
        max-width: min(280px, 42vw);
        max-height: 220px;
        object-fit: contain;
      }
      .hero-media figcaption,
      .gallery-card figcaption {
        margin-top: 14px;
        color: var(--muted);
        font: 0.98rem/1.65 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .meta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin: 0 auto 42px;
        max-width: 760px;
      }
      .meta-card {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 16px 16px 18px;
      }
      .meta-card dt {
        margin: 0 0 6px;
        color: var(--muted);
        font: 700 0.82rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .meta-card dd {
        margin: 0;
        font: 700 1rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .content {
        display: block;
        max-width: 860px;
        margin: 0 auto;
      }
      .section {
        margin-top: 56px;
      }
      .section h2 {
        margin: 0 0 18px;
        font-size: 1.05rem;
        font-weight: 800;
      }
      .section p {
        margin: 0;
        color: #222;
        line-height: 1.72;
        font-size: 1.05rem;
      }
      .bullet-list {
        margin: 0;
        padding-left: 20px;
        line-height: 1.72;
        font-size: 1.05rem;
      }
      .notice {
        color: var(--muted);
        font: 0.98rem/1.7 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 18px;
      }
      .footer-links a,
      .hero-media a {
        text-decoration: none;
        color: var(--link);
      }
      .media-grid {
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        margin-bottom: 18px;
      }
      .gallery-card {
        margin: 0;
      }
      .gallery-card img {
        display: block;
        width: 100%;
      }
      .adjacent-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin: 56px auto 0;
        max-width: 860px;
      }
      .store-cta {
        max-width: 860px;
        margin: 72px auto 0;
        padding: 28px;
        border: 1px solid var(--border);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.9);
        text-align: center;
      }
      .store-cta h2 {
        margin: 0 0 12px;
        font-size: 1.3rem;
      }
      .store-badges {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 18px;
      }
      .store-badges img {
        display: block;
        height: 48px;
        width: auto;
      }
      .site-footer {
        max-width: 860px;
        margin: 24px auto 0;
        padding: 0 8px;
        color: var(--muted);
        font-size: 0.94rem;
        line-height: 1.7;
        text-align: center;
      }
      .site-footer p {
        margin: 8px 0;
      }
      .site-footer a {
        color: var(--link);
        text-decoration: none;
      }
      .adjacent-link {
        display: block;
        padding: 18px 20px;
        border: 1px solid var(--border);
        border-radius: 18px;
        color: inherit;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.82);
      }
      .adjacent-label {
        display: block;
        margin-bottom: 8px;
        color: var(--muted);
        font: 700 0.78rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .adjacent-link strong {
        display: block;
        font-size: 1.1rem;
        line-height: 1.35;
      }
      .adjacent-meta {
        display: block;
        margin-top: 8px;
        color: var(--muted);
        font-size: 0.95rem;
      }
      @media (max-width: 820px) {
        .page {
          padding: 20px 18px 72px;
        }
        .meta-grid,
        .adjacent-nav,
        .static-search-row {
          grid-template-columns: 1fr;
          flex-direction: column;
        }
        h1 {
          font-size: clamp(3rem, 18vw, 4.5rem);
        }
        .hero-media-frame {
          min-height: 220px;
        }
      }
      
      .fallback-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        align-items: center;
        margin: 0 0 28px;
        border-bottom: 1px solid var(--border);
        font: 700 0.92rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .fallback-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 46px;
        margin: 0 -1px -1px 0;
        padding: 0 18px;
        border: 1px solid var(--border);
        background: #242424;
        color: var(--link);
        text-decoration: none;
      }
      .fallback-nav a:hover { background: #28241c; box-shadow: inset 0 -2px 0 var(--accent); }
      .noscript-notice {
        display: block;
        background-color: #e74c3c;
        color: #fff;
        font-weight: 700;
        text-align: center;
        padding: 16px 12px;
      }
      .noscript-notice p { margin: 0; }
      .noscript-notice a { color: #fff; text-decoration: none; font-weight: 700; }
      .noscript-notice a span { text-decoration: underline; }
      .noscript-notice a:hover { color: #ddd; }
      
      .sample-dna .dna-beta {
        margin-left: 8px;
        padding: 3px 8px;
        border-radius: 999px;
        background: rgba(127, 127, 127, 0.18);
        color: var(--accent);
        font: 700 0.62em/1 Inter, ui-sans-serif, system-ui, sans-serif;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        vertical-align: middle;
      }
      .dna-detected {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 18px 0 0;
        padding: 0;
        list-style: none;
      }
      .dna-detected li {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--panel);
      }
      .dna-detected span {
        color: var(--muted);
        font: 500 0.86rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .dna-heading {
        margin: 26px 0 0;
        font: 700 1.02rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .dna-clusters {
        display: grid;
        gap: 16px;
        margin-top: 16px;
      }
      .dna-cluster {
        padding: 16px 18px;
        border: 1px solid var(--border);
        border-radius: 18px;
        /* A neutral tint over the panel token so the cluster reads one step
           back from the sample cards inside it on both the light alert pages
           and the dark homepage. */
        background: linear-gradient(rgba(127, 127, 127, 0.08), rgba(127, 127, 127, 0.08)), var(--panel);
      }
      .dna-cluster h3,
      .dna-cluster h4 {
        margin: 0;
        font: 700 1rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .dna-cluster-meta {
        margin: 4px 0 0;
        color: var(--accent);
        font: 700 0.84rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .dna-cluster-hint {
        margin: 6px 0 0;
        color: var(--muted);
        font: 500 0.92rem/1.6 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .dna-samples {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 10px;
        margin: 14px 0 0;
        padding: 0;
        list-style: none;
      }
      .dna-sample {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--panel);
        color: inherit;
        text-decoration: none;
      }
      .dna-sample-meta {
        color: var(--muted);
        font: 500 0.84rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
      }
      .dna-explorer-link {
        margin: 18px 0 0;
      }
      .dna-explorer-link a {
        color: var(--link);
        font-weight: 700;
      }