/* UrbanBytez — Direction A "Midnight Engineering", Platinum Silver shade (owner-approved 2026-10-06).
   Fonts are self-hosted Latin subsets under the SIL OFL 1.1 (see /fonts-OFL.txt). */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300 700;font-display:swap;src:url(/inter-tight-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/instrument-serif-italic-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/jetbrains-mono-latin.woff2) format("woff2")}
:root{
  --canvas:#C2C5CD;
  --canvas-2:#C7CAD1;
  --panel:#CCCED5;
  --panel-2:#D2D5DA;
  --line:rgba(106,118,160,0.11);
  --line-2:rgba(106,118,160,0.18);
  --text:#121317;
  --text-2:#4B515F;
  --text-3:#5E6472;
  --teal:#505A7C;
  --teal-logo:#505A7C;
  --teal-ink:#505A7C;
  --navy:#D9DBE0;
  --glow:rgba(106,118,160,0.16);
  --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --max:1280px;
  --gut:40px;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"ss01","cv11"}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.page{position:relative}

.wrap{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.it.lux{background:linear-gradient(100deg,#505A7C 10%,#505A7C 55%,var(--teal) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.mono b{color:var(--teal);font-weight:500}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(106,118,160,0.14),0 0 14px var(--teal);vertical-align:middle}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 24px;border-radius:999px;font-weight:550;font-size:16px;letter-spacing:-.005em;white-space:nowrap;transition:.2s}
.btn .ar{font-family:var(--mono);font-size:14px}
.btn-primary{background:var(--teal);color:var(--teal-ink);box-shadow:0 0 0 1px rgba(18,22,32,0.096) inset,0 10px 40px -10px rgba(80,90,124,0.55)}
.btn-ghost{border:1px solid var(--line-2);color:var(--text);background:rgba(18,22,32,0.016)}
.link{display:inline-flex;gap:10px;align-items:center;font-weight:550;color:var(--text);border-bottom:1px solid rgba(106,118,160,0.45);padding-bottom:3px}
.link .ar{color:var(--teal);font-family:var(--mono);font-size:13px}

/* Nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:50;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(194,197,205,0.85),rgba(148,154,167,0.35));backdrop-filter:blur(18px)}
.nav .wrap{display:flex;align-items:center;height:76px;gap:40px}
.logo{display:flex;align-items:center}
.logo img{height:30px;width:auto}
.nav-cta{display:flex;align-items:center;gap:22px}
.nav-cta .tel{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--text-2)}
.nav .btn{height:40px;font-size:14.5px;padding:0 16px 0 18px}
.menu{display:none;background:transparent}

/* Hero */
.hero{position:relative;min-height:900px;padding-top:76px;overflow:hidden;isolation:isolate}
.hero-art{position:absolute;top:118px;right:-30px;width:61%;height:620px;z-index:-1}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(900px 520px at 72% 46%,rgba(106,118,160,0.28),transparent 70%),
  radial-gradient(700px 400px at 8% 10%,rgba(217,219,224,0.7),transparent 70%),var(--canvas)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--line-2) 80%,transparent)}
