:root {
        color-scheme: light;
        font-family: var(--betterloop-font-primary);
        background: #000;
      }

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

      html,
      body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        overflow-x: hidden;
        background: var(--betterloop-bg-canvas);
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: 32px;
        overflow-y: auto;
      }

      body { overflow-y: visible; }

      body {
        color: #fff;
        font-family: var(--betterloop-font-primary);
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
      }

      button,
      a { color: inherit; font: inherit; }
      button { border: 0; cursor: pointer; }
      a { text-decoration: none; }
      button:focus-visible,
      a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

      .viewport {
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100svh;
        isolation: isolate;
        overflow: hidden;
        background: #000;
      }

      .screen {
        --gutter-start: clamp(36px, 4.177vw, 96px);
        --gutter-end: clamp(36px, 4.04vw, 96px);
        --header-top: clamp(20px, 2.264vh, 30px);
        --hero-bottom: clamp(34px, 5.19vh, 64px);
        --display-size: clamp(58px, 7.64vh, 88px);
        --display-leading: clamp(72px, 9.34vh, 106px);
        --copy-size: clamp(14px, 1.7vh, 19px);
        --copy-leading: clamp(19px, 2.17vh, 24px);
        --title-copy-gap: clamp(15px, 2.08vh, 24px);
        --copy-cta-gap: clamp(24px, 3.11vh, 36px);
        --cta-width: clamp(260px, 26vh, 290px);
        --cta-height: clamp(38px, 3.96vh, 44px);
        --primary-control-font-size: clamp(15px, 1.66vh, 18px);
        --control-baseline-shift: clamp(1px, 0.19vh, 2px);
        --copy-optical-shift: clamp(0px, 0.1vh, 1px);
        --watch-baseline-shift: clamp(2px, 0.38vh, 4px);
        --card-width: clamp(150px, 18.96vh, 215px);
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        background: #000;
      }

      .screen::before {
        position: absolute;
        inset: 0;
        z-index: -2;
        content: "";
        pointer-events: none;
        background:
          linear-gradient(180deg, rgba(0,0,0,.03), transparent 24%, transparent 82%, rgba(0,0,0,.05)),
          radial-gradient(ellipse at 44% 54%, transparent 30%, rgba(0,0,0,.055) 100%);
      }

      .screen::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        content: "";
        pointer-events: none;
        background: linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 48%, rgba(0,0,0,.18) 100%);
      }

      .background {
        position: absolute;
        inset: 0;
        z-index: -3;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        pointer-events: none;
        user-select: none;
      }

      .header {
        position: absolute;
        z-index: 10;
        inset: var(--header-top) var(--gutter-end) auto var(--gutter-start);
        display: flex;
        height: 48px;
        align-items: flex-start;
        white-space: nowrap;
      }

      .brand {
        position: relative;
        top: 10px;
        display: block;
        width: 25px;
        height: 25px;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
      }
      .brand svg { display: block; width: 100%; height: 100%; }

      .header-actions {
        display: flex;
        flex: 1;
        align-items: flex-start;
        min-width: 0;
      }

      .nav {
        position: relative;
        top: 9px;
        display: flex;
        align-items: flex-start;
        gap: clamp(27px, 2.55vw, 43px);
        margin-left: clamp(36px, 3.03vw, 48px);
      }

      .nav-link {
        position: relative;
        font-size: 16px;
        font-weight: 430;
        letter-spacing: -.36px;
        line-height: 24px;
        color: rgba(229,229,230,.77);
        text-shadow: 0 1px 3px rgba(0,0,0,.55);
      }
      .nav-link:first-child { top: -3px; }
      .nav-link:nth-child(4) { margin-left: 1px; }
      .nav-link.active { color: #fff; }
      .nav-link.active::after {
        position: absolute;
        top: calc(100% + 3px);
        left: 0;
        width: 44px;
        height: 2px;
        content: "";
        background: rgba(255,255,255,.82);
      }

      .time-panel {
        position: relative;
        display: flex;
        width: 244px;
        height: 48px;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        margin-left: auto;
        padding-left: 12px;
        border-left: 2px solid rgba(230,230,230,.52);
        text-shadow: 0 1px 3px rgba(0,0,0,.68);
      }
      .time-panel-label { font-size: 14px; font-weight: 420; line-height: 17px; color: rgba(240,240,240,.77); }
      .time-panel-value { font-size: 14px; font-weight: 440; line-height: 18px; color: rgba(255,255,255,.93); }

      .sign-up {
        display: inline-grid;
        width: 116px;
        height: 42px;
        place-items: center;
        margin-left: clamp(20px, 1.95vw, 29px);
        border-radius: 7px;
        background: #fff;
        color: #101010;
        font-size: 16px;
        font-weight: 460;
        letter-spacing: -.34px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 1px 5px rgba(0,0,0,.34);
      }

      .menu-toggle {
        position: relative;
        display: none;
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 11px;
        background: linear-gradient(145deg, rgba(26,34,36,.72), rgba(8,16,18,.82));
        box-shadow: 0 2px 10px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.035) inset;
        backdrop-filter: blur(14px) saturate(108%);
      }
      .menu-toggle svg { width: 21px; height: 21px; overflow: visible; }
      .menu-line {
        transition: transform 260ms cubic-bezier(.16,1,.3,1), opacity 180ms ease;
        transform-origin: 12px 12px;
      }
      .header.menu-open .menu-line:first-child { transform: translateY(3.5px) rotate(45deg); }
      .header.menu-open .menu-line:last-child { transform: translateY(-3.5px) rotate(-45deg); }

      .hero { position: absolute; inset: 0; }
      .hero-content {
        position: absolute;
        z-index: 2;
        bottom: var(--hero-bottom);
        left: var(--gutter-start);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
        font-family: var(--betterloop-font-primary);
        font-size: var(--display-size);
        font-optical-sizing: auto;
        font-weight: 500;
        letter-spacing: -.02em;
        line-height: var(--display-leading);
        white-space: nowrap;
        text-shadow: 0 2px 2px rgba(0,0,0,.44);
        -webkit-text-stroke: .12px currentColor;
      }

      .line { display: block; overflow: hidden; transform-origin: left center; }
      .line-one { color: #fff; transform: scaleX(1); }
      .line-two { color: rgba(211,207,207,.78); transform: scaleX(1); }
      .line-reveal { display: block; }

      .hero-copy {
        position: relative;
        left: 1px;
        width: clamp(420px, 34vw, 538px);
        margin: var(--title-copy-gap) 0 0;
        transform: translateY(var(--copy-optical-shift));
        color: rgba(226,229,228,.84);
        font-size: var(--copy-size);
        font-weight: 350;
        letter-spacing: .13px;
        line-height: var(--copy-leading);
        text-shadow: 0 1px 3px rgba(0,0,0,.7);
      }

      .primary-cta {
        position: relative;
        width: var(--cta-width);
        height: var(--cta-height);
        margin-top: var(--copy-cta-gap);
        overflow: hidden;
        border-radius: 7px;
        background: #fff;
        color: #111;
        box-shadow: 0 1px 5px rgba(0,0,0,.38);
      }
      .primary-cta .label {
        position: absolute;
        top: 50%;
        left: 7.25%;
        transform: translateY(calc(-50% + var(--control-baseline-shift)));
        font-size: var(--primary-control-font-size);
        font-weight: 450;
        letter-spacing: -.3px;
        white-space: nowrap;
      }
      .arrow-box {
        position: absolute;
        top: 14.286%;
        right: 3.125%;
        display: grid;
        width: 18.25%;
        height: 71.429%;
        place-items: center;
        border-radius: 7px;
        background: #070909;
      }
      .arrow-box svg { width: 14px; height: 14px; }

      .demo-card {
        position: absolute;
        z-index: 2;
        right: var(--gutter-end);
        bottom: var(--hero-bottom);
        width: var(--card-width);
        aspect-ratio: 201 / 265;
        container-type: inline-size;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: clamp(12px, 1.52vh, 18px);
        background: linear-gradient(145deg, rgba(24,22,20,.80), rgba(5,12,14,.86));
        box-shadow: 0 2px 10px rgba(0,0,0,.44), 0 0 0 3px rgba(255,255,255,.035) inset, 0 0 0 1px rgba(0,0,0,.9);
        backdrop-filter: blur(14px) saturate(108%);
      }
      .demo-visual {
        position: absolute;
        top: 4cqw;
        left: 3.5cqw;
        width: 92.5cqw;
        height: 92cqw;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 4cqw;
        background: #101a1e;
      }
      .demo-visual img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(.89) saturate(.93) contrast(1.03);
        transition: transform 700ms cubic-bezier(.16,1,.3,1);
      }
      .play {
        position: absolute;
        top: 50%;
        left: 50%;
        display: grid;
        width: 29cqw;
        aspect-ratio: 1;
        place-items: center;
        padding: 0;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(255,255,255,.34);
        border-radius: 50%;
        background: rgba(3,5,7,.47);
        box-shadow: 0 3px 14px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035);
        backdrop-filter: blur(4px);
      }
      .play svg { width: 32%; height: 32%; margin-left: 6%; }
      .watch-button {
        position: absolute;
        right: 3.5cqw;
        bottom: 4cqw;
        left: 3.5cqw;
        display: grid;
        height: 27cqw;
        place-items: center;
        padding: var(--watch-baseline-shift) 0 0;
        border: 1px solid rgba(255,255,255,.21);
        border-radius: 3.4cqw;
        background: linear-gradient(145deg, rgba(26,34,36,.86), rgba(16,29,33,.9));
        color: rgba(249,250,250,.94);
        font-size: clamp(13px, 8.6cqw, 18px);
        font-weight: 430;
        letter-spacing: -.35px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 4px rgba(0,0,0,.3);
      }
      .demo-card.is-playing .demo-visual img { transform: scale(1.08); }
      .demo-card.is-playing .play { background: rgba(232,239,240,.84); }
      .demo-card.is-playing .play polygon { fill: #0b1113; }

      .video-modal {
        width: min(92vw, calc(84vh * 16 / 9));
        max-width: none;
        max-height: none;
        padding: 0;
        overflow: visible;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 18px;
        background: #000;
        box-shadow: 0 24px 80px rgba(0,0,0,.6);
      }
      .video-modal::backdrop { background: rgba(2,4,5,.82); backdrop-filter: blur(6px); }
      .video-modal video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 17px; background: #000; }
      .video-close {
        position: absolute;
        top: -52px;
        right: 0;
        display: grid;
        width: 40px;
        height: 40px;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(255,255,255,.3);
        border-radius: 50%;
        background: rgba(3,5,7,.6);
        cursor: pointer;
      }
      .video-close svg { width: 16px; height: 16px; }
      @media (max-width: 640px) {
        .video-modal { width: 94vw; }
        .video-close { top: -48px; }
      }

      .site-section,
      .pilot-section,
      .site-footer {
        position: relative;
        z-index: 1;
        font-family: var(--betterloop-font-primary);
      }

      .site-section { color: var(--betterloop-text-default); background: var(--betterloop-bg-canvas); }
      .pilot-section, .site-footer { color: #fff; background: var(--betterloop-bg-inverse); }

      .site-section {
        min-height: min(940px, 100svh);
        overflow: hidden;
        padding: clamp(96px, 10vw, 148px) clamp(22px, 6vw, 88px);
        border-top: 1px solid rgba(24,24,24,.1);
        scroll-margin-top: 0;
      }

      .site-section::before {
        position: absolute;
        top: 50%;
        right: clamp(14px, 2.5vw, 34px);
        color: rgba(24,24,24,.2);
        content: attr(data-mark);
        font-size: 10px;
        font-weight: 560;
        letter-spacing: .42em;
        line-height: 1;
        writing-mode: vertical-rl;
        transform: translateY(-50%);
      }

      .site-section::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        content: "";
        pointer-events: none;
        background: radial-gradient(ellipse at 98% 45%, rgba(var(--section-glow), .07), transparent 34%),
          radial-gradient(ellipse at 10% 92%, rgba(199,0,54,.05), transparent 34%),
          linear-gradient(180deg, rgba(24,24,24,.015), transparent 24%, transparent 78%, rgba(24,24,24,.018));
      }

      .problem-section { --section-glow: 199,0,54; }
      .platform-section { --section-glow: 199,0,54; background: var(--betterloop-bg-surface); }
      .governance-section { --section-glow: 199,0,54; }
      .learning-section { --section-glow: 199,0,54; background: var(--betterloop-bg-surface); }
      .benchmarks-section { --section-glow: 199,0,54; }
      .security-section { --section-glow: 199,0,54; background: var(--betterloop-bg-surface); }

      .section-inner {
        position: relative;
        z-index: 1;
        width: min(1200px, 100%);
        margin: 0 auto;
      }

      .section-heading {
        max-width: 930px;
        margin-bottom: clamp(50px, 7vw, 92px);
      }

      .section-heading-centered {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
      }

      .section-eyebrow {
        display: inline-flex;
        min-height: 31px;
        align-items: center;
        margin: 0 0 22px;
        padding: 0 13px;
        border: 1px solid rgba(24,24,24,.18);
        border-radius: var(--betterloop-radius-sm);
        background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.94));
        color: rgba(24,24,24,.68);
        font-size: 10px;
        font-weight: 520;
        letter-spacing: .16em;
        backdrop-filter: blur(14px) saturate(108%);
      }

      .section-title {
        max-width: 1000px;
        margin: 0;
        color: var(--betterloop-text-default);
        font-family: var(--betterloop-font-primary);
        font-size: clamp(48px, 6vw, 84px);
        font-optical-sizing: auto;
        font-weight: 500;
        letter-spacing: -.02em;
        line-height: 1.02;
        text-wrap: balance;
      }

      .section-lead {
        max-width: 730px;
        margin: 28px 0 0;
        color: rgba(24,24,24,.58);
        font-size: clamp(16px, 1.5vw, 20px);
        font-weight: 360;
        letter-spacing: -.014em;
        line-height: 1.62;
      }

      .section-heading-centered .section-lead { margin-right: auto; margin-left: auto; }

      .glass-panel {
        border: 1px solid rgba(24,24,24,.13);
        background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.94));
        box-shadow: 0 10px 38px rgba(24,24,24,.08), inset 0 1px 0 rgba(24,24,24,.035);
        backdrop-filter: blur(14px) saturate(108%);
      }

      .comparison-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        border-top: 1px solid rgba(24,24,24,.14);
        border-bottom: 1px solid rgba(24,24,24,.14);
      }

      .comparison-panel {
        min-height: 430px;
        padding: clamp(34px, 5vw, 62px);
      }

      .comparison-panel + .comparison-panel { border-left: 1px solid rgba(24,24,24,.14); }
      .comparison-panel-positive { background: linear-gradient(145deg, rgba(199,0,54,.18), rgba(24,24,24,.01) 62%); }
      .comparison-label {
        margin: 0 0 32px;
        color: rgba(24,24,24,.46);
        font-size: 10px;
        font-weight: 540;
        letter-spacing: .18em;
      }
      .comparison-panel-positive .comparison-label { color: rgba(24,24,24,.82); }
      .comparison-list { display: grid; margin: 0; padding: 0; list-style: none; }
      .comparison-list li {
        display: grid;
        grid-template-columns: 30px 1fr;
        gap: 14px;
        padding: 20px 0;
        border-top: 1px solid rgba(24,24,24,.09);
        color: rgba(24,24,24,.56);
        font-size: 15px;
        line-height: 1.55;
      }
      .comparison-list li:first-child { border-top: 0; }
      .comparison-panel-positive .comparison-list li { color: rgba(24,24,24,.8); }
      .comparison-list span { color: var(--betterloop-red-100); font-family: var(--betterloop-font-primary); font-size: 21px; }
      .comparison-panel-positive .comparison-list span { color: var(--betterloop-text-default); }

      .control-loop {
        position: relative;
        display: flex;
        justify-content: space-between;
        gap: 0;
        margin-bottom: clamp(62px, 8vw, 102px);
      }
      .control-loop::before {
        position: absolute;
        top: 27px;
        right: 6%;
        left: 6%;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, transparent, rgba(24,24,24,.34) 12%, rgba(24,24,24,.34) 88%, transparent);
      }
      .loop-node {
        position: relative;
        z-index: 1;
        display: grid;
        width: 18%;
        justify-items: center;
        gap: 17px;
        color: rgba(24,24,24,.64);
        font-size: 12px;
        text-align: center;
      }
      .loop-node span {
        display: grid;
        width: 54px;
        height: 54px;
        place-items: center;
        border: 1px solid rgba(24,24,24,.28);
        border-radius: 50%;
        background: var(--betterloop-bg-surface);
        box-shadow: 0 0 30px rgba(199,0,54,.13);
        color: var(--betterloop-text-default);
        font-family: var(--betterloop-font-primary);
        font-size: 18px;
      }

      .pillar-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr));
        border-top: 1px solid rgba(24,24,24,.14);
        border-left: 1px solid rgba(24,24,24,.12);
      }
      .pillar {
        position: relative;
        min-height: 290px;
        padding: 34px 28px;
        border-right: 1px solid rgba(24,24,24,.12);
        border-bottom: 1px solid rgba(24,24,24,.14);
      }
      .pillar-number { color: rgba(24,24,24,.28); font-family: var(--betterloop-font-primary); font-size: 18px; }
      .pillar h3, .scope-card h3, .learning-steps h3, .security-item h3 {
        margin: 72px 0 0;
        color: var(--betterloop-text-default);
        font-size: 20px;
        font-weight: 500;
        letter-spacing: -.02em;
      }
      .pillar p, .scope-card p, .learning-steps p, .security-item p {
        margin: 13px 0 0;
        color: rgba(24,24,24,.48);
        font-size: 14px;
        line-height: 1.6;
      }

      .split-layout {
        display: grid;
        grid-template-columns: minmax(0,.95fr) minmax(420px,1.05fr);
        align-items: start;
        gap: clamp(54px,8vw,110px);
      }
      .split-copy { position: sticky; top: 72px; }
      .governance-close {
        margin: 30px 0 0;
        padding-left: 18px;
        border-left: 2px solid rgba(24,24,24,.54);
        color: rgba(24,24,24,.72);
        font-size: 15px;
        line-height: 1.6;
      }
      .scope-stack { display: grid; border-top: 1px solid rgba(24,24,24,.15); }
      .scope-card {
        position: relative;
        padding: 34px 28px 36px 70px;
        border-bottom: 1px solid rgba(24,24,24,.15);
      }
      .scope-card::before {
        position: absolute;
        top: 34px;
        left: 2px;
        color: rgba(24,24,24,.18);
        content: "#";
        font-family: var(--betterloop-font-primary);
        font-size: 38px;
      }
      .scope-card > span { color: rgba(24,24,24,.42); font-size: 10px; letter-spacing: .15em; }
      .scope-card h3 { margin-top: 15px; }

      .learning-workflow {
        position: relative;
        overflow: hidden;
        padding: 34px 0 0;
        border-top: 1px solid rgba(24,24,24,.18);
        border-bottom: 1px solid rgba(24,24,24,.13);
        background: radial-gradient(circle at 50% 0, rgba(199,0,54,.13), transparent 38%),
          linear-gradient(180deg, rgba(24,24,24,.018), transparent 72%);
      }
      .workflow-progress {
        position: absolute;
        top: 88px;
        right: 10%;
        left: 10%;
        z-index: 0;
        height: 1px;
        background: rgba(24,24,24,.1);
      }
      .workflow-progress-line {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(199,0,54,.18), var(--betterloop-red-100) 48%, rgba(24,24,24,.72));
        box-shadow: 0 0 18px rgba(199,0,54,.34);
        transform: scaleX(0);
        transform-origin: left;
      }
      .workflow-signal {
        position: absolute;
        top: -4px;
        left: 0;
        width: 9px;
        height: 9px;
        border: 2px solid var(--betterloop-bg-surface);
        border-radius: 50%;
        background: var(--betterloop-red-100);
        box-shadow: 0 0 0 5px rgba(199,0,54,.12), 0 0 22px rgba(199,0,54,.7);
        opacity: 0;
      }
      .learning-steps {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(5,minmax(0,1fr));
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .learning-steps li {
        position: relative;
        min-height: 270px;
        padding: 32px 22px 24px;
        border-left: 1px solid rgba(24,24,24,.12);
        opacity: 0;
        transform: translateY(20px);
      }
      .learning-steps li:first-child { border-left: 0; }
      .learning-steps li > span {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 1px solid rgba(24,24,24,.3);
        border-radius: 50%;
        color: var(--betterloop-text-default);
        font-family: var(--betterloop-font-primary);
        font-size: 16px;
        background: var(--betterloop-bg-surface);
        box-shadow: 0 0 0 0 rgba(199,0,54,0);
      }
      .learning-steps h3 { margin-top: 10px; }
      .workflow-stage {
        display: block;
        margin-top: 48px;
        color: rgba(199,0,54,.8);
        font-size: 9px;
        font-weight: 620;
        letter-spacing: .14em;
        text-transform: uppercase;
      }
      .workflow-return {
        display: flex;
        min-height: 44px;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        padding: 0 22px;
        border-top: 1px solid rgba(24,24,24,.08);
        color: rgba(24,24,24,.4);
        font-size: 9px;
        font-weight: 540;
        letter-spacing: .14em;
        text-transform: uppercase;
      }
      .workflow-return::before {
        width: 38px;
        height: 12px;
        content: "";
        border-bottom: 1px solid rgba(199,0,54,.65);
        border-left: 1px solid rgba(199,0,54,.65);
        border-radius: 0 0 0 9px;
      }
      .learning-workflow.is-visible .workflow-progress-line {
        animation: workflow-line-in 1650ms cubic-bezier(.16,1,.3,1) 180ms forwards;
      }
      .learning-workflow.is-visible .workflow-signal {
        animation: workflow-signal 5200ms cubic-bezier(.45,0,.25,1) 1850ms forwards;
      }
      .learning-workflow.is-visible .learning-steps li {
        animation: workflow-step-in 620ms cubic-bezier(.16,1,.3,1) forwards;
      }
      .learning-workflow.is-visible .learning-steps li:nth-child(1) { animation-delay: 120ms; }
      .learning-workflow.is-visible .learning-steps li:nth-child(2) { animation-delay: 310ms; }
      .learning-workflow.is-visible .learning-steps li:nth-child(3) { animation-delay: 500ms; }
      .learning-workflow.is-visible .learning-steps li:nth-child(4) { animation-delay: 690ms; }
      .learning-workflow.is-visible .learning-steps li:nth-child(5) { animation-delay: 880ms; }
      .learning-workflow.is-visible .learning-steps li > span { animation: workflow-node-pulse 5200ms ease-in-out 1850ms; }
      .learning-workflow.is-visible .learning-steps li:nth-child(2) > span { animation-delay: 2890ms; }
      .learning-workflow.is-visible .learning-steps li:nth-child(3) > span { animation-delay: 3930ms; }
      .learning-workflow.is-visible .learning-steps li:nth-child(4) > span { animation-delay: 4970ms; }
      .learning-workflow.is-visible .learning-steps li:nth-child(5) > span { animation-delay: 6010ms; }

      @keyframes workflow-line-in { to { transform: scaleX(1); } }
      @keyframes workflow-step-in { to { opacity: 1; transform: translateY(0); } }
      @keyframes workflow-signal {
        0% { left: 0; opacity: 0; }
        7%, 92% { opacity: 1; }
        100% { left: calc(100% - 9px); opacity: 0; }
      }
      @keyframes workflow-node-pulse {
        0%, 15%, 100% { border-color: rgba(24,24,24,.3); box-shadow: 0 0 0 0 rgba(199,0,54,0); }
        5% { border-color: rgba(24,24,24,.9); box-shadow: 0 0 0 7px rgba(199,0,54,.1), 0 0 26px rgba(199,0,54,.4); }
      }

      .evidence-grid {
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        border-top: 1px solid rgba(24,24,24,.16);
        border-left: 1px solid rgba(24,24,24,.12);
      }
      .evidence-card {
        min-height: 285px;
        padding: 40px 27px;
        border-right: 1px solid rgba(24,24,24,.12);
        border-bottom: 1px solid rgba(24,24,24,.16);
      }
      .evidence-card strong {
        display: block;
        color: var(--betterloop-text-default);
        font-family: var(--betterloop-font-primary);
        font-size: clamp(48px,5vw,72px);
        font-weight: 500;
        letter-spacing: -.02em;
        line-height: 1;
        text-shadow: none;
      }
      .evidence-card span { display: block; margin-top: 30px; color: rgba(24,24,24,.82); font-weight: 500; }
      .evidence-card p { margin: 12px 0 0; color: rgba(24,24,24,.45); font-size: 13px; line-height: 1.55; }
      .methodology {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 23px 0;
        border-bottom: 1px solid rgba(24,24,24,.12);
      }
      .methodology p { margin: 0; color: rgba(24,24,24,.36); font-size: 11px; line-height: 1.5; }
      .methodology > div { display: flex; gap: 22px; }
      .methodology a, .text-link { color: rgba(24,24,24,.74); font-size: 12px; font-weight: 500; }

      .security-grid {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        border-top: 1px solid rgba(24,24,24,.15);
        border-left: 1px solid rgba(24,24,24,.12);
      }
      .security-item {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 18px;
        min-height: 170px;
        padding: 32px 28px;
        border-right: 1px solid rgba(24,24,24,.12);
        border-bottom: 1px solid rgba(24,24,24,.12);
      }
      .security-index {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid rgba(24,24,24,.2);
        border-radius: 50%;
        color: rgba(24,24,24,.72);
        font-family: var(--betterloop-font-primary);
      }
      .security-item h3 { margin: 3px 0 0; }
      .brag-line { margin: 24px 0 0; color: rgba(24,24,24,.4); font-size: 12px; text-align: center; }

      .pilot-section {
        isolation: isolate;
        overflow: hidden;
        padding: clamp(130px,16vw,220px) 24px;
        border-top: 1px solid rgba(255,255,255,.1);
        background:
          radial-gradient(circle at 50% 45%, rgba(199,0,54,.25), transparent 23%),
          radial-gradient(ellipse at 50% 100%, rgba(199,0,54,.3), transparent 52%),
          var(--betterloop-bg-inverse);
        text-align: center;
      }
      .pilot-inner { width: min(900px,100%); margin: 0 auto; }
      .pilot-inner h2 {
        margin: 0;
        font-family: var(--betterloop-font-primary);
        font-size: clamp(56px,8vw,108px);
        font-weight: 500;
        letter-spacing: -.02em;
        line-height: .96;
        text-shadow: none;
      }
      .pilot-inner > p:not(.section-eyebrow):not(.pilot-tagline) {
        max-width: 620px;
        margin: 26px auto 0;
        color: rgba(255,255,255,.58);
        font-size: clamp(17px,1.7vw,21px);
        line-height: 1.55;
      }
      .pilot-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-top: 36px; }
      .pilot-cta {
        display: inline-grid;
        min-height: 46px;
        place-items: center;
        padding: 0 22px;
        border-radius: 7px;
        background: #fff;
        color: #111;
        font-weight: 470;
        box-shadow: 0 1px 5px rgba(0,0,0,.38), 0 0 24px rgba(255,255,255,.12);
      }
      .text-link { display: inline-flex; align-items: center; }
      .pilot-section .section-eyebrow { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); }
      .pilot-section .text-link { color: rgba(255,255,255,.74); }
      .pilot-tagline { margin: 58px 0 0 !important; color: rgba(255,255,255,.36) !important; font-size: 11px !important; letter-spacing: .15em; text-transform: uppercase; }

      .site-footer { padding: 28px clamp(22px,6vw,88px); border-top: 1px solid rgba(255,255,255,.1); background: var(--betterloop-bg-inverse); }
      .footer-inner { display: flex; width: min(1200px,100%); align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto; }
      .footer-brand { color: #fff; font-weight: 600; }
      .footer-inner nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
      .footer-inner nav a, .footer-inner > p { margin: 0; color: rgba(255,255,255,.44); font-size: 11px; }

      .reveal-on-scroll {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1);
      }
      .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

      @media (hover: hover) and (prefers-reduced-motion: no-preference) {
        button, a { transition: filter 140ms ease, opacity 140ms ease; }
        button:hover, a:hover { filter: brightness(1.08); }
      }

      .motion-pending .brand,
      .motion-pending .nav-link,
      .motion-pending .time-panel,
      .motion-pending .sign-up,
      .motion-pending .menu-toggle,
      .motion-pending .hero-copy,
      .motion-pending .primary-cta,
      .motion-pending .demo-card { opacity: 0; }
      .motion-pending .line-reveal { transform: translate3d(0,110%,0) skewY(2deg); }
      .motion-pending .brand { animation: entrance-brand 580ms cubic-bezier(.16,1,.3,1) 60ms forwards; }
      .motion-pending .nav-link { animation: entrance-nav 480ms cubic-bezier(.16,1,.3,1) forwards; }
      .motion-pending .nav-link:nth-child(1) { animation-delay: 130ms; }
      .motion-pending .nav-link:nth-child(2) { animation-delay: 175ms; }
      .motion-pending .nav-link:nth-child(3) { animation-delay: 220ms; }
      .motion-pending .nav-link:nth-child(4) { animation-delay: 265ms; }
      .motion-pending .nav-link:nth-child(5) { animation-delay: 310ms; }
      .motion-pending .time-panel { animation: entrance-nav 520ms cubic-bezier(.16,1,.3,1) 180ms forwards; }
      .motion-pending .sign-up { animation: entrance-action 520ms cubic-bezier(.16,1,.3,1) 220ms forwards; }
      .motion-pending .menu-toggle { animation: entrance-action 520ms cubic-bezier(.16,1,.3,1) 140ms forwards; }
      .motion-pending .line-one .line-reveal { animation: entrance-line 800ms cubic-bezier(.22,1,.36,1) 300ms forwards; }
      .motion-pending .line-two .line-reveal { animation: entrance-line 850ms cubic-bezier(.22,1,.36,1) 440ms forwards; }
      .motion-pending .hero-copy { animation: entrance-copy 620ms cubic-bezier(.16,1,.3,1) 740ms forwards; }
      .motion-pending .primary-cta { animation: entrance-action 560ms cubic-bezier(.16,1,.3,1) 960ms forwards; }
      .motion-pending .demo-card {
        transform-origin: 82% 50%;
        animation: entrance-card 920ms cubic-bezier(.22,1,.36,1) 1040ms forwards;
      }
      @keyframes entrance-brand { from { opacity: 0; transform: translateY(7px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
      @keyframes entrance-nav { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
      @keyframes entrance-action { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
      @keyframes entrance-line { from { transform: translate3d(0,110%,0) skewY(2deg); } to { transform: translate3d(0,0,0) skewY(0); } }
      @keyframes entrance-copy { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(var(--copy-optical-shift)); } }
      @keyframes entrance-card { from { opacity: 0; transform: translateY(12px) scale(.968); } to { opacity: 1; transform: translateY(0) scale(1); } }

      @media (min-width: 620px) and (max-width: 980px),
        (min-width: 620px) and (max-width: 1100px) and (orientation: portrait) {
        .screen {
          --gutter-start: clamp(28px, 5vw, 48px);
          --gutter-end: clamp(28px, 5vw, 48px);
          --display-size: clamp(52px, 7.2vh, 74px);
          --display-leading: clamp(61px, 8.3vh, 86px);
          --card-width: clamp(148px, 18vh, 196px);
        }
        .header { justify-content: space-between; }
        .header-actions {
          position: absolute;
          top: 58px;
          right: 0;
          display: flex;
          width: min(324px, calc(100vw - 2 * var(--gutter-start)));
          flex-direction: column;
          align-items: stretch;
          gap: 24px;
          padding: 22px;
          border: 1px solid rgba(255,255,255,.16);
          border-radius: 16px;
          background: linear-gradient(145deg, rgba(17,24,25,.91), rgba(4,10,12,.94));
          box-shadow: 0 18px 50px rgba(0,0,0,.44), 0 0 0 1px rgba(255,255,255,.03) inset;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-8px) scale(.985);
          transform-origin: top right;
          backdrop-filter: blur(18px) saturate(110%);
          transition: opacity 220ms ease, visibility 220ms ease, transform 300ms cubic-bezier(.16,1,.3,1);
        }
        .header.menu-open .header-actions { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .nav { top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 0; }
        .nav-link, .nav-link:first-child { top: 0; font-size: 17px; }
        .nav-link.active::after { top: calc(100% + 5px); }
        .time-panel { width: 100%; height: auto; min-height: 46px; margin: 0; }
        .sign-up { width: 100%; margin: 0; }
        .menu-toggle { display: flex; margin-left: auto; }
        .hero-copy { width: min(52vw, 465px); }
      }

      @media (max-width: 900px) {
        .site-section { min-height: auto; padding-right: clamp(24px,6vw,52px); padding-left: clamp(24px,6vw,52px); }
        .comparison-grid, .split-layout { grid-template-columns: 1fr; }
        .comparison-panel + .comparison-panel { border-top: 1px solid rgba(24,24,24,.14); border-left: 0; }
        .comparison-panel { min-height: 0; }
        .split-copy { position: relative; top: auto; }
        .scope-stack { margin-top: 32px; }
        .pillar-grid, .evidence-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
        .learning-workflow { padding-top: 0; }
        .workflow-progress { display: none; }
        .learning-steps { grid-template-columns: 1fr; }
        .learning-steps li {
          display: grid;
          min-height: 0;
          grid-template-columns: 48px 1fr;
          gap: 20px;
          padding: 26px 22px;
          border-top: 1px solid rgba(24,24,24,.1);
          border-left: 0;
        }
        .learning-steps li:first-child { border-top: 0; }
        .workflow-stage { margin-top: 1px; }
        .learning-steps h3 { margin-top: 7px; }
        .workflow-return { justify-content: flex-start; }
        .methodology { align-items: flex-start; flex-direction: column; }
      }

      @media (max-width: 619px) {
        .screen {
          --mobile-gutter: max(20px, env(safe-area-inset-left));
          --gutter-start: var(--mobile-gutter);
          --gutter-end: max(20px, env(safe-area-inset-right));
          --header-top: max(18px, env(safe-area-inset-top));
          --hero-bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
          --display-size: clamp(47px, 13.5vw, 62px);
          --display-leading: clamp(49px, 14.3vw, 66px);
          --copy-size: clamp(14px, 4vw, 17px);
          --copy-leading: clamp(19px, 5.2vw, 23px);
          --title-copy-gap: 14px;
          --copy-cta-gap: 22px;
          --cta-width: 270px;
          --cta-height: 44px;
          --card-width: clamp(126px, 35vw, 164px);
        }
        .screen::after { background: linear-gradient(0deg, rgba(0,0,0,.62), transparent 68%); }
        .header { justify-content: space-between; }
        .header-actions {
          position: absolute;
          top: 58px;
          right: 0;
          display: flex;
          width: min(340px, calc(100vw - 2 * var(--mobile-gutter)));
          flex-direction: column;
          align-items: stretch;
          gap: 20px;
          padding: 21px;
          border: 1px solid rgba(255,255,255,.16);
          border-radius: 16px;
          background: linear-gradient(145deg, rgba(17,24,25,.92), rgba(4,10,12,.95));
          box-shadow: 0 18px 50px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.03) inset;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-8px) scale(.985);
          transform-origin: top right;
          backdrop-filter: blur(18px) saturate(110%);
          transition: opacity 220ms ease, visibility 220ms ease, transform 300ms cubic-bezier(.16,1,.3,1);
        }
        .header.menu-open .header-actions { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .nav { top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 17px 20px; margin: 0; }
        .nav-link, .nav-link:first-child { top: 0; font-size: 17px; }
        .time-panel { width: 100%; height: auto; min-height: 44px; margin: 0; }
        .sign-up { width: 100%; margin: 0; }
        .menu-toggle { display: flex; margin-left: auto; }
        .hero-content { right: var(--gutter-end); }
        .line-one { transform: scaleX(1); }
        .line-two { transform: scaleX(1); }
        .hero-copy { width: min(92vw, 470px); max-width: 100%; }
        .hero-copy br { display: none; }
        .demo-card { top: clamp(154px, 26svh, 240px); right: var(--gutter-end); bottom: auto; }

        .site-section { padding: 84px 20px; }
        .site-section::before { right: 7px; font-size: 8px; }
        .section-heading { margin-bottom: 42px; }
        .section-title { font-size: clamp(42px,12vw,58px); }
        .section-lead { font-size: 15px; }
        .comparison-panel { padding: 30px 20px; }
        .control-loop { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; }
        .control-loop::before { top: 21px; }
        .loop-node { width: auto; gap: 12px; font-size: 9px; line-height: 1.25; }
        .loop-node span { width: 42px; height: 42px; font-size: 14px; }
        .pillar-grid, .evidence-grid, .security-grid { grid-template-columns: 1fr 1fr; }
        .pillar { min-height: 245px; padding: 25px 18px; }
        .pillar h3 { margin-top: 46px; font-size: 17px; }
        .pillar p { font-size: 12px; }
        .scope-card { padding-right: 10px; padding-left: 54px; }
        .learning-steps li { padding: 22px 14px; }
        .workflow-return { padding: 13px 14px; line-height: 1.45; }
        .evidence-card { min-height: 230px; padding: 28px 18px; }
        .evidence-card strong { font-size: 46px; }
        .evidence-card span { margin-top: 22px; font-size: 14px; }
        .evidence-card p { font-size: 11px; }
        .methodology > div { flex-direction: column; gap: 10px; }
        .security-item { grid-template-columns: 1fr; min-height: 230px; padding: 25px 18px; }
        .security-item h3 { font-size: 17px; }
        .pilot-section { padding: 110px 20px; }
        .pilot-inner h2 { font-size: clamp(54px,16vw,72px); }
        .footer-inner { align-items: flex-start; flex-direction: column; }
        .footer-inner nav { justify-content: flex-start; }
      }

      @media (max-width: 619px) and (max-height: 740px) {
        .screen {
          --display-size: clamp(40px, 11vw, 50px);
          --display-leading: clamp(43px, 12vw, 55px);
          --copy-size: 13px;
          --copy-leading: 17px;
          --copy-cta-gap: 15px;
          --hero-bottom: max(18px, env(safe-area-inset-bottom));
          --card-width: 112px;
        }
        .demo-card { top: 124px; }
      }

      @media (max-height: 560px) and (orientation: landscape) {
        .screen {
          --gutter-start: max(24px, env(safe-area-inset-left));
          --gutter-end: max(24px, env(safe-area-inset-right));
          --header-top: 14px;
          --hero-bottom: 22px;
          --display-size: clamp(44px, 11.5vh, 60px);
          --display-leading: clamp(48px, 12.8vh, 67px);
          --copy-size: 13px;
          --copy-leading: 17px;
          --title-copy-gap: 9px;
          --copy-cta-gap: 12px;
          --card-width: clamp(112px, 28vh, 142px);
        }
        .demo-card { top: auto; bottom: var(--hero-bottom); }
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          scroll-behavior: auto !important;
          animation-duration: .01ms !important;
          animation-delay: 0ms !important;
          transition-duration: .01ms !important;
        }
        .learning-steps li { opacity: 1; transform: none; }
        .workflow-progress-line { transform: scaleX(1); }
        .workflow-signal { display: none; }
      }

      .section-eyebrow, .site-section::before, .time-panel-label, .scope-card > span, .pillar-number, .comparison-label, .pilot-tagline {
        font-family: var(--betterloop-font-secondary);
        text-transform: uppercase;
      }

      @media (max-width: 760px) {
        .hero-title { white-space: normal; }
        .hero-content { right: var(--gutter-end); }
      }