/* ==========================================================================
   RankFueler — audience & intent data from AI-powered apps
   Palette follows the existing brand (auto-reply email): #0d3fb0 / #2b7bff / #5e9bff on near-black.
   ========================================================================== */

@property --n {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

@property --ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

:root {
    --ink: #05070b;
    --ink-2: #090d14;
    --ink-3: #0e131c;
    --ink-4: #151c28;
    --line: rgba(64, 140, 255, 0.12);
    --line-2: rgba(64, 140, 255, 0.22);
    --text: #e8edf5;
    --soft: #b4bfcf;
    --muted: #8591a6;
    --faint: #566175;

    --paper: #eceef1;
    --paper-ink: #0b0f16;
    --paper-muted: #58606e;
    --paper-line: rgba(11, 15, 22, 0.13);

    --signal: #2b7bff;
    --signal-deep: #0d3fb0;
    --signal-hi: #5e9bff;
    --on-signal: #00131f;
    --warn: #ffb46b;

    --f-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --gutter: clamp(16px, 3.2vw, 44px);
    --maxw: 1440px;
    --r: 4px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

    --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='674 513 658 724'%3E%3Cpath fill-rule='evenodd' d='M965 513L983 513L1015 514L1037 516L1056 519L1075 523L1094 528L1110 533L1158 550L1178 555L1192 558L1209 561L1235 563L1255 563L1263 561L1276 557L1289 552L1299 545L1311 535L1320 524L1327 513L1332 513L1332 635L1331 647L1329 657L1326 665L1321 675L1316 682L1309 690L1304 695L1293 703L1285 708L1273 714L1261 719L1242 725L1230 728L1212 731L1186 734L1164 733L1150 732L1125 728L1109 724L1093 719L1073 712L1056 705L994 678L991 678L989 679L988 681L986 686L985 698L984 885L985 887L991 875L1002 858L1013 845L1023 835L1039 822L1050 815L1059 810L1068 806L1081 802L1096 800L1113 800L1127 801L1157 806L1205 816L1218 818L1235 820L1255 818L1273 815L1283 812L1293 808L1304 802L1315 795L1317 795L1317 797L1300 833L1281 875L1241 970L1235 979L1230 984L1224 987L1217 990L1207 991L1195 990L1181 986L1163 978L1149 970L1129 957L1059 907L1047 899L1031 891L1026 889L1017 887L1007 887L1002 889L998 891L994 894L990 899L986 907L984 915L984 1136L986 1160L988 1173L991 1186L996 1200L1000 1208L1006 1217L1011 1223L1017 1228L1027 1234L1027 1237L771 1237L771 1236L771 1233L777 1231L783 1226L790 1219L797 1209L802 1201L805 1191L808 1181L810 1171L813 1156L813 1135L813 1052L812 1033L810 1018L807 1004L803 990L799 982L792 972L785 963L775 951L731 909L715 891L709 883L701 871L696 862L689 847L683 830L680 819L677 803L675 784L674 763L675 745L678 724L681 711L686 695L694 675L706 653L714 641L728 623L748 602L759 592L781 575L803 561L817 553L843 541L869 531L894 524L921 518L943 515ZM886 653L906 654L915 655L933 658L961 665L979 671L980 672L964 680L936 695L905 714L884 728L863 744L847 758L835 771L824 786L821 792L817 801L815 808L814 815L813 954L812 959L811 964L808 966L806 967L803 967L801 966L797 963L775 941L766 931L755 918L742 900L733 884L728 873L724 863L719 844L717 833L715 816L715 792L716 784L719 770L723 757L727 747L733 735L742 721L753 707L759 701L770 691L778 685L787 679L800 672L809 668L826 662L842 658L853 656L868 654Z'/%3E%3C/svg%3E");
    color-scheme: dark;
}

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

[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
}

.js.intro body {
    overflow: hidden;
}

img,
svg,
canvas {
    display: block;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

h1,
h2,
h3 {
    font-weight: 500;
    margin: 0;
}

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

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

/* film grain over everything, static */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- utilities ---------- */
.wrap {
    width: min(100% - 2 * var(--gutter), var(--maxw));
    margin-inline: auto;
}

.mono {
    font-family: var(--f-mono);
    font-feature-settings: "zero" 0;
}

.sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip {
    position: fixed;
    left: 12px;
    top: -60px;
    z-index: 300;
    background: var(--signal);
    color: var(--on-signal);
    padding: 10px 14px;
    border-radius: var(--r);
    font-weight: 600;
    text-decoration: none;
}

.skip:focus {
    top: 12px;
}

/* ---------- buttons ---------- */
.btn {
    --bh: 52px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: var(--bh);
    padding: 0 22px;
    border-radius: var(--r);
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}

.btn-arrow {
    display: inline-block;
    transition: transform 0.4s var(--ease-out);
}

.btn:hover .btn-arrow {
    transform: translateX(4px);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--signal);
    color: var(--on-signal);
    overflow: hidden;
    isolation: isolate;
}

/* light sweep across the primary button */
.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.8s var(--ease-out);
}

.btn-primary:hover::before {
    transform: translateX(120%);
}

.btn-primary:hover {
    background: #33bbff;
}

.btn-ghost {
    border-color: var(--line-2);
    color: var(--text);
    background: rgba(255, 255, 255, 0.02);
}

.btn-ghost:hover {
    border-color: var(--signal);
    background: rgba(43, 123, 255, 0.08);
}

.btn-sm {
    --bh: 40px;
    padding: 0 16px;
    font-size: 14px;
}

/* rotating conic-gradient border, driven by the registered --ang */
.btn-glow {
    background:
        linear-gradient(var(--ink-3), var(--ink-3)) padding-box,
        conic-gradient(from var(--ang), rgba(64, 140, 255, 0.25) 0 55%, var(--signal) 78%, var(--signal-hi) 86%, rgba(64, 140, 255, 0.25) 94%) border-box;
    color: var(--text);
    animation: ang 4.5s linear infinite;
}

.btn-glow:hover {
    background:
        linear-gradient(#0f1c2c, #0f1c2c) padding-box,
        conic-gradient(from var(--ang), var(--signal), var(--signal-hi), var(--signal)) border-box;
}

@keyframes ang {
    to {
        --ang: 360deg;
    }
}

/* ---------- header ---------- */
.hdr {
    position: fixed;
    z-index: 50;
    top: 12px;
    left: var(--gutter);
    right: var(--gutter);
    height: 60px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 10px 0 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.4s, border-color 0.4s, transform 0.6s var(--ease-out), -webkit-backdrop-filter 0.4s, backdrop-filter 0.4s;
}

.hdr.scrolled {
    background: rgba(9, 12, 18, 0.62);
    border-color: var(--line);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

.hdr.away {
    transform: translateY(calc(-100% - 24px));
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    justify-self: start;
}

.brand-mark {
    width: 22px;
    height: 24px;
    fill: currentColor;
    transition: fill 0.3s;
}

.brand:hover .brand-mark {
    fill: var(--signal);
}

.brand-word {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.24em;
}

.nav {
    display: flex;
    gap: 2px;
}

.nav a {
    position: relative;
    padding: 8px 14px;
    border-radius: 6px;
    color: var(--soft);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.25s, background-color 0.25s;
    white-space: nowrap;
}

.nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.nav a.active {
    color: #fff;
}

.nav a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--signal);
}