.hero-grid{position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(600px 400px at 18% 40%,#000,transparent 75%)}
.hero-copy{position:relative;padding-top:70px;max-width:720px}
.hero-label{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.hero-label .rule{width:42px;height:1px;background:var(--teal)}
.hero h1{font-size:120px;line-height:.92;letter-spacing:-.052em;font-weight:600}
.hero h1 .it{font-size:1.1em;letter-spacing:-.025em;display:inline-block;margin-top:.04em}
.hero .lede{margin-top:34px;font-size:23px;line-height:1.35;letter-spacing:-.015em;color:var(--text);font-weight:500;max-width:520px}
.hero .sub{margin-top:14px;color:var(--text-2);font-size:17.5px;max-width:500px}
.hero .ctas{display:flex;gap:14px;margin-top:38px;align-items:center}
.hero .free{margin-top:26px;display:flex;align-items:center;gap:12px}
.fig{position:absolute;right:56px;top:108px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.fig .mono{font-size:10.5px}
.figcap{position:absolute;right:56px;bottom:170px;font-size:10.5px}
.spec{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line)}
.spec .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.spec-cell{padding:26px 28px 30px 0;display:flex;gap:16px;align-items:flex-start}
.spec-cell + .spec-cell{padding-left:28px;border-left:1px solid var(--line)}
.spec-cell .n{font-family:var(--mono);font-size:11px;color:var(--teal);letter-spacing:.1em;padding-top:4px}
.spec-cell .h-spec{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.spec-cell p{font-size:14px;color:var(--text-2);line-height:1.45;margin-top:3px}

/* Section scaffolding */
section{position:relative}
.sec{padding:120px 0}
.sec-head{display:flex;align-items:center;gap:18px;margin-bottom:64px}
.sec-head .mono{white-space:nowrap}
.sec-head .line{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.sec-head .idx{color:var(--teal)}
h2{font-size:76px;line-height:.98;letter-spacing:-.045em;font-weight:600}
h2 .it{font-size:1.1em;letter-spacing:-.02em}
.h2-sm{font-size:60px}
.intro{font-size:20px;line-height:1.5;color:var(--text-2);max-width:560px;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:22px;display:block}
.crop{position:relative}
.crop::before,.crop::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--teal);opacity:.75;pointer-events:none}
.crop::before{top:-8px;left:-8px;border-top:1px solid;border-left:1px solid}
.crop::after{bottom:-8px;right:-8px;border-bottom:1px solid;border-right:1px solid}
.card{background:linear-gradient(180deg,rgba(18,22,32,0.028),rgba(18,22,32,0.01));border:1px solid var(--line);border-radius:var(--r);position:relative}
.card.lit::before{content:"";position:absolute;top:-1px;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.8}

/* Equation band */
.equation{padding:120px 0 110px;border-bottom:1px solid var(--line);background:radial-gradient(800px 300px at 50% 0%,rgba(106,118,160,0.06),transparent 70%)}
.eq-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:70px;gap:40px}
.eq-top h2{font-size:56px}
.eq{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.15fr;align-items:start;gap:0}
.eq-term h3{font-size:46px;letter-spacing:-.04em;font-weight:600;line-height:1}
.eq-term p{margin-top:18px;color:var(--text-2);font-size:15px;max-width:250px;line-height:1.5}
.eq-term .mono{display:block;margin-bottom:16px}
.eq-op{font-family:var(--mono);font-size:30px;color:var(--teal);padding:24px 26px 0;font-weight:300}
.eq-term.res h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:52px;letter-spacing:-.02em;color:var(--teal)}

/* Forge Voice */
.voice{background:radial-gradient(900px 600px at 85% 30%,rgba(217,219,224,0.85),transparent 70%)}
.voice{overflow-x:clip}
.voice-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:end}
.voice-copy .p{margin-top:0}
.voice h2{font-size:80px}
.voice .p{margin-top:28px;font-size:20px;color:var(--text);letter-spacing:-.012em;max-width:500px;font-weight:500;line-height:1.4}
.voice .p2{margin-top:14px;color:var(--text-2);max-width:480px}
.voice .row{display:flex;gap:28px;align-items:center;margin-top:36px;flex-wrap:wrap}
.voice .note .mono{white-space:nowrap}
.voice .note{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;max-width:520px;font-size:14.5px;color:var(--text-2)}
.device{padding:34px;border-radius:28px;background:linear-gradient(160deg,#D2D5DA,#C5C9D0 60%);border:1px solid var(--line-2);box-shadow:0 60px 120px -40px rgba(179,183,193,0.9),0 0 0 1px rgba(179,183,193,0.6),inset 0 1px 0 rgba(18,22,32,0.048)}
.device-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.screen{border-radius:16px;padding:24px 24px 22px;background:linear-gradient(180deg,#505A7C,#C4C7CF);border:1px solid rgba(106,118,160,0.25);box-shadow:inset 0 0 60px rgba(106,118,160,0.08)}
.screen .brand{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--teal)}
.screen h4{font-size:30px;font-weight:600;letter-spacing:-.03em;margin-top:14px}
.screen .meta{color:var(--text-2);font-size:14px;margin-top:2px}
.callcard{margin-top:20px;display:flex;align-items:center;gap:14px;background:rgba(18,22,32,0.04);border:1px solid rgba(18,22,32,0.064);border-radius:12px;padding:14px 16px}
.callcard .ring{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--teal-ink);box-shadow:0 0 0 6px rgba(106,118,160,0.15),0 0 0 12px rgba(106,118,160,0.06)}
.callcard strong{display:block;font-size:15px;font-weight:600}
.callcard span{font-size:13px;color:var(--text-2)}
.callcard .mono{margin-left:auto;font-size:10px;color:var(--teal)}
.dev-body{display:grid;grid-template-columns:1fr 1.05fr;gap:26px;margin-top:26px;align-items:end}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.keys span{height:38px;border-radius:9px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--text-2);background:linear-gradient(180deg,#D6D9DE,#CDD0D6);border:1px solid rgba(18,22,32,0.04);box-shadow:0 1px 0 rgba(179,183,193,0.6)}
.route{display:flex;flex-direction:column;gap:0}
.route .step{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line-2);font-size:14.5px}
.route .step:last-child{border-bottom:0}
.route .step .k{font-family:var(--mono);font-size:10.5px;color:var(--text-3);width:22px}
.route .step .v{font-weight:550}
.route .step.on .v{color:var(--teal)}
.route .step .pip{margin-left:auto;width:7px;height:7px;border-radius:50%;border:1px solid var(--teal)}
.route .step.on .pip{background:var(--teal);box-shadow:0 0 10px var(--teal)}
.device-cap{margin-top:18px;text-align:right;font-size:10.5px}
.industries{display:flex;gap:10px;margin-top:110px;align-items:center;flex-wrap:wrap}
.chip{height:38px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;color:var(--text-2)}
.chip.on,.chip[aria-pressed="true"]{background:rgba(106,118,160,0.1);border-color:rgba(106,118,160,0.5);color:var(--text)}
.industries .say{margin-left:auto;color:var(--text-2);font-size:15px;max-width:420px;text-align:right}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-top:1px solid var(--line)}
.steps3 > div{padding:32px 32px 0 0}
.steps3 > div + div{padding-left:32px;border-left:1px solid var(--line)}
.steps3 .mono{display:block;margin-bottom:16px}
.steps3 h3{font-size:24px;font-weight:600;letter-spacing:-.025em}
.steps3 p{color:var(--text-2);margin-top:8px;font-size:15.5px}

/* Trio */
.trio-head{display:grid;grid-template-columns:1.7fr 1fr;gap:80px;align-items:end;margin-bottom:70px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.trio .card{padding:36px 32px 34px;display:flex;flex-direction:column;min-height:400px}
.glyph{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(106,118,160,0.35);background:rgba(106,118,160,0.06);color:var(--teal)}
.trio h3{font-size:28px;letter-spacing:-.03em;font-weight:600;line-height:1.1;margin-top:auto;padding-top:60px;min-height:calc(2.2em + 60px)}
.trio p{color:var(--text-2);margin-top:14px;font-size:16px}
.trio .link{margin-top:28px;align-self:flex-start;font-size:15px}
.trio .card .mono.tr{position:absolute;top:36px;right:32px}

/* Solutions */
.solutions{background:linear-gradient(180deg,transparent,rgba(199,202,209,0.8) 30%,rgba(199,202,209,0.8) 70%,transparent)}
.sol-head{display:grid;grid-template-columns:1.7fr 1fr;gap:80px;align-items:end;margin-bottom:64px}
.sol{display:grid;grid-template-columns:360px 1fr;gap:28px}
.tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.tab{display:flex;align-items:baseline;gap:18px;padding:24px 4px;border-bottom:1px solid var(--line);font-size:27px;letter-spacing:-.03em;font-weight:550;color:var(--text-3);position:relative}
.tab .mono{font-size:11px}
.tab .ar{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--text-3)}
.sizes{margin-top:34px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;border:1px solid var(--line-2);border-radius:12px;padding:4px;gap:4px}
.seg span{height:38px;display:grid;place-items:center;border-radius:8px;font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.seg input:checked + span{background:var(--text);color:var(--canvas);font-weight:600}
.startpt{margin-top:18px;padding:20px 22px;border-radius:14px;border:1px solid var(--line)}
.startpt strong{display:block;font-size:20px;letter-spacing:-.02em;margin-top:8px}
.startpt p{font-size:14px;color:var(--text-2);margin-top:4px}
.panel{padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:44px}
.panel h3{font-size:40px;letter-spacing:-.04em;line-height:1.02;font-weight:600;margin-top:18px}
.panel > div > p{color:var(--text-2);margin-top:18px;font-size:16.5px}
.ticks{list-style:none;margin-top:28px;border-top:1px solid var(--line)}
.ticks li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.ticks li::before{content:"";flex:none;width:14px;height:1px;background:var(--teal);margin-top:12px}
.panel .link{margin-top:30px}
.demo{border-radius:16px;background:#C1C5CC;border:1px solid var(--line-2);padding:22px;display:flex;flex-direction:column}
.demo-bar{display:flex;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}
.demo-bar .mono{font-size:10px}
.flow{flex:1;display:flex;flex-direction:column;align-items:stretch;padding-top:22px;gap:0}
.node{border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;background:rgba(18,22,32,0.02)}
.node .mono{font-size:10px;display:block;margin-bottom:4px}
.node strong{font-weight:600;font-size:16px;letter-spacing:-.01em}
.node.hot{border-color:rgba(80,90,124,0.55);background:rgba(106,118,160,0.07);box-shadow:0 0 30px -8px rgba(106,118,160,0.35)}
.wire{height:28px;width:1px;margin:0 auto;background:linear-gradient(180deg,var(--teal),rgba(106,118,160,0.2))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;padding-top:28px}
.split::before{content:"";position:absolute;top:0;left:25%;right:25%;height:28px;border:1px solid rgba(106,118,160,0.5);border-bottom:0;border-radius:10px 10px 0 0}
.split .node{padding:12px 14px}
.split .node span{display:block;font-size:13px;color:var(--text-2)}
.demo .foot{margin-top:18px;font-size:12.5px;color:var(--text-3)}
.details{margin-top:56px;display:flex;align-items:center;gap:30px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap}
.details .mono{color:var(--teal);flex:none}
.details .list{display:flex;gap:20px;font-size:18px;letter-spacing:-.02em;color:var(--text-2)}
.details .list a{color:inherit;text-decoration:underline;text-decoration-color:rgba(80,90,124,.45);text-underline-offset:4px}
.details .list a:hover{text-decoration-color:var(--teal)}
.details .list i{font-style:normal;color:var(--teal);opacity:.6}

/* Apps */
.apps-head{display:grid;grid-template-columns:1.7fr 1fr;gap:80px;align-items:end;margin-bottom:70px}
.apps-grid{display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:stretch}
.poss{border-top:1px solid var(--line)}
.poss button .n{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.poss button strong{display:block;font-size:21px;font-weight:600;letter-spacing:-.025em;color:var(--text-3)}
.poss button span{font-size:14px;color:var(--text-3)}
.poss button .ar{font-family:var(--mono);color:var(--text-3)}
.poss button[aria-pressed="true"] strong{color:var(--text)}
.poss button[aria-pressed="true"] span{color:var(--text-2)}
.poss button[aria-pressed="true"] .n,.poss button[aria-pressed="true"] .ar{color:var(--teal)}
.apps-cta{margin-top:34px}
.apps-cta p{margin-top:16px;font-size:14px;color:var(--text-3)}
.window{border-radius:20px;overflow:hidden;background:#C6C9D0;border:1px solid var(--line-2);box-shadow:0 80px 140px -60px rgba(179,183,193,0.95),0 0 80px -30px rgba(106,118,160,0.18)}
.win-bar{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);background:rgba(18,22,32,0.016)}
.win-bar .tl{display:flex;gap:7px}
.win-bar .tl i{width:10px;height:10px;border-radius:50%;background:#E2E3E7}
.win-bar .title{font-weight:600;font-size:14px}
.win-bar .mono{font-size:10px;margin-left:auto}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--navy);border:1px solid rgba(106,118,160,0.4);color:var(--teal)}
.win-body{padding:30px 32px 32px}
.win-body .mono{font-size:10.5px}
.win-body .wt{font-size:30px;letter-spacing:-.03em;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:14px}
.pill{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 11px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:rgba(106,118,160,0.1);color:var(--teal);border:1px solid rgba(106,118,160,0.35)}
.pill.warn{background:rgba(74,80,94,0.08);color:#3E434E;border-color:rgba(74,80,94,0.35)}
.pill.mute{background:rgba(18,22,32,0.032);color:var(--text-2);border-color:var(--line-2)}
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:26px}
.stages > div{padding:14px 14px 12px;border-radius:10px;border:1px solid var(--line);font-size:14px;font-weight:550}
.stages > div .mono{display:block;font-size:10px;margin-bottom:6px}
.stages > div.done{border-color:rgba(106,118,160,0.35);background:rgba(106,118,160,0.05)}
.stages > div.now{border-color:var(--teal);background:rgba(106,118,160,0.12);box-shadow:0 0 0 3px rgba(106,118,160,0.1)}
.stages .bar{height:3px;border-radius:2px;background:var(--line-2);margin-top:12px;overflow:hidden}
.stages .bar i{display:block;height:100%;background:var(--teal)}
.win-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:16px}
.wbox{border:1px solid var(--line);border-radius:12px;padding:18px}
.wbox .mono{display:block;margin-bottom:12px;font-size:10px}
.wrow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.wrow:first-of-type{border-top:0}
.wrow small{color:var(--text-3);font-size:12.5px}
.chk{list-style:none}
.chk li{display:flex;gap:10px;align-items:center;font-size:14px;padding:6px 0;color:var(--text-2)}
.chk li b{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:9px;background:var(--teal);color:var(--teal-ink)}
.chk li.o b{background:transparent;border:1px solid var(--text-3)}
.thumbs{display:flex;gap:8px;margin-top:14px}
.thumbs span{flex:1;height:54px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(135deg,#D4D6DC,#C8CBD2);display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;color:var(--text-3);letter-spacing:.1em}
.illus{margin-top:16px;font-size:10.5px}

.mobile-app{margin-top:120px;padding:64px;border-radius:28px;background:radial-gradient(600px 400px at 20% 50%,rgba(106,118,160,0.1),transparent 70%),linear-gradient(180deg,#CACDD4,#C4C7CF);border:1px solid var(--line)}
.phone{width:300px;margin:0 auto;border-radius:44px;padding:12px;background:#BBBFC8;border:1px solid #E5E6EA;box-shadow:0 50px 90px -30px rgba(179,183,193,0.9),inset 0 0 0 1px rgba(18,22,32,0.04)}
.phone-in{border-radius:34px;background:linear-gradient(180deg,#CBCED4,#C3C6CE);padding:44px 20px 18px;position:relative;min-height:540px;display:flex;flex-direction:column}
.phone-in::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:14px;background:#000}
.phone-in .mono{font-size:9.5px}
.phone-in h5{font-size:26px;letter-spacing:-.03em;font-weight:600;margin-top:6px;line-height:1.1}
.phone-in .count{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.phone-in .count b{font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--teal)}
.visit{margin-top:12px;border:1px solid var(--line);border-radius:14px;padding:14px}
.visit.hot{border-color:rgba(106,118,160,0.4);background:rgba(106,118,160,0.06)}
.visit strong{display:block;font-size:16px;margin-top:4px;letter-spacing:-.01em}
.visit span{font-size:12.5px;color:var(--text-2)}
.visit .open{margin-top:12px;height:34px;border-radius:999px;background:var(--teal);color:var(--teal-ink);display:grid;place-items:center;font-size:13px;font-weight:600}
.tabbar{margin-top:auto;display:flex;justify-content:space-around;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--text-3)}
.tabbar .on{color:var(--teal)}
.mobile-app h3{font-size:56px;letter-spacing:-.045em;line-height:1;font-weight:600}
.mobile-app .copy p{color:var(--text-2);margin-top:20px;font-size:17px;max-width:540px}
.plat{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.paths div{border-top:1px solid var(--line-2);padding-top:16px}
.paths strong{display:block;font-size:17px;letter-spacing:-.015em;margin-top:8px}
.paths p{font-size:14px;color:var(--text-2);margin-top:4px}
.mobile-app .row{display:flex;gap:26px;align-items:center;margin-top:32px;flex-wrap:wrap}
.mobile-app .row .mono{font-size:10.5px}

/* Infrastructure */
.infra{overflow-x:clip;background:radial-gradient(1000px 600px at 50% 35%,rgba(217,219,224,0.7),transparent 70%)}
.infra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.infra-grid > *,.trio > *,.sup > *,.tools-grid > *,.price-grid > *,.sol > *,.apps-grid > *{min-width:0}
.infra .card{padding:30px;display:flex;flex-direction:column}
.infra .card h3{font-size:25px;letter-spacing:-.03em;font-weight:600;line-height:1.12;margin-top:14px}
.infra .card > p{color:var(--text-2);font-size:15px;margin-top:12px}
.viz{margin-top:26px;border-radius:14px;background:#C1C5CC;border:1px solid var(--line);padding:18px;flex:1;display:flex;flex-direction:column;min-height:260px}
.viz .mono{font-size:10px}
.vlan{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:14px;flex:1}
.vlan .node{width:100%;text-align:center;padding:10px}
.vlan .node strong{font-size:14px}
.vlan .wire{height:16px}
.vlan .three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;position:relative;padding-top:16px}
.vlan .three::before{content:"";position:absolute;top:0;left:16.6%;right:16.6%;height:16px;border:1px solid rgba(106,118,160,0.45);border-bottom:0;border-radius:8px 8px 0 0}
.vlan .three .node{padding:10px 6px}
.vlan .three .node strong{font-size:13px}
.vlan .three .node .mono{margin:2px 0 0;font-size:9.5px}
.vlan .three .node.block{border-style:dashed;opacity:.85}
.policy{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-2);width:100%;justify-content:center}
.bars{display:flex;align-items:flex-end;gap:5px;height:120px;margin-top:16px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.bars div i{display:block;border-radius:2px 2px 0 0}
.bars div i.a{background:linear-gradient(180deg,rgba(80,90,124,0.9),rgba(106,118,160,0.45))}
.bars div i.b{background:rgba(62,67,78,0.75);border-radius:0}
.axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--text-3);margin-top:8px;letter-spacing:.08em}
.legend{display:flex;gap:16px;font-size:12px;color:var(--text-2);margin-top:12px}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.dnsline{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:12px;color:var(--text);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dnsline .ar{color:var(--teal)}
.dnsline span:last-child{color:var(--text-2);font-family:var(--sans);font-size:13px}
.url{display:flex;align-items:center;gap:10px;height:38px;border-radius:999px;border:1px solid var(--line-2);padding:0 14px;font-family:var(--mono);font-size:12px;margin-top:14px}
.url .lock{color:var(--teal)}
.routes{margin-top:14px;display:flex;flex-direction:column;gap:8px;position:relative;padding-left:22px}
.routes::before{content:"";position:absolute;left:6px;top:0;bottom:18px;width:1px;background:linear-gradient(180deg,var(--teal),rgba(106,118,160,0.2))}
.routes div{position:relative;display:flex;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px}
.routes div::before{content:"";position:absolute;left:-16px;top:50%;width:14px;height:1px;background:rgba(80,90,124,0.6)}
.routes div code{font-family:var(--mono);font-size:12px;color:var(--teal)}
.routes div span{color:var(--text-2)}
.infra-foot{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.infra-foot .card{padding:30px 32px;display:flex;flex-direction:column}
.infra-foot .h4{font-size:22px;letter-spacing:-.025em;font-weight:600;margin-top:12px}
.infra-foot p{color:var(--text-2);font-size:15px;margin-top:10px;max-width:520px}
.infra-foot .link{margin-top:20px;align-self:flex-start;font-size:15px}
.fine{font-size:13px;color:var(--text-3);margin-top:22px;max-width:760px}

/* ---------- Product showcase ---------- */
.shot{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#D5D7DD;
  box-shadow:0 0 0 1px rgba(179,183,193,0.55),0 50px 110px -36px rgba(179,183,193,0.9),0 0 140px -50px rgba(106,118,160,0.22)}
.shot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(18,22,32,0.128),inset 0 0 0 1px rgba(18,22,32,0.056)}
.shot img{display:block;width:100%;height:auto}
.stage{position:relative}
.stage .shot-side{position:absolute}
.tag{font-size:10.5px;color:var(--text-3);white-space:nowrap}
.caps{display:flex;gap:48px;align-items:baseline;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.cap{display:flex;gap:14px;align-items:baseline;font-size:15px;color:var(--text-2);max-width:440px;line-height:1.5}
.cap em{font-style:normal;color:var(--text)}
.cap-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);flex:none}
.caps .tag{margin-left:auto}

/* voice: loom bleeds right, desk phone layered bottom-left */
.stage-voice{margin-top:84px;padding-left:25%;margin-right:-150px;padding-bottom:70px}
.stage-voice .shot-side{left:0;bottom:0;width:34%;border-radius:16px}
.caps-voice{margin-top:30px}

/* firewall: cinematic plate with prism companion */
.fw{margin-bottom:150px}
.fw-head{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:end;margin-bottom:56px}
.dns-copy h3{font-size:42px !important}
.fw-head h3,.dns-copy h3,.ops-copy h3{font-size:48px;letter-spacing:-.04em;line-height:1.02;font-weight:600;margin-top:16px}
.fw-head h3 .it,.dns-copy h3 .it,.ops-copy h3 .it{font-size:1.1em}
.fw-head p{color:var(--text-2);font-size:17px;max-width:480px}
.stage-fw{margin-right:70px;padding-bottom:150px}
.stage-fw .shot-side{right:-120px;bottom:0;width:50%}
.caps-fw{margin-top:30px}

/* dns: path bleeds left, filters layered right; copy alongside */
.dns{display:grid;grid-template-columns:1.35fr 1fr;gap:72px;align-items:center;margin-bottom:150px}
.stage-dns{margin-left:-150px;padding-bottom:150px}
.stage-dns .shot-side{right:-24px;bottom:0;width:72%}
.dns-copy .lead{font-size:18px;color:var(--text);margin-top:20px;line-height:1.45;letter-spacing:-.01em}
.benefits{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.benefits li{padding:16px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--text-2)}
.benefits li strong{display:block;color:var(--text);font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.dns-foot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:20px}
.infra-grid.two{grid-template-columns:1fr 1fr}

/* operations band */
.ops{padding:40px 0 150px;overflow-x:clip}
.ops-grid{display:grid;grid-template-columns:.8fr 1.6fr;gap:72px;align-items:center}
.ops-copy p{color:var(--text-2);font-size:17px;margin-top:18px;max-width:380px}
.ops-copy .link{margin-top:28px}
.ops-copy .fine{font-size:12.5px;margin-top:22px}
.stage-ops{margin-right:-150px}
.stage-ops .tag{display:block;margin-top:16px}

/* apps: three phones */
.ma-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.ma-head .copy p{color:var(--text-2);font-size:17px}
.android-cap{display:flex;gap:40px;align-items:baseline;justify-content:space-between;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.android-cap p{font-size:15px;color:var(--text-2);max-width:880px;line-height:1.6}
.android-cap strong{color:var(--text);font-weight:600}
.ma-foot{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;margin-top:56px;padding-top:30px;border-top:1px solid var(--line);align-items:start}
.ma-foot .paths{margin-top:0}
.ma-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.costs{width:100%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.costs summary{list-style:none;display:flex;justify-content:space-between;font-size:14.5px;color:var(--text);cursor:pointer}
.costs summary::-webkit-details-marker{display:none}
.costs summary span{color:var(--teal);font-family:var(--mono)}
.costs p{font-size:13.5px;color:var(--text-2);margin-top:10px}
.cost-src{display:flex;gap:16px;margin-top:10px;font-size:13px}
.own{font-size:13px;color:var(--text-3)}

/* ---------- Signature: your network, in your pocket ---------- */
.pocket-band{position:relative;padding:150px 0 130px;overflow:hidden;isolation:isolate;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:radial-gradient(1200px 700px at 50% 62%,rgba(217,219,224,0.95),transparent 70%),#C1C5CC}
.pocket-glow{position:absolute;left:50%;top:58%;width:1100px;height:620px;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(106,118,160,0.3),rgba(106,118,160,0.08) 55%,transparent);filter:blur(30px)}
.pocket-band .sec-head{margin-bottom:56px}
.pocket-title{text-align:center;font-size:150px;line-height:.9;letter-spacing:-.058em;font-weight:600}
.pocket-title span{display:block}
.pocket-title .l2{font-size:1.12em;letter-spacing:-.025em;margin-top:.02em;padding:0 .08em .16em;margin-bottom:-.16em}
.phones{position:relative;height:560px;margin-top:48px;perspective:2200px;
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}
.ph{position:absolute;top:0;left:50%;aspect-ratio:832/1800;border-radius:13.5%/6.2%;
  box-shadow:0 70px 120px -30px rgba(179,183,193,0.9),0 0 0 1px rgba(18,22,32,0.048),0 0 90px -20px rgba(106,118,160,0.35)}
.ph-m{width:288px;margin-left:-144px;z-index:3;}
.ph-l{width:260px;margin-left:-404px;top:50px;z-index:2;transform:rotateY(16deg) rotateZ(-2deg);transform-origin:right center;filter:brightness(.82)}
.ph-r{width:260px;margin-left:144px;top:50px;z-index:2;transform:rotateY(-16deg) rotateZ(2deg);transform-origin:left center;filter:brightness(.82)}
.pocket-copy{max-width:820px;margin:10px auto 0;text-align:center}
.pocket-body{font-size:22px;line-height:1.5;letter-spacing:-.012em;color:var(--text)}
.pocket-copy .android-cap{text-align:left}
.echo{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:14.5px;color:var(--text-2);border-bottom:1px solid rgba(106,118,160,0.35);padding-bottom:2px}
.echo svg{color:var(--teal)}
.echo .ar{color:var(--teal);font-family:var(--mono);font-size:12px}
.signoff{margin-top:80px;display:flex;align-items:baseline;gap:18px;font-size:34px;letter-spacing:-.035em;font-weight:600;color:var(--text)}
.signoff .it{font-size:1.1em}
.signoff .ar{font-family:var(--mono);font-size:16px;color:var(--teal)}
.signoff + .wordmark{margin-top:36px}

/* Approach */
.appr-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:start}
.appr-grid .p{color:var(--text-2);font-size:18px;margin-top:26px;max-width:540px}
.mantra{margin-top:36px;display:flex;flex-direction:column;gap:6px}
.mantra span{font-family:var(--serif);font-style:italic;font-size:34px;letter-spacing:-.01em;line-height:1.15}
.mantra span:nth-child(2){color:var(--text-2)}
.mantra span:nth-child(3){color:var(--teal)}
.proving{border:1px solid var(--line);border-radius:var(--r);padding:32px}
.proving-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.proving li{list-style:none;display:grid;grid-template-columns:48px 1fr;padding:22px 0;border-top:1px solid var(--line)}
.proving li:first-child{border-top:0}
.proving li .n{font-family:var(--mono);font-size:12px;color:var(--teal);padding-top:5px}
.proving li strong{font-size:21px;letter-spacing:-.025em;font-weight:600}
.proving li p{color:var(--text-2);font-size:15px;margin-top:4px}
.proving .cap{font-size:12.5px;color:var(--text-3);padding-top:18px;border-top:1px solid var(--line)}
.path{margin-top:130px}
.path-head{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:60px}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.timeline::before{content:"";position:absolute;top:7px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--teal),rgba(106,118,160,0.35) 60%,rgba(106,118,160,0.08))}
.timeline .mono{display:block}
.timeline h3{font-size:32px;letter-spacing:-.035em;font-weight:600;margin-top:16px}
.timeline p{color:var(--text-2);margin-top:12px;font-size:16px}
.timeline .tags{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text-3)}
.path .fine{margin-top:48px}

/* Support */
.support{background:linear-gradient(180deg,transparent,rgba(199,202,209,0.9) 25%,rgba(199,202,209,0.9) 75%,transparent)}
.sup-head{display:grid;grid-template-columns:1.7fr 1fr;gap:80px;align-items:end;margin-bottom:64px}
.sup{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sup .card{padding:34px 32px;display:flex;flex-direction:column}
.sup .card.feat{background:linear-gradient(180deg,rgba(106,118,160,0.08),rgba(106,118,160,0.015));border-color:rgba(106,118,160,0.3)}
.sup h3{font-size:34px;letter-spacing:-.04em;font-weight:600;margin-top:20px}
.sup .card > p{color:var(--text-2);margin-top:12px;font-size:15.5px;min-height:96px}
.sup .ticks{margin-top:22px;margin-bottom:30px}
.sup .ticks li{font-size:14.5px;color:var(--text-2)}
.sup .btn{margin-top:auto;align-self:flex-start;height:46px;font-size:15px}
.sup-note{margin-top:20px;font-size:13px;color:var(--text-3)}
.access{margin-top:56px;display:grid;grid-template-columns:1fr 2fr;gap:60px;padding:40px;border-radius:var(--r);border:1px dashed var(--line-2)}
.access .h4{font-size:30px;letter-spacing:-.035em;line-height:1.08;font-weight:600;margin-top:14px}
.access .three{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.access .three div{border-top:1px solid var(--line-2);padding-top:16px}
.access .three strong{display:block;font-size:16.5px;letter-spacing:-.015em;margin-top:8px}
.access .three p{font-size:14px;color:var(--text-2);margin-top:6px}
.access .fine{grid-column:1/-1;margin-top:0}
.assist{margin-top:20px;display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;padding:34px 40px;border-radius:var(--r);background:linear-gradient(90deg,rgba(217,219,224,0.9),rgba(199,202,209,0.6));border:1px solid var(--line)}
.assist .orb{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#505A7C,var(--teal) 35%,#505A7C 75%);box-shadow:0 0 50px rgba(106,118,160,0.45)}
.assist .h4{font-size:28px;letter-spacing:-.035em;font-weight:600;line-height:1.1}
.assist p{color:var(--text-2);font-size:15px;margin-top:8px;max-width:620px}

/* Pricing */
.price-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:stretch}
.assess{padding:44px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(500px 300px at 100% 0%,rgba(106,118,160,0.16),transparent 70%),linear-gradient(180deg,#CCCED5,#C6C9D0);border-color:rgba(106,118,160,0.3)}
.assess .big{font-size:168px;font-weight:300;letter-spacing:-.07em;line-height:.85;margin-top:40px;display:flex;align-items:flex-start}
.assess .big sup{font-size:.34em;font-weight:400;letter-spacing:0;margin:.18em .08em 0 0;color:var(--teal)}
.assess .what{display:flex;gap:14px;align-items:center;margin-top:18px}
.assess .what h3{font-size:22px;letter-spacing:-.02em;font-weight:600}
.assess > p{color:var(--text-2);margin-top:22px;font-size:16px;max-width:460px}
.assess .row{display:flex;gap:24px;align-items:center;margin-top:auto;padding-top:36px;flex-wrap:wrap}
.tiers{border-top:1px solid var(--line)}
.tier{display:grid;grid-template-columns:44px 1fr auto;gap:10px 22px;padding:30px 4px 30px;border-bottom:1px solid var(--line);align-items:start}
.tier .n{font-family:var(--mono);font-size:11.5px;color:var(--teal);padding-top:8px}
.tier h3{font-size:26px;letter-spacing:-.03em;font-weight:600}
.tier p{color:var(--text-2);font-size:15px;margin-top:8px;max-width:400px}
.tier .amt{text-align:right}
.tier .amt .mono{display:block;font-size:10.5px}
.tier .amt strong{display:block;font-size:40px;font-weight:400;letter-spacing:-.045em;line-height:1;margin-top:8px}
.tier .amt strong.sc{font-family:var(--serif);font-style:italic;font-size:40px;letter-spacing:-.01em}
.tier .amt small{display:block;font-size:12.5px;color:var(--text-3);margin-top:8px}
.price-note{margin-top:28px;display:flex;gap:14px;font-size:14px;color:var(--text-2);max-width:820px}
.price-note .mono{color:var(--teal)}

/* Free tools */
.tools{padding:140px 0;background:radial-gradient(900px 500px at 20% 20%,rgba(106,118,160,0.08),transparent 70%),radial-gradient(900px 500px at 90% 80%,rgba(217,219,224,0.9),transparent 70%),#C5C8CF;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tools-head{display:grid;grid-template-columns:1.7fr 1fr;gap:80px;align-items:end;margin-bottom:64px}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tool{padding:40px;display:grid;grid-template-rows:auto 1fr auto;gap:0;min-height:600px}
.tool-top{display:flex;justify-content:space-between;align-items:center}
.tool h3{font-size:42px;letter-spacing:-.04em;line-height:1.02;font-weight:600;margin-top:26px}
.tool h3 .it{font-size:1.08em}
.tool .p{color:var(--text-2);font-size:16px;margin-top:14px;max-width:470px}
.readout{margin-top:30px;border-radius:14px;background:#C1C5CC;border:1px solid var(--line);padding:18px 20px;align-self:start}
.readout-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.readout-top code{font-family:var(--mono);font-size:13px}
.grade{display:flex;align-items:center;gap:12px}
.grade b{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:24px;font-weight:600;background:rgba(106,118,160,0.12);border:1px solid rgba(106,118,160,0.5);color:var(--teal)}
.recs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.recs span{display:flex;align-items:center;justify-content:space-between;gap:6px;height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--text-2)}
.recs span i{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.recs span.w i{background:#3E434E}
.checklist{margin-top:30px;border-radius:14px;background:#C1C5CC;border:1px solid var(--line);padding:6px 20px;align-self:start}
.checklist li{list-style:none;display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.checklist li:last-child{border-bottom:0}
.checklist li .bx{width:16px;height:16px;border-radius:4px;border:1px solid var(--text-3)}
.checklist li .bx.on{background:var(--teal);border-color:var(--teal)}
.tool .foot{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);gap:20px}
.tool .foot .mono{font-size:10.5px}
.guides{margin-top:60px}
.guides-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.guide-links{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.guide-links a{padding:26px 26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-height:150px}
.guide-links a .mono{font-size:10.5px;display:flex;justify-content:space-between}
.guide-links a .mono .ar{color:var(--teal)}
.guide-links a strong{font-size:19px;letter-spacing:-.02em;font-weight:600;margin-top:auto;line-height:1.2}
.guide-links a span{font-size:13.5px;color:var(--text-2)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:100px;align-items:start}
.faq-grid .intro{margin-top:24px}
.faq-grid .link{margin-top:30px}
.qa{border-top:1px solid var(--line)}
.q{padding:28px 0;border-bottom:1px solid var(--line)}
.q summary{display:flex;justify-content:space-between;gap:30px;font-size:22px;letter-spacing:-.025em;font-weight:550;list-style:none;cursor:pointer}
.q summary::-webkit-details-marker{display:none}
.q summary .pm{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:15px;color:var(--teal)}
.q[open] summary .pm{background:var(--teal);color:var(--teal-ink);border-color:var(--teal)}
.q p{color:var(--text-2);margin-top:14px;font-size:16.5px;max-width:640px}
.faq-foot{margin-top:24px;font-size:14px;color:var(--text-3)}
.faq-foot a{color:var(--text-2);border-bottom:1px solid var(--line-2)}

/* Contact */
.contact{padding:150px 0 140px;background:radial-gradient(900px 600px at 15% 40%,rgba(217,219,224,0.95),transparent 70%),radial-gradient(500px 400px at 85% 60%,rgba(106,118,160,0.08),transparent 70%)}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:90px;align-items:start}
.contact h2{font-size:84px}
.contact .p{color:var(--text-2);font-size:18px;margin-top:28px;max-width:470px}
.direct{margin-top:46px;border-top:1px solid var(--line)}
.direct > a,.direct .contact-links > a,.direct-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.direct .mono{font-size:10.5px}
.direct strong{font-size:22px;letter-spacing:-.025em;font-weight:550}
.direct .ar{color:var(--teal);font-family:var(--mono)}
.next{margin-top:34px;display:flex;gap:16px;align-items:flex-start;max-width:470px}
.next p{font-size:14.5px;color:var(--text-2)}
.form{padding:40px}
.form-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px}
.form-top h3{font-size:28px;letter-spacing:-.03em;font-weight:600}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{display:flex;flex-direction:column;gap:8px}
.f.full{grid-column:1/-1}
.f label{font-size:13px;color:var(--text-2);display:flex;justify-content:space-between}
.f label em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts .chip{height:34px;font-size:13px}
.consent{grid-column:1/-1;display:flex;gap:12px;font-size:13.5px;color:var(--text-2);align-items:flex-start;margin-top:4px}
.consent a{border-bottom:1px solid var(--line-2);color:var(--text)}
.submit{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:20px}
.submit .mono{font-size:10.5px;line-height:1.6}
.alt,.form-fallback{margin-top:18px;font-size:13px;color:var(--text-3)}
.alt a,.form-fallback a{color:var(--text-2);border-bottom:1px solid var(--line-2)}

/* Footer */
footer{border-top:1px solid var(--line);padding:90px 0 40px;position:relative;overflow:hidden;background:radial-gradient(800px 300px at 50% 100%,rgba(106,118,160,0.1),transparent 70%)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px}
.foot-grid .logo img{height:28px}
.foot-grid > div > p{color:var(--text-2);font-size:15px;margin-top:20px;max-width:300px}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:14.5px;color:var(--text-2)}
.wordmark{margin-top:100px;font-size:116px;line-height:1;letter-spacing:-.055em;font-weight:600;white-space:nowrap;background:linear-gradient(180deg,rgba(18,19,23,0.16),rgba(18,19,23,0.03));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;padding-bottom:.08em}
.wordmark .it{background:linear-gradient(180deg,var(--teal),rgba(106,118,160,0.25));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.1em;padding-right:.1em}
.ad{margin-top:60px;display:flex;align-items:center;gap:22px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;font-size:14px;color:var(--text-2)}
.ad strong{color:var(--text);font-weight:600}
.ad .link{margin-left:auto;font-size:14px}
.legal{margin-top:34px;display:flex;justify-content:space-between;font-size:13px;color:var(--text-3);gap:20px;flex-wrap:wrap}

/* ---------- Tablet ---------- */
@media (min-width:641px){ h2 .it{white-space:nowrap} }
@media (max-width:1100px){
  :root{--gut:28px}
  .hero h1{font-size:96px}
  .voice-grid,.appr-grid,.faq-grid,.contact-grid{grid-template-columns:1fr;gap:60px}
  .sol{grid-template-columns:1fr}
  .apps-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
}

/* ---------- Phone ---------- */
@media (max-width:640px){
  :root{--gut:20px;--r:16px}
  body{font-size:16px}
  .nav .wrap{height:64px;gap:12px}
  .logo img{height:22px}
  .nav-cta .tel,.nav-cta .btn{display:none}
  .nav-cta{margin-left:auto}
  .menu{display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
  .menu i{display:flex;flex-direction:column;gap:4px}
  .menu i b{display:block;width:14px;height:1px;background:var(--text)}
  .hero{min-height:0;padding-top:64px}
  .hero-grid{display:none}
  .hero-copy{padding-top:52px}
  .hero-label{margin-bottom:24px}
  .hero-label .rule{width:24px}
  .hero h1{font-size:57px;line-height:.95;letter-spacing:-.05em}
  .hero .lede{font-size:20px;margin-top:24px}
  .hero .sub{font-size:16px}
  .hero .ctas{flex-direction:column;align-items:stretch;gap:10px;margin-top:30px}
  .hero .ctas .btn{justify-content:space-between}
  .hero .free{margin-top:20px;align-items:flex-start}
  .hero .free .mono{line-height:1.7}
  .hero-art{position:relative;top:auto;right:auto;width:auto;height:auto;margin:40px -20px 0;aspect-ratio:16/11;z-index:0}
  .hero-art img{object-position:72% 50%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 78%,transparent 100%)}
  .fig{display:none}
  .figcap{display:none}
  h2 br{display:none}
  .spec{position:relative;margin-top:28px}
  .spec .wrap{grid-template-columns:1fr 1fr;padding:0}
  .spec-cell{padding:22px 20px !important;border-left:0 !important;flex-direction:column;gap:8px}
  .spec-cell:nth-child(2n){border-left:1px solid var(--line) !important}
  .spec-cell:nth-child(n+3){border-top:1px solid var(--line)}
  .spec-cell .h-spec{font-size:15px}
  .spec-cell p{font-size:13px}
  .sec{padding:96px 0}
  .sec-head{margin-bottom:40px;gap:12px}
  .sec-head .mono:last-child{display:none}
  .sec-head .mono:nth-child(2){overflow:hidden;text-overflow:ellipsis}
  .thumbs span{font-size:8.5px;letter-spacing:.02em}
  .tool-top{gap:14px;align-items:flex-start}
  .form-top .mono{display:none}
  h2,.voice h2,.contact h2{font-size:46px;line-height:1;letter-spacing:-.045em}
  .h2-sm{font-size:40px}
  .intro{font-size:17px}
  .equation{padding:90px 0 80px}
  .eq-top{flex-direction:column;align-items:flex-start;margin-bottom:44px;gap:20px}
  .eq-top h2{font-size:40px}
  .eq{grid-template-columns:1fr;gap:0}
  .eq-term{padding:4px 0}
  .eq-term h3{font-size:40px}
  .eq-term p{margin-top:10px;max-width:none}
  .eq-term .mono{margin-bottom:10px}
  .eq-op{padding:14px 0;font-size:24px}
  .eq-term.res h3{font-size:44px}
  .voice .p{font-size:18px}
  .voice .note{flex-direction:column;gap:10px}
  .device{padding:18px;border-radius:22px}
  .screen{padding:18px}
  .screen h4{font-size:24px}
  .callcard{padding:12px}
  .callcard .mono{display:none}
  .dev-body{grid-template-columns:1fr;gap:18px}
  .keys span{height:34px}
  .industries{margin-top:70px}
  .industries .say{margin-left:0;text-align:left;margin-top:10px}
  .steps3{grid-template-columns:1fr}
  .steps3 > div,.steps3 > div + div{padding:26px 0;border-left:0;border-bottom:1px solid var(--line)}
  .trio-head,.sol-head,.apps-head,.sup-head,.tools-head{grid-template-columns:1fr;gap:22px;margin-bottom:44px}
  .trio,.sup,.infra-grid,.infra-foot,.tools-grid{grid-template-columns:1fr;gap:14px}
  .trio .card{min-height:0;padding:28px 24px}
  .trio h3{padding-top:40px;font-size:25px;min-height:0}
  .tab{font-size:22px;padding:18px 4px}
  .panel{grid-template-columns:1fr;padding:24px;gap:30px}
  .panel h3{font-size:32px}
  .details{flex-direction:column;align-items:flex-start;gap:14px;white-space:normal}
  .details .list{flex-wrap:wrap;gap:8px 16px;font-size:17px}
  .poss button strong{font-size:18px}
  .win-body{padding:20px}
  .win-bar .mono{display:none}
  .stages{grid-template-columns:1fr 1fr}
  .win-cols{grid-template-columns:1fr}
  .mobile-app{padding:32px 20px;margin-top:80px}
  .phone{width:270px}
  .phone-in{min-height:480px}
  .mobile-app h3{font-size:38px}
  .paths{grid-template-columns:1fr}
  .viz{min-height:0}
  .appr-grid .p{font-size:16.5px}
  .mantra span{font-size:28px}
  .path{margin-top:90px}
  .path-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:40px}
  .timeline{grid-template-columns:1fr}
  .timeline::before{top:0;bottom:0;left:7px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,var(--teal),rgba(106,118,160,0.1))}
  .timeline h3{font-size:27px;margin-top:10px}
  .sup .card > p{min-height:0}
  .access{grid-template-columns:1fr;padding:26px 22px;gap:28px}
  .access .three{grid-template-columns:1fr;gap:20px}
  .assist{grid-template-columns:1fr;padding:28px 22px;gap:20px}
  .assist .orb{width:56px;height:56px}
  .assess{padding:30px 24px}
  .assess .big{font-size:116px}
  .tier{grid-template-columns:34px 1fr;padding:26px 0}
  .tier .amt{grid-column:2;text-align:left}
  .tier h3{font-size:23px}
  .tools{padding:96px 0}
  .tool{padding:28px 22px;min-height:0}
  .tool h3{font-size:32px}
  .recs{grid-template-columns:1fr 1fr}
  .tool .foot{flex-direction:column;align-items:flex-start}
  .guide-links{grid-template-columns:1fr}
  .guide-links a{min-height:0}
  .guides-top{flex-direction:column;align-items:flex-start;gap:8px}
  .q summary{font-size:18.5px}
  .contact{padding:96px 0}
  .direct .mono{grid-column:1/-1}
  .direct strong{font-size:19px}
  .form{padding:24px 20px}
  .fgrid{grid-template-columns:1fr}
  .submit{flex-direction:column;align-items:stretch}
  .submit .btn{justify-content:space-between}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px 20px}
  .foot-grid > div:first-child{grid-column:1/-1}
  .wordmark{font-size:58px;margin-top:70px;white-space:normal}
  /* showcase on phones: layered crops, no tiny dashboards */
  .voice-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .stage-voice,.stage-fw,.stage-dns,.stage-ops{margin:0;padding:0}
  .stage-voice{margin-top:52px}
  .stage .shot-side{position:relative;left:auto;right:auto;bottom:auto;width:78%;margin:-56px -8px 0 auto}
  .stage .shot{aspect-ratio:4/3}
  .stage .shot img{position:absolute;left:0;top:0;max-width:none;width:var(--z);transform:translate(var(--sx),var(--sy))}
  .stage-voice .shot-main{--z:180%;--sx:-18%;--sy:-3%}
  .stage-voice .shot-side{aspect-ratio:5/4;--z:205%;--sx:-35%;--sy:-24%}
  .stage-fw .shot-main{--z:150%;--sx:-3%;--sy:-14%}
  .stage-fw .shot-side{aspect-ratio:5/4;--z:170%;--sx:-2%;--sy:-19%}
  .stage-dns .shot-main{--z:170%;--sx:-2%;--sy:-13%}
  .stage-dns .shot-side{aspect-ratio:1/1;--z:300%;--sx:-67.5%;--sy:-9%}
  .stage-ops .shot-main{--z:165%;--sx:-2%;--sy:-9%}
  .caps{flex-direction:column;gap:12px;margin-top:24px}
  .caps .tag{margin-left:0}
  .fw{margin-bottom:96px}
  .fw-head{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
  .fw-head h3,.dns-copy h3,.ops-copy h3{font-size:34px}
  .dns{grid-template-columns:1fr;gap:40px;margin-bottom:96px}
  .dns-foot{flex-direction:column;align-items:flex-start}
  .infra-grid.two{grid-template-columns:1fr}
  .ops{padding:20px 0 96px}
  .ops-grid{grid-template-columns:1fr;gap:36px}
  .ma-head{grid-template-columns:1fr;gap:20px}
  .android-cap{flex-direction:column;gap:12px}
  .ma-foot{grid-template-columns:1fr;gap:30px}
  .pocket-band{padding:96px 0 90px}
  .pocket-band .sec-head{margin-bottom:36px}
  .pocket-title{font-size:66px;line-height:.92;text-align:left}
  .pocket-glow{width:560px;height:520px;top:52%}
  .phones{height:640px;margin-top:44px;perspective:1400px}
  .ph-m{width:270px;margin-left:-160px;top:0;z-index:3;transform:none;filter:none}
  .ph-l{width:250px;margin-left:-40px;top:40px;z-index:2;transform:rotateY(-14deg);transform-origin:left center;filter:brightness(.7)}
  .ph-r{display:none}
  .pocket-copy{text-align:left}
  .pocket-body{font-size:18px}
  .echo{font-size:13.5px;margin-top:16px}
  .signoff{font-size:26px;flex-wrap:wrap;gap:6px 12px;margin-top:60px}
  .ad{flex-direction:column;align-items:flex-start}
  .ad .link{margin-left:0}
}

/* ==========================================================================
   Production layer: real controls, accessibility and live app.js states
   ========================================================================== */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{min-height:100vh}
p,ul,ol,dl,dd,figure,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
button{background:none;border:0;cursor:pointer;font:inherit;color:inherit;text-align:inherit}
::selection{background:rgba(106,118,160,0.35);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.chip:focus-visible{border-radius:999px;outline-offset:4px}
.skip-link{position:fixed;z-index:100;left:16px;top:-100px;background:var(--teal);color:var(--teal-ink);padding:12px 20px;border-radius:999px;font-weight:600}
.skip-link:focus{top:16px}
.grain{height:100vh}
.btn{cursor:pointer;border:0}
.btn-ghost{border:1px solid var(--line-2)}
.btn-primary:hover{background:#505A7C}
.btn-ghost:hover{border-color:rgba(106,118,160,0.42);background:rgba(18,22,32,0.04)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn-sm{height:44px;font-size:14.5px;padding:0 16px 0 18px}
.link:hover{border-bottom-color:var(--teal)}
.linkbtn{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:550;color:var(--text);border-bottom:1px solid rgba(106,118,160,0.45);padding:4px 0}
.linkbtn:hover:not(:disabled){border-bottom-color:var(--teal)}
.linkbtn:disabled{color:var(--text-3);border-bottom-color:var(--line-2);cursor:not-allowed}
.mt36{margin-top:36px}
.sec-tight{padding-top:40px}
.h4{font-size:22px;letter-spacing:-.025em;font-weight:600;line-height:1.15}

/* Header + menu (app.js toggles nav#main-nav.open and aria-expanded) */
.nav nav{display:flex;list-style:none;gap:30px;margin-left:auto;font-size:14.5px;color:var(--text-2)}
.nav nav a{padding:6px 0}
.nav nav a:hover{color:var(--text)}
.nav-menu-only{display:none}
.logo img{height:30px;width:auto}
.menu{display:none}

/* Hero spec headings (h2 for a correct outline, styled as the rendering's cells) */
.spec-cell .h-spec{font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}

/* Voice industries (real toggle buttons) */
.industries .ind-label{margin-right:10px}
.ind-chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{cursor:default;transition:.2s}
button.chip{cursor:pointer}
button.chip:hover{border-color:rgba(106,118,160,0.35);color:var(--text)}
.chip[aria-pressed="true"]{background:rgba(106,118,160,0.1);border-color:rgba(106,118,160,0.5);color:var(--text)}
.industries .say p{margin:0}
.ind-route{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 10px;margin-bottom:6px!important;font-size:10.5px}
.ind-route span:nth-child(even){color:var(--teal)}

/* Solution tabs (role=tab buttons) */
.tab{width:100%;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;font-family:var(--sans);transition:color .2s}
.tab:hover{color:var(--text-2)}
.tab.active{color:var(--text)}
.tab.active::before{content:"";position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--teal);box-shadow:0 0 14px var(--teal);left:-22px}
.tab.active .ar,.tab.active .mono{color:var(--teal)}
.size-picker{border:0;min-width:0}
.size-picker legend{padding:0;float:left;width:100%}
.size-picker legend + *{clear:both}
.seg label{position:relative;display:block;cursor:pointer}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.seg input:checked + span{background:var(--text);color:var(--canvas);font-weight:600}
.seg input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px}
.seg label:hover input:not(:checked) + span{color:var(--text)}
.startpt p span + span::before{content:""}
.panel .kicker{display:block}
.panel #solution-cta{margin-top:30px}

/* Demo stage: one sample per active tab */
.demo .showcase{display:none;flex-direction:column;flex:1}
#solution-panel[data-category="voice"] .showcase-voice,
#solution-panel[data-category="network"] .showcase-network,
#solution-panel[data-category="applications"] .showcase-applications,
#solution-panel[data-category="infrastructure"] .showcase-infrastructure{display:flex}
.demo .foot{line-height:1.55}
.demo-cap{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:10px!important}
.route-btn{display:block;width:100%;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.route-btn:hover{border-color:rgba(106,118,160,0.45)}
.route-btn .try{display:block;margin-top:8px;font-family:var(--mono);font-size:10px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)!important}
.route-btn[aria-pressed="true"],.seg-btn[aria-pressed="true"]{border-color:rgba(80,90,124,0.55);background:rgba(106,118,160,0.09);box-shadow:0 0 30px -8px rgba(106,118,160,0.35)}
.demo .vlan{margin-top:22px}
.seg-btn{cursor:pointer;width:100%;transition:border-color .2s,background .2s}
.seg-btn:hover{border-color:rgba(106,118,160,0.45)}
.seg-btn .mono{margin:2px 0 0;font-size:9.5px}
.traffic{width:100%;margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.traffic .mono{font-size:9.5px;display:block;margin-bottom:6px}
.traffic svg{display:block;width:100%;height:56px}
.traffic-grid{fill:none;stroke:var(--line-2);stroke-width:1}
.traffic-line{fill:none;stroke:var(--teal);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.policy strong{font-weight:550;color:var(--text)}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:22px;flex:1}
.board .col{border:1px dashed var(--line-2);border-radius:12px;padding:12px;min-height:210px;display:flex;flex-direction:column;gap:10px}
.board .col > .mono{font-size:9.5px}
.wcard{border:1px solid rgba(80,90,124,0.55);background:rgba(106,118,160,0.07);border-radius:10px;padding:12px;box-shadow:0 0 30px -10px rgba(106,118,160,0.3)}
.wcard .mono{font-size:9.5px}
.wcard h4{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:6px;line-height:1.25}
.wcard p{font-size:12.5px;color:var(--text-2);margin-top:4px;line-height:1.45}
.owner{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:12px;color:var(--text-2)}
.owner i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;background:var(--navy);border:1px solid rgba(106,118,160,0.4);color:var(--teal)}
.board .placeholder{flex:1;display:grid;place-items:center;color:var(--text-3);font-family:var(--mono)}
.wcard:not([hidden]) + .placeholder{display:none}
.demo-actions{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
.demo-actions .mono{font-size:10px}
.infra-model{flex:1;padding-top:22px}
.scene{display:none;border:1px solid var(--line-2);border-radius:12px;padding:18px;background:rgba(18,22,32,0.02)}
.infra-model[data-mode="onsite"] .onsite-scene,.infra-model[data-mode="hosted"] .hosted-scene{display:block}
.scene .mono{font-size:10px;display:block}
.scene strong{display:block;font-size:20px;letter-spacing:-.02em;margin:6px 0 12px}
.rack div{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);border-radius:8px;padding:12px 14px;margin-top:8px;background:linear-gradient(180deg,#D2D5DA,#C8CBD2)}
.rack i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.rack b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);font-weight:500}
.hosted-users{display:flex;gap:8px;flex-wrap:wrap}
.hosted-users span{border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--text-2)}

/* Apps: possibility buttons, windows and reversible demos */
.poss{border-top:1px solid var(--line)}
.poss-label{display:block;margin-bottom:16px}
.poss button{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer}
.poss button:hover strong{color:var(--text-2)}
.app-stage{min-width:0}
.app-preview .app-after{display:none!important}
.app-preview[data-complete="true"] .app-after{display:revert!important}
.app-preview[data-complete="true"] .chk li.app-after{display:flex!important}
.app-preview[data-complete="true"] .app-before{display:none!important}
.win-body .wt{font-size:30px;letter-spacing:-.03em;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;line-height:1.1}
.stages .bar i{width:0;transition:width .4s}
.stages .bar i.w100{width:100%}
.stages .st-approval,.app-preview[data-complete="true"] .st-scheduled{border-color:var(--teal);background:rgba(106,118,160,0.12);box-shadow:0 0 0 3px rgba(106,118,160,0.1)}
.app-preview[data-complete="true"] .st-approval{border-color:rgba(106,118,160,0.35);background:rgba(106,118,160,0.05);box-shadow:none}
.st-approval .bar i{width:60%}
.app-preview[data-complete="true"] .st-approval .bar i{width:100%}
.app-preview[data-complete="true"] .st-scheduled .bar i{width:60%}
.wbig{display:block;font-size:22px;letter-spacing:-.02em;font-weight:600;margin:2px 0 8px}
.wbox .pill{margin-top:10px}
.wrow .pill{margin-top:0}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.metrics div{border:1px solid var(--line);border-radius:12px;padding:14px}
.metrics .mono{font-size:10px}
.metrics strong{display:block;font-size:30px;font-weight:600;letter-spacing:-.03em;margin-top:6px;line-height:1.1}
.metrics small{color:var(--text-3);font-size:12.5px}
.hbars > div{display:grid;grid-template-columns:62px 1fr 24px;gap:10px;align-items:center;font-size:13px;color:var(--text-2);padding:6px 0}
.hbars i{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--teal),rgba(106,118,160,0.45))}
.hbars i.w100{width:100%}.hbars i.w67{width:67%}.hbars i.w33{width:33%}
.hbars b{font-weight:600;color:var(--text);text-align:right}
.sheet{margin-top:22px}
.sheet .wrow{display:grid;grid-template-columns:1.3fr 1fr auto;gap:10px}
.sheet .wrow.head{padding-top:0}
.sheet .wrow strong{font-weight:550}
.sheet .wrow span{color:var(--text-2)}
.sheet .wrow.sel{background:rgba(106,118,160,0.06);margin:0 -10px;padding:10px;border-radius:8px}
.wnote{margin-top:14px;font-size:13.5px;color:var(--text-2)}
.app-demo-interaction{display:flex;gap:16px 20px;align-items:center;margin-top:18px;flex-wrap:wrap}
.app-demo-interaction p{font-size:14px;color:var(--text-2);flex:1;min-width:220px}
.app-disclosure{margin-top:18px}

/* Pocket band: three separate phone images */
img.ph{position:absolute;top:0;left:50%;height:auto;aspect-ratio:840/1800;max-width:none;border-radius:13.5%/6.2%;
  box-shadow:0 70px 120px -30px rgba(179,183,193,0.9),0 0 0 1px rgba(18,22,32,0.048),0 0 90px -20px rgba(106,118,160,0.35)}

/* Infra extras */
.records{margin-top:22px}
.records dl{margin-top:10px}
.records dl div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.records dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--teal);padding-top:2px}
.records dd{color:var(--text-2)}
.card-link{margin-top:22px;align-self:flex-start}
.legend .lg-a{background:var(--teal)}.legend .lg-b{background:var(--text-3)}
.infra-grid .legend{margin-top:auto;padding-top:14px}
.costs summary:focus-visible,.q summary:focus-visible{outline-offset:6px}

/* Timeline as an ordered list */
.timeline > li{padding-right:44px;position:relative;padding-top:44px}
.timeline > li::before{content:"";position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;background:var(--canvas);border:1px solid var(--teal);box-shadow:0 0 0 5px var(--canvas)}
.timeline > li:first-child::before{background:var(--teal);box-shadow:0 0 0 5px var(--canvas),0 0 18px var(--teal)}
.path-head .intro{max-width:440px}

/* Support extras */
.equip{margin-top:20px;display:grid;grid-template-columns:260px 1fr;gap:40px;padding:30px 40px;border-radius:var(--r);border:1px solid var(--line)}
.equip p{font-size:15px;color:var(--text-2);max-width:820px}
.equip strong{display:block;color:var(--text);font-size:20px;letter-spacing:-.02em;font-weight:600;margin-bottom:6px}
.assist .h4{font-size:28px;letter-spacing:-.035em;line-height:1.1;margin-top:10px}

/* Pricing extras */
.assess .what h3{font-size:22px;letter-spacing:-.02em;font-weight:600}
.checkout-row{margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.small-status{font-size:13px;color:var(--text-2)}
.tier h3 a:hover{text-decoration:underline;text-decoration-color:rgba(80,90,124,0.6);text-underline-offset:5px}
.checkout-return{margin:-24px 0 40px;padding:16px 20px;border:1px solid rgba(106,118,160,0.4);border-radius:14px;background:rgba(106,118,160,0.08);font-size:15px;color:var(--text)}

/* Guide links grid in Free tools */
.guide-links a:hover strong{text-decoration:underline;text-decoration-color:rgba(80,90,124,0.6);text-underline-offset:5px}

/* FAQ */
.q summary .pm::before{content:"+"}
.q[open] summary .pm::before{content:"−"}

/* Contact + form */
.contact-links{display:contents}
.direct-row .dot{justify-self:end;margin-right:4px}
.contact .fine{margin-top:26px}
.fgrid .full{grid-column:1/-1}
.f input,.f select,.f textarea{width:100%;height:52px;border-radius:12px;background:rgba(188,192,201,0.6);border:1px solid var(--line-2);padding:0 16px;font-size:16px;color:var(--text);-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.f select{padding-right:42px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.f select option{background:#CCCED5;color:var(--text)}
.f textarea{height:auto;min-height:124px;padding:14px 16px;line-height:1.5;resize:vertical}
.f input:hover,.f select:hover,.f textarea:hover{border-color:rgba(106,118,160,0.3)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(106,118,160,0.2)}
.f ::placeholder{color:var(--text-3);opacity:1}
.field-help{display:block;font-size:12.5px;line-height:1.55;color:var(--text-2)}
p.field-help{margin-top:-8px}
#campaign-context{margin-top:4px}
.hp-field{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.consent{cursor:pointer}
.consent input{flex:none;-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:1px;border-radius:5px;border:1px solid rgba(106,118,160,0.42);background:rgba(188,192,201,0.6);display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:var(--teal);border-color:var(--teal)}
.consent input:checked::after{content:"";width:10px;height:5px;border:2px solid var(--teal-ink);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.consent input:disabled{opacity:.5;cursor:not-allowed}
.consent input:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
#turnstile-container:empty{display:none}
.checkout-intent{border:1px solid rgba(106,118,160,0.45);background:rgba(106,118,160,0.07);border-radius:14px;padding:16px 18px;font-size:14px;color:var(--text)}
.checkout-intent > strong,.checkout-intent > span{display:block}
.checkout-intent > span{font-size:13.5px;color:var(--text-2);margin:4px 0 12px}
.checkout-intent .consent{margin:0}
.checkout-intent .linkbtn{margin-top:6px;font-size:13.5px}
.form-status{font-size:13.5px;line-height:1.6;color:var(--text-2);min-height:22px;overflow-wrap:anywhere}
.form-status.error{color:#2B2F37}
.form-status.success{background:rgba(106,118,160,0.1);border:1px solid rgba(106,118,160,0.42);color:var(--text);padding:12px 14px;border-radius:12px}
.submit .form-footnote{font-size:10.5px;line-height:1.6}
.submit .btn{flex:none}

/* Footer */
.foot-grid .fh{font-family:var(--mono);font-size:11px;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-bottom:18px}
.foot-grid a:hover{color:var(--text)}
.foot-grid ul a{display:inline-block;padding:2px 0}
.legal .mono{font-size:10.5px}
.legal a:hover{color:var(--text)}
.ad p{margin:0}

/* Tablet / phone deltas for production controls */
@media (max-width:1100px){
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:6px var(--gut) 22px;background:rgba(194,197,205,0.98);border-bottom:1px solid var(--line);font-size:18px;color:var(--text)}
  .nav nav.open{display:flex}
  .nav nav a{padding:15px 0;border-bottom:1px solid var(--line)}
  .nav-menu-only{display:block}
  .nav-cta{margin-left:auto}
  .menu{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
  .menu i{display:flex;flex-direction:column;gap:4px}
  .menu i b{display:block;width:14px;height:1px;background:var(--text)}
  .menu[aria-expanded="true"] i b:first-child{transform:translateY(2.5px) rotate(45deg)}
  .menu[aria-expanded="true"] i b:last-child{transform:translateY(-2.5px) rotate(-45deg)}
  .ind-route{justify-content:flex-start}
  .equip{grid-template-columns:1fr;gap:12px}
}
@media (max-width:640px){
  .logo img{height:22px}
  .tab.active::before{left:-20px}
  .board{grid-template-columns:1fr}
  .board .col{min-height:0}
  .board .placeholder{display:none}
  .metrics{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .metrics div{padding:10px}
  .metrics strong{font-size:22px}
  .metrics small{font-size:11px}
  .win-body .wt{font-size:22px;gap:8px}
  .sheet .wrow{grid-template-columns:1fr 1fr;row-gap:4px}
  .sheet .wrow > :last-child{grid-column:1/-1}
  .sheet .wrow.head > :last-child{display:none}
  .app-demo-interaction{flex-direction:column;align-items:stretch}
  .app-demo-interaction .btn{justify-content:space-between}
  .ind-chips .chip{height:auto;min-height:40px;padding:8px 14px}
  .equip{padding:24px 22px}
  .assist .h4{font-size:24px}
  .records dl div{grid-template-columns:1fr;gap:2px}
  .direct > a,.direct .contact-links > a,.direct-row{grid-template-columns:1fr auto;gap:4px}
  .direct-row .dot{grid-row:2;grid-column:2}
  .timeline > li{padding:0 0 40px 44px}
  .checkout-return{margin:-8px 0 28px}
  img.ph{position:absolute}
}
.fgrid .form-status{grid-column:1/-1}
.f label em.req::before{content:"* "}
.infra-grid .vlan{justify-content:center}
:root{color-scheme:light}
@media print{:root{color-scheme:light}}

/* ==========================================================================
   Guides, tools, privacy and assessment: the same Midnight canvas and type
   ========================================================================== */
.sub .nav{position:relative;background:rgba(194,197,205,0.92)}
.sub .ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 520px at 80% 0%,rgba(106,118,160,0.28),transparent 70%),radial-gradient(700px 400px at 0% 20%,rgba(217,219,224,0.7),transparent 70%)}
.sub main{display:block;position:relative;isolation:isolate}
.sub main::before{content:"";position:absolute;left:0;right:0;top:0;height:900px;z-index:-1;pointer-events:none;background:radial-gradient(900px 520px at 78% 30%,rgba(106,118,160,0.26),transparent 70%),radial-gradient(700px 400px at 6% 8%,rgba(217,219,224,0.7),transparent 70%)}
.section-shell{max-width:calc(var(--max) + var(--gut)*2);margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}
.sub main :is(p,li,dd) a:not(.button):not(.btn):not(.text-link):not(.link){color:var(--text);text-decoration:underline;text-decoration-color:rgba(80,90,124,0.6);text-underline-offset:4px}
.sub main :is(p,li,dd) a:not(.button):not(.btn):not(.text-link):not(.link):hover{text-decoration-color:var(--text)}
.sub main ul:not([class]),.sub main ol:not([class]){list-style:disc;padding-left:1.3em}
.sub main ol:not([class]){list-style:decimal}
.sub main ul:not([class]) li+li,.sub main ol:not([class]) li+li{margin-top:6px}
.sub em{font-style:italic}
.button{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px 0 24px;border-radius:999px;font-weight:550;font-size:16px;letter-spacing:-.005em;border:1px solid var(--line-2);color:var(--text);cursor:pointer;transition:.2s;font-family:var(--sans);text-decoration:none}
.button.primary{background:var(--teal);color:var(--teal-ink);border-color:transparent;box-shadow:0 0 0 1px rgba(18,22,32,0.096) inset,0 10px 40px -10px rgba(80,90,124,0.55)}
.button.primary:hover{background:#505A7C}
.button:focus-visible{border-radius:999px;outline-offset:4px}
.text-link{display:inline-flex;gap:10px;align-items:center;font-weight:550;color:var(--text);border-bottom:1px solid rgba(106,118,160,0.45);padding-bottom:3px}
.text-link:hover{border-bottom-color:var(--teal)}
.sub .eyebrow{margin-bottom:0}

/* Guide hero */
.guide-hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(36px,5vw,90px);align-items:center;padding-top:clamp(64px,8vw,124px);padding-bottom:clamp(64px,8vw,116px)}
.guide-hero h1,.privacy-page h1{font-size:clamp(46px,5.6vw,86px);line-height:.98;font-weight:600;letter-spacing:-.05em;margin:24px 0 28px}
.guide-hero h1 em,.guide-section h2 em,.privacy-page h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:1.08em;background:linear-gradient(100deg,#505A7C 10%,#505A7C 55%,var(--teal) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.guide-lead{font-size:clamp(18px,1.6vw,22px);line-height:1.55;letter-spacing:-.012em;color:var(--text);max-width:650px;margin:0 0 32px}
.guide-small{font-size:14px;line-height:1.7;color:var(--text-2);max-width:620px;margin:20px 0 0}
.guide-visual{margin:0;min-width:0;border-radius:20px;border:1px solid var(--line-2);padding:clamp(22px,3vw,40px);background:linear-gradient(180deg,rgba(18,22,32,0.032),rgba(18,22,32,0.01));box-shadow:0 60px 120px -50px rgba(179,183,193,0.9),0 0 110px -40px rgba(106,118,160,0.22);position:relative}
.guide-visual::before{content:"";position:absolute;top:-1px;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.8}
.guide-visual-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:28px}
.guide-flow{display:flex;align-items:stretch;gap:8px}
.guide-flow span{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:118px;padding:13px;border-radius:12px;border:1px solid var(--line-2);background:rgba(18,22,32,0.02);text-align:center;font-size:clamp(13px,1.2vw,16px);font-weight:600;letter-spacing:-.01em}
.guide-flow span:last-of-type{border-color:rgba(80,90,124,0.55);background:rgba(106,118,160,0.08);box-shadow:0 0 30px -8px rgba(106,118,160,0.35)}
.guide-flow b{align-self:center;font-family:var(--mono);font-weight:400;color:var(--teal);font-size:18px}
.guide-flow-outcome{display:flex;gap:15px;align-items:center;border-top:1px solid var(--line);margin-top:26px;padding-top:22px}
.guide-flow-outcome > span{font-size:26px;color:var(--teal);font-family:var(--mono)}
.guide-flow-outcome p{font-size:15px;line-height:1.6;color:var(--text-2)}
.guide-visual figcaption{border-top:1px solid var(--line);margin-top:26px;padding-top:16px;font-size:12.5px;line-height:1.6;color:var(--text-2)}
.guide-net-lane{display:grid;grid-template-columns:110px 1fr;gap:15px;align-items:center;border:1px solid var(--line-2);border-radius:12px;padding:18px 22px;margin:12px 0;background:rgba(18,22,32,0.02)}
.guide-visual-top + .guide-net-lane{border-color:rgba(80,90,124,0.55);background:rgba(106,118,160,0.08);box-shadow:0 0 30px -8px rgba(106,118,160,0.3)}
.guide-net-lane b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.guide-net-lane span{font-size:13.5px;line-height:1.5;color:var(--text-2)}

/* Guide sections */
.guide-section{padding-top:clamp(56px,7vw,100px);padding-bottom:clamp(56px,7vw,100px);border-top:1px solid var(--line)}
.guide-section h2{font-size:clamp(34px,4.4vw,60px);line-height:1.02;font-weight:600;letter-spacing:-.045em;max-width:940px;margin:18px 0 36px}
.guide-section h3{letter-spacing:-.025em}
.guide-grid,.guide-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.guide-grid article,.guide-two article{min-width:0;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px);background:linear-gradient(180deg,rgba(18,22,32,0.028),rgba(18,22,32,0.01))}
.guide-grid article > span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:28px}
.guide-grid h3,.guide-two h3{font-size:clamp(21px,2vw,27px);line-height:1.15;font-weight:600;letter-spacing:-.03em;margin:0 0 14px}
.guide-grid p,.guide-two p,.guide-wide{font-size:16px;line-height:1.75;color:var(--text-2)}
.guide-grid p + p,.guide-two p + p{margin-top:12px}
.guide-band{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.guide-band h2{font-size:clamp(32px,3.6vw,52px)}
.guide-wide{max-width:860px;margin:0 0 28px}
.guide-note{max-width:860px;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:0 14px 14px 0;background:rgba(18,22,32,0.02);padding:22px 26px;margin:26px 0 30px}
.guide-note strong{font-size:15px;color:var(--text)}
.guide-note p{font-size:14.5px;line-height:1.75;color:var(--text-2);margin-top:8px}
.guide-offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.52fr);gap:clamp(28px,5vw,72px);align-items:center;border:1px solid var(--line-2);border-radius:20px;padding:clamp(26px,4vw,48px);margin:34px 0 8px;background:linear-gradient(135deg,rgba(106,118,160,.1),rgba(18,22,32,.015));box-shadow:0 38px 90px -58px rgba(80,90,124,.7)}
.guide-offer h3{font-size:clamp(25px,3vw,38px);line-height:1.06;font-weight:600;letter-spacing:-.04em;margin:16px 0 14px}
.guide-offer > div > p:last-child{font-size:15.5px;line-height:1.72;color:var(--text-2);max-width:710px}
.guide-offer-action{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.guide-offer-price{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);color:var(--text)}
.guide-offer-price strong{font-family:var(--sans);font-size:clamp(42px,5vw,64px);line-height:1;font-weight:600;letter-spacing:-.055em}
.guide-offer-price span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2)}
.guide-offer-action .button{width:100%;justify-content:space-between}
.guide-offer-action .text-link{align-self:flex-start;font-size:13px;line-height:1.5}

/* Privacy and assessment terms */
.privacy-page{max-width:calc(1050px + var(--gut)*2);padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(64px,8vw,110px)}
.privacy-page h1{margin-top:22px;margin-bottom:16px}
.privacy-date{font-size:13px;color:var(--text-2);font-family:var(--mono);letter-spacing:.06em}
.privacy-date + .privacy-date{margin-top:4px}
.privacy-body{margin-top:34px;padding:clamp(24px,4vw,46px);border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(18,22,32,0.028),rgba(18,22,32,0.01));position:relative}
.privacy-body::before{content:"";position:absolute;top:-1px;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.8}
.privacy-body h2{font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.03em;font-weight:600;margin:36px 0 12px}
.privacy-body h2:first-child{margin-top:0}
.privacy-body p{font-size:16px;line-height:1.75;color:var(--text-2)}
.privacy-body p + p{margin-top:12px}
.privacy-body .button{margin-top:30px}

/* Shared subpage footer */
.sub .site-footer{padding-top:70px}
.sub .foot-grid{margin-bottom:10px}

@media (max-width:1100px){
  .guide-hero,.guide-band,.guide-offer{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .guide-grid,.guide-two{grid-template-columns:minmax(0,1fr)}
  .guide-flow{flex-direction:column}
  .guide-flow span{min-height:64px}
  .guide-flow b{transform:rotate(90deg)}
  .guide-net-lane{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 18px}
  .guide-hero .button{width:100%;justify-content:space-between}
  .privacy-body .button{width:100%;justify-content:space-between}
}
@media print{
  body,.sub main,.sub main::before{background:#fff!important;color:#000!important}
  .grain,.ambient,.sub main::before{display:none!important}
}

/* ===== 2026-10-06 Shade 1 (owner): lighter slate, readable greys ===== */
:root{--text-2:#343942;--text-3:#4D5462}
/* One consistent background from top to bottom (owner, 2026-10-06): no section paints its own tone. */
html,body{background-color:var(--canvas)}
section.equation,section.phone-feature,section.solutions,section.pocket-band,section.everyday-infra,section.support-options,section.tools,section.contact-stage,footer.site-footer{background:transparent!important}

/* ===== 2026-10-06 Pewter (owner option C): light cool-grey field that complements the dark-glass screenshots ===== */
:root{--teal-ink:#FFFFFF;--text-2:#363A45;--text-3:#4A4E5A;--teal:#424A66}
/* ===== 2026-10-06 Forge Glass gloss (owner: "something glossy") ===== */
/* Silver light field: soft fixed haze so the page reads as one surface top to bottom. */
html,body{background-color:var(--canvas)}
body{background-image:
  radial-gradient(1100px 650px at 12% -5%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
  radial-gradient(900px 700px at 92% 35%, rgba(255,255,255,.32), rgba(255,255,255,0) 62%),
  radial-gradient(1000px 800px at 30% 95%, rgba(255,255,255,.28), rgba(255,255,255,0) 65%),
  linear-gradient(160deg, rgba(255,255,255,.10), rgba(66,74,102,.06));
  background-attachment:fixed}
/* Clear glass panes with a top-lit rim and a diagonal sheen. */
.card,.assist,.callcard,.checklist,.demo,.viz,.wcard,.window,.guide-grid article,.guide-two article,.guide-note,.guide-visual,.privacy-body,.mobile-app,.readout,.checkout-intent,.checkout-return{
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.22) 44%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.22) 40%, rgba(255,255,255,.10)),
    rgba(226,230,237,.42)!important;
  border:1px solid rgba(255,255,255,.6)!important;border-top-color:rgba(255,255,255,.95)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(40,46,64,.06),0 22px 44px -22px rgba(40,46,64,.38),0 2px 8px -3px rgba(40,46,64,.14)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
/* Glossy controls. */
.btn-primary,.button.primary{background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 55%),var(--teal)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.22),0 12px 26px -10px rgba(66,74,102,.6)!important}
.btn-ghost,.pill{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.25))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -10px rgba(40,46,64,.4)}
.f input,.f select,.f textarea{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6))!important;border-color:rgba(66,74,102,.28)!important;box-shadow:inset 0 1px 2px rgba(40,46,64,.12)}
.site-header{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25))!important;-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:inset 0 -1px 0 rgba(255,255,255,.7),0 8px 24px -18px rgba(40,46,64,.5)}
@media (prefers-reduced-transparency: reduce){.card,.assist,.callcard,.checklist,.demo,.viz,.wcard,.window,.site-header{-webkit-backdrop-filter:none;backdrop-filter:none}}
.shot{border-radius:18px}
.shot img{box-shadow:0 0 0 1px rgba(255,255,255,.75),0 1px 0 0 rgba(255,255,255,.95) inset,0 30px 60px -28px rgba(30,34,48,.55),0 6px 16px -6px rgba(30,34,48,.25)}
/* Whole Collatavo advertisement is one click target (owner, 2026-10-07): stretch the single link over the strip. */
.partner-promo{position:relative;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.partner-promo .link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.partner-promo:hover{border-color:rgba(66,74,102,.35)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px -18px rgba(40,46,64,.5)!important;transform:translateY(-1px)}
.partner-promo:hover .link{text-decoration:underline;text-underline-offset:4px}
.partner-promo:focus-within{outline:2px solid var(--teal);outline-offset:3px}
@media (prefers-reduced-motion: reduce){.partner-promo{transition:none}.partner-promo:hover{transform:none}}

/* ==========================================================================
   2026-10-07 Highlight reel (owner plan): one intro, one "What we build"
   showcase, one "How we work" section. Motion is progressive: motion.js adds
   the reveal/tab classes; prefers-reduced-motion leaves everything static.
   Only transform/translate/scale/opacity animate.
   ========================================================================== */

/* ---- Glass for the new panes (same Forge Glass recipe as above) ---- */
.care-ops,.care-support,.bt-bar,.ticker,.explore .startpt{
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.22) 44%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.22) 40%, rgba(255,255,255,.10)),
    rgba(226,230,237,.42);
  border:1px solid rgba(255,255,255,.6);border-top-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(40,46,64,.06),0 22px 44px -22px rgba(40,46,64,.38),0 2px 8px -3px rgba(40,46,64,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}

