/* experience.css · the "build your business" journey on the home page and the inspection flow.
   The visitor's own name and industry drive every mock. Brand tokens (--b-*) are set live by experience.js. */
@font-face{font-family:Syncopate;font-weight:700;font-display:swap;src:url(../fonts/Syncopate-Bold.ttf) format("truetype")}
@font-face{font-family:Michroma;font-weight:400;font-display:swap;src:url(../fonts/Michroma-Regular.ttf) format("truetype")}
:root{--b-ink:#111214;--b-paper:#F4F2EE;--b-accent:#2F6BFF;--b-soft:#C9D6FF;--b-font:Aspekta,ui-sans-serif,system-ui,sans-serif;--b-weight:600;--b-style:normal;--b-case:uppercase;--b-track:-.03em}
.bw-font,.wmk{font-family:var(--b-font);font-weight:var(--b-weight);font-style:var(--b-style);text-transform:var(--b-case);letter-spacing:var(--b-track);line-height:.95}

/* ── 2 · name your business ── */
.x-start .in{height:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;padding:96px 12px 24px}
.x-start .in>p{color:#f2f2f2b3}
.bigname{width:min(900px,100%);height:96px;border-radius:999px;border:1px solid var(--gray-700);background:var(--gray-800);color:var(--gray-100);text-align:center;
  font:600 clamp(28px,4vw,48px)/1 Aspekta,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.04em;text-transform:uppercase;outline:none;padding:0 32px;transition:border-color .25s,background .25s}
.bigname::placeholder{color:#f2f2f240}
.bigname:focus{border-color:var(--gray-100);background:var(--gray-900)}
.x-start .opts{justify-content:center;max-width:820px}
.x-start .hint{color:#f2f2f266}
@media (max-width:767px){.x-start .in{gap:16px;padding:84px 12px 12px}.bigname{height:68px;padding:0 20px}.x-start .opt{height:34px;padding:0 12px}}

/* ── 3 · brand: directions, palette, and the name on real things ── */
.x-brand .in{height:100%;max-width:1360px;margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;padding:100px 12px 24px}
.x-brand .copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.x-brand .lede{color:#f2f2f2e6;margin-top:12px;max-width:420px}
.board{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{border-radius:14px;overflow:hidden;position:relative}
.tile.word{grid-column:span 2;background:var(--b-paper);color:var(--b-ink);height:150px;display:flex;align-items:center;justify-content:center;padding:0 22px;transition:background .5s,color .5s}
.tile.word .wmk{font-size:clamp(26px,3vw,44px);text-align:center;overflow-wrap:anywhere}
.tile.mono{background:var(--b-accent);color:var(--b-on);aspect-ratio:1;display:flex;align-items:center;justify-content:center;transition:background .5s}
.tile.mono .wmk{font-size:64px;width:116px;height:116px;border-radius:50%;border:5px solid currentColor;display:flex;align-items:center;justify-content:center;letter-spacing:0}
.tile.sws{display:grid;grid-template-rows:repeat(4,1fr);gap:4px;aspect-ratio:1;background:none}
.tile.sws i{border-radius:10px;display:flex;align-items:flex-end;justify-content:space-between;padding:8px 12px;font:600 11px/1 Aspekta,sans-serif;letter-spacing:.4px;text-transform:uppercase;font-style:normal;transition:background .5s,color .5s}
.apps{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:center;width:min(100%,calc((100svh - 140px) * 1.26))}
.app{position:relative;border-radius:16px;overflow:hidden;background:#383a3e33;isolation:isolate}
.app img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.app.sign{grid-column:span 2;aspect-ratio:16/9}
.app.van,.app.card{aspect-ratio:16/9}
.app .on-it{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;line-height:.95;z-index:1;overflow:hidden}
.app .tagk{position:absolute;left:12px;bottom:12px;z-index:2}
.app::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;background:linear-gradient(135deg,#ffffff38,#ffffff0a 35%,#ffffff05 65%,#ffffff2e);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (max-width:1023px){.x-brand .in{grid-template-columns:1fr;gap:14px;padding:80px 12px 12px;align-content:center}.x-brand .lede,.board .tile.sws,.board .tile.mono{display:none}
  .board{grid-template-columns:1fr}.tile.word{height:84px;grid-column:auto}.apps{max-height:none}}

/* ── 4 · website on a laptop and a phone ── */
.x-web .in{height:100%;max-width:1320px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 12px 20px;gap:22px}
.x-web .head{text-align:center;max-width:560px}
.x-web .head p{margin-top:12px;color:#f2f2f2e6}
.devices{position:relative;width:100%;flex:1;min-height:0;max-height:620px;display:flex;justify-content:center}
.bwin{position:relative;height:100%;aspect-ratio:16/10;max-width:calc(100% - 120px);border-radius:14px;overflow:hidden;background:var(--b-paper);box-shadow:0 50px 100px -40px #000,0 0 0 1px #ffffff1f;display:flex;flex-direction:column;color:var(--b-ink);transition:background .5s,color .5s}
.bwin .chrome{height:34px;flex:none;background:#e9e9ea;display:flex;align-items:center;gap:12px;padding:0 14px}
.bwin .chrome .dots{display:flex;gap:6px}.bwin .chrome .dots i{width:10px;height:10px;border-radius:50%;background:#cfcfd1}
.bwin .chrome .url{flex:1;max-width:340px;height:22px;border-radius:7px;background:#fff;color:#777;font:500 12px/22px Aspekta,sans-serif;padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.site{flex:1;min-height:0;display:flex;flex-direction:column;container-type:inline-size}
.site .hero{position:relative;flex:1;min-height:0;background:#333 center/cover;display:flex;flex-direction:column;justify-content:space-between;padding:2.6cqw 3.2cqw;color:#fff;transition:background-image .4s}
.site .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000004d,#0000 30%,#000a)}
.site .nav{position:relative;display:flex;justify-content:space-between;align-items:center}
.site .nav .wmk{font-size:2.1cqw}
.site .nav span{font:600 1.1cqw Aspekta,sans-serif;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:2.2cqw}
.site .copy2{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1.6cqw;max-width:62%}
.site .copy2 .h{font-size:5.6cqw;line-height:.92}
.site .copy2 .sub{font:500 1.35cqw/1.4 Aspekta,sans-serif;opacity:.9;max-width:36cqw}
.site .cta{display:inline-flex;align-items:center;gap:.8cqw;background:var(--b-accent);color:var(--b-on);font:600 1.15cqw/1 Aspekta,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:1.2cqw 2cqw;border-radius:99px;transition:background .5s}
.site .row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;padding:2cqw 3.2cqw}
.site .row div{border-radius:1cqw;background:var(--b-soft);padding:1.6cqw;display:flex;flex-direction:column;gap:.8cqw;transition:background .5s}
.site .row b{font-family:var(--b-font);font-style:var(--b-style);font-weight:var(--b-weight);text-transform:var(--b-case);font-size:1.5cqw;letter-spacing:var(--b-track)}
.site .row span{font:500 1cqw/1.4 Aspekta,sans-serif;opacity:.75}
.mphone{position:absolute;right:max(0px,calc(50% - 560px));bottom:-28px;height:78%;aspect-ratio:9/19;border-radius:36px;background:#0b0b0c;padding:9px;box-shadow:0 40px 80px -30px #000,0 0 0 1px #ffffff26}
.mphone .scr{height:100%;border-radius:28px;overflow:hidden;background:var(--b-paper);color:var(--b-ink);display:flex;flex-direction:column;container-type:inline-size;transition:background .5s}
.mphone .mh{position:relative;height:58%;background:#333 center/cover;display:flex;flex-direction:column;justify-content:space-between;padding:12cqw 7cqw 7cqw;color:#fff}
.mphone .mh::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0006,#0000 35%,#000b)}
.mphone .mh>*{position:relative}
.mphone .mh .wmk{font-size:7cqw}
.mphone .mh .h{font-size:13cqw;line-height:.92}
.mphone .acts{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;padding:5cqw}
.mphone .acts span{text-align:center;font:600 3.6cqw/1 Aspekta,sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:4.4cqw 0;border-radius:99px;background:var(--b-soft);transition:background .5s}
.mphone .acts span:first-child{background:var(--b-accent);color:var(--b-on)}
.mphone .lines{padding:0 5cqw;display:grid;gap:3cqw}.mphone .lines b{height:2.6cqw;border-radius:2cqw;background:currentColor;opacity:.12}.mphone .lines b:nth-child(2){width:70%}
@media (max-width:767px){.x-web .in{padding:80px 12px 12px;gap:14px}.x-web .head p{display:none}.devices{max-height:none;align-items:center}.bwin{display:none}.mphone{position:relative;right:auto;bottom:auto;height:min(100%,560px);border-radius:30px;padding:8px}.mphone .scr{border-radius:23px}}

/* ── 5 · marketing: an ad, a post and an email, all theirs ── */
.x-mkt .in{height:100%;max-width:1320px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 12px 20px;gap:26px}
.x-mkt .head{text-align:center;max-width:560px}
.x-mkt .head p{margin-top:12px;color:#f2f2f2e6}
.mkts{display:grid;grid-template-columns:1.05fr .9fr 1.05fr;gap:10px;width:100%;flex:1;min-height:0;max-height:560px}
.mk{position:relative;border-radius:16px;background:#383a3e33;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:hidden}
.mk>.s1{color:#f2f2f2b3;display:flex;align-items:center;gap:8px}
.mk>.s1 svg{width:14px;height:14px}
.ui-l{flex:1;min-height:0;border-radius:12px;background:#fff;color:#1f1f1f;overflow:hidden;font-family:Aspekta,ui-sans-serif,system-ui,sans-serif;letter-spacing:0;text-transform:none;display:flex;flex-direction:column}
.gs{padding:16px;display:flex;flex-direction:column;gap:14px}
.gs .gq{height:40px;border-radius:20px;box-shadow:0 1px 6px #0002;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:14px;color:#333}
.gs .gq svg{width:16px;height:16px;color:#888}
.gs .rs{display:flex;flex-direction:column;gap:5px}
.gs .sp{font-size:12px;font-weight:600;color:#202124}
.gs .dom{font-size:12px;color:#4d5156}
.gs .tt{font-size:19px;line-height:1.25;color:#1a0dab;font-weight:500}
.gs .ds{font-size:13px;line-height:1.5;color:#4d5156}
.gs .links{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.gs .links span{font-size:12px;color:#1a0dab;border:1px solid #dadce0;border-radius:16px;padding:6px 12px}
.gs .org{opacity:.55;display:flex;flex-direction:column;gap:5px}.gs .org b{height:9px;border-radius:5px;background:#e3e3e3}.gs .org b:nth-child(1){width:40%}.gs .org b:nth-child(2){width:80%}.gs .org b:nth-child(3){width:65%}
.ig .bar{display:flex;align-items:center;gap:10px;padding:10px 12px}
.ig .av{width:30px;height:30px;border-radius:50%;background:var(--b-accent);color:var(--b-on);display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .5s}
.ig .bar b{font-size:13px;font-weight:600}.ig .bar small{display:block;font-size:11px;color:#777}
.ig .pic{position:relative;flex:1;min-height:0;background:#333 center/cover;display:flex;align-items:flex-end;padding:16px}
.ig .pic::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 45%,#000a)}
.ig .pic .wmk{position:relative;color:#fff;font-size:26px}
.ig .icons{display:flex;gap:14px;padding:10px 12px 4px}.ig .icons svg{width:22px;height:22px;color:#1f1f1f}
.ig .cap{font-size:13px;line-height:1.4;padding:0 12px 12px}.ig .cap b{font-weight:600;margin-right:4px}
.em .top2{padding:12px 14px;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:3px}
.em .top2 b{font-size:14px;font-weight:600}.em .top2 small{font-size:12px;color:#666}
.em .body2{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--b-paper);color:var(--b-ink);transition:background .5s}
.em .bh{display:flex;justify-content:center;padding:14px}.em .bh .wmk{font-size:18px}
.em .bi{flex:1;min-height:90px;background:#333 center/cover;margin:0 14px;border-radius:8px}
.em .bt{padding:14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.em .bt .h{font-size:20px;line-height:1}
.em .bt p{font-size:12.5px;line-height:1.5;opacity:.8;max-width:280px}
.em .bt .cta{background:var(--b-accent);color:var(--b-on);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:10px 18px;border-radius:99px;transition:background .5s}
@media (max-width:899px){.x-mkt .in{padding:80px 12px 12px;gap:12px}.x-mkt .head p{display:none}.mkts{grid-template-columns:1fr;max-height:none}.mk{display:none}.mk.on{display:flex}.x-mkt .tabs{display:flex}}
.x-mkt .tabs{display:none;gap:6px}

/* ── 7 · results: their dashboard ── */
.x-res .in{height:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 12px 20px;gap:26px}
.x-res .head{text-align:center;max-width:560px}.x-res .head p{margin-top:12px;color:#f2f2f2e6}
.dsh{width:100%;flex:1;min-height:0;max-height:540px;border-radius:18px;background:#111214;box-shadow:0 50px 100px -40px #000,inset 0 0 0 1px #ffffff17;overflow:hidden;display:grid;grid-template-columns:200px 1fr;font-family:Aspekta,ui-sans-serif,system-ui,sans-serif;letter-spacing:0;text-transform:none}
.dsh aside{background:#0e0f11;padding:18px 14px;display:flex;flex-direction:column;gap:4px;box-shadow:inset -1px 0 0 #ffffff0f}
.dsh aside .br{display:flex;align-items:center;gap:10px;margin:0 6px 16px;font-size:13px;font-weight:600}
.dsh aside .br i{width:26px;height:26px;border-radius:8px;background:var(--b-accent);color:var(--b-on);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;transition:background .5s}
.dsh aside a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:#f2f2f2b3;font-size:13px}
.dsh aside a.on{background:#ffffff0d;color:var(--gray-100)}
.dsh aside a svg{width:15px;height:15px}
.dsh main{padding:18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.dsh .dt{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dsh .dt b{font-size:16px;font-weight:600}
.dsh .smp{font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#f2f2f280;box-shadow:inset 0 0 0 1px #ffffff1f;padding:4px 8px;border-radius:99px}
.dsh .kp{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dsh .kp div{background:#1c1d20;border-radius:12px;padding:12px 14px}
.dsh .kp span{display:block;font-size:11.5px;color:#f2f2f280}
.dsh .kp b{display:block;font-size:26px;font-weight:600;letter-spacing:-.6px;margin-top:4px;font-variant-numeric:tabular-nums}
.dsh .sp2{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;flex:1;min-height:0}
.dsh .ch,.dsh .fd{background:#1c1d20;border-radius:12px;padding:14px;display:flex;flex-direction:column;min-height:0}
.dsh .lb{display:flex;justify-content:space-between;color:#f2f2f280;font-size:11.5px;margin-bottom:10px}
.dsh .bars{flex:1;display:flex;align-items:flex-end;gap:7px;min-height:90px}
.dsh .bars i{flex:1;border-radius:5px 5px 2px 2px;background:#f2f2f2;opacity:.85;height:var(--h);transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.33,1,.68,1)}
.dsh .bars i:last-child{background:var(--b-accent);opacity:1}
.dsh.run .bars i{transform:scaleY(1)}
.dsh .fd ul{list-style:none;display:flex;flex-direction:column;gap:8px;overflow:hidden;flex:1}
.dsh .fd li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:8px;border-radius:10px;background:#ffffff06;font-size:12.5px;animation:bin .6s cubic-bezier(.33,1,.68,1) both}
.dsh .fd li .ic3{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#ffffff0f}
.dsh .fd li .ic3 svg{width:14px;height:14px}
.dsh .fd li small{display:block;color:#f2f2f280;font-size:11px}
.dsh .fd li time{font-size:11px;color:#f2f2f280}
@media (max-width:899px){.x-res .in{padding:80px 12px 12px;gap:12px}.x-res .head p{display:none}.dsh{grid-template-columns:1fr;max-height:none}.dsh aside,.dsh .ch{display:none}.dsh .sp2{grid-template-columns:1fr}.dsh .kp{grid-template-columns:1fr 1fr}.dsh .kp div:nth-child(n+3){display:none}}

/* ── 9 · the inspection: what they'll get ── */
.x-ins .in{height:100%;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:100px 12px 24px}
.x-ins .copy{display:flex;flex-direction:column;gap:22px}
.x-ins .copy .lede{color:#f2f2f2e6;margin-top:12px;max-width:440px;line-height:17px}
.x-ins ul.gets{list-style:none;display:grid;gap:10px}
.x-ins ul.gets li{display:flex;align-items:center;gap:10px;color:#f2f2f2e6}
.x-ins ul.gets svg{width:16px;height:16px;flex:none}
.report{position:relative;border-radius:18px;background:#f7f6f3;color:#141414;padding:30px 30px 26px;box-shadow:0 50px 100px -40px #000;font-family:Aspekta,ui-sans-serif,system-ui,sans-serif;letter-spacing:0;text-transform:none;display:flex;flex-direction:column;gap:20px;max-height:100%;overflow:hidden}
.report .rt{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.report .rt small{display:block;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#777}
.report .rt h3{font-size:30px;line-height:1;font-weight:600;letter-spacing:-.8px;margin-top:8px;text-transform:uppercase}
.report .rt .ow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#141414}
.scores{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scores div{border-radius:12px;background:#fff;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 1px 0 #0000000d}
.scores .rg{position:relative;width:58px;height:58px}
.scores .rg svg{width:100%;height:100%;transform:rotate(-90deg)}
.scores .rg circle{fill:none;stroke-width:7}.scores .rg .b{stroke:#ebe9e4}.scores .rg .f{stroke:#141414;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:var(--o,100);transition:stroke-dashoffset 1.2s cubic-bezier(.33,1,.68,1)}
.scores .rg b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600}
.scores span{font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#555}
.finds{display:flex;flex-direction:column;gap:8px}
.finds div{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.35}
.finds i{width:10px;height:10px;border-radius:50%;background:#141414;justify-self:center}
.finds i.mid{background:#9a9a9a}.finds i.ok{background:none;box-shadow:inset 0 0 0 2px #141414}
.finds small{font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#777}
.report .rf{display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#888}
@media (max-width:899px){.x-ins .in{grid-template-columns:1fr;gap:16px;padding:80px 12px 12px;align-content:center}.x-ins .copy .lede,.x-ins ul.gets{display:none}
  .report{padding:18px;gap:12px}.report .rt h3{font-size:20px}.scores{grid-template-columns:repeat(3,1fr)}.scores div:nth-child(n+4){display:none}.scores .rg{width:44px;height:44px}.finds div:nth-child(n+3){display:none}.finds div{font-size:13px;padding:10px 12px}}

/* ── capabilities: everything, grouped ── */
.idx .grp a{font-size:clamp(22px,2.3vw,34px)}

/* ── inspection page: three short steps ── */
.insp{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;gap:0}
.insp .left{position:relative;display:flex;flex-direction:column;justify-content:center;padding:140px clamp(24px,5vw,80px) 64px}
.insp .right{position:relative;overflow:hidden}
.insp .right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.insp .right::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--gray-900),#0c0d0e00 30%)}
.insp .right .report{position:absolute;z-index:1;left:8%;right:8%;bottom:8%;transform:scale(.92);transform-origin:bottom left}
.prog2{display:flex;gap:6px;margin-bottom:34px;max-width:420px}
.prog2 i{flex:1;height:3px;border-radius:3px;background:#ffffff26;overflow:hidden;position:relative}
.prog2 i::after{content:"";position:absolute;inset:0;background:var(--gray-100);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.33,1,.68,1)}
.prog2 i.on::after{transform:none}
.step{display:none;flex-direction:column;gap:22px;max-width:560px}
.step.on{display:flex;animation:bin .6s cubic-bezier(.33,1,.68,1) both}
.step .lede{color:#f2f2f2e6;line-height:17px;max-width:460px}
.step label.f{display:flex;flex-direction:column;gap:8px;color:#f2f2f2b3}
.step input.t{height:52px;border-radius:14px;border:1px solid var(--gray-700);background:var(--gray-900);color:var(--gray-100);padding:0 16px;font:500 17px/1 Aspekta,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .2s;width:100%}
.step input.t:focus{border-color:var(--gray-100)}
.step input.t[aria-invalid=true]{border-color:#f2f2f2}
.step .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.step .err{color:#f2f2f2;min-height:14px}
.step .nav2{display:flex;gap:8px;align-items:center;margin-top:6px}
.step .back{color:#f2f2f2b3;padding:0 14px;height:44px}
.step .opt{text-transform:none}
.done2 .big{font-size:clamp(44px,6vw,88px);line-height:.9;letter-spacing:-.04em;font-weight:600;text-transform:uppercase}
@media (max-width:899px){.insp{grid-template-columns:1fr}.insp .right{display:none}.insp .left{padding:110px 16px 40px}.step .row2{grid-template-columns:1fr}}

/* the name, placed on the blank sign board, van panel and cards (measured from the photos, in %) */
#on-sign{left:13%;top:4.5%;width:74%;height:14.5%;color:var(--b-sign);transition:color .5s}
#on-van{left:44%;top:26%;width:42%;height:20%;color:var(--b-ink);mix-blend-mode:multiply;transition:color .5s}
#on-card{left:10.5%;top:29%;width:35.5%;height:39%;color:var(--b-ink);padding:0 6%;transition:color .5s}
#on-card2{left:53.5%;top:29%;width:37%;height:39%;justify-content:flex-start;align-items:flex-end;padding:0 6% 6% 7%;text-align:left;color:var(--b-ink);font:500 clamp(6px,.78vw,11px)/1.5 Aspekta,sans-serif;letter-spacing:0;text-transform:none;opacity:.85}
#on-card2 b{font-family:var(--b-font);font-style:var(--b-style);font-weight:var(--b-weight);text-transform:var(--b-case);letter-spacing:var(--b-track)}
.app .on-it.wmk{white-space:nowrap;line-height:1}
@media (max-width:1023px){.apps{width:100%}#on-card2{font-size:7px}}
#on-card2>span{display:block;max-width:100%;overflow:hidden}
#on-card2>span>i{white-space:nowrap}
#on-card.wmk{white-space:normal;line-height:1.05}