/* ==========================================================================
   PYLON DESIGN SYSTEM
   Loaded by every page. Page-specific layout lives in each page's <style>.
   --------------------------------------------------------------------------
   Contents
     01  Tokens
     02  Reset
     03  Grid
     04  Type
     05  Reveal
     06  Controls
     07  Chrome  (strip, header, nav, mobile menu)
     08  Hero    (split hero, used on every page)
     09  Section furniture
     10  Reusable components  (index bar, log, specimen sheet, list rows, stats)
     11  CTA + footer
     12  Modal
   ========================================================================== */

/* 01 ---------------------------------------------------------------- TOKENS */
:root{
--ink:#0a0a0c;--ink-2:#0f0f12;--ink-3:#141418;
--t1:#e6e6ea;--t2:#a2a2ac;--t3:#8a8a94;--t4:#7a7a86;--fade:#6b6b75;
--rule:rgba(255,255,255,.13);--rule-2:rgba(255,255,255,.07);--rule-3:rgba(255,255,255,.035);
--indigo:#6366f1;--indigo-txt:#8b8ef6;--teal:#14b8a6;--teal-txt:#2dd4bf;--amber:#d4950a;--amber-txt:#e8a820;--violet:#a78bfa;
--sans:'Switzer',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--max:1440px;--px:clamp(1.25rem,3.6vw,3.25rem);--gut:clamp(1rem,1.6vw,1.5rem);
--e:cubic-bezier(.22,1,.36,1);--chrome:96px;
}

/* 02 ----------------------------------------------------------------- RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:var(--chrome)}
body{background:var(--ink);color:var(--t1);font-family:var(--sans);font-size:.9375rem;line-height:1.6;overflow-x:hidden;padding-top:var(--chrome)}
h1,h2,h3{font-weight:500;letter-spacing:-.042em;line-height:.96}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}
::selection{background:rgba(99,102,241,.4)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:#000;padding:.75rem 1.25rem;font-size:.875rem;font-weight:600}
.skip:focus{left:0}

/* 03 ------------------------------------------------------------------ GRID */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--px);position:relative;z-index:1}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.bleed-r{margin-right:calc(50% - 50vw)}
.inv{filter:invert(1) opacity(.55)!important}
.cell:hover .inv{filter:invert(1) opacity(1)!important}

/* 04 ------------------------------------------------------------------ TYPE */
.mono{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.5}
.tag{color:var(--t4)}
.sig{display:flex;align-items:baseline;gap:.875rem;padding-bottom:1rem;border-bottom:1px solid var(--rule);margin-bottom:clamp(2rem,4vw,3.25rem)}
.sig .n{color:var(--t2)}
.sig .l{color:var(--t4)}
.d1{font-size:clamp(2.875rem,6.4vw,5.75rem);letter-spacing:-.05em;line-height:.9}
.d2{font-size:clamp(2rem,4.6vw,4rem);letter-spacing:-.045em;line-height:.98}
.d3{font-size:clamp(1.5rem,2.5vw,2.125rem);letter-spacing:-.035em;line-height:1.08}
.fade{color:var(--fade)}
.body{font-size:1rem;line-height:1.65;color:var(--t2);max-width:56ch;text-wrap:pretty}
.body+.body{margin-top:1.125rem}
.body b{color:var(--t1);font-weight:500}
.small{font-size:.875rem;line-height:1.6;color:var(--t3);max-width:48ch}
.small b{color:var(--t2);font-weight:500}

/* 05 ---------------------------------------------------------------- REVEAL */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.on{opacity:1;transform:none}
.r1{transition-delay:.08s}.r2{transition-delay:.16s}.r3{transition-delay:.24s}

/* 06 -------------------------------------------------------------- CONTROLS */
.btn{display:inline-flex;align-items:center;gap:.75rem;height:3rem;padding:0 1.5rem;font-size:.875rem;font-weight:500;letter-spacing:-.01em;border:1px solid var(--rule);border-radius:0;transition:background .3s var(--e),border-color .3s var(--e),color .3s var(--e)}
.btn i{font-style:normal;transition:transform .35s var(--e)}
.btn:hover i{transform:translateX(4px)}
.btn-a{background:var(--t1);color:var(--ink);border-color:var(--t1);font-weight:600}
.btn-a:hover{background:#f2f2f4;border-color:#f2f2f4}
.btn-b{color:var(--t2)}
.btn-b:hover{color:var(--t1);border-color:var(--t3)}
.lnk{display:inline-flex;align-items:center;gap:.625rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);padding-bottom:.375rem;border-bottom:1px solid var(--rule);transition:color .25s,border-color .25s}
.lnk i{font-style:normal;transition:transform .3s var(--e)}
.lnk:hover{color:var(--t1);border-color:var(--t2)}
.lnk:hover i{transform:translateX(4px)}