.hdr-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 18px;
}

.clock {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
    white-space: nowrap;
}

.clock b {
    color: var(--soft);
    font-weight: 500;
}

.clock i {
    font-style: normal;
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% {
        opacity: 0.2;
    }
}

.menu-btn {
    display: none;
    width: 44px;
    height: 40px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.menu-btn-bars,
.menu-btn-bars::before {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.4s var(--ease-out);
}

.menu-btn-bars {
    position: relative;
    transform: translateY(-3px);
}

.menu-btn-bars::before {
    content: "";
    position: absolute;
    top: 6px;
}

.menu-open .menu-btn-bars {
    transform: translateY(0) rotate(45deg);
}

.menu-open .menu-btn-bars::before {
    transform: translateY(-6px) rotate(-90deg);
}

.progress {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--signal-deep), var(--signal), var(--signal-hi));
    transform-origin: left;
    transform: scaleX(var(--p, 0));
    opacity: 0;
    transition: opacity 0.4s;
}

.hdr.scrolled .progress {
    opacity: 1;
}

@supports (animation-timeline: scroll()) {
    .progress {
        animation: progress linear both;
        animation-timeline: scroll(root);
    }

    @keyframes progress {
        from {
            transform: scaleX(0);
        }

        to {
            transform: scaleX(1);
        }
    }
}

.menu {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(5, 7, 11, 0.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    padding: 110px var(--gutter) 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu nav {
    display: flex;
    flex-direction: column;
}

.menu nav a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    letter-spacing: -0.04em;
    text-decoration: none;
    animation: menu-in 0.6s var(--ease-out) both;
}

.menu nav a:nth-child(2) { animation-delay: 0.04s; }
.menu nav a:nth-child(3) { animation-delay: 0.08s; }
.menu nav a:nth-child(4) { animation-delay: 0.12s; }
.menu nav a:nth-child(5) { animation-delay: 0.16s; }
.menu nav a:nth-child(6) { animation-delay: 0.2s; }

.menu nav a .mono {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--signal);
}

@keyframes menu-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

.menu-foot {
    color: var(--muted);
    font-size: 13px;
}

/* ---------- loader ---------- */
.loader {
    display: none;
}

.js.intro .loader {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
}

.loader-panels {
    position: absolute;
    inset: 0;
    display: flex;
}

.loader-panels i {
    flex: 1;
    background: var(--ink);
    margin-right: -1px;
    transition: transform 0.95s var(--ease-io);
}

.loader-panels i:nth-child(2) { transition-delay: 0.06s; }
.loader-panels i:nth-child(3) { transition-delay: 0.12s; }
.loader-panels i:nth-child(4) { transition-delay: 0.18s; }
.loader-panels i:nth-child(5) { transition-delay: 0.24s; }

.loader-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.9s ease 0.4s;
}

.loader-meta {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    transition: opacity 0.35s;
}

.loader-count {
    color: var(--text);
    font-size: 13px;
    letter-spacing: 0.08em;
}

.loader.out .loader-panels i {
    transform: translateY(-101%);
}

.loader.out .loader-canvas,
.loader.out .loader-meta {
    opacity: 0;
}

/* ---------- reveal system (only when JS is alive) ---------- */
.line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

.line > span {
    display: inline-block;
    transition: transform 1.1s var(--ease-out);
}

.line:nth-child(2) > span { transition-delay: 0.08s; }
.line:nth-child(3) > span { transition-delay: 0.16s; }

.js .sec-title[data-reveal]:not(.in) .line > span,
.js:not(.ready) .hero-title .line > span {
    transform: translateY(108%);
}

.js [data-reveal]:not(.sec-title) {
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
    transition-delay: var(--rd, 0s);
}

.js [data-reveal]:not(.sec-title):not(.in) {
    opacity: 0;
    transform: translateY(28px);
}

.js:not(.ready) .hero-eyebrow,
.js:not(.ready) .hero-foot,
.js:not(.ready) .hud {
    opacity: 0;
    transform: translateY(16px);
}

.hero-eyebrow,
.hero-foot,
.hud {
    transition: opacity 1s var(--ease-out) 0.35s, transform 1s var(--ease-out) 0.35s;
}

.hud {
    transition-delay: 0.55s;
}

/* ---------- hero ---------- */
.hero {
    position: relative;
    min-height: max(660px, 100svh);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    isolation: isolate;
}

.field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero > .field {
    z-index: -2;
}

.hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(to top, var(--ink) 0%, rgba(5, 7, 11, 0.82) 22%, rgba(5, 7, 11, 0) 58%),
        linear-gradient(to right, rgba(5, 7, 11, 0.72) 0%, rgba(5, 7, 11, 0) 55%),
        linear-gradient(to bottom, rgba(5, 7, 11, 0.7) 0%, rgba(5, 7, 11, 0) 18%);
}

.hero-inner {
    position: relative;
    padding-top: 150px;
    padding-bottom: 104px;
    pointer-events: none;
}

.hero-inner a,
.hero-inner p {
    pointer-events: auto;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.eyebrow .idx {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--signal);
}

