/* Netrasya Lens — shared stylesheet for the marketing site.
   "Archive → Answer": navy is the archive, paper is the cited answer, and the
   ground only changes where that changes. Mono is the display face.
   Colour meanings and the page map live in website/README.md. */

:root {
    --navy:#0B1724; --navy-1:#0D1B2A; --navy-2:#132537; --navy-3:#1B3348; --navy-4:#27455F;
    --paper:#EEF2F3; --paper-2:#E3E9EB; --white:#FFFFFF;
    --ink:#10171F; --ink-2:#38495A; --ink-3:#526676;
    --on-navy:#E6EEF3; --on-navy-2:#9DB2C2; --on-navy-3:#7C93A6;
    --rule:#D3DBDE; --rule-2:#C0CBD0;
    --teal:#00C4A3; --teal-ink:#0A6A5A; --teal-deep:#075247;
    --teal-20:rgba(0,196,163,.22);
    --tealink-08:rgba(10,106,90,.08); --tealink-20:rgba(10,106,90,.2);
    --flag:#A9451C; --flag-bright:#E9A163; --flag-bg:#F7E9E0; --flag-bd:#E2C3AF;
    --mono:'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --r:3px; --r-md:6px; --r-lg:10px;
    --ease:.16s cubic-bezier(.4,0,.2,1);
    --maxw:1120px; --pad:32px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--sans); font-size: 17px; line-height: 1.65;
    color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased;
}
::selection { background: var(--teal-20); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.band { padding: 116px 0; }
.band-2 { background: var(--paper-2); border-top: 1px solid var(--rule); }
.dark { background: var(--navy-1); color: var(--on-navy); }

/* ── Type ────────────────────────────────────────────────────────────────── */
.h1, .h2, .h3, .pull {
    font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.06; color: var(--ink);
}
.h1 { font-size: clamp(24px, 6.1vw, 54px); }
.h2 { font-size: clamp(21px, 3.7vw, 38px); line-height: 1.12; }
.h3 { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; }
.pull { font-size: clamp(19px, 2.9vw, 32px); line-height: 1.28; max-width: 24ch; }
.pull .mk { color: var(--teal-ink); }
.dark .h1, .dark .h2, .dark .h3, .dark .pull { color: var(--on-navy); }
.dark .pull .mk { color: var(--teal); }

.label {
    display: block; font-family: var(--mono); font-weight: 600; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink);
}
.dark .label { color: var(--teal); }

.lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.dark .lede { color: var(--on-navy-2); }
.val { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.head { margin-bottom: 52px; }
.head .h2 { margin: 16px 0 0; }
.head .lede { margin-top: 20px; max-width: 54ch; }

/* ── Controls ────────────────────────────────────────────────────────────── */
.cta, .cta-ghost {
    display: inline-flex; align-items: center; gap: 10px; min-height: 50px;
    padding: 14px 26px; border-radius: var(--r-md); text-decoration: none;
    font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
    border: 1px solid transparent;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.cta { background: var(--teal); color: var(--navy); }
.cta:hover { background: #23D9BB; }
.cta-ghost { border-color: var(--rule-2); color: var(--ink); }
.cta-ghost:hover { border-color: var(--ink-3); background: var(--white); }
.dark .cta-ghost { border-color: var(--navy-4); color: var(--on-navy); }
.dark .cta-ghost:hover { border-color: var(--on-navy-3); background: var(--navy-2); }
.cta .go, .cta-ghost .go, .more .go { transition: transform var(--ease); }
.cta:hover .go, .cta-ghost:hover .go, .more:hover .go { transform: translateX(4px); }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.more {
    display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
    font-family: var(--mono); font-weight: 600; font-size: 14px;
    color: var(--teal-ink); text-decoration: none;
    border-bottom: 1.5px solid var(--tealink-20); padding-bottom: 2px;
    transition: border-color var(--ease);
}
.more:hover { border-bottom-color: var(--teal-ink); }
.dark .more { color: var(--teal); border-bottom-color: var(--navy-4); }
.dark .more:hover { border-bottom-color: var(--teal); }

/* ── Nav: navy on every page, so the logo always sits on its dark ground ──── */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(13,27,42,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--navy-3); }
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); height: 66px; display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -0.03em; color: var(--white); }
.brand svg { width: 25px; height: 25px; flex-shrink: 0; }
.brand i { font-style: normal; color: var(--teal); }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
/* :not(.nav-cta) matters — a bare `.nav-links a` outranks `.nav-cta` and would
   repaint the button's label in the link colour. */
