/* Inter is vendored so every visitor renders identical metrics - the
   lockup's stem geometry depends on them. */
@font-face{
  font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-400.ttf) format("truetype");
}
@font-face{
  font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/inter-700.ttf) format("truetype");
}

:root{
  /* Sampled from the approved v3 mockups: page ground #fcfaf8,
     black display type, deep gold #876525. */
  --bg:#fcfaf8;
  --bg-soft:#faf7f2;
  --surface:#fbf8f4;
  --text:#0e1116;
  --muted:#5f6570;
  --line:#e4ddd1;
  --line-soft:rgba(88,78,65,.12);
  --accent:#876525;
  --accent-soft:#cbb98e;
  --button:#15191f;
  --button-text:#f9f7f2;
  --shadow:0 22px 64px rgba(63,48,29,.07);
  --max:1440px;
}
html[data-theme="dark"]{
  --bg:#0c1014;
  --bg-soft:#11161b;
  --surface:#11161b;
  --text:#f3efe7;
  --muted:#a4abb1;
  --line:#283038;
  --line-soft:rgba(255,255,255,.10);
  --accent:#c7a56d;
  --accent-soft:#715b37;
  --button:#f0ece4;
  --button-text:#0b0f13;
  --shadow:0 28px 72px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
img{max-width:100%;display:block}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.container{width:min(var(--max),calc(100% - 72px));margin-inline:auto}
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)
}
.header-inner{height:92px;display:grid;grid-template-columns:160px 1fr auto auto;align-items:center;gap:22px}
.brand{display:inline-flex;flex-direction:column;font-size:31px;line-height:.72;font-weight:700;letter-spacing:-.058em;width:max-content}
/* The lockup's right stems share one stroke. Computed from Inter Bold
   advances: pearl's l-stem sits at 2.040em; black's k-stem lands there
   when black tracks at -.020em (adv(blac) 2.034 + k bearing .084 +
   4 x -.020 = 2.038). The second line rises .10em into the first so the
   k stem grows out of the l stem - one continuous line, mirroring the
   p-b column on the left. */
/* The joint is a continuation, never a stack: at line-height .72 the k's
   ascender top (.73em) already meets the l's baseline, so the rise is
   only the antialiasing seam (.015em) - the stems butt into one line. */
/* Measured on rendered Inter Bold glyphs, pixel-level: black tracks at
   -.043em so the k stem's left edge lands on the l stem's left edge;
   zero rise is the butt joint (exact continuation +.0066em, zero keeps
   a 0.2px sub-pixel fuse). Weight true 700 - synthetic bolding from
   760 distorted the stems. */
.brand span:last-child{letter-spacing:-.043em}
.nav{display:flex;justify-content:center;align-items:center}
.nav a{position:relative;padding:14px 22px;font-size:14px;color:var(--text)}
.nav a:not(:last-child)::after{content:"";position:absolute;right:-2px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--accent)}
.nav a.active::before{content:"";position:absolute;left:22px;right:22px;bottom:7px;height:1px;background:var(--accent)}
/* Portal: a utility action beside the theme control - the hierarchy of
   a sign-in, in the pearlblack language. Not a primary-nav item. */