.eyebrow .idx::after {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.hero-eyebrow {
    color: var(--soft);
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 0 rgba(43, 123, 255, 0.6);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    70% {
        box-shadow: 0 0 0 9px rgba(43, 123, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(43, 123, 255, 0);
    }
}

.hero-title {
    margin: 22px 0 38px;
    font-size: clamp(3.3rem, 9.4vw, 10.6rem);
    line-height: 0.9;
    letter-spacing: -0.052em;
    font-weight: 500;
}

.hero-title .line {
    padding-bottom: 0.17em;
    margin-bottom: -0.17em;
}

/* background-clip:text only paints inside the box, so the box is extended over the descenders */
.hero-title .line > span {
    background: linear-gradient(180deg, #ffffff 30%, #a7b5cc 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 0.04em 0.17em 0;
    margin-bottom: -0.17em;
}

.hero-foot {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 32px 48px;
    flex-wrap: wrap;
}

.hero-lede {
    max-width: 47ch;
    margin: 0;
    font-size: clamp(1.02rem, 1.2vw, 1.18rem);
    line-height: 1.55;
    color: var(--soft);
}

.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hud {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 14px var(--gutter);
    border-top: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(5, 7, 11, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    white-space: nowrap;
}

.hud b {
    color: var(--text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.hud .hud-zero {
    color: var(--signal);
}

.hud-hint {
    color: var(--soft);
}

.hud-scroll {
    margin-left: auto;
}

/* ---------- ticker ---------- */
.ticker {
    overflow: hidden;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: tick 60s linear infinite;
}

.ticker:hover .ticker-track {
    animation-play-state: paused;
}

.ticker ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticker li {
    display: flex;
    align-items: center;
    gap: 34px;
    padding-right: 34px;
    font-size: clamp(1.15rem, 1.7vw, 1.6rem);
    letter-spacing: -0.02em;
    color: var(--soft);
    white-space: nowrap;
}

.ticker li::after {
    content: "";
    width: 12px;
    height: 13px;
    background: var(--signal);
    -webkit-mask: var(--mark) center / contain no-repeat;
    mask: var(--mark) center / contain no-repeat;
    opacity: 0.85;
}

@keyframes tick {
    to {
        transform: translateX(-50%);
    }
}

/* ---------- sections ---------- */
.sec {
    position: relative;
    padding-block: clamp(88px, 10vw, 150px);
}

.sec + .sec:not(.sec-paper):not(.sec-catalog) {
    padding-top: clamp(40px, 5vw, 80px);
}

.sec-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 22px;
    margin-bottom: clamp(48px, 6vw, 92px);
}

.sec-head .eyebrow {
    grid-column: 1 / -1;
}

.sec-head .sec-title {
    grid-column: 1 / span 8;
}

.sec-head .sec-lede {
    grid-column: 9 / -1;
    align-self: end;
}

.sec-title {
    font-size: clamp(2.3rem, 5vw, 4.9rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.sec-lede {
    margin: 0;
    max-width: 42ch;
    font-size: 1.075rem;
    color: #a9b4c5;
}

/* ---------- 01 bento ---------- */
.bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.tile {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.4vw, 34px);
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--ink-3);
    color: var(--text);
}

.tile p {
    margin: 0;
}

.tile > p:not(.tile-k),
.tile-body > p:not(.tile-k),
.custom-copy > p:not(.tile-k) {
    color: var(--muted);
    font-size: 15.5px;
    max-width: 46ch;
}

.tile h3 {
    margin: 16px 0 12px;
    font-size: clamp(1.5rem, 2.2vw, 2.15rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    max-width: 18ch;
}

.tile-k {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--soft);
}

.tile-k span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-size: 10.5px;
    letter-spacing: 0;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.chips li {
    padding: 6px 10px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--soft);
}

/* cursor spotlight + lit border (mask-composite ring) */
.tile[data-spot]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(43, 123, 255, 0.13), transparent 65%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.tile[data-spot]::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 155, 255, 0.95), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.tile[data-spot]:hover::before,
.tile[data-spot]:hover::after {
    opacity: 1;
}

/* A — audience: paper tile with a live dither field */
.tile-aud {
    grid-column: 1 / span 7;
    grid-row: span 2;
    min-height: 640px;
    justify-content: flex-end;
    background: var(--paper);
    color: var(--paper-ink);
    border-color: transparent;
    cursor: crosshair;
}

.tile-aud .field {
    z-index: -2;
}

.tile-aud .tile-body {
    position: relative;
    pointer-events: none;
}

.tile-aud .tile-body::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60px calc(-1 * clamp(22px, 2.4vw, 34px)) calc(-1 * clamp(22px, 2.4vw, 34px));
    background: linear-gradient(to top, var(--paper) 55%, rgba(236, 238, 241, 0));
}

.tile-aud .tile-k,
.tile-aud .chips li {
    color: var(--paper-ink);
}

.tile-aud .chips li {
    border-color: var(--paper-line);
}

.tile-aud .tile-body > p:not(.tile-k) {
    color: var(--paper-muted);
}

.aud-label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    padding: 4px 8px 4px 18px;
    border: 1px solid var(--paper-line);
    border-radius: 2px;
    background: rgba(236, 238, 241, 0.86);
    color: var(--paper-ink);
    font-size: 10px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    pointer-events: none;
    will-change: transform;
}

.aud-label::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--signal);
}

.tile-aud[data-spot]::before {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(43, 123, 255, 0.1), transparent 65%);
}

/* B — intent: live bars */
.tile-intent {
    grid-column: 8 / -1;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 110px;
    margin-top: auto;
    padding-top: 26px;
}

.bars i {
    flex: 1;
    height: calc(var(--h) * 100%);
    border-radius: 1px;
    background: linear-gradient(to top, rgba(43, 123, 255, 0.15), var(--signal));
    transform-origin: bottom;
    animation: bar 2.6s ease-in-out calc(var(--d) * -0.19s) infinite alternate;
}

.bars i:last-child {
    background: linear-gradient(to top, rgba(94, 155, 255, 0.25), var(--signal-hi));
    box-shadow: 0 0 18px rgba(94, 155, 255, 0.45);
}

@keyframes bar {
    from {
        transform: scaleY(0.52);
    }

    to {
        transform: scaleY(1);
    }
}

/* C — trend: signal-blue tile with a drawn sparkline */
.tile-trend {
    grid-column: 8 / -1;
    background: var(--signal);
    color: var(--on-signal);
    border-color: transparent;
}

.tile-trend .tile-k,
.tile-trend .chips li {
    color: var(--on-signal);
}

.tile-trend > p:not(.tile-k) {
    color: rgba(2, 10, 32, 0.78);
}

.tile-trend .chips li {
    border-color: rgba(2, 10, 32, 0.28);
}

.tile-trend[data-spot]::before {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 65%);
}

.tile-trend[data-spot]::after {
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #fff, transparent 60%);
}

.spark {
    width: 100%;
    height: auto;
    margin-top: 26px;
    overflow: visible;
}

.spark-line {
    fill: none;
    stroke: var(--on-signal);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 2.2s var(--ease-out) 0.3s;
}

.spark-area {
    fill: rgba(2, 10, 32, 0.1);
}

.spark-dot {
    fill: var(--on-signal);
    transform-box: fill-box;
    transform-origin: center;
    animation: dotpulse 1.6s ease-in-out infinite;
}

.js .tile-trend:not(.in) .spark-line {
    stroke-dashoffset: 1;
}

@keyframes dotpulse {
    50% {
        transform: scale(1.6);
        opacity: 0.6;
    }
}

/* D — custom cohorts: typing console */
.tile-custom {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}

.console {
    background: #070a10;
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: 13.5px;
    color: var(--soft);
    overflow: hidden;
}

.console-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    color: var(--faint);
    letter-spacing: 0.06em;
}

.console-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-4);
}

.console-bar span {
    margin-left: 8px;
}

.console p {
    margin: 0;
}

.console-q {
    padding: 18px 18px 6px;
    color: var(--faint);
}

.console-in {
    padding: 0 18px 18px;
    min-height: 3.4em;
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
}

.caret {
    display: inline-block;
    width: 8px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: var(--signal);
    animation: blink 0.9s steps(1) infinite;
}

.console-out {
    border-top: 1px dashed var(--line-2);
    padding: 14px 18px 16px;
    display: grid;
    gap: 6px;
}