/* ---- Glossy buttons: a light sweep on hover ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-10%;width:60%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.55) 50%,rgba(255,255,255,0));transform:translateX(-140%) skewX(-12deg);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.btn-primary::after{background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.38) 50%,rgba(255,255,255,0))}
@media (hover:hover){.btn:hover::after{transform:translateX(260%) skewX(-12deg)}}
[data-magnetic]{transition:translate .35s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .2s}
[data-tilt]{transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}

/* ---- Hero: living light field, glass sweep, staged intro, sample ticker ---- */
.hero-light{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-light i{position:absolute;border-radius:50%;will-change:transform}
.hero-light i:nth-child(1){width:780px;height:780px;left:-180px;top:-260px;background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,0));animation:ubDriftA 26s ease-in-out infinite alternate}
.hero-light i:nth-child(2){width:900px;height:900px;right:-240px;top:40px;background:radial-gradient(closest-side,rgba(106,118,160,.26),rgba(106,118,160,0));animation:ubDriftB 32s ease-in-out infinite alternate}
.hero-light i:nth-child(3){width:520px;height:520px;left:34%;bottom:-260px;background:radial-gradient(closest-side,rgba(255,255,255,.45),rgba(255,255,255,0));animation:ubDriftA 22s ease-in-out -8s infinite alternate-reverse}
@keyframes ubDriftA{from{transform:translate3d(0,0,0)}to{transform:translate3d(120px,70px,0)}}
@keyframes ubDriftB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-140px,60px,0) scale(1.08)}}
.hero-art{will-change:translate}
.hero-art img{animation:ubArtIn 2.2s cubic-bezier(.16,.8,.2,1) backwards,ubBreathe 18s ease-in-out 2.2s infinite alternate}
@keyframes ubArtIn{from{scale:1.07}to{scale:1}}
@keyframes ubBreathe{from{translate:0 0}to{translate:-16px -6px}}
.hero-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 76%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 76%,transparent 100%);mask-composite:intersect}
.hero-sheen::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:34%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.07) 35%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.07) 65%,rgba(255,255,255,0) 100%);
  transform:translateX(-120%) skewX(-14deg);animation:ubSheen 9s cubic-bezier(.45,.1,.3,1) 1.4s infinite}