.nav-portal{
  justify-self:end;margin-right:-8px;
  display:inline-flex;align-items:center;min-height:40px;
  padding:8px 15px;border:1px solid var(--line);border-radius:3px;
  font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--text);
  transition:border-color .2s ease
}
.nav-portal:hover{border-color:var(--accent);color:var(--accent)}
.theme{display:flex;align-items:center;gap:8px;color:var(--muted)}
.theme svg{width:16px;height:16px;stroke:currentColor}
.theme button{width:48px;height:26px;border-radius:999px;border:1px solid var(--line);background:var(--surface);position:relative;cursor:pointer}
.theme button::after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .25s ease}
html[data-theme="dark"] .theme button::after{transform:translateX(22px)}
.eyebrow,.section-label{
  display:flex;align-items:center;gap:16px;
  color:var(--accent);font-size:11px;font-weight:720;letter-spacing:.14em;text-transform:uppercase
}
.eyebrow::before,.section-label::before{content:"";width:22px;height:1px;background:var(--accent)}
.hero{min-height:calc(100svh - 92px);display:flex;align-items:center;border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(540px,1.08fr);gap:20px;align-items:center;padding:50px 0}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(58px,6.2vw,100px);line-height:.98;letter-spacing:-.058em;font-weight:640;margin:24px 0 28px}
h2{font-size:clamp(39px,4.6vw,68px);line-height:1.01;letter-spacing:-.047em;font-weight:610;margin:18px 0 24px}
h3{font-size:21px;letter-spacing:-.025em;margin-bottom:10px}
.lede{max-width:690px;font-size:clamp(18px,1.55vw,23px);line-height:1.55;color:var(--muted)}
.body{font-size:17px;line-height:1.68;color:var(--muted)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:28px;
  min-width:180px;padding:15px 20px;border:1px solid var(--text);
  border-radius:3px;font-size:14px;transition:transform .2s ease,background .2s ease
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--button);color:var(--button-text)}
.pearl-stage{position:relative;min-height:650px;display:grid;place-items:center;perspective:1100px;isolation:isolate}
.pearl-media{
  position:absolute;inset:2%;display:grid;place-items:center;
  transition:transform .25s ease,opacity .45s ease,filter .45s ease;
  transform:translate3d(var(--px,0),var(--py,0),0) scale(var(--ps,1));
}
.pearl-media img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 38px 38px rgba(56,42,24,.10));
}
.pearl-dark{opacity:0;pointer-events:none}
html[data-theme="dark"] .pearl-light{opacity:0;pointer-events:none}
html[data-theme="dark"] .pearl-dark{opacity:1}
html[data-theme="dark"] .pearl-media img{filter:drop-shadow(0 36px 64px rgba(0,0,0,.36))}
.pearl-stage::after{
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,transparent 61%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 71%);
  pointer-events:none;animation:pulse 6s ease-in-out infinite
}
@keyframes pulse{50%{transform:scale(1.025);opacity:.68}}
.section{padding:86px 0;border-bottom:1px solid var(--line)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr)}
.principle{padding:24px 28px;border-right:1px solid var(--line)}
.principle:first-child{padding-left:0}.principle:last-child{border-right:0}
.principle-head{display:flex;align-items:center;gap:17px}
.num{width:42px;height:42px;border:1px solid var(--accent-soft);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:12px}
.principle p{margin:8px 0 0 59px;color:var(--muted);font-size:14px;line-height:1.5}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.card{
  min-height:300px;padding:28px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease
}
.card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.card p{max-width:300px;color:var(--muted);line-height:1.58}
.card-link{position:absolute;left:28px;bottom:26px;font-size:13px;font-weight:650}
.card-art{position:absolute;right:-10%;bottom:-13%;width:53%;opacity:.46;color:var(--accent)}
.cap-grid{display:grid;grid-template-columns:1.05fr repeat(4,1fr);border-top:1px solid var(--line);margin-top:38px}
.cap{min-height:285px;padding:30px 26px;border-right:1px solid var(--line)}
.cap:first-child{padding-left:0}.cap:last-child{border-right:0}
.cap p{font-size:14px;line-height:1.58;color:var(--muted)}
.value-tag{margin-top:28px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:720}
.value-text{font-size:13px;color:var(--text)!important}
.layout-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.feature{min-height:215px;padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.feature p{font-size:14px;line-height:1.58;color:var(--muted)}
.value-strip{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);margin-top:36px}
.value{padding:28px;border-right:1px solid var(--line)}
.value:first-child{padding-left:0}.value:last-child{border-right:0}
.value p{font-size:14px;line-height:1.55;color:var(--muted)}
.economic{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 4%,var(--bg)),var(--bg))}
.econ-list{display:grid;gap:0}
.econ-row{display:grid;grid-template-columns:145px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--line)}
.econ-row span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:720}
.econ-row strong{font-size:20px;font-weight:560}
.visual-frame{min-height:510px;display:grid;place-items:center;position:relative}
.shield{width:330px;aspect-ratio:1;position:relative}
.shield::before,.shield::after{
  content:"";position:absolute;inset:10%;clip-path:polygon(50% 0,90% 17%,84% 71%,50% 100%,16% 71%,10% 17%)
}
.shield::before{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,white),color-mix(in srgb,var(--surface) 75%,black));box-shadow:0 26px 60px rgba(0,0,0,.11);border:1px solid var(--accent)}
.shield::after{inset:21%;background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.shield-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-45%);z-index:3;font-size:44px}
.about-arch{width:75%;height:430px;border:1px solid var(--line);border-bottom:0;border-radius:48% 48% 0 0;position:relative;box-shadow:inset 0 0 0 34px color-mix(in srgb,var(--bg) 82%,var(--line))}
.about-arch::before,.about-arch::after{content:"";position:absolute;border:1px solid var(--line);border-bottom:0;border-radius:48% 48% 0 0}
.about-arch::before{inset:12% 12% 0}.about-arch::after{inset:24% 24% 0}
.founder{display:grid;grid-template-columns:minmax(180px,.5fr) 1.25fr 1.25fr;gap:42px;align-items:center;margin-top:34px}
.portrait-wrap{position:relative;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.portrait-wrap img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.portrait-color{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.portrait-wrap:hover .portrait-color{opacity:1}
.quote{padding-left:34px;border-left:1px solid var(--line);font-size:27px;line-height:1.45;font-style:italic}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:34px}
.milestone{padding:28px 28px 0 0;position:relative}
.milestone::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);position:absolute;left:0;top:-5px}
.milestone p{font-size:14px;line-height:1.58;color:var(--muted)}
.docs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.doc{min-height:200px;padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.doc p{font-size:14px;line-height:1.55;color:var(--muted)}
.doc-meta{font-size:11px;color:var(--muted);margin-top:26px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pill{border:1px solid var(--line);padding:9px 14px;border-radius:5px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer}
.pill.active{background:var(--button);color:var(--button-text);border-color:var(--button)}
.form-shell{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden}
.form-side,.form-main{padding:32px}.form-side{border-right:1px solid var(--line)}
.form-item{padding:20px 0;border-bottom:1px dashed var(--line)}.form-item:last-child{border-bottom:0}
.form-item p{font-size:13px;line-height:1.55;color:var(--muted)}
label{display:block;font-size:12px;font-weight:650;margin:16px 0 7px}
input,textarea,select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--text)}
textarea{min-height:110px;resize:vertical}
/* The select drops its native chrome and dresses like every other field;
   the popup list follows color-scheme. */