.nav-links a:not(.nav-cta) { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--on-navy-2); text-decoration: none; font-family: var(--mono); font-size: 13px; transition: color var(--ease); }
.nav-links a:not(.nav-cta):hover, .nav-links a:not(.nav-cta)[aria-current="page"] { color: var(--white); }
.nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 10px 18px; border-radius: var(--r-md); background: var(--teal); color: var(--navy); text-decoration: none; white-space: nowrap; font-family: var(--mono); font-weight: 600; font-size: 13px; transition: background var(--ease); }
.nav-cta:hover { background: #23D9BB; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 88px 0 128px; background:
    radial-gradient(88% 60% at 50% 0%, rgba(0,196,163,.10), transparent 62%), var(--navy-1); }
.hero .h1 { margin: 22px 0 0; }
.hero .h1 .em { color: var(--teal); }
.hero .lede { margin-top: 26px; max-width: 48ch; }
.page-head { padding: 76px 0 64px; }
/* two navy blocks running together need one gap, not two */
.page-head.dark + .band.dark { padding-top: 40px; }
.page-head .h1 { margin: 20px 0 0; font-size: clamp(23px, 4.6vw, 42px); }
.page-head .lede { margin-top: 22px; max-width: 56ch; }

/* ── The console — the product, at size ──────────────────────────────────── */
.console { margin-top: 60px; background: var(--white); border-radius: var(--r-lg); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); overflow: hidden; }
.c-top { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.c-top .label { color: var(--ink-3); letter-spacing: .14em; font-size: 10px; }
.c-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.c-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-ink); }
.c-body { padding: 26px clamp(18px, 3vw, 34px) 30px; }

.c-query { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--rule-2); border-radius: var(--r-md); padding: 10px 10px 10px 16px; }
.c-query .q { flex: 1; font-family: var(--mono); font-size: clamp(13px, 1.5vw, 15px); color: var(--ink); line-height: 1.45; }
.c-ask { flex-shrink: 0; min-height: 40px; padding: 9px 18px; border: 0; border-radius: var(--r); background: var(--navy-1); color: var(--white); font-family: var(--mono); font-weight: 600; font-size: 13px; cursor: pointer; transition: background var(--ease), transform .12s ease; }
.c-ask:hover { background: var(--navy-3); }
.c-ask:active { transform: scale(.95); }

.c-out { margin-top: 24px; }
.c-out .label { color: var(--ink-3); margin-bottom: 12px; }
.c-text { font-size: clamp(15px, 1.7vw, 19px); line-height: 1.58; color: var(--ink); }
.c-text .val { background: var(--tealink-08); border-bottom: 1.5px solid var(--tealink-20); padding: 1px 5px; border-radius: var(--r); color: var(--teal-deep); font-weight: 600; }
.c-ref { font-family: var(--mono); font-size: .7em; font-weight: 600; color: var(--teal-ink); vertical-align: super; }
.c-srcs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
.c-srcs .label { margin: 0 4px 0 0; color: var(--ink-3); }
.src { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--teal-deep); background: var(--tealink-08); border: 1px solid var(--tealink-20); padding: 5px 10px; border-radius: var(--r); }
.src b { font-weight: 600; }
.c-note { margin-top: 16px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink-3); display: flex; align-items: flex-start; gap: 9px; }
.c-note::before { content: ""; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--teal-ink); flex-shrink: 0; }

/* The honest empty answer, marked as a flag rather than an error. */
.c-out.abstain .c-text { color: var(--flag); font-family: var(--mono); font-weight: 500; }
.c-out.abstain .c-srcs { border-top-color: var(--flag-bd); }
.c-out.abstain .c-note { color: var(--flag); }
.c-out.abstain .c-note::before { background: var(--flag); }
.c-out.abstain .src { color: var(--flag); background: var(--flag-bg); border-color: var(--flag-bd); }

.c-try { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.c-try .label { color: var(--on-navy-3); margin-right: 4px; }
.pick { min-height: 40px; padding: 9px 15px; border-radius: var(--r-md); border: 1px solid var(--navy-4); background: transparent; color: var(--on-navy-2); font-family: var(--mono); font-size: 12.5px; cursor: pointer; transition: border-color var(--ease), color var(--ease), background var(--ease); }
.pick:hover { color: var(--on-navy); border-color: var(--on-navy-3); }
.pick[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--navy); font-weight: 600; }
.console a:focus-visible, .console button:focus-visible { outline-color: var(--teal-ink); }