/* 07 ---------------------------------------------------------------- CHROME */
.strip{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--ink);border-bottom:1px solid var(--rule-2);height:32px;display:flex;align-items:center}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}
.strip a{display:inline-flex;align-items:center;gap:.75rem;color:var(--t4);transition:color .25s}
.strip a:hover{color:var(--t2)}
.strip b{color:var(--t2);font-weight:500}
@media(max-width:700px){.strip .r{display:none}}
.hdr{position:fixed;top:32px;left:0;right:0;z-index:50;background:var(--ink);border-bottom:1px solid var(--rule-2)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:clamp(1.5rem,4vw,4rem)}
/* Logo lockup. The mark is matched to the wordmark's CAP height, not its font
   size and not its full ink box: "Pylon" has a descender on the y, and letting
   the mark run to the descender makes it tower over the letterforms. Switzer's
   cap height is .681em, so mark height = font-size x .681. Change one and the
   other has to move with it. */
.logo{display:inline-flex;align-items:baseline;gap:.5rem;color:var(--t1)}
.logo svg{height:1.09rem;width:auto}
.logo span{font-size:1.625rem;font-weight:600;letter-spacing:-.035em;line-height:1}
.nav{display:none;align-items:center;gap:clamp(1.5rem,2.4vw,2.25rem);white-space:nowrap}
@media(min-width:1080px){.nav{display:flex}}
.nav a,.nav .navbtn{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);transition:color .25s}
.nav a:hover,.nav .navbtn:hover,.nav a.here,.nav .navbtn.here{color:var(--t1)}
.nav .cta{color:var(--t1);border:1px solid var(--rule);padding:.6rem .9rem;margin-left:.5rem;transition:border-color .25s,background .25s}
.nav .cta:hover{border-color:var(--t3);background:rgba(255,255,255,.04)}
.ddw{position:relative;display:inline-flex}
.dd{position:absolute;top:calc(100% + 1.125rem);left:0;background:var(--ink-2);border:1px solid var(--rule);padding:.25rem;min-width:210px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.dd.r{left:auto;right:0}
.dd[hidden]{display:none}
.dd a{display:flex;align-items:center;gap:.625rem;padding:.6rem .75rem;letter-spacing:.16em;color:var(--t3)}
.dd a:hover{background:rgba(255,255,255,.05);color:var(--t1)}
/* product rows carry their own glyph, matching every other product reference on
   the site. The child and parent rows indent to sit under the labels: .75rem
   padding + 14px glyph + .625rem gap = 2.25rem. If the glyph size changes,
   these two values move with it. */
.dd .glyph{width:14px;height:14px;flex:none}
.dd .sq{width:6px;height:6px;flex:none;background:var(--dc,var(--t4))}
.dd .kid{padding-left:2.25rem;color:var(--t4)}
.dd .lead{padding-left:2.25rem}
.dd hr{border:0;border-top:1px solid var(--rule-2);margin:.25rem 0}
.burger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:-8px;color:var(--t2)}
@media(min-width:1080px){.burger{display:none}}
.mm{display:none;border-top:1px solid var(--rule-2);background:rgba(10,10,12,.98);backdrop-filter:blur(16px);max-height:calc(100svh - var(--chrome));overflow-y:auto}
.mm.open{display:block}
/* The mobile menu sits inside <header class="hdr">, so .hdr .wrap's
   display:flex, height:64px and space-between also matched this wrap and laid
   every menu item out in a horizontal row running off the screen. The rule
   below only set padding, so it never overrode them. Reset explicitly. */
.mm .wrap{display:block;height:auto;padding-top:.5rem;padding-bottom:2rem}
.mm a,.mm button{display:block;width:100%;padding:.6rem 0;font-size:1rem;color:var(--t2);text-align:left}
.mm .grp{display:block;margin-top:1.25rem;color:var(--t4);font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase}
.mm .sub{padding-left:1rem}
.mm .sub2{padding-left:2rem;font-size:.9375rem;color:var(--t3)}
.mm .mcta{display:inline-block;width:auto;margin-top:1.25rem;padding:.75rem 1.5rem;background:var(--t1);color:var(--ink);font-weight:600;font-size:.875rem}

