/* ⛔⛔ DO NOT INLINE THIS STYLESHEET, AND DO NOT SPLIT OUT "CRITICAL CSS".
   It has been tried and it TOOK THE SITE DOWN — founder, 2026-08-21: "last time you did inline to
   that css we lost site working". The remaining FCP/LCP of 2.7s is throttled-4G latency on the CSS
   request, not page weight, so the only lever left is restructuring how this file loads — which is
   precisely the change that broke it. Mobile sits at 92 with CLS 0.000; that is good enough, and a
   few points are not worth the outage.

   ⭐ WHAT DID WORK, for anyone tempted to try again: font-display. `swap` GUARANTEES a reflow (text
   paints in the fallback, then swaps and shoves everything down); `optional` never swaps, and took
   CLS from 0.274 to ZERO and the score from 78 to 92. Preconnecting the font CSS beforehand changed
   NOTHING measurable — correct in principle, no gain. Measure before believing either. */
/* Other Me — original "governed-tech" identity (v2, de-SeedLegals'd) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=optional');

:root{
  --ink:#0b1220; --ink-2:#1b2a44; --slate:#475569; --muted:#5d6b82;
  --emerald:#10b981; --emerald-d:#0c9b6c; --emerald-soft:#e7f8f0; --emerald-line:#bfe8d4;
  --signal:#12d39a;                 /* brighter accent for highlights */
  --warm:#ff7a59;                   /* sparing warm accent */
  --bg:#ffffff; --tint:#f4f7f8; --tint-ink:#0c1424; --line:#e6ebef; --paper:#fbfcfd;
  --radius:14px; --shadow:0 12px 34px rgba(11,18,32,.07);
  --mono:'Space Grotesk','DejaVu Sans Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.center{text-align:center;}
.muted{color:var(--muted);}
.eyebrow{color:var(--emerald-d);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;}

/* type — Space Grotesk display */
h1,h2,h3{font-family:'Space Grotesk',sans-serif;}
h1{font-size:clamp(38px,6vw,62px);font-weight:700;letter-spacing:-1.4px;line-height:1.02;}
h2{font-size:clamp(28px,3.6vw,41px);font-weight:700;letter-spacing:-.6px;line-height:1.08;}
h3{font-size:19px;font-weight:600;letter-spacing:-.2px;}
.lead{font-size:clamp(17px,2vw,21px);color:var(--muted);line-height:1.5;}

/* SIGNATURE emphasis — emerald underline, not a highlighter */
.hl{color:inherit;background-image:linear-gradient(rgba(18,211,154,.45),rgba(18,211,154,.45));background-size:100% .30em;background-position:0 92%;background-repeat:no-repeat;padding:0 .04em .02em;}