@keyframes ubSheen{0%{transform:translateX(-120%) skewX(-14deg)}26%,100%{transform:translateX(330%) skewX(-14deg)}}
.hero-label,.hero h1 .h1-a,.hero h1 .h1-b,.hero .lede,.hero .sub,.hero .ctas,.hero .free,.hero .echo,.ticker,.hero .spec-cell{animation:ubUp 1s cubic-bezier(.2,.7,.2,1) backwards}
.hero h1 .h1-a{display:inline-block}
.hero-label{animation-delay:.05s}.hero h1 .h1-a{animation-delay:.14s}.hero h1 .h1-b{animation-delay:.3s;animation-duration:1.25s}
.hero .lede{animation-delay:.48s}.hero .sub{animation-delay:.56s}.hero .ctas{animation-delay:.66s}.hero .free{animation-delay:.78s}.hero .echo{animation-delay:.86s}
.ticker{animation-delay:1.25s}
.hero .spec-cell:nth-child(1){animation-delay:.9s}.hero .spec-cell:nth-child(2){animation-delay:.98s}.hero .spec-cell:nth-child(3){animation-delay:1.06s}.hero .spec-cell:nth-child(4){animation-delay:1.14s}
@keyframes ubUp{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
.ticker{position:absolute;right:56px;bottom:214px;z-index:2;display:flex;align-items:center;gap:14px;height:42px;padding:0 18px 0 14px;border-radius:999px;font-size:13.5px;color:var(--text);letter-spacing:-.005em}
.tk-live{display:flex;align-items:center;gap:8px}
.tk-live .mono{font-size:10px;letter-spacing:.16em}
.tk-pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.tk-pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--teal);opacity:0;animation:ubPulse 2.4s ease-out infinite}
@keyframes ubPulse{from{opacity:.7;transform:scale(.5)}to{opacity:0;transform:scale(1.8)}}
.tk-items{display:grid;width:300px;padding-left:14px;border-left:1px solid rgba(66,74,102,.22)}
.tk-item{grid-area:1/1;white-space:nowrap;opacity:0;translate:0 10px;transition:opacity .55s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
.tk-item.is-on{opacity:1;translate:0 0}
.tk-item.is-off{opacity:0;translate:0 -10px}
.tk-item b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--teal)}
.tk-item i{font-style:normal;color:var(--teal)}
.figcap{z-index:2}
a.spec-cell{transition:background .3s}
a.spec-cell:hover{background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0))}
a.spec-cell:hover .h-spec{color:var(--teal)}
a.spec-cell .n{transition:transform .3s}
a.spec-cell:hover .n{transform:translateX(3px)}