select{
  appearance:none;-webkit-appearance:none;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23876525' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:38px;cursor:pointer;
}
html[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c7a56d' stroke-width='1.6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] select option{background:#11161b;color:#f3efe7}
/* Environment selector: a custom listbox, because the OS paints native
   dropdown menus and their row-highlight cannot be pinned from CSS.
   The panel sits on the site surface like every field; only the
   highlight moving over the rows carries the deep navy. */
.env-select{position:relative;--menu-navy:#1e4e79}
.env-trigger{
  display:block;width:100%;padding:13px 38px 13px 14px;
  border:1px solid var(--line);border-radius:4px;
  background-color:transparent;color:var(--text);text-align:left;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23876525' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
html[data-theme="dark"] .env-trigger{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c7a56d' stroke-width='1.6'/%3E%3C/svg%3E");
}
.env-trigger:hover,.env-trigger:focus,.env-trigger:focus-visible,
.env-select.open .env-trigger{outline:none;border-color:var(--text)}
.env-menu{
  position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);
  margin:0;padding:6px;list-style:none;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  box-shadow:var(--shadow);
  max-height:min(320px,48dvh);overflow:auto;overscroll-behavior:contain;
}
.env-menu li{padding:12px;border-radius:3px;color:var(--text);cursor:pointer}
.env-menu li.hot{background:var(--menu-navy);color:#f3efe7}
.env-menu li[aria-selected="true"]{background:color-mix(in srgb,var(--menu-navy) 14%,transparent)}
.env-menu li[aria-selected="true"].hot{background:var(--menu-navy);color:#f3efe7}
/* Fields on hover and focus: no outline ring, the border itself turns
   polar - near-black on the light theme, warm white on the dark. */
input:hover,textarea:hover,select:hover,
input:focus,textarea:focus,select:focus,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none;border-color:var(--text);
}
.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.small{font-size:12px;line-height:1.55;color:var(--muted)}
.legal{max-width:900px;padding:100px 0}
footer{padding:34px 0}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}
.footer-links{display:flex;gap:20px;font-size:12px;color:var(--muted);justify-content:flex-end;flex-wrap:wrap}
.footer-trust{margin-top:10px}
.footer-trust a:first-child{color:var(--text);font-weight:650}
.footer-meta{font-size:12px;color:var(--muted);margin-top:14px}
/* The sovereignty line closes with the mockup's small gold dash */
.footer-sovereign::after{
  content:"";display:inline-block;width:22px;height:1px;background:var(--accent);
  margin-left:12px;vertical-align:middle;
}
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .65s ease}
[data-reveal].visible{opacity:1;transform:none}
@media(max-width:1100px){
  .hero-grid,.layout-2{grid-template-columns:1fr}
  .hero{min-height:auto}.pearl-stage{min-height:560px}
  .feature-grid,.docs-grid{grid-template-columns:1fr 1fr}
  .cap-grid{grid-template-columns:1fr 1fr}
  .cap:first-child{grid-column:1/-1;border-bottom:1px solid var(--line)}
  .value-strip{grid-template-columns:1fr 1fr}
  .founder{grid-template-columns:260px 1fr}.quote{grid-column:1/-1}
}
@media(max-width:760px){
  .container{width:calc(100% - 30px)}
  .header-inner{height:78px;grid-template-columns:110px 1fr auto}
  .brand{font-size:26px}.nav{display:none}
  h1{font-size:52px}.hero-grid{padding-top:34px}.pearl-stage{min-height:430px}
  .grid-4,.cards-3,.feature-grid,.docs-grid,.cap-grid,.value-strip,.timeline,.founder{grid-template-columns:1fr}
  .principle,.cap,.value{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .principle p{margin-left:59px}
  .cap:first-child{grid-column:auto}
  .two-fields{grid-template-columns:1fr}
  .form-shell{grid-template-columns:1fr}.form-side{border-right:0;border-bottom:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr}.footer-meta{text-align:left!important}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .pearl-stage::after{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
}



/* ============================================================
   pearlblack Home — V2 canonical messaging + integrated pearl
   ============================================================ */

.home-hero{
  --mx:0; --my:0; --scroll:0;
  min-height:calc(100svh - 92px);
  padding:48px 0 32px;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(58% 70% at 78% 47%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 74%),
    var(--bg);
}
.home-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.36;
  background-image:
    linear-gradient(color-mix(in srgb,var(--line) 24%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--line) 22%,transparent) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 90%);
}
.home-hero .hero-grid{
  width:100%;position:relative;z-index:2;
  grid-template-columns:minmax(0,.96fr) minmax(520px,1.04fr);
  gap:24px;padding:0;
}
.hero-copy{align-self:center;max-width:760px}
.hero-copy h1{font-size:clamp(62px,6.25vw,102px);max-width:820px;margin-top:26px}
.hero-copy .lede{max-width:680px}
.hero-line{overflow:hidden;display:block}
.hero-line>span{display:block;transform:translateY(105%);opacity:0;animation:pbLineIn .82s cubic-bezier(.2,.8,.2,1) forwards}
.hero-line:nth-child(2)>span{animation-delay:.07s}
.hero-line:nth-child(3)>span{animation-delay:.14s}
.home-hero .lede{opacity:0;transform:translateY(12px);animation:pbFadeUp .68s .38s forwards}
.home-hero .actions{opacity:0;transform:translateY(12px);animation:pbFadeUp .68s .50s forwards}
@keyframes pbLineIn{to{transform:none;opacity:1}}
@keyframes pbFadeUp{to{opacity:1;transform:none}}

.pearl-stage{
  position:relative;min-height:650px;display:grid;place-items:center;
  perspective:1200px;isolation:isolate;
}
.pearl-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:3;
  pointer-events:none;
}
.pearl-halo{
  position:absolute;inset:5%;z-index:0;border-radius:50%;
  background:radial-gradient(circle,transparent 52%,color-mix(in srgb,var(--accent) 5%,transparent) 65%,transparent 73%);
  animation:pbHalo 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pbHalo{50%{transform:scale(1.025);opacity:.72}}

.pearl-integrated{
  --pearl-scale:1;
  position:absolute;inset:-1% -3% -1% -3%;z-index:1;
  display:grid;place-items:center;
  transform-style:preserve-3d;
  transform:
    translate3d(calc(var(--mx)*9px),calc(var(--my)*7px),0)
    rotateX(calc(var(--my)*-2.2deg))
    rotateY(calc(var(--mx)*2.8deg))
    scale(calc(var(--pearl-scale) + var(--scroll)*.012));
  transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .45s ease;
  pointer-events:none;
}
.pearl-integrated img{
  position:absolute;width:100%;height:100%;object-fit:contain;
  /* Fade the raster edge into the live page background. */
  -webkit-mask-image:radial-gradient(ellipse 53% 49% at 50% 50%,#000 0 72%,rgba(0,0,0,.96) 82%,rgba(0,0,0,.35) 94%,transparent 100%);
  mask-image:radial-gradient(ellipse 53% 49% at 50% 50%,#000 0 72%,rgba(0,0,0,.96) 82%,rgba(0,0,0,.35) 94%,transparent 100%);
  filter:drop-shadow(0 34px 34px rgba(48,37,25,.08));
  transition:opacity .45s ease,filter .45s ease;
}
.pearl-integrated .pearl-dark-image{opacity:0}
html[data-theme="dark"] .pearl-integrated .pearl-light-image{opacity:0}
html[data-theme="dark"] .pearl-integrated .pearl-dark-image{opacity:1}
html[data-theme="dark"] .pearl-integrated img{filter:drop-shadow(0 38px 62px rgba(0,0,0,.32))}

.pearl-label{
  position:absolute;z-index:5;right:2%;bottom:10%;
  padding-left:42px;font-weight:720;letter-spacing:-.02em;
  transform:translate3d(calc(var(--mx)*-7px),calc(var(--my)*-7px),0)
}
.pearl-label::before{
  content:"";position:absolute;width:34px;height:1px;background:var(--text);
  left:0;top:9px;transform:rotate(38deg);transform-origin:right center;opacity:.74
}
.pearl-label small{
  display:block;margin-top:6px;font-size:9px;font-weight:650;
  color:var(--muted);letter-spacing:.14em;text-transform:uppercase
}
.stage-caption{
  position:absolute;left:5%;bottom:5%;z-index:5;font-size:10px;
  color:var(--muted);letter-spacing:.13em;text-transform:uppercase;
  display:flex;gap:10px;align-items:center
}
.stage-caption::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent)
}

/* Govern / Preserve / Prove / Optimize — restored from V2 */
.principle-strip{
  padding:0;border-bottom:1px solid var(--line);
  position:relative;z-index:4;background:color-mix(in srgb,var(--bg) 96%,transparent)
}
.principle-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.principle-live{
  text-align:left;border:0;border-right:1px solid var(--line);
  background:transparent;color:var(--text);
  padding:28px 26px;display:grid;grid-template-columns:48px 1fr;gap:17px;
  cursor:pointer;position:relative;overflow:hidden
}
.principle-live:first-child{padding-left:0}
.principle-live:last-child{border-right:0}
.principle-live::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--accent);transition:right .42s cubic-bezier(.2,.8,.2,1)
}
.principle-live:hover::after,.principle-live:focus-visible::after,.principle-live.active::after{right:0}
.principle-live .copy p{font-size:13px;line-height:1.52;color:var(--muted);margin:7px 0 0}
/* No principle is permanently lit; illumination is the pointer's alone */

