/* ============================================================ PURSUIT · EDITORIAL (landing page only) Loaded AFTER css/nova.css and scoped entirely to body.ed, so every other page on the site keeps the Nova dark shell untouched. The thesis: this page is a printed prospectus, not a dashboard. A warm paper field, one serif voice, hairline rules, and the PRODUCT ITSELF — real .xlsx / .docx / .pdf output from a real run — as the only imagery. The dark objects (video frames, the live pipeline terminal) stay dark and sit ON the paper like plates in a book. No gradient text, no glow, no neon, no fake telemetry. ============================================================ */ body.ed{ /* paper */ --p-paper:#f2efe8; --p-paper2:#e9e4d9; --p-card:#fbf9f5; --p-dark:#12161b; /* ink — every grey here clears WCAG AA (4.5:1) as small text on every paper ground defined above. --p-ink3 was #767d87 (3.62:1 on paper) and --p-ink4 was #9aa0a8 (2.30:1): --p-ink3 carries the .kicker that opens nearly every section on every page, so the single most-repeated label on the site was failing AA sitewide. AA at this size caps how light the de-emphasis ladder can go — --p-ink4 is the floor, not a free slot. scripts/site-guard.mjs re-measures every visible text node on every page against its computed background; do not lighten these without re-running it. */ --p-ink:#15181c; --p-ink2:#414851; --p-ink3:#5c6169; --p-ink4:#666c75; /* rules */ --p-rule:#dcd6c8; --p-rule2:#c6bfae; --p-rule3:rgba(21,24,28,.55); /* one accent, drawn from the Pursuit mark's navy — never a gradient */ --p-accent:#12455f; --p-accent2:#1d6484; --p-accentwash:rgba(18,69,95,.07); /* the mark is drawn on paper in the same accent as everything else on it: no neon tip. These override css/nova.css's dark-shell defaults for the inline on every body.ed page. */ --mark-mid:var(--p-accent); --mark-tip:var(--p-accent2); /* the flag colour is the product's own semantic: oxide, not neon */ --p-flag:#9c3317; --p-flagwash:rgba(156,51,23,.08); --p-serif:"Newsreader",Georgia,"Iowan Old Style","Times New Roman",serif; --p-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --p-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; --p-rail:196px; color-scheme:light; background:var(--p-paper); color:var(--p-ink); font-family:var(--p-sans); font-size:17px; line-height:1.6; /* ---- seal the dark-shell palette --------------------------------- Nova's tokens are declared on :root, so they are still in scope on these paper pages. Any page-local rule or inline style that names one — style="color:var(--cyan)", .flagcard .ft{color:var(--ink)} — resolves to the DARK theme's value on a cream card. Inline styles cannot be overridden by a rule at all (see the #libgrid note near the end of this file), so the only fix that holds is to retarget the PROPERTIES here, at the one place the paper theme is declared. This is what made the answer to "Which AI runs your deals" on security.html render #f5f8fd on #fbf9f5 — a visibly blank card — and what left a dozen neon-cyan links on walkthroughs.html after the reskin. The dark plates that legitimately stay dark restore these below. */ --ink:var(--p-ink); --mut:var(--p-ink2); --dim:var(--p-ink3); --cyan:var(--p-accent); --cyan2:var(--p-accent2); --cyandim:var(--p-accentwash); --agent:var(--p-accent); --agent2:var(--p-accent2); --agentdim:var(--p-accentwash); --flag:var(--p-flag); } /* The plates that are meant to be dark are instruments sitting ON the paper, not cards: the film frames, the live pipeline terminal, the dark workbook and the video lightbox. They keep the dark-shell palette so their light-on-dark text stays legible; the accents are the same dialled-back petrol the terminal already used. Anything missed here surfaces as a contrast failure in scripts/site-guard.mjs. */ body.ed .agvid, body.ed .roster-panel .agvid-lg, body.ed .wb-darkwrap, body.ed .wb-grid.wb-dark, body.ed .vmodal{ --ink:#f5f8fd; --mut:#c3cfe0; --dim:#98a2ae; --cyan:#79ccdd; --cyan2:#a9e2ec; --agent:#7aaef2; --agent2:#a9c9f8; --flag:#ff8d9a; } /* ---- kill the dark-shell atmospherics ------------------------------ */ body.ed #ground, body.ed #glow, body.ed .progressrail, body.ed .rail .rlive, body.ed .scene::after, body.ed .run::after, body.ed .herovid{display:none!important} body.ed #sbeam{background:var(--p-accent);height:2px} /* ---- type ---------------------------------------------------------- */ body.ed h1,body.ed h2,body.ed h3,body.ed h4{ font-family:var(--p-serif);font-weight:500;letter-spacing:-.012em;color:var(--p-ink)} body.ed h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08} body.ed h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1} body.ed h4{font-size:1.16rem;line-height:1.25} /* the gradient-text and neon-flag classes from Nova, de-fanged */ body.ed .beamtext{ background:none;-webkit-background-clip:border-box;background-clip:border-box; color:var(--p-accent);-webkit-text-fill-color:var(--p-accent)} body.ed .flagline{color:var(--p-flag)} body.ed .kicker{ font-family:var(--p-mono);font-size:11.5px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:var(--p-ink3)} body.ed .kicker.v{color:var(--p-accent)} body.ed .lead{color:var(--p-ink2);font-size:1.06rem;max-width:62ch;margin-top:16px} body.ed .mut{color:var(--p-ink2)} body.ed .dim{color:var(--p-ink3)} /* ---- shell: the rail, quietened ------------------------------------ */ body.ed .rail{ width:var(--p-rail);background:var(--p-paper);backdrop-filter:none; border-right:1px solid var(--p-rule);padding:22px 16px} body.ed main{margin-left:var(--p-rail)} body.ed .rail .brand{margin-bottom:26px} body.ed .rail .brand b{color:var(--p-ink);font-family:var(--p-sans);font-weight:700; font-size:12.5px;letter-spacing:.16em} body.ed .rail .brand .bsub{color:var(--p-ink3)} body.ed .rail nav a{ font-family:var(--p-sans);font-size:13.5px;font-weight:500;color:var(--p-ink2); border-left:0;border-radius:6px;padding:8px 9px} body.ed .rail nav a svg{opacity:.55} body.ed .rail nav a:hover{background:rgba(21,24,28,.05);color:var(--p-ink)} body.ed .rail nav a.on{background:transparent;color:var(--p-ink);font-weight:700; box-shadow:inset 2px 0 0 var(--p-accent)} body.ed .rail nav a.on svg{opacity:1;color:var(--p-accent)} body.ed .rail .rcta{ background:var(--p-ink);color:var(--p-paper);font-family:var(--p-sans);font-weight:600; font-size:13.5px;letter-spacing:0;border-radius:7px;box-shadow:none;padding:11px 10px} body.ed .rail .rcta:hover{background:var(--p-accent);color:#fff;transform:none} body.ed .rail .raux{font-family:var(--p-sans);font-size:12px;letter-spacing:0;gap:4px 14px} body.ed .rail .raux a{color:var(--p-ink3)} body.ed .rail .raux a:hover{color:var(--p-accent);text-decoration:underline} body.ed .mbar{background:var(--p-paper);border-bottom:1px solid var(--p-rule);backdrop-filter:none} body.ed .mbar #mclock{display:none} body.ed .mstrip{background:var(--p-paper);border-bottom:1px solid var(--p-rule);backdrop-filter:none} body.ed .mstrip a{color:var(--p-ink2);font-size:13px} body.ed .mstrip a.on{color:var(--p-ink);box-shadow:inset 0 -2px 0 var(--p-accent)} /* ---- buttons ------------------------------------------------------- */ body.ed .btn,body.ed .ed-btn{ font-family:var(--p-sans);font-size:14.5px;font-weight:600;letter-spacing:0; border-radius:7px;padding:13px 22px;border:1px solid var(--p-rule2); background:transparent;color:var(--p-ink);transition:.15s ease; display:inline-flex;align-items:center;gap:10px;cursor:pointer;text-align:left} body.ed .btn:hover,body.ed .ed-btn:hover{ border-color:var(--p-ink);background:rgba(21,24,28,.04);transform:none} body.ed .btn-fill,body.ed .btn-watch,body.ed .ed-btn-solid{ background:var(--p-ink);border-color:var(--p-ink);color:var(--p-paper);font-weight:600} body.ed .btn-fill:hover,body.ed .btn-watch:hover,body.ed .ed-btn-solid:hover{ background:var(--p-accent);border-color:var(--p-accent);color:#fff} body.ed :is(.btn,.ed-btn,a,button):focus-visible{outline:2px solid var(--p-accent);outline-offset:3px} /* ============================================================ THE FIRST SCREEN ============================================================ */ body.ed .ed-hero{ border-top:0;padding:clamp(52px,7vh,92px) 0 clamp(40px,6vh,64px);position:relative;overflow:hidden} body.ed .edwrap{max-width:1280px;margin:0 auto;padding:0 clamp(22px,4vw,60px)} body.ed .ed-heroGrid{ display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:clamp(28px,3.4vw,56px);align-items:center} body.ed .ed-eyebrow{ font-family:var(--p-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--p-ink3);margin:0 0 22px;display:flex;align-items:center;gap:11px} body.ed .ed-eyebrow::after{content:"";flex:1;height:1px;background:var(--p-rule);max-width:120px} /* The headline must break exactly where the
s are, at every width. It is sized against its own COLUMN (cqi), not the viewport, because the fixed rail makes vw lie about how much room the column actually has. The vw clamp is the fallback for engines without container queries. */ body.ed .ed-heroCopy{container-type:inline-size} body.ed .ed-h1{ font-family:var(--p-serif);font-weight:400; font-size:clamp(2.1rem,3.6vw,3.05rem); font-size:clamp(2.1rem,10.2cqi,3.45rem); line-height:1.06;letter-spacing:-.021em;color:var(--p-ink);margin:0} body.ed .ed-h1 em{font-style:normal;color:var(--p-flag)} body.ed .ed-h1 .ed-lineb{color:var(--p-accent)} body.ed .ed-lede{ margin:26px 0 0;max-width:50ch;font-size:1.06rem;line-height:1.62;color:var(--p-ink2)} body.ed .ed-lede b{color:var(--p-ink);font-weight:600} body.ed .ed-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} body.ed .ed-dur{ font-family:var(--p-mono);font-size:11px;letter-spacing:.08em;color:var(--p-ink3); border-left:1px solid var(--p-rule2);padding-left:10px} body.ed .ed-btn-solid .ed-dur{color:rgba(242,239,232,.66);border-left-color:rgba(242,239,232,.3)} body.ed .ed-note{margin-top:16px;font-size:13.5px;color:var(--p-ink3)} body.ed .ed-note a{color:var(--p-accent);text-decoration:underline;text-underline-offset:3px} /* the framed product window — the one piece of imagery on the page */ body.ed .ed-window{ margin:0;background:var(--p-card);border:1px solid var(--p-rule2);border-radius:4px; box-shadow:0 1px 2px rgba(21,24,28,.05),0 18px 44px -22px rgba(21,24,28,.42); overflow:hidden} body.ed .ed-windowBar{ display:flex;align-items:center;gap:10px;padding:9px 13px; background:var(--p-paper2);border-bottom:1px solid var(--p-rule)} body.ed .ed-windowBar .ed-dot{ width:7px;height:7px;border-radius:50%;background:var(--p-accent);flex:0 0 auto} body.ed .ed-windowName{ font-family:var(--p-mono);font-size:11px;color:var(--p-ink3);letter-spacing:.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.ed .ed-windowTag{ margin-left:auto;font-family:var(--p-mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--p-accent);white-space:nowrap} body.ed .ed-window img{display:block;width:100%;height:auto} body.ed .ed-windowFoot{ padding:11px 14px;border-top:1px solid var(--p-rule);background:var(--p-card); font-size:12.5px;color:var(--p-ink3);line-height:1.45} body.ed .ed-windowFoot b{color:var(--p-ink2);font-weight:600} /* provenance line — the honest one, in place of a fake logo wall */ body.ed .ed-provenance{ margin-top:clamp(34px,5vh,58px);padding-top:18px;border-top:1px solid var(--p-rule); display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline; font-size:13px;color:var(--p-ink3)} body.ed .ed-provenance b{color:var(--p-ink2);font-weight:600} body.ed .ed-provenance .ed-provTag{ font-family:var(--p-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--p-flag);border:1px solid rgba(156,51,23,.32);border-radius:3px;padding:3px 7px} /* ---- the vision line ----------------------------------------------- */ body.ed .ed-thesis{ border-top:1px solid var(--p-rule);border-bottom:1px solid var(--p-rule); background:var(--p-paper2);padding:clamp(46px,7vw,82px) 0} body.ed .ed-thesis p{ font-family:var(--p-serif);font-weight:400;font-size:clamp(1.5rem,3.1vw,2.5rem); line-height:1.22;letter-spacing:-.015em;color:var(--p-ink);max-width:24ch;margin:0} body.ed .ed-thesis p span{color:var(--p-accent)} body.ed .ed-thesisNote{ font-family:var(--p-sans)!important;font-size:14px!important;line-height:1.6!important; letter-spacing:0!important;color:var(--p-ink2)!important;max-width:56ch!important; margin-top:22px!important;font-weight:400!important} /* ---- the skills index ---------------------------------------------- */ body.ed .ed-index{padding:clamp(56px,8vw,96px) 0} body.ed .ed-indexHead{ display:flex;flex-wrap:wrap;gap:14px 30px;align-items:flex-end;justify-content:space-between} body.ed .ed-chips{ display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:30px 0 0; margin:clamp(34px,4vw,52px) 0 0;border-top:1px solid var(--p-rule)} body.ed .ed-chips li{ font-family:var(--p-mono);font-size:11.5px;letter-spacing:.02em;color:var(--p-ink2); border:1px solid var(--p-rule2);border-radius:999px;padding:6px 13px;background:var(--p-card)} body.ed .ed-chips li.ed-chipMore{ border-style:dashed;color:var(--p-ink3);background:transparent} body.ed .ed-chips a{color:var(--p-accent);text-decoration:none} body.ed .ed-chips a:hover{text-decoration:underline;text-underline-offset:3px} /* ---- the plates: three real deliverables ---------------------------- */ body.ed .ed-plates{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,26px); margin-top:clamp(30px,4vw,44px)} body.ed .ed-plate{margin:0} body.ed .ed-plateShot{ border:1px solid var(--p-rule2);border-radius:3px;overflow:hidden;background:var(--p-card); box-shadow:0 12px 30px -20px rgba(21,24,28,.5);aspect-ratio:4/3;display:block} body.ed .ed-plateShot img{ display:block;width:100%;height:100%;object-fit:cover;object-position:left top} body.ed .ed-plateCap{margin-top:14px} body.ed .ed-plateKind{ font-family:var(--p-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--p-ink3)} body.ed .ed-plateName{ font-family:var(--p-serif);font-size:1.24rem;font-weight:500;color:var(--p-ink); margin:5px 0 6px;line-height:1.2} body.ed .ed-plateNote{font-size:13.5px;color:var(--p-ink2);line-height:1.5} /* ============================================================ RESTYLE OF THE INHERITED SECTIONS Enough that the page reads as one document, not two eras. ============================================================ */ body.ed .scene,body.ed .run{border-top:1px solid var(--p-rule)} /* nothing on this page may push the document sideways */ body.ed,body.ed main,body.ed .ed-hero,body.ed .ed-thesis,body.ed .ed-index{ overflow-x:clip;max-width:100%} body.ed .scene{min-height:0;padding:clamp(60px,8vw,104px) 0} body.ed .scene.auto{padding:clamp(60px,8vw,104px) 0} body.ed .scene.auto.compact{padding:clamp(52px,6vw,78px) 0} body.ed .wrap{max-width:1280px} /* feature films: dark plates on the paper */ body.ed .feature{padding:clamp(60px,8vw,100px) 0} body.ed .feature.headline .agvid,body.ed .feature.tourfeat .agvid{ border:1px solid var(--p-rule2);border-radius:4px;background:var(--p-dark); box-shadow:0 20px 50px -28px rgba(21,24,28,.55);overflow:hidden} body.ed .agvid video{display:block;width:100%;background:#000} /* The caption sits INSIDE the dark plate, so it takes the plate's own quiet ink (--dim, restored above), not the paper ink3 it used to carry — that was #767d87 on #12161b, 4.37:1, and darkening ink3 for the paper would have pushed it further down. The mediafail state swaps the plate to paper, so the caption swaps back with it. */ body.ed .agvidcap{ font-family:var(--p-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--dim);padding:10px 2px 0} body.ed .agvid.mediafail .agvidcap{color:var(--p-ink3)} body.ed .fbadge{ background:var(--p-ink);color:var(--p-paper);font-family:var(--p-mono);font-weight:500; font-size:10px;letter-spacing:.14em;border-radius:3px;padding:5px 9px} body.ed .fbadge.alt{background:transparent;color:var(--p-ink3);border:1px solid var(--p-rule2)} body.ed .flagcard{ background:var(--p-card);border:1px solid var(--p-rule2);border-radius:4px} body.ed .flagcard:hover{border-color:var(--p-ink);background:var(--p-card)} body.ed .flagcard .pbtn{background:var(--p-ink);color:var(--p-paper)} body.ed .flagcard .ft{font-family:var(--p-serif);font-weight:500;color:var(--p-ink)} body.ed .flagcard .fs{font-family:var(--p-mono);font-size:11px;color:var(--p-ink3)} /* the live pipeline terminal keeps its dark instrument face, on paper */ body.ed .run{padding:clamp(60px,8vw,100px) 0} body.ed .runcopy p{color:var(--p-ink2)} body.ed .runcopy .stepdots .dot{background:var(--p-rule2)} body.ed .runcopy .stepdots .dot.on{background:var(--p-ink)} /* ---- THE PIPELINE PANEL (#run) ------------------------------------ The panel used to be the one near-black plate on this cream page: a terminal face in cyan mono, inherited whole from the dark shell. On a printed prospectus that read as a photograph of somebody else's screen. It is now built to the standard of the section below it, THE STANDARD: a light card on the paper ground, a hairline border and a 4px radius, the serif for the stage line, the sans for the rows, mono kept for what mono is for (the small labels, the citations and the run log), and the single editorial accent spent once, on the live dot and on links. The progress bar and the stage dots are the same two values: the rule for the track, the ink for what has run. These rules are page-local because the panel exists on this page only, and they deliberately supersede the dark-plate block that css/editorial.css still carries for .glass.gterm; that sheet belongs to another lane, so the superseded rules there should be folded away when it is next opened. Nothing here touches the markup, the stage data or the engine. */ body.ed .glass.gterm{ background:var(--p-card);border:1px solid var(--p-rule);border-radius:4px; backdrop-filter:none;box-shadow:none; /* the shell tokens this subtree still reads, pointed back at paper */ --ink:var(--p-ink); --mut:var(--p-ink2); --dim:var(--p-ink3); --cyan:var(--p-accent); --cyan2:var(--p-accent2); --agent:var(--p-accent); --agent2:var(--p-accent2); --flag:var(--p-flag); --hair:var(--p-rule); --hair2:var(--p-rule2)} /* the neon hairline across the top of the plate has no job on a card */ body.ed .glass.gterm::before{display:none} /* subject line and live marker */ body.ed .gterm .gterm-top{ padding:13px 18px;border-bottom:1px solid var(--p-rule); font-family:var(--p-mono);font-size:11px;letter-spacing:.04em;color:var(--p-ink3)} body.ed .gterm .glive{ font-family:var(--p-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em; color:var(--p-accent)} body.ed .gterm .glive .d{ width:7px;height:7px;background:var(--p-accent);box-shadow:none} /* the stage line is the panel's heading, so it takes the page's serif */ body.ed .gterm .gterm-body{ padding:22px 22px 20px;font-family:var(--p-sans);font-size:15px} body.ed .gterm .gstage{ font-family:var(--p-serif);font-weight:500;font-size:1.12rem;line-height:1.2; letter-spacing:.005em;color:var(--p-ink);margin-bottom:15px} /* rows: sans for the reading, mono for the citation */ body.ed .gterm .grow{padding:11px 0;border-bottom:1px solid var(--p-rule);gap:16px} body.ed .gterm #runrows .grow:last-of-type{border-bottom:0} body.ed .gterm .grow .k{font-size:14.5px;color:var(--p-ink2)} body.ed .gterm .grow .v{font-size:14.5px;font-weight:600;color:var(--p-ink)} body.ed .gterm .grow .v.c{color:var(--p-ink)} body.ed .gterm .grow .v.flag{color:var(--p-flag)} body.ed .gterm .grow .v.proj{color:var(--p-accent);text-decoration-color:var(--p-rule2)} body.ed .gterm .grow .v .cx{color:var(--p-accent)} body.ed .gterm .grow .v .dllink{ color:var(--p-accent);text-decoration-color:rgba(18,69,95,.42)} body.ed .gterm .grow .v .dllink:hover{text-decoration-color:var(--p-accent)} body.ed .gterm .grow .s{ font-family:var(--p-mono);font-size:11px;letter-spacing:.02em; color:var(--p-ink3);min-width:150px} /* the run log stays mono: it is a log */ body.ed .gterm .gsrc{ margin-top:18px;padding:14px 16px;border:1px solid var(--p-rule);border-radius:4px; background:var(--p-paper);font-family:var(--p-mono);font-size:12px} body.ed .gterm .gsrc .t{ font-size:10px;letter-spacing:.18em;color:var(--p-ink3);margin-bottom:9px} body.ed .gterm .gsrcline{color:var(--p-ink2);padding:4px 0} body.ed .gterm .gsrcline .src{color:var(--p-ink3)} body.ed .gterm .gsrcline .src.flag{color:var(--p-flag)} /* progress bar: the same two values the stage dots use */ body.ed .gterm .gprog{ margin-top:18px;font-family:var(--p-mono);font-size:10.5px; letter-spacing:.1em;color:var(--p-ink3)} body.ed .gterm .gtrack{height:3px;background:var(--p-rule2)} body.ed .gterm .gfill{background:var(--p-ink);box-shadow:none} /* the film card and the CTA are the site's own buttons again */ body.ed .gterm .btn{ background:transparent;border-color:var(--p-rule2);color:var(--p-ink)} body.ed .gterm .btn:hover{border-color:var(--p-ink);background:rgba(21,24,28,.04)} body.ed .gterm .btn-fill{ background:var(--p-ink);border-color:var(--p-ink);color:var(--p-paper)} body.ed .gterm .btn-fill:hover{ background:var(--p-accent);border-color:var(--p-accent);color:#fff} body.ed .gterm .flagcard{background:var(--p-paper);border-color:var(--p-rule2)} body.ed .gterm .flagcard:hover{background:#fff;border-color:var(--p-ink)} body.ed .gterm .flagcard .pbtn{background:var(--p-ink);color:var(--p-paper)} body.ed .gterm .flagcard .ft{color:var(--p-ink)} body.ed .gterm .flagcard .fs{color:var(--p-ink3)} /* Wide: the subject line takes the width it needs and wraps inside its own column, so the live marker stays on the top line at the right rather than being pushed under it. Narrow: the two stack, and the citation column goes full width under its figure the way css/nova.css already asks it to. */ @media(min-width:861px){ body.ed .gterm .gterm-top{flex-wrap:nowrap} body.ed .gterm .gterm-top #runmeta{flex:1 1 0;min-width:0} } @media(max-width:860px){ body.ed .gterm .grow .s{min-width:0} } /* A phone cannot carry the figure beside its label without breaking the label into one word per line. Below 600px the row reads down instead of across: label, figure, then the file the figure was read out of. */ @media(max-width:600px){ body.ed .gterm .grow{grid-template-columns:minmax(0,1fr);row-gap:3px} body.ed .gterm .grow .v, body.ed .gterm .grow .s{text-align:left} } /* cards, panels, tables */ body.ed .glass:not(.gterm),body.ed .gcard,body.ed .vs .cell,body.ed .wl{ background:var(--p-card);backdrop-filter:none;border:1px solid var(--p-rule); border-radius:4px;box-shadow:none} body.ed .gcard{padding:26px 24px} body.ed .gcard:hover{transform:none;border-color:var(--p-rule2);background:#fff} body.ed .gcard::before{background:var(--p-accent)} body.ed .gcard .ic{ font-family:var(--p-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--p-ink3);font-weight:500} body.ed .gcard .ic.v{color:var(--p-accent)} body.ed .gcard p{color:var(--p-ink2)} body.ed .grid3,body.ed .grid2{margin-top:34px;gap:16px} /* THE STANDARD section runs four blocks, not three: source, flag, silence, audit. .grid3 is a fixed three-column grid, so a fourth card would sit alone on a second row. This is the only place the row is four wide. */ body.ed .grid3.grid-four{grid-template-columns:repeat(4,1fr)} body.ed .bigstats{margin-top:38px;gap:16px} body.ed .bigstat{padding:28px 24px;background:transparent;border:0;border-top:2px solid var(--p-ink)} body.ed .bigstat .n{ font-family:var(--p-serif);font-weight:500;background:none;-webkit-background-clip:border-box; background-clip:border-box;color:var(--p-ink);-webkit-text-fill-color:var(--p-ink); font-size:clamp(2.4rem,4vw,3.2rem);line-height:1} body.ed .bigstat .l{color:var(--p-ink2);font-size:.94rem} body.ed .tabs{margin-top:26px} body.ed .tab{ font-family:var(--p-sans);font-size:13.5px;font-weight:500;border-radius:6px; border:1px solid var(--p-rule2);color:var(--p-ink2);background:transparent} body.ed .tab:hover{border-color:var(--p-ink);color:var(--p-ink)} body.ed .tab[aria-selected="true"]{ border-color:var(--p-ink);background:var(--p-ink);color:var(--p-paper)} body.ed .vs .cell p{color:var(--p-ink2)} body.ed .vs .cell.lit{ border:1px solid var(--p-rule2);background:var(--p-accentwash)} body.ed #difference .vs .vk{font-family:var(--p-serif);font-weight:500;color:var(--p-ink3)} body.ed #difference .vs .cell .vk{color:var(--p-ink3)} body.ed #difference .vs .cell.lit .vk{color:var(--p-accent)} body.ed #difference .vs .vsub{font-family:var(--p-mono);font-size:11.5px;color:var(--p-ink3)} body.ed #difference .vs .cell.lit .vsub{color:var(--p-ink2)} body.ed .standard-statement{color:var(--p-ink);font-family:var(--p-serif);font-weight:400; font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.4;max-width:48ch; margin-left:auto;margin-right:auto} body.ed .wl{margin-top:34px} body.ed .wl .row{ border-bottom:1px solid var(--p-rule);font-family:var(--p-sans);font-weight:500; font-size:.99rem;padding:16px 22px} body.ed .wl .row::before{background:var(--p-accent)} body.ed .wl .row:hover{background:var(--p-accentwash)} body.ed .wl .row.ghost{background:var(--p-paper2);color:var(--p-ink3)} body.ed .wl .t{font-family:var(--p-mono);font-size:12px;color:var(--p-ink3)} body.ed .wl .t b{color:var(--p-ink)} body.ed .wl .wsample .see{font-family:var(--p-mono);font-size:10.5px;color:var(--p-accent);opacity:.8} body.ed .banote{font-family:var(--p-sans);font-size:12.5px;color:var(--p-ink3)} body.ed .scene.finale{background:var(--p-paper2);border-top:1px solid var(--p-rule)} body.ed footer{ margin-left:var(--p-rail);background:var(--p-paper); border-top:1px solid var(--p-rule);color:var(--p-ink2)} body.ed footer a{color:var(--p-ink2)} body.ed footer a:hover{color:var(--p-accent)} body.ed footer .fl{font-family:var(--p-sans);font-size:13.5px} body.ed footer .cop{font-family:var(--p-sans);color:var(--p-ink3)} body.ed footer .brand{font-family:var(--p-sans)} body.ed footer .brand span{color:var(--p-ink)} body.ed .bai{color:var(--p-accent)} /* the lightbox stays a dark theatre — it is a film */ body.ed .vmodal{background:rgba(21,24,28,.9)} body.ed .vmodal .vbox{border-radius:4px;box-shadow:0 40px 120px rgba(0,0,0,.55)} /* ---- responsive ----------------------------------------------------- */ @media (max-width:1080px){ body.ed .ed-heroGrid{grid-template-columns:1fr;gap:34px} body.ed .ed-lede{max-width:60ch} body.ed .ed-plates{grid-template-columns:1fr 1fr} body.ed .ed-plate:last-child{grid-column:1/-1} body.ed .ed-plate:last-child .ed-plateShot{aspect-ratio:16/7} } @media (max-width:900px){ body.ed main,body.ed footer{margin-left:0} } @media (max-width:640px){ body.ed{font-size:16px} body.ed .ed-hero{padding:26px 0 34px} body.ed .ed-h1{font-size:clamp(1.7rem,8.4vw,2.6rem);line-height:1.07} body.ed .ed-lede{font-size:1rem;margin-top:20px} body.ed .ed-actions{gap:10px} body.ed .ed-actions .ed-btn{width:100%;justify-content:space-between} body.ed .ed-actions .ed-btn-solid{justify-content:center} body.ed .ed-plates{grid-template-columns:1fr} body.ed .ed-plate:last-child .ed-plateShot{aspect-ratio:4/3} body.ed .ed-plateShot{aspect-ratio:16/10} body.ed .ed-provenance{gap:10px} body.ed .ed-thesis p{max-width:none} } /* respect reduced motion — nothing here animates, but Nova's hero lift does */ @media (prefers-reduced-motion:reduce){ body.ed *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ============================================================ INNER PAGES Everything below exists only on what-you-get / walkthroughs / agents / security / pricing / request-access / library / 404. Same discipline: paper field, ink type, hairline rules, one accent, no gradient text, no glow. The two genuinely dark objects — the run terminal and the film frames — stay dark, because they are instruments and screens, not cards. ============================================================ */ /* ---- section heads & hero meta ------------------------------------- */ body.ed .shead .idx{ font-family:var(--p-mono);color:var(--p-ink3);font-weight:500;letter-spacing:.1em} body.ed .shead .kicker{color:var(--p-ink3)} body.ed .herometa{font-family:var(--p-mono);font-size:12px;color:var(--p-ink3)} body.ed .co-mono,body.ed .svcnote,body.ed .plannote,body.ed .fairuse, body.ed .trialnote,body.ed .ra-note,body.ed .wbhint,body.ed .cardcap{ font-family:var(--p-mono);color:var(--p-ink3)} body.ed .ra-seclink{font-family:var(--p-mono);color:var(--p-accent); text-decoration:underline;text-underline-offset:3px} body.ed .pull{ border-left:2px solid var(--p-accent);font-family:var(--p-serif);font-weight:400; font-size:1.2rem;line-height:1.5;color:var(--p-ink)} body.ed .blist li{color:var(--p-ink2)} body.ed .blist .m,body.ed .flist .fm{color:var(--p-accent);font-family:var(--p-mono)} body.ed .flist li{color:var(--p-ink2)} body.ed .flist li.off,body.ed .flist li.off .fm{color:var(--p-ink4)} body.ed .chiplist .chip,body.ed .chips .chip{ font-family:var(--p-mono);font-size:11.5px;border:1px solid var(--p-rule2); border-radius:999px;color:var(--p-ink2);background:var(--p-card);padding:6px 13px} body.ed .chips .chip.on{ border-color:var(--p-accent);color:var(--p-accent);background:var(--p-accentwash)} body.ed .chips .arrow{color:var(--p-ink4)} body.ed .numgrid .gcard .kick{ font-family:var(--p-mono);font-size:10.5px;letter-spacing:.14em;color:var(--p-ink3); border-top:1px solid var(--p-rule);font-weight:500} /* ---- status pills and badges --------------------------------------- */ body.ed .pill{ font-family:var(--p-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em; border:1px solid var(--p-rule2);color:var(--p-ink2);border-radius:999px;padding:4px 12px} body.ed .pill.live{color:#1d6144;border-color:rgba(29,97,68,.4)} body.ed .pill.prog{color:#8a5a12;border-color:rgba(138,90,18,.4)} body.ed .pill.partial{color:#8a5a12;border-color:rgba(138,90,18,.4)} body.ed .pill.planned{color:var(--p-accent);border-color:rgba(18,69,95,.4)} body.ed .badge{ font-family:var(--p-mono);font-size:11px;font-weight:500;letter-spacing:.12em; border:1px solid var(--p-rule2);background:var(--p-card);color:var(--p-ink2)} body.ed .badge .pd{animation:none;background:var(--p-accent)} body.ed .outchip{ font-family:var(--p-mono);color:var(--p-accent);background:var(--p-accentwash); border:1px solid rgba(18,69,95,.28)} body.ed .savechip{ font-family:var(--p-mono);color:var(--p-ink2);background:var(--p-card); border:1px solid var(--p-rule2)} /* the security page reuses .flagline as an inline pill */ body.ed .flagline{color:var(--p-flag);border-color:rgba(156,51,23,.32);background:var(--p-flagwash)} body.ed .cite{ font-family:var(--p-mono);color:var(--p-accent);background:var(--p-accentwash); border:1px solid rgba(18,69,95,.26);border-radius:3px} body.ed .sev{ font-family:var(--p-mono);color:var(--p-flag);background:var(--p-flagwash); border:1px solid rgba(156,51,23,.3);border-radius:3px} /* ---- pricing tiers -------------------------------------------------- */ body.ed .tiers{gap:16px;margin-top:44px} body.ed .tier{ padding:30px 26px;border:1px solid var(--p-rule);border-radius:4px; background:var(--p-card);box-shadow:none} body.ed .tier:hover{transform:none;border-color:var(--p-rule2)} body.ed .tier.pop{border:1px solid var(--p-ink);box-shadow:none} body.ed .tier .tag{ background:var(--p-ink);color:var(--p-paper);font-family:var(--p-mono);font-weight:500; font-size:10px;letter-spacing:.14em;border-radius:3px;padding:5px 12px} body.ed .tier .tname{ font-family:var(--p-mono);font-size:10.5px;letter-spacing:.18em;color:var(--p-ink3);font-weight:500} body.ed .tier .price{ font-family:var(--p-serif);font-weight:500;font-size:2.7rem;letter-spacing:-.02em;color:var(--p-ink)} body.ed .tier .price small{color:var(--p-ink3);font-family:var(--p-sans);font-weight:400} body.ed .tier .price.custom{font-family:var(--p-serif);font-size:1.9rem} body.ed .tier .per{font-family:var(--p-mono);font-size:11.5px;color:var(--p-ink3)} body.ed .tier .desc{color:var(--p-ink2)} body.ed .roadmap .rc{ border:1px solid var(--p-rule);border-radius:4px;background:var(--p-card)} body.ed .roadmap .rc p{color:var(--p-ink2)} /* the numbered "how it works" steps carried gradient-filled numerals */ body.ed .step .n{ font-family:var(--p-serif);font-weight:500;background:none; -webkit-background-clip:border-box;background-clip:border-box; color:var(--p-accent);-webkit-text-fill-color:var(--p-accent);font-size:2rem} /* ---- the agent roster ----------------------------------------------- */ body.ed .ritem,body.ed .ragent{ border:1px solid var(--p-rule2);border-radius:4px;background:var(--p-card); color:var(--p-ink2);font-family:var(--p-sans)} body.ed .ritem:hover,body.ed .ragent:hover{ border-color:var(--p-ink);transform:none;background:#fff} body.ed .ritem[aria-selected="true"],body.ed .ragent[aria-selected="true"]{ border-color:var(--p-ink);background:var(--p-accentwash)} body.ed .ritem .rn,body.ed .ragent .rn{font-family:var(--p-mono);color:var(--p-ink3)} body.ed .ritem b,body.ed .ragent .rmain b{font-family:var(--p-serif);font-weight:500;color:var(--p-ink)} body.ed .ritem small,body.ed .ragent .rmain small{color:var(--p-ink3)} body.ed .ragent .rhrs{font-family:var(--p-mono);color:var(--p-ink3)} body.ed .ragent[aria-selected="true"] .rhrs{color:var(--p-accent)} body.ed .rmore{ font-family:var(--p-mono);color:var(--p-accent);border:1px dashed var(--p-rule2);border-radius:4px} body.ed .rmore:hover{border-color:var(--p-accent);background:var(--p-accentwash);color:var(--p-accent)} body.ed .rpanel{padding:30px} body.ed .rpanel .rlead{color:var(--p-ink2)} body.ed .runs li{color:var(--p-ink2)} body.ed .runs .fm{font-family:var(--p-mono);color:var(--p-accent)} body.ed .rosterstat{font-family:var(--p-mono);color:var(--p-ink2)} body.ed .rosterstat .big{ font-family:var(--p-serif);font-weight:500;background:none; -webkit-background-clip:border-box;background-clip:border-box; color:var(--p-ink);-webkit-text-fill-color:var(--p-ink)} body.ed .rosterstat .sub{color:var(--p-ink3)} body.ed .ba{font-family:var(--p-mono)} body.ed .ba .t{color:var(--p-ink3)} /* ---- GIVE IT / GET BACK / WILL NOT ------------------------------------ The card frame the roster panel and the library card both carry. Three labelled blocks, then the negative space: who the skill is wrong for, the desks it sits on, and where it runs. One column, because these are read as sentences rather than scanned as a matrix. Every colour here is a --p-* token; scripts/site-guard.mjs measures each of them as rendered. */ body.ed .rblocks .runs{grid-template-columns:1fr;margin-top:10px;gap:7px} body.ed .rblocks .ba{margin-top:20px} body.ed .rwont{ margin-top:10px;font-size:.95rem;color:var(--p-ink2);max-width:62ch} body.ed .rwrong,body.ed .lc-wrong{ margin-top:14px;font-family:var(--p-sans);font-style:italic;font-size:.9rem; color:var(--p-ink3);max-width:62ch} body.ed .deskchips,body.ed .lc-desks{ display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} body.ed .deskchip{ font-family:var(--p-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--p-accent);background:var(--p-accentwash); border:1px solid var(--p-rule2);border-radius:3px;padding:4px 8px} body.ed .rwhere,body.ed .lc-where{ margin-top:12px;font-family:var(--p-mono);font-size:11.5px;line-height:1.55; color:var(--p-ink3)} /* ---- what stays yours ------------------------------------------------- The disclosure block on library.html and agents.html. Every sentence in it is a control that security.html already states, so this is a placement decision, not a new claim. */ body.ed .stays{ margin-top:26px;border:1px solid var(--p-rule);border-radius:4px; background:var(--p-card);padding:24px} body.ed .stays ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px} body.ed .stays li{display:flex;gap:10px;font-size:.95rem;line-height:1.5;color:var(--p-ink2)} body.ed .stays li .fm{font-family:var(--p-mono);color:var(--p-accent)} body.ed .stays .trade{margin-top:16px;font-size:.95rem;line-height:1.55;color:var(--p-ink)} body.ed .stays .trade a{color:var(--p-accent)} body.ed .agver{ margin:2px 0 0;font-family:var(--p-mono);font-size:11px;letter-spacing:.06em; color:var(--p-ink3)} body.ed .barow{color:var(--p-ink2)} body.ed .barow .track{background:var(--p-rule)} body.ed .barow .bfill{background:var(--p-rule2)} body.ed .barow.sig .bfill{background:var(--p-accent);box-shadow:none} body.ed .barow .val{color:var(--p-ink)} body.ed .agcustom{ border-top:1px solid var(--p-rule);background:var(--p-paper2)} body.ed .agcustom-badge{ font-family:var(--p-mono);color:var(--p-accent);border:1px solid rgba(18,69,95,.3); background:transparent;border-radius:3px} body.ed .agcustom b{font-family:var(--p-serif);font-weight:500;color:var(--p-ink)} body.ed .agcustom p{color:var(--p-ink2)} body.ed .agentlink{color:var(--p-accent)} /* film frames stay dark — they are screens */ body.ed .agvid,body.ed .roster-panel .agvid-lg{ border:1px solid var(--p-rule2);border-radius:4px;background:var(--p-dark)} body.ed .agvid video,body.ed .agvid iframe{background:#000} body.ed .agvid.mediafail{background:var(--p-paper2);color:var(--p-ink3)} /* ---- the Excel sheet: already light, just reseat it on paper -------- */ body.ed .workbook{ border:1px solid var(--p-rule2);border-radius:4px; box-shadow:0 18px 44px -26px rgba(21,24,28,.45)} body.ed .wbhint .sw{border-radius:2px} body.ed .wb-tab.on{box-shadow:inset 0 2px 0 var(--p-accent);color:var(--p-accent)} body.ed #cellpop{ background:var(--p-ink);border:1px solid var(--p-ink);border-radius:4px; color:rgba(242,239,232,.82);font-family:var(--p-mono);box-shadow:0 18px 44px -18px rgba(21,24,28,.6)} body.ed #cellpop .pt{color:rgba(242,239,232,.55)} body.ed #cellpop .pb{color:#f2efe8} body.ed #cellpop::after{background:var(--p-ink);border-color:var(--p-ink)} /* ---- comparison table, calculator, FAQ, forms ----------------------- */ body.ed .cmpwrap{ border:1px solid var(--p-rule);border-radius:4px;background:var(--p-card);backdrop-filter:none} body.ed .cmp th{ font-family:var(--p-mono);font-size:10.5px;letter-spacing:.14em;color:var(--p-ink); border-bottom:1px solid var(--p-rule2)} body.ed .cmp td{border-bottom:1px solid var(--p-rule);color:var(--p-ink2)} body.ed .cmp tr:hover td{background:var(--p-accentwash)} body.ed .cmp .yes{font-family:var(--p-mono);color:var(--p-accent);font-weight:600} body.ed .cmp .no{font-family:var(--p-mono);color:var(--p-ink4)} body.ed .cmp td:first-child{color:var(--p-ink)} body.ed .calcin,body.ed .calcout{padding:28px} body.ed .calcout{border:1px solid var(--p-ink)} body.ed .calcin label,body.ed .form label{ font-family:var(--p-mono);font-size:10.5px;letter-spacing:.14em;color:var(--p-ink3)} body.ed .calcin input,body.ed .form input,body.ed .form select,body.ed .form textarea{ background:#fff;border:1px solid var(--p-rule2);color:var(--p-ink);border-radius:4px; font-family:var(--p-sans)} body.ed .calcin input{font-family:var(--p-mono)} body.ed .calcin input:focus,body.ed .form :is(input,select,textarea):focus{ border-color:var(--p-accent);outline:2px solid rgba(18,69,95,.18);outline-offset:0} body.ed .calcin .hint,body.ed .form .hint{color:var(--p-ink3)} body.ed .calcout .co-label{ font-family:var(--p-mono);font-size:10.5px;letter-spacing:.14em;color:var(--p-ink3);font-weight:500} body.ed .calcout .big{ font-family:var(--p-serif);font-weight:500;background:none; -webkit-background-clip:border-box;background-clip:border-box; color:var(--p-ink);-webkit-text-fill-color:var(--p-ink);font-size:2.6rem} body.ed .calcout .co-sub{color:var(--p-ink2)} body.ed .calcout .mid{font-family:var(--p-serif);font-weight:500} body.ed .faq{border-top:1px solid var(--p-rule)} body.ed .faq details{border-bottom:1px solid var(--p-rule)} body.ed .faq summary{font-family:var(--p-serif);font-weight:500;font-size:1.14rem;color:var(--p-ink)} body.ed .faq summary:hover{color:var(--p-accent)} body.ed .faq summary .fx{font-family:var(--p-mono);color:var(--p-accent);font-weight:400} body.ed .faq .fa{color:var(--p-ink2)} body.ed .form{padding:30px} body.ed .confirm{padding:34px;border:1px solid #1d6144;background:var(--p-card)} body.ed .confirm .ic{font-family:var(--p-mono);color:#1d6144} /* ---- deliverable preview cards (what-you-get) ----------------------- */ body.ed .dcard{ border:1px solid var(--p-rule);border-radius:4px;background:var(--p-card);padding:22px 22px 18px} body.ed .dcard:hover{border-color:var(--p-rule2)} body.ed .dcard .dtitle{font-family:var(--p-serif);font-weight:500;color:var(--p-ink)} body.ed .dcard .dtype{ font-family:var(--p-mono);font-size:10px;letter-spacing:.12em;color:var(--p-ink3); border:1px solid var(--p-rule2);border-radius:3px} body.ed .drow{border-top:1px solid var(--p-rule)} body.ed .drow .dl{font-family:var(--p-mono);font-size:10.5px;color:var(--p-ink3)} body.ed .drow .dv{color:var(--p-ink)} body.ed .drow .dv.tnum{font-family:var(--p-mono)} body.ed .drow.gap .dv{color:var(--p-flag)} body.ed .dcard .dfoot a{color:var(--p-accent);text-decoration:underline;text-underline-offset:3px} /* ---- walkthrough stat strips ---------------------------------------- */ body.ed .wstats{font-family:var(--p-mono)} body.ed .wstats.sep{border-top:1px solid var(--p-rule)} body.ed .wstats .st b{color:var(--p-ink);font-weight:600} body.ed .wstats .st span{color:var(--p-ink3)} /* ---- log panels ------------------------------------------------------ */ body.ed .logbar,body.ed .logrow{border-bottom:1px solid var(--p-rule);font-family:var(--p-mono)} body.ed .logbar{color:var(--p-ink3)} body.ed .logrow .lk,body.ed .logrow .ls{color:var(--p-ink3)} body.ed .logrow .lv{color:var(--p-ink)} body.ed .logrow .lv.sig,body.ed .logrow .ls.sig,body.ed .logfoot .sig{color:var(--p-accent)} body.ed .logrow .lv.flag,body.ed .logrow .ls.flag,body.ed .logfoot .flag{color:var(--p-flag)} body.ed .logfoot{font-family:var(--p-mono);color:var(--p-ink3)} /* ---- stage rows, finale ---------------------------------------------- */ body.ed .stage2{border-bottom:1px solid var(--p-rule)} body.ed .finale::before{display:none} /* ---- inner-page responsive ------------------------------------------- */ @media (max-width:1080px){ body.ed .tiers{grid-template-columns:1fr} body.ed .roster{grid-template-columns:1fr} body.ed .roster-panel{position:static} body.ed .grid3.grid-four{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ body.ed .calc,body.ed .split,body.ed .pull-grid{grid-template-columns:1fr;gap:26px} body.ed .runs{grid-template-columns:1fr} body.ed .numgrid,body.ed .grid3,body.ed .grid2{grid-template-columns:1fr} body.ed .grid3.grid-four{grid-template-columns:1fr} body.ed .tier .price{font-size:2.3rem} } /* ---- library.html agent grid ---------------------------------------- These cards used to be written by that page's script as inline style="" strings naming Nova's dark-shell properties, with the SELECTED card's border written as a raw neon literal. An inline style cannot be overridden by a rule, so the defence here was a property retarget on #libgrid plus an [style*="65,201,232"] !important match on the serialised attribute — output filtering, and brittle: change the alpha or let the browser serialise the rgba differently and the neon is back on the cream page. The producing code is gone (library.html now writes class names only and declares the card styling in its own