/* 08 ------------------------------------------------------------------ HERO */
.hero{position:relative;border-bottom:1px solid var(--rule)}
.hero .g{align-items:stretch;min-height:min(calc(92svh - var(--chrome)),820px)}
.hero.short .g{min-height:0}
@media(min-width:1025px) and (max-height:860px){
.hero .d1{font-size:clamp(2.75rem,5.2vw,4.5rem)}
.hero h1{max-width:13ch}
.hero .body{font-size:.9375rem}
.hero-fig{margin-top:1.25rem}
}
.hero-l{grid-column:1/6;display:flex;flex-direction:column;justify-content:center;padding:clamp(2.5rem,5vh,3.75rem) 0 clamp(2.5rem,5vh,3.5rem)}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;color:var(--t4);margin-bottom:clamp(1.375rem,2.5vh,2rem)}
.hero-meta span{display:inline-flex;align-items:center;gap:.625rem}
.hero-meta .sq{width:5px;height:5px;background:var(--acc,var(--indigo))}
.hero h1{margin-bottom:clamp(1.375rem,2.4vw,1.875rem);max-width:11ch}
@media(max-width:1024px){.hero h1{max-width:15ch}}
@media(max-width:560px){.hero h1{max-width:none}}
.hero .body{max-width:44ch}
.hero-act{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:clamp(1.625rem,3vw,2.125rem)}
.hero-fig{margin-top:clamp(1.625rem,3vw,2.125rem);padding-top:.875rem;border-top:1px solid var(--rule-2);color:var(--t4);max-width:26rem}
.hero-r{grid-column:6/13;position:relative;overflow:hidden;border-left:1px solid var(--rule);margin-right:calc(-1 * (var(--px) + max(0px,(var(--vw,100vw) - var(--max)) / 2)))}
.hero-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.hero-r::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--ink),rgba(10,10,12,.35) 20%,transparent 48%),linear-gradient(0deg,rgba(10,10,12,.5),transparent 30%)}
@media(max-width:1024px){
.hero-l{grid-column:1/-1;padding-bottom:2.5rem}
.hero-r{grid-column:1/-1;border-left:0;border-top:1px solid var(--rule);height:52vw;min-height:260px;margin-right:calc(var(--px) * -1);margin-left:calc(var(--px) * -1)}
.hero-r img{position:relative;height:100%}
.hero-r::after{background:linear-gradient(0deg,rgba(10,10,12,.55),transparent 45%)}
/* .tall: for heroes whose drawn mockup needs more vertical room than 52vw gives */
.hero.tall .hero-r{height:64vw;min-height:330px}
}
/* centred variant, for pages with no product shot */
.hero-c{grid-column:1/10;padding:clamp(3.5rem,8vh,6rem) 0 clamp(3rem,6vh,4.5rem)}
@media(max-width:1024px){.hero-c{grid-column:1/-1}}

/* 09 --------------------------------------------------------- SECTION SHELL */
.sec{padding:clamp(5.5rem,10vw,9rem) 0;border-bottom:1px solid var(--rule);position:relative}
.sec.tight{padding-bottom:0}
.sec.plain{border-bottom:0}
.sec-h{grid-column:1/6}
.sec-b{grid-column:7/13}
@media(max-width:1024px){.sec-h,.sec-b{grid-column:1/-1}.sec-b{margin-top:2.5rem}}

/* 10 ------------------------------------------------------------ COMPONENTS */