.home-section{
  padding:100px 0;border-bottom:1px solid var(--line);
  position:relative;overflow:hidden
}
.home-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:radial-gradient(38% 65% at 82% 36%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 72%)
}
.home-section .container{position:relative;z-index:2}
.messaging-head{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;
  align-items:end;margin-bottom:42px
}
.messaging-head h2{margin-bottom:0}
.message-line{font-size:clamp(28px,3.5vw,54px);line-height:1.07;letter-spacing:-.045em;font-weight:610}
.message-line span{color:var(--muted)}

/* Original V2 cards + icons */
.live-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.live-card{
  min-height:330px;padding:28px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);position:relative;overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  box-shadow:var(--shadow)
}
.live-card::before{
  content:"";position:absolute;width:240px;height:240px;border-radius:50%;
  right:-120px;top:-120px;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 11%,transparent),transparent 68%);
  opacity:.72;transition:transform .5s ease
}
.live-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 48%,var(--line));box-shadow:0 24px 60px rgba(45,39,28,.12)}
.live-card:hover::before{transform:scale(1.15)}
.live-card .card-index{font-size:10px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase}
.live-card h3{font-size:30px;margin-top:70px}
.live-card p{font-size:15px;color:var(--muted);line-height:1.62;max-width:78%}
.live-card .card-link{left:28px;bottom:26px}
.card-glyph{position:absolute;right:24px;bottom:26px;width:92px;height:92px;opacity:.65;color:var(--accent)}

.capability-flow{
  display:grid;grid-template-columns:1.2fr repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.flow-intro,.flow-item{
  padding:34px 28px;border-right:1px solid var(--line);
  min-height:290px;position:relative
}
.flow-intro{padding-left:0}
.flow-item:last-child{border-right:0}
.flow-item .flow-no{font-size:10px;color:var(--accent);letter-spacing:.12em}
.flow-item h3{font-size:24px;margin-top:48px}
.flow-item p{color:var(--muted);font-size:14px;line-height:1.58}
.flow-item .value-tag{position:absolute;left:28px;bottom:56px}
.flow-item .flow-value{position:absolute;left:28px;bottom:24px;font-size:13px;color:var(--text)}

.economic-band{
  padding:110px 0;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 4%,var(--bg)),var(--bg))
}
.economic-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.economic-stack{display:grid;gap:12px}
.economic-band .econ-row{
  display:grid;grid-template-columns:150px 1fr;gap:30px;
  padding:18px 0;border-bottom:1px solid var(--line);align-items:center
}
.economic-band .econ-row span{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--accent);font-weight:700
}
.economic-band .econ-row strong{font-size:20px;font-weight:560}
.final-claim{font-size:clamp(48px,6vw,90px);line-height:.98;letter-spacing:-.055em;margin:0}
.final-claim .muted{color:var(--muted)}

@media(max-width:1100px){
  .home-hero .hero-grid{grid-template-columns:1fr}
  .pearl-stage{min-height:570px}
  .hero-copy{padding-top:16px}
  .messaging-head,.economic-grid{grid-template-columns:1fr}
  .capability-flow{grid-template-columns:1fr 1fr}
  .flow-intro{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:760px){
  .home-hero{min-height:auto;padding-top:34px}
  .home-hero .hero-grid{gap:0}
  .hero-copy h1{font-size:54px}
  .pearl-stage{min-height:445px;margin-top:14px}
  .pearl-integrated{inset:0 -5%}
  .pearl-label{right:0;bottom:4%}
  .principle-grid{grid-template-columns:1fr 1fr}
  .principle-live:nth-child(2){border-right:0}
  .principle-live:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .live-cards{grid-template-columns:1fr}
  .capability-flow{grid-template-columns:1fr}
  .flow-intro{grid-column:auto}
  .flow-item{border-right:0;border-bottom:1px solid var(--line)}
  .messaging-head{gap:24px}
  .economic-band{padding:78px 0}
  .economic-band .econ-row{grid-template-columns:1fr;gap:8px}
  .stage-caption{display:none}
}
@media(prefers-reduced-motion:reduce){
  .pearl-halo{animation:none!important}
  .hero-line>span,.home-hero .actions,.home-hero .lede{animation:none!important;opacity:1;transform:none}
}


/* FINAL STATIC VISUAL SYSTEM */
:root{
  --icon:#b27d22;
}
.pb-icon{width:46px;height:46px;color:var(--icon);display:block}
.pb-icon.sm{width:30px;height:30px}
.pb-icon.lg{width:58px;height:58px}
.static-visual{
  position:relative;
  min-height:620px;
  overflow:hidden;
}
.static-visual .theme-image{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
  transition:opacity .25s ease;
  /* v3 mockup renders share the page ground (#fcf9f7 vs #fcfaf8), so the
     light theme needs no color correction - only a soft edge dissolve. */
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 0 60%,rgba(0,0,0,.86) 76%,rgba(0,0,0,.24) 89%,transparent 98%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 0 60%,rgba(0,0,0,.86) 76%,rgba(0,0,0,.24) 89%,transparent 98%);
}
/* The callout is live text, not pixels: the raster's own caption fades out
   with the mask (it also misspells LAYER), and this stays crisp on any
   screen and inherits the theme. */
.static-visual .visual-callout{
  position:absolute;right:4%;bottom:20%;text-align:left;pointer-events:none;
}
.static-visual .visual-callout .name{font-weight:650;font-size:21px;line-height:1.35;padding-bottom:2px;color:var(--text);letter-spacing:-.01em}
.static-visual .visual-callout .sub{margin-top:6px;font-family:ui-monospace,"DejaVu Sans Mono",monospace;font-size:10.5px;letter-spacing:.24em;color:var(--muted)}
.static-visual .visual-callout .rule{width:64px;height:1px;background:var(--accent);opacity:.7;margin-bottom:10px}
.static-visual .theme-image.dark{opacity:0}
html[data-theme="dark"] .static-visual .theme-image.light{opacity:0}
html[data-theme="dark"] .static-visual .theme-image.dark{opacity:1}
/* The dark render is canvas-normalized to the light asset's sphere fraction,
   so a theme switch keeps one object at one size. Its ground (#0c0f11) sits a
   hair off the page (#0c1014); the shared edge mask dissolves the seam. */
/* Pages without a dark render reuse the light image; in dark the cream
   backdrop is masked down to a warm halo that reads as the pearl's own light. */