/* ---- Services: one compact intro band ---- */
.services{padding:80px 0 72px;border-bottom:1px solid var(--line)}
.svc-top{display:grid;grid-template-columns:1.5fr 1fr;gap:80px;align-items:end;margin-bottom:44px}
.svc-top h2{font-size:64px}
.svc-intro .intro{font-size:18px}
.svc-intro .mono{display:block;margin-top:18px;line-height:1.7}
.services .eq-term h3{font-size:38px}
.services .eq-term.res h3{font-size:44px}
.services .eq-term p{font-size:14.5px;margin-top:12px}
.services .eq-term .mono{margin-bottom:12px}
.services .eq-op{padding:18px 24px 0}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.way{padding:22px 26px 22px;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.way .tr{font-size:10.5px}
.way h3{font-size:22px;letter-spacing:-.03em;font-weight:600;line-height:1.15;margin-top:14px}
.way p{color:var(--text-2);font-size:14.5px;margin-top:8px;line-height:1.5}
.way .link{margin-top:18px;align-self:flex-start;font-size:14.5px}
.way:hover .link{border-bottom-color:var(--teal)}
.eq-cap{margin-top:18px;text-align:right;font-size:10.5px}

/* ---- What we build ---- */
.build{padding:96px 0 88px;overflow-x:clip}
.build-head{display:grid;grid-template-columns:1.6fr 1fr;gap:80px;align-items:end;margin-bottom:44px}
.bt-bar{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.9fr);gap:4px;padding:6px;border-radius:22px;margin-bottom:52px}
.bt-tab{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px;padding:14px 20px;border-radius:16px;text-align:left;cursor:pointer;color:var(--text-2);transition:color .35s}
.bt-tab .mono{font-size:10.5px;grid-row:1/3;align-self:center;transition:color .35s}
.bt-name{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.bt-sub{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);transition:color .35s}
.bt-tab:hover{color:var(--text)}
.bt-tab.is-on,.bt-tab.is-on .mono,.bt-tab.is-on .bt-sub{color:#fff}
.bt-tab.is-on .bt-sub{color:rgba(255,255,255,.72)}
.bt-tab.is-on{background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 55%),var(--teal);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 26px -12px rgba(66,74,102,.7)}
.bt-bar.has-ind .bt-tab.is-on{background:none;box-shadow:none}
.bt-ind{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:16px;opacity:0;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 55%),var(--teal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.2),0 14px 30px -12px rgba(66,74,102,.75);
  transition:transform .6s cubic-bezier(.3,1.25,.4,1),width .6s cubic-bezier(.3,1.25,.4,1)}