/* index bar: a contents line of linked cells */
.index{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.index .g{row-gap:0}
.ix{grid-column:span 4;display:flex;flex-direction:column;gap:.875rem;padding:1.5rem 0 1.625rem;position:relative;transition:background .35s var(--e)}
.ix+.ix{border-left:1px solid var(--rule-2);padding-left:var(--gut)}
.ix::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
.ix:hover::before{transform:scaleX(1)}
.ix-t{display:flex;align-items:center;gap:.625rem;color:var(--t4)}
.ix-t .sq{width:6px;height:6px;background:var(--acc)}
.glyph{display:block}
.ix-t b{color:var(--t2);font-weight:500}
.ix-q{font-size:clamp(.9375rem,1.25vw,1.0625rem);font-weight:500;letter-spacing:-.02em;line-height:1.3;color:var(--t1);max-width:22ch}
.ix-g{margin-top:auto;color:var(--t4);transition:color .3s,transform .3s var(--e)}
.ix:hover .ix-g{color:var(--acc-txt,var(--acc));transform:translateX(4px)}
.index.four .ix{grid-column:span 3}
@media(max-width:1024px){.index .ix,.index.four .ix{grid-column:1/-1}.ix+.ix{border-left:0;padding-left:0;border-top:1px solid var(--rule-2)}}

/* hudson mark */
.hud-lock{display:flex;align-items:center;gap:.625rem;color:var(--violet);margin-bottom:1.5rem}
.hud-lock svg{width:20px;height:20px}
.hr-{transform-box:fill-box;transform-origin:center}
.hr1{animation:sweep 5s linear infinite}
.hr2{animation:sweep 6.5s linear infinite reverse}
.hr3{animation:sweep 9.5s linear infinite}
.hn{transform-box:fill-box;transform-origin:center;animation:pulse 2.8s ease-in-out infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.8}}

/* ---- PRODUCT DOC: long-form guide on the dark surface -------------------
   The paper surface in pylon-editorial.css belongs to Field Notes. Product
   guides stay dark and carry the product accent, so a reader always knows
   whether they are in the editorial voice or inside a product. ---------- */
.doc{grid-column:3/10}
@media(max-width:1240px){.doc{grid-column:2/11}}
@media(max-width:1024px){.doc{grid-column:1/-1}}
.doc-t{font-size:clamp(2rem,4.6vw,3.5rem);letter-spacing:-.048em;line-height:.98;font-weight:500;color:var(--t1);text-wrap:balance}
.doc-dek{margin-top:1.25rem;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.5;letter-spacing:-.02em;color:var(--t3);max-width:46ch;text-wrap:pretty}
.doc-by{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.25rem;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--rule);color:var(--t4)}
.doc-by b{color:var(--t2);font-weight:500}
.doc-b{margin-top:clamp(2.5rem,5vw,3.5rem)}
.doc-b>*+*{margin-top:1.375rem}
.doc-b p{font-size:1.0625rem;line-height:1.72;color:var(--t2);max-width:68ch;text-wrap:pretty}
.doc-b p.stand{font-size:1.25rem;line-height:1.55;letter-spacing:-.02em;color:var(--t1)}
.doc-b b,.doc-b strong{color:var(--t1);font-weight:500}
.doc-b em{font-style:italic;color:var(--t2)}
.doc-b a{color:var(--acc-txt,var(--indigo-txt));text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 45%,transparent);text-underline-offset:3px;transition:text-decoration-color .25s}
.doc-b a:hover{text-decoration-color:var(--acc-txt,var(--indigo-txt))}
.doc-b h2{position:relative;margin-top:clamp(2.75rem,5vw,4rem);padding:1.25rem 26% 0 0;border-top:1px solid var(--rule);font-size:clamp(1.375rem,2.2vw,1.75rem);letter-spacing:-.035em;line-height:1.14;font-weight:500;color:var(--t1);max-width:68ch;text-wrap:pretty}
.doc-b h2+*{margin-top:1.25rem}
.doc-b h2[data-n]::before{content:attr(data-n);position:absolute;left:-4.75rem;top:1.45rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;color:var(--t4)}
@media(max-width:1024px){.doc-b h2[data-n]::before{position:static;display:block;margin-bottom:.75rem}}
@media(max-width:700px){.doc-b h2{padding-right:0}}
.doc-b h3{margin-top:2rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.025em;color:var(--t1)}
.doc-b h3+*{margin-top:.75rem}
.doc-b ul{list-style:none;max-width:68ch;display:flex;flex-direction:column;gap:.875rem}
.doc-b ul li{position:relative;padding-left:1.5rem;font-size:1rem;line-height:1.65;color:var(--t2);text-wrap:pretty}
.doc-b ul li::before{content:'';position:absolute;left:0;top:.6rem;width:5px;height:5px;background:var(--acc)}
/* Ordered list. NB: `.doc-b ol` had no rule at all, so the first product doc to
   use <ol> rendered its markers outside the prose column with no vertical gap.
   Mono decimal-leading-zero counter in the gutter, matching the ul treatment. */