.console-out p {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.console-out .dots {
    flex: 1;
    border-bottom: 1px dotted var(--faint);
    transform: translateY(-4px);
}

.console-out [data-o] {
    color: var(--signal);
    transition: opacity 0.4s, transform 0.4s var(--ease-out);
}

.js .console-out:not(.o1) [data-o="1"],
.js .console-out:not(.o2) [data-o="2"],
.js .console-out:not(.o3) [data-o="3"],
.js .console-out:not(.o3) [data-o="4"] {
    opacity: 0;
    transform: translateX(-6px);
}

/* ---------- stats: pure-CSS counters via @property ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.stat {
    padding: clamp(22px, 2.4vw, 34px);
    border-left: 1px solid var(--line);
}

.stat:first-child {
    border-left: 0;
}

.stat-n {
    margin: 0 0 16px;
    font-size: clamp(2.8rem, 5vw, 4.7rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-n .num {
    --n: var(--to);
    counter-reset: n var(--n);
}

.stat-n .num::after {
    content: counter(n);
}

.js .stat-n .num {
    transition: --n 2.4s cubic-bezier(0.2, 0.7, 0.1, 1);
}

.js .stats:not(.in) .stat-n .num {
    --n: var(--from, 0);
}

.stat-n .suf {
    color: var(--signal);
}

.stat-zero .num {
    color: var(--signal);
}

.stat-l {
    margin: 0;
    max-width: 24ch;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- 02 catalog ring (CSS 3D) ---------- */
.sec-catalog {
    overflow: hidden;
    background: radial-gradient(60% 50% at 50% 62%, rgba(13, 63, 176, 0.22), transparent 70%);
}

/* Cards orbit the extruded mark on a tilted ellipse. Position, tilt and fade are all
   computed in CSS with sin()/cos() from one angle; JS only writes --rot. */
.ring-stage {
    --cw: 214px;
    --ch: 286px;
    --rx: 540px;
    --ry: 190px;
    --rz: 430px;
    position: relative;
    height: clamp(600px, 54vw, 740px);
    perspective: 1700px;
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.ring-stage.dragging {
    cursor: grabbing;
}

.ring {
    --rot: 0deg;
    position: absolute;
    left: 50%;
    top: calc(50% - 70px);
    width: 0;
    height: 0;
    transform-style: preserve-3d;
}

.seg {
    --a: calc(var(--i) * 360deg / var(--count) + var(--rot));
    position: absolute;
    width: var(--cw);
    height: var(--ch);
    left: calc(var(--cw) / -2);
    top: calc(var(--ch) / -2);
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: linear-gradient(180deg, #111825, #0b1019);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
    transform:
        translate3d(calc(sin(var(--a)) * var(--rx)), calc(cos(var(--a)) * var(--ry)), calc(cos(var(--a)) * var(--rz)))
        rotateY(calc(sin(var(--a)) * 24deg));
}

/* cards stay opaque (no text bleeding through); distance is shown by an ink veil instead */
.seg::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: #05070b;
    pointer-events: none;
    opacity: var(--shade, calc(0.9 * (0.42 - 0.58 * cos(var(--a)))));
    will-change: opacity; /* own layer: the veil fades without repainting the card underneath */
}

.seg p,
.seg dl {
    margin: 0;
}

.seg-top {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.seg-top span:first-child {
    color: var(--signal);
}

.seg-top span:last-child {
    color: var(--faint);
}

.seg-viz {
    position: relative;
    height: 112px;
    margin: 14px 0 16px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background:
        linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 28px;
    overflow: hidden;
}

.seg-viz::before,
.seg-viz::after {
    content: "";
    position: absolute;
    inset: 0;
}

.seg-viz::before {
    background: radial-gradient(circle, rgba(190, 206, 232, 0.6) 1px, transparent 1.5px) 0 0 / 6px 6px;
    -webkit-mask: radial-gradient(55% 75% at var(--vb), #000 0 20%, transparent 72%);
    mask: radial-gradient(55% 75% at var(--vb), #000 0 20%, transparent 72%);
}

.seg-viz::after {
    background: radial-gradient(circle, var(--signal) 1.3px, transparent 1.8px) 3px 3px / 6px 6px;
    -webkit-mask: radial-gradient(40% 60% at var(--va), #000 0 25%, transparent 70%);
    mask: radial-gradient(40% 60% at var(--va), #000 0 25%, transparent 70%);
}

.seg h3 {
    font-size: 1.28rem;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.seg-meta {
    margin-top: auto !important;
    display: grid;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 10.5px;
    letter-spacing: 0.04em;
}

.seg-meta div {
    display: flex;
    gap: 10px;
}

.seg-meta dt {
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    min-width: 76px;
}

.seg-meta dd {
    margin: 0;
    color: var(--soft);
}

/* extruded logo: a stack of mark-shaped slices spun in 3D, depth-sorted with the cards */
.ring-core {
    position: absolute;
    left: -42px;
    top: -104px;
    width: 84px;
    height: 92px;
    transform-style: preserve-3d;
    pointer-events: none;
}

.coin {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: coin 11s linear infinite;
}

.coin i {
    position: absolute;
    inset: 0;
    background: #4a5873;
    -webkit-mask: var(--mark) center / contain no-repeat;
    mask: var(--mark) center / contain no-repeat;
    transform: translateZ(calc((var(--z) - 5.5) * 1.7px));
}

.coin i:nth-child(odd) {
    background: #3b475e;
}

.coin i:first-child,
.coin i:last-child {
    background: linear-gradient(115deg, #7d8aa3 0%, #f4f7fc 38%, #9eb0ca 52%, #e6ecf5 66%, #5f6d88 100%);
}

.coin i:last-child {
    background-image: linear-gradient(115deg, #5f6d88 0%, #cfd9e8 40%, #2b7bff 55%, #cfd9e8 70%, #5f6d88 100%);
}

@keyframes coin {
    to {
        transform: rotateY(360deg);
    }
}

@keyframes sheen {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -120% 0;
    }
}

.ring-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 8px;
}

.ring-foot p {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.ring-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    transition: border-color 0.3s, background-color 0.3s;
}

.ring-btn:hover {
    border-color: var(--signal);
    background: rgba(43, 123, 255, 0.1);
}

/* ---------- 03 method ---------- */
.flow {
    position: relative;
    margin-bottom: clamp(40px, 5vw, 72px);
    padding: clamp(14px, 3vw, 40px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background:
        linear-gradient(rgba(64, 140, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(64, 140, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--ink-2);
    min-height: 200px;
}

.flow svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.flow .chip rect {
    fill: var(--ink-3);
    stroke: var(--line-2);
}

.flow .chip text {
    fill: var(--text);
    font-family: var(--f-sans);
    font-size: 14px;
}

.flow .chip.out rect {
    fill: rgba(43, 123, 255, 0.08);
    stroke: rgba(43, 123, 255, 0.55);
}

.flow .chip circle {
    fill: var(--muted);
}

.flow .chip.out circle {
    fill: var(--signal);
}

.flow .wire {
    fill: none;
    stroke: rgba(64, 140, 255, 0.28);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    animation: wire 1.2s linear infinite;
}

.flow .wire.out {
    stroke: rgba(43, 123, 255, 0.55);
    stroke-dasharray: none;
    animation: none;
}

@keyframes wire {
    to {
        stroke-dashoffset: -8;
    }
}

.flow .raw {
    fill: var(--ink-2);
    stroke: #c7d1e0;
    stroke-width: 1.4;
}

.flow .clean {
    fill: var(--signal);
    filter: drop-shadow(0 0 5px rgba(43, 123, 255, 0.9));
}

.flow .core-disc {
    fill: #0b111b;
    stroke: var(--line-2);
}

.flow .core-ring {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.2;
    stroke-dasharray: 2 7;
    transform-box: fill-box;
    transform-origin: center;
    animation: spin 16s linear infinite;
}

.flow .core-ring.b {
    stroke: rgba(64, 140, 255, 0.35);
    stroke-dasharray: 40 12 4 12;
    animation-duration: 28s;
    animation-direction: reverse;
}

.flow .core-mark {
    fill: var(--text);
}

.flow .lbl {
    fill: var(--muted);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.flow .lbl.hi {
    fill: var(--signal);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps li {
    padding-top: 22px;
    border-top: 1px solid var(--line-2);
}

.steps li:nth-child(2) { --rd: 0.08s; }
.steps li:nth-child(3) { --rd: 0.16s; }
.steps li:nth-child(4) { --rd: 0.24s; }

.step-n {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--signal);
}

.steps h3 {
    margin: 14px 0 10px;
    font-size: 1.45rem;
    letter-spacing: -0.03em;
}

.steps p {
    margin: 0;
    color: var(--muted);
    font-size: 15.5px;
}

/* ---------- 04 trust (paper) ---------- */
.sec-paper {
    background: var(--paper);
    color: var(--paper-ink);
    color-scheme: light;
}

.sec-paper .eyebrow {
    color: var(--paper-muted);
}

.sec-paper .eyebrow .idx {
    color: var(--signal-deep);
}

.sec-paper .sec-lede {
    color: var(--paper-muted);
}

.trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.record {
    position: sticky;
    top: 100px;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #0a0e15;
    color: #dfe6f1;
    box-shadow: 0 40px 80px -40px rgba(10, 30, 60, 0.55), 0 0 0 1px rgba(11, 15, 22, 0.08);
}

.record-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.record-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--warn);
    transition: color 0.4s;
}

.record-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.record.safe .record-state {
    color: var(--signal);
}

.record-body {
    position: relative;
    padding: 18px 16px 20px;
    font-size: 13px;
    line-height: 2;
}

.record-body::before {
    content: "{";
    display: block;
    color: var(--faint);
}

.record-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(43, 123, 255, 0.16) 75%, var(--signal) 100%);
    opacity: 0;
    pointer-events: none;
}

.record.scanning .record-body::after {
    animation: scan 1.7s var(--ease-io) forwards;
}

@keyframes scan {
    0% {
        top: -40px;
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.rec-row {
    display: flex;
    gap: 12px;
    margin: 0;
    padding-left: 16px;
    white-space: nowrap;
}

.rec-close {
    margin: 0;
    color: var(--faint);
}

.rk {
    flex: none;
    min-width: 11ch;
    color: #7f8ba0;
}

.rv {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #dfe6f1;
    transition: color 0.3s;
}

.rec-row.is-pii .rv {
    color: var(--warn);
}

.rec-row.is-new .rv {
    color: var(--faint);
}

.rec-row.done .rv {
    color: var(--signal);
}

.record figcaption {
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(24px, 3vw, 48px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.principles li {
    padding: 22px 0 34px;
    border-top: 1px solid var(--paper-line);
}

.principles li:nth-child(even) { --rd: 0.08s; }

.principles .mono {
    font-size: 11.5px;
    letter-spacing: 0.1em;
    color: var(--signal-deep);
}

.principles h3 {
    margin: 12px 0 8px;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.principles p {
    margin: 0;
    color: var(--paper-muted);
    font-size: 15.5px;
    max-width: 38ch;
}

/* ---------- 05 partners ---------- */
.sec-partners {
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--line);
}

.sec-partners::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 1100px;
    height: 1100px;
    right: -420px;
    top: 50%;
    margin-top: -550px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(43, 123, 255, 0.38) 60deg, transparent 120deg, rgba(13, 63, 176, 0.5) 190deg, transparent 250deg, rgba(94, 155, 255, 0.22) 310deg, transparent 360deg);
    filter: blur(70px);
    opacity: 0.75;
    animation: spin 26s linear infinite;
}

.partners-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: end;
}

.partners-grid .sec-title {
    margin-top: 22px;
}

.partners-copy > p {
    margin: 0;
    color: var(--soft);
    font-size: 1.075rem;
}

.ticks {
    display: grid;
    gap: 12px;
    margin: 28px 0 34px;
    padding: 0;
    list-style: none;
}

.ticks li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.ticks li::before {
    content: "";
    flex: none;
    width: 10px;
    height: 5px;
    margin-top: -3px;
    border-left: 1.5px solid var(--signal);
    border-bottom: 1.5px solid var(--signal);
    transform: rotate(-45deg);
}

/* ---------- 06 contact ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.contact-info .sec-title {
    margin: 22px 0 24px;
}

.contact-dl {
    display: grid;
    gap: 14px;
    margin: 44px 0 0;
}

.contact-dl div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.contact-dl dt {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 3px;
}

.contact-dl dd {
    margin: 0;
}

.contact-dl a {
    text-decoration: none;
    background: linear-gradient(var(--signal), var(--signal)) 0 100% / 0 1px no-repeat;
    transition: background-size 0.4s var(--ease-out);
}

.contact-dl a:hover {
    background-size: 100% 1px;
}

.form {
    display: grid;
    gap: 24px;
    padding: clamp(22px, 3vw, 40px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--ink-2);
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.fld {
    display: grid;
    gap: 8px;
}

.fld > span {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.fld input,
.fld select,
.fld textarea {
    width: 100%;
    padding: 10px 0 12px;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.fld input:focus,
.fld select:focus,
.fld textarea:focus {
    border-bottom-color: var(--signal);
    box-shadow: 0 1px 0 var(--signal);
}

.fld select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238591a6' stroke-width='1.5'/%3E%3C/svg%3E") right 2px center / 12px 8px no-repeat;
}

.fld select option {
    background: var(--ink-3);
    color: var(--text);
}

.fld textarea {
    resize: vertical;
    min-height: 124px;
    line-height: 1.5;
}

.form-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.btn-submit {
    border: 0;
}

.btn-submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.form-status {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.form-status.ok {
    color: var(--signal);
}

.form-status.err {
    color: #ff8f80;
}

/* ---------- footer + blueprint wordmark ---------- */
.ftr {
    position: relative;
    overflow: hidden;
    padding-top: clamp(40px, 5vw, 72px);
}

/* blueprint backdrop: deep navy with bright blue corners and drafting lines, fading in from the top */
.ftr::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: min(100%, 980px);
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom, rgba(150, 185, 255, 0.28) 0 3px, transparent 3px 7px) 31.9% 0 / 1px 100% no-repeat,
        repeating-linear-gradient(to bottom, rgba(150, 185, 255, 0.28) 0 3px, transparent 3px 7px) 34.3% 0 / 1px 100% no-repeat,
        repeating-linear-gradient(to bottom, rgba(150, 185, 255, 0.28) 0 3px, transparent 3px 7px) 65.2% 0 / 1px 100% no-repeat,
        repeating-linear-gradient(to bottom, rgba(150, 185, 255, 0.28) 0 3px, transparent 3px 7px) 67.5% 0 / 1px 100% no-repeat,
        repeating-linear-gradient(to right, rgba(150, 185, 255, 0.24) 0 3px, transparent 3px 7px) 0 52% / 100% 1px no-repeat,
        repeating-linear-gradient(to right, rgba(150, 185, 255, 0.24) 0 3px, transparent 3px 7px) 0 58% / 100% 1px no-repeat,
        radial-gradient(70% 38% at 100% 0%, rgba(43, 110, 230, 0.7), transparent 72%),
        radial-gradient(60% 34% at 0% 0%, rgba(20, 80, 190, 0.6), transparent 72%),
        radial-gradient(130% 42% at 50% 100%, rgba(18, 74, 170, 0.85), transparent 72%),
        radial-gradient(60% 40% at 50% 62%, #00030c, transparent 80%),
        linear-gradient(to bottom, #02122e, #010a1f 55%, #03163a);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 160px);
    mask-image: linear-gradient(to bottom, transparent, #000 160px);
}

.ftr > * {
    position: relative;
    z-index: 1;
}

.ftr-top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--line);
}

.ftr-tag {
    max-width: 16ch;
    margin: 0 0 28px;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.ftr-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ftr-cols p {
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.ftr-cols a {
    display: block;
    width: fit-content;
    padding: 5px 0;
    color: #c9d2df;
    text-decoration: none;
    transition: color 0.25s;
}

.ftr-cols a:hover {
    color: #fff;
}

.ftr-cols div:last-child a {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #b4c6e6;
}

.ftr-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    padding-block: 20px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.ftr-legal a {
    margin-left: auto;
    text-decoration: none;
}

.ftr-legal a:hover {
    color: var(--text);
}

.wm {
    position: relative;
    margin: clamp(20px, 4vw, 56px) var(--gutter) 0;
    aspect-ratio: 634 / 84;
    overflow: hidden;
}

.wm-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}


/* ---------- responsive ---------- */
@media (max-width: 1180px) {
    .clock {
        display: none;
    }

    .nav a {
        padding: 8px 10px;
    }
}

@media (max-width: 960px) {
    .hdr {
        grid-template-columns: 1fr auto;
    }

    .nav {
        display: none;
    }

    .menu-btn {
        display: inline-flex;
    }

    .sec-head .sec-title,
    .sec-head .sec-lede {
        grid-column: 1 / -1;
    }

    .bento > .tile {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .tile-aud {
        min-height: 560px;
    }

    .tile-custom {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .stat:nth-child(3) {
        border-left: 0;
    }

    .stat:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 36px;
    }

    .trust-grid,
    .partners-grid,
    .contact-grid,
    .ftr-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .record {
        position: relative;
        top: 0;
    }

    .ring-stage {
        --rx: 400px;
        --ry: 150px;
        --rz: 360px;
        height: 660px;
    }
}

@media (max-width: 640px) {
    .hdr {
        top: 8px;
        height: 56px;
        padding-left: 14px;
    }

    .hdr-right .btn-sm {
        display: none;
    }

    .hero-inner {
        padding-top: 120px;
        padding-bottom: 76px;
    }

    .hero-title {
        font-size: clamp(2.9rem, 13.6vw, 4.4rem);
        margin: 18px 0 26px;
    }

    .hero-ctas {
        width: 100%;
    }

    .hero-ctas .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .hud {
        gap: 18px;
        padding-block: 12px;
    }

    .hud-fig,
    .hud-xy,
    .hud-hint {
        display: none;
    }

    .tile-aud {
        min-height: 520px;
    }

    .stat-n {
        font-size: 2.6rem;
    }

    .stat {
        padding: 20px 18px;
    }

    .steps,
    .principles,
    .field-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ring-stage {
        --cw: 156px;
        --ch: 206px;
        --rx: 205px;
        --ry: 112px;
        --rz: 220px;
        height: 500px;
        perspective: 1000px;
    }

    .ring {
        top: calc(50% - 40px);
    }

    .ring-core {
        left: -28px;
        top: -92px;
        width: 56px;
        height: 60px;
    }

    .seg {
        padding: 12px;
    }

    .seg-top {
        font-size: 9.5px;
    }

    .seg h3 {
        font-size: 0.98rem;
    }

    .seg-viz {
        height: 64px;
        margin: 10px 0 12px;
    }

    .seg-meta div + div {
        display: none;
    }

    .seg-meta dt {
        min-width: 60px;
    }


    .record-body {
        font-size: 12px;
    }

    .rk {
        min-width: 9ch;
    }

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

    .ftr-legal a {
        margin-left: 0;
    }
}

/* ==========================================================================
   v2 — "you are the data": page-wide GL field, pinned method chapter,
   classifier cursor, spec sheets, session receipt
   ========================================================================== */
:root {
    --f-serif: "Instrument Serif", "Times New Roman", serif;
}

/* ---------- smooth scroll (Lenis) ---------- */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* ---------- the page field ---------- */
.gl-field {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: 0;
    pointer-events: none;
}

.gl .gl-field {
    display: block;
}

main,
.ftr {
    position: relative;
    z-index: 1;
}

.gl .hero > .field {
    display: none;
}

.stat {
    background: rgba(5, 7, 11, 0.55);
}


.ticker-js .ticker-track {
    animation: none;
    will-change: transform;
}

/* ---------- serif accent ---------- */
.sec-title em,
.chapter-title em,
.hero-title em {
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.012em;
}

.sec-title em,
.chapter-title em {
    font-size: 1.07em;
    color: var(--signal);
}

.sec-paper .sec-title em {
    color: var(--signal-deep);
}

.sec-title .line > span {
    padding-right: 0.1em;
}

/* ---------- hero headline, split into characters ---------- */
.hero-title .line {
    padding-top: 0.08em;
    margin-top: -0.08em;
}

.hero-title em {
    font-size: 1.1em;
    line-height: 0.8;
}

.hero-title em,
.hero-title em .ch {
    background-image: linear-gradient(180deg, #d8f1ff 14%, #33b6ff 58%, #0a6fd6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-title.split em {
    background: none;
}

.hero-title.split .line > span {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: transparent;
}

.js:not(.ready) .hero-title.split .line > span {
    transform: none;
}

.hero-title .wd {
    display: inline-block;
    white-space: nowrap;
}

.hero-title .ch {
    display: inline-block;
    padding: 0.1em 0.07em 0.17em 0;
    margin: -0.1em -0.07em -0.17em 0;
    background: linear-gradient(180deg, #ffffff 30%, #a7b5cc 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: transform 1.25s var(--ease-out), opacity 0.9s var(--ease-out);
    transition-delay: calc(0.08s + var(--ci) * 26ms);
}

.js:not(.ready) .hero-title .ch {
    opacity: 0;
    transform: translate3d(0, 115%, 0) rotate(9deg);
}

/* ---------- method chapter (pinned) ---------- */
.chapter {
    position: relative;
}

.chapter-pin {
    display: none;
}

.chapter-fallback {
    padding-block: clamp(88px, 10vw, 150px);
}

.gl .chapter {
    height: 460vh;
}

.gl .chapter-pin {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

.gl .chapter-fallback {
    display: none;
}

.chapter-pin::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--ink) 0%, rgba(5, 7, 11, 0.9) 28%, rgba(5, 7, 11, 0) 48%),
        linear-gradient(to bottom, var(--ink) 0%, rgba(5, 7, 11, 0) 14%, rgba(5, 7, 11, 0) 86%, var(--ink) 100%);
}

.chapter-copy {
    position: absolute;
    z-index: 3;
    left: calc(var(--gutter) + 18px);
    top: 50%;
    width: min(34vw, 440px);
    transform: translateY(-50%);
}

.chapter-title {
    margin: 20px 0 34px;
    font-size: clamp(2.2rem, 3.7vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.chapter-steps {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chapter-steps li {
    display: grid;
    grid-template-columns: 38px 1fr;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    opacity: 0.34;
    transition: opacity 0.5s;
}

.chapter-steps li.done {
    opacity: 0.55;
}

.chapter-steps li.on {
    opacity: 1;
}

.chapter-steps li > .mono {
    padding-top: 6px;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--signal);
}

.chapter-steps h3 {
    font-size: 1.4rem;
    letter-spacing: -0.03em;
}

.st-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s var(--ease-out);
}

.st-body > p {
    overflow: hidden;
    margin: 0;
    color: var(--soft);
    font-size: 15px;
}

.chapter-steps li.on .st-body {
    grid-template-rows: 1fr;
}

.chapter-steps li.on .st-body > p {
    padding-top: 8px;
}

.chapter-rail {
    position: absolute;
    left: -18px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.chapter-rail i {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--signal-deep), var(--signal), var(--signal-hi));
    transform-origin: top;
    transform: scaleY(var(--p, 0));
}

.ch-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.ch-stage {
    position: absolute;
    left: 46%;
    right: 6%;
    top: 12%;
    bottom: 12%;
}

.ch-ev {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(5, 7, 11, 0.74);
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--soft);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 0.45s, transform 0.6s var(--ease-out);
}

.ch-ev i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c7d1e0;
    box-shadow: 0 0 8px rgba(199, 209, 224, 0.8);
}

.ch-ev.on {
    opacity: 1;
    transform: none;
}

.ch-scan {
    position: absolute;
    left: 0;
    bottom: 13%;
    margin-left: 14px;
    padding: 6px 10px;
    border: 1px solid rgba(43, 123, 255, 0.55);
    border-radius: 2px;
    background: rgba(0, 30, 50, 0.72);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--text);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

.ch-scan b {
    margin-right: 8px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal-hi);
}

.ch-scan.on {
    opacity: 1;
}

.ch-coh {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px dashed rgba(64, 140, 255, 0.55);
    opacity: 0;
    transition: opacity 0.5s;
}

.ch-coh::before,
.ch-coh::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1px solid var(--signal-hi);
}

.ch-coh::before {
    left: -4px;
    top: -4px;
}

.ch-coh::after {
    right: -4px;
    bottom: -4px;
}

.ch-coh span {
    position: absolute;
    left: -1px;
    bottom: 100%;
    margin-bottom: 8px;
    padding: 3px 7px;
    border: 1px solid var(--line-2);
    background: rgba(5, 7, 11, 0.78);
    font-size: 10.5px;
    color: var(--text);
    white-space: nowrap;
}

.ch-coh span b {
    margin-left: 6px;
    font-weight: 500;
    color: var(--signal);
}

.ch-coh.on {
    opacity: 1;
}

.ch-dest {
    position: absolute;
    left: 0;
    top: 0;
    padding: 7px 13px 7px 27px;
    border: 1px solid rgba(43, 123, 255, 0.6);
    border-radius: 2px;
    background: rgba(0, 18, 34, 0.82);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--text);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.6s;
    transition-delay: calc(var(--d) * 110ms);
    will-change: transform;
}

.ch-dest::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--signal-hi);
    box-shadow: 0 0 10px var(--signal-hi);
}

.ch-dest.on {
    opacity: 1;
}

.ch-cap {
    position: absolute;
    z-index: 3;
    right: var(--gutter);
    bottom: 22px;
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.ch-cap span {
    color: var(--signal);
    margin-right: 10px;
}

@media (max-aspect-ratio: 21/20) {
    .chapter-pin::before {
        background: linear-gradient(to bottom, var(--ink) 0%, rgba(5, 7, 11, 0.94) 40%, rgba(5, 7, 11, 0) 54%, rgba(5, 7, 11, 0) 94%, var(--ink) 100%);
    }

    .chapter-copy {
        left: var(--gutter);
        right: var(--gutter);
        top: 86px;
        width: auto;
        transform: none;
    }

    .chapter-title {
        margin: 14px 0 16px;
        font-size: clamp(1.9rem, 8vw, 2.6rem);
    }

    .chapter-steps li:not(.on) {
        display: none;
    }

    .chapter-steps li {
        border-top: 0;
        padding: 0;
    }

    .chapter-rail {
        position: relative;
        left: 0;
        width: 100%;
        height: 2px;
        margin-top: 14px;
    }

    .chapter-rail i {
        transform-origin: left;
        transform: scaleX(var(--p, 0));
    }

    .ch-stage {
        left: 5%;
        right: 5%;
        top: 55%;
        bottom: 8%;
    }

    .ch-scan {
        bottom: auto;
        top: 50%;
    }

    .ch-dest {
        padding: 5px 8px 5px 19px;
        font-size: 9.5px;
    }

    .ch-dest::before {
        left: 7px;
        width: 6px;
        height: 6px;
        margin-top: -3px;
    }

    .ch-coh span {
        font-size: 9px;
    }

    .ch-coh span b {
        display: none;
    }

    .ch-cap {
        display: none;
    }
}

@media (min-width: 1700px) and (min-aspect-ratio: 21/20) {
    .chapter-copy {
        width: min(30vw, 620px);
    }

    .chapter-title {
        font-size: clamp(3.6rem, 3.3vw, 4.9rem);
    }

    .chapter-steps li {
        grid-template-columns: 48px 1fr;
        padding: 18px 0;
    }

    .chapter-steps h3 {
        font-size: 1.8rem;
    }

    .chapter-steps li > .mono {
        font-size: 13px;
    }

    .st-body > p {
        font-size: 17.5px;
    }

    .ch-ev,
    .ch-scan,
    .ch-coh span {
        font-size: 12.5px;
    }

    .ch-dest {
        font-size: 13px;
    }
}

/* ---------- classifier cursor ---------- */
.cursor {
    position: fixed;
    inset: 0;
    z-index: 400;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.has-cursor .cursor.on {
    opacity: 1;
}

.cursor > * {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
}

.cursor-dot::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 28%, var(--signal-hi) 60%, var(--signal) 100%);
    box-shadow: 0 0 14px 2px rgba(94, 155, 255, 0.85), 0 0 34px 8px rgba(43, 123, 255, 0.35);
    animation: corepulse 1.8s ease-in-out infinite;
}

@keyframes corepulse {
    50% {
        transform: scale(1.35);
        box-shadow: 0 0 18px 4px rgba(94, 155, 255, 0.95), 0 0 46px 12px rgba(43, 123, 255, 0.4);
    }
}

/* particle layer: motes that scatter from the pointer + sparks that trail it */
.fx-particles {
    position: fixed;
    inset: 0;
    z-index: 390;
    pointer-events: none;
}

.cursor-ring::before {
    content: "";
    position: absolute;
    left: -17px;
    top: -17px;
    width: 34px;
    height: 34px;
    border: 2px dotted rgba(120, 175, 255, 0.8);
    border-radius: 50%;
    transition: transform 0.4s var(--ease-out), background-color 0.3s, border-color 0.3s;
    animation: orbit 5s linear infinite;
}

@keyframes orbit {
    to {
        rotate: 360deg;
    }
}

.cursor-ring::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    font-family: var(--f-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--on-signal);
    opacity: 0;
    transition: opacity 0.25s;
}

.cursor.m-link .cursor-ring::before {
    transform: scale(1.5);
    animation-duration: 1.6s;
    border-color: var(--signal);
    background: rgba(43, 123, 255, 0.12);
}

.cursor.m-open .cursor-ring::before {
    transform: scale(2.2);
    border-color: var(--signal);
    background: var(--signal);
}

.cursor.m-open .cursor-ring::after {
    content: "open";
    opacity: 1;
}

.cursor.m-drag .cursor-ring::before {
    transform: scale(2.3);
    border-color: transparent;
    background: rgba(232, 237, 245, 0.94);
}

.cursor.m-drag .cursor-ring::after {
    content: "\2190  drag  \2192";
    opacity: 1;
}

.cursor.m-open .cursor-dot,
.cursor.m-drag .cursor-dot {
    opacity: 0;
}

.cursor.down .cursor-ring::before {
    transform: scale(0.8);
}

.has-cursor .cursor.m-text {
    opacity: 0;
}

.cursor-tag {
    padding: 6px 9px 7px;
    border: 1px dashed rgba(64, 140, 255, 0.42);
    border-radius: 2px;
    background: rgba(5, 7, 11, 0.8);
    font-size: 10.5px;
    line-height: 1.45;
    letter-spacing: 0.03em;
    color: var(--soft);
    white-space: nowrap;
}

.cursor-tag b {
    display: block;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--signal);
}

.cursor.pulse .cursor-tag {
    animation: tagpulse 0.6s var(--ease-out);
}

@keyframes tagpulse {
    from {
        border-color: var(--signal-hi);
        box-shadow: 0 0 0 5px rgba(94, 155, 255, 0.18);
        color: #fff;
    }
}

.has-cursor,
.has-cursor * {
    cursor: none !important;
}

.has-cursor input,
.has-cursor textarea {
    cursor: text !important;
}

.has-cursor select {
    cursor: default !important;
}

/* ---------- spec sheet ---------- */
.seg {
    cursor: pointer;
}

.seg:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 4px;
}