/* SIGNATURE motif — redaction / tokenise chip */
.token{font-family:var(--mono);display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#cfe9df;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;}
.token .rd{background:#33415c;color:#33415c;border-radius:3px;padding:0 2px;user-select:none;}
.token .arr{color:var(--signal);}
.token .real{color:#fff;}
.token .lock{color:var(--signal);}

/* buttons — emerald, confident (not pills) */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:11px;font-weight:600;font-size:16px;padding:13px 24px;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;border:1.6px solid transparent;font-family:'Inter',sans-serif;}
.btn-p{background:var(--emerald);color:#04150f;box-shadow:0 10px 24px rgba(16,185,129,.28);}
.btn-p:hover{background:var(--emerald-d);color:#fff;transform:translateY(-2px);}
.btn-g{background:#fff;border-color:#d4dbe2;color:var(--ink);}
.btn-g:hover{border-color:var(--ink);transform:translateY(-2px);}
.btn-w{background:#fff;color:var(--ink);}
.btn-lg{padding:16px 30px;font-size:17px;}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--tint);color:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;font-family:var(--mono);}
.chip-green{background:var(--emerald-soft);color:var(--emerald-d);border-color:var(--emerald-line);}
/* ── Custom Solutions hero ─────────────────────────────────────────────────────
   Message on the left, evidence on the right. The message column is the wider of the two so
   the headline still leads; the panel is fixed-ish so six rows never stretch into a table. */
.hero-split{display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:center;text-align:left;}
.hero-split h1{margin-left:0;margin-right:0;}
.hero-split .lead{margin-left:0;margin-right:0;max-width:560px;}
/* The patent line sits between the chip and the headline, so it has to be readable without
   competing with either. Small, emerald, with the application number stepped back a shade so the
   claim reads first and the evidence second. */
.patent-line{margin:12px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-2);}
/* ⛔ #047857, NOT --emerald-d. The token measures 3.55:1 on white at this size, which fails
   AA for anything under 18.66px bold. Second time the same pair has caught me on this page:
   it is fine on a chip, which is a label, and not on a sentence. */
.patent-line b{color:#047857;font-weight:700;}


.demo-panel{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
.demo-panel-head{margin:0;font-weight:700;font-size:15px;color:var(--ink);}
.demo-panel-sub{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.5;}


@media (max-width:900px){
  /* ⭐ The panel goes UNDER the message, not beside it. Below this width the two columns are
     narrow enough that the headline wraps every three words. */
  .hero-split{grid-template-columns:1fr;gap:28px;}
}
.faces{display:none;}            /* removed SeedLegals avatar-faces tell */
.doodle{display:none;}           /* removed SeedLegals playful doodles */

/* header */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;height:74px;gap:18px;}
.logo{display:flex;align-items:center;font-family:'Space Grotesk';font-weight:700;font-size:20px;gap:10px;letter-spacing:-.3px;}
.logo .m{width:28px;height:28px;border-radius:8px;background:var(--ink);position:relative;}
.logo .m:after{content:"";position:absolute;inset:7px;border-radius:3px;background:var(--signal);}
.links{display:flex;align-items:center;gap:24px;margin-left:10px;flex:1;font-weight:500;font-size:15px;color:var(--ink-2);}
.links a:hover{color:var(--emerald-d);}
.links a.sec{color:var(--emerald-d);font-weight:600;}
.act{display:flex;align-items:center;gap:14px;}
.toggle-pill{display:inline-flex;background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:3px;font-size:13px;font-weight:600;}
.toggle-pill a{padding:6px 13px;border-radius:8px;color:var(--ink-2);transition:.15s;}
.toggle-pill a.on{background:var(--ink);color:#fff;}
.signin{font-weight:600;font-size:15px;}
.hamb{display:none;background:none;border:0;font-size:28px;cursor:pointer;color:var(--ink);line-height:1;}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:12px 24px 22px;border-bottom:1px solid var(--line);background:#fff;}
.mobile-menu a{padding:12px 6px;font-weight:600;border-bottom:1px solid var(--line);}
.mobile-menu .btn{margin-top:12px;justify-content:center;}

/* breadcrumb trail — every non-home v2 page. Rendered by {% v2_breadcrumbs %}
   from the SAME map that generates the BreadcrumbList JSON-LD, so the markup
   always describes something the visitor can actually see (Google's structured
   data guidelines forbid marking up content that isn't visible). Deliberately
   low-contrast and thin: it is a wayfinding aid under a sticky header, not a
   design element competing with the hero below it. */
.crumbs{border-bottom:1px solid var(--line);background:var(--paper);}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:7px;list-style:none;padding:11px 0;
           font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--muted);}
.crumbs li{display:flex;align-items:center;gap:7px;}
.crumbs li+li::before{content:"/";color:#b6c1cd;font-weight:400;}
.crumbs a{color:var(--muted);transition:color .15s;}
.crumbs a:hover{color:var(--ink);}
.crumbs [aria-current]{color:var(--ink-2);font-weight:600;}

/* sections + layout */
section{padding:74px 0;}
.sec-head{max-width:680px;margin:0 auto 40px;text-align:center;}
.grid{display:grid;gap:20px;}
.g-2{grid-template-columns:1fr 1fr;}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-5{grid-template-columns:repeat(5,1fr);}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s;padding:24px;position:relative;}
.card.hov:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(11,18,32,.12);border-color:var(--emerald-line);}
.ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;font-family:'Space Grotesk';}

/* hero */
.hero{position:relative;overflow:hidden;padding:96px 0 80px;}
.hero .wrap{position:relative;z-index:2;}
.trust-row{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;color:var(--slate);font-size:13.5px;font-weight:600;font-family:var(--mono);}

/* steps / structured info */
.steps{position:relative;}
.step{position:relative;padding-left:62px;padding-bottom:26px;}
.step:before{content:"";position:absolute;left:21px;top:46px;bottom:-6px;width:2px;background:var(--line);}
.step:last-child:before{display:none;}
.step .n{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:12px;color:#fff;font-weight:700;font-size:17px;font-family:'Space Grotesk';display:flex;align-items:center;justify-content:center;}
/* product panel — dark "vault", not purple */
.panel{background:linear-gradient(155deg,#0b1220,#16324a);border-radius:20px;padding:34px;position:relative;min-height:330px;}
.panel .ui{background:#fff;border-radius:14px;box-shadow:0 24px 56px rgba(4,12,8,.40);padding:18px;}
.badge-float{position:absolute;right:22px;bottom:26px;background:var(--emerald);color:#04150f;border-radius:11px;padding:11px 16px;font-weight:700;font-size:13.5px;box-shadow:0 12px 26px rgba(16,185,129,.45);}
.statbox{background:var(--tint);border-radius:11px;padding:13px;}
.statbox .k{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.5px;font-family:var(--mono);}
.statbox .v{font-size:22px;font-weight:700;font-family:'Space Grotesk';}
.statbox.green{background:var(--emerald-soft);} .statbox.green .k,.statbox.green .v{color:var(--emerald-d);}

/* dark band */
.dark{background:radial-gradient(1100px 520px at 75% -10%,#16324a,#0b1220);color:#b9c6d8;}
.dark h1,.dark h2,.dark h3{color:#fff;}
/* ⛔⛔ A WHITE CARD INSIDE A DARK SECTION IS STILL A WHITE CARD. `.dark h3{color:#fff}`
   is right for headings sitting ON the dark ground and wrong for every heading inside a
   `.card`, which sets its own white background — so on /custom-solutions/ all six demo
   card titles have been white on white, live, since that section shipped: 'Aesthetics
   clinic', 'Accountancy and law' and four more, invisible on the page whose whole job is
   sending people into those demos. Found by photographing the section and looking at it,
   which is also the only way it could have been found. */
.dark .card h1,.dark .card h2,.dark .card h3{color:var(--ink);}
.inv{background:#11203a;border:1px solid #1f3a5e;border-radius:14px;padding:22px;}
.inv .n{width:36px;height:36px;border-radius:10px;background:rgba(18,211,154,.16);color:var(--signal);font-weight:700;font-family:'Space Grotesk';display:flex;align-items:center;justify-content:center;}
.inv h3{color:#fff;margin:12px 0 5px;}
.inv p{color:#93a4bd;font-size:14px;}

/* pricing */
.plan{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:28px 24px;position:relative;}
.plan.feat{border:2px solid var(--emerald);box-shadow:0 22px 46px rgba(16,185,129,.16);}
.ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:8px;font-family:var(--mono);}
.price{font-size:46px;font-weight:700;letter-spacing:-1px;font-family:'Space Grotesk';}
.plan ul{list-style:none;margin:14px 0;}
.plan li{padding:7px 0;color:var(--ink-2);font-size:15px;display:flex;gap:9px;}
.plan li:before{content:"✓";color:var(--emerald);font-weight:800;}
.alacarte{background:#fff;border:1.5px dashed #cdd6dd;border-radius:14px;padding:16px 20px;text-align:center;color:var(--ink-2);font-size:15px;}

/* testimonials / quotes */
.quote{background:var(--ink);color:#fff;border-radius:18px;padding:26px;position:relative;overflow:hidden;}
.quote:before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--emerald);}
.quote .av{width:46px;height:46px;border-radius:12px;}

/* footer */
footer.site{background:#0b1220;color:#8fa0b8;padding:50px 0 26px;}
footer.site h4{color:#fff;font-size:13px;margin-bottom:8px;font-family:'Space Grotesk';letter-spacing:.3px;}
footer.site .cols{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;padding:26px 0;}
footer.site .cols a{display:block;padding:5px 0;font-size:14px;}
footer.site .cols a:hover{color:#fff;}
footer.site .base{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid #1b2a44;padding-top:18px;font-size:12.5px;color:#6f8198;}
.switch{background:#14233c;border-radius:8px;padding:5px 14px;font-family:var(--mono);}
/* Social mark in the footer base bar. line-height:0 stops the inline SVG's baseline gap from
   pushing the pill beside it out of alignment; the visible focus ring is not optional — the
   link's only content is an icon, so a keyboard user has nothing else to see it by. */
footer.site .social{display:inline-flex;align-items:center;line-height:0;color:#8fa0b8;
  border-radius:6px;padding:4px;transition:color .15s,background .15s;}
footer.site .social:hover{color:#fff;background:#14233c;}
footer.site .social:focus-visible{outline:2px solid #10b981;outline-offset:2px;color:#fff;}

/* utils */
.mt8{margin-top:8px;}.mt16{margin-top:16px;}.mt24{margin-top:24px;}.mt40{margin-top:40px;}
.tint-band{background:var(--tint);}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s;}
.reveal.in{opacity:1;transform:none;}

/* responsive */
@media(max-width:920px){
  .links,.toggle-pill,.signin,.act .om-login,.login-dd{display:none;}
  .hamb{display:block;}
  /* .links carries flex:1 to push the actions to the right on desktop. Once it's hidden here that
     spacer is gone, so the logo/CTA/hamburger would collapse to the left with a big empty gap on the
     right. Restore right-alignment: margin-left:auto sends the action cluster (and the hamburger
     after it) to the far right. Desktop (>920px) is untouched. */
  .act{margin-left:auto;}
  .g-2,.g-3,.g-5{grid-template-columns:1fr;}
  .g-5{grid-template-columns:1fr 1fr;}
  footer.site .cols{grid-template-columns:1fr 1fr;}
  section{padding:54px 0;}
  .hero{padding:60px 0 50px;}
  .hero-2col{grid-template-columns:1fr !important;}
}
@media(max-width:560px){
  .g-5{grid-template-columns:1fr;}
  .btn{width:100%;justify-content:center;}
  .act .btn{width:auto;}
  footer.site .cols{grid-template-columns:1fr;}
}

/* ============ public-site v3 additions — warm governed-tech ============ */
.g-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:920px){.g-4{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.g-4{grid-template-columns:1fr;}}
.warm{color:var(--warm);}
.hl-w{background-image:linear-gradient(rgba(255,122,89,.40),rgba(255,122,89,.40));background-size:100% .30em;background-position:0 92%;background-repeat:no-repeat;padding:0 .04em .02em;}
.active-link{color:var(--emerald-d)!important;font-weight:700;}
.ic.warm-bg{background:var(--warm)!important;}

/* product mega-menu — .hasmenu spans the FULL 74px header height so the hover
   area is contiguous with the menu (no dead gap that would drop the hover). */
.hasmenu{position:relative;display:inline-flex;align-items:center;height:74px;}
.hasmenu>a{display:inline-flex;align-items:center;gap:5px;height:100%;}
.megamenu{display:none;position:absolute;top:68px;left:-18px;width:580px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px;grid-template-columns:1fr 1fr;gap:2px;z-index:80;}
/* invisible bridge fills the small gap between the header bottom and the menu */
.megamenu:before{content:"";position:absolute;top:-22px;left:0;right:0;height:22px;}
.hasmenu:hover .megamenu,.hasmenu:focus-within .megamenu,.hasmenu.open .megamenu{display:grid;}
.megamenu a{display:flex;gap:11px;align-items:flex-start;padding:10px 11px;border-radius:11px;line-height:1.3;}
.megamenu a:hover{background:var(--tint);}
.mi-ic{width:30px;height:30px;border-radius:8px;background:var(--emerald-soft);border:1px solid var(--emerald-line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.mi-ic svg{width:17px;height:17px;stroke:var(--emerald-d);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.megamenu .mi{font-weight:600;color:var(--ink);font-size:14px;}
.megamenu .md{font-size:12px;color:var(--muted);}
/* "By industry:" row spanning the full width at the foot of the Solutions mega-menu */
.mm-industry{grid-column:1/-1;margin-top:6px;padding:10px 11px 2px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;}
.mm-industry>span{font-weight:700;color:var(--ink);}
.mm-industry a{display:inline;padding:0;gap:0;color:var(--emerald-d);font-weight:600;}
.mm-industry a:hover{background:none;text-decoration:underline;}

/* two-product nav: SCRS is the flagship — emphasise it within the same emerald theme */
.scrs-nav{color:var(--emerald-d)!important;font-weight:700;}
.nav-badge{display:inline-block;background:var(--emerald-soft);color:var(--emerald-d);border:1px solid var(--emerald-line);border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:1px 6px;font-family:var(--mono);}
.megamenu.scrs-menu{grid-template-columns:1fr;width:340px;}
.mobile-menu .mm-h{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--emerald-d);padding:14px 6px 4px;border-bottom:0;}

/* header "Log in" dropdown (act area, right-aligned): SCRS · Other Me Business · Other Me Family */
.login-dd{position:relative;display:inline-flex;align-items:center;}
.login-menu{display:none;position:absolute;top:calc(100% + 10px);right:0;width:262px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;z-index:90;}
/* invisible bridge so moving from the button down into the menu doesn't drop the hover */
.login-menu:before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;}
.login-dd:hover .login-menu,.login-dd:focus-within .login-menu,.login-dd.open .login-menu{display:block;}
.login-menu a{display:flex;gap:11px;align-items:flex-start;padding:10px 11px;border-radius:10px;line-height:1.3;}
.login-menu a:hover{background:var(--tint);}
.login-menu .mi{font-weight:600;color:var(--ink);font-size:14px;}
.login-menu .md{font-size:12px;color:var(--muted);}
/* dynamic signed-in states: green "you're signed in" dot on the trigger, filled+checked icon
   and a "Signed in" badge on whichever product the current session belongs to */
.acct-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--signal);margin-right:7px;vertical-align:middle;box-shadow:0 0 0 3px rgba(18,211,154,.18);}
.login-menu .mi-ic.on{background:var(--emerald);border-color:var(--emerald-d);position:relative;}
.login-menu .mi-ic.on:after{content:"";position:absolute;left:10.5px;top:7px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg);}
.on-badge{display:inline-block;background:var(--emerald);color:#fff;border-radius:6px;font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:1px 6px;font-family:var(--mono);vertical-align:middle;margin-left:4px;}
/* "Sign out" row at the foot of the account dropdown */
.login-sep{height:1px;background:var(--line);margin:6px 4px;}
.login-out{margin:0;}
.login-out button{width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;color:var(--muted);font-weight:600;font-size:13.5px;padding:9px 11px;border-radius:10px;}
.login-out button:hover{background:var(--tint);color:var(--ink);}

/* feature-page hero + alternating rows */
.fhero{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}
@media(max-width:920px){.fhero{grid-template-columns:1fr;gap:30px;}}
.om-card{display:grid;grid-template-columns:1.3fr 1fr;}
@media(max-width:760px){.om-card{grid-template-columns:1fr;}}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:26px 0;}
.frow .vis{order:2;}
.frow.rev .vis{order:0;}
@media(max-width:920px){.frow{grid-template-columns:1fr;gap:20px;}.frow .vis,.frow.rev .vis{order:0;}}
.tick{list-style:none;}
.tick li{padding:8px 0 8px 30px;position:relative;color:var(--ink-2);font-size:15.5px;}
.tick li:before{content:"\2713";position:absolute;left:0;color:var(--emerald);font-weight:800;}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:14.5px;vertical-align:top;}
.cmp thead th{font-family:'Space Grotesk';background:var(--tint);font-size:14px;}
.cmp thead th.usc{background:var(--ink);color:#fff;}
.cmp td.us{background:var(--emerald-soft);font-weight:600;color:#0a5c44;}
.cmp td.no{color:#c2410c;}
.cmp tr td:first-child{font-weight:600;color:var(--ink);}
.cmp .y{color:var(--emerald-d);font-weight:800;}
.cmp tr:last-child td{border-bottom:none;}

/* mini app visuals */
.appwin{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;}
.appbar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #eef1f6;}
.dot3{display:flex;gap:5px;}.dot3 i{width:9px;height:9px;border-radius:50%;background:#e0e6ec;display:block;}
.row-ln{height:9px;background:#eef1f6;border-radius:6px;margin:8px 0;}
.tagm{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;background:var(--ink);color:#cfe9df;border-radius:6px;padding:3px 8px;}

/* one-place hub (control center) */
.hub{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:560px){.hub{grid-template-columns:1fr 1fr;}}
.hub .node{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 10px;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow);}
.hub .node .nic{width:26px;height:26px;border-radius:7px;background:var(--emerald-soft);border:1px solid var(--emerald-line);margin:0 auto 7px;}
.hub .node.lock{opacity:.55;}
.hub .node.lock .nic{background:#eef1f6;border-color:var(--line);}

/* misc */
.kpi{font-family:'Space Grotesk';font-weight:700;font-size:32px;letter-spacing:-1px;color:var(--ink);}
.kpi.em{color:var(--emerald-d);}
.note{font-size:13px;color:var(--muted);}
.tag-soft{display:inline-block;background:var(--emerald-soft);color:var(--emerald-d);border:1px solid var(--emerald-line);border-radius:7px;padding:3px 9px;font-size:12px;font-weight:700;font-family:var(--mono);}

/* legal / prose pages */
.prose{max-width:780px;margin:0 auto;}
.prose h2{font-size:22px;margin:28px 0 8px;color:var(--ink);}
.prose h3{font-size:16px;margin:18px 0 6px;color:var(--ink-2);}
.prose p,.prose li{color:var(--ink-2);font-size:15px;line-height:1.66;}
.prose ul{margin:8px 0 10px 20px;}
.prose .upd{color:var(--muted);font-size:13px;}
.prose .callout{background:var(--tint);border:1px solid var(--line);border-left:3px solid var(--emerald);border-radius:10px;padding:14px 16px;font-size:14px;color:var(--ink-2);margin:18px 0;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;}}
.field{display:block;margin:10px 0;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:5px;}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:15px;background:#fff;}
/* ⛔⛔ 16px OR iOS SAFARI ZOOMS THE PAGE. Any form control under 16px makes Safari scale the
   whole page in when it takes focus, and the visitor has to pinch back out to carry on. The site
   sits at 15px everywhere for looks; on a phone that trade is the wrong way round, and this form
   is where paid traffic lands. 16px only where it matters — the desktop look is untouched. */
@media (max-width:480px){.field input,.field textarea,.field select{font-size:16px;}}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--emerald);}

/* mobile polish (ads-critical) */
@media(max-width:560px){
  .cmp th,.cmp td{padding:9px 9px;font-size:12px;}
  .token{flex-wrap:wrap;justify-content:center;font-size:11.5px;line-height:1.5;}
  .fhero{gap:22px;}
  .frow{padding:16px 0;}
  .panel{padding:22px;min-height:0;}
  .badge-float{position:static;display:inline-block;margin-top:14px;box-shadow:none;}
  section{padding:46px 0;}
}