/* ==========================================================================
   dulus.ai — site.css
   Commercial landing layer on top of the shared liquid-glass design system.

   Editing this file cannot affect dulus.online, dulus.work, the API, the
   control plane or Fuel. There is no shared runtime between them.

   Everything raised on this page is the `.glass` material from core.css,
   driven through the same four variables (--glass-fill, --glass-rim,
   --lg-lift, --lg-sheen). Nothing here re-implements the material.
   ========================================================================== */

@layer site {
  :root {
    --accent: var(--dulus-orange);
    --accent-soft: var(--dulus-gold);
    --signal: var(--dulus-green);
    --nav-h: 80px;
  }

  [data-theme="dark"] {
    --mesh-1: rgba(255, 107, 31, 0.19);
    --mesh-2: rgba(255, 194, 51, 0.09);
    --mesh-3: rgba(255, 240, 200, 0.05);
  }

  /* ======================================================================
     HERO
     Three depth planes: the bird sits behind the glass, the product shot is
     the glass, the receipt floats in front of it.
     ====================================================================== */

  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: 0;
    /* core.css pulls <main> up under the floating nav capsule; this gives the
       height back so the copy starts where it always did. */
    padding-block: calc(var(--nav-h) + clamp(36px, 5vw, 72px))
      clamp(48px, 6vw, 88px);
    background:
      radial-gradient(
        circle at 78% 16%,
        color-mix(in oklab, var(--dulus-gold) 16%, transparent),
        transparent 32%
      ),
      radial-gradient(
        circle at 14% 76%,
        color-mix(in oklab, var(--accent) 12%, transparent),
        transparent 36%
      ),
      linear-gradient(180deg, var(--hero-wash) 0%, var(--bg) 100%);
  }

  .hero__grid {
    display: grid;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
    grid-template-columns: 1fr;
  }
  @media (min-width: 1060px) {
    .hero__grid {
      /* Copy-first balance. Old minmax(520px, …) on the shot crushed the
         title into a 480px column and forced multi-line wrap on every phrase. */
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
      gap: clamp(24px, 3.5vw, 44px);
      align-items: start;
    }
  }
  .hero__grid,
  .hero__grid > *,
  .hero__copy,
  .hero__shot {
    min-width: 0;
  }
  .hero__copy > * {
    min-width: 0;
    max-width: 100%;
  }

  .hero__copy {
    display: grid;
    gap: var(--s-5);
    align-content: start;
  }

  .hero__title {
    display: grid;
    gap: 0.02em;
    margin-top: var(--s-2);
    /* No ch-cap: EN line 2 ("should actually do something.") is ~29ch and a
       tight cap forced an ugly mid-phrase wrap even after the grid rebalance. */
    max-width: none;
    font-size: clamp(2.35rem, 4.1vw + 0.4rem, 3.55rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.06;
    text-wrap: balance;
  }
  .hero__title > span {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: manual;
  }

  /* Stops are tokens, not literals: the dark theme ends on cream, which would
     be invisible against the light background, so --warm-hi flips to a deep
     burnt orange there and the last two words stay readable. */
  .hero__title-accent {
    /* Solid first so engines without background-clip:text never go invisible. */
    color: var(--accent-ink);
    background: none;
  }
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero__title-accent {
      color: transparent;
      background: linear-gradient(
        98deg in oklab,
        var(--accent-ink) 0%,
        var(--gold-ink) 58%,
        var(--warm-hi) 100%
      );
      background-size: 200% 100%;
      background-position: var(--flow) 0;
      -webkit-background-clip: text;
      background-clip: text;
      animation: dulus-flow 12s var(--ease) infinite alternate;
    }
  }

  .hero__lede {
    max-width: 52ch;
  }
  .hero__lede code {
    color: var(--gold-ink);
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
  }

  .hero__cta2 {
    gap: var(--s-1);
    margin-top: calc(-1 * var(--s-2));
    padding-top: var(--s-1);
  }
  .hero__cta2 .btn--quiet {
    padding-inline: 0;
    margin-right: var(--s-4);
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: 5px;
  }
  .hero__cta2 .btn--quiet:hover {
    text-decoration-color: var(--accent);
  }

  .live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--dulus-green);
    box-shadow:
      0 0 0 5px rgba(0, 255, 163, 0.09),
      0 0 18px rgba(0, 255, 163, 0.55);
    animation: dulus-pulse 2.4s var(--ease) infinite;
  }

  /* Proof strip — four hairline-separated glass cells. */
  .hero__proof-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    max-width: 560px;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--line);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo);
  }
  @media (min-width: 720px) {
    .hero__proof-strip {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .hero__proof-strip li {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px 14px;
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .hero__proof-strip li {
      -webkit-backdrop-filter: blur(18px) saturate(165%);
      backdrop-filter: blur(18px) saturate(165%);
    }
  }
  .hero__proof-strip strong {
    overflow-wrap: anywhere;
    color: var(--gold-ink);
    font: 700 12px/1.3 var(--font-mono);
  }
  .hero__proof-strip span {
    color: var(--ink-3);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .hero__stats {
    margin-top: var(--s-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 560px) {
    .hero__stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .hero__stats .stat__num {
    font-size: var(--t-xl);
  }
  .hero__stats .stat__label {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .hero__shot {
    position: relative;
    padding-block: clamp(20px, 4vw, 48px) 40px;
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }

  .hero__bird {
    position: absolute;
    z-index: -1;
    width: min(70%, 430px);
    right: -4%;
    top: -11%;
    opacity: 0.42;
    filter: drop-shadow(0 20px 46px rgba(255, 128, 24, 0.22));
    animation: dulus-float 13s var(--ease) infinite;
  }

  /* The shot is tilted away from the reader, so the glass edge catches light
     down one side and the bird behind it visibly refracts. */
  .hero__shot .shot {
    transform: perspective(1400px) rotateY(-5deg) rotateX(1.2deg);
    transition: transform var(--dur-4) var(--ease-out);
  }
  .hero__shot:hover .shot {
    transform: perspective(1400px) rotateY(-2deg) rotateX(0.4deg);
  }

  .hero__receipt {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(330px, 78%);
    display: grid;
    gap: 4px;
    padding: 17px 19px;
    border-radius: var(--r-md);
    background: linear-gradient(
        color-mix(in oklab, var(--signal) 10%, var(--glass-tint)),
        transparent
      ),
      var(--glass);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.16),
      inset 0 0 0 1px color-mix(in oklab, var(--signal) 26%, transparent),
      0 24px 60px -26px rgba(0, 255, 163, 0.42);
    animation: dulus-float 9s var(--ease) infinite;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .hero__receipt {
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      backdrop-filter: blur(24px) saturate(180%);
    }
  }
  .hero__receipt > span {
    color: var(--green-ink);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hero__receipt > span i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
  }
  .hero__receipt strong {
    color: var(--ink);
    font-size: var(--t-sm);
  }
  .hero__receipt small {
    color: var(--ink-3);
    font-size: 10px;
  }

  /* ======================================================================
     SCREENSHOT FRAMES
     ====================================================================== */

  .shot {
    position: relative;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo),
      var(--shadow-3);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .shot {
      -webkit-backdrop-filter: blur(24px) saturate(175%);
      backdrop-filter: blur(24px) saturate(175%);
    }
  }

  .shot__bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 11px 15px;
    border-bottom: var(--bw) solid var(--line);
    background: var(--glass-tint);
  }

  .shot__url {
    margin-inline: auto;
    padding: 4px 13px;
    border-radius: var(--r-pill);
    background: var(--glass-tint);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
    font-size: var(--t-xs);
    color: var(--ink-3);
  }

  /* Aspect-ratio boxes keep the layout stable before the PNG arrives, so a
     missing screenshot reads as an empty product panel, never as a broken
     page. */
  .shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    background: var(--bg-3);
  }
  .shot--hero img {
    aspect-ratio: 16 / 10;
  }

  .shot__cap {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--bg) 70%, transparent);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 38%, transparent);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .shot__cap {
      -webkit-backdrop-filter: blur(14px) saturate(170%);
      backdrop-filter: blur(14px) saturate(170%);
    }
  }

  .shot__legend {
    display: grid;
    gap: 6px;
    padding: 19px;
    border-top: var(--bw) solid var(--line);
    background: var(--glass-tint);
  }
  .shot__legend strong {
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .shot__legend > span:last-child {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
  }

  .gallery {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: 1fr;
  }
  @media (min-width: 900px) {
    .gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .shot--wide {
      grid-column: 1 / -1;
    }
    .shot--wide img {
      aspect-ratio: 21 / 9;
    }
  }

  /* ======================================================================
     STRIPS
     ====================================================================== */

  .strip__label {
    font-size: var(--t-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--s-5);
  }
  .logo-strip--models span {
    font-family: var(--font-sans);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--ink-2);
  }
  .logo-strip--models span:hover {
    color: var(--ink);
  }

  /* ======================================================================
     ROUTER
     ====================================================================== */

  .router {
    display: grid;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
    grid-template-columns: 1fr;
  }
  @media (min-width: 980px) {
    .router {
      grid-template-columns: 1.1fr 0.9fr;
    }
  }

  .router__code {
    display: grid;
    gap: var(--s-5);
  }
  .router__copy {
    margin-left: auto;
  }

  .router__pre {
    display: block;
    padding: 19px;
    margin: 0;
    overflow-x: auto;
    font-size: var(--t-sm);
    line-height: 1.75;
  }
  .router__pre code {
    color: #dcd7d0;
    white-space: pre;
  }

  .router__catalog {
    display: grid;
    gap: var(--s-4);
    padding: clamp(18px, 2.2vw, 28px);
    border-radius: var(--r-lg);
    background: radial-gradient(
        130% 92% at 100% 0%,
        color-mix(in oklab, var(--accent) 12%, transparent) 0%,
        transparent 60%
      ),
      linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .router__catalog {
      -webkit-backdrop-filter: blur(22px) saturate(175%);
      backdrop-filter: blur(22px) saturate(175%);
    }
  }

  .router__catalogHead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-bottom: var(--s-3);
    border-bottom: var(--bw) solid var(--line);
  }

  .mlist {
    display: grid;
    gap: 0;
  }
  .mlist li {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr auto;
    gap: var(--s-3);
    align-items: baseline;
    padding: 11px 8px;
    margin-inline: -8px;
    border-radius: var(--r-sm);
    border-bottom: var(--bw) solid var(--line);
    font-size: var(--t-sm);
    transition: background var(--dur-2) var(--ease);
  }
  .mlist li:hover {
    background: var(--glass-tint);
  }
  .mlist li:last-child {
    border-bottom: 0;
  }
  .mlist__n {
    color: var(--ink);
    font-size: var(--t-xs);
    white-space: nowrap;
  }
  .mlist__d {
    color: var(--ink-3);
    font-size: var(--t-xs);
    min-width: 0;
  }
  .mlist__r {
    color: var(--accent);
    font-size: var(--t-xs);
  }
  .mlist--hi .mlist__n {
    color: var(--accent);
    font-weight: 700;
  }

  .router__note {
    font-size: var(--t-xs);
    color: var(--ink-4);
    line-height: 1.6;
  }
  .router__ticks li {
    font-size: var(--t-sm);
  }

  /* ======================================================================
     PLANS
     ====================================================================== */

  .plans {
    display: grid;
    gap: var(--s-4);
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) {
    .plans {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1320px) {
    .plans {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .plan {
    position: relative;
    gap: var(--s-4);
  }
  .plan--hi {
    --glass-fill: color-mix(in oklab, var(--accent) 10%, var(--glass-tint));
    background: radial-gradient(
        130% 108% at 100% 0%,
        color-mix(in oklab, var(--accent) 16%, transparent) 0%,
        transparent 62%
      ),
      linear-gradient(var(--glass-fill), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 32%, transparent),
      0 20px 60px -28px rgba(255, 107, 31, 0.55);
  }

  .plan__tag {
    position: absolute;
    top: 0;
    right: 20px;
    transform: translateY(-50%);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: linear-gradient(
      165deg,
      color-mix(in oklab, var(--accent-soft) 55%, white 6%),
      var(--accent)
    );
    box-shadow: 0 8px 22px -10px rgba(255, 107, 31, 0.9);
    color: #12100e;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .plan__head {
    display: grid;
    gap: 8px;
    justify-items: start;
  }

  .plan__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .plan__price--custom {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  }

  .plan__unit {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-2);
  }
  .plan__per {
    color: var(--ink-4);
  }
  .plan__usd {
    font-size: var(--t-xs);
    color: var(--ink-2);
  }

  .plan__offer {
    padding: 6px 12px;
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--signal) 11%, transparent);
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--signal) 36%, transparent);
    font-size: var(--t-xs);
    color: var(--signal-ink);
  }
  .plan__offer strong {
    font-size: var(--t-sm);
  }

  .plan__pitch {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
  }

  .plan__list {
    margin-block: 0 auto;
  }
  .plan__list li {
    font-size: var(--t-xs);
  }

  .plans__note {
    margin-top: var(--s-6);
    font-size: var(--t-xs);
    max-width: 70ch;
    margin-inline: auto;
  }

  /* ======================================================================
     DOWNLOADS
     ====================================================================== */

  .dl {
    display: grid;
    gap: var(--s-5);
    align-items: start;
    grid-template-columns: 1fr;
    min-width: 0;
  }
  @media (min-width: 980px) {
    .dl {
      grid-template-columns: 1.15fr 0.85fr;
    }
  }

  .dl__main {
    display: grid;
    gap: var(--s-4);
    min-width: 0;
    max-width: 100%;
    padding: clamp(22px, 3vw, 36px);
    border-radius: var(--r-xl);
    background: radial-gradient(
        130% 100% at 100% 0%,
        color-mix(in oklab, var(--accent) 15%, transparent) 0%,
        transparent 62%
      ),
      linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent),
      var(--shadow-2);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .dl__main {
      -webkit-backdrop-filter: blur(26px) saturate(180%);
      backdrop-filter: blur(26px) saturate(180%);
    }
  }

  .dl__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
  }
  .dl__sub {
    font-size: var(--t-xs);
    margin-top: 4px;
  }
  .dl__tags {
    gap: 6px;
  }

  .dl__notes {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.65;
    max-width: 70ch;
  }

  .dl__cta {
    justify-self: start;
  }

  .dl__sum {
    display: grid;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    padding: 15px 17px;
    border-radius: var(--r-md);
    background: var(--sunken);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
  }
  .dl__sumLabel {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .dl__hash {
    font-size: 11px;
    color: var(--ink-3);
    word-break: break-all;
    line-height: 1.5;
  }
  .dl__sum .copy-btn {
    justify-self: start;
  }

  .dl__side {
    display: grid;
    gap: var(--s-4);
    min-width: 0;
    max-width: 100%;
  }
  .dl__alt {
    gap: var(--s-3);
    min-width: 0;
    max-width: 100%;
  }
  .dl__altHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
  }
  .dl__cli {
    min-width: 0;
    max-width: 100%;
  }
  .dl__cli code {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ======================================================================
     FUEL PROOF — deposit → ledger → key → call → settlement
     ====================================================================== */

  .fuel-proof {
    position: relative;
    border-block: var(--bw) solid var(--line);
    background: radial-gradient(
        circle at 92% 10%,
        color-mix(in oklab, var(--dulus-gold) 10%, transparent),
        transparent 32%
      ),
      linear-gradient(180deg, var(--bg-1), var(--bg));
  }

  .fuel-proof__head {
    display: grid;
    gap: var(--s-5);
    align-items: end;
    margin-bottom: clamp(38px, 5vw, 64px);
  }
  .fuel-proof__head .h2 {
    max-width: 13ch;
    margin-top: var(--s-4);
  }
  @media (min-width: 900px) {
    .fuel-proof__head {
      grid-template-columns: 1.1fr 0.9fr;
    }
  }

  /* The 1px gaps are the conduit: a gold→green gradient the glass cells sit
     on top of, so the flow direction reads before any text is parsed. */
  .fuel-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: linear-gradient(
      90deg,
      color-mix(in oklab, var(--dulus-gold) 42%, transparent),
      var(--line) 45%,
      color-mix(in oklab, var(--signal) 32%, transparent)
    );
  }

  .fuel-step {
    position: relative;
    min-height: 178px;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: clamp(18px, 2.2vw, 28px);
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    transition: background var(--dur-2) var(--ease);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .fuel-step {
      -webkit-backdrop-filter: blur(20px) saturate(170%);
      backdrop-filter: blur(20px) saturate(170%);
    }
  }
  .fuel-step:hover {
    background: linear-gradient(var(--glass-tint-hi), transparent),
      var(--glass);
  }

  .fuel-step:not(:last-child)::after {
    content: "→";
    position: absolute;
    z-index: 2;
    right: -10px;
    top: 27px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--gold-ink);
    background: var(--bg-1);
    font-size: 12px;
  }

  .fuel-step__num {
    color: var(--gold-ink);
    font: 700 10px/1 var(--font-mono);
    letter-spacing: 0.15em;
  }
  .fuel-step strong {
    font-size: var(--t-lg);
  }
  .fuel-step p {
    color: var(--ink-3);
    font-size: var(--t-sm);
    line-height: 1.55;
  }

  .proof-grid {
    display: grid;
    gap: clamp(24px, 4vw, 48px);
    align-items: stretch;
    margin-top: clamp(36px, 5vw, 64px);
  }
  @media (min-width: 940px) {
    .proof-grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
  }

  .proof-terminal {
    min-width: 0;
  }
  .proof-terminal .terminal__body {
    max-width: 100%;
    padding: clamp(18px, 3vw, 32px);
    overflow-x: auto;
    line-height: 1.75;
  }
  .proof-terminal .terminal__body code {
    color: #e5dfd5;
    white-space: pre;
  }
  .proof-terminal__result {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 13px 18px;
    border-top: 1px solid rgba(0, 255, 163, 0.16);
    color: var(--dulus-green);
    background: rgba(0, 255, 163, 0.05);
    font-size: 10px;
  }

  .proof-card {
    display: grid;
    align-content: start;
    gap: var(--s-5);
    padding: clamp(24px, 4vw, 44px);
    border-radius: var(--r-xl);
    background: linear-gradient(
        148deg,
        color-mix(in oklab, var(--dulus-gold) 9%, transparent),
        color-mix(in oklab, var(--accent) 3%, transparent)
      ),
      var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px color-mix(in oklab, var(--dulus-gold) 22%, transparent);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .proof-card {
      -webkit-backdrop-filter: blur(24px) saturate(175%);
      backdrop-filter: blur(24px) saturate(175%);
    }
  }
  .proof-card h3 {
    max-width: 18ch;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
  }
  .proof-card h3 code {
    color: var(--gold-ink);
    font-size: 0.74em;
  }
  .proof-card > p {
    color: var(--ink-2);
  }
  .proof-list {
    display: grid;
    gap: 13px;
  }
  .proof-list li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    color: var(--ink-2);
    font-size: var(--t-sm);
  }
  .proof-list li > span:first-child {
    color: var(--green-ink);
  }
  .proof-card .btn {
    justify-self: start;
  }

  /* ======================================================================
     BUSINESS / WHATSAPP
     ====================================================================== */

  .bz__head {
    margin-bottom: 0;
  }

  .wa {
    align-self: start;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo),
      var(--shadow-3);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .wa {
      -webkit-backdrop-filter: blur(24px) saturate(175%);
      backdrop-filter: blur(24px) saturate(175%);
    }
  }

  .wa__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: var(--bw) solid var(--line);
    background: var(--glass-tint);
  }
  .wa__bar img {
    border-radius: 50%;
  }
  .wa__id {
    display: grid;
    gap: 1px;
  }
  .wa__id strong {
    font-size: var(--t-sm);
    font-weight: 600;
  }
  .wa__id span {
    font-size: 10px;
  }

  .wa__body {
    display: grid;
    gap: 10px;
    padding: 19px 17px;
    background: radial-gradient(
      80% 60% at 100% 0%,
      color-mix(in oklab, var(--signal) 6%, transparent) 0%,
      transparent 70%
    );
  }

  .bubble {
    max-width: 88%;
    padding: 11px 15px;
    border-radius: 16px 16px 16px 5px;
    background: var(--glass-tint);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .bubble--me {
    margin-left: auto;
    border-radius: 16px 16px 5px 16px;
    background: color-mix(in oklab, var(--signal) 13%, transparent);
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--signal) 28%, transparent);
    color: var(--ink);
  }

  /* ======================================================================
     TOKEN
     ====================================================================== */

  .token {
    display: grid;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
    grid-template-columns: 1fr;
  }
  @media (min-width: 980px) {
    .token {
      grid-template-columns: 0.9fr 1.1fr;
    }
  }

  .token__side {
    display: grid;
    gap: var(--s-5);
  }

  .token__rows {
    display: grid;
    gap: 1px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--line);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
  }
  .token__rows > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--s-3);
    padding: 14px 17px;
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    font-size: var(--t-sm);
    align-items: center;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .token__rows > div {
      -webkit-backdrop-filter: blur(18px) saturate(165%);
      backdrop-filter: blur(18px) saturate(165%);
    }
  }
  .token__rows dt {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .token__rows dd {
    min-width: 0;
  }

  .token__addr {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .token__addr code {
    font-size: 11px;
    color: var(--ink-2);
    word-break: break-all;
  }

  .token__cta {
    gap: var(--s-3);
  }

  .token__chart {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-1);
    box-shadow:
      inset 0 0 0 1px var(--glass-edge-lo),
      var(--shadow-2);
  }
  .token__chart iframe {
    display: block;
    width: 100%;
    height: clamp(360px, 46vw, 480px);
    border: 0;
  }

  .note {
    padding: 13px 15px;
    border-left: 2px solid var(--dulus-yellow);
    background: color-mix(in oklab, var(--dulus-yellow) 9%, transparent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-2);
  }

  /* ======================================================================
     CTA + FOOTER
     ====================================================================== */

  .cta {
    position: relative;
    overflow: hidden;
    border-top: var(--bw) solid var(--line);
  }
  .cta__title {
    margin-bottom: var(--s-4);
  }
  .cta__row {
    justify-content: center;
    margin-top: var(--s-6);
  }

  .footer__blurb {
    margin-block: var(--s-4);
    max-width: 40ch;
  }
  .footer__social {
    gap: var(--s-2);
  }
  .footer__legal {
    max-width: 62ch;
  }

  /* ======================================================================
     NARROW VIEWPORTS
     ====================================================================== */

  @media (max-width: 780px) {
    .hero {
      min-height: 0;
      /* Still has to clear the floating capsule that <main> is pulled under. */
      padding-top: calc(var(--nav-h) + 20px);
    }
    .hero__title {
      max-width: none;
      font-size: clamp(2.15rem, 9.5vw, 3.1rem);
      letter-spacing: -0.04em;
      line-height: 1.08;
    }
    .hero__cta .btn {
      width: 100%;
    }
    .hero__proof-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hero__shot {
      padding-top: 58px;
      padding-bottom: 0;
    }
    .hero__bird {
      width: 67%;
      top: 0;
      right: -4%;
    }
    .hero__shot .shot,
    .hero__shot:hover .shot {
      transform: none;
    }
    .hero__receipt {
      position: relative;
      right: auto;
      width: calc(100% - 24px);
      margin: -18px 12px 0;
      animation: none;
    }
    .fuel-flow {
      grid-template-columns: 1fr;
    }
    .fuel-step {
      min-height: 0;
    }
    .fuel-step:not(:last-child)::after {
      content: "↓";
      right: 20px;
      top: auto;
      bottom: -11px;
    }
  }

  @media (max-width: 380px) {
    .hero__title {
      font-size: 2.42rem;
    }
    .hero__cta2 {
      display: grid;
    }
    .hero__proof-strip {
      grid-template-columns: 1fr 1fr;
    }
    .shot__url {
      max-width: 165px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}