.bt-ind::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 65%);transform:translateX(-100%)}
.bt-ind.glint::after{animation:ubGlint .9s ease-out .25s}
@keyframes ubGlint{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.bt-bar.has-ind .bt-ind{opacity:1}
.bt-panel:not(.is-on){display:none}
.bt-panel{outline:none}
.bt-copy .eyebrow{margin-bottom:18px}
.bt-copy h3{font-size:50px;letter-spacing:-.042em;line-height:1.02;font-weight:600}
.bt-copy h3 .it{font-size:1.1em}
.dns-copy h3{font-size:50px!important}
.bt-copy .p{font-size:18.5px;line-height:1.45;color:var(--text);font-weight:500;letter-spacing:-.012em;margin-top:22px;max-width:470px}
.bt-copy .p2{font-size:16px;color:var(--text-2);margin-top:10px;max-width:470px}
.bt-links{display:flex;gap:16px 26px;align-items:center;flex-wrap:wrap;margin-top:28px}
.bt-copy .note{margin-top:18px;font-size:13.5px;color:var(--text-3);display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline}
.bt-copy .note .mono{font-size:10px}
.bt-copy .more{margin-top:20px;font-size:14.5px;color:var(--text-2)}
.bt-copy .more a{color:var(--text);border-bottom:1px solid rgba(106,118,160,.45);padding-bottom:1px}
.bt-copy .more a:hover{border-bottom-color:var(--teal)}
.bt-copy .fine{font-size:12.5px;margin-top:18px}
.bt-copy .industries{display:block;margin-top:26px}
.bt-copy .ind-chips{margin-top:12px;gap:8px}
.bt-copy .ind-chips .chip{height:34px;font-size:13px;padding:0 13px}
.bt-copy .industries .say{margin:14px 0 0;text-align:left;max-width:470px;font-size:14.5px}
.bt-copy .ind-route{justify-content:flex-start}
.bt-copy .poss-label{margin-top:20px;margin-bottom:6px}
.bt-copy .poss button{padding:8px 0;grid-template-columns:38px 1fr auto}
.bt-copy .poss button > span:nth-child(2){display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bt-copy .poss button strong{font-size:16.5px}
.bt-copy .poss button span{font-size:13px}
.bt-copy .apps-cta{margin-top:6px}
.bt-copy .apps-cta p{margin-top:12px;font-size:13px}
.bt-show{position:relative;min-width:0}
.bt-show .caps{margin-top:24px;gap:28px;padding-top:18px}
.bt-show .cap{font-size:14px}
.caps-dns{justify-content:flex-end}
.bt-show .shot::after{background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,0) 32%)}
.bt-show .shot::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.26) 50%,rgba(255,255,255,0));transform:translateX(-130%) skewX(-12deg)}
.bt-show-app .window{box-shadow:0 60px 110px -50px rgba(30,34,48,.55),0 0 0 1px rgba(255,255,255,.6),0 2px 8px -3px rgba(40,46,64,.14)!important}
.bt-show-app .win-body{padding:24px 26px 26px}
.bt-show-app .win-body .wt{font-size:26px}
.bt-show-app .app-disclosure{font-size:12.5px}

/* panel entrance: copy rises in sequence, frames glide in, glass glint sweeps */
.bt-panel.is-on.bt-play .bt-copy > *{animation:ubUp .8s cubic-bezier(.2,.7,.2,1) backwards}
.bt-panel.is-on.bt-play .bt-copy > :nth-child(2){animation-delay:.06s}.bt-panel.is-on.bt-play .bt-copy > :nth-child(3){animation-delay:.12s}
.bt-panel.is-on.bt-play .bt-copy > :nth-child(4){animation-delay:.18s}.bt-panel.is-on.bt-play .bt-copy > :nth-child(5){animation-delay:.24s}
.bt-panel.is-on.bt-play .bt-copy > :nth-child(6){animation-delay:.3s}.bt-panel.is-on.bt-play .bt-copy > :nth-child(n+7){animation-delay:.36s}
.bt-panel.is-on.bt-play .shot-main,.bt-panel.is-on.bt-play .bt-show-app .window{animation:ubFrameIn 1s cubic-bezier(.16,.8,.2,1) .08s backwards}
.bt-panel.is-on.bt-play .shot-side{animation:ubFrameUp 1.05s cubic-bezier(.16,.8,.2,1) .26s backwards}
.bt-panel.is-on.bt-play .bt-show .caps{animation:ubUp .8s cubic-bezier(.2,.7,.2,1) .45s backwards}
.bt-panel.is-on.bt-play .bt-show .shot::before{animation:ubGlass 1.5s cubic-bezier(.4,.1,.3,1) .55s backwards}
.bt-panel.is-on.bt-play .bt-show .shot-side::before{animation-delay:.8s}
@keyframes ubFrameIn{from{opacity:0;translate:56px 0}to{opacity:1;translate:0 0}}
@keyframes ubFrameUp{from{opacity:0;translate:0 48px}to{opacity:1;translate:0 0}}
@keyframes ubGlass{from{transform:translateX(-130%) skewX(-12deg)}to{transform:translateX(330%) skewX(-12deg)}}

@media (min-width:1101px){
  .bt-stage{position:relative}
  .bt-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;align-items:center;transition:opacity .45s ease,visibility 0s}
  .bt-panel:not(.is-on){display:grid;position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility 0s .12s}
  .bt-panel.is-on.bt-play{animation:ubFade .32s ease .04s backwards}
  .bt-panel-try{display:block!important}
  .bt-foot{grid-column:1/-1}
  .bt-show{perspective:1800px}
  .bt-show .stage{margin:0 clamp(-150px,calc((1280px - 100vw)/2),0px) 0 0;padding:0 0 70px 0;transform:rotateY(-7deg) rotateX(3deg);transform-style:preserve-3d;transform-origin:30% 50%}
  .bt-show .stage .shot-main{width:92%;margin-left:8%}
  .bt-show .stage .shot-side{left:-28px;right:auto;bottom:0;width:42%;transform:translateZ(60px)}
  .bt-show .stage-fw .shot-side{width:46%}
  .bt-show .stage-dns .shot-side{width:50%}
  .bt-show-app{align-self:start}
}

/* explorer: focus + team size + demos, compact */
.explore{margin:0}
.explore-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:28px}
.explore-head h3{font-size:36px;letter-spacing:-.035em;font-weight:600;line-height:1.05;margin-top:12px}
.explore-head > .mono{font-size:10.5px}
.explore .sol{grid-template-columns:300px minmax(0,1fr);gap:24px}
.explore .tab{font-size:20px;padding:15px 4px}
.explore .sizes{margin-top:22px}
.explore .startpt{padding:16px 18px;border-radius:14px}
.explore .startpt strong{font-size:19px}
.explore .panel{padding:28px;gap:28px}
.explore .panel h3{font-size:30px}
.explore .panel > div > p{font-size:15.5px}
.explore .ticks{margin-top:20px}
.explore .ticks li{padding:8px 0;font-size:14.5px}
.explore .details{margin-top:24px;padding:16px 0}

/* desk-to-doorstep band */
.hands{padding:0 0 96px}
.hands .mobile-app{margin-top:0;padding:40px 48px}
.hands .mobile-app h3{font-size:48px}
.hands .ma-foot{grid-template-columns:1fr 1.1fr;gap:56px;margin-top:34px;padding-top:24px}
.hands .own{font-size:14px;color:var(--text-2);max-width:520px}
.hands .ma-side{gap:16px}
.hands .costs{padding:12px 0}

/* ---- How we work and look after you ---- */
.care{padding:104px 0 96px}
.care-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;align-items:start}
.care .path-head{display:block;margin:0}
.care .path-head .intro{margin-top:24px;max-width:440px}
.care .timeline{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.care .timeline::before{display:none}
.care .timeline > li{display:grid;grid-template-columns:120px 1fr;column-gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.care .timeline > li::before{display:none}
.care .timeline .mono{grid-row:1/4;padding-top:6px}
.care .timeline h3{font-size:24px;margin-top:0}
.care .timeline p{font-size:15px;margin-top:4px}
.care .timeline .tags{margin-top:8px;font-size:10.5px}
.care h2{font-size:64px}
.care-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;margin-top:56px;align-items:stretch}
.care-ops,.care-support{border-radius:24px;padding:36px}
.care-ops .ops-copy h3{font-size:40px;margin-top:14px}
.care-ops .ops-copy p{max-width:none;font-size:16px}
.care-ops .stage-ops{margin:28px 0 0}
.care-ops .shot{border-radius:14px}
.ops-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:22px}
.care-ops .fine{font-size:12.5px;margin-top:14px}
.care-support h3{font-size:36px;letter-spacing:-.04em;line-height:1.02;font-weight:600;margin-top:14px}
.care-support .intro{font-size:16px;margin-top:14px;max-width:none}
.care-support .sup{grid-template-columns:1fr;gap:10px;margin-top:22px}
.care-support .sup .card.opt{padding:16px 18px 16px 20px;border-radius:16px;display:block}
.opt-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.opt-top .mono{font-size:10.5px}
.care-support .opt .btn{height:38px;font-size:13.5px;padding:0 14px 0 16px;margin:0}
.opt h4{font-size:21px;letter-spacing:-.03em;font-weight:600;margin-top:4px}
.care-support .sup .card > p{min-height:0;font-size:14.5px;color:var(--text-2);margin-top:2px}
.care-support .opt .ticks{display:block;margin:6px 0 0;border:0;line-height:1.5}
.care-support .opt .ticks li{display:inline;padding:0;border:0;font-size:12.5px;color:var(--text-3)}
.care-support .opt .ticks li + li::before{content:"·";display:inline;width:auto;height:auto;background:none;margin:0 7px;color:var(--teal)}
.care-support .opt .ticks li:first-child::before{content:none}
.care-support .sup-note{font-size:12.5px;margin-top:14px}
.access-more{margin-top:14px}
.access-more summary{font-size:14px;gap:12px}
.care .access{margin-top:16px;padding:0;border:0;grid-template-columns:1fr;gap:16px}
.care .access .h4{font-size:22px;margin-top:8px}
.care .access .three{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.care .access .three strong{font-size:14.5px}
.care .access .three p{font-size:13px}
.care .access .fine{font-size:12.5px}
.care-foot{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.care-ops .equip{margin:24px 0 0;grid-template-columns:1fr;gap:8px;padding:22px 24px;border-radius:16px}
.care-ops .equip p{font-size:13.5px}
.care-ops .equip strong{font-size:17px}
.care-next{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap}
.care-next .fine{margin-top:0}
.care-next .bt-links{margin-top:0}

/* ---- Free tools, tighter ---- */
.tools{padding:100px 0}
.tools-head{margin-bottom:44px}
.pricing,.faq-section{padding:96px 0}
.contact{padding:110px 0 110px}
.tool{min-height:0;padding:34px 36px}
.tool h3{font-size:34px;margin-top:18px}
.readout,.checklist{margin-top:24px}
.tool .foot{margin-top:24px;padding-top:20px}
.guides{margin-top:36px}
.guides > summary{list-style:none;cursor:default}
.guides > summary::-webkit-details-marker{display:none}
.gt-pm{display:none;font-family:var(--mono);color:var(--teal)}
.guide-links{grid-template-columns:repeat(6,minmax(0,1fr))}
.guide-links a{min-height:0;padding:18px 18px 16px}
.guide-links a strong{font-size:16px}
.guide-links a span{font-size:12.5px}
@media (min-width:641px){.guides > summary{pointer-events:none}}

/* ---- Reveal on scroll (classes added by motion.js only when motion is allowed) ---- */
.rv{opacity:0;translate:0 30px}
.rv.rv-in{opacity:1;translate:0 0;transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms),translate 1.1s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms)}

/* ---- Pocket crescendo: phones rise into place, a sheen crosses the headline ---- */
#pocket.pk-wait .ph{opacity:0;translate:0 150px}
#pocket.pk-wait .ph-m{translate:0 210px}
#pocket.pk-in .ph{opacity:1;translate:0 0;transition:opacity 1.2s ease,translate 1.7s cubic-bezier(.16,.8,.2,1)}
#pocket.pk-in .ph-l{transition-delay:.16s}
#pocket.pk-in .ph-r{transition-delay:.3s}
#pocket.pk-in .pocket-title .l1{background:linear-gradient(100deg,var(--text) 42%,#9AA6C8 50%,var(--text) 58%) 100% 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ubTitleSheen 2.2s cubic-bezier(.35,.1,.25,1) .5s both}
#pocket.pk-in .pocket-title .l2{background-image:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 58%),linear-gradient(100deg,#505A7C 10%,#505A7C 55%,var(--teal) 95%);background-size:300% 100%,100% 100%;background-repeat:no-repeat;background-position:100% 0,0 0;animation:ubTitleSheen2 2.2s cubic-bezier(.35,.1,.25,1) .85s both}
@keyframes ubTitleSheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes ubTitleSheen2{from{background-position:100% 0,0 0}to{background-position:0 0,0 0}}

/* ---- Tablet ---- */
@media (max-width:1100px){
  .svc-top,.build-head{grid-template-columns:1fr;gap:22px}
  .services .eq{grid-template-columns:1fr 1fr;gap:28px 24px}
  .services .eq-op{display:none}
  .bt-panel{display:grid;grid-template-columns:1fr;gap:44px}
  .explore .sol{grid-template-columns:1fr}
  .care-grid,.care-foot{grid-template-columns:1fr}
  .ticker{right:28px}
}