.doc-b ol{list-style:none;max-width:68ch;display:flex;flex-direction:column;gap:.875rem;counter-reset:dol}
.doc-b ol li{position:relative;padding-left:2rem;font-size:1rem;line-height:1.65;color:var(--t2);text-wrap:pretty;counter-increment:dol}
.doc-b ol li::before{content:counter(dol,decimal-leading-zero);position:absolute;left:0;top:.05rem;font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.06em;color:var(--t4)}
/* h3 qualifier: a stage or duration set above the heading. Self-contained by
   design. pylon-editorial.css has its own h3[data-t] for Field Notes; product
   docs do NOT load that sheet, and depending on it silently drops the label
   with no console error. Same one-way rule as .doc-wt and .trk. */
.doc-b h3[data-t]::before{content:attr(data-t);display:block;margin-bottom:.375rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-txt,var(--indigo-txt))}
/* callout: a design note or aside, ruled on the accent */
.doc-note{margin:clamp(2rem,4vw,2.75rem) 0;padding:1.25rem 0 1.25rem 1.5rem;border-left:2px solid var(--acc);max-width:64ch}
.doc-note p{font-size:1rem;line-height:1.68;color:var(--t2)}
/* formula: a mono expression, set apart and ruled */
.doc-fx{margin:clamp(2rem,4vw,2.75rem) 0;padding:1.5rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.doc-fx code{display:block;font-family:var(--mono);font-size:clamp(.8125rem,1.15vw,1rem);line-height:1.7;color:var(--t1);letter-spacing:-.01em}
.doc-fx code b{color:var(--acc-txt,var(--indigo-txt));font-weight:500}
.doc-fx span{display:block;margin-top:.875rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t4)}
/* weighted components: number, label, bar */
.doc-wt{margin:clamp(2rem,4vw,2.75rem) 0;border-top:1px solid var(--rule)}
/* NB: direct-child selector. A descendant selector here also matched the inner
   wrapper and turned it into a nested grid, which laid the label and its
   description side by side and hid the bar. */
.doc-wt>div{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1.25rem;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--rule-2)}
.doc-wt u{text-decoration:none;font-size:clamp(1.375rem,2.4vw,1.875rem);font-weight:500;letter-spacing:-.04em;color:var(--t1);line-height:1}
.doc-wt b{display:block;font-size:1rem;font-weight:500;letter-spacing:-.02em;color:var(--t1)}
.doc-wt i{display:block;font-style:normal;margin:.3rem 0 .625rem;font-size:.9375rem;color:var(--t3)}
/* Self-contained bar. .trk lives in pylon-mockups.css, which product docs do
   NOT load — depending on it rendered these bars at zero height. A component in
   pylon.css may not reference classes from the mockup or editorial sheets. */
.doc-wt .trk{display:block;height:.3rem;background:rgba(255,255,255,.08)}
.doc-wt .trk i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc-txt,var(--indigo-txt)))}
/* worked example: a labelled breakdown table */
.doc-eg{margin:clamp(2rem,4vw,2.75rem) 0;border:1px solid var(--rule-2);background:var(--ink-2);padding:clamp(1.25rem,2.5vw,1.75rem)}
.doc-eg>span{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:1.125rem}
.doc-eg dl{display:grid;gap:0}
.doc-eg dt{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);padding-top:.875rem;border-top:1px solid var(--rule-3)}
.doc-eg dt:first-of-type{border-top:0;padding-top:0}
.doc-eg dd{font-size:.9375rem;line-height:1.6;color:var(--t2);margin:.35rem 0 .875rem}
.doc-eg dd b{color:var(--t1);font-weight:500}

/* ---- LEGAL DOCUMENT ------------------------------------------------------
   Long, clause-numbered documents read by reference, not front to back, so
   they get a sticky contents rail. Prose reuses .doc-b. Self-contained: no
   class here comes from pylon-mockups.css or pylon-editorial.css. ------- */
