:root{
  --cream:#F5EFE3;
  --cream-2:#ECE3D0;
  --cream-3:#E3D7BC;
  --paper:#FCFAF4;
  --ink:#1A1917;
  --ink-2:#6B655E;
  --ink-3:#9A9186;
  --panel:#1A1917;
  --panel-2:#262420;
  --panel-line:rgba(255,255,255,.11);
  --line:#DCD6C9;
  --green:#5FBE7C;
  --green-dark:#3F9C5D;
  --green-soft:#E1F4E7;
  --amber:#B0791A;--amber-soft:#F5EAD2;
  --red:#B5301D;--red-soft:#F6DFD8;
  --gridline:rgba(26,25,23,.055);
  --serif:"Newsreader",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,"system-ui","Segoe UI",sans-serif;
  --mono:"Chakra Petch",monospace;
  --r-lg:28px;--r-md:16px;--r-sm:10px;
  --shadow-lg:0 30px 70px rgba(26,22,18,.16),0 2px 0 rgba(26,22,18,.03);
  --shadow-md:0 16px 40px rgba(26,22,18,.1);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:1220px;margin:0 auto;padding:0 28px}
.serif{font-family:var(--serif)}
h1,h2,h3,.display{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}
.eyebrow.accent{color:var(--green-dark)}
.eyebrow.on-dark{color:#B7A98F}
.crumb{display:block;text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--ink-3);text-decoration:none;margin-bottom:16px;transition:color .15s}
.crumb:hover{color:var(--green-dark)}
/* The grid-paper pattern lives on a ::before layer, not on .grid-bg itself
   — masking .grid-bg directly faded its actual content (headlines, body
   copy) along with the pattern, not just the background. Only the pattern
   fades; text stays at full opacity regardless of where it sits in the
   section. Fades out at the bottom edge only, into whatever section
   follows — the top edge stays a hard pattern start. */
.grid-bg{position:relative}
.grid-bg::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(to bottom,#000,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(to bottom,#000,#000 calc(100% - 90px),transparent)}
.grid-bg>*{position:relative;z-index:1}
/* Two grid-bg sections back to back would otherwise fade out at the first
   one's bottom edge and then snap back to full strength at the second's
   top — a visible seam mid-page. When they're adjacent, the first one
   keeps its pattern all the way down so the two read as one continuous
   canvas, and only the last one in the run fades out. */
.grid-bg:has(+ .grid-bg)::before{-webkit-mask-image:none;mask-image:none}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:14px 27px;border-radius:999px;border:1.5px solid transparent;transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:8px}
.btn-accent{background:var(--green);color:#fff}
.btn-accent:hover{background:var(--green-dark);box-shadow:0 14px 30px rgba(95,190,124,.34)}
.btn-dark{background:var(--panel);color:#fff}
.btn-dark:hover{box-shadow:0 14px 30px rgba(26,25,23,.28)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:rgba(26,22,18,.05)}
.btn-ghost.on-dark{border-color:rgba(255,255,255,.32);color:#fff}
.btn-ghost.on-dark:hover{background:rgba(255,255,255,.08)}
.arrow{font-family:var(--sans);display:inline-block;transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* ============ NAV ============ */
header.site{position:sticky;top:0;z-index:90;background:rgba(251,247,240,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:8px;height:78px}
.logo{display:flex;align-items:center;margin-right:36px;flex:none}
.logo-name{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--ink)}
.logo-name .e{color:var(--green)}
.logo .dot{color:var(--green)}
.nav-item{position:relative}
.nav-item>button,.nav-item>a{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--ink-2);padding:10px 14px;border-radius:9px}
.nav-item>button:hover,.nav-item>a:hover{color:var(--ink);background:rgba(26,22,18,.045)}
.nav-item .chev{font-size:10px;transition:transform .2s ease}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:rotate(180deg)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav-cta .signin{font-weight:600;font-size:15px}
.nav-cta .btn{padding:11px 22px;font-size:14.5px}
.drop{position:absolute;top:calc(100% + 8px);left:0;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(10px) scale(.99);transition:opacity .2s ease,transform .2s ease,visibility .2s;padding:10px}
.nav-item:hover .drop,.nav-item:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop.simple{min-width:252px}
.drop.simple a{display:block;padding:10px 14px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink-2)}
.drop.simple a:hover{background:var(--cream);color:var(--ink)}
.mega{width:min(960px,calc(100vw - 56px));display:grid;grid-template-columns:300px 1fr;padding:0;overflow:hidden}
.mega-intro{background:var(--cream);padding:30px 28px;display:flex;flex-direction:column;gap:16px}
.mega-intro h4{font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.28}
.mega-intro a{margin-top:auto;color:var(--green-dark);font-weight:600;font-size:14.5px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr}
.mega-grid a{padding:20px 24px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.mega-grid a:nth-child(-n+2){border-top:none}
.mega-grid a:hover{background:var(--cream)}
.mega-grid .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.mega-grid b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;margin:4px 0 3px}
.mega-grid p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.nav-links-holder{display:flex;align-items:center}

/* Mobile nav */
/* 44px, not 38 — the minimum comfortable touch target, and this is the
   only way to open the menu on a phone. */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-left:auto;margin-right:-8px;flex:none}
.nav-toggle span{display:block;width:20px;height:1.6px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.mobile-nav{display:none;max-height:0;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line);transition:max-height .32s cubic-bezier(.2,.8,.3,1)}
.mobile-nav.open{max-height:80vh;overflow-y:auto}
.mobile-nav-group{padding:16px 28px;border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.mobile-nav-group:last-of-type{border-bottom:none}
.mobile-nav-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.mobile-nav-group a{padding:9px 0;font-size:15.5px;font-weight:500;color:var(--ink)}
.mobile-nav-cta{display:flex;align-items:center;gap:16px;padding:20px 28px}
.mobile-nav-cta .btn{flex:1;justify-content:center}
@media(max-width:1000px){
  .nav-links-holder,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .mobile-nav{display:block}
}

/* ============ HERO (centered, capability pages) ============ */
.page-hero{padding:100px 0 60px;text-align:center}
.page-hero .eyebrow{display:block;margin-bottom:22px}
.page-hero h1{font-size:clamp(38px,5.4vw,66px);max-width:17ch;margin:0 auto 26px}
.page-hero h1 .accent{color:var(--green)}
.page-hero .lede{font-size:18.5px;color:var(--ink-2);max-width:56ch;margin:0 auto 34px}
.page-hero .ctas{display:flex;justify-content:center;gap:22px;align-items:center;flex-wrap:wrap}
.page-hero .textlink{font-weight:600;font-size:15.5px}
.page-hero .textlink:hover{color:var(--green-dark)}

/* ============ HOME HERO ============ */
.hero-home{padding:60px 0 34px}
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:960px){.hero-split{grid-template-columns:1fr;text-align:left}}
.hero-split .eyebrow{display:block;margin-bottom:22px}
.hero-split h1{font-size:clamp(38px,4.8vw,64px);margin-bottom:22px}
.hero-split h1 .accent{color:var(--green)}
.hero-split p{color:var(--ink-2);font-size:18px;max-width:46ch;margin-bottom:32px}
.hero-split .ctas{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hero-split .textlink{font-weight:600;font-size:15.5px}
.hero-split .textlink:hover{color:var(--green-dark)}

/* Device-frame panel: the "browser window" mockup shell used everywhere */
.device-frame{position:relative;background:linear-gradient(165deg,#EEE8D9,#E3DBC7);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;padding:14px}
.device-frame::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.05;mix-blend-mode:multiply;pointer-events:none}
.device-frame-inner{position:relative;background:var(--paper);border-radius:calc(var(--r-lg) - 10px);border:1px solid var(--line);overflow:hidden}

/* Mock UI card / status header bar with traffic-light chrome */
.mock{background:var(--paper);color:var(--ink);border-radius:var(--r-md);overflow:hidden;font-size:13px}
.mock-top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 14px 46px;border-bottom:1px solid var(--line);background:var(--cream-2);position:relative}
.mock-top::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#E4B7A6;box-shadow:16px 0 0 #EBD9A6,32px 0 0 #B9D6BE}
.mock-top .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.mock-top .pill{font-size:11px}
.mock table{width:100%;border-collapse:collapse}
.mock th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);font-weight:500}
.mock td{padding:11px 14px;border-bottom:1px solid var(--cream-2);vertical-align:middle}
.mock td b{font-weight:600;display:block}
.mock td small{color:var(--ink-3);font-family:var(--mono);font-size:10.5px}
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;font-family:var(--mono);letter-spacing:.03em}
.pill.ok{background:var(--green-soft);color:var(--green-dark)}
.pill.warn{background:var(--amber-soft);color:var(--amber)}
.pill.bad{background:var(--red-soft);color:var(--red)}
.conf{display:flex;align-items:center;gap:8px;font-weight:600}
.conf .bar{width:52px;height:5px;background:var(--cream-3);border-radius:99px;overflow:hidden}
.conf .bar i{display:block;height:100%;background:var(--green);border-radius:99px}