/* ---- Phone: lighter choreography, touch-first ---- */
@media (max-width:640px){
  .hero .spec-cell{animation-delay:.3s!important}
  .ticker{right:auto;left:20px;bottom:auto;top:calc(64px + 40px + (100vw + 40px) * 11 / 16 - 58px);height:38px;font-size:12.5px;gap:10px;padding:0 14px 0 12px;max-width:calc(100vw - 40px)}
  .tk-items{width:236px;padding-left:10px}
  .tk-item{overflow:hidden;text-overflow:ellipsis}
  .hero-light i:nth-child(2){width:520px;height:520px;right:-260px;top:120px}
  .services{padding:72px 0 64px}
  .svc-top{margin-bottom:36px}
  .svc-top h2{font-size:44px}
  .svc-intro .intro{font-size:16.5px}
  .services .eq{grid-template-columns:1fr 1fr;gap:22px 18px}
  .services .eq-term h3{font-size:28px}
  .services .eq-term.res h3{font-size:30px}
  .services .eq-term p{font-size:13.5px;margin-top:8px}
  .services .eq-term .mono{margin-bottom:8px;font-size:10px}
  .ways{grid-template-columns:1fr;gap:10px;margin-top:36px}
  .way{padding:18px 20px}
  .way h3{font-size:19px;margin-top:8px}
  .way p{font-size:14px}
  .way .link{margin-top:12px;font-size:14px}
  .eq-cap{text-align:left;margin-top:18px}
  .build{padding:84px 0 72px}
  .build-head{margin-bottom:28px}
  .bt-bar{grid-template-columns:1fr 1fr;border-radius:20px;margin-bottom:36px}
  .bt-tab{padding:11px 12px;column-gap:8px;border-radius:14px}
  .bt-tab .mono{display:none}
  .bt-name{font-size:15px}
  .bt-sub{font-size:9px;letter-spacing:.1em}
  .bt-panel{gap:30px}
  .bt-copy h3,.dns-copy h3{font-size:36px!important}
  .bt-copy .p{font-size:17px;margin-top:16px}
  .bt-copy .p2{font-size:15px}
  .bt-links{margin-top:22px}
  .bt-links .btn{width:100%;justify-content:space-between}
  .bt-show .stage{margin:0}
  .bt-show .caps{margin-top:18px}
  .explore{margin-top:72px;padding-top:32px}
  .explore-head{flex-direction:column;align-items:flex-start;gap:8px}
  .explore-head h3{font-size:28px}
  .explore .tab{font-size:18px;padding:13px 4px}
  .explore .panel{padding:22px 18px}
  .explore .panel h3{font-size:26px}
  .hands{padding:0 0 80px}
  .hands .mobile-app{padding:28px 20px}
  .hands .mobile-app h3{font-size:34px}
  .hands .ma-foot{grid-template-columns:1fr;gap:18px;margin-top:22px}
  .care{padding:84px 0}
  .care h2{font-size:40px}
  .care-grid{margin-top:20px;gap:14px}
  .care-ops,.care-support{padding:24px 20px;border-radius:20px}
  .care-ops .ops-copy h3,.care-support h3{font-size:30px}
  .care-ops .stage-ops{margin-top:20px}
  .ops-foot{flex-direction:column;align-items:flex-start;gap:10px}
  .opt-top{flex-direction:column;align-items:flex-start;gap:8px}
  .care .access .three{grid-template-columns:1fr}
  .care-foot .equip{padding:22px 20px}
  .care-next .bt-links .btn{width:100%;justify-content:space-between}
  .tools{padding:84px 0}
  .tool{padding:26px 20px}
  .tool h3{font-size:29px}
  .guides{margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .guides > summary{cursor:pointer;padding:18px 0;margin:0;display:grid;grid-template-columns:1fr auto;gap:6px}
  .guides > summary .mono:nth-child(2){grid-row:2}
  .gt-pm{display:block;grid-row:1/3;align-self:center}
  .guides[open] .gt-pm{transform:rotate(45deg)}
  .guides[open] > summary{margin-bottom:6px}
  .rv{translate:0 18px}
  #pocket.pk-wait .ph{translate:0 90px}
  #pocket.pk-wait .ph-m{translate:0 120px}
}

/* desk-to-doorstep row inside the Apps panel */
.bt-foot{margin-top:36px;padding:34px 40px}
.bt-foot h3{font-size:40px}
.bt-foot .ma-foot{grid-template-columns:1fr 1.1fr;gap:48px;margin-top:26px;padding-top:20px}
.bt-foot .own{font-size:13.5px;color:var(--text-2)}
.bt-foot .ma-side{gap:14px}
.bt-foot .costs{padding:12px 0}
.bt-tab-try .tk-pulse{display:inline-block;width:6px;height:6px;margin-left:6px;vertical-align:middle}
.bt-tab-try.is-on .tk-pulse{background:#fff}
.bt-tab-try.is-on .tk-pulse::after{border-color:#fff}
.bt-panel-try.is-on.bt-play .explore{animation:ubUp .8s cubic-bezier(.2,.7,.2,1) backwards}
/* footer: a little less air under the sign-off */
.home .signoff{margin-top:56px}
.home .wordmark{margin-top:56px}
.home .ad{margin-top:44px}
@media (max-width:1100px){
  .care-top{grid-template-columns:1fr;gap:36px}
  .guide-links{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bt-bar{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .bt-bar{grid-template-columns:1fr 1fr}
  .bt-tab-try{grid-column:1/-1}
  .bt-foot{margin-top:24px;padding:26px 20px}
  .bt-foot h3{font-size:32px}
  .bt-foot .ma-foot{grid-template-columns:1fr;gap:16px}
  .care .timeline > li{grid-template-columns:1fr;padding:18px 0}
  .care .timeline .mono{grid-row:auto;padding:0 0 6px}
  .care .timeline h3{font-size:22px}
  .guide-links{grid-template-columns:1fr}
  .home .wordmark{margin-top:44px}
}
@media (max-width:640px){
  /* phones: lighter, the decorative sample visuals and repeated detail step aside */
  .way p{display:none}
  .tool .readout,.tool .checklist{display:none}
  .tool .foot{margin-top:20px}
  .care .timeline .tags{display:none}
  .pricing,.faq-section{padding:80px 0}
  .contact{padding:84px 0}
  .assess .big{font-size:100px}
  .tier{padding:20px 0}
  .care-ops,.care-support{padding:22px 18px}
}
.care-ops{display:flex;flex-direction:column}
.care-ops .equip{margin-top:auto}
.care-ops .fine{margin-bottom:24px}
/* Guide sections that now hold the homepage's deeper detail (2026-10-07) */
.guide-section > .button{margin-top:30px}
.guide-grid article .viz{margin-top:22px;min-height:0}
.guide-grid article .text-link{margin-top:20px}
.guide-grid article.records{margin-top:0}
.guide-grid article.records dl{margin:4px 0 14px}
.guide-gateways article{display:flex;flex-direction:column}
.guide-gateways article .text-link{align-self:flex-start;margin-top:auto;padding-top:20px}
.guide-gateways .costs{margin-top:18px}
.guide-note > strong + :not(p){margin-top:0}
.guide-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.guide-grid-3 article.records{grid-column:1/-1}
.guide-grid-3 article.records dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.guide-gateways .viz{flex:none}
@media (max-width:900px){.guide-grid-3{grid-template-columns:minmax(0,1fr)}.guide-grid-3 article.records dl{grid-template-columns:minmax(0,1fr)}}
@keyframes ubFade{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   2026-10-07 Brand film band ("A day with UrbanBytez"): sits under the hero,
   Forge Glass frame, muted loop in view, glass sound pill. Owner-approved.
   ========================================================================== */
.film{position:relative;padding:112px 0 40px}
.film-head{display:grid;grid-template-columns:1fr minmax(0,420px);gap:12px 64px;align-items:end;margin-bottom:40px}
.film-label{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2,#3d4357)}
.film-label .rule{display:inline-block;width:40px;height:1px;background:currentColor;opacity:.6}
.film-head h2{margin:0;font-size:clamp(40px,5.2vw,72px);line-height:1;letter-spacing:-.045em}
.film-note{margin:0 0 6px;font-size:17px;line-height:1.55;color:var(--text-2,#3d4357)}
.film-frame{position:relative;border-radius:26px;padding:10px;
  background:linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.22) 44%,rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.22) 40%,rgba(255,255,255,.10)),rgba(226,230,237,.42);
  border:1px solid rgba(255,255,255,.6);border-top-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 80px -36px rgba(40,46,64,.55),0 2px 8px -3px rgba(40,46,64,.14)}
.film-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:18px;background:#14171f;cursor:pointer;object-fit:cover}
.film-sound{position:absolute;z-index:2;top:28px;right:28px;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 14px;border-radius:999px;cursor:pointer;
  color:#f4f6fa;background:rgba(18,21,30,.55);border:1px solid rgba(255,255,255,.28);border-top-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 10px 24px -12px rgba(0,0,0,.6);font:inherit;transition:background .2s,border-color .2s}
.film-sound b{font-size:13px;font-weight:600;letter-spacing:.01em}
.film-sound:hover{background:rgba(18,21,30,.72);border-color:rgba(255,255,255,.45)}
.film-sound:focus-visible{outline:2px solid #fff;outline-offset:3px}
.film-sound .wave{opacity:.35;transition:opacity .2s}
.film-sound.is-on .wave{opacity:1}
.film-sound[hidden]{display:none}
@media (max-width:900px){.film{padding:72px 0 24px}.film-head{grid-template-columns:1fr;margin-bottom:28px}}
@media (max-width:640px){.film-frame{padding:6px;border-radius:20px;margin:0 -4px}.film-frame video{border-radius:15px}.film-sound{top:16px;right:16px;height:38px;padding:0 14px 0 11px}.film-sound b{font-size:12px}}

/* ==========================================================================
   2026-10-07 Shorter page (owner): expanding tiles in balanced rows, clear
   "show" bars for collapsed lists, tighter film and pocket bands.
   ========================================================================== */
.film{padding:96px 0 24px}
.pocket-band{padding:118px 0 100px}
.xtiles{margin-top:48px}
.xt-row{display:grid;gap:20px}
.xt-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.xt-tile{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px 32px 26px;border-radius:24px;cursor:pointer;
  background:linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.22) 44%,rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.22) 40%,rgba(255,255,255,.10)),rgba(226,230,237,.42);
  border:1px solid rgba(255,255,255,.6);border-top-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(40,46,64,.06),0 22px 44px -22px rgba(40,46,64,.38),0 2px 8px -3px rgba(40,46,64,.14);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .25s}
.xt-tile .mono{font-size:10.5px}
.xt-h{margin:0;font-size:34px;line-height:1.04;letter-spacing:-.04em;font-weight:600}
.xt-h button{all:unset;cursor:pointer;color:inherit}
.xt-h button::after{content:"";position:absolute;inset:0;border-radius:inherit}
.xt-h button:focus-visible{outline:none}
.xt-tile:has(button:focus-visible){outline:2px solid var(--violet,#424A66);outline-offset:3px}
.xt-p{margin:0;font-size:15.5px;line-height:1.55;color:var(--text-2)}
.xt-cue{display:none}
.xt-js .xt-cue{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;margin-top:6px;height:38px;padding:0 8px 0 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,#5A6386,#424A66);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -10px rgba(40,46,64,.7)}
.xt-cue i,.xt-bar-btn i{position:relative;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.18);flex:none}
.xt-cue i::before,.xt-cue i::after,.xt-bar-btn i::before,.xt-bar-btn i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;margin:-.8px 0 0 -5px;background:currentColor;border-radius:2px;transition:transform .3s}
.xt-cue i::after,.xt-bar-btn i::after{transform:rotate(90deg)}
.xt-close{display:none}
.xt-tile.is-open .xt-open{display:none}.xt-tile.is-open .xt-close{display:inline}
.xt-tile.is-open .xt-cue i::after{transform:rotate(0)}
@media (hover:hover){.xt-tile:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 54px -24px rgba(40,46,64,.45)}}
.xt-tile.is-open{border-color:rgba(66,74,102,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(66,74,102,.25),0 26px 50px -24px rgba(40,46,64,.45)}
.xtiles.has-open .xt-tile:not(.is-open){opacity:.78}
.xt-panel{margin-top:20px;border-radius:24px;padding:32px}
.xt-js .xt-panel:not([hidden]){animation:xtIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes xtIn{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
.xt-panel[hidden]{display:none}
/* panel layouts */
.care-tiles .care-ops.xt-panel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:8px 40px;align-items:start}
.care-tiles .care-ops.xt-panel .stage-ops{grid-column:1;grid-row:1/6;margin:0}
.care-tiles .care-ops.xt-panel > :not(.stage-ops){grid-column:2}
.care-tiles .care-ops.xt-panel .ops-foot{margin-top:0}
.care-tiles .care-support.xt-panel .sup{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.care-tiles .care-support.xt-panel .sup .card.opt{display:flex;flex-direction:column;gap:6px}
.care-tiles .care-support.xt-panel .opt-top{flex-direction:column;align-items:flex-start}
/* collapsed-list bars: a clear button, not a hidden summary */
.xt-bar{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;padding:18px 18px 18px 24px;border-radius:18px;margin:0;
  background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px -16px rgba(40,46,64,.35);transition:background .2s}
.xt-bar::-webkit-details-marker{display:none}
.xt-bar:hover{background:rgba(255,255,255,.5)}
.xt-bar-label{display:flex;flex-direction:column;gap:4px}
.xt-bar-label b{font-size:18px;letter-spacing:-.02em;font-weight:600}
.xt-bar-label .mono{font-size:10.5px;letter-spacing:.08em}
.xt-bar-btn{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 8px 0 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:#fff;flex:none;
  background:linear-gradient(180deg,#5A6386,#424A66);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -10px rgba(40,46,64,.7)}
details[open] > .xt-bar .xt-open{display:none}
details[open] > .xt-bar .xt-close{display:inline}
details[open] > .xt-bar .xt-bar-btn i::after{transform:rotate(0)}
.guides{margin-top:40px}
.guides .gt-pm{display:none}
.guides[open] .guide-links{margin-top:18px}
.more-details{margin:4px 0}
.more-details .xt-bar-sm{padding:12px 12px 12px 18px;border-radius:14px}
.more-details .xt-bar-sm b{font-size:15.5px}
.more-details .more-grid{margin-top:14px}
@media (max-width:900px){
  .care-tiles .care-ops.xt-panel{grid-template-columns:1fr}
  .care-tiles .care-ops.xt-panel .stage-ops,.care-tiles .care-ops.xt-panel > :not(.stage-ops){grid-column:1;grid-row:auto}
  .care-tiles .care-support.xt-panel .sup{grid-template-columns:1fr}
}
@media (max-width:640px){
  .film{padding:64px 0 16px}
  .pocket-band{padding:80px 0 72px}
  .xt-row{gap:10px}
  .xt-tile{padding:18px 16px 16px;border-radius:18px;gap:8px}
  .xt-tile .mono{font-size:9px}
  .xt-h{font-size:21px}
  .xt-p{display:none}
  .xt-js .xt-cue{height:32px;font-size:12px;padding:0 6px 0 12px;gap:6px}
  .xt-cue i{width:20px;height:20px}
  .xt-panel{padding:18px;border-radius:18px;margin-top:12px}
  .xt-bar{padding:14px 12px 14px 16px;gap:12px}
  .xt-bar-label b{font-size:16px}
  .xt-bar-label .mono{display:none}
}
/* Shorter page, round 2: film beside its heading; pricing as one balanced row of four tiles. */
@media (min-width:1101px){
  .film .wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.62fr);gap:56px;align-items:center}
  .film-head{display:block;margin:0}
  .film-head h2{font-size:clamp(40px,4.2vw,60px);margin-top:18px}
  .film-note{margin-top:20px}
}
@media (min-width:641px){
.price-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.price-grid .tiers{display:contents}
.price-grid .tier{display:flex;flex-direction:column;gap:0;padding:26px 24px 24px;border:1px solid rgba(255,255,255,.6);border-top-color:rgba(255,255,255,.95);border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 45%,rgba(255,255,255,.08)),rgba(226,230,237,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 44px -24px rgba(40,46,64,.38)}
.price-grid .tier .n{padding:0}
.price-grid .tier h3{font-size:22px;margin-top:14px}
.price-grid .tier p{font-size:14.5px;max-width:none}
.price-grid .tier .amt{text-align:left;margin-top:auto;padding-top:22px}
.price-grid .tier .amt strong{font-size:34px}
.price-grid .tier .amt strong.sc{font-size:32px}
.price-grid .assess{padding:26px 24px 24px;border-radius:22px}
.price-grid .assess .big{font-size:84px;margin-top:18px}
.price-grid .assess .what{flex-wrap:wrap;gap:10px;margin-top:12px}
.price-grid .assess > p{font-size:14.5px;margin-top:12px}
.price-grid .assess .row{flex-direction:column;align-items:flex-start;gap:12px;padding-top:20px}
.price-grid .assess .btn{width:100%;justify-content:center}
}
.pocket-title{font-size:124px}
@media (min-width:641px) and (max-width:1100px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .pocket-title{font-size:66px}
}
/* Shorter page, round 3 (desktop): tighter vertical rhythm between sections; slimmer assessment tile. */
@media (min-width:1101px){
  .sec{padding:88px 0}
  .care{padding:84px 0 76px}
  .tools{padding:80px 0}
  .pricing,.faq-section{padding:76px 0}
  .contact{padding:88px 0}
  .pocket-band{padding:96px 0 80px}
  .film{padding:84px 0 16px}
  .services{padding:64px 0 60px}
}
.price-grid .assess .big{font-size:72px;margin-top:14px}
.xt-short{display:none}
@media (max-width:640px){.xt-long{display:none}.xt-short{display:inline}}
/* Film heading beside the video: the italic line may wrap, and is sized to its column (owner: the "g" was cut off). */
.film-head h2 .it{white-space:normal}
@media (min-width:1101px){.film-head h2{font-size:clamp(38px,3.5vw,56px)}}
@media (max-width:1240px){#approach-title .it{white-space:normal}}
/* Small tablets (641–860px): stack the two-column heads and tool cards; italic phrases may wrap. Fixes a sideways scroll. */
@media (min-width:641px) and (max-width:860px){
  .sol-head,.tools-head{grid-template-columns:1fr;gap:22px;margin-bottom:44px}
  .tools-grid{grid-template-columns:1fr;gap:14px}
  h2 .it{white-space:normal}
}
/* ==========================================================================
   Overnight refinement 2026-10-07 (owner brief: ~2 desktop screens shorter,
   nothing lost). FAQ sits beside the form; Android detail behind a bar;
   tighter headers and footer; balanced price tiles.
   ========================================================================== */
.contact-faq{margin-top:48px;padding-top:36px;border-top:1px solid var(--line)}
.cf-head .mono{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.cf-head h3{font-size:40px;line-height:1.02;letter-spacing:-.04em;font-weight:600;margin-top:12px}
.cf-head h3 .it{font-size:1.08em}
.cf-head .intro{margin-top:12px;font-size:16px;color:var(--text-2);max-width:460px}
.cf-head .link{display:inline-flex;margin-top:14px}
.contact-faq .qa{margin-top:22px}
.contact-faq .q{padding:16px 0}
.contact-faq .q summary{font-size:17.5px;gap:18px;align-items:center}
.contact-faq .q summary .pm{width:26px;height:26px}
.contact-faq .q p{font-size:15px;margin-top:10px}
.contact-faq .faq-foot{margin-top:16px;font-size:13.5px}
.android-more{margin-top:26px;text-align:left}
.android-more .android-cap{margin-top:14px}
.wordmark{font-size:92px;margin-top:64px}
@media (min-width:1101px){
  .sec-head{margin-bottom:48px}
  .foot-grid{gap:32px}
}
/* price tiles: the three implementation tiles show their price right under the description;
   the assessment tile is tightened so the row is balanced without empty middles. */
@media (min-width:641px){
  .price-grid .tier .amt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
  .price-grid .tier{justify-content:flex-start}
  .price-grid .assess .big{font-size:60px;margin-top:10px}
  .price-grid .assess .row{padding-top:16px;gap:10px}
  .price-grid .assess .checkout-row{margin-top:10px}
}
@media (max-width:640px){
  .contact-faq{margin-top:36px;padding-top:28px}
  .cf-head h3{font-size:32px}
  .contact-faq .q summary{font-size:16.5px}
  .wordmark{font-size:52px}
}
/* Pricing (desktop): the assessment is one wide tile; the three implementation tiles sit beneath as an equal row. */
@media (min-width:1101px){
  .price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .price-grid .assess{grid-column:1/-1;display:grid;grid-template-columns:220px minmax(0,1fr) 300px;grid-template-rows:auto auto 1fr;column-gap:44px;align-items:start;padding:28px 32px}
  .price-grid .assess > .mono{grid-column:1;grid-row:1}
  .price-grid .assess .big{grid-column:1;grid-row:2/4;margin-top:8px;font-size:76px}
  .price-grid .assess .what{grid-column:2;grid-row:1/3;margin-top:0;align-self:start}
  .price-grid .assess > p{grid-column:2;grid-row:3;margin-top:10px;max-width:520px}
  .price-grid .assess .row{grid-column:3;grid-row:1/3;padding-top:0;margin-top:0}
  .price-grid .assess .checkout-row{grid-column:3;grid-row:3;margin-top:12px}
  .price-grid .tier .amt{margin-top:auto}
}
/* Contact column: a little tighter now that the questions sit beside the form. */
@media (min-width:1101px){
  .contact-grid > div > h2{font-size:76px}
  .direct > a,.direct .contact-links > a,.direct-row{padding:15px 0}
  .direct strong{font-size:20px}
  .direct{margin-top:34px}
  .next{margin-top:24px}
  .cf-head h3{font-size:36px}
}
/* One heading scale on desktop: section titles 68px (services/care 64, pricing 60), contact 72. */
@media (min-width:1101px){
  h2{font-size:68px}
  .contact-grid > div > h2{font-size:72px}
  .tools-head,.sol-head{margin-bottom:48px}
}
/* Pricing tile fixes: description directly under the title; no stray rule under tier text. */
@media (min-width:1101px){
  .price-grid .assess .what{grid-row:1}
  .price-grid .assess > p{grid-row:2/4;margin-top:8px}
}
@media (min-width:641px){.price-grid .tier .amt{border-top:0;padding-top:18px}}
#turnstile-container{max-width:100%}
/* Desktop rhythm, final pass: a touch tighter everywhere so the page reads as one story. */
@media (min-width:1101px){
  .sec{padding:76px 0}
  .care{padding:76px 0 68px}
  .tools{padding:72px 0}
  .pricing{padding:68px 0}
  .contact{padding:76px 0 80px}
  .pocket-band{padding:84px 0 72px}
  .services{padding:56px 0 52px}
  .sec-head{margin-bottom:40px}
  .pocket-band .sec-head{margin-bottom:40px}
  .pocket-title{font-size:112px}
  .phones{margin-top:40px}
  .pocket-body{font-size:20px;max-width:760px;margin-left:auto;margin-right:auto}
  .care .timeline > li{padding:15px 0}
  .care .timeline .tags{margin-top:6px}
  .care-tiles,.xtiles{margin-top:36px}
  .readout,.checklist{margin-top:22px}
  .checklist li{padding:10px 0}
  .tool .foot{margin-top:22px;padding-top:18px}
  .tools-grid{gap:18px}
  .guides{margin-top:28px}
  .wordmark{margin-top:52px}
}
/* Contact: the "what happens next" and privacy notes sit at the foot of the form card. */
.form-notes{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.form-notes .next{margin-top:0;max-width:none}
.form-notes .next p{font-size:14px}
.form-notes .fine{margin-top:12px;font-size:12.5px}
/* Footer: same content, tighter stack. */
@media (min-width:1101px){
  .home .signoff{margin-top:44px}
  .signoff + .wordmark{margin-top:18px}
  .home .ad{margin-top:32px}
  .legal{margin-top:26px}
  .film{padding:72px 0 8px}
  .care-foot{margin-top:28px}
}
/* Hero service tiles on tablets: a balanced 2x2 grid instead of four cramped columns. */
@media (min-width:641px) and (max-width:1100px){
  .spec .wrap{grid-template-columns:1fr 1fr}
  .spec-cell:nth-child(3){padding-left:0;border-left:0}
  .spec-cell:nth-child(n+3){border-top:1px solid var(--line)}
}
/* Tablets (641–1100px): stack the hero like phones — illustration first, then the copy — so the
   artwork never sits under the headline (pre-existing overlap found in the overnight audit). */
@media (min-width:641px) and (max-width:1100px){
  .hero{min-height:0;padding-top:76px}
  .hero-grid{display:none}
  .hero-art{position:relative;top:auto;right:auto;width:auto;height:auto;margin:28px 0 0;aspect-ratio:16/9;z-index:0}
  .hero-art img{object-position:62% 50%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%)}
  .hero-copy{padding-top:36px;max-width:720px}
  .figcap{display:none}
  .ticker{right:auto;left:var(--gut);bottom:auto;top:calc(76px + 28px + 100vw * 9 / 16 - 64px)}
  .spec{position:relative;margin-top:40px}
}
/* Guide pages: the matching sample screens right under the opening (overnight polish 2026-10-07). */
.guide-shots{padding-top:8px;padding-bottom:28px}
.gs-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.gs-head .eyebrow{margin:0}
.gs-title{margin:0;font-size:26px;letter-spacing:-.03em;font-weight:600;color:var(--text)}
.gs-head .mono{margin-left:auto;font-size:10.5px;letter-spacing:.14em;color:var(--text-3)}
.gs-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start}
.gs-shot{margin:0;padding:8px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 45%,rgba(255,255,255,.08)),rgba(226,230,237,.42);
  border:1px solid rgba(255,255,255,.6);border-top-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 26px 50px -26px rgba(40,46,64,.45)}
.gs-shot img{display:block;width:100%;height:auto;border-radius:13px}
.gs-shot figcaption{padding:12px 8px 6px;font-size:13.5px;color:var(--text-2);line-height:1.45}
@media (max-width:900px){.gs-grid{grid-template-columns:1fr}.gs-head .mono{margin-left:0;width:100%}}
/* Guide FAQs as one balanced expanding list (softphone guide had five cards = one orphan). */
.sp-faq{border-top:1px solid var(--line)}
.sp-faq .q{padding:18px 0}
.sp-faq .q summary{font-size:18px;align-items:center}
.sp-faq .q p{font-size:15.5px}

/* ---- 2026-10-11: ForgeSentinel tab + Forge family tiles (owner-approved) ---- */
.bt-bar{grid-template-columns:repeat(6,auto)}
@media (min-width:1101px){.bt-tab .bt-name{white-space:nowrap}}
.bt-tab-new .tk-pulse{display:inline-block;width:6px;height:6px;margin-left:6px;vertical-align:middle}
.bt-tab-new.is-on .tk-pulse{background:#fff}
.bt-tab-new.is-on .tk-pulse::after{border-color:#fff}
.sentinel-ticks{margin-top:22px}
.sentinel-ticks li{font-size:14.5px;padding:11px 0;color:var(--text-2)}
.stage-sentinel{margin-top:40px;padding-left:22%;margin-right:-150px;padding-bottom:40px}
.stage-sentinel .shot-phone{left:0;bottom:-10px;width:21%;border-radius:22px;background:transparent;box-shadow:0 40px 70px -30px rgba(40,46,64,.55)}
.stage-sentinel .shot-phone::after{display:none}
.caps-sentinel{margin-top:30px}
.family{margin-top:120px}
.fam-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:34px}
.fam-head .eyebrow{grid-column:1/-1;margin:0}
.fam-title{margin:0;font-size:48px;line-height:1.02;letter-spacing:-.04em;font-weight:600}
.fam-head .intro{margin:0;max-width:520px}
.xt-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fam-tiles .xt-row + .xt-panel,.fam-tiles .xt-panel + .xt-row{margin-top:20px}
.fam-tile{padding:24px 24px 20px;gap:10px}
.fam-tile .xt-h{font-size:26px}
.fam-tile .xt-p{font-size:14.5px;line-height:1.5}
.fam-tile .xt-p em{font-style:normal;color:var(--text)}
.fam-panel{
  background:linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.22) 44%,rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.22) 40%,rgba(255,255,255,.10)),rgba(226,230,237,.42);
  border:1px solid rgba(255,255,255,.6);border-top-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(40,46,64,.06),0 22px 44px -22px rgba(40,46,64,.38),0 2px 8px -3px rgba(40,46,64,.14);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 48px;align-items:start}
.fam-panel .fam-lead{margin:0;font-size:18px;line-height:1.45;letter-spacing:-.01em;color:var(--text)}
.fam-panel .ticks{grid-column:2;grid-row:1/3;margin-top:0}
.fam-panel .ticks li{font-size:14.5px;padding:11px 0;color:var(--text-2)}
.fam-panel .link{align-self:end;font-size:15px;margin-top:14px}
@media (max-width:1100px){
  .bt-bar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xt-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage-sentinel{margin-right:0}
  .fam-title{font-size:40px}
}
@media (max-width:900px){
  .fam-head{grid-template-columns:1fr}
  .fam-panel{grid-template-columns:1fr}
  .fam-panel .ticks{grid-column:1;grid-row:auto;margin-top:14px}
}
@media (max-width:640px){
  .bt-bar{grid-template-columns:1fr 1fr}
  .bt-tab-try{grid-column:auto}
  .stage-sentinel{margin:24px 0 0;padding:0}
  .stage-sentinel .shot-main{--z:175%;--sx:-2%;--sy:-4%}
  .stage .shot-phone{position:absolute;left:auto;right:-6px;bottom:-28px;width:34%;aspect-ratio:auto;margin:0}
  .stage .shot-phone img{position:static;width:100%;transform:none}
  .stage-sentinel{padding-bottom:28px}
  .family{margin-top:72px}
  .fam-title{font-size:32px}
  .fam-tile{padding:16px 14px 14px}
  .fam-tile .xt-h{font-size:19px}
}
@media (min-width:1101px){
  .bt-show .stage-sentinel .shot-main{width:88%;margin-left:12%}
  .bt-show .stage-sentinel .shot-side.shot-phone{left:-18px;bottom:-24px;width:24%;transform:translateZ(70px)}
}
@media (min-width:641px) and (max-width:1100px){
  .stage-sentinel{padding-left:0;margin-right:0;padding-bottom:30px}
  .stage-sentinel .shot-main{width:80%;margin-left:20%}
  .stage-sentinel .shot-phone{left:0;bottom:-16px;width:24%}
}

.fam-shot{grid-column:1/-1;margin:14px 0 0;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(179,183,193,.55),0 30px 60px -30px rgba(40,46,64,.5)}
.fam-shot img{display:block;width:100%;height:auto}

/* 404 page: unknown paths return a real 404 (Pages serves /404.html) instead of the homepage. */
.notfound-page{min-height:52vh;padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(72px,10vw,140px)}
.notfound-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
@media (max-width:560px){.notfound-links .btn{width:100%;justify-content:space-between}}

/* trademark note + pocket demo link (2026-10-15) */
.legal .tm{flex-basis:100%;order:9;font-size:11.5px;color:var(--muted)}
.pocket-cta{margin-top:18px}

/* DNS tab slate captures (2026-10-16): phone crop for the side image */
@media (max-width:640px){.stage-dns .shot-side{aspect-ratio:3/2;--z:120%;--sx:-1%;--sy:0%}}
/* 2026-10-20 hero offer label strip + case study (flat, hairlines, small radii) */
.spec .spec-k{display:block;padding-top:14px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.case .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-2);list-style:none;padding:0;margin:0}
.case .case-grid li{padding:26px 28px 6px 0}
.case .case-grid li + li{padding-left:28px;border-left:1px solid var(--line-2)}
.case .case-grid .mono{font-size:11px;letter-spacing:.1em;color:var(--teal)}
.case .case-grid h3{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin-top:12px}
.case .case-grid p{font-size:14.5px;line-height:1.55;color:var(--text-2);margin-top:8px;max-width:34ch}
.case .case-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line-2)}
@media (max-width:860px){
  .case .case-grid{grid-template-columns:1fr}
  .case .case-grid li,.case .case-grid li + li{padding:22px 0 4px;border-left:0}
  .case .case-grid li + li{border-top:1px solid var(--line-2)}
  .case .case-grid p{max-width:none}
}
.case .nw{white-space:nowrap}
@media (max-width:640px){.spec .wrap.spec-k{padding:14px 20px 0}}
/* 2026-10-20 care plans (owner approval): flat, hairlines, accent sparingly. The "Also from" strip follows them,
   outside the hero, so the hero loses the strip's height and its ticker/caption sit that much lower. */
@media (min-width:1101px){.hero{min-height:790px}.hero .ticker{bottom:104px}.hero .figcap{bottom:60px}}
.spec.spec-flow{position:relative;left:auto;right:auto;bottom:auto}
.care-plans{padding:84px 0 72px}
.care-plans .sec-head{margin-bottom:26px}
.home #websites{background:linear-gradient(180deg,#B4BAC5,#ABB2BE);border-top:1px solid rgba(80,90,124,.16);border-bottom:1px solid rgba(80,90,124,.16)}
.cp-title{font-size:44px;line-height:1.04;letter-spacing:-.04em;font-weight:600}
.cp-title .it{white-space:nowrap}
.cp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:36px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.cp-plan,.cp-out{display:flex;flex-direction:column;gap:18px;padding:26px 28px 28px 0}
.cp-plan + .cp-plan,.cp-out{padding-left:28px;border-left:1px solid var(--line-2)}
.cp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cp-top h3{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.cp-price{font-size:40px;font-weight:600;letter-spacing:-.045em;line-height:1;white-space:nowrap;text-align:right}
.cp-price sup{font-size:.42em;vertical-align:top;position:relative;top:.18em;margin-right:2px;letter-spacing:0}
.cp-price .mono{display:block;margin-top:7px;font-size:10px;letter-spacing:.1em}
.cp-list{list-style:none;padding:0;margin:0;flex:1}
.cp-list li{position:relative;padding:9px 0 9px 18px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45;color:var(--text-2)}
.cp-list li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--teal)}
.cp-no li{color:var(--text-3)}
.cp-no li::before{background:var(--text-3)}
.cp-out h3.mono{margin:0;font-size:10.5px;letter-spacing:.12em}
.cp-fit{margin:0;font-size:10px;letter-spacing:.1em;color:var(--teal);white-space:normal;line-height:1.6}
.cp-buy{align-self:flex-start}
.cp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;margin-top:20px}
.cp-consent{margin:0;font-size:14px}
.cp-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:0;font-size:10.5px;letter-spacing:.1em;white-space:normal}
.cp-links a{color:var(--text);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.cp-status{flex-basis:100%;margin:0}
.cp-status:empty{display:none}
.cp-status[data-tone="error"]{color:#7A2E2E}
@media (max-width:1100px){
  .cp-grid{grid-template-columns:1fr 1fr}
  .cp-out{grid-column:1/-1;padding-left:0;border-left:0;border-top:1px solid var(--line-2)}
}
@media (max-width:640px){
  .care-plans{padding:56px 0 44px}
  .cp-title{font-size:32px}
  .cp-grid{grid-template-columns:1fr}
  .cp-plan,.cp-plan + .cp-plan,.cp-out{padding:22px 0 24px;border-left:0}
  .cp-plan + .cp-plan,.cp-out{border-top:1px solid var(--line-2)}
  .cp-buy{align-self:stretch;justify-content:space-between}
}
/* Terms page: care plan terms block (2026-10-20) */
.privacy-body + .privacy-body{margin-top:28px}
.privacy-body ul{list-style:disc;margin:4px 0 0;padding-left:22px}
.privacy-body li{font-size:16px;line-height:1.7;color:var(--text-2)}
.care-terms{scroll-margin-top:96px}
.care-plans{scroll-margin-top:72px}
/* 2026-10-20 Website Care page (/websites): same flat, hairline system as the care plans; setup + two plans. */
.web-page .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.web-hero{padding-top:clamp(64px,8vw,118px);padding-bottom:clamp(36px,4vw,56px)}
.web-hero h1{font-size:clamp(44px,5.6vw,84px);line-height:.98;font-weight:600;letter-spacing:-.05em;margin:24px 0 40px;max-width:15ch}
.web-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:1.06em;background:linear-gradient(100deg,#505A7C 10%,#505A7C 55%,var(--teal) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.web-key{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.web-key > div{padding:20px 24px 22px 0;display:flex;flex-direction:column;gap:10px}
.web-key > div + div{padding-left:24px;border-left:1px solid var(--line-2)}
.web-key dt{font-size:10.5px;letter-spacing:.12em}
.web-key dd{font-size:40px;font-weight:600;letter-spacing:-.045em;line-height:1}
.web-key dd sup{font-size:.42em;vertical-align:top;position:relative;top:.18em;margin-right:2px;letter-spacing:0}
.web-key dd .mono{display:block;margin-top:8px;font-size:10px;letter-spacing:.1em;line-height:1.5;white-space:normal}
.web-key .web-key-text{font-size:22px;letter-spacing:-.025em;line-height:1.15;padding-top:9px}
.web-launch-note{max-width:820px;margin:22px 0 0;color:var(--text-2);font-size:15px;line-height:1.65}
.web-plans{padding-top:56px}
.web-plans .cp-plan + .cp-plan{padding-left:28px}
.web-setup .cp-list li:last-child{color:var(--text)}
.web-plans .cp-due{margin:22px 0 14px;color:var(--text-2);font-size:12px;line-height:1.55}
.web-facts{padding-bottom:24px}
.wf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.wf-col{padding:24px 24px 26px 0;display:flex;flex-direction:column;gap:14px}
.wf-col + .wf-col{padding-left:24px;border-left:1px solid var(--line-2)}
.wf-col h3.mono{font-size:10.5px;letter-spacing:.12em;margin:0}
.web-work{margin:clamp(32px,5vw,62px) 0 0;border:1px solid var(--line-2);background:rgba(255,255,255,.24);overflow:hidden}
.web-work>a{display:block;border-bottom:1px solid var(--line-2);background:#f2f2f2}
.web-work img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top}
.web-work figcaption{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 20px}
.web-work figcaption .mono{font-size:10.5px;letter-spacing:.12em;color:var(--teal)}
.web-work figcaption a{font-weight:600;color:var(--text)}
.web-work figcaption>span:last-child{color:var(--text-2);font-size:14px;text-align:right}
.web-work-shots{display:grid;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid var(--line-2)}
.web-work-shots a{display:block;background:#f2f2f2;height:clamp(240px,30vw,380px);overflow:hidden}
.web-work-shots a+a{border-left:1px solid var(--line-2)}
.web-work-shots img{display:block;height:100%;width:auto;max-width:100%;aspect-ratio:auto}
.web-work-shots a:first-child img{width:100%;object-fit:cover;object-position:left top}
.web-work-notes{list-style:none;margin:0;padding:0 20px 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 22px;border-top:1px solid var(--line-2)}
.web-work-notes li{padding-top:16px;color:var(--text-2);font-size:14px;line-height:1.5}
.web-quote{margin:18px 0 0;padding:22px 20px;border:1px solid var(--line-2);background:rgba(255,255,255,.24)}
.web-quote blockquote{margin:0;max-width:78ch}
.web-quote blockquote p{margin:0;font-size:17px;line-height:1.55;color:var(--text)}
.web-quote figcaption{margin-top:14px;font-size:10.5px;letter-spacing:.12em;color:var(--teal)}
.web-addon{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:22px 0 0}
.web-addon .mono{font-size:10.5px;letter-spacing:.12em;color:var(--teal)}
.web-addon a{font-size:15px;color:var(--text);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.web-ask{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(40px,5vw,64px);scroll-margin-top:24px}
.web-ask-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,90px);align-items:start}
.web-ask h2{font-size:clamp(40px,4.6vw,64px);line-height:1;font-weight:600;letter-spacing:-.045em;margin-top:18px}
.web-ask h2 em{font-family:var(--serif);font-style:italic;font-weight:400;background:linear-gradient(100deg,#505A7C 10%,#505A7C 55%,var(--teal) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.web-ask .direct{margin-top:36px}
.web-terms{scroll-margin-top:24px;margin-bottom:clamp(56px,7vw,96px)}
.web-terms h2:first-child{margin-bottom:6px}
@media (max-width:1100px){
  .web-plans .cp-grid{grid-template-columns:1fr 1fr}
  .web-plans .web-setup{grid-column:1/-1;padding-right:0}
  .web-plans .web-setup + .cp-plan{padding-left:0;border-left:0;border-top:1px solid var(--line-2)}
  .web-plans .web-setup + .cp-plan + .cp-plan{border-top:1px solid var(--line-2)}
  .web-key{grid-template-columns:1fr 1fr}
  .web-key > div:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--line-2)}
  .web-key > div:nth-child(4){border-top:1px solid var(--line-2)}
  .wf-grid{grid-template-columns:1fr 1fr}
  .wf-col:nth-child(3){padding-left:0;border-left:0}
  .wf-col:nth-child(n+3){border-top:1px solid var(--line-2)}
  .web-ask-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .web-hero h1{margin-bottom:28px}
  .web-key dd{font-size:32px}
  .web-key .web-key-text{font-size:18px}
  .web-key > div,.web-key > div + div{padding:16px 14px 18px 0}
  .web-key > div:nth-child(2n){padding-left:14px}
  .web-plans .cp-grid{grid-template-columns:1fr}
  .web-plans .cp-plan,.web-plans .cp-plan + .cp-plan{padding:22px 0 24px;border-left:0}
  .web-plans .cp-plan + .cp-plan{border-top:1px solid var(--line-2)}
  .wf-grid{grid-template-columns:1fr}
  .wf-col,.wf-col + .wf-col{padding:20px 0 22px;border-left:0}
  .wf-col + .wf-col{border-top:1px solid var(--line-2)}
  .web-work figcaption{grid-template-columns:1fr;gap:8px}
  .web-work-notes{grid-template-columns:1fr}
  .web-work-shots{grid-template-columns:minmax(0,1fr) auto}
  .web-work-shots a{height:200px}
  .web-work figcaption>span:last-child{text-align:left}
  .web-ask .form{padding:24px 18px}
  .web-ask .fgrid{grid-template-columns:1fr}
}