.lg{grid-column:1/9}
.lg-x{grid-column:10/13;align-self:start;position:sticky;top:calc(var(--chrome) + 2rem)}
@media(max-width:1024px){.lg,.lg-x{grid-column:1/-1}.lg-x{position:static;order:-1;margin-bottom:3rem}}
.lg-x span{display:block;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.lg-x a{display:flex;gap:.875rem;padding:.7rem 0;border-bottom:1px solid var(--rule-3);font-family:var(--sans);font-size:.875rem;font-weight:400;letter-spacing:-.01em;text-transform:none;line-height:1.4;color:var(--t3);transition:color .25s}
.lg-x a:hover{color:var(--t1)}
.lg-x a u{text-decoration:none;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--t4);flex:none;padding-top:.15rem}
.lg-eff{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--rule);color:var(--t4)}
.lg-eff b{color:var(--t2);font-weight:500}
/* Clause numbering: the document owns its own numbers, so they are authored,
   never generated. A CSS counter would renumber every clause below an insertion,
   and contract clause numbers are referenced from other documents.

   Deliberately INLINE at every width, not hung in a gutter like .doc-b h2[data-n].
   .doc is grid-column 3/10 and has columns 1-2 to hang into; .lg is 1/9 and starts
   flush at the wrap content edge, so a negative offset lands outside the padding
   and gets silently eaten by body{overflow-x:hidden}. An inline number also reads
   better in a clause-numbered document, where the number is part of the heading. */
.lg-b h2[data-c]::before{content:attr(data-c);display:block;margin-bottom:.75rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.14em;color:var(--t4)}

/* resource register: rows of guides on the dark surface. The paper register in
   pylon-editorial.css is for Field Notes; this is its product-page sibling. */
.rs{border-top:1px solid var(--rule)}
.rs-row{display:grid;grid-template-columns:4.5rem minmax(0,1fr) 11rem;column-gap:var(--gut);align-items:start;padding:clamp(1.75rem,3.2vw,2.5rem) clamp(.5rem,1vw,1rem);margin:0 clamp(-1rem,-1vw,-.5rem);border-bottom:1px solid var(--rule);transition:background .35s var(--e);position:relative}
.rs-row:hover{background:rgba(255,255,255,.022)}
@media(max-width:900px){.rs-row{grid-template-columns:3.25rem minmax(0,1fr);row-gap:1rem}}
.rs-row::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
.rs-row:hover::before{transform:scaleX(1)}
.rs-n{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);padding-top:.4rem}
.rs-c h2{font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.035em;line-height:1.12;font-weight:500;color:var(--t1);max-width:26ch}
.rs-c p{margin-top:.875rem;font-size:.9375rem;line-height:1.65;color:var(--t3);max-width:56ch;text-wrap:pretty}
.rs-row.persp .rs-c p{font-style:italic;color:var(--t2)}
.rs-go{display:inline-flex;align-items:center;gap:.625rem;margin-top:1.375rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);padding-bottom:.375rem;border-bottom:1px solid var(--rule);transition:gap .3s var(--e),color .3s,border-color .3s}
.rs-row:hover .rs-go{gap:1rem;color:var(--t1);border-bottom-color:var(--t2)}
.rs-m{display:flex;flex-direction:column;gap:.5rem;padding-top:.4rem;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);line-height:1.6}
.rs-m b{color:var(--t2);font-weight:500}
@media(max-width:900px){.rs-m{grid-column:2;flex-direction:row;flex-wrap:wrap;gap:.875rem;padding-top:0;order:-1;margin-bottom:-.5rem}}
/* product context rail: which product, which sub-page. Replaces the old
   .prod-nav tab bar, which does not exist in this system. */
.pctx{border-bottom:1px solid var(--rule)}
.pctx .wrap{display:flex;align-items:center;gap:.875rem;padding-top:1rem;padding-bottom:1rem;color:var(--t4)}
.pctx .glyph{width:16px;height:16px;flex:none}
.pctx a{color:var(--t3);transition:color .25s}
.pctx a:hover{color:var(--t1)}
.pctx b{color:var(--t2);font-weight:500}
.pctx .sp{flex:1}

