@font-face{font-family:AtlasDisplay;src:url('/assets/Anton-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root { --paper:#f7f7f4; --ink:#20211f; --muted:#595c55; --line:#d4d7ce; --red:#ef4934; --red-ink:#b32c1d; --green:#246349; --font:Arial,'Helvetica Neue',sans-serif; --display:Impact,AtlasDisplay,'Arial Black',sans-serif; --ease:cubic-bezier(.22,1,.36,1); --reveal:320ms; }
* { box-sizing:border-box } html { scroll-behavior:smooth; scroll-padding-top:32px } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 var(--font) }
button,input,textarea { font:inherit } button,a { -webkit-tap-highlight-color:transparent } button { color:inherit; cursor:pointer; border-radius:0 } a { color:inherit; text-decoration:none } p,h1,h2,h3 { margin:0 }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--red-ink); outline-offset:5px }
[hidden] { display:none!important } .wrap { width:min(1240px,calc(100% - 112px)); margin:auto } .skip { position:fixed; top:-80px; left:16px; padding:12px; background:var(--paper); z-index:20 } .skip:focus { top:10px }
.header { display:flex; align-items:center; justify-content:space-between; min-height:116px; gap:24px } .brand { display:flex; align-items:center; gap:12px; line-height:1.15; font-family:'Avenir Next',Avenir,'Segoe UI',sans-serif } .mark { width:36px; height:40px; flex:none } .brand strong { font-size:23px; letter-spacing:-1px; font-weight:700 } .brand small { display:block; font-size:13px; letter-spacing:.6px; margin-top:5px; color:var(--muted) }
nav { display:flex; align-items:center; gap:32px; font-size:15px; font-weight:600 } nav>a:hover { text-decoration:underline; text-underline-offset:5px } .nav-cta { background:transparent; border:1px solid var(--ink); font-weight:700; font-size:14px; padding:13px 19px; min-height:48px } .nav-cta:hover { background:var(--ink); color:var(--paper) }
.hero { display:grid; grid-template-columns:1.03fr 1fr; gap:86px; align-items:center; padding:82px 0 112px } h1 { font:400 clamp(67px,5.3vw,80px)/1.02 var(--display); text-transform:uppercase; letter-spacing:.15px; max-width:590px } .hero-text { font-size:21px; line-height:1.65; color:var(--muted); margin-top:29px; max-width:490px }
.actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:35px } .primary { display:inline-flex; justify-content:space-between; align-items:center; gap:22px; min-height:56px; padding:17px 22px; background:var(--red); border:0; color:#191a17; font-size:15px; font-weight:700 } .primary:hover { background:#e63b27 } .primary:active { transform:translateY(1px) } .primary .arrow { font-size:23px; line-height:1; transition:transform 180ms var(--ease) } .primary:hover .arrow { transform:translateX(3px) }
.price-note { font-size:15px; line-height:1.6; color:var(--muted) } .price-note strong { display:block; font-size:19px; letter-spacing:-.5px; color:var(--ink); font-weight:800 }
.demo { min-width:0 } .demo-head { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:16px; font-weight:700; margin-bottom:22px } .example-label { font-size:14px; font-weight:400; color:var(--muted) }
.tabs { display:grid; grid-template-columns:repeat(4,1fr); position:relative; border-bottom:1px solid #c5c8bc; margin-bottom:30px } .tab-tile { height:3px; background:var(--red); position:absolute; bottom:-1px; left:0; pointer-events:none; transition:transform 220ms var(--ease),width 220ms } .tabs button { position:relative; background:transparent; border:0; padding:15px 3px; font-size:14px; font-weight:700; min-height:48px; color:var(--muted) } .tabs button[aria-selected=true] { color:var(--red-ink) }
.report h2 { font:700 25px/1.3 var(--font); letter-spacing:-.6px; max-width:460px; min-height:65px } .diagram { --flow:#bd3424; --gate-bg:#f5e3df; --target-bg:#f5e3df; position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; padding:32px 0 22px; isolation:isolate; min-height:196px }
.diagram[data-fixed=true] { --flow:var(--green); --gate-bg:#e0e9df; --target-bg:#eef0e9 } .diagram:before,.diagram:after { content:''; position:absolute; top:73px; left:18%; right:18%; height:2px; z-index:-1; background:#c7c9bf } .diagram:after { background:var(--flow); transition:right 280ms var(--ease) } .diagram[data-fixed=true]:after { right:50% }
.diagram-node { min-width:0; display:flex; align-items:center; flex-direction:column; text-align:center; padding:0 4px; position:relative } .icon-well { display:grid; place-items:center; width:82px; height:82px; border:1px solid #aeb3a6; border-radius:4px; background:var(--paper); position:relative; transition:background 200ms,border-color 200ms } .icon-well svg { width:38px; height:38px; stroke-width:1.6 } .source-node .icon-well { border-radius:50%; width:76px; height:76px; margin:3px } .gate-node .icon-well { background:var(--gate-bg); border-color:transparent; color:var(--flow) } .target-node .icon-well { background:var(--target-bg); border-color:transparent; color:var(--flow) } .diagram[data-fixed=true] .target-node .icon-well { color:#525b4e }
.diagram-label { font-size:15px; line-height:1.4; max-width:142px; margin-top:17px; font-weight:700 } .badge { position:absolute; right:-6px; top:-6px; display:grid; place-items:center; width:24px; height:24px; background:var(--flow); color:white; border-radius:50%; font-size:16px; font-weight:700; border:3px solid var(--paper) }
.packet { position:absolute; left:20%; top:70px; width:18px; height:7px; background:var(--flow); border-radius:1px; z-index:1; pointer-events:none; opacity:0 } .diagram.play .packet { animation:travel 900ms ease-in-out 1 } .diagram[data-fixed=true].play .packet { animation:stop 650ms ease-out 1 }
@keyframes travel { 0%{left:20%;opacity:0} 15%,85%{opacity:1} 100%{left:77%;opacity:0} } @keyframes stop { 0%{left:20%;opacity:0} 20%{opacity:1} 80%{left:48%;opacity:1} 100%{left:48%;opacity:0} }
.state-result { font-size:17px; font-weight:700; margin:12px 0 0; color:var(--red-ink); line-height:1.5; min-height:51px } .report[data-fixed=true] .state-result { color:var(--green) }
.example-controls { border-top:1px solid var(--line); padding-top:20px; margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:18px }
/* Bencho JellyTabs: small independent x/y springs, scaled down for a security comparison. */
.comparison { display:flex; align-items:center; gap:6px; padding:4px } .comparison button { flex:none; border:0; padding:0; background:transparent; transform-origin:center; font-size:14px; font-weight:700 } .comparison-face { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 14px; border:1px solid #8f9488; border-radius:4px; background:transparent; transition:background 180ms,color 180ms; white-space:nowrap } .comparison button[aria-checked=true] .comparison-face { background:var(--ink); border-color:var(--ink); color:white } .comparison button[data-fixed=true][aria-checked=true] .comparison-face { background:var(--green); border-color:var(--green) } .comparison button:focus-visible { outline-offset:3px } .comparison button:hover .comparison-face { border-color:var(--ink) }
.replay { border:0; background:transparent; padding:10px 0; min-height:44px; color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:4px } .fix-note { font-size:15px; line-height:1.6; color:var(--muted); margin-top:17px; min-height:48px }
.why-now { padding:54px 0 68px; display:grid; grid-template-columns:.85fr 1.4fr; gap:100px; border-top:1px solid var(--line) } .why-now h2 { font:400 43px/1.07 var(--display); text-transform:uppercase; max-width:340px } .why-now p { font-size:18px; line-height:1.75; color:var(--muted); max-width:700px } .why-now .evidence-links { font-size:14px; margin-top:18px } .evidence-links a { text-decoration:underline; text-underline-offset:4px; color:var(--ink) }
.dark-band { background:#22231f; color:var(--paper); padding:80px 0; margin-top:25px } .scope { display:grid; grid-template-columns:.85fr 1.4fr; gap:100px } .risk-intro h2 { font:400 53px/1.06 var(--display); text-transform:uppercase; max-width:370px } .risk-intro>p { font-size:18px; color:#c5c9bf; max-width:330px; margin-top:25px }
.risk-list { margin:0 } .risk-row { display:grid; grid-template-columns:155px 1fr; gap:28px; padding:23px 0; border-top:1px solid #54574e } .risk-row:first-child { padding-top:0; border-top:0 } .risk-row:last-child { padding-bottom:0 } .risk-row dt { font-size:18px; font-weight:700; line-height:1.5 } .risk-row dd { font-size:17px; color:#c5c9bf; margin:0; line-height:1.6 }
.offer { padding:104px 0 96px; display:grid; grid-template-columns:.85fr 1.4fr; gap:100px; border-bottom:1px solid var(--line) } .offer h2 { font:400 49px/1.08 var(--display); text-transform:uppercase; max-width:360px } .offer-label { font-size:15px; color:var(--muted); margin-bottom:18px } .amount { font:400 91px/1.15 var(--display); margin-top:23px; letter-spacing:-1px } .amount small { font:700 14px var(--font); letter-spacing:0; margin-left:10px } .offer-sub { font-weight:700; font-size:20px; line-height:1.4; margin-top:12px; color:var(--red-ink) } .offer-terms { font-size:17px; color:var(--muted); max-width:350px; margin-top:18px } .offer .primary { margin-top:28px } .offer>div { min-width:0 }
.coverage { margin:0 } .coverage-row { padding:23px 0; border-bottom:1px solid var(--line) } .coverage-row:first-child { padding-top:0 } .coverage dt { font-size:21px; font-weight:700; letter-spacing:-.4px; margin-bottom:9px } .coverage dd { margin:0; color:var(--muted); font-size:17px; line-height:1.7 } .reviewer { margin-top:27px; font-size:17px; color:var(--muted); line-height:1.7 } .reviewer strong { color:var(--ink); font-weight:700 }
.faq { display:grid; grid-template-columns:.85fr 1.4fr; gap:100px; padding:84px 0 100px } .faq h2 { font:400 46px/1.08 var(--display); text-transform:uppercase; max-width:350px }
/* Bencho FaqAccordion: rows open to their content height; no word-by-word delay. */
.fqa-item { border-bottom:1px solid var(--line) } .fqa-q { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:22px 0; min-height:64px; border:0; background:none; font-size:18px; font-weight:600; text-align:left; line-height:1.5 } .fqa-mark { flex:none; width:18px; height:18px; transition:rotate var(--reveal) var(--ease); color:var(--muted) } .fqa-item[data-open] .fqa-mark { rotate:135deg }
.fqa-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--reveal) var(--ease); visibility:hidden } .fqa-item[data-open] .fqa-a { grid-template-rows:1fr; visibility:visible } .fqa-a>div { min-height:0; overflow:hidden } .fqa-a p { margin:0; padding:0 24px 24px 0; color:var(--muted); font-size:17px; line-height:1.75; opacity:0; transition:opacity 180ms } .fqa-item[data-open] .fqa-a p { opacity:1 }
.footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:30px; padding:32px 0; color:var(--muted); font-size:14px } .footer .brand strong { font-size:16px; color:var(--ink); letter-spacing:-.5px } .footer .mark { width:25px; height:28px } .footer p { text-align:right } .footer-domain { color:var(--ink); font-size:16px } .preview-tag { font-size:14px; font-weight:600 }
dialog { background:var(--paper); color:var(--ink); width:min(550px,calc(100% - 32px)); max-height:calc(100% - 32px); border:1px solid var(--line); border-top:4px solid var(--red); padding:36px } dialog::backdrop { background:#161914a6 } dialog h2 { font:400 40px/1.1 var(--display); text-transform:uppercase; margin:25px 0 18px } dialog p { font-size:16px; color:var(--muted) } .close { position:absolute; right:12px; top:12px; width:44px; height:44px; border:0; background:none; font-size:28px } .form { margin-top:22px } .field { margin-top:18px } .field label { display:block; font-size:15px; font-weight:600; margin-bottom:7px } .form input,.form textarea { width:100%; border:1px solid #8c9384; border-radius:0; background:#fff; color:var(--ink); padding:12px; font-size:16px } .form textarea { min-height:88px; resize:vertical } .form .primary { width:100%; margin-top:24px } .form-note { font-size:14px!important; margin-top:22px } .form-result { padding:24px 0; color:var(--ink)!important } .form-result:empty { display:none } body.modal-open { overflow:hidden }
/* Bencho FormError: error opens its own row after submit, clears when corrected. */
.field-drop { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--reveal) var(--ease) } .field[data-error] .field-drop { grid-template-rows:1fr } .field-drop>div { min-height:0; overflow:hidden } .field-msg { font-size:14px; line-height:1.5; color:var(--red-ink); padding-top:8px; opacity:0; transition:opacity 180ms } .field[data-error] .field-msg { opacity:1 } .field[data-error] input,.field[data-error] textarea { border:2px solid var(--red-ink); padding:11px } .field[data-shake] input,.field[data-shake] textarea { animation:field-shake 300ms ease-out }
@keyframes field-shake { 20%{translate:-3px} 40%{translate:3px} 60%{translate:-2px} 80%{translate:1px} }
@media(max-width:1100px) { .wrap{width:calc(100% - 72px)} .hero{gap:48px} h1{font-size:65px} .why-now,.scope,.offer,.faq{gap:55px} .demo-head{flex-wrap:wrap;gap:4px} .report h2{font-size:23px} .hero-text{font-size:20px} .actions{gap:16px} .price-note strong{font-size:18px} .icon-well{width:76px;height:76px} .source-node .icon-well{width:70px;height:70px} .diagram:before,.diagram:after{top:70px} .packet{top:67px} .diagram-label{font-size:14px} .risk-intro h2{font-size:48px} .risk-row{grid-template-columns:130px 1fr;gap:22px} .example-controls{align-items:flex-start;flex-wrap:wrap;gap:4px} .comparison-face{padding:0 12px} }
@media(max-width:800px) { .wrap{width:calc(100% - 44px)} .header{min-height:88px} .mark{width:29px;height:34px} .brand strong{font-size:20px} .brand small{font-size:12px} .brand{gap:10px} nav>a{display:none} .nav-cta{max-width:139px;font-size:12px;line-height:1.4;padding:10px 12px} .hero{grid-template-columns:1fr;gap:60px;padding:48px 0 66px} h1{font-size:clamp(55px,9.5vw,75px);max-width:650px} .hero-text{font-size:20px;max-width:550px;margin-top:25px} .actions{gap:20px;margin-top:28px} .demo{width:100%;max-width:570px;justify-self:center} .demo-head{flex-wrap:nowrap;font-size:16px;gap:12px} .tabs{margin-bottom:26px} .report h2{font-size:25px;min-height:65px} .diagram-label{font-size:15px} .example-controls{align-items:center;flex-wrap:nowrap;gap:12px} .why-now{grid-template-columns:1fr;gap:25px;padding:44px 0 58px} .why-now h2{font-size:40px;max-width:500px} .why-now .evidence-links{font-size:15px} .dark-band{padding:64px 0;margin-top:0} .scope{grid-template-columns:1fr;gap:38px} .risk-intro h2{font-size:47px;max-width:500px} .risk-intro>p{max-width:500px;margin-top:22px} .risk-row{grid-template-columns:140px 1fr;gap:22px} .offer{grid-template-columns:1fr;gap:48px;padding:64px 0 68px} .offer h2{font-size:46px;max-width:500px} .amount{font-size:86px} .offer-terms{max-width:500px} .offer .primary{width:100%} .faq{grid-template-columns:1fr;gap:25px;padding:65px 0 75px} .faq h2{font-size:44px} .fqa-q{font-size:17px} .footer{align-items:flex-start;flex-wrap:wrap;gap:22px} .footer p{text-align:left} .footer-domain{font-size:15px} }
@media(max-width:500px) { .actions{flex-direction:column;align-items:stretch;gap:16px} .price-note strong{font-size:20px} .diagram-label{font-size:14px} .icon-well{width:70px;height:76px} .source-node .icon-well{width:66px;height:66px;margin:5px 2px} .icon-well svg{width:33px;height:33px} .badge{width:23px;height:23px} .report h2{font-size:23px} .demo-head{font-size:15px;flex-wrap:wrap;gap:4px 16px} .example-label{font-size:13px} .tabs button{font-size:14px} .diagram{min-height:199px} .comparison{gap:5px;padding:3px} .comparison-face{padding:0 11px} .comparison button{font-size:13px} .replay{font-size:13px} .example-controls{gap:9px} .fix-note{font-size:16px;min-height:77px} .risk-row{grid-template-columns:1fr;gap:8px;padding:24px 0} .risk-row dt{font-size:21px} .risk-row dd{font-size:17px} dialog{padding:26px} }
@media(max-width:360px) { .wrap{width:calc(100% - 36px)} .header{gap:12px} .brand strong{font-size:18px} .brand small{font-size:12px} .brand{gap:8px} .nav-cta{font-size:12px;max-width:125px;padding:10px} .hero h1{font-size:49px} .hero{padding-top:38px} .hero-text{font-size:19px} .demo-head{align-items:flex-start;flex-direction:column;gap:6px} .report h2{font-size:22px} .tabs button{font-size:13px} .icon-well{width:63px;height:70px} .source-node .icon-well{width:62px;height:62px;margin:4px 0} .diagram:before,.diagram:after{top:67px} .packet{top:64px} .comparison-face{padding:0 9px} .example-controls{flex-wrap:wrap;gap:8px} .risk-intro h2,.offer h2{font-size:43px} .amount{font-size:78px} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*:before,*:after{animation:none!important;transition:none!important} .packet{display:none} }

.icon-defs{position:absolute;overflow:hidden}.email-fallback{margin-top:18px;font-size:15px}.email-fallback a,.enquiry-retry{color:var(--red-ink);text-decoration:underline;text-underline-offset:4px}.enquiry-retry{display:inline-block;margin-top:14px;font-size:16px}.form-result .enquiry-message{color:var(--ink)}