.sheet {
    width: min(1180px, calc(100vw - 2 * var(--gutter)));
    max-width: none;
    max-height: calc(100dvh - 40px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    overflow: visible;
}

.sheet::backdrop {
    background: rgba(3, 5, 9, 0.74);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fadein 0.5s ease both;
}

.sheet-panel {
    max-height: calc(100dvh - 40px);
    overflow: auto;
    padding: clamp(20px, 3vw, 40px);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: #0a0e15;
    box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.85);
}

.sheet-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.sheet-top b {
    font-weight: 500;
    color: var(--signal);
}

.sheet-close {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: none;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.3s;
}

.sheet-close:hover {
    border-color: var(--signal);
}

.sheet-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 4vw, 56px);
    padding-top: 28px;
}

.sheet[open] .sheet-grid > * {
    animation: rise 0.8s var(--ease-out) both;
}

.sheet[open] .sheet-side {
    animation-delay: 0.1s;
}

.sheet-main h2 {
    max-width: 16ch;
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.sheet-def {
    max-width: 52ch;
    margin: 18px 0 26px;
    font-size: 1.05rem;
    color: var(--soft);
}

.sheet-spec {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    margin: 0 0 8px;
}

.sheet-spec div {
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.sheet-spec dt,
.sheet-h {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.sheet-spec dd {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text);
}

.sheet-h {
    margin: 22px 0 10px;
}

.sheet .chips {
    margin-top: 0;
}

.sheet-uses {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--soft);
}

.sheet-uses li::before {
    content: "\2192";
    margin-right: 10px;
    color: var(--signal);
}

.sheet-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sheet-viz {
    position: relative;
    height: 240px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #070a10;
}

.sheet-viz span {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.sheet-rows {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sheet-rows caption {
    padding-bottom: 8px;
    text-align: left;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.sheet-rows th {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--faint);
}

.sheet-rows td {
    padding: 7px 8px 7px 0;
    border-bottom: 1px solid var(--line);
    color: var(--soft);
}

.sheet-rows td:first-child {
    color: var(--signal);
}

.sheet-cta {
    align-self: flex-start;
}

.sheet-note {
    margin: 26px 0 0;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--faint);
}

::view-transition-group(seg-sheet) {
    animation-duration: 0.75s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(seg-sheet),
::view-transition-new(seg-sheet) {
    height: 100%;
    animation-duration: 0.4s;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.45s;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }
}

@media (max-width: 760px) {
    .sheet-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sheet-viz {
        height: 180px;
    }
}

/* ---------- session receipt ---------- */
html:not(.js) .receipt {
    display: none;
}

.receipt {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    padding-block: clamp(48px, 6vw, 96px) clamp(72px, 9vw, 130px);
}

.receipt-copy .sec-title {
    margin: 22px 0;
}

.receipt-copy .sec-lede {
    margin-bottom: 30px;
}

.receipt-copy .btn[disabled] {
    opacity: 0.7;
    cursor: progress;
}

/* zigzag tear along the bottom edge: a repeated conic mask */
.receipt-card {
    --z: 7px;
    margin: 0;
    padding: 18px 18px calc(22px + var(--z));
    border: 1px solid var(--line-2);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: rgba(9, 13, 20, 0.94);
    font-size: 12px;
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
}

.receipt-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line-2);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.receipt-top span:last-child {
    color: var(--signal);
}

.receipt-map {
    width: 100%;
    height: 200px;
    margin: 14px 0 12px;
}

.receipt-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
    margin: 0;
}

.receipt-dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.receipt-dl dt {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.receipt-dl dd {
    margin: 0;
    text-align: right;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.receipt-dl .hl dd {
    color: var(--signal);
}

@media (max-width: 960px) {
    .receipt {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .receipt-dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .receipt-map {
        height: 170px;
    }
}

@media (min-width: 961px) and (max-width: 1240px) {
    .ring-stage {
        --ry: 150px;
        --rz: 360px;
        height: 640px;
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }

    .ticker-track {
        animation: none;
    }
}