/* activity log */
.log{margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--rule)}
.log-r{display:grid;grid-template-columns:5.5rem 9.5rem minmax(0,1fr) minmax(0,1.15fr) 1.5rem;align-items:baseline;gap:0 var(--gut);padding:1.5rem clamp(.625rem,1.1vw,1.125rem);margin:0 clamp(-1.125rem,-1.1vw,-.625rem);border-bottom:1px solid var(--rule-2);transition:background .35s var(--e)}
.log-r:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 7%,transparent),transparent 45%)}
.log-t{font-family:var(--mono);font-size:.8125rem;color:var(--t4)}
.log-a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--acc-txt,var(--acc))}
.log-a svg,.log-a .glyph{width:11px;height:11px;flex:none}
.hero-meta .glyph{width:12px;height:12px;flex:none}
.log-w{font-size:1.0625rem;font-weight:500;letter-spacing:-.025em;line-height:1.3;color:var(--t1)}
.log-d{font-size:.875rem;line-height:1.6;color:var(--t3)}
.log-d b{color:var(--t2);font-weight:500}
.log-g{justify-self:end;color:var(--acc-txt,var(--acc));opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s var(--e)}
.log-r:hover .log-g{opacity:1;transform:none}
.log.n4 .log-r{grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.15fr) 1.5rem}
@media(max-width:1024px){.log-r,.log.n4 .log-r{grid-template-columns:5rem minmax(0,1fr);row-gap:.5rem}.log-a,.log-w,.log-d{grid-column:2}.log-g{display:none}}
.log-f{margin-top:1.5rem;color:var(--t4)}

/* specimen sheet: square cells, used for integrations and capability grids */
.spec{margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--rule);border-left:1px solid var(--rule-2);display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:900px){.spec{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.spec{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cell{border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.875rem;padding:.75rem;transition:background .3s}
.cell:hover{background:var(--ink-3)}
.cell img{width:30px;height:30px;object-fit:contain;filter:grayscale(1) opacity(.55);transition:filter .3s}
.cell:hover img{filter:none}
.cell span{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);text-align:center;line-height:1.4}
.spec-f{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;color:var(--t4)}

/* numbered list rows */
.svc{border-top:1px solid var(--rule)}
.svc a,.svc .row{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;align-items:baseline;gap:var(--gut);padding:1.5rem clamp(.625rem,1.1vw,1.125rem);margin:0 clamp(-1.125rem,-1.1vw,-.625rem);border-bottom:1px solid var(--rule-2);transition:background .3s var(--e)}
.svc a:hover{background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 55%)}
.svc .no{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;color:var(--t4)}
.svc .nm{font-size:1.125rem;font-weight:500;letter-spacing:-.025em;color:var(--t1)}
.svc .de{display:block;margin-top:.4rem;font-size:.875rem;color:var(--t3);max-width:44ch;line-height:1.55}
.svc .ar{color:var(--t4);transition:transform .3s var(--e),color .3s}
.svc a:hover .ar{transform:translateX(4px);color:var(--t2)}
@media(max-width:560px){.svc a,.svc .row{grid-template-columns:2rem minmax(0,1fr)}.svc .ar{display:none}}

/* stat row */
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.creds b{display:block;font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:600;letter-spacing:-.035em;line-height:1.1;color:var(--t1)}
.creds span{display:block;margin-top:.5rem;color:var(--t4);font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}

/* product plate: copy column + bleeding screenshot */
.plate-row{border-top:1px solid var(--rule);padding-top:clamp(2.5rem,5vw,4rem);margin-top:clamp(3.5rem,6vw,5.5rem)}
.plate-row:first-of-type{margin-top:clamp(3rem,5vw,4.5rem)}
.pr-c{grid-column:1/5;display:flex;flex-direction:column}
.pr-p{grid-column:5/13;position:relative;overflow:hidden;border-top:1px solid var(--rule-2);border-left:1px solid var(--rule-2);aspect-ratio:16/9;background:var(--ink-3)}
.pr-p img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .8s var(--e)}
.pr-p::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,12,.55),transparent 32%);pointer-events:none}
.plate-row:hover .pr-p img{transform:scale(1.015)}
.pr-n{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.5rem}
.pr-n .num{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;color:var(--acc-txt,var(--acc))}
.pr-n .when{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--t4)}
.pr-name{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem}
.pr-name svg,.pr-name .glyph{width:17px;height:17px;flex:none}
.pr-name b{font-size:1.25rem;font-weight:600;letter-spacing:-.03em;color:var(--t1)}
.pr-q{font-size:clamp(1.25rem,1.9vw,1.625rem);font-weight:500;letter-spacing:-.035em;line-height:1.18;margin-bottom:1.125rem;max-width:16ch}
.pr-c .small{margin-bottom:2rem}
.pr-c .lnk{align-self:flex-start;margin-top:auto}
@media(max-width:1024px){.pr-c{grid-column:1/-1}.pr-p{grid-column:1/-1;margin-top:2rem;border-left:0}.pr-c .lnk{margin-top:1.5rem}}