html[data-theme="dark"] .static-visual .theme-image.solo{
  opacity:1;
  filter:brightness(.93) saturate(.96);
  -webkit-mask-image:radial-gradient(ellipse 46% 46% at 50% 50%,#000 0 48%,rgba(0,0,0,.7) 64%,rgba(0,0,0,.16) 78%,transparent 90%);
  mask-image:radial-gradient(ellipse 46% 46% at 50% 50%,#000 0 48%,rgba(0,0,0,.7) 64%,rgba(0,0,0,.16) 78%,transparent 90%);
}
html[data-theme="dark"] .static-visual{background:none}
.home-hero,.hero{background:var(--bg)!important}
.home-hero::before{display:none!important}
.pearl-canvas,.pearl-halo,.stage-caption{display:none!important}
.pearl-stage::after{display:none!important;animation:none!important}
.pearl-media{transform:none!important;transition:opacity .45s ease}
[data-pearl-mode]{cursor:default!important}
[data-pearl-mode]::after{display:none!important}
.live-card:hover,.card:hover{transform:none!important}
[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}

/* V2 text/layout retained, motion removed. */
.hero-line>span,.home-hero .lede,.home-hero .actions{
  animation:none!important;opacity:1!important;transform:none!important
}
/* The principle numbers illuminate as the pointer passes (Curator ruling) */
.principle-live{pointer-events:auto;cursor:default}
.principle-live .num{
  transition:background .25s ease,color .25s ease,border-color .25s ease,
    box-shadow .25s ease;
}
.principle-live:hover .num,.principle-live:focus-visible .num{
  background:var(--accent);color:var(--bg);border-color:var(--accent);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 16%,transparent);
}

/* Consistent mockup cards */
.mock-icon-row{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--line);margin-top:30px
}
.mock-icon-item{padding:26px;border-right:1px solid var(--line)}
.mock-icon-item:first-child{padding-left:0}
.mock-icon-item:last-child{border-right:0}
.mock-icon-item h3{margin-top:20px}
.mock-icon-item p{font-size:13px;color:var(--muted);line-height:1.55}

/* Easy asset replacement */
[data-visual-role]{position:relative}

/* About portrait */
.founder-photo{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  border-radius:9px;border:1px solid var(--line);box-shadow:var(--shadow)
}
/* The founder portrait is black-and-white in both themes (Curator ruling).
   The color source stays registered for future use. */
.founder-photo.color{display:none}

/* No accidental image backgrounds */
img{image-rendering:auto}

@media(max-width:1100px){
  .static-visual{min-height:540px}
  .mock-icon-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .static-visual{min-height:430px}
  .mock-icon-row{grid-template-columns:1fr 1fr}
  .mock-icon-item{border-bottom:1px solid var(--line)}
}

/* ============================================================
   v3 - approved mockup system
   One shared container rhythm; hero column never outgrows it.
   ============================================================ */

/* Hero band height comes from its content, matching the mockup rhythm -
   the headline block then shares one grid line with every section below.
   One vertical origin and one type scale for the home hero and every page
   hero, so the top block aligns identically across all routes. */
.hero,.home-hero{min-height:auto}
.home-hero{padding:38px 0 26px}
.hero .hero-grid{padding:38px 0 46px}
.home-hero .hero-grid{padding:0}
.hero-grid h1,.hero-copy h1{font-size:clamp(54px,5.6vw,88px);letter-spacing:-.045em;margin-top:24px}

/* One left origin for every route: hero copy, eyebrow, headline, lede,
   buttons and the 01 principle all sit flush on the container edge.
   No compensating offsets - alignment by construction. */
.home-hero .hero-copy,.hero .hero-grid>div:first-child{padding-left:0}
.principle-live:first-child{padding-left:0}
.hero-copy,.hero-copy h1,.home-hero .hero-copy .lede{margin-left:0}
/* The V2 block set this grid to width:100%, overriding .container's gutters
   and pushing the home hero left of every other route. Restore the shared
   container width so the home hero starts where all page heroes start. */
.home-hero .hero-grid{width:min(var(--max),calc(100% - 72px))}
@media(max-width:760px){
  .home-hero .hero-grid{width:calc(100% - 30px)}
}

/* Hero proportions per mockup: copy is the narrow column, visual the wide one */
.home-hero .hero-grid{grid-template-columns:minmax(0,.86fr) minmax(480px,1.14fr)}
.hero-copy h1{font-size:clamp(54px,5.6vw,88px);max-width:640px;letter-spacing:-.045em}
.hero-copy .lede{max-width:560px;font-size:clamp(17px,1.4vw,20px)}
.hero-copy{max-width:640px}
/* The slide-in wrappers are static now; hidden overflow was clipping glyphs */
.hero-line{overflow:visible}
/* Generic page heroes share the same column rhythm as the home hero */
.hero-grid{grid-template-columns:minmax(0,.86fr) minmax(480px,1.14fr)}
.hero-grid h1{max-width:640px}
.hero-grid .lede{max-width:600px}

/* Imagery is still and inert (Curator ruling): no motion anywhere, and
   images cannot be dragged, selected or lifted off the page. */
.pearl-live{position:absolute;inset:0;display:grid;place-items:center}
.pearl-live::before,.pearl-live::after{display:none}
img{
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;-webkit-user-select:none;
}
/* Dark assets are edge-feathered into their exact grounds in the files
   themselves; no shadow or filter may outline the frame, so the image
   reads as part of the page, never as a rectangle. */
/* The glow and sheen belong to the light theme only; the dark render
   carries its own lighting (Curator ruling) */
html[data-theme="dark"] .pearl-live::before,
html[data-theme="dark"] .pearl-live::after{display:none}
@media(prefers-reduced-motion:reduce){
  .pearl-live .theme-image,.pearl-live::before,.pearl-live::after{animation:none!important}
}

/* Hero callout seated at the leader line's end, with a drawn leader that
   continues the render's dotted line: diagonal into the horizontal rule */
.static-visual .visual-callout{right:6%;bottom:26%}
.static-visual .visual-callout .rule{position:relative;width:72px;opacity:.85;background:var(--text)}
.static-visual .visual-callout .rule::before{
  content:"";position:absolute;right:100%;bottom:0;width:64px;height:1px;
  background:var(--text);opacity:.9;
  transform:rotate(-38deg);transform-origin:right bottom;
}
.static-visual .visual-callout .rule::after{
  content:"";position:absolute;left:-2px;top:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--accent);
}

/* Platform hero: pearl + connected layer list */
.platform-visual{display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:0}
.platform-visual .static-visual{min-height:560px}
.layer-list{display:grid;gap:26px;padding:12px 0}
.layer{position:relative;padding-left:22px}
.layer::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* Short leader lines from each layer label toward the visual, converging
   like the mockup's leads (Curator ruling: the short form) */
