@font-face{font-family:Manrope;src:url('/v/fonts/manrope-regular.a13d9b41b0a4.ttf') format('truetype');font-weight:400 600;font-display:swap}
@font-face{font-family:Manrope;src:url('/v/fonts/manrope-extrabold.b8f802f05b32.ttf') format('truetype');font-weight:700 900;font-display:swap}
:root{--paper:#f7f8f2;--ink:#082a23;--muted:#526960;--lime:#d1f579;--sage:#e7edda;--line:#cbd4c7;--green:#477f32;font-family:Manrope,'Hiragino Kaku Gothic ProN','Noto Sans JP',Meiryo,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;font-weight:400;line-height:1.6}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img,video{max-width:100%;display:block}
button,a,summary{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:5px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:1.12;letter-spacing:-.045em;font-weight:800}
h1{font-size:clamp(52px,5.6vw,88px)}
h2{font-size:clamp(34px,3.3vw,52px)}
h3{font-size:24px;letter-spacing:-.03em}
.wrap{width:min(1390px,calc(100% - 120px));margin-inline:auto}
.section{padding-block:110px}
.header{min-height:104px;display:flex;align-items:center;gap:32px;position:relative;z-index:2}
.brand{flex-shrink:0}
.brand img{width:156px;height:auto}
.desktop-nav{display:flex;gap:26px;margin-left:auto;font-size:14px}
.desktop-nav a,.footer a{transition:color .2s}
.desktop-nav a:hover,.footer a:hover{color:var(--green)}
.header-actions{display:flex;align-items:center;gap:24px;font-size:13px}
/* Same pill as the account pages: the destination language, spelled out, so it is easy to find. */
/* A quiet globe link, like the nav: Log in and Get started stay together as the pair at the end. */
.language{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);font-size:14px;letter-spacing:0;white-space:nowrap;opacity:.75}
.language:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.language svg{flex-shrink:0}
.button{display:inline-flex;gap:22px;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:40px;padding:19px 29px;font-weight:700;font-size:15px;white-space:nowrap;transition:background .2s,transform .2s}
.button span{font-size:22px;line-height:1}
.button:hover{background:#205440;transform:translateY(-2px)}
.header-cta{padding:12px 21px;font-size:13px;gap:13px}
.header-login{font-weight:800;white-space:nowrap}
.menu-toggle{display:none}
.mobile-nav[hidden]{display:none}
.skip-link{position:fixed;top:12px;left:12px;z-index:20;background:var(--ink);color:white;padding:12px 20px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;min-height:660px;padding-block:24px 30px}
.hero-copy{padding-bottom:40px}
.hero h1 span{display:block}
.hero h1 em{font-style:normal;color:var(--green)}
.hero-description{color:var(--muted);max-width:530px;margin-top:30px;font-size:19px;line-height:1.85}
.hero-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:34px}
figcaption{display:flex;gap:8px;align-items:center;justify-content:center;font-size:11px;margin-top:14px;color:var(--muted)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.15em;margin-bottom:22px}
.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:50px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #b6c5b5}
.plan{padding:18px 22px 27px;display:flex;flex-direction:column}
.plan+.plan{border-left:1px solid #b6c5b5}
.plan.recommended{background:var(--lime)}
.recommend-label{height:28px;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:800}
.plan h3{font-size:21px;padding-bottom:22px;border-bottom:1px solid #b6c5b5;white-space:nowrap}
.price{font-size:clamp(25px,2.4vw,37px);font-weight:800;letter-spacing:-.05em;margin-top:21px;line-height:1.2}
.price-period{font-size:11px;margin-top:9px;white-space:nowrap}
.pre-tax{font-size:10px;color:#557055;margin-top:3px}
.credits{border-block:1px solid #b6c5b5;padding-block:18px;margin-top:24px;font-size:10px;white-space:nowrap}
.credits strong{font-size:16px;margin-right:2px}
.plan-description{font-size:13px;margin:22px 0;min-height:50px}
.outline{color:var(--ink);background:transparent;border-color:#819980;border-radius:5px}
.outline:hover{background:var(--ink);color:var(--paper)}
.small{font-size:11px;gap:6px;padding:13px 7px;margin-top:auto}
.small span{font-size:17px}
.text-link{font-size:14px;font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#a5b698}
.pricing-notes{display:grid;grid-template-columns:1.5fr 1fr;gap:12px 35px;padding-top:24px;font-size:11px;color:var(--muted)}
.pricing-notes p:first-child{grid-row:span 2}
.start{background:var(--lime);border-radius:24px;display:grid;grid-template-columns:1.2fr 1fr;gap:38px;align-items:center;padding:55px 45px;margin-bottom:70px}
.start h2{font-size:44px}
.start-action p{font-size:13px;max-width:350px;margin-top:18px}
.footer{border-top:1px solid var(--line);padding-block:32px}
.footer-main{display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:11px}
.footer-main nav{display:flex;gap:25px;flex-wrap:wrap}
.footer-main>span{white-space:nowrap}
.footer-tagline{font-size:11px;color:var(--muted);margin-top:20px}
.footer-company{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px;font-size:11px;color:var(--muted)}
.footer-company div{display:flex;gap:10px;min-width:0}
.footer-company dt{flex-shrink:0;font-weight:700;color:var(--ink)}
.footer-company dd{margin:0}
.not-found{text-align:center;min-height:65vh}
.not-found img{margin:0 auto 30px}
.not-found h1{font-size:42px;margin-bottom:30px}
.legal{max-width:820px;padding-block:70px 110px}
.legal h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;line-height:1.25}
.legal h2{font-size:21px;letter-spacing:-.02em;line-height:1.4;margin:48px 0 14px}
.legal p,.legal li{font-size:15px;line-height:1.85}
.legal p+p{margin-top:12px}
.legal ul,.legal ol{margin:12px 0;padding-left:1.4em}
.legal a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#a5b698;overflow-wrap:anywhere}
.legal .legal-date{color:var(--muted);font-size:13px;margin:14px 0 30px}
.legal-table{overflow-x:auto;margin:14px 0}
.legal table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7}
.legal th,.legal td{border-bottom:1px solid var(--line);padding:11px 14px 11px 0;text-align:left;vertical-align:top}
.legal thead th{font-size:12px;color:var(--muted);font-weight:700}
.legal tbody th{font-weight:700;min-width:9em}
dialog{width:min(960px,calc(100% - 32px));padding:24px;border:0;border-radius:20px;background:var(--paper);color:var(--ink);max-height:90dvh}
dialog::backdrop{background:#061f1bd9;backdrop-filter:blur(5px)}
dialog video{width:100%;border-radius:10px;background:var(--ink);aspect-ratio:16/9}
dialog>p{font-size:12px;margin-top:16px;color:var(--muted)}
dialog details{font-size:13px;margin-top:18px}
dialog summary{cursor:pointer;font-weight:700}
dialog details p{margin-top:12px}
.menu-toggle{align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}.menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.menu-toggle .menu-x,.menu-toggle[aria-expanded=true] .menu-lines{display:none}.menu-toggle[aria-expanded=true] .menu-x{display:inline}

html[lang=ja] h1{font-size:clamp(44px,4.3vw,68px);letter-spacing:-.055em;line-height:1.45}
html[lang=ja] h2{letter-spacing:-.035em;line-height:1.45}
html[lang=ja] .hero h1 span:last-child{font-size:1.15em}
html[lang=ja] .hero-description{font-size:17px;line-height:2.05;max-width:490px;text-wrap:balance}
html[lang=ja] .hero-actions{gap:20px}
html[lang=ja] .desktop-nav{gap:21px;font-size:13px}
html[lang=ja] .header-actions{gap:18px;font-size:11px}
html[lang=ja] .credits{font-size:9px}
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.paused [class*=message-]{animation-play-state:paused!important}
.hero-copy{animation:arrive .7s both}
@media(min-width:1600px){.hero{min-height:740px}}
@media(max-width:1200px){.wrap{width:calc(100% - 72px)}.desktop-nav{gap:17px}.header{gap:22px}.header-actions{gap:17px}.header-cta{display:none}.hero{gap:20px}.hero-description{font-size:17px}.hero-actions{gap:17px}.plan{padding-inline:15px}.start{grid-template-columns:1.1fr 1fr;padding:42px 30px;gap:28px}.start h2{font-size:37px}.footer-main nav{gap:17px}}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}.desktop-nav{display:none}.header-actions{margin-left:auto}.header{min-height:85px}.menu-toggle{display:flex}.mobile-nav{position:absolute;z-index:40;top:calc(100% - 8px);right:0;width:min(280px,calc(100vw - 24px));display:grid;gap:2px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 24px #082a2314}.mobile-nav a{display:block;padding:12px 14px;border-radius:40px;font-size:15px;font-weight:600;transition:background .2s}.mobile-nav a:hover{background:var(--sage)}.hero{grid-template-columns:1fr 1fr;min-height:580px}.hero h1{font-size:51px}.hero-description{font-size:15px}.hero-copy{padding-bottom:0}.button{font-size:13px;padding:16px 21px}.section{padding-block:80px}.plans{grid-template-columns:repeat(6,1fr)}.plan{grid-column:span 2;padding:20px}.price{font-size:34px}.plan-description{min-height:42px}.plan .small{font-size:12px}.start{grid-template-columns:1fr 1fr}.start h2{font-size:33px}.footer-main{flex-wrap:wrap}.footer-main nav{order:3;width:100%}html[lang=ja] h1{font-size:40px}html[lang=ja] .hero-description{font-size:15px}html[lang=ja] .hero h1 span:last-child{font-size:1.1em}}
@media(max-width:640px){.wrap{width:calc(100% - 40px)}.header{min-height:80px;gap:15px}.brand img{width:123px}.header-actions,html[lang=ja] .header-actions{gap:13px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:30px;gap:35px}.hero-copy{padding-bottom:0}.hero h1{font-size:clamp(42px,10.5vw,64px);line-height:1.14;letter-spacing:-.055em}.hero-description{font-size:16px;line-height:1.8;margin-top:23px}.hero-actions{margin-top:25px;gap:16px;align-items:flex-start;flex-direction:column}.hero-actions .button{padding:17px 25px;font-size:14px}figcaption{margin-top:10px}.section{padding-block:64px}h2{font-size:35px}.eyebrow{font-size:10px;margin-bottom:18px}.section-top{display:block;margin-bottom:30px}.plans{display:block}.plan{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;position:relative;padding:26px 22px}.plan+.plan{border-left:0;border-top:1px solid #b6c5b5}.recommend-label{grid-column:span 2;height:auto;font-size:9px}.recommend-label:not(:empty){margin-bottom:8px}.plan h3{padding-bottom:0;border:0;font-size:22px;align-self:center}.price{margin-top:0;font-size:32px;text-align:right}.price-period,.pre-tax{text-align:right;grid-column:2;margin-top:4px}.credits{grid-column:span 2;margin-top:18px;padding:13px 0;font-size:11px}.plan-description{grid-column:span 2;min-height:0;margin:15px 0;font-size:13px}.plan .button{grid-column:span 2;margin-top:4px;font-size:12px;padding:12px}.pricing-notes{display:block;font-size:11px}.pricing-notes p+p{margin-top:12px}.start{width:calc(100% - 24px);grid-template-columns:1fr;gap:25px;padding:37px 25px;border-radius:20px;margin-bottom:45px}.start h2{font-size:36px}.start-action p{font-size:13px;line-height:1.8}.footer{padding-block:25px}.footer-main>span{font-size:10px}.footer-main nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:11px}.footer-main img{width:124px;height:auto}.footer-tagline{margin-top:28px}dialog{padding:16px}html[lang=ja] h1{font-size:clamp(35px,8.6vw,53px);line-height:1.6}html[lang=ja] .hero h1 span:last-child{font-size:1.2em}html[lang=ja] .hero-description{font-size:15px;margin-top:20px}html[lang=ja] h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:360px){.header{gap:8px}.header .brand img{width:108px}.header-actions,html[lang=ja] .header-actions{gap:8px}}
/* Privacy policy contents list. */
.legal-toc{margin:32px 0 8px;padding:20px 24px;border:1px solid var(--line);border-radius:16px}
.legal-toc p{margin:0 0 8px;font-size:13px;font-weight:800}
.legal-toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:32px}
.legal-toc li{font-size:14px;line-height:1.9;break-inside:avoid}
.legal h2[id]{scroll-margin-top:24px}
@media(max-width:640px){.legal-toc ol{columns:1}}

/* Homepage sections: show, don't tell (owner, 2026-10-29). Animations are decorative CSS loops. They pause with the
   hero's pause button and while off screen (motion.ts sets data-offscreen on each .anim). */
.anim[data-offscreen] *,.anim[data-offscreen] *::before,.anim[data-offscreen] *::after,html[data-motion=paused] .anim *,html[data-motion=paused] .anim *::before,html[data-motion=paused] .anim *::after{animation-play-state:paused!important}

/* What Banto does: build, change and everyday work as three 8-second stories in the hero's sample site, then the
   usual way of updating a website against asking Banto. */
.what{padding-bottom:40px}
.what .section-top{margin-bottom:18px}
.what-intro{max-width:760px;margin-bottom:40px;font-size:16px;line-height:1.85;color:var(--muted)}
.pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.pillars h3{font-size:30px;margin:22px 0 6px}
.pillars p{font-size:15px;color:var(--muted)}
.tile{display:block;height:260px;border-radius:22px;background:var(--sage);position:relative;overflow:hidden}
.mini{position:absolute;inset:18px;display:block;border-radius:12px;background:#fff;box-shadow:0 14px 30px -14px #082a2340;overflow:hidden}
.mini-right{left:42%}
.mini-bar{display:flex;align-items:center;gap:4px;height:22px;padding:0 8px;background:#eef1e8;font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden}
.mini-bar i{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#cbd4c7}
.mini-bar span{margin-left:6px;overflow:hidden;text-overflow:ellipsis}
.mini-site{position:relative;display:block;padding:10px 12px}
.s-nav{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.s-nav b{margin-right:auto;font-size:9px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.s-nav i{width:16px;height:4px;border-radius:2px;background:#dfe7d3}
.s-photo{position:relative;display:block;border-radius:8px;overflow:hidden;background:#dfe7d3}
.s-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-chip{position:absolute;right:28px;bottom:28px;z-index:3;padding:6px 11px;border-radius:20px;background:var(--lime);font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 8px 18px -8px #082a2366;opacity:0}
.tile-ask{position:absolute;left:30px;bottom:30px;z-index:3;max-width:70%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;box-shadow:0 10px 20px -10px #082a2399;opacity:0;animation:b-ask 8s infinite}
.build-site .s-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.s-text{display:grid;gap:6px}
.s-head{font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.s-text i{display:block;height:4px;border-radius:2px;background:#dfe7d3}
.s-text i+i{width:70%}
.s-btn{justify-self:start;margin-top:4px;padding:4px 10px;border-radius:12px;background:var(--ink);color:#fff;font-size:9px;font-weight:700;white-space:nowrap}
.build-site .s-photo{height:118px}
.build-progress{position:absolute;top:22px;left:0;right:0;height:3px;background:transparent}
.build-progress i{display:block;width:0;height:100%;background:var(--green);animation:b-prog 8s infinite}
.tile-build .s-nav{animation:b-nav 8s infinite}
.tile-build .s-photo{animation:b-photo 8s infinite}
.tile-build .s-head{animation:b-head 8s infinite}
.tile-build .s-text i{animation:b-lines 8s infinite}
.tile-build .s-btn{animation:b-btn 8s infinite}
.tile-build .tile-chip{animation:b-chip 8s infinite}
@keyframes b-ask{0%{opacity:0;transform:translateY(10px)}5%,20%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes b-prog{0%,20%{width:0;opacity:1}58%{width:100%;opacity:1}62%,100%{width:100%;opacity:0}}
@keyframes b-nav{0%,24%{clip-path:inset(0 100% 0 0);opacity:1}30%,90%{clip-path:inset(0);opacity:1}96%,100%{clip-path:inset(0);opacity:0}}
@keyframes b-photo{0%,30%{clip-path:inset(0 0 100% 0);opacity:1}40%,90%{clip-path:inset(0);opacity:1}96%,100%{clip-path:inset(0);opacity:0}}
@keyframes b-head{0%,38%{clip-path:inset(0 100% 0 0);opacity:1}48%,90%{clip-path:inset(0);opacity:1}96%,100%{clip-path:inset(0);opacity:0}}
@keyframes b-lines{0%,44%{transform:scaleX(0);transform-origin:0 50%;opacity:1}52%,90%{transform:scaleX(1);transform-origin:0 50%;opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
@keyframes b-btn{0%,50%{transform:scale(0);opacity:1}56%,90%{transform:scale(1);opacity:1}96%,100%{transform:scale(1);opacity:0}}
@keyframes b-chip{0%,58%{opacity:0;transform:scale(.6)}63%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
/* A break-in attempt: a red alert card whose password field keeps guessing, until it is blocked (or gets in). */
.threat{position:relative;display:grid;width:var(--card,118px)}
.threat>span{grid-area:1/1}
.threat-face{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1px 6px;padding:6px 8px 6px 7px;border:1.5px solid #d9534f;border-left-width:4px;border-radius:8px;background:#fff;box-shadow:0 8px 16px -10px #082a2399}
.threat-face svg{grid-row:span 2;width:17px;height:17px;color:#c4473b}
.threat-face b{font-size:11px;font-weight:800;line-height:1.3;color:#b2392f;white-space:nowrap}
.threat-face i{font-style:normal;font-size:10px;line-height:1;letter-spacing:.14em;color:#4a4a4a;clip-path:inset(0 100% 0 0);animation:guessing 1.2s steps(6,end) infinite}
@keyframes guessing{to{clip-path:inset(0 0 0 0)}}
.threat-after{display:grid;place-items:center;border-radius:8px;font-size:11px;font-weight:800;white-space:nowrap;opacity:0}
.threat-blocked{background:var(--ink);color:var(--lime)}
.threat-breached{background:#c4473b;color:#fff}
/* Change: photo request, Banto typing, a preview, OK, and the site updates. */
.chat-col{position:absolute;left:18px;top:18px;bottom:18px;width:calc(42% - 30px)}
.c-msg{position:absolute;max-width:100%;padding:6px 9px;border-radius:12px;font-size:11px;font-weight:700;line-height:1.35;opacity:0}
.c-user{right:0;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.c-bot{left:0;background:#fff;border-bottom-left-radius:4px;box-shadow:0 6px 14px -8px #082a2366}
.c-photo{top:0;display:grid;gap:4px;width:100%;padding:4px}
.c-photo img{width:100%;height:58px;object-fit:cover;border-radius:8px}
.c-photo span{padding:0 4px 2px}
.c-dots{top:98px;display:flex;gap:3px;padding:9px 10px}
.c-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted)}
.c-preview{top:98px}
.c-ok{top:148px}
.change-site .s-photo{height:150px}
.swap{opacity:0}
.flash{position:absolute;inset:0;background:#fff;opacity:0}
.tile-change .c-photo{animation:c-photo 8s infinite}
.tile-change .c-dots{animation:c-dots 8s infinite}
.tile-change .c-preview{animation:c-preview 8s infinite}
.tile-change .c-ok{animation:c-ok 8s infinite}
.tile-change .swap{animation:c-swap 8s infinite}
.tile-change .flash{animation:c-flash 8s infinite}
.tile-change .tile-chip{animation:c-chip 8s infinite}
@keyframes c-photo{0%,3%{opacity:0;transform:translateY(10px)}9%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes c-dots{0%,14%{opacity:0}18%,28%{opacity:1}31%,100%{opacity:0}}
@keyframes c-preview{0%,30%{opacity:0;transform:translateY(8px)}35%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes c-ok{0%,43%{opacity:0;transform:translateY(8px)}48%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes c-swap{0%,52%{opacity:0}57%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes c-flash{0%,52%{opacity:0}54%{opacity:.85}64%,100%{opacity:0}}
@keyframes c-chip{0%,60%{opacity:0;transform:scale(.6)}65%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}

/* Everyday work: "what's on today?", Banto thinks, a summary fills in, then "every morning" adds a daily task. */
.c-ask{top:0}.tile-work .c-dots{top:52px}.c-more{top:100px}
.work-head{display:flex;align-items:center;gap:6px;height:24px;padding:0 10px;background:#eef1e8;font-size:10px;font-weight:800;color:var(--muted)}
.work-head svg{width:12px;height:12px}
.work-rows{display:grid;gap:8px;padding:12px 10px}
.work-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1px 8px;padding:7px 8px;border-radius:10px;background:var(--paper);opacity:0}
.work-row svg{grid-row:span 2;width:16px;height:16px;padding:6px;box-sizing:content-box;border-radius:8px;background:var(--sage);color:var(--green)}
.work-row b{font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-row small{font-size:9.5px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-row-3{background:#e6f6c0;box-shadow:inset 0 0 0 1.5px var(--green)}
.tile-work .tile-chip{left:28px;right:auto}
.tile-work .c-ask{animation:w-ask 8s infinite}
.tile-work .c-dots{animation:w-dots 8s infinite}
.work-row-1{animation:w-row-1 8s infinite}
.work-row-2{animation:w-row-2 8s infinite}
.tile-work .c-more{animation:w-more 8s infinite}
.work-row-3{animation:w-row-3 8s infinite}
.tile-work .tile-chip{animation:w-chip 8s infinite}
@keyframes w-ask{0%,3%{opacity:0;transform:translateY(10px)}9%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes w-dots{0%,12%{opacity:0}16%,26%{opacity:1}29%,100%{opacity:0}}
@keyframes w-row-1{0%,28%{opacity:0;transform:translateX(10px)}33%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes w-row-2{0%,34%{opacity:0;transform:translateX(10px)}39%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes w-more{0%,46%{opacity:0;transform:translateY(8px)}51%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes w-row-3{0%,56%{opacity:0;transform:scale(.9)}61%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes w-chip{0%,64%{opacity:0;transform:scale(.6)}69%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
/* Updating a website (12-second loop): Banto's bar fills and it is live while the usual way's bar is still crawling. */
.ba{margin-top:48px;padding:22px 24px;border:1px solid #b6c5b5;border-radius:22px;background:#fff}
.ba-title{margin-bottom:6px;font-size:12px;font-weight:800;letter-spacing:.08em}
.ba-row{display:grid;grid-template-columns:180px minmax(0,1fr) 170px;align-items:center;gap:18px;padding:14px 0}
.ba-row+.ba-row{border-top:1px solid var(--line)}
.ba-name{font-size:15px;font-weight:800}
.ba-track{display:grid;gap:10px}
.ba-steps{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ba-steps li{padding:5px 11px;border:1px solid var(--line);border-radius:20px;background:var(--paper);font-size:12.5px;font-weight:700;color:var(--muted)}
.ba-banto .ba-steps li{border-color:var(--green);background:#e6f6c0;color:var(--ink)}
.ba-bar{display:block;height:6px;border-radius:6px;background:#eef1e8;overflow:hidden}
.ba-bar b{display:block;width:0;height:100%;border-radius:6px}
.ba-old .ba-bar b{background:#97a294;animation:ba-slow 12s linear infinite}
.ba-banto .ba-bar b{background:var(--green);animation:ba-fast 12s infinite}
.ba-end{justify-self:start;font-size:13px;font-weight:800;color:var(--muted)}
.ba-banto .ba-end{padding:6px 12px;border-radius:20px;background:var(--lime);color:var(--ink);white-space:nowrap;animation:ba-done 12s infinite}
@keyframes ba-slow{0%{width:0;opacity:1}86%{width:72%;opacity:1}92%,100%{width:72%;opacity:0}}
@keyframes ba-fast{0%{width:0;opacity:1}22%,86%{width:100%;opacity:1}92%,100%{width:100%;opacity:0}}
@keyframes ba-done{0%,22%{opacity:0;transform:scale(.7)}27%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}

/* Safety: one-door WordPress server against Banto's separate, locked rooms (10-second loop), then six cards. */
.safety{background:var(--ink);color:var(--paper)}
.safety .eyebrow{color:var(--lime)}
.safety .section-top{margin-bottom:22px}
.safety-intro{max-width:720px;margin-bottom:36px;font-size:16px;line-height:1.85;color:#c3d2c8}
.arch{margin:0;padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:rgba(255,255,255,.03)}
.arch figcaption{display:block;margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.08em;color:#8fb09f;text-align:left}
.arch-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.arch-panel{padding:20px;border-radius:18px;background:#0d3329}
.arch-title{margin-bottom:14px;font-size:15px;font-weight:800}
.arch-banto .arch-title{color:var(--lime)}
.arch-stage{position:relative;height:250px;--door:26%;--edge:26%;--card:118px}
.arch-result{margin-top:16px;font-size:15px;font-weight:700;line-height:1.6;animation:arch-result 10s infinite}
.arch-wp .arch-result{color:#f2a493}
.arch-banto .arch-result{color:var(--lime)}
@keyframes arch-result{0%,60%{opacity:.4}66%,92%{opacity:1}98%,100%{opacity:.4}}
.attacker{position:absolute;left:0;top:50%;z-index:3;opacity:0;transform:translateY(-50%)}
.arch-wp .threat-face{animation:wp-face 10s infinite}
.arch-wp .threat-after{animation:wp-after 10s infinite}
.arch-banto .threat-face{animation:banto-face 10s infinite}
.arch-banto .threat-after{animation:banto-after 10s infinite}
@keyframes wp-face{0%,26%{opacity:1}28%,100%{opacity:0}}
@keyframes wp-after{0%,26%{opacity:0}28%,100%{opacity:1}}
@keyframes banto-face{0%,23%{opacity:1}25%,100%{opacity:0}}
@keyframes banto-after{0%,23%{opacity:0}25%,100%{opacity:1}}
.arch-wp .attacker{animation:atk-wp 10s infinite}
.arch-banto .attacker{animation:atk-banto 10s infinite}
@keyframes atk-wp{0%{left:calc(var(--door) - var(--card) - 90px);opacity:0;transform:translateY(-50%) scale(1)}5%{opacity:1}22%,34%{left:calc(var(--door) - var(--card) - 4px);opacity:1;transform:translateY(-50%) scale(1)}40%,100%{left:calc(var(--door) - var(--card) + 40px);opacity:0;transform:translateY(-50%) scale(.6)}}
@keyframes atk-banto{0%{left:calc(var(--edge) - 20px - var(--card) - 90px);opacity:0;transform:translateY(-50%) rotate(0)}5%{opacity:1}22%{left:calc(var(--edge) - 20px - var(--card));opacity:1;transform:translateY(-50%)}26%,38%{left:calc(var(--edge) - 32px - var(--card));opacity:1;transform:translateY(-50%) rotate(0)}48%,100%{left:calc(var(--edge) - 60px - var(--card));opacity:0;transform:translateY(-30%) rotate(-8deg)}}
.wp-box{position:absolute;left:var(--door);right:0;top:0;bottom:0;padding:30px 12px 12px;border:2px solid rgba(255,255,255,.3);border-radius:14px;animation:wp-box 10s infinite}
.wp-box-label{position:absolute;top:8px;left:12px;font-size:11px;color:#8fb09f}
.wp-door{position:absolute;left:-7px;top:50%;width:12px;height:46px;margin-top:-23px;border-radius:3px;background:#e8eedf;animation:wp-door 10s infinite}
.wp-door-label{position:absolute;right:calc(100% + 6px);top:calc(50% - 48px);font-size:10px;color:#8fb09f;white-space:nowrap;background:#0d3329;padding:0 4px}
.wp-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:100%}
.part{display:grid;place-items:center;padding:4px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.07);font-size:12px;font-weight:700;text-align:center}
.part:nth-child(4){animation:infect-1 10s infinite}
.part:nth-child(1){animation:infect-2 10s infinite}
.part:nth-child(2){animation:infect-3 10s infinite}
.part:nth-child(3){animation:infect-4 10s infinite}
.part:nth-child(5){animation:infect-5 10s infinite}
.part:nth-child(6){animation:infect-6 10s infinite}
@keyframes infect-1{0%,38%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}42%,88%{background:#c4473b;border-color:#ff8a7a;color:#fff}95%,100%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}}
@keyframes infect-2{0%,44%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}48%,88%{background:#c4473b;border-color:#ff8a7a;color:#fff}95%,100%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}}
@keyframes infect-3{0%,48%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}52%,88%{background:#c4473b;border-color:#ff8a7a;color:#fff}95%,100%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}}
@keyframes infect-4{0%,52%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}56%,88%{background:#c4473b;border-color:#ff8a7a;color:#fff}95%,100%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}}
@keyframes infect-5{0%,56%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}60%,88%{background:#c4473b;border-color:#ff8a7a;color:#fff}95%,100%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}}
@keyframes infect-6{0%,60%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}64%,88%{background:#c4473b;border-color:#ff8a7a;color:#fff}95%,100%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:inherit}}
@keyframes wp-door{0%,32%{background:#e8eedf}35%,88%{background:#d9534f}95%,100%{background:#e8eedf}}
@keyframes wp-box{0%,62%{border-color:rgba(255,255,255,.3)}66%,88%{border-color:#ff8a7a}95%,100%{border-color:rgba(255,255,255,.3)}}
.edge{position:absolute;left:var(--edge);top:0;bottom:0;z-index:2;display:grid;place-items:center;align-content:center;gap:10px;width:40px;margin-left:-20px;border:1px solid rgba(209,245,121,.5);border-radius:12px;background:rgba(209,245,121,.1);color:var(--lime);animation:edge 10s infinite}
.edge svg{width:22px;height:22px}
.edge small{writing-mode:vertical-rl;font-size:10px;font-weight:800;letter-spacing:.08em}
@keyframes edge{0%,22%,32%,100%{box-shadow:0 0 0 0 #d1f57900;background:rgba(209,245,121,.1)}25%{box-shadow:0 0 0 12px #d1f57940;background:rgba(209,245,121,.3)}}
.rooms{position:absolute;left:calc(var(--edge) + 32px);right:0;top:0;bottom:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.room{display:grid;align-content:center;justify-items:start;gap:3px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.07);animation:locked 10s infinite}
.room svg{width:18px;height:18px;margin-bottom:4px;color:var(--lime)}
.room b{font-size:13px}
.room small{font-size:10.5px;line-height:1.4;color:#a9bcb1}
.room:nth-child(2){animation-delay:.6s}.room:nth-child(3){animation-delay:1.2s}.room:nth-child(4){animation-delay:1.8s}
/* Locks light up one after another, from 40% of the loop. */
@keyframes locked{0%,40%{border-color:rgba(255,255,255,.12);box-shadow:none}43%{border-color:var(--lime);box-shadow:0 0 0 4px #d1f5792e}52%,100%{border-color:rgba(255,255,255,.12);box-shadow:none}}
.safety-cards{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.safety-cards li{padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.05)}
.safety-cards svg{width:22px;height:22px;padding:10px;box-sizing:content-box;border-radius:50%;background:var(--lime);color:var(--ink)}
.safety-cards h3{margin:14px 0 6px;font-size:17px}
.safety-cards p{font-size:14px;line-height:1.8;color:#c3d2c8}
.safety-closing{margin-top:34px;max-width:760px;font-size:17px;font-weight:700;line-height:1.7}
.safety .text-link{display:inline-block;margin-top:18px;text-decoration-color:var(--lime)}

/* Why it's cheap: a 12-second story with no visitor numbers. Phases: nobody (0-24%), visitors arriving (25-47%),
   a rush (48-74%), quiet again (75-100%). The rental server charges throughout; Banto runs only with visitors. */
.cheap .section-top{margin-bottom:20px}
.cheap-text{max-width:720px;margin-bottom:30px;font-size:16px;line-height:1.85;color:var(--muted)}
.run{margin:0;padding:24px;border:1px solid #b6c5b5;border-radius:24px;background:#fff}
.run figcaption{display:block;margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-align:left;color:var(--ink)}
.ph{grid-area:1/1;opacity:0}
.ph-0{animation:ph-0 12s infinite}.ph-1{animation:ph-1 12s infinite}.ph-2{animation:ph-2 12s infinite}.ph-3{animation:ph-3 12s infinite}
@keyframes ph-0{0%{opacity:0}2%,23%{opacity:1}25%,100%{opacity:0}}
@keyframes ph-1{0%,24%{opacity:0}26%,46%{opacity:1}48%,100%{opacity:0}}
@keyframes ph-2{0%,47%{opacity:0}49%,73%{opacity:1}75%,100%{opacity:0}}
@keyframes ph-3{0%,74%{opacity:0}76%,97%{opacity:1}100%{opacity:0}}
.crowd{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-height:52px;margin-bottom:18px;padding:10px 16px;border-radius:14px;background:var(--sage)}
.crowd-label{font-size:13px;font-weight:800}
.crowd-count{display:grid;min-width:200px;font-size:20px;font-weight:800;letter-spacing:-.02em}
/* Traffic level: a flowing bar, low while visitors arrive and full in the rush. */
.traffic{flex:1;min-width:140px;height:12px;border-radius:12px;background:#fff;overflow:hidden}
.traffic b{display:block;width:3%;height:100%;border-radius:12px;background:repeating-linear-gradient(90deg,var(--green) 0 6px,#5aa82a 6px 12px);animation:traffic 12s infinite,flow .6s linear infinite}
@keyframes traffic{0%,24%{width:3%}28%,46%{width:38%}51%,73%{width:100%}77%,100%{width:3%}}
.run-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.run-panel{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.run-title{margin-bottom:12px;font-size:15px;font-weight:800}
.run-stage{position:relative;display:grid;place-items:center;height:190px}
.run-status{display:grid;min-height:24px;margin-top:10px;font-size:15px}
.run-wp .ph{color:#b2392f}
.run-wp .ph-1{color:var(--muted)}
.run-banto .ph{color:var(--green)}
/* Rental server: always on, always charging, and overloaded in the rush. */
.server{position:relative;display:grid;justify-items:center;gap:8px;animation:overload 12s infinite}
.rack{display:grid;gap:7px;width:180px;padding:12px;border:2px solid #39444d;border-radius:12px;background:#39444d}
.rack i{position:relative;display:block;height:24px;border-radius:5px;background:#4b5863}
.rack i::before,.rack i::after{content:'';position:absolute;top:9px;width:6px;height:6px;border-radius:50%;background:#7ee06a;animation:blink 1s steps(2) infinite}
.rack i::before{left:9px}.rack i::after{left:21px;background:#f3c443;animation-delay:.5s}
@keyframes blink{50%{opacity:.3}}
.server small{font-size:11px;font-weight:800;color:#39444d}
.server .coin{top:-12px;right:-10px;animation:coin-rise 1s ease-out infinite}
@keyframes overload{0%,47%,75%,100%{transform:none}49%,51%,53%,55%,57%,59%,61%,63%,65%,67%,69%,71%,73%{transform:translateX(-1.5px)}50%,52%,54%,56%,58%,60%,62%,64%,66%,68%,70%,72%{transform:translateX(1.5px)}}
.load{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;width:190px;margin-top:8px;font-size:11px;font-weight:700;color:var(--muted)}
.load i{display:block;height:8px;border-radius:8px;background:#e3e8dc;overflow:hidden}
.load b{display:block;width:6%;height:100%;border-radius:8px;background:#9db58c;animation:load 12s infinite}
@keyframes load{0%,24%{width:6%;background:#9db58c}27%,46%{width:30%;background:#9db58c}50%,73%{width:100%;background:#d9534f}77%,100%{width:6%;background:#9db58c}}
.coin{position:absolute;display:grid;place-items:center;width:22px;height:22px;border:2px solid #d9a21b;border-radius:50%;background:#f3c443;color:#6b4a00;font-size:11px;font-weight:800;opacity:0}
@keyframes coin-rise{0%{opacity:0;transform:translateY(8px)}25%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
/* Visitors walking in. A lane shows people heading into the server or a Worker while its phase is on: lane-b with
   2 visitors and in the rush, lane-c only in the rush. */
.lane{position:relative;display:block;width:64px;height:34px;overflow:hidden;opacity:0}
.lane::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed #b6c5b5}
.lane i{position:absolute;top:50%;left:-24px;display:grid;place-items:center;width:24px;height:24px;margin-top:-12px;border:1.5px solid var(--green);border-radius:50%;background:#fff;color:var(--green);animation:walk 1.6s linear infinite}
.lane i svg{width:14px;height:14px}
.lane i:nth-child(2){animation-delay:.53s}.lane i:nth-child(3){animation-delay:1.07s}
@keyframes walk{0%{left:-24px;opacity:0}20%,80%{opacity:1}100%{left:calc(100% - 24px);opacity:0}}
/* In the rush, people stop at the back of the queue instead of reaching the server. */
@keyframes walk-queue{0%{left:-24px;opacity:0}20%,80%{opacity:1}100%{left:calc(100% - 92px);opacity:0}}
.lane-b{animation:gate-b 12s infinite}
.lane-c{animation:gate-c 12s infinite}
@keyframes gate-b{0%,24%{opacity:0}27%,73%{opacity:1}76%,100%{opacity:0}}
@keyframes gate-c{0%,47%{opacity:0}50%,73%{opacity:1}76%,100%{opacity:0}}
/* Rental server: everyone squeezes through one way in, and in the rush a queue forms. */
.run-wp .run-stage{grid-template-columns:auto auto;grid-template-rows:none;justify-content:center;align-items:center;gap:4px}
.server-col{display:grid;justify-items:center}
.lane-wp{position:relative;display:block;width:150px;height:120px}
.lane-wp .lane{position:absolute;left:0;right:0;top:50%;width:auto;margin-top:-17px}
.wp-rush i{animation-name:walk-queue}
.wp-rush i:nth-child(1){animation-delay:.2s}.wp-rush i:nth-child(2){animation-delay:.6s}.wp-rush i:nth-child(3){animation-delay:1s}.wp-rush i:nth-child(4){animation-delay:1.4s}
.queue{position:absolute;right:0;top:50%;display:grid;justify-items:end;gap:3px;margin-top:-40px;opacity:0;animation:gate-c 12s infinite}
.queue small{font-size:10px;font-weight:800;color:#c4473b;white-space:nowrap}
.queue span{display:flex}
.queue i{display:grid;place-items:center;width:24px;height:24px;margin-left:-5px;border:1.5px solid #d9534f;border-radius:50%;background:#fff;color:#d9534f;animation:fidget .5s ease-in-out infinite alternate}
.queue i:nth-child(2){animation-delay:.15s}.queue i:nth-child(3){animation-delay:.3s}
.queue i svg{width:14px;height:14px}
@keyframes fidget{to{transform:translateY(-2px)}}
/* Banto, as on the platform: one Worker waits; it runs for visitors and uses the site's own database and files;
   more Workers start in the rush and stop when visitors leave. */
.run-note{margin:-6px 0 8px;font-size:12px;color:var(--muted)}
.run-banto .run-stage{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);place-items:stretch;align-items:center}
.wk-list{display:flex;flex-direction:column;justify-content:center}
.wk{display:grid;grid-template-columns:auto auto minmax(12px,1fr);align-items:center;margin:3px 0}
.wk .lane{width:64px}
.wk-card{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;gap:0 6px;width:118px;padding:6px 9px;border-radius:10px;border:1.5px dashed #b6c5b5;background:#fff;color:#8a978c;box-shadow:none}
.wk-card svg{grid-row:span 2;width:18px;height:18px}
.wk-card b{font-size:12px;line-height:1.2}
.wk-state{display:grid;font-size:10px;font-weight:700;line-height:1.3}
.wk-state em{grid-area:1/1;font-style:normal}
.wk-pipe{height:3px;margin-right:-1px;background:repeating-linear-gradient(90deg,#cbd4c7 0 6px,transparent 6px 12px);opacity:.6}
.wk-1 .wk-card{animation:wk-run 12s infinite}
.wk-1 .wk-idle{animation:wk-idle 12s infinite}
.wk-1 .wk-run{opacity:0;animation:wk-label 12s infinite}
.wk-1 .wk-pipe{animation:pipe-b 12s infinite,flow .6s linear infinite}
.wk-2,.wk-3,.wk-4{max-height:0;margin:0;opacity:0;animation:wk-extra 12s infinite}
.wk-1{order:2}.wk-3{order:3}.wk-4{order:4}
.wk-3{animation-delay:.15s}.wk-4{animation-delay:.3s}
.wk-2 .wk-card,.wk-3 .wk-card,.wk-4 .wk-card{border:1.5px solid var(--green);background:#e6f6c0;color:var(--ink);box-shadow:0 0 0 4px #d1f57966}
.wk-2 .wk-pipe,.wk-3 .wk-pipe,.wk-4 .wk-pipe{background-image:repeating-linear-gradient(90deg,var(--green) 0 6px,transparent 6px 12px);opacity:1;animation:flow .6s linear infinite}
@keyframes wk-run{0%,24%{border:1.5px dashed #b6c5b5;background:#fff;color:#8a978c;box-shadow:none}27%,73%{border:1.5px solid var(--green);background:#e6f6c0;color:var(--ink);box-shadow:0 0 0 4px #d1f57966}76%,100%{border:1.5px dashed #b6c5b5;background:#fff;color:#8a978c;box-shadow:none}}
@keyframes wk-idle{0%,23%{opacity:1}25%,74%{opacity:0}76%,100%{opacity:1}}
@keyframes wk-label{0%,24%{opacity:0}26%,73%{opacity:1}75%,100%{opacity:0}}
@keyframes pipe-b{0%,24%{background-image:repeating-linear-gradient(90deg,#cbd4c7 0 6px,transparent 6px 12px);opacity:.6}27%,73%{background-image:repeating-linear-gradient(90deg,var(--green) 0 6px,transparent 6px 12px);opacity:1}76%,100%{background-image:repeating-linear-gradient(90deg,#cbd4c7 0 6px,transparent 6px 12px);opacity:.6}}
@keyframes flow{from{background-position-x:0}to{background-position-x:12px}}
/* Extra Workers take no space until they start, so the waiting Worker sits in the middle and the rush grows around it. */
@keyframes wk-extra{0%,47%{opacity:0;max-height:0;margin:0;transform:scale(.9)}50%,73%{opacity:1;max-height:44px;margin:3px 0;transform:none}76%,100%{opacity:0;max-height:0;margin:0;transform:scale(.9)}}
.res{display:grid;gap:10px;align-content:center}
.res-box{display:grid;justify-items:center;gap:2px;padding:10px 6px;border:1.5px solid;border-radius:12px;text-align:center;border-color:#cbd4c7;background:#f1f3ee;color:#8a978c;box-shadow:none;animation:res 12s infinite}
.res-box svg{width:22px;height:22px}
.res-box b{font-size:12px;white-space:nowrap}
.res-box small{font-size:10px;color:var(--muted)}
@keyframes res{0%,24%{border-color:#cbd4c7;background:#f1f3ee;color:#8a978c;box-shadow:none}27%,73%{border-color:var(--green);background:#fff;color:var(--ink);box-shadow:0 0 0 4px #d1f57955}76%,100%{border-color:#cbd4c7;background:#f1f3ee;color:#8a978c;box-shadow:none}}
.copy-coin{position:absolute;top:-12px;right:-8px;width:22px;height:22px;opacity:0}
.copy-coin .coin{inset:0;animation:coin-rise 1.2s ease-out infinite}
.wk-1 .copy-coin{animation:coin-b 12s infinite}
.wk-2 .copy-coin,.wk-3 .copy-coin,.wk-4 .copy-coin{opacity:1}
.wk-2 .coin{animation-delay:.3s}.wk-3 .coin{animation-delay:.6s}.wk-4 .coin{animation-delay:.9s}
@keyframes coin-b{0%,25%{opacity:0}28%,72%{opacity:1}75%,100%{opacity:0}}
/* Running cost, side by side on one scale: the rental server's bar fills all the time, Banto's only with visitors. */
.cost{margin-top:20px;padding:22px 24px;border-radius:18px;background:var(--ink);color:var(--paper)}
.cost-title{margin-bottom:6px;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--lime)}
.cost-row{display:grid;grid-template-columns:minmax(160px,230px) minmax(0,1fr);gap:18px;align-items:center;margin-top:14px}
.cost-name b{display:block;font-size:16px}
.cost-name small{display:block;font-size:12px;color:#c3d2c8}
.cost-bar{display:block;height:28px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}
.cost-bar b{display:block;width:0;height:100%;border-radius:8px}
.cost-wp .cost-bar b{background:#e2574c;animation:server-cost 12s linear infinite}
.cost-banto .cost-bar b{background:var(--lime);animation:banto-cost 12s linear infinite}
@keyframes server-cost{from{width:0}to{width:100%}}
/* Flat with nobody there, a little with 2 visitors, more in the rush, flat again after. */
@keyframes banto-cost{0%,25%{width:0}47%{width:3%}49%{width:3%}74%{width:14%}100%{width:14%}}
.cost-gap{margin-top:18px;font-size:17px;font-weight:800;line-height:1.6;color:var(--lime)}
.run-result{margin-top:12px;font-size:14px;font-weight:700;line-height:1.6}
.run-wp .run-result{color:#b2392f}
.run-banto .run-result{color:var(--green)}
.pricing-tokens{max-width:880px;margin-top:20px;font-size:13px;line-height:1.8;color:var(--muted)}

/* What if: question cards with icons, and a way to ask a person. */
.faq-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px;align-items:start}
.faq-group h3{display:inline-flex;margin-bottom:14px;padding:6px 14px;border-radius:20px;background:var(--sage);font-size:13px;font-weight:800;letter-spacing:.04em}
.qa{margin-bottom:10px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:border-color .2s,box-shadow .2s}
.qa:hover{border-color:#a5b698}
.qa[open]{border-color:var(--green);box-shadow:0 10px 24px -16px #082a2366}
.qa summary{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;gap:14px;align-items:center;min-height:60px;padding:10px 14px;cursor:pointer;list-style:none;font-size:15.5px;font-weight:700;line-height:1.5}
.qa summary::-webkit-details-marker{display:none}
.qa-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sage);color:var(--green);transition:background .2s,color .2s}
.qa-icon svg{width:20px;height:20px}
.qa[open] .qa-icon{background:var(--lime);color:var(--ink)}
.qa-toggle{position:relative;width:28px;height:28px;border:1px solid var(--line);border-radius:50%}
.qa-toggle::before,.qa-toggle::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;border-radius:2px;background:var(--ink);transition:transform .2s}
.qa-toggle::after{transform:rotate(90deg)}
.qa[open] .qa-toggle::after{transform:rotate(0)}
.qa p{padding:0 20px 18px 68px;font-size:15px;line-height:1.85;color:var(--muted)}
html[lang=ja] .qa p{font-size:14px;line-height:1.95}
.faq-contact{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:36px;padding:26px 28px;border-radius:20px;background:var(--sage)}
.faq-contact h3{font-size:21px}
.faq-contact p{margin-top:4px;font-size:14px;color:var(--muted)}
.faq-contact-actions{display:flex;flex-wrap:wrap;gap:12px}
.faq-contact .button{gap:10px;padding:13px 20px;border-radius:40px;background:#fff;font-size:14px}
.faq-contact .button:hover{background:var(--ink);color:var(--paper)}
.faq-contact .button svg{width:18px;height:18px}

@media(max-width:1100px){.arch-panels,.run-panels{grid-template-columns:1fr}}
@media(max-width:900px){.pillars{grid-template-columns:1fr;gap:28px}.safety-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.faq-groups{grid-template-columns:1fr}.faq-contact{flex-direction:column;align-items:stretch}}
@media(max-width:640px){.tile{height:250px}.pillars h3{font-size:26px;margin-top:16px}.s-head{font-size:13px}.arch{padding:12px}.arch-panel{padding:14px}.arch-stage{height:240px;--door:36%;--edge:40%;--card:106px}.rooms{grid-template-columns:1fr;gap:6px}.room{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;row-gap:0}.room svg{grid-row:span 2;margin:0}.threat{--card:106px}.threat-face{padding:5px 6px 5px 5px;gap:1px 4px}.threat-face svg{width:14px;height:14px}.threat-face b{font-size:10px}.wp-parts{grid-template-columns:repeat(2,minmax(0,1fr))}.part{font-size:10.5px}.room{padding:8px 6px}.room b{font-size:11px;white-space:nowrap}.room small{font-size:9.5px}.safety-cards{grid-template-columns:1fr}.run{padding:14px}.run-panel{padding:14px}.run-stage{height:160px}.run-banto .run-stage{height:200px}.crowd{padding:10px 12px}.crowd-count{min-width:0;font-size:17px}.traffic{flex-basis:100%}.what-intro{font-size:15px;margin-bottom:30px}.ba{padding:16px}.ba-row{grid-template-columns:1fr;gap:8px}.wk-card{width:84px;padding:5px 6px;gap:0 5px}.wk .lane{width:52px}.run-banto .run-stage{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.lane-wp{width:140px}.rack{width:130px;padding:10px;gap:6px}.rack i{height:20px}.rack i::before,.rack i::after{top:7px}.load{width:140px}.res-box b{font-size:11px}.cost{padding:18px 16px}.cost-row{grid-template-columns:1fr;gap:6px}.cost-gap{font-size:15px}.qa summary{grid-template-columns:36px minmax(0,1fr) 26px;gap:12px;font-size:14.5px}.qa-icon{width:36px;height:36px}.qa p{padding-left:18px}.faq-contact{padding:22px}.faq-contact .button{justify-content:center;width:100%}}