/* FormNest · strona. Marka (logo, krój, kolory) jak w prezentacji, układ i komponenty własne strony. */
:root{
  --bg:#EEF0EF; --alt:#E4E7E6; --paper:#FAFBFA;
  --ink:#121417; --ink2:#5B6068; --ink3:#9A9FA6; --hair:#CDD1D4; --hair2:#DADDDF;
  --red:#E0533F; --red-t:#C23B28; --green:#2E9150; --green-t:#237A41; --yel:#F2C230; --label:#F7F5EE;
  --font:"Archivo",Arial,sans-serif;
  --gut:16px; --top:60px;
}
@media (min-width:640px){:root{--gut:32px}}
@media (min-width:1000px){:root{--gut:48px;--top:68px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
svg text{font-family:var(--font)}
h1,h2,h3{margin:0;font-weight:600;line-height:1.08;letter-spacing:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
figure{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:5px;text-decoration:none}
.skip:focus{top:8px}

h1{font-size:clamp(42px,5.4vw,80px);font-stretch:80%;line-height:1.02}
h2{font-size:clamp(30px,3.3vw,46px);font-stretch:86%}
h3{font-size:clamp(21px,1.8vw,25px);font-stretch:90%;line-height:1.2}
.lead{font-size:clamp(19px,1.5vw,22px);line-height:1.5;color:var(--ink2);max-width:36em}

/* ---------- buttons, links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:1.5px solid var(--ink);border-radius:5px;background:var(--ink);color:var(--bg);font:600 17px/1.1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.btn:hover{background:#2B3036;border-color:#2B3036}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:42px;padding:0 16px;font-size:15px}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-yel{background:var(--yel);border-color:var(--yel);color:var(--ink)}
.btn-yel:hover{background:#F7D46A;border-color:#F7D46A}
.link{padding:0;border:0;background:none;font:600 17px var(--font);color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;cursor:pointer;transition:color .18s ease}
.link:hover{color:var(--green-t)}
.link::after{content:" →"}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .2s ease}
.top.is-scrolled{border-bottom-color:var(--hair)}
.top-in{display:flex;align-items:center;gap:20px;height:var(--top)}
.brand{display:inline-flex;align-items:center;gap:9px;margin:0;font-weight:700;font-size:20px;font-stretch:90%;text-decoration:none;color:inherit}
.menu{display:flex;gap:4px;margin-left:auto}
.menu a{padding:8px 12px;border-radius:5px;font-size:16px;text-decoration:none;transition:background-color .15s ease}
.menu a:hover{background:var(--alt)}
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.menu-btn{display:none;min-height:42px;padding:0 14px;border:1.5px solid var(--ink);border-radius:5px;background:none;font:600 15px var(--font);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
/* both labels share one cell, so the button keeps the width of the longer one */
.menu-btn span{grid-area:1/1}
.menu-btn[aria-expanded="true"] span:first-child,.menu-btn[aria-expanded="false"] span:last-child{visibility:hidden}
.brand,.top-cta,.menu-btn{flex-shrink:0}
@media (max-width:719px){
  .menu{display:none;position:absolute;top:var(--top);left:0;right:0;flex-direction:column;gap:0;padding:4px var(--gut) 18px;background:var(--bg);border-bottom:1px solid var(--hair)}
  .menu.is-open{display:flex}
  .menu a{padding:13px 0;border-radius:0;border-top:1px solid var(--hair2);font-size:19px}
  .menu a:first-child{border-top:0}
  .menu a:hover{background:none}
  .top-cta{margin-left:auto}
  .menu-btn{display:inline-grid;place-items:center}
}
/* logo + "Umów spotkanie" + menu button need ~425px; below that the CTA goes (Kontakt is in the menu) */
@media (max-width:439px){.top-cta{display:none}.menu-btn{margin-left:auto}}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,8vw,120px) 0}
.sec-alt{background:var(--alt)}
.sec-head{max-width:820px;margin-bottom:clamp(36px,4.5vw,60px)}
.sec-head p{margin-top:16px;font-size:clamp(18px,1.35vw,20px);color:var(--ink2);max-width:38em}
.page-head{padding:clamp(40px,6vw,88px) 0 clamp(40px,5vw,64px)}
.page-head h1{font-size:clamp(36px,4.2vw,60px);font-stretch:84%}
.page-head .lead{margin-top:20px}

/* fixed-size mock-ups scaled to their container */
.frame-box{position:absolute;left:0;top:0;transform-origin:0 0}
[data-mock],.demo-phone,.tour-win{position:relative;width:100%}
.win{position:absolute;left:0;top:0;width:1280px;height:836px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1.5px #B9BEC2,0 24px 48px -28px rgba(18,20,23,.35)}
.win-bar{position:relative;height:36px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#E6E8EA;border-bottom:1px solid #CFD3D6}
.win-bar i{width:12px;height:12px;border-radius:50%;background:#C5C9CD}
.win-bar span{position:absolute;left:0;right:0;text-align:center;font:600 14px -apple-system,"Helvetica Neue",Arial,sans-serif;color:#5B6068;pointer-events:none}
.win-body{position:relative;width:1280px;height:800px;overflow:hidden}
.win .dk{transform:none}

/* ---------- home: hero ---------- */
.hero{padding:clamp(32px,5vw,72px) 0 clamp(72px,8vw,120px)}
.hero-grid{display:grid;gap:40px;align-items:center}
.hero-copy .lead{margin-top:24px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}}

/* ---------- home: demo ---------- */
.demo{display:grid;gap:40px;align-items:center}
.demo-copy>p{margin-top:16px;color:var(--ink2);max-width:34em}
.demo-k{margin-top:32px;font-size:15px;font-weight:600}
.demo-labels{display:grid;grid-template-columns:repeat(2,minmax(0,232px));gap:12px;margin-top:12px}
.lab{display:block;padding:9px 13px 8px;background:var(--label);border:1px solid #BDBAB0;border-radius:2px;font:inherit;text-align:left;color:#111;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.lab small{display:block;font-size:10.5px;color:#666;white-space:nowrap}
@media (max-width:479px){.lab{padding:8px 10px 7px}.lab small{white-space:normal}.lab-row{gap:6px}.lab-row b{font-size:15px;letter-spacing:0}}
.lab-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:4px}
.lab-row b{font-size:17px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.lab-row span{font-size:11px;color:#666;white-space:nowrap}
.lab:hover{transform:translateY(-2px);border-color:var(--ink)}
.lab[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.demo-form{margin-top:28px;max-width:440px}
.demo-form label{display:block;margin-bottom:8px;font-size:15px;font-weight:600}
.demo-row{display:flex;gap:8px}
.demo-row input{flex:1;min-width:0}
.demo-msg{min-height:1.5em;margin-top:8px;font-size:15px;color:var(--ink2)}
.hint{padding:0;border:0;background:none;font:600 15px var(--font);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hint:hover{color:var(--green-t)}
.demo-reset{font-size:16px}
.demo-reset::after{content:""}
.demo-phone{max-width:290px;justify-self:center}
.demo-phone .act{cursor:pointer}
.demo-phone .act:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.demo-phone .mb-plan g{cursor:pointer}
@media (min-width:1000px){.demo{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}}
/* phones: the plan sits right under the intro, above the labels and the code field that drive it */
@media (max-width:999px){
  .demo{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .demo-copy{display:contents}
  .demo-copy>h2{order:1}
  .demo-copy>p:not(.demo-k){order:2}
  .demo-phone{order:3;max-width:230px;margin:28px auto 0}
  .demo-k{order:4}
  .demo-labels{order:5}
  .demo-form{order:6}
  .demo-reset{order:7;align-self:flex-start}
}

/* ---------- tabs (segmented) ---------- */
.seg{display:inline-flex;max-width:100%;overflow-x:auto;border:1.5px solid var(--ink);border-radius:6px;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg [role="tab"]{flex:none;padding:10px 18px;border:0;border-left:1.5px solid var(--ink);background:none;font:600 16px var(--font);color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.seg [role="tab"]:first-child{border-left:0}
.seg [role="tab"]:hover{background:var(--alt)}
.seg [role="tab"][aria-selected="true"]{background:var(--ink);color:var(--bg)}
.seg [role="tab"]:focus-visible{outline-offset:-5px;outline-color:var(--yel)}
@media (max-width:719px){
  .seg{display:flex;flex-wrap:wrap;gap:6px;border:0;overflow:visible}
  .seg [role="tab"]{padding:9px 14px;border:1.5px solid var(--ink);border-radius:5px;font-size:15px}
  .seg [role="tab"]:first-child{border-left:1.5px solid var(--ink)}
}


/* home: mobile / desktop switch */
.sec-apps{padding:clamp(56px,6vw,96px) 0;overflow-x:clip}
.apps{display:grid;gap:32px}
.apps-intro{margin-top:14px;color:var(--ink2);max-width:30em}
.switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-top:28px;padding:3px;border:1.5px solid var(--ink);border-radius:7px;max-width:100%}
.switch-pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:4px;background:var(--ink);transform:translateX(calc(var(--i, 0) * 100%));transition:transform .45s cubic-bezier(.65,0,.35,1)}
.switch [role="tab"]{position:relative;z-index:1;padding:9px 16px;border:0;background:none;font:600 15px var(--font);color:var(--ink);cursor:pointer;white-space:nowrap;transition:color .3s ease}
.switch [role="tab"][aria-selected="true"]{color:var(--bg)}
.switch [role="tab"]:focus-visible{outline:2px solid var(--yel);outline-offset:-2px;border-radius:4px}
@media (max-width:419px){.switch{display:grid}.switch [role="tab"]{padding:9px 6px;font-size:14px}}
.apps-copy{display:grid;margin-top:24px}
.app-pane{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.app-pane.is-on{opacity:1;transform:none;transition-delay:.12s}
.app-pane p{color:var(--ink2);max-width:30em}
.app-pane .link{display:inline-block;margin-top:16px}
/* the stage takes the height of the text column; mock-ups size themselves from it */
.apps-stage{position:relative;aspect-ratio:4/5;container-type:size}
.app-vis{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .35s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.app-vis.is-phone{transform:translateX(-28px) scale(.97)}
.app-vis.is-desk{transform:translateX(28px) scale(.97)}
.app-vis.is-on{opacity:1;transform:none;transition-delay:.06s}
.app-vis.is-phone [data-mock]{width:auto;height:96cqh}
.app-vis.is-desk [data-mock]{width:min(100cqw,calc(96cqh * 1280 / 836))}
@media (min-width:600px){.apps-stage{aspect-ratio:16/11}}
@media (min-width:1000px){
  .apps{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(420px,auto);gap:56px;align-items:stretch}
  .apps-stage{aspect-ratio:auto}
}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
.compare{width:100%;border-collapse:collapse;font-size:17px}
.compare th,.compare td{padding:18px 24px 18px 0;text-align:left;vertical-align:top;border-top:1px solid var(--hair)}
.compare thead th{padding-top:0;border-top:0;border-bottom:1.5px solid var(--ink);font-size:15px;font-weight:600;color:var(--ink2)}
.compare tbody th{width:24%;font-weight:600}
.compare td{width:38%;color:var(--ink2)}
.compare td.is-fn,.compare thead th.is-fn{color:var(--ink)}
.after-table{margin-top:32px;max-width:46em;color:var(--ink2)}
.after-table .link{font-size:inherit}
@media (max-width:719px){
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto !important}
  .compare thead{display:none}
  .compare tr{padding:16px 0;border-top:1px solid var(--hair)}
  .compare th,.compare td{padding:0;border:0}
  .compare td{margin-top:10px}
  .compare td::before{content:attr(data-label);display:block;font-size:13px;font-weight:600;color:var(--ink2)}
}

/* home: start */
.start{display:grid;gap:56px}
.deck-thumb{display:block;position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--hair);transition:box-shadow .18s ease}
.deck-thumb:hover{box-shadow:0 0 0 2px var(--ink)}
.deck-thumb iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
.start-deck p,.start-steps>p{margin-top:16px;color:var(--ink2);max-width:32em}
.start .link{display:inline-block;margin-top:18px}
.steps{margin:20px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);padding:12px 0;border-top:1px solid var(--hair);counter-increment:s}
.steps li:last-child{border-bottom:1px solid var(--hair)}
.steps li::before{content:counter(s);font-weight:600}
@media (min-width:1000px){.start{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px}}

/* band + footer */
.band{padding:clamp(64px,8vw,104px) 0;background:var(--ink);color:var(--bg)}
.band :focus-visible{outline-color:var(--yel)}
.band-in{display:grid;gap:24px}
.band h2{font-size:clamp(32px,4.2vw,58px);font-stretch:82%;max-width:14em}
.band-side p{font-size:19px;color:#C5CACE;max-width:26em}
.band-side .btn{margin-top:24px}
@media (min-width:900px){.band-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}.band-side{padding-bottom:6px;border-left:1px solid #2F343A;padding-left:40px}}
/* a one-line heading sits in the middle of the text and button, not at their bottom */
@media (min-width:900px){.band.is-short .band-in{align-items:center}.band.is-short .band-side{padding-bottom:0}}
.foot{padding:32px 0 40px;background:var(--ink);color:#AEB3B8;border-top:1px solid #2A2E33;font-size:15px}
.foot :focus-visible{outline-color:var(--yel)}
.foot-in{display:grid;gap:20px}
.foot .brand{color:var(--bg);font-size:18px}
.foot-brand p{margin-top:6px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{color:var(--bg);text-underline-offset:4px}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{text-decoration:underline}
@media (min-width:900px){.foot-in{grid-template-columns:minmax(0,4fr) auto auto auto;align-items:center;gap:40px}.foot-copy{text-align:right}}

/* ---------- product page ---------- */

.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
.phones figcaption{margin-top:12px;font-size:15px;color:var(--ink2)}
@media (min-width:900px){.phones{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.prose-cols{display:grid;gap:16px 48px;margin-top:48px;color:var(--ink2)}
@media (min-width:900px){.prose-cols{grid-template-columns:1fr 1fr}}
.tour .seg{margin-bottom:28px}
.tour-cap{margin-top:22px;max-width:40em;color:var(--ink2)}
.tour-cap[hidden]{display:none}
.tour-cap b{color:var(--ink);font-weight:600}
.tour-win .dk-nav li,.tour-win .dk-table tbody tr,.tour-win .dk-btn2{cursor:pointer}

.dxf-view{position:relative;aspect-ratio:1200/760;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--hair);--pos:50%;touch-action:pan-y}
.dxf-before,.dxf-after{position:absolute;inset:0}
.dxf-view svg{display:block;width:100%;height:100%}
.dxf-before{background:var(--paper)}
.dxf-after{clip-path:inset(0 0 0 var(--pos))}
.dxf-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;pointer-events:none}
.dxf-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--yel)}
.dxf-handle span{position:absolute;top:50%;left:-22px;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--yel);border:1.5px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:15px}
.dxf-view input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.dxf-view:has(input:focus-visible) .dxf-handle span{outline:2px solid var(--ink);outline-offset:3px}
.dxf-tags{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:15px}
.dxf-tags b{font-weight:600}
.dxf-tags span{display:block;color:var(--ink2)}
.dxf-tags>div:last-child{text-align:right}
@media (max-width:599px){.dxf-tags{flex-direction:column;gap:10px}.dxf-tags>div:last-child{text-align:left}}



.faq{display:grid;gap:28px}
.faq-head p{margin-top:14px;max-width:22em;color:var(--ink2)}
.faq-list details{border-top:1px solid var(--hair)}
.faq-list details:last-child{border-bottom:1px solid var(--hair)}
.faq-list summary{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:19px 0;list-style:none;cursor:pointer;font-size:19px;font-weight:600;font-stretch:94%;line-height:1.3}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;font-size:26px;font-weight:400;line-height:.8;transition:transform .2s ease}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.faq-list details p{max-width:44em;padding-bottom:20px;color:var(--ink2)}
@media (min-width:1000px){.faq{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}}

/* ---------- contact page ---------- */
.contact-page{padding:clamp(40px,6vw,88px) 0 clamp(72px,8vw,120px)}
.contact{display:grid;gap:48px}
.contact-main h1{font-size:clamp(36px,4.2vw,60px);font-stretch:84%}
.contact-main .lead{margin-top:20px}
.contact-main .lead a{color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1.5px;white-space:nowrap}
.form{display:grid;gap:20px;margin-top:36px}
.form-row{display:grid;gap:20px}
@media (min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form label,.choice legend{display:block;margin-bottom:6px;padding:0;font-size:15px;font-weight:600}
.form label span{font-weight:400;color:var(--ink2)}
input[type=text],input[type=email],input[type=tel],select,textarea{display:block;width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--ink3);border-radius:5px;background:var(--paper);font:17px var(--font);color:var(--ink);transition:border-color .15s ease}
textarea{min-height:120px;resize:vertical;line-height:1.5}
input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,textarea:hover{border-color:var(--ink2)}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(242,194,48,.6)}
.choice{margin:0;padding:0;border:0;min-width:0}
.choice-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid var(--ink3);border-radius:5px;overflow:hidden;background:var(--paper)}
.choice-opts label{position:relative;margin:0;font-weight:600}
.choice-opts label+label{border-left:1.5px solid var(--ink3)}
.choice-opts input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.choice-opts span{display:flex;align-items:center;justify-content:center;min-height:45px;padding:0 8px;font-size:16px;color:var(--ink);transition:background-color .15s ease,color .15s ease}
.choice-opts label:hover span{background:var(--alt)}
.choice-opts input:checked+span{background:var(--ink);color:var(--bg)}
.choice-opts input:focus-visible+span{box-shadow:inset 0 0 0 3px var(--yel)}
.form-foot{display:flex;align-items:center;gap:16px}
.form-done{padding:18px 20px;background:var(--paper);box-shadow:0 0 0 1px var(--hair)}
.form-done[hidden]{display:none}
.form-done b{display:block;font-weight:600}
.form-done.is-error{box-shadow:0 0 0 1px var(--red)}
.form-done.is-error b{color:var(--red-t)}
.form-done a{color:var(--ink);text-underline-offset:3px}
.btn:disabled{cursor:default;opacity:.55;transform:none}
.btn:disabled:hover{background:var(--ink);border-color:var(--ink)}
/* honeypot for bots, kept out of sight and out of the tab order */
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-art{margin:0}
/* phones: the building stands between the intro and the form, so it is seen before typing starts */
@media (max-width:999px){
  .contact{display:flex;flex-direction:column;gap:0}
  .contact-main{display:contents}
  .contact-main h1{order:1}
  .contact-main .lead{order:2}
  .contact-art{order:3;width:100%;max-width:340px;margin:24px auto 0}
  .form{order:4}
}
.build{position:relative;aspect-ratio:780/600;user-select:none}
.build svg{display:block;width:100%;height:100%;overflow:visible}
.build polygon{transition:fill .15s ease}
.build-tag{position:absolute;left:0;top:0;z-index:2;min-width:150px;padding:7px 11px 6px;background:var(--label);border:1px solid #BDBAB0;font:11px Arial,sans-serif;color:#555;pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 14px));transition:opacity .15s ease}
.build-tag.is-on{opacity:1}
.build-tag b{display:block;margin-top:2px;font-size:16px;letter-spacing:.02em;color:#111}
.contact-art figcaption{display:grid;gap:2px;margin-top:8px;font-size:15px;color:var(--ink2)}
.build-count{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
@media (min-width:1000px){.contact{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:72px;align-items:start}.contact-art{position:sticky;top:calc(var(--top) + 32px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* =========================================================
   App mock-ups (same markup as the presentation, from js/ui.js)
   ========================================================= */

.phone{position:absolute;left:0;top:0;width:300px;height:620px;border-radius:48px;background:#17181A;padding:11px;box-shadow:inset 0 0 0 1.5px #3B3D41;transform-origin:0 0}
.phone::before{content:"";position:absolute;right:-3px;top:150px;width:3px;height:70px;border-radius:0 2px 2px 0;background:#2A2C30}
.phone .screen{border-radius:38px;overflow:hidden;height:100%;position:relative;background:#fff}
.phone .island{position:absolute;top:10px;left:50%;width:90px;height:26px;margin-left:-45px;border-radius:14px;background:#000;z-index:30}

/* desktop app (1280x800, scaled into the laptop screen) */
.dk{position:absolute;left:0;top:0;width:1280px;height:799px;transform-origin:0 0;transform:scale(.6156);display:flex;background:#fff;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;color:#1a2332;line-height:normal}
.dk-side{flex:0 0 240px;background:#1f2937;color:#fff;display:flex;flex-direction:column;padding:20px 0}
.dk-logo{padding:0 20px 20px;font-size:20px;font-weight:700}
.dk-nav{list-style:none;margin:0;padding:0;flex:1}
.dk-nav li{padding:12px 20px;font-size:15px}
.dk-nav li.on{background:#2563eb}
.dk-out{margin:0 20px;padding:10px;border:1px solid #6b7280;border-radius:4px;text-align:center;font-size:14px}
.dk-main{flex:1;position:relative;overflow:hidden}
.dk-page{position:absolute;inset:0;padding:30px}
.dk h1{font-size:30px;margin:0 0 8px;font-weight:700;font-stretch:100%;line-height:normal}
.dk-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dk-btn{display:inline-block;padding:8px 16px;border-radius:4px;font-size:14px;background:#1a2332;color:#fff}
.dk-btn2{display:inline-block;padding:8px 16px;border-radius:4px;font-size:14px;border:1px solid #d1d5db;color:#1a2332;background:#fff}
.dk-muted{color:#6b7280;font-size:14px}
.dk-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;max-width:720px}
.dk-card{border:1px solid #e5e7eb;border-radius:8px;padding:20px 24px}
.dk-card .l{font-size:13px;color:#6b7280;margin-bottom:4px}
.dk-card .v{font-size:28px;font-weight:700;margin-bottom:8px;font-variant-numeric:tabular-nums}
.dk-track{background:#e5e7eb;border-radius:8px;height:8px;overflow:hidden}
.dk-track i{display:block;height:100%;background:#2563eb}
.dk-card .v small{font-size:16px;font-weight:500;color:#6b7280}
.dk-list{border:1px solid #e5e7eb;border-radius:8px}
.dk-row{display:grid;grid-template-columns:1fr 200px 90px;gap:16px;align-items:center;padding:12px 16px;border-bottom:1px solid #e5e7eb;font-size:14px}
.dk-row:last-child{border-bottom:0}
.dk-row b{display:block}
.dk h2{font-size:20px;margin:30px 0 12px;font-stretch:100%}
.dk-table{width:100%;border-collapse:collapse;margin-top:24px;font-size:14px}
.dk-table th{text-align:left;padding:10px 16px;border-bottom:2px solid #1a2332;font-weight:600}
.dk-table td{padding:10px 16px;border-bottom:1px solid #e5e7eb}
.dk-chip{display:inline-block;padding:3px 9px;border-radius:4px;font-size:12px;background:#e8f0fe;color:#1d4ed8}
.dk-plan-tb{display:flex;align-items:center;gap:8px;margin:12px 0}
.dk-plan-tb .sp{flex:1}
.dk-ws{display:flex;gap:16px;height:616px}
.dk-vp{flex:1;background:#111;border:1px solid #333;position:relative;overflow:hidden}
.dk-vp svg{position:absolute;inset:0;width:100%;height:100%}
.dk-ps{width:260px;display:flex;flex-direction:column;gap:8px}
.dk-in{border:1px solid #d1d5db;border-radius:6px;padding:9px 12px;font-size:14px;color:#9ca3af;min-height:38px}
.dk-in.filled{color:#1a2332}
.dk-el{flex:1;border:1px solid #333;list-style:none;margin:0;padding:0;overflow:hidden;background:#fff}
.dk-el li{padding:4px 8px;font-size:13px;display:flex;justify-content:space-between}
.dk-el li i{width:9px;height:9px;border-radius:50%;align-self:center}
.dk-el li.sel{background:rgba(255,224,102,.35)}
.dk-panel{border-top:1px solid #333;padding-top:8px;font-size:13px;line-height:1.7}
.dk-drop{margin-top:22px;border:2px dashed #d1d5db;border-radius:8px;height:200px;display:grid;place-items:center;color:#6b7280;font-size:16px;text-align:center}
.dk-modal{position:absolute;inset:0;background:rgba(17,24,39,.45);display:grid;place-items:center}
.dk-modal>div{background:#fff;border-radius:8px;padding:28px 32px;width:420px}
.dk-modal h3{margin:0 0 16px;font-size:20px;font-stretch:100%;line-height:normal}

/* mobile app (390x839, scaled into the phone screen) */
.mb{position:absolute;left:0;top:0;width:390px;height:839px;transform-origin:0 0;transform:scale(.7128);overflow:hidden;background:#F3F4F6;font-family:-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;color:#1A2332;line-height:normal}
.mb-scr{position:absolute;inset:0;background:#F3F4F6;overflow:hidden}
.mb-status{height:54px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 30px 8px;font-size:15px;font-weight:600}
.mb-bar{background:#1F2937;color:#fff;padding:0 16px;height:60px;display:flex;align-items:center;gap:14px;font-size:19px;font-weight:700}
.mb-bar small{display:block;font-size:12px;font-weight:400;opacity:.75}
.mb-bar .sp{flex:1}
.mb-body{padding:18px 16px}
.mb-h{font-size:22px;font-weight:700;margin:0 0 2px}
.mb-m{color:#6B7280;font-size:13px}
.mb-card{background:#fff;border-radius:12px;padding:14px 16px;margin-top:12px;display:flex;align-items:center;gap:10px}
.mb-card .t{flex:1}
.mb-card b{font-size:16px;font-weight:600;display:block}
.mb-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:6px;font-size:15px;font-weight:600}
.mb-btn.blue{background:#2563EB;color:#fff}
.mb-btn.green{background:#1E7E34;color:#fff}
.mb-btn.out{border:1px solid #D1D5DB;color:#1A2332;background:#fff}
.mb-cam{position:absolute;left:0;right:0;top:114px;bottom:0;background:#1d1f22;overflow:hidden}
.mb-frame{position:absolute;left:50%;top:42%;width:250px;height:250px;margin:-125px 0 0 -125px}
.mb-hint{position:absolute;left:0;right:0;bottom:120px;text-align:center;color:rgba(255,255,255,.8);font-size:14px}
.mb-manual{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:20px;padding:9px 18px;font-size:14px;white-space:nowrap}
.mb-plan{position:absolute;left:0;right:0;top:114px;bottom:0;background:#111;overflow:hidden}
.mb-plan svg{position:absolute;inset:0;width:100%;height:100%}
.mb-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:18px 18px 26px;transform:translateY(105%)}
.mb-sheet .code{font-size:20px;font-weight:700}
.mb-sheet .row{display:flex;align-items:center;gap:8px;margin:4px 0 14px;font-size:13px;color:#6B7280}
.mb-sheet .row i{width:10px;height:10px;border-radius:50%;display:inline-block}
.tap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid rgba(18,20,23,.75);background:rgba(18,20,23,.12);opacity:0;pointer-events:none;z-index:40}