.platform-visual .layer::after{
  content:"";position:absolute;top:9px;left:-8px;height:1px;
  transform-origin:right center;pointer-events:none;
  background:linear-gradient(to left,var(--accent) 30%,color-mix(in srgb,var(--accent) 45%,transparent) 70%,transparent);
  opacity:.75;
}
.platform-visual .layer:nth-child(1)::after{width:170px;transform:translateX(-100%) rotate(7deg)}
.platform-visual .layer:nth-child(2)::after{width:135px;transform:translateX(-100%) rotate(4deg)}
.platform-visual .layer:nth-child(3)::after{width:110px;transform:translateX(-100%)}
.platform-visual .layer:nth-child(4)::after{width:110px;transform:translateX(-100%) rotate(-2deg)}
.platform-visual .layer:nth-child(5)::after{width:135px;transform:translateX(-100%) rotate(-5deg)}
.platform-visual .layer:nth-child(6)::after{width:170px;transform:translateX(-100%) rotate(-8deg)}
.layer h3{font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 6px;font-weight:720}
.layer p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.layer.deep h3{text-transform:none;letter-spacing:-.01em;font-size:17px}
.layer.deep p{font-family:ui-monospace,"DejaVu Sans Mono",monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase}

/* Capability cards (platform core capabilities) */
.cap-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:34px}
.cap-card{
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:24px 20px;min-height:250px;position:relative;display:flex;flex-direction:column;gap:12px
}
.cap-card .pb-icon{width:34px;height:34px;color:var(--accent)}
.cap-card h3{font-size:17px;margin:8px 0 0}
.cap-card p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.cap-card .card-more{margin-top:auto;font-size:12px;font-weight:650}

/* Check row (built for value) */
.check-row{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);margin-top:30px}
.check-item{padding:28px 24px 34px;border-right:1px solid var(--line)}
.check-item:first-child{padding-left:0}
.check-item:last-child{border-right:0}
.check-item .pb-icon{width:26px;height:26px;color:var(--accent)}
.check-item h3{font-size:17px;margin:16px 0 8px}
.check-item p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}

/* Security value cards with extracted art tiles */
.value-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.value-card{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:26px 24px 0;overflow:hidden;display:flex;flex-direction:column}
.value-card .pb-icon{width:28px;height:28px;color:var(--accent)}
.value-card h3{font-size:19px;margin:14px 0 8px}
.value-card p{font-size:13.5px;line-height:1.55;color:var(--muted)}
/* Value tiles are true light/dark render pairs with grounds seated on the
   card surface; no masks, no runtime filters. */
.value-card img{margin-top:auto;width:100%;object-fit:cover;aspect-ratio:4/3}
.value-card img.dk{display:none}
html[data-theme="dark"] .value-card img.lt{display:none}
html[data-theme="dark"] .value-card img.dk{display:block}

/* Home: category cards with mockup art */
.live-card .card-art-img{
  position:absolute;right:-4%;bottom:-6%;width:56%;opacity:.94;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 55% 55%,#000 0 55%,transparent 92%);
  mask-image:radial-gradient(ellipse 60% 60% at 55% 55%,#000 0 55%,transparent 92%);
}
/* At the stacked mobile composition the card art steps back to the
   smaller supporting footprint; text stays primary. */
@media(max-width:800px){
  .live-card .card-art-img{
    right:-8%;bottom:-12%;width:42%;opacity:.8;
    -webkit-mask-image:radial-gradient(ellipse 52% 52% at 55% 58%,#000 0 42%,rgba(0,0,0,.5) 66%,transparent 84%);
    mask-image:radial-gradient(ellipse 52% 52% at 55% 58%,#000 0 42%,rgba(0,0,0,.5) 66%,transparent 84%);
  }
}
/* Card copy always reads above the art */
.live-card .card-index,.live-card h3,.live-card p,.live-card .card-link{position:relative;z-index:1}
/* Card art is a true theme pair: light render on light, dark render on dark */
.live-card .card-art-img.dk{display:none}
html[data-theme="dark"] .live-card .card-art-img.lt{display:none}
html[data-theme="dark"] .live-card .card-art-img.dk{display:block}

/* Capability flow icons (home) */
.flow-item .pb-icon{width:32px;height:32px;color:var(--accent);margin-bottom:6px}
.flow-item h3{margin-top:14px}

/* Card icons: the clear set - thin gold line glyphs on transparency,
   one asset serving both themes (Curator ruling: clear only).
   Micro-UI stays on the sprite. */
/* Icon sizes measured from the mockups (1122px canvas, scaled to this
   1440px layout): card icons 38-40px -> 50px here; the Built for Value
   checks 20px -> 26px here. Two deliberate tiers, one vector hand. */
.flow-item .pb-icon,.cap-card .pb-icon,
.thesis-item .pb-icon,.principle-card .pb-icon,.value-card .pb-icon,
.measured-row .pb-icon{width:50px;height:50px}
.check-item .pb-icon{width:26px;height:26px}
.thesis-item{grid-template-columns:56px 1fr}
.pb-icon.sm{width:32px;height:32px}
.cat-icon .pb-icon{width:26px;height:26px}

/* Pilot overview: icon sits left of its text, one calm row per item */
.form-side .form-item{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start}
.form-side .form-item .pb-icon{grid-column:1;grid-row:1/3;margin-top:2px}
.form-side .form-item h3{grid-column:2;margin:0 0 4px}
.form-side .form-item p{grid-column:2;margin:0}

/* Native form controls (select dropdown lists) follow the active theme */
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
/* Scrollbar (Curator ruling): neutral resting thumb, native-like in both
   themes; deep blue appears only under the pointer and while dragging.
   Firefox derives its own hover shade from the resting color, so the
   resting neutral is the single declared color there. */
html{scrollbar-color:color-mix(in srgb,var(--text) 28%,transparent) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 28%,transparent);border-radius:5px}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active{background:#1e4e79}
.flow-item .icon-line{margin-bottom:6px}
.thesis-item{grid-template-columns:52px 1fr}

/* Docs: category cards */
.doc-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.doc-cat{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:26px;display:flex;flex-direction:column;min-height:190px;cursor:pointer;text-align:left;color:var(--text);transition:border-color .2s ease}
.doc-cat:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.doc-cat .cat-icon{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:16px}
.doc-cat .cat-icon .pb-icon{width:24px;height:24px;color:var(--accent)}
.doc-cat h3{font-size:19px;margin:0 0 8px}
.doc-cat p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}
.doc-cat .cat-count{margin-top:auto;padding-top:20px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.doc-cat.active{border-color:var(--accent)}

/* Pilot: overview + form shell per mockup */
.pilot-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:44px;align-items:start}
.pilot-copy .static-visual{min-height:430px;margin-top:8px}
.pilot-shell{display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.sov-note{margin-top:26px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--accent) 4%,var(--surface));padding:16px 18px;font-size:13px;line-height:1.55;color:var(--muted)}
.sov-note strong{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;margin-bottom:6px}
.process-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:26px;align-items:start;margin-top:36px}
.process-arrow{align-self:center;color:var(--muted);font-size:22px}
.process-step .num{margin-bottom:16px}
.process-step p{font-size:14px;line-height:1.58;color:var(--muted)}
.measured-row{display:grid;grid-template-columns:1.1fr repeat(3,1fr);border-top:1px solid var(--line);margin-top:30px}
.measured-row>div{padding:30px 26px;border-right:1px solid var(--line)}
.measured-row>div:first-child{padding-left:0}
.measured-row>div:last-child{border-right:0}
.measured-row .pb-icon{width:28px;height:28px;color:var(--accent)}
.measured-row h3{font-size:18px;margin:14px 0 8px}
.measured-row p{font-size:13.5px;line-height:1.55;color:var(--muted)}