/* ============ SECTIONS ============ */
section{position:relative}
.section{padding:86px 0}
.section-head{max-width:760px;margin-bottom:46px}
.section-head .eyebrow{display:block;margin-bottom:16px}
.section-head h2{font-size:clamp(30px,3.8vw,46px)}
.section-head p{margin-top:16px;color:var(--ink-2);font-size:17px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* Capability tiles (home & platform) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:960px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.tile:hover{transform:translateY(-4px)}
.tile .art{background:linear-gradient(160deg,#EEE8D9,#E3DBC7);border-radius:var(--r-md);aspect-ratio:4/3.1;display:flex;align-items:center;justify-content:center;margin-bottom:22px;border:1px solid var(--line);overflow:hidden;position:relative}
/* Five loop steps in a three-up grid leaves a two-tile orphan row hanging
   left. Flex-wrap instead of grid so that final row centres itself, and a
   shallower art box so five tall cards don't stretch the section out. */
.loop-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:38px 26px}
.loop-tiles .tile{flex:0 1 calc((100% - 52px)/3);min-width:0}
.loop-tiles .art{aspect-ratio:16/9;margin-bottom:16px}
.loop-tiles h3{margin-top:0}
.loop-tiles p{max-width:none}
.loop-tiles .more{margin-top:10px;color:var(--ink-3);font-weight:500;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:960px){.loop-tiles .tile{flex:0 1 calc((100% - 26px)/2)}}
@media(max-width:640px){.loop-tiles .tile{flex:0 1 100%}}
.tile .art::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.05;mix-blend-mode:multiply}
.tile .art svg{width:64%;height:auto;filter:drop-shadow(0 14px 22px rgba(26,22,18,.16));position:relative}
.tile .k{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
.tile h3{font-size:24px;margin:6px 0 8px}
.tile p{color:var(--ink-2);font-size:15px;max-width:40ch}
.tile .more{margin-top:12px;font-weight:600;font-size:14.5px;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.tile:hover .more{color:var(--green-dark)}
.tile .more span{color:var(--green);transition:transform .2s ease}
.tile:hover .more span{transform:translateX(3px)}

/* Dark storyboard section */
.darkband{background:var(--panel);color:#F1ECE2;padding:112px 0;position:relative;overflow:hidden}
.darkband::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.darkband>*{position:relative}
.darkband .eyebrow{color:#8FD1A3;display:block;margin-bottom:18px}
.darkband h2{font-size:clamp(32px,4.2vw,52px);color:#fff;max-width:18ch;margin-bottom:64px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:960px){.cards3{grid-template-columns:1fr}}

/* Founders' story — narrative dark section */
/* The heading column gets a min width so "Founders' story" stays on one
   line instead of breaking after the apostrophe. */
.fs-grid{display:grid;grid-template-columns:minmax(320px,1.1fr) 1.3fr 1.3fr;gap:44px;margin-bottom:54px}
.fs-grid h2{font-family:var(--serif);font-size:clamp(32px,3.4vw,44px);color:#fff;margin:0;align-self:start;text-wrap:balance}
.fs-copy p{color:#D2C6B2;font-size:15.5px;line-height:1.75;margin-bottom:18px}
.fs-copy p:last-child{margin-bottom:0}
@media(max-width:860px){.fs-grid{grid-template-columns:1fr;gap:28px}}
.fs-photo-frame{width:100%;aspect-ratio:2.1/1;border-radius:20px;background:linear-gradient(135deg,#2A2622,#171512);border:1px solid var(--panel-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8C816F;overflow:hidden}
.fs-photo-frame img{width:100%;height:100%;object-fit:cover}
.fs-photo-frame svg{width:34px;height:34px;opacity:.6}
.fs-photo-frame span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.fs-caption{margin-top:18px}
.fs-caption b{display:block;color:#fff;font-size:15px}
.fs-caption span{color:#8C816F;font-size:13.5px}
.story{border-radius:22px;padding:26px 26px 22px;min-height:520px;display:flex;flex-direction:column;position:relative;overflow:hidden;border:1px solid var(--panel-line);transition:transform .25s ease,border-color .25s ease}
.story:hover{transform:translateY(-4px);border-color:rgba(95,190,124,.4)}
.story::before{content:"";position:absolute;inset:0;background:var(--story-bg,linear-gradient(180deg,#211D18,#0D0C0B));z-index:0}
.story>*{position:relative;z-index:1}
.story .float{background:rgba(10,9,8,.82);backdrop-filter:blur(6px);border:1px solid var(--panel-line);border-radius:14px;padding:16px 18px;font-size:13.5px;max-width:330px}
.story .float .h{font-weight:600;color:#fff;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.story .float li{list-style:none;color:#C7BCA9;padding:5px 0 5px 16px;position:relative;font-size:13px}
.story .float li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.story .float .track{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--green);margin-top:12px;display:flex;align-items:center;gap:8px}
.story .chips{display:flex;flex-wrap:wrap;gap:9px;margin:auto 0}
.story .chip-q{background:rgba(251,247,240,.95);color:var(--ink);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:500;white-space:nowrap}
.story .chip-q.ghosted{background:rgba(251,247,240,.14);color:#DED2BC}
.story .bubble{background:var(--paper);color:var(--ink);border-radius:16px;padding:18px 20px;font-size:15px;font-weight:500;position:relative;margin:auto 12px}
.story .bubble .send{position:absolute;right:14px;bottom:12px;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.story .cap{margin-top:auto;font-size:14.5px;color:#D2C6B2;line-height:1.6;padding-top:22px}
.story .cap b{color:#fff}
.story .meta{display:flex;justify-content:space-between;border-top:1px solid var(--panel-line);margin-top:18px;padding-top:13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8C816F}

/* Feature rows (capability pages) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.feature:nth-child(even) .f-visual{order:-1}
@media(max-width:900px){.feature{grid-template-columns:1fr}.feature:nth-child(even) .f-visual{order:0}}
.f-copy h3{font-size:28px;margin-bottom:14px}
.f-copy p{color:var(--ink-2);max-width:48ch;font-size:16.5px}
.f-visual{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow-md)}
.mini-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.src-row{display:flex;align-items:center;justify-content:space-between;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 15px;margin-bottom:9px;font-size:14px}
.src-row .l{display:flex;align-items:center;gap:11px;font-weight:600}
.glyph{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;background:var(--panel);color:#F0C9AE}
.src-row .s{font-size:12.5px;color:var(--green-dark);font-weight:600;display:flex;align-items:center;gap:7px}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.doc-row{border-bottom:1px dashed var(--line);padding-bottom:2px}
.doc-row:last-child{border-bottom:none}
.file-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;padding:9px 4px}
.file-row .fn{font-family:var(--mono);font-size:12px}
.file-row .file-row-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.file-row .fn-link{background:none;border:none;padding:0;font-family:var(--mono);font-size:12px;color:var(--app-text);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.file-row .file-row-actions{display:flex;gap:4px;flex:none}
.icon-btn-sm{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--app-text-2);background:transparent;border:none;cursor:pointer;text-decoration:none}
.icon-btn-sm:hover{background:var(--cream-2);color:var(--app-text)}
.icon-btn-sm svg{width:16px;height:16px}
.icon-btn-sm.icon-btn-danger:hover{background:var(--red-soft);color:var(--red)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{filter:brightness(1.08)}
.file-row .tag{font-size:11.5px;font-weight:600;color:var(--ink-3);text-align:right;flex:none;display:inline-flex;align-items:center;gap:5px}
.file-row .tag.done{color:var(--green-dark)}
.file-row .tag.flag{color:#B5442E}
.file-row .tag .spinner{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--app-border);border-top-color:var(--app-text-2);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.doc-assessment{font-size:12px;color:var(--app-text-2);line-height:1.55;padding:0 4px 10px;margin-top:-2px}
.doc-assessment.flag{color:#B5442E}
.doc-viewer-img{max-width:100%;max-height:70vh;display:block;margin:0 auto;border-radius:12px}
.doc-viewer-pdf{max-height:70vh;overflow:auto;background:var(--cream-2);border-radius:12px;padding:16px}
.doc-viewer-pdf-page-wrap{position:relative;display:block;margin:0 auto 14px;box-shadow:0 2px 10px rgba(26,25,23,.15);border-radius:2px;background:#fff;transition:box-shadow .3s}
.doc-viewer-pdf-page-wrap:last-child{margin-bottom:0}
.doc-viewer-pdf-page-wrap.highlight{box-shadow:0 0 0 3px var(--green),0 2px 10px rgba(26,25,23,.15)}
.doc-viewer-pdf-page{display:block;height:auto}
/* Positioned exactly over the canvas using PDF.js's own text-layer geometry
   (the same code every PDF.js viewer uses to align selectable text with the
   rendered glyphs), so a highlight lands on the literal extracted words —
   not an approximation, and not just "somewhere on this page". */
.dv-text-layer{position:absolute;top:0;left:0;line-height:1;pointer-events:none}
.dv-text-layer span{color:transparent;position:absolute;white-space:pre;transform-origin:0% 0%;transition:background .5s ease,box-shadow .5s ease}
.dv-text-layer span.dv-highlight{color:transparent;background:rgba(95,190,124,.45);border-radius:2px;box-shadow:0 0 0 2px rgba(95,190,124,.45)}

/* PDF zoom toolbar — re-renders PDF.js's actual vector content at the new
   resolution (not a CSS transform on a fixed-resolution bitmap), and
   accounts for devicePixelRatio, so text stays crisp at any zoom level on
   any display. */
.pdf-toolbar{display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:10px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:10px;padding:5px;width:fit-content;margin-left:auto;margin-right:auto}
.pdf-toolbar button{width:28px;height:28px;border-radius:7px;border:none;background:transparent;color:var(--app-text-2);font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;line-height:1}
.pdf-toolbar button:hover:not(:disabled){background:var(--cream-2);color:var(--app-text)}
.pdf-toolbar button:disabled{opacity:.35;cursor:default}
.pdf-toolbar .pdf-zoom-level{font-size:12px;font-weight:600;color:var(--app-text-2);min-width:44px;text-align:center;font-family:var(--mono)}
.pdf-toolbar .pdf-zoom-reset{width:auto;padding:0 11px;font-size:11px;font-weight:600;margin-left:4px}
.doc-viewer-assessment{background:var(--app-bg);border:1px solid var(--app-border);border-radius:10px;padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--app-text-2);margin-bottom:16px}
.doc-viewer-facts{margin-top:16px}
.doc-viewer-facts h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--app-text-3);font-family:var(--mono);margin-bottom:10px;font-weight:600}
.doc-viewer-fact{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}
.doc-viewer-fact:last-child{border-bottom:none}
.doc-viewer-fact .dvf-main{min-width:0}
.doc-viewer-fact .dvf-label{color:var(--app-text-2);font-size:11px}
.doc-viewer-fact .dvf-value{font-weight:600;color:var(--app-text)}
.doc-viewer-fact button{flex:none;background:none;border:none;color:var(--green-dark);font-weight:600;font-size:12px;cursor:pointer;font-family:inherit;padding:4px 0}
.doc-viewer-fact button:hover{text-decoration:underline}
.value-tile-quote{margin-top:9px;padding:8px 10px;background:var(--app-bg);border-left:2px solid var(--app-border);border-radius:0 6px 6px 0;font-size:11.5px;font-style:italic;color:var(--app-text-3);line-height:1.5}
.value-tile-verify{margin-top:9px;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--green-dark);background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
.value-tile-verify:hover{text-decoration:underline}

/* Passport tab — facts grouped by site/unit into compact row lists instead
   of a flat grid of equal-weight tiles, so a property with real extraction
   volume (many units, many documents) still reads as a record, not a pile
   of cards. Group headers never repeat the property's own name — that's
   already the page you're on. */
.unit-block{margin-bottom:22px}
.unit-block:last-child{margin-bottom:0}
.unit-block-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.unit-block-head h4{font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--app-text)}
.unit-block-badge{font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--red);background:var(--red-soft);padding:3px 9px;border-radius:999px;text-transform:uppercase}
.unit-stat-list{background:var(--app-surface);border:1px solid var(--app-border);border-radius:14px;overflow:hidden}
.unit-stat-row{display:flex;align-items:center;gap:16px;padding:11px 16px;border-bottom:1px dashed var(--app-border)}
.unit-stat-row:last-child{border-bottom:none}
.unit-stat-row.disputed{background:var(--red-soft)}
/* De-emphasized, not "wrong" — a low-confidence mention is real evidence,
   just less certain, so this stays a neutral opacity dip rather than the
   red/warning treatment .disputed uses, which would misleadingly imply a
   genuine conflict. */
.unit-stat-row.weak{opacity:.68}
.unit-stat-weak-group{margin-top:2px}
.unit-stat-weak-group summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;padding:9px 16px;font-size:11.5px;color:var(--app-text-3);font-weight:600;user-select:none}
.unit-stat-weak-group summary::-webkit-details-marker{display:none}
.unit-stat-weak-group summary::before{content:'▸';font-size:9px;transition:transform .15s ease}
.unit-stat-weak-group[open] summary::before{transform:rotate(90deg)}
.unit-stat-weak-group summary:hover{color:var(--app-text)}
.unit-stat-weak-group .unit-stat-list{border-top:1px dashed var(--app-border)}
.usr-main{flex:1.1;min-width:130px;display:flex;flex-direction:column;gap:3px}
.usr-main b{font-size:12.5px;color:var(--app-text-2);font-weight:600}
.usr-main span{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--app-text)}
.usr-source{flex:2;min-width:0;font-size:11.5px;color:var(--app-text-3);line-height:1.45}
.usr-source i{font-style:italic}
.usr-action{flex:none;background:none;border:none;color:var(--green-dark);font-weight:600;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap}
.usr-action:hover{text-decoration:underline}
.usr-action.disputed{color:var(--red)}
@media(max-width:760px){
  .unit-stat-row{flex-wrap:wrap}
  .usr-main{flex:1 1 100%}
  .usr-source{flex:1 1 100%}
}
/* Layer 1 demand-profile chart — see dataviz skill for the mark spec this
   follows (thin bars, rounded top only, hairline recessive axis/gridline,
   status-red only when a bar actually crosses the binding constraint). */
.demand-chart{position:relative;margin-top:2px}
.demand-chart svg{display:block;width:100%;height:auto}
.demand-chart-bar{cursor:pointer;transition:opacity .12s;outline:none}
.demand-chart-bar:hover,.demand-chart-bar:focus-visible{opacity:.78}
.demand-chart-axis{stroke:var(--app-border);stroke-width:1}
.demand-chart-threshold{stroke:var(--red);stroke-width:1.25;stroke-dasharray:4 3}
.demand-chart-label{font-family:var(--mono);font-size:9.5px;fill:var(--app-text-3)}
.demand-chart-tip{position:absolute;transform:translate(-50%,-100%) translateY(-8px);background:var(--app-surface);border:1px solid var(--app-border);border-radius:10px;padding:7px 11px;font-size:12px;box-shadow:var(--app-shadow-elevated);pointer-events:none;z-index:20;white-space:nowrap;opacity:0;transition:opacity .1s}
.demand-chart-tip.visible{opacity:1}
.demand-chart-tip b{display:block;font-weight:700;color:var(--app-text)}
.demand-chart-tip span{display:block;color:var(--app-text-3);font-size:10.5px;margin-top:1px}
/* Portfolio headroom chart (Overview) — horizontal diverging bars, same
   mark spec as the demand chart (<=24px thick, rounded outward end, square
   at the zero baseline) but built with absolutely-positioned HTML/CSS bars
   instead of SVG so it stays simple to keep responsive and clickable. */
.headroom-chart{position:relative;display:flex;flex-direction:column;gap:8px}
.headroom-chart-row{display:grid;grid-template-columns:170px 1fr 92px;align-items:center;gap:12px;cursor:pointer;border-radius:8px;padding:3px 4px;outline:none}
.headroom-chart-row:hover,.headroom-chart-row:focus-visible{background:var(--cream-2)}
.headroom-chart-name{font-size:13px;font-weight:600;color:var(--app-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.headroom-chart-track{position:relative;height:22px;background:var(--cream-2);border-radius:5px}
.headroom-chart-zero{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--app-border-strong);z-index:1}
.headroom-chart-bar{position:absolute;top:2px;bottom:2px;transition:opacity .12s}
.headroom-chart-row:hover .headroom-chart-bar,.headroom-chart-row:focus-visible .headroom-chart-bar{opacity:.8}
.hc-round-right{border-radius:0 5px 5px 0}
.hc-round-left{border-radius:5px 0 0 5px}
.headroom-chart-value{font-family:var(--mono);font-size:12px;text-align:right;font-weight:600;white-space:nowrap}
.headroom-chart-tip{position:absolute;transform:translateY(-100%) translateY(-8px);background:var(--app-surface);border:1px solid var(--app-border);border-radius:10px;padding:7px 11px;font-size:12px;box-shadow:var(--app-shadow-elevated);pointer-events:none;z-index:20;white-space:nowrap;opacity:0;transition:opacity .1s}
.headroom-chart-tip.visible{opacity:1}
.headroom-chart-tip b{display:block;font-weight:700;color:var(--app-text)}
.headroom-chart-tip span{display:block;color:var(--app-text-3);font-size:10.5px;margin-top:1px}
@media (max-width:640px){.headroom-chart-row{grid-template-columns:100px 1fr 76px;gap:8px}.headroom-chart-name{font-size:12px}}
.kv{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:10px 4px;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--ink-2)}
.kv .v{font-weight:600;display:flex;align-items:center;gap:8px}
/* Timeline — shared by the Audit Trail and a property's Changes tab.
   Each row is a 3-column CSS grid (date / rail / card); grid rows always
   size to their tallest cell, so the rail's dot+line automatically spans
   the exact height of its card no matter how much detail text wraps —
   no hardcoded pixel offsets, so it can't drift out of alignment. */
.timeline{display:flex;flex-direction:column}
.timeline-row{display:grid;grid-template-columns:92px 24px 1fr;column-gap:0}
.timeline-date{grid-column:1;padding:3px 16px 0 0;text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--app-text-3);white-space:nowrap}
.timeline-rail{grid-column:2;display:flex;flex-direction:column;align-items:center}
.timeline-dot{flex:none;width:11px;height:11px;border-radius:50%;margin-top:4px;background:var(--app-surface);border:2.5px solid var(--app-text-3);box-shadow:0 0 0 3px var(--app-surface)}
.timeline-dot-ok{border-color:#3F9C5D}
.timeline-dot-warn{border-color:#B0791A}
.timeline-dot-bad{border-color:#B5301D;background:#B5301D}
.timeline-line{flex:1;width:1.5px;min-height:14px;background:var(--app-border);margin-top:2px}
.timeline-row:last-child .timeline-line{display:none}
.timeline-body{grid-column:3;padding:0 0 22px 18px}
.timeline-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:13px;padding:13px 16px;font-size:13.5px;transition:box-shadow .18s ease,border-color .18s ease}
.timeline-card:hover{box-shadow:var(--app-shadow-soft)}
.timeline-card.alert{border-color:#E7B7A0;background:#FBF0E7}
.timeline-card-head{font-weight:600;font-size:14px;color:var(--app-text);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.timeline-card-detail{font-size:12.5px;color:var(--app-text-2);margin-top:3px;line-height:1.5}
.timeline-card-meta{font-size:11.5px;color:var(--app-text-3);margin-top:7px;font-family:var(--mono)}

/* Steps */
.how{background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.how-grid{grid-template-columns:1fr}}
.how-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 26px;transition:transform .2s ease,box-shadow .2s ease}
.how-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.how-card .n{font-family:var(--mono);color:var(--green);font-size:14px;display:block;margin-bottom:16px}
.how-card h3{font-size:21px;margin-bottom:9px}
.how-card p{font-size:15px;color:var(--ink-2)}

/* Capability chips */
.chip-grid{display:flex;flex-wrap:wrap;gap:13px}
.chip{display:inline-flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:13px 22px;font-weight:600;font-size:15px;transition:border-color .15s,transform .15s}
.chip:hover{border-color:var(--green);transform:translateY(-2px)}
.chip em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;font-weight:400}

/* Marquee */
.marquee-wrap{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee{display:flex;gap:14px;width:max-content;animation:marquee 36s linear infinite}
.marquee .mchip{display:inline-flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:9px 20px 9px 9px;font-weight:600;font-size:14.5px;white-space:nowrap;color:var(--ink-2)}
.marquee .mchip .micon{width:32px;height:32px;border-radius:9px;flex:none;overflow:hidden;box-shadow:0 1px 2px rgba(26,25,23,.08)}
.marquee .mchip .micon svg{display:block;width:100%;height:100%}
.marquee .mchip .micon.real{background:#fff;display:flex;align-items:center;justify-content:center;padding:5px}
.marquee .mchip .micon.real img{display:block;width:100%;height:100%;object-fit:contain}
.marquee .mchip .mtext{display:flex;flex-direction:column;gap:1px}
.marquee .mchip .mtext b{font-weight:700;font-size:14.5px;color:var(--ink)}
.marquee .mchip small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Stats band */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.stats{grid-template-columns:1fr}}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 28px;transition:transform .2s ease,box-shadow .2s ease}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.stat b{font-family:var(--serif);font-size:44px;font-weight:500;display:block;line-height:1}
.stat b em{font-style:normal;color:var(--green)}
.stat span{display:block;margin-top:12px;color:var(--ink-2);font-size:15px;max-width:30ch}
.stat .src{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* Hero trust line + risk-reversal microcopy */
.hero-trust{text-align:center;font-size:13.5px;color:var(--ink-3);margin:22px 0 6px}
.hero-trust strong{color:var(--ink-2);font-weight:600}
.reassure{margin-top:18px;font-size:13.5px;color:var(--ink-3)}
.cta-panel .reassure{color:#AFC3B0}

/* Segment strip */
.segment-strip{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:10px 0 4px;text-align:center}
.segment-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.segment-chips span{font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:9px 18px}

/* ROI calculator */
.calc-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);max-width:900px;margin:0 auto;box-shadow:var(--shadow-md)}
.calc-input label{display:block;font-weight:600;font-size:15px;margin-bottom:16px}
.calc-input input[type=range]{width:100%;accent-color:var(--green);height:6px;cursor:pointer}
.calc-size-readout{margin-top:14px;font-family:var(--serif);font-size:22px}
.calc-size-readout b{color:var(--green-dark);font-weight:600}
.calc-results{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:28px;margin-top:28px;border-top:1px solid var(--line)}
@media(max-width:700px){.calc-results{grid-template-columns:1fr}}
.calc-result b{display:block;font-family:var(--serif);font-size:38px;font-weight:500;color:var(--green-dark)}
.calc-result span{font-size:14px;color:var(--ink-2);margin-top:6px;display:block}
.calc-foot{margin-top:28px;padding-top:22px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--ink-3)}
.calc-foot a{color:var(--green-dark);font-weight:600}

/* Pipeline diagram — where Ensite sits in the data flow */
.pipeline{max-width:960px;margin:0 auto;padding:6px 0 0;position:relative}
/* Absolutely positioned so it lines up with the icon centres (6px padding +
   half of the 56px badge = 34px) and spans first-to-last badge centre
   (each of the four columns is 25% wide, so its centre sits at 12.5%)
   rather than running the full width and overshooting the outer nodes. */
.pipeline-track{position:absolute;left:12.5%;right:12.5%;top:33px;height:2px;background:var(--line)}
.pipeline-pulse{position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(27,143,92,.18);animation:pipelineFlow 4.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes pipelineFlow{0%{left:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
.pipeline-nodes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;z-index:1}
.pnode{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.pnode-icon{width:56px;height:56px;border-radius:16px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:var(--shadow-md);color:var(--ink-2)}
.pnode-icon svg{width:30px;height:30px}
.pnode b{font-size:15px}
.pnode>span{font-size:12.5px;color:var(--ink-2);max-width:20ch}
.pnode-active .pnode-icon{background:var(--green);border-color:var(--green-dark);box-shadow:0 0 0 6px rgba(27,143,92,.14),var(--shadow-md);color:#fff}
@media(max-width:760px){.pipeline-nodes{grid-template-columns:repeat(2,1fr);row-gap:30px}.pipeline-track{display:none}}

/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr}}
.testi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 28px;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.testi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.testi .mark{font-family:var(--serif);font-size:34px;color:var(--green);line-height:1;margin-bottom:6px}
.testi p{font-family:var(--serif);font-size:18.5px;line-height:1.5;margin-bottom:24px;flex:1;font-weight:500}
.testi-who{border-top:1px solid var(--line);padding-top:16px}
.testi-who b{display:block;font-size:14.5px}
.testi-who span{font-size:13px;color:var(--ink-2)}

/* FAQ */
.faq{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:23px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--serif);font-size:19px;font-weight:600}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{font-family:var(--sans);font-size:24px;font-weight:400;color:var(--green-dark);transition:transform .25s ease;flex:none}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item p{padding:0 4px 24px;color:var(--ink-2);font-size:15.5px;max-width:65ch}

/* CTA */
.cta-panel{background:var(--panel);color:#fff;border-radius:var(--r-lg);padding:clamp(44px,6vw,80px);text-align:center;position:relative;overflow:hidden}
.cta-panel::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.cta-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 130%,rgba(95,190,124,.32),transparent 60%)}
.cta-panel>*{position:relative;z-index:1}
.cta-panel .eyebrow{color:#8FD1A3;display:block;margin-bottom:18px}
.cta-panel h2{font-size:clamp(30px,4vw,50px);max-width:22ch;margin:0 auto 30px}
.cta-panel p{color:#D2C6B2;max-width:52ch;margin:0 auto 34px;font-size:17px}
.cta-panel .ctas{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
/* The button's own padding makes the 18px below it read tighter than the
   same 18px above it (next to plain text) — matching the gap above the
   button (h2 margin-bottom, bumped to 30px) to the gap below it. */
.cta-panel .reassure{margin-top:30px}

/* Footer */
footer.site{background:var(--cream);border-top:1px solid var(--line);padding:70px 0 40px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid .desc{color:var(--ink-2);max-width:34ch;margin-top:16px}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;font-weight:500}
.foot-col a{display:block;padding:5px 0;color:var(--ink-2)}
.foot-col a:hover{color:var(--ink)}
.foot-base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);padding-top:26px;color:var(--ink-3);font-size:13.5px}
.foot-base .links{display:flex;gap:22px}

/* Persona pages */
.persona-hero{padding:100px 0 70px}
.persona-hero .eyebrow{display:block;margin-bottom:20px}
.persona-hero h1{font-size:clamp(36px,4.8vw,60px);max-width:19ch;margin-bottom:22px}
.persona-hero p{font-size:18px;color:var(--ink-2);max-width:56ch;margin-bottom:32px}
.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.pain-grid{grid-template-columns:1fr}}
.pain{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:26px;transition:transform .2s ease,box-shadow .2s ease}
.pain:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pain .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px;display:block}
.pain .k.before{color:var(--red)}
.pain .k.after{color:var(--green-dark)}
.pain p{font-size:15px;color:var(--ink-2)}
.pain b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:6px}

/* Forms (contact) */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:34px;max-width:560px}
.form-card label{display:block;font-weight:600;font-size:14px;margin:18px 0 7px}
.form-card label:first-child{margin-top:0}
.form-card input,.form-card select,.form-card textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;background:var(--cream);font:inherit;font-size:15px;color:var(--ink)}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;border-color:var(--green)}
.form-note{font-size:13px;color:var(--ink-3);margin-top:14px}
.form-ok{display:none;background:var(--green-soft);color:var(--green-dark);border-radius:11px;padding:14px 16px;font-weight:600;margin-top:18px}
.form-err{display:none;background:var(--red-soft);color:var(--red);border-radius:11px;padding:14px 16px;font-weight:600;margin-top:18px}

/* About */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px}
@media(max-width:680px){.founders{grid-template-columns:1fr}}
.founder{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:26px;display:flex;gap:16px;align-items:center}
.founder .avatar{width:56px;height:56px;border-radius:50%;background:var(--panel);color:#F0C9AE;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px;font-weight:600;flex-shrink:0}
.founder b{display:block;font-size:16.5px}
.founder span{font-size:13.5px;color:var(--ink-2)}
.legal-content{max-width:680px}
.legal-content h2{font-family:var(--serif);font-size:24px;font-weight:600;margin:36px 0 12px}
.legal-content h2:first-child{margin-top:0}
.legal-content p{color:var(--ink-2);margin-bottom:14px}
.legal-content ul{color:var(--ink-2);margin:0 0 14px 20px}
.legal-content li{margin-bottom:6px}
.legal-content .updated{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.milestones{counter-reset:m;max-width:840px}
.milestone{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.milestone .n{font-family:var(--mono);color:var(--green);font-size:15px;padding-top:4px}
.milestone h3{font-size:22px;margin-bottom:8px}
.milestone p{color:var(--ink-2);font-size:15.5px;max-width:60ch}

/* Demo panel (sources / home) */
.chrome-bar{display:flex;gap:6px;margin-bottom:20px}
.chrome-bar i{display:block;width:9px;height:9px;border-radius:50%}
.chrome-bar i:nth-child(1){background:#D98F79}
.chrome-bar i:nth-child(2){background:#D9C079}
.chrome-bar i:nth-child(3){background:#8FB79E}
.demo-wide{background:var(--panel);border-radius:24px;padding:26px;color:#F1ECE2;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;max-width:980px;margin:0 auto}
.demo-wide::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.demo-wide::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 90% at 108% -8%,rgba(95,190,124,.22),transparent 55%);pointer-events:none}
.demo-wide>*{position:relative;z-index:1}
.demo-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.demo-head .t{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#8FD1A3}
.demo-head .asset{font-size:13px;color:#C2B6A1}
.demo-cols{display:grid;grid-template-columns:1fr 1.1fr;gap:16px}
@media(max-width:640px){.demo-cols{grid-template-columns:1fr}}
.feed-label,.rec-label{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#B39B77;display:block;margin-bottom:8px}
.doc{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:12px;padding:10px 13px;font-size:13px;margin-bottom:9px;opacity:.38;transition:opacity .4s,border-color .4s,transform .4s}
.doc .name{font-weight:600;color:#F3EDE1;display:block}
.doc .meta{display:flex;justify-content:space-between;font-size:11.5px;color:#AB9C86;gap:10px}
.doc .status{font-family:var(--mono);font-size:10.5px}
.doc.active{opacity:1;border-color:var(--green);transform:translateX(3px)}
.doc.active .status{color:var(--green)}
.record{background:var(--paper);color:var(--ink);border-radius:14px;padding:16px}
.rec-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;border-bottom:1px dashed var(--line);padding:8px 0}
.rec-row:last-of-type{border-bottom:none}
.rec-row .k{color:var(--ink-2)}
.rec-row .v{font-weight:600;display:flex;align-items:center;gap:7px;opacity:.22;transition:opacity .5s}
.rec-row.filled .v{opacity:1}
.tick{width:16px;height:16px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;transform:scale(0);transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.rec-row.filled .tick{transform:scale(1)}
.evi{margin-top:8px}
.evi .k{font-size:12.5px;color:var(--ink-2);display:flex;justify-content:space-between;margin-bottom:6px}
.evi .k b{color:var(--ink)}
.evi .bar{height:6px;background:var(--cream-3);border-radius:99px;overflow:hidden}
.evi .bar i{display:block;height:100%;width:0%;background:var(--green);border-radius:99px;transition:width 1.1s cubic-bezier(.3,.8,.3,1)}
.demo-foot{margin-top:16px;font-size:13px;color:#C2B6A1}
.demo-foot b{color:#fff}

/* Map mock */
.map-mock{background:linear-gradient(160deg,#EEE8D9,#E5DCC4);border-radius:14px;position:relative;height:280px;overflow:hidden;border:1px solid var(--line)}
.map-mock .pin{position:absolute;width:13px;height:13px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 3px 10px rgba(26,22,18,.25)}
.map-mock .pin.g{background:var(--green)}
.map-mock .pin.a{background:var(--amber)}
.map-mock .pin.r{background:var(--red)}
.map-mock .halo{position:absolute;border-radius:50%;background:rgba(27,143,92,.14)}
.map-mock .tip{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:9px 13px;font-size:12.5px;box-shadow:var(--shadow-md)}
.map-mock .tip b{display:block;font-size:13px}
.map-mock .tip span{color:var(--ink-2);font-size:11.5px}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .doc{opacity:1}.rec-row .v{opacity:1}.tick{transform:scale(1)}.evi .bar i{width:96%!important}
  .marquee{animation:none}
}
@media(max-width:640px){
  .nav{height:66px}
  .section{padding:64px 0}
  .darkband{padding:72px 0}
  .story{min-height:auto}
}

/* ============================================================ */
/* ============ APP / PRODUCT DEMO (login + workspace) ======== */
/* ==================== Ensite brand UI language ================ */
:root{
  --app-font:var(--sans);
  --app-bg:var(--cream);
  --app-surface:var(--paper);
  --app-border:var(--line);
  --app-border-strong:var(--cream-3);
  --app-text:var(--ink);
  --app-text-2:var(--ink-2);
  --app-text-3:var(--ink-3);
  --app-tint:var(--green);
  --app-tint-dark:var(--green-dark);
  --app-tint-soft:var(--green-soft);
  --app-shadow-elevated:0 24px 60px rgba(26,25,23,.18),0 2px 10px rgba(26,25,23,.07);
  --app-shadow-soft:0 1px 2px rgba(26,25,23,.04),0 10px 26px rgba(26,25,23,.08);
  --app-spring:cubic-bezier(.32,.72,.35,1.02);
}

.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:var(--app-bg)}
.login-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:20px;padding:40px;max-width:420px;width:100%;box-shadow:var(--app-shadow-soft)}
.login-card .logo{margin-bottom:28px}
.login-card h1{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--app-text);margin-bottom:6px}
.login-card .lede{color:var(--app-text-2);font-size:14.5px;margin-bottom:26px}
.login-card label{display:block;font-weight:600;font-size:13px;color:var(--app-text);margin:16px 0 7px;font-family:var(--app-font)}
.login-card label:first-of-type{margin-top:0}
.login-card input{width:100%;padding:11px 14px;border:1px solid var(--app-border);border-radius:11px;background:var(--app-bg);font:inherit;font-size:15px;color:var(--app-text);transition:border-color .15s,box-shadow .15s}
.login-card input:focus{outline:none;border-color:var(--app-tint);box-shadow:0 0 0 4px var(--app-tint-soft)}
.login-card .btn{width:100%;justify-content:center;margin-top:22px}
.login-alt{margin-top:14px;text-align:center}
.login-alt button{font-weight:600;font-size:13.5px;color:var(--app-tint-dark)}
.login-alt button:hover{text-decoration:underline}
.login-note{margin-top:20px;padding:12px 14px;background:var(--app-bg);border-radius:11px;font-size:12.5px;color:var(--app-text-2);line-height:1.6}
.login-back{display:block;text-align:center;margin-top:22px;font-size:13.5px;color:var(--app-text-3);font-weight:600}
.login-back:hover{color:var(--app-text)}
.login-err{display:none;background:var(--red-soft);color:var(--red);border-radius:11px;padding:10px 13px;font-size:13px;font-weight:600;margin-top:16px}

body:has(.app-shell),body:has(.login-shell){background:var(--app-bg)}
.app-shell{display:flex;min-height:100vh;background:var(--app-bg);align-items:stretch;font-family:var(--app-font);color:var(--app-text)}

/* Sidebar — dark panel, matching the marketing site's hero/CTA dark sections */
.app-side{width:250px;flex:0 0 250px;background:rgba(26,25,23,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#F1ECE2;display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;border-right:1px solid var(--panel-line)}
.app-side .logo{padding:8px 8px 20px}
.app-side .logo-name{color:#fff}
.side-section{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#8C816F;margin:16px 10px 6px}
.side-section:first-of-type{margin-top:2px}
.side-link{display:flex;align-items:center;gap:11px;padding:8px 9px;border-radius:10px;font-size:13.5px;font-weight:500;color:#D2C6B2;width:100%;text-align:left;position:relative;transition:background .12s,color .12s}
.side-link:hover{background:rgba(255,255,255,.07);color:#F1ECE2}
.side-link.active{background:var(--app-tint);color:#fff}
.side-link .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:#8C816F;font-weight:500}
.side-link.active .count{color:rgba(255,255,255,.85)}
.badge-icon{width:25px;height:25px;border-radius:7.5px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2)}
.badge-icon svg{width:14px;height:14px}
.side-link.active .badge-icon{background:rgba(255,255,255,.26)!important}
.badge-overview{background:#6B655E}
.badge-sources{background:#5FBE7C}
.badge-register{background:#3F9C5D}
.badge-map{background:#2E9E7C}
.badge-recon{background:#B0791A}
.badge-passports{background:#8B4A3D}
.badge-audit{background:#8B6F4E}
.badge-reports{background:#C9A067}
.badge-settings{background:#4A453C}
.badge-help{background:#6B7FA0}
.side-profile{display:flex;align-items:center;gap:10px;padding:8px 9px 16px;border-bottom:1px solid var(--panel-line);margin-bottom:8px}
.side-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--panel-line);display:flex;flex-direction:column;gap:1px}
.side-foot button,.side-foot a{color:#B9AF9C;font-size:13px;text-align:left;padding:9px;border-radius:9px;display:flex;align-items:center;gap:9px;font-weight:500}
.side-foot button svg,.side-foot a svg{width:15px;height:15px;flex:none}
.side-foot button:hover,.side-foot a:hover{background:rgba(255,255,255,.07);color:#F1ECE2}

/* Main column */
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.app-top{display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:1px solid var(--app-border);background:rgba(252,250,244,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}
.app-top .org{font-weight:600;font-size:14px;white-space:nowrap;color:var(--app-text);font-family:var(--serif)}
.app-top .org small{display:block;color:var(--app-text-3);font-weight:400;font-size:11px;font-family:var(--mono);letter-spacing:.05em}
.app-search{flex:1;max-width:360px;position:relative}
.app-search input{width:100%;padding:8px 62px 8px 34px;border:1px solid var(--app-border);border-radius:10px;background:var(--cream-2);font:inherit;font-size:13px;color:var(--app-text);transition:background .15s,border-color .15s;cursor:pointer}
.app-search input:hover{background:var(--cream-3)}
.app-search input:focus{outline:none;background:var(--app-surface);border-color:var(--app-tint);box-shadow:0 0 0 4px var(--app-tint-soft)}
.app-search span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--app-text-3);display:flex}
.app-search span svg{width:14px;height:14px}
.app-search .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:1px solid var(--app-border);border-radius:5px;color:var(--app-text-3);padding:1px 6px;font-size:10.5px;font-family:var(--mono);background:var(--app-surface);pointer-events:none}
.icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--app-border);background:var(--app-surface);color:var(--app-text-2);display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s;flex:none}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{background:var(--cream-2);border-color:var(--app-border-strong);color:var(--app-text)}
.avatar-chip{width:32px;height:32px;border-radius:50%;background:var(--app-tint);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;margin-left:auto;flex:none}
.app-view{padding:30px 32px 70px;max-width:1180px}
.view-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.view-head h1{font-family:var(--serif);font-size:clamp(23px,3vw,31px);font-weight:600;color:var(--app-text)}
.view-head p{color:var(--app-text-2);font-size:14.5px;max-width:58ch;margin-top:6px}
.view-eyebrow{margin-bottom:10px;display:block;font-family:var(--mono)!important;font-size:11.5px!important;letter-spacing:.24em!important;text-transform:uppercase!important;color:var(--app-tint-dark)!important;font-weight:500!important}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
@media(max-width:940px){.kpi-grid{grid-template-columns:1fr 1fr}}
.kpi{background:var(--app-surface);border:1px solid var(--app-border);border-radius:17px;padding:19px 20px}
.kpi span{font-size:12px;color:var(--app-text-2)}
.kpi b{display:block;font-family:var(--serif);font-size:29px;font-weight:600;color:var(--app-text);margin:6px 0 4px}
.kpi .trend{font-family:var(--mono);font-size:11px;color:var(--app-tint-dark);font-weight:600}

.panel{background:var(--app-surface);border:1px solid var(--app-border);border-radius:19px;padding:22px;margin-bottom:20px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.panel h3{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--app-text)}

.table-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.tb-input,.tb-select{padding:9px 13px;border:1px solid var(--app-border);border-radius:10px;background:var(--cream-2);font:inherit;font-size:13.5px;color:var(--app-text)}
.tb-input:focus,.tb-select:focus{outline:none;border-color:var(--app-tint);background:var(--app-surface)}
.tb-input{min-width:200px}
.table-scroll{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:13.6px;min-width:640px}
.data-table th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--app-text-3);padding:10px 12px;border-bottom:1px solid var(--app-border);cursor:pointer;user-select:none;white-space:nowrap}
.data-table th:hover{color:var(--app-text)}
.data-table th.sorted{color:var(--app-tint-dark)}
.data-table td{padding:12px;border-bottom:1px solid var(--app-border);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr.row-link{cursor:pointer}
.data-table tr.row-link:hover{background:var(--cream-2)}
.data-table td b{display:block;font-weight:600;color:var(--app-text)}
.data-table td small{color:var(--app-text-3);font-family:var(--mono);font-size:10.5px}
.empty-row td{text-align:center;color:var(--app-text-3);padding:28px 12px;font-size:13.5px;border-bottom:none}

.btn-sm{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;padding:8px 16px;border-radius:999px;white-space:nowrap;transition:background .12s,border-color .12s,transform .1s}
.btn-sm svg{width:14px;height:14px}
.btn-sm:active{transform:scale(.96)}
.btn-sm.btn-accent{background:var(--app-tint);color:#fff}
.btn-sm.btn-accent:hover{background:var(--app-tint-dark)}
.btn-sm.btn-ghost{border:1px solid var(--app-border);color:var(--app-text);background:var(--app-surface)}
.btn-sm.btn-ghost:hover{background:var(--cream-2);border-color:var(--app-border-strong)}
.btn-sm.btn-red{border:1px solid var(--red);color:var(--red);background:var(--app-surface)}
.btn-sm.btn-red:hover{background:var(--red-soft)}
.btn-sm:disabled{opacity:.4;cursor:not-allowed}

.toggle{position:relative;width:38px;height:23px;border-radius:99px;background:var(--line);display:inline-block;transition:background .2s;flex:none}
.toggle.on{background:var(--app-tint)}
.toggle i{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .2s var(--app-spring);box-shadow:0 2px 4px rgba(26,25,23,.22)}
.toggle.on i{transform:translateX(15px)}

.chip-filter{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--app-border);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--app-text-2);background:var(--app-surface)}
.chip-filter.active{border-color:transparent;background:var(--app-tint-soft);color:var(--app-tint-dark)}

.modal-backdrop{position:fixed;inset:0;background:rgba(26,25,23,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;animation:app-fade-in .18s ease}
@keyframes app-fade-in{from{opacity:0}to{opacity:1}}
@keyframes app-sheet-in{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
/* min-width:0 matters specifically because .modal is a flex child of
   .modal-backdrop: without it, a replaced element inside with real pixel
   dimensions (the PDF viewer's <canvas>) can force this flex item to sit at
   its content's intrinsic width instead of shrinking to fit a narrow
   viewport, no matter what width:100% says. */
.modal{background:var(--app-surface);border-radius:21px;padding:28px;max-width:440px;width:100%;min-width:0;box-shadow:var(--app-shadow-elevated);max-height:86vh;overflow-y:auto;animation:app-sheet-in .26s var(--app-spring)}
.modal-wide{max-width:900px}
.modal h3{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--app-text);margin-bottom:6px}
.modal .lede{color:var(--app-text-2);font-size:13.5px;margin-bottom:16px}
.connector-row{display:flex;align-items:center;justify-content:space-between;padding:10px 2px;border-bottom:1px dashed var(--app-border);gap:10px}
.connector-row:last-child{border-bottom:none}
.connector-row .l{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--app-text)}

/* Sources — a flat card grid of sources genuinely connected right now (a
   real access token on file, or direct upload which needs none). Nothing
   unconfigured or not-yet-built is shown here at all — see
   server/routes/sources.js for what "connected" actually requires. */
.source-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.source-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,box-shadow .15s}
.source-card:hover{border-color:var(--app-border-strong);box-shadow:var(--app-shadow-soft)}
.source-card-head{display:flex;align-items:center;gap:12px;min-width:0}
.source-card-icon{width:42px;height:42px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 2px rgba(26,25,23,.1);padding:8px}
.source-card-icon img{width:100%;height:100%;object-fit:contain;display:block}
.source-card-icon.fallback{background:var(--panel);box-shadow:none;padding:0}
.source-card-icon.fallback svg{width:20px;height:20px;color:#F0C9AE}
.source-card-name{font-weight:700;font-size:14.5px;color:var(--app-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-card-kind{font-size:11px;color:var(--app-text-3);margin-top:1px}
.source-card-detail{font-size:12.5px;color:var(--app-text-2);line-height:1.5;flex:1}
.source-connected-meta{font-size:11.5px;color:var(--app-text-3);margin-top:-6px}
.source-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* The "Connect a source" modal — a plain list of providers this server
   actually has real OAuth credentials for, each a one-click real
   authorization redirect (not a form, not a fake toggle). */
.connect-option-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.connect-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border:1.5px solid var(--app-border);border-radius:12px;background:var(--app-bg);font:inherit;text-align:left;cursor:pointer;transition:border-color .12s,background .12s}
.connect-option:hover{border-color:var(--app-tint);background:var(--app-tint-soft)}
.connect-option-name{font-weight:600;font-size:14px;color:var(--app-text)}
.connect-option-arrow{font-weight:600;font-size:12.5px;color:var(--green-dark)}

/* Recently arrived — a real, searchable table backed by a single indexed
   query across every property in the workspace (server/routes/org.js),
   not a client-side slice of the first few properties fetched — this is
   what "stays navigable as the database scales" actually requires. */
.source-search{position:relative;max-width:340px;margin-bottom:16px}
.source-search input{width:100%;padding:10px 14px 10px 38px;border:1.5px solid var(--app-border);border-radius:10px;background:var(--app-bg);font:inherit;font-size:13.5px;color:var(--app-text)}
.source-search input:focus{outline:none;border-color:var(--app-tint)}
.source-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--app-text-3);pointer-events:none}
.modal-close{margin-top:16px;width:100%}

.toast-wrap{position:fixed;top:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:rgba(252,250,244,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--app-text);padding:13px 17px;border-radius:14px;font-size:13.5px;font-weight:500;box-shadow:var(--app-shadow-elevated);border:1px solid var(--app-border);display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-10px) scale(.96);transition:opacity .25s var(--app-spring),transform .25s var(--app-spring);max-width:320px}
.toast.show{opacity:1;transform:none}
.toast .dot-t{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.toast .dot-t svg{width:12px;height:12px}
.toast .dot-t.dot-success{background:var(--app-tint)}
.toast .dot-t.dot-error{background:var(--red)}
.toast .dot-t.dot-info{background:#6B655E}

.map-live{background:linear-gradient(160deg,#EEE8D9,#E5DCC4);border-radius:17px;position:relative;height:420px;overflow:hidden;border:1px solid var(--app-border)}
.map-pin-live{position:absolute;width:14px;height:14px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 3px 10px rgba(26,25,23,.3);cursor:pointer;transform:translate(-50%,-50%);transition:transform .12s,opacity .15s}
.map-pin-live:hover{transform:translate(-50%,-50%) scale(1.35)}
.map-pin-live.dim{opacity:.18}
.map-pin-live.g{background:var(--green)}
.map-pin-live.a{background:var(--amber)}
.map-pin-live.r{background:var(--red)}
.map-tooltip-live{position:absolute;background:var(--app-surface);border:1px solid var(--app-border);border-radius:13px;padding:13px 16px;font-size:12.5px;box-shadow:var(--app-shadow-elevated);z-index:15;min-width:210px}
.map-tooltip-live b{display:block;font-family:var(--serif);font-size:15px;margin-bottom:3px;font-weight:600}
.map-tooltip-live .close-tip{position:absolute;top:8px;right:10px;color:var(--app-text-3);font-size:15px}

.evidence-chip{font-size:11px;font-weight:600;color:var(--app-tint-dark);font-family:var(--mono)}

/* Portfolio Audit */
.audit-property-card{margin-bottom:14px}
.audit-property-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:4px}
.audit-property-head b{font-family:var(--serif);font-size:16.5px;color:var(--app-text);display:block}
.audit-property-head small{color:var(--app-text-3);font-size:12px}
.audit-score-badge{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:16px}
.audit-score-good{background:rgba(95,190,124,.16);color:#3F9C5D}
.audit-score-mid{background:rgba(176,121,26,.16);color:#B0791A}
.audit-score-bad{background:rgba(181,48,29,.16);color:#B5301D}
.audit-findings{margin:14px 0;display:flex;flex-direction:column;gap:9px}
.audit-finding-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--app-text-2);line-height:1.5}
.audit-finding-dot{flex:none;width:7px;height:7px;border-radius:50%;margin-top:6px}
.audit-finding-dot-critical{background:#B5301D}
.audit-finding-dot-warning{background:#B0791A}
.audit-finding-dot-info{background:var(--app-text-3)}
.audit-clean-note{font-size:13px;color:#3F9C5D;font-weight:600;margin:14px 0}

.badge-conf{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:12.5px}
.badge-conf .bar{width:48px;height:5px;background:var(--app-border);border-radius:99px;overflow:hidden}
.badge-conf .bar i{display:block;height:100%;background:var(--app-tint);border-radius:99px}

.select-property{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.select-property .pchip{padding:8px 14px;border-radius:999px;border:1px solid var(--app-border);font-size:13px;font-weight:600;color:var(--app-text-2);background:var(--app-surface)}
.select-property .pchip.active{border-color:transparent;background:var(--app-tint);color:#fff}

/* App breadcrumb */
.app-breadcrumb{display:flex;align-items:center;gap:7px;color:var(--app-text-3);font-size:13px;margin-bottom:16px}
.app-breadcrumb a{color:var(--app-tint-dark);font-weight:600;display:inline-flex;align-items:center;gap:5px}

/* Property identity header */
.prop-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.prop-head .id{font-family:var(--mono);font-size:12px;color:var(--app-text-3);letter-spacing:.08em}
.prop-head h1{font-family:var(--serif);font-size:clamp(24px,3vw,32px);font-weight:600;color:var(--app-text);margin:4px 0 8px}
.prop-quick{display:flex;gap:22px;flex-wrap:wrap}
.prop-quick div b{display:block;font-family:var(--serif);font-size:24px;font-weight:600;color:var(--app-text)}
.prop-quick div span{font-size:11.5px;color:var(--app-text-3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}

/* Tabs (property detail) — segmented control */
.app-tabs{display:inline-flex;gap:3px;background:var(--cream-2);border:1px solid var(--app-border);border-radius:13px;padding:4px;width:max-content;margin-bottom:20px;max-width:100%;overflow-x:auto}
.app-tab{border:0;background:transparent;color:var(--app-text-2);padding:9px 16px;border-radius:10px;font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .15s var(--app-spring),color .15s}
.app-tab.active{background:var(--app-surface);color:var(--app-text);box-shadow:0 1px 4px rgba(26,25,23,.1)}
.app-tab .count{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--app-text-3)}
.app-tab.active .count{color:var(--red)}
.app-tabpanel{display:none}
.app-tabpanel.active{display:block;animation:app-tab-in .18s ease-out}
@keyframes app-tab-in{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Conflict / reconciliation comparison */
.conflict-banner{border:1px solid #E7B7A0;background:linear-gradient(135deg,var(--red-soft),var(--app-surface));padding:20px 22px;border-radius:18px;margin-bottom:20px}
.conflict-banner .sev{margin-bottom:8px}
.conflict-banner h2{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--app-text);margin-bottom:8px}
.conflict-banner p{color:var(--app-text-2);font-size:14.5px;max-width:80ch}
.value-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:20px}
.value-tile{border:1px solid var(--app-border);background:var(--app-surface);border-radius:14px;padding:15px}
.value-tile.weak{border-color:#E7B7A0;background:var(--red-soft)}
.value-tile.strong{border-color:var(--app-tint);background:var(--app-tint-soft)}
.value-tile label{display:block;color:var(--app-text-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:9px;font-family:var(--mono)}
.value-tile strong{font-size:22px;letter-spacing:-.02em;display:block;font-family:var(--serif);font-weight:600;color:var(--app-text)}
.value-tile small{display:block;color:var(--app-text-2);margin-top:8px;line-height:1.45;font-size:12px}

/* Grid Passport — the actual "document": what prints, what a share link
   shows an outside recipient, styled to read as a real verified certificate
   rather than another app screen. */
.passport-doc{background:var(--app-surface);border:1px solid var(--app-border);border-radius:20px;padding:40px 44px;box-shadow:var(--app-shadow-soft);max-width:880px}
.passport-doc-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:2px solid var(--app-text);margin-bottom:28px}
.passport-brand{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--app-text)}
.passport-brand .e,.passport-brand .dot{color:var(--app-tint)}
.passport-brand-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--app-text-3)}
.passport-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.passport-code{font-family:var(--mono);font-size:12px;color:var(--app-text-3);letter-spacing:.08em;margin-bottom:5px}
.passport-doc h1{font-family:var(--serif);font-size:clamp(23px,3vw,30px);font-weight:600;color:var(--app-text);margin-bottom:9px}
.passport-meta-row{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--app-text-2)}
.passport-status-badge{padding:8px 16px;border-radius:999px;font-weight:700;font-size:12.5px;white-space:nowrap;flex:none}
.passport-headline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px;padding:18px 0;border-top:1px solid var(--app-border);border-bottom:1px solid var(--app-border)}
.ph-cell label{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--app-text-3);margin-bottom:6px}
.ph-cell b{font-family:var(--serif);font-size:18px;color:var(--app-text);font-weight:600}
.passport-section-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--app-text-3);margin-bottom:14px}
.passport-footer{margin-top:30px;padding-top:18px;border-top:1px solid var(--app-border);font-size:12px;color:var(--app-text-3);line-height:1.55}
.passport-footer-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:10px;font-family:var(--mono);font-size:11px}
.passport-share-row{display:flex;gap:8px;align-items:center}
.passport-share-row input{flex:1;min-width:0;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--cream);font:inherit;font-size:12.5px;font-family:var(--mono);color:var(--app-text-2)}

@media print{
  .app-side,.app-top,.toast-wrap,.modal-backdrop,.no-print{display:none!important}
  .app-shell{display:block!important}
  .app-main{display:block!important}
  .app-view{padding:0!important;max-width:none!important}
  body,.app-bg,.app-view{background:#fff!important}
  .passport-doc{border:none!important;box-shadow:none!important;padding:0!important;max-width:none!important}
}
.verdict-box{background:var(--panel);color:#fff;border-radius:16px;padding:18px 20px;margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.verdict-box .eyebrow{color:#8FD1A3;margin-bottom:6px;font-family:var(--mono)!important;font-size:10.5px!important;letter-spacing:.2em!important;text-transform:uppercase!important;font-weight:500!important}
.verdict-box strong{display:block;font-family:var(--serif);font-size:24px;font-weight:600}
.verdict-box p{margin:6px 0 0;color:#D2C6B2;font-size:12.5px;max-width:48ch;line-height:1.5}

/* Reconciliation / risk queue */
.queue-item{border:1px solid var(--app-border);border-radius:14px;padding:16px 18px;margin-bottom:12px;background:var(--app-surface);transition:border-color .15s,transform .15s}
.queue-item:hover{border-color:var(--app-tint);transform:translateY(-2px)}
.queue-item .row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.queue-item strong{font-size:15px;color:var(--app-text)}
.queue-item p{margin-top:5px;color:var(--app-text-2);font-size:13.5px;line-height:1.5;max-width:74ch}

/* Document list (property detail) */
.doc-list-simple{display:flex;flex-direction:column;gap:9px}

/* Passport summary cards (list view) */
.passport-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.passport-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:18px;padding:20px;transition:transform .18s var(--app-spring),box-shadow .18s ease}
.passport-card:hover{transform:translateY(-3px);box-shadow:var(--app-shadow-soft)}
.passport-card .id{font-family:var(--mono);font-size:10.5px;color:var(--app-text-3);letter-spacing:.08em}
.passport-card h3{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--app-text);margin:5px 0 10px}
.passport-card .row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--app-text-2);padding:6px 0;border-top:1px dashed var(--app-border)}
.passport-card .row:first-of-type{border-top:none}

/* Settings sections */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.settings-grid{grid-template-columns:1fr}}

/* Generic app layout grids (responsive) */
.app-grid-2{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;align-items:start}
.app-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.app-grid-2{grid-template-columns:1fr}}
@media(max-width:820px){.app-grid-3{grid-template-columns:1fr}}

.app-shell .pill,.modal .pill,.toast .pill{letter-spacing:.03em}

@media(max-width:900px){
  .app-side{position:fixed;left:-264px;z-index:100;transition:left .28s var(--app-spring);box-shadow:0 0 0 2000px rgba(0,0,0,0)}
  .app-side.open{left:0;box-shadow:0 0 0 2000px rgba(0,0,0,.4)}
  .app-top .menu-btn{display:flex}
  .app-view{padding:22px 18px 60px}
}
.menu-btn{display:none}

/* A long document filename wraps to several lines on a narrow screen;
   without this the meta/status tag and the view/download icons stayed on
   the same flex row and visually collided with the wrapped name instead of
   dropping below it. */
@media(max-width:560px){
  .file-row{flex-wrap:wrap;row-gap:6px}
  .file-row .file-row-main{flex-wrap:wrap;align-items:flex-start;row-gap:4px}
  .file-row .tag{flex-basis:100%}
}

/* Command palette (Spotlight-style, Ensite cream) */
.cp-backdrop{position:fixed;inset:0;background:rgba(26,25,23,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:400;display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
.cp-box{background:rgba(252,250,244,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:18px;width:100%;max-width:560px;box-shadow:var(--app-shadow-elevated);overflow:hidden;border:1px solid var(--app-border);animation:app-sheet-in .2s var(--app-spring)}
.cp-box input{width:100%;border:none;border-bottom:1px solid var(--app-border);padding:18px 20px;font:inherit;font-size:16px;background:transparent;outline:none;color:var(--app-text)}
.cp-list{max-height:340px;overflow-y:auto;padding:8px}
.cp-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--app-text)}
.cp-item small{font-weight:500;font-size:12px;color:var(--app-text-3)}
.cp-item.active,.cp-item:hover{background:var(--app-tint);color:#fff}
.cp-item.active small,.cp-item:hover small{color:rgba(255,255,255,.78)}
.cp-hint{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--app-border);font-size:11px;color:var(--app-text-3)}
.cp-hint b{font-family:var(--mono);color:var(--app-text-2);margin-right:3px}

/* Skeleton loading */
.skel{display:block;height:13px;border-radius:6px;background:linear-gradient(90deg,var(--cream-2) 25%,var(--cream-3) 37%,var(--cream-2) 63%);background-size:400% 100%;animation:skel-shimmer 1.4s ease infinite}
@keyframes skel-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.skeleton-row td{padding:16px 12px}

/* Auth forms (login/signup) */
.auth-err{display:none;background:var(--red-soft);color:var(--red);border-radius:11px;padding:10px 13px;font-size:13px;font-weight:600;margin-top:16px}
.auth-note{margin-top:20px;padding:12px 14px;background:var(--app-bg);border-radius:11px;font-size:12.5px;color:var(--app-text-2);font-family:var(--mono);line-height:1.6}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--app-text-3);font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--app-border)}
.field-hint{font-size:12px;color:var(--app-text-3);margin-top:6px}

/* Grid map legend + proposal-layer styling */
.map-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12.5px;color:var(--app-text-2);margin-bottom:14px}
.map-legend .sw{display:inline-flex;align-items:center;gap:6px}
.map-legend .sw i{width:10px;height:10px;border-radius:50%;display:inline-block}
.map-legend .sw.line i{width:16px;height:0;border-top:2px dashed var(--app-text-3);border-radius:0}
.map-legend .sw.line-transmission i{width:16px;height:0;border-top:2.5px solid #B5301D;border-radius:0}
.map-legend .sw.line-distribution i{width:16px;height:0;border-top:2px solid #C98A2E;border-radius:0}
.grid-line-toggle-group{display:inline-flex;align-items:center;gap:8px}
.map-note{font-size:11.5px;color:var(--app-text-3);margin-top:10px;font-family:var(--mono)}
/* Leaflet — light branding pass so the map chrome doesn't look bolted-on */
/* Leaflet sets position:relative on this element but no z-index, so it
   never gets its own stacking context — its internal panes/controls (real
   Leaflet z-index values up to 1000 for zoom buttons) escape straight into
   whatever ancestor stacking context the map happens to sit in, and can
   outrank page-level UI with a much lower z-index, like the mobile sidebar
   drawer (.app-side.open, z-index:100) or a modal backdrop. Giving the
   container its own z-index contains every value inside it for good. */
.leaflet-container{font-family:var(--app-font);background:var(--cream-2);position:relative;z-index:0}
.leaflet-popup-content-wrapper{border-radius:14px;box-shadow:var(--app-shadow-soft)}
.leaflet-popup-content{margin:14px 16px}
.leaflet-bar{border-radius:10px!important;overflow:hidden;border:1px solid var(--app-border)!important;box-shadow:var(--app-shadow-soft)!important}
.leaflet-bar a{color:var(--app-text)!important;background:var(--app-surface)!important}
.leaflet-bar a:hover{background:var(--cream-2)!important}
.leaflet-control-attribution{background:rgba(252,250,244,.85)!important;font-size:10px!important;color:var(--app-text-3)!important}

@media(prefers-reduced-motion:reduce){
  .modal,.cp-box,.toast{animation:none!important;transition:none!important}
}