/* full-width plate */
.plate{position:relative;overflow:hidden;border:1px solid var(--rule-2);background:var(--ink-3)}
.plate img{width:100%;height:auto}
.plate-cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.875rem;color:var(--t4)}

/* 11 ------------------------------------------------------------ CTA/FOOTER */
.cta{padding:clamp(5.5rem,10vw,9rem) 0}
.cta-h{grid-column:1/8}
.cta-a{grid-column:9/13;align-self:end;display:flex;flex-direction:column;gap:.625rem;align-items:flex-start}
@media(max-width:1024px){.cta-h,.cta-a{grid-column:1/-1}.cta-a{margin-top:2.5rem;flex-direction:row;flex-wrap:wrap}}
.ft{border-top:1px solid var(--rule);padding:clamp(3rem,5vw,4.5rem) 0 1.75rem}
.ft-b{grid-column:1/4}
.ft-n{grid-column:5/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
@media(max-width:1024px){.ft-b{grid-column:1/-1;margin-bottom:3rem}.ft-n{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem var(--gut)}}
.ft-tag{margin-top:1rem;font-size:.875rem;color:var(--t3);max-width:26ch;line-height:1.6}
.ft-c{display:flex;flex-direction:column;gap:.625rem;align-items:flex-start}
.ft-c .lbl{color:var(--t4);margin-bottom:.5rem}
.ft-c a,.ft-c button{font-size:.875rem;color:var(--t3);text-align:left;line-height:1.45;transition:color .25s}
.ft-c a:hover,.ft-c button:hover{color:var(--t1)}
.ft-c a[href^="mailto"]{overflow-wrap:anywhere}
.ft-c .kid{padding-left:.875rem;font-size:.8125rem;color:var(--t4)}
.ft-x{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid var(--rule-2);color:var(--t4)}
.ft-x .lg{display:flex;gap:1.5rem}
.ft-x a:hover{color:var(--t2)}

/* 12 ----------------------------------------------------------------- MODAL */
.ov{position:fixed;inset:0;background:rgba(6,6,8,.9);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:1000;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.ov.open{opacity:1;visibility:visible}
.modal{background:var(--ink-2);border:1px solid var(--rule);padding:clamp(1.75rem,4vw,2.75rem);max-width:520px;width:100%;position:relative;max-height:90svh;overflow-y:auto}
.modal h3{font-size:1.375rem;letter-spacing:-.035em;margin-bottom:.5rem}
.modal .sub{font-size:.875rem;color:var(--t3);margin-bottom:2rem}
.x{position:absolute;top:.875rem;right:.875rem;width:28px;height:28px;border:1px solid var(--rule-2);color:var(--t3);display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;transition:color .2s,border-color .2s}
.x:hover{color:var(--t1);border-color:var(--rule)}
.fg{margin-bottom:1rem}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:480px){.fr{grid-template-columns:1fr}}
.fl{display:block;margin-bottom:.5rem;color:var(--t4)}
.fi{width:100%;padding:.75rem .875rem;background:rgba(255,255,255,.03);border:1px solid var(--rule-2);color:var(--t1);font-size:.9375rem;font-family:inherit;outline:none;transition:border-color .2s,background .2s}
.fi:focus{border-color:var(--rule);background:rgba(255,255,255,.06)}
.fi::placeholder{color:var(--t4)}
textarea.fi{resize:vertical;min-height:92px}
.fs{width:100%;margin-top:.75rem;padding:.875rem;background:var(--t1);color:var(--ink);font-size:.875rem;font-weight:600;transition:background .25s}
.fs:hover{background:#f2f2f4}
.fs:disabled{opacity:.45;cursor:not-allowed}
.fs:disabled:hover{background:var(--t1)}
/* inline submit error, replaces the prototype's alert() */
.ferr{margin-top:.75rem;font-size:.8125rem;line-height:1.5;color:#f87171}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}

/* statement band: one paragraph doing a section's work. Set in --fade with the
   second half in --t1 <b>, so the sentence resolves from setup to claim without
   a size or weight change. Promoted here from the Command and Scout page sheets,
   which shipped it identically. */
.stmt{grid-column:1/11;font-size:clamp(1.5rem,3.1vw,2.5rem);font-weight:500;letter-spacing:-.04em;line-height:1.14;color:var(--fade);text-wrap:pretty}
.stmt b{color:var(--t1);font-weight:500}
@media(max-width:1024px){.stmt{grid-column:1/-1}}