/* Utility classes replacing inline style attributes (CSP compliance) */
.pb-sprite{display:none}
.brand-sm{font-size:21px}
.footer-sovereign{text-align:right}
.section-nb{border-bottom:0}
.fs-40{font-size:40px}
.fs-44{font-size:44px}
.fs-48{font-size:48px}
.mb-0{margin-bottom:0}
.mb-8{margin-bottom:8px}
.mb-14{margin-bottom:14px}
.mb-16{margin-bottom:16px}
.mt-14{margin-top:14px}
.mt-18{margin-top:18px}
.m-0{margin:0}
.pos-static{position:static}
.fs-14{font-size:14px}
.fs-15{font-size:15px}
.pb-icon.xs{width:16px;height:16px}

/* Legal document reading layout (~65ch measure, semantic h2 hierarchy) */
.legal{max-width:65ch;padding:80px 0 100px}
.legal h1{font-size:clamp(40px,4.6vw,64px);letter-spacing:-.045em;margin-bottom:40px}
.legal h2{font-size:20px;letter-spacing:-.02em;margin:44px 0 12px;font-weight:650;color:var(--text)}
.legal p,.legal li{font-size:17px;line-height:1.68;color:var(--muted);margin:0 0 14px}
.legal ul,.legal ol{padding-left:24px;margin:0 0 14px}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal .legal-meta{font-size:13px;color:var(--muted);margin-top:56px;padding-top:20px;border-top:1px solid var(--line)}

/* Security center: minimal header shared by trust center pages */
.sc-header{padding:22px 0;border-bottom:1px solid var(--line)}
.sc-header-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.sc-label{font-size:11px;font-weight:720;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-left:24px;border-left:1px solid var(--line)}
.sc-back{font-size:12px;color:var(--muted);margin-left:auto;text-decoration:underline;text-underline-offset:3px}
.sc-back:hover{color:var(--text)}
.sc-section{padding:72px 0;border-bottom:1px solid var(--line)}
.sc-hero{padding:56px 0 48px;border-bottom:1px solid var(--line)}
.sc-hero h1{font-size:clamp(36px,4.2vw,62px);letter-spacing:-.045em;margin:18px 0 20px}
.sc-hero p{font-size:17px;line-height:1.65;color:var(--muted);max-width:640px}
.sc-section h2{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;margin:0 0 16px}
.sc-section p{font-size:16px;line-height:1.65;color:var(--muted);max-width:680px;margin-bottom:14px}
.sc-tier{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:720;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.sc-tier::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.sc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:28px}
.sc-card{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:26px 24px}
.sc-card h3{font-size:17px;letter-spacing:-.02em;margin:12px 0 8px}
.sc-card p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}
.sc-card .sc-tier{margin-bottom:0}
.sc-footer{padding:28px 0}
.sc-footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--muted)}
.sc-footer-links{display:flex;gap:20px}
.sc-doc-wrap{max-width:760px;margin:40px 0}
.sc-doc-block{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:32px 36px;margin-bottom:24px}
.sc-doc-block h3{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;font-weight:720}
.sc-doc-block p{font-size:15px;line-height:1.62;color:var(--muted);margin:0}

/* About: thesis + principle cards */
.thesis-grid{display:grid;grid-template-columns:1fr .9fr .95fr;gap:54px;align-items:start}
.thesis-list{display:grid;gap:22px;border-left:1px solid var(--line);padding-left:34px}
.thesis-item{display:grid;grid-template-columns:34px 1fr;gap:14px}
.thesis-item .pb-icon{width:24px;height:24px;color:var(--accent);margin-top:2px}
.thesis-item h3{font-size:16px;margin:0 0 4px}
.thesis-item p{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
.principle-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:32px}
.principle-card{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:24px 20px;min-height:180px}
.principle-card .pb-icon{width:26px;height:26px;color:var(--accent)}
.principle-card h3{font-size:16px;margin:16px 0 8px}
.principle-card p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.journey{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border-top:1px solid var(--line)}
.journey .milestone{padding-top:26px}