/* ── Title block — the seam between archive and answer ───────────────────── */
.seam { background: linear-gradient(to bottom, var(--navy-1) 0 50%, var(--paper) 50% 100%); }
.plate { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); border: 1px solid var(--rule-2); border-radius: var(--r-md); box-shadow: 0 20px 44px -32px rgba(11,23,36,.5); }
.plate-cell { padding: 24px 24px 26px; border-right: 1px solid var(--rule); }
.plate-cell:last-child { border-right: 0; }
.plate-cell .label { color: var(--ink-3); font-size: 10px; }
.plate-v { display: block; margin: 11px 0 6px; font-family: var(--mono); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.plate-cell p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

/* ── Comparison — the claim grid that cites itself ───────────────────────── */
.scroll-x { overflow-x: auto; }
table.cmp { width: 100%; min-width: 620px; border-collapse: collapse; text-align: left; }
table.cmp th, table.cmp td { padding: 20px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.cmp thead th { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-2); padding-bottom: 12px; }
table.cmp thead th.us { color: var(--teal-ink); }
.cmp-k { width: 20%; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.cmp-us { width: 44%; background: var(--white); color: var(--ink); font-size: 16px; line-height: 1.55; }
.cmp-them { width: 36%; color: var(--ink-3); font-size: 15.5px; line-height: 1.55; }

/* Inline citation on our own claims — the page does what the product does. */
.cx { margin-left: 7px; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--tealink-20); border-radius: var(--r); background: var(--tealink-08); color: var(--teal-ink); font-family: var(--mono); font-weight: 600; font-size: 11px; cursor: pointer; vertical-align: 2px; transition: background var(--ease), border-color var(--ease); }
.cx:hover { background: var(--tealink-20); border-color: var(--teal-ink); }
.cx[aria-expanded="true"] { background: var(--teal-ink); border-color: var(--teal-ink); color: var(--white); }
tr.cx-note td { background: var(--paper-2); padding: 0; }
.cx-in { padding: 20px; border-left: 2px solid var(--teal-ink); }
.cx-in .label { color: var(--teal-ink); margin-bottom: 8px; }
.cx-in p { font-size: 15px; line-height: 1.66; color: var(--ink-2); max-width: 76ch; }

/* ── Review grid ─────────────────────────────────────────────────────────── */
.grid-frame { background: var(--white); border: 1px solid var(--rule-2); border-radius: var(--r-md); overflow: hidden; }
.gf-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.gf-top .label { color: var(--ink-3); font-size: 10px; }
.gf-csv { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-3); border: 1px solid var(--rule-2); padding: 5px 11px; border-radius: var(--r); }
table.rg { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }
table.rg th, table.rg td { padding: 15px 18px; border-bottom: 1px solid var(--rule); }
table.rg th { font-family: var(--mono); font-weight: 600; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
table.rg tbody tr:last-child td { border-bottom: 0; }
.rg-doc { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.cell .gv { font-family: var(--mono); font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.pg { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 10px; color: var(--teal-deep); background: var(--tealink-08); border: 1px solid var(--tealink-20); padding: 1px 6px; border-radius: var(--r); }
.cell.flagged { background: var(--flag-bg); }
.cell.flagged .pg { color: var(--flag); background: rgba(169,69,28,.07); border-color: var(--flag-bd); }
.cap { margin-top: 18px; font-family: var(--mono); font-size: 11.5px; line-height: 1.75; color: var(--ink-3); max-width: 700px; }

/* ── Steps — a real sequence, so it is numbered ──────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { padding-top: 28px; border-top: 1px solid var(--rule-2); position: relative; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 36px; height: 3px; background: var(--teal-ink); }
.step .label { color: var(--ink-3); margin-bottom: 14px; }
.step .h3 { margin-bottom: 10px; font-size: 20px; }
.step p { font-size: 15.5px; line-height: 1.62; color: var(--ink-3); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.qa { padding: 26px 0; border-top: 1px solid var(--rule-2); }
.qa .h3 { margin-bottom: 10px; font-size: 16px; }
.qa p { font-size: 15px; line-height: 1.68; color: var(--ink-3); }

/* ── Pilot ───────────────────────────────────────────────────────────────── */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: start; }
.terms { border-top: 1px solid var(--navy-3); margin-top: 26px; }
.term { display: grid; grid-template-columns: 132px 1fr; gap: 24px; padding: 17px 0; border-bottom: 1px solid var(--navy-3); }
.term dt { font-family: var(--mono); font-weight: 600; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--teal); padding-top: 4px; }
.term dd { font-size: 15.5px; line-height: 1.58; color: var(--on-navy-2); }
.fine { margin-top: 22px; font-size: 14.5px; line-height: 1.65; color: var(--on-navy-3); }
.incl { list-style: none; display: grid; gap: 13px; margin-top: 26px; }
.incl li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--on-navy-2); }
.incl svg { width: 16px; height: 16px; margin-top: 5px; color: var(--teal); }
.bond { margin-top: 32px; border: 1px solid var(--navy-4); border-left: 3px solid var(--teal); border-radius: var(--r-md); padding: 24px 26px; background: var(--navy-2); }
.bond .label { margin-bottom: 10px; }
.bond p { font-size: 15px; line-height: 1.66; color: var(--on-navy-2); }
.sig { display: block; font-family: var(--mono); font-size: 13px; color: var(--teal-ink); margin-top: 22px; }
.dark .sig { color: var(--teal); }
.stack p + p { margin-top: 15px; }
.pilot-name { font-size: 20px; }
.who p { font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 54ch; }
.dark .who p { color: var(--on-navy-2); }
.label + .pull, .label + p { margin-top: 22px; }

/* ── Close + footer ──────────────────────────────────────────────────────── */
.close { padding: 108px 0 96px; }
.close .h2 { margin: 20px 0 20px; }
.close .lede { max-width: 50ch; }
.close-note { margin-top: 24px; font-family: var(--mono); font-size: 12px; line-height: 1.75; color: var(--on-navy-3); }
.foot { border-top: 1px solid var(--navy-3); padding: 32px 0; }
.foot-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--on-navy); }
.foot-brand svg { width: 22px; height: 22px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.foot-links a { color: var(--on-navy-3); text-decoration: none; font-size: 14px; transition: color var(--ease); }
.foot-links a:hover { color: var(--on-navy); }
.foot-links span { font-family: var(--mono); font-size: 11.5px; color: var(--on-navy-3); }

/* ── Focus ───────────────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: var(--r); }
.dark a:focus-visible, .dark button:focus-visible { outline-color: var(--teal); }

/* ── Motion: one orchestrated moment, and the grid citing itself ─────────── */
@keyframes answerIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes stamp { 0% { opacity: 0; transform: scale(.6); } 64% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
.c-out.run .c-text { animation: answerIn .42s cubic-bezier(.2,.7,.2,1) both; }
.c-out.run .c-srcs { animation: answerIn .42s cubic-bezier(.2,.7,.2,1) .14s both; }
.c-out.run .c-note { animation: answerIn .42s ease .28s both; }
.c-out.run .src { animation: stamp .4s cubic-bezier(.2,.85,.3,1.3) .2s both; }
.grid-frame .cell .pg { opacity: 0; }
.grid-frame.seen .cell .pg { animation: stamp .42s cubic-bezier(.2,.85,.3,1.3) both; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .c-out.run .c-text, .c-out.run .c-srcs, .c-out.run .c-note, .c-out.run .src,
    .grid-frame.seen .cell .pg { animation: none; opacity: 1; transform: none; }
    .grid-frame .cell .pg { opacity: 1; }
    .cta:hover .go, .cta-ghost:hover .go, .more:hover .go, .c-ask:active { transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .band { padding: 84px 0; }
    .hero { padding: 64px 0 104px; }
    .page-head { padding: 56px 0 48px; }
    .close { padding: 84px 0 76px; }
    .plate { grid-template-columns: 1fr 1fr; }
    .plate-cell:nth-child(2) { border-right: 0; }
    .plate-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
    .two { grid-template-columns: 1fr; gap: 48px; }
    .steps { grid-template-columns: 1fr; gap: 32px; }
    .faq { grid-template-columns: 1fr; gap: 0; }
    .nav-links { gap: 18px; }
}
/* Below this the bar cannot hold brand + links + button without forcing the whole
   document wider than the viewport. The hero and the footer both carry the links. */
@media (max-width: 720px) {
    .nav-links a:not(.nav-cta) { display: none; }
}
@media (max-width: 620px) {
    :root { --pad: 20px; }
    body { font-size: 16px; }
    .console { margin-top: 42px; }
    .c-top { flex-wrap: wrap; gap: 4px 12px; }
    .c-live { margin-left: 0; }
    .c-query { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
    .c-ask { width: 100%; }
    .plate { grid-template-columns: 1fr; }
    .plate-cell { border-right: 0; border-bottom: 1px solid var(--rule); }
    .plate-cell:last-child { border-bottom: 0; }
    .term { grid-template-columns: 1fr; gap: 6px; }
    .foot-in { justify-content: flex-start; }
}
@media (max-width: 430px) {
    .brand { font-size: 15px; }
    .brand svg { width: 22px; height: 22px; }
    .nav-cta { padding: 10px 14px; font-size: 12.5px; }
}