@media(max-width:1100px){
  .cap-cards{grid-template-columns:repeat(3,1fr)}
  .check-row,.value-cards{grid-template-columns:1fr 1fr}
  .platform-visual{grid-template-columns:1fr}
  .layer-list{grid-template-columns:1fr 1fr;gap:18px}
  .platform-visual .layer::after{display:none}
  .pilot-grid{grid-template-columns:1fr}
  .thesis-grid{grid-template-columns:1fr}
  .thesis-list{border-left:0;padding-left:0}
  .principle-cards{grid-template-columns:repeat(3,1fr)}
  .doc-cats{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .cap-cards,.check-row,.value-cards,.principle-cards,.doc-cats,.measured-row{grid-template-columns:1fr}
  .check-item{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .layer-list{grid-template-columns:1fr}
  .pilot-shell{grid-template-columns:1fr}
  .process-row{grid-template-columns:1fr}
  .process-arrow{display:none}
  .measured-row>div{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
}

/* ============================================================
   Mobile architecture
   The desktop composition holds; below it, one pearlblack
   navigation surface and a type scale that breathes at hand size.
   ============================================================ */

/* Menu control: the site's own label language, a quiet bordered word.
   Hidden at desktop widths; the desktop nav is the only navigation there. */
.menu-toggle{
  display:none;align-items:center;gap:10px;
  min-height:42px;padding:9px 16px;cursor:pointer;
  border:1px solid var(--line);border-radius:3px;background:transparent;
  color:var(--text);font-size:11px;font-weight:720;
  letter-spacing:.14em;text-transform:uppercase;
}
.menu-toggle::after{
  content:"";width:14px;height:1px;background:var(--accent);
  box-shadow:0 -5px 0 var(--accent);
}
.menu-toggle[aria-expanded="true"]::after{box-shadow:none}
.mobile-nav{
  position:fixed;left:0;right:0;top:92px;z-index:99;
  background:var(--bg);border-bottom:1px solid var(--line);
  max-height:calc(100dvh - 92px);overflow:auto;overscroll-behavior:contain;
  box-shadow:var(--shadow);
}
.mobile-nav-backdrop{
  position:fixed;inset:0;z-index:98;
  background:color-mix(in srgb,var(--text) 24%,transparent);
}
.mobile-nav .mobile-nav-inner{padding:8px 0 26px}
.mobile-nav a.mnav-link{
  display:flex;align-items:center;gap:14px;
  padding:17px 2px;font-size:19px;letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
}
.mobile-nav a.mnav-link[aria-current="page"]{color:var(--accent)}
.mobile-nav a.mnav-link[aria-current="page"]::before{
  content:"";width:22px;height:1px;background:var(--accent);
}
.mobile-nav a.mnav-portal{color:var(--accent);font-weight:650}
.mobile-nav a.mnav-portal::after{content:"→";margin-left:auto;font-size:15px}
.mobile-nav .mnav-secondary{
  display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:22px;
  font-size:12px;color:var(--muted);
}
.mobile-nav .mnav-secondary a{padding:10px 0;min-height:40px;display:inline-flex;align-items:center}
.mobile-nav .mnav-secondary a:first-child{color:var(--text);font-weight:650}

/* The v3 hero column rules sit late in the cascade, so the small-screen
   collapse must be re-asserted after them: one column, copy above pearl. */
@media(max-width:1100px){
  .hero-grid,.home-hero .hero-grid{grid-template-columns:1fr}
}

/* The five desktop nav links outgrow the header lane below ~960px;
   the mobile navigation takes over there in one clean swap. */
@media(max-width:960px){
  .nav{display:none}
  .menu-toggle{display:inline-flex}
  .header-inner{grid-template-columns:160px 1fr auto auto;gap:16px}
}
@media(max-width:760px){
  .header-inner{grid-template-columns:110px 1fr auto auto}
  .mobile-nav{top:78px;max-height:calc(100dvh - 78px)}
}

/* Hand-size type: the fixed 52-54px mobile headline overflows a 320-430px
   viewport; below 560px the scale rides the viewport instead. */
@media(max-width:560px){
  h1,.hero-copy h1,.hero-grid h1{font-size:clamp(34px,11vw,50px)}
  h2{font-size:clamp(27px,8.6vw,38px)}
  .fs-48{font-size:32px}.fs-44{font-size:30px}.fs-40{font-size:28px}
  .final-claim{font-size:clamp(32px,10.5vw,46px)}
  .message-line{font-size:clamp(24px,7.6vw,32px)}
  .quote{font-size:21px;padding-left:22px}
  .lede,.hero-copy .lede{font-size:16px}
  .section{padding:60px 0}
  .home-section{padding:68px 0}
  .economic-band{padding:64px 0}
  .legal{padding:56px 0 76px}
  .static-visual{min-height:56vw}
  .pilot-copy .static-visual{min-height:52vw}
  .form-side,.form-main{padding:24px 18px}
  .live-card{min-height:280px}
  .live-card h3{margin-top:46px}
  .flow-intro,.flow-item{padding:28px 0;border-right:0}
  .footer-links{justify-content:flex-start}
  .footer-sovereign{text-align:left}
  .footer-grid{align-items:start}
  .btn{min-width:0;flex:1 1 auto;justify-content:space-between}
  .actions{gap:10px}
  .static-visual .visual-callout{right:3%;bottom:4%}
  .static-visual .visual-callout .name{font-size:15px}
  .static-visual .visual-callout .sub{font-size:8.5px}
  .static-visual .visual-callout .rule{width:44px}
  .static-visual .visual-callout .rule::before{width:34px}
  .sc-doc-block{padding:24px 20px}
  .sc-hero{padding:44px 0 38px}
  .sc-label{padding-left:16px}
}
@media(max-width:560px){
  .nav-portal{display:none}
}
@media(max-width:390px){
  .brand{font-size:23px}
  .menu-toggle{padding:9px 12px}
  .theme{gap:5px}
  .theme svg{display:none}
  h1,.hero-copy h1,.hero-grid h1{font-size:clamp(31px,10.8vw,38px)}
}

/* ============================================================
   Mobile composition (Curator ruling): only at the stacked
   breakpoint the message leads and the visual becomes a smaller,
   centered supporting object. Desktop and tablet keep the
   established large composition untouched.
   ============================================================ */
@media(max-width:800px){
  .hero-grid .static-visual,.home-hero .static-visual,
  .platform-visual .static-visual{
    min-height:0;aspect-ratio:1/1;width:100%;
    max-width:min(430px,74%);margin-inline:auto;
  }
  .pilot-copy .static-visual{
    min-height:0;aspect-ratio:1/1;
    max-width:min(380px,100%);margin-inline:auto;
  }
}
@media(max-width:560px){
  .hero-grid .static-visual,.home-hero .static-visual,
  .platform-visual .static-visual,.pilot-copy .static-visual{
    max-width:min(320px,80%);
  }
}
/* Four principles need a real measure per column; below 1000px they
   read as a two-by-two field. */
@media(max-width:1000px){
  .principle-grid{grid-template-columns:1fr 1fr}
  .principle-live:nth-child(2){border-right:0}
  .principle-live:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .principle-live:nth-child(3){padding-left:0}
}

/* Phone landscape (Curator ruling): when the viewport is wide but short,
   the composition stays side by side - copy primary (~two thirds),
   visual supporting right - instead of stacking merely because the
   device is a phone. Orientation and geometry decide, never the device
   name. Portrait keeps the approved stacked treatment. */
@media (max-width:1100px) and (orientation:landscape) and (max-height:500px){
  .hero-grid,.home-hero .hero-grid{
    grid-template-columns:minmax(0,1fr) clamp(170px,30%,300px);
    gap:clamp(18px,3vw,40px);align-items:center;
  }
  .hero-grid .static-visual,.home-hero .static-visual,
  .platform-visual .static-visual{
    min-height:0;aspect-ratio:1/1;width:100%;
    max-width:none;margin-inline:0;
  }
  .platform-visual{grid-template-columns:1fr}
  .pilot-copy .static-visual{max-width:min(280px,100%);margin-inline:0}
  .hero .hero-grid{padding:26px 0 30px}
  .home-hero{padding:22px 0 20px}
}

/* Security hero parity: the shield's subject occupies ~42% of its
   canvas against ~45-56% for its peer renders, so it reads smaller in
   the identical hero box. A 10% optical enlargement restores visual
   parity; the container clips overflow, the edge mask scales with the
   element, both themes move together. */
.static-visual .theme-image[data-visual-role="security-shield"],
.static-visual .theme-image[data-visual-role="security-shield-dark"]{
  inset:-5%;width:110%;height:110%;
}