/* Spytay design code, session 16: what the landing, the order page, the report and the cabinet share. Page rules: landing.css. */
@font-face{font-family:"Fixel";src:url(/static/fonts/fixel-400-800.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Fixel Fallback";src:local("Arial");size-adjust:104%;ascent-override:92%;descent-override:24%}
:root{
--font:"Fixel","Fixel Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--bg:#F4F5F7;--surface:#FFFFFF;--surface-2:#E9ECF0;--text:#0E1218;--text-2:#454D5A;--text-3:#5C6573;
--line:#D5DAE1;--line-ctl:#7A8392;--accent:#FF5A24;--accent-hover:#FF6E3E;--on-accent:#0E1218;
--accent-text:#B8360B;--accent-soft:#FFE9E0;--ok:#0B7A48;--focus:#0E1218;
--ink:#0B0E13;--ink-2:#12161D;--ink-text:#F2F4F7;--ink-text-2:#C3CAD4;--ink-line:rgba(255,255,255,.08);--ink-ctl:#6B7686;
--pip-off:#E3E7ED;--rival:#5B6472;
--shadow:0 1px 0 rgba(14,18,24,.04),0 24px 56px -28px rgba(14,18,24,.28);
--shadow-ink:0 0 0 1px rgba(255,255,255,.06),0 32px 80px -24px rgba(0,0,0,.65);
--t-display:clamp(2.625rem,1.9rem + 3.2vw,4.5rem);--t-h2:clamp(1.875rem,1.3rem + 2.2vw,3.25rem);
--t-h3:clamp(1.1875rem,1.06rem + .55vw,1.5rem);--t-lead:clamp(1.0625rem,.98rem + .37vw,1.3125rem);
--t-num:clamp(2.125rem,1.55rem + 2.4vw,3.5rem);--t-price:clamp(2.75rem,2rem + 2.96vw,4rem);
--pad:20px;--max:1200px;--ease:cubic-bezier(.23,1,.32,1)}
@media screen{[data-theme=dark]{
--bg:#0B0E13;--surface:#12161D;--surface-2:#1A202A;--text:#F2F4F7;--text-2:#A9B1BE;--text-3:#8892A1;
--line:#2A323F;--line-ctl:#6B7686;--accent-text:#FF8057;--accent-soft:#3A2420;--ok:#4CD08C;--focus:#FFFFFF;
--ink:#06080C;--ink-2:#12161D;--pip-off:#262E3A;--rival:#7C8798;
--shadow:0 0 0 1px rgba(255,255,255,.06),0 28px 64px -24px rgba(0,0,0,.6)}}
@media (min-width:600px){:root{--pad:32px}}
@media (min-width:1024px){:root{--pad:40px}}

/* base and type */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px;color-scheme:light}
@media screen{[data-theme=dark]{color-scheme:dark}}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
svg{display:block;flex:none}
a{color:var(--accent-text);text-decoration-thickness:1.5px;text-underline-offset:3px}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{font-weight:700;text-wrap:balance}
button{font:inherit;color:inherit}
.wrap{max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprite{position:absolute}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.ink :focus-visible{outline-color:#fff}
.nw{white-space:nowrap}
h1{font-size:var(--t-display);line-height:1;letter-spacing:-.04em;font-weight:800;margin-top:14px}
h2{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.03em;font-weight:750;max-width:20ch}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.015em}
.kicker{font-size:.875rem;font-weight:650;color:var(--accent-text);margin-bottom:12px}
.ink .kicker{color:var(--accent)}
.sec-lead{margin-top:16px;font-size:var(--t-lead);color:var(--text-2);max-width:56ch}
.ink .sec-lead{color:var(--ink-text-2)}
.note{margin-top:28px;font-size:.9375rem;color:var(--text-3);max-width:70ch}
.ink .note{color:var(--ink-text-2)}

/* surfaces and sections */
.ink{background:var(--ink);color:var(--ink-text)}
.sec{padding:72px 0}
@media (min-width:1024px){.sec{padding:112px 0}}
@media (max-width:1023px){.sec{padding:56px 0}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px}
@media (min-width:600px){.card{padding:28px 32px}}
.card p{color:var(--text-2);margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--surface-2);font-size:.8125rem;font-weight:550;color:var(--text)}
.chip.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line-ctl);color:var(--text-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:12px;border:0;font-weight:650;font-size:1.0625rem;text-decoration:none;cursor:pointer;transition:background .16s,transform .12s,border-color .16s;white-space:normal;text-align:center;line-height:1.2}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-sm{min-height:44px;padding:0 16px;font-size:.9375rem;border-radius:10px;white-space:nowrap}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line-ctl)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--text)}
.ink .btn-ghost{color:var(--ink-text);box-shadow:inset 0 0 0 1.5px var(--ink-ctl)}
.ink .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink-text)}
.btn .ic{width:20px;height:20px}
.btn-agent .ic-copy{opacity:.7}
.btn-agent{position:relative;overflow:hidden}
.btn-agent>:not(.cp-done){transition:opacity .2s,transform .3s}
.cp-done{position:absolute;inset:0;padding:0 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.2;text-align:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .3s,visibility .3s}
.cp-done b{display:inline-flex;align-items:center;gap:6px;font-weight:650}
.cp-done small{font-size:.8125rem;font-weight:500;color:var(--text-2)}
.ink .cp-done small{color:var(--ink-text-2)}
.btn-agent.done{box-shadow:inset 0 0 0 1.5px var(--ok);color:var(--ok)}
.ink .btn-agent.done{box-shadow:inset 0 0 0 1.5px #4CD08C;color:#4CD08C}
.btn-agent.done>:not(.cp-done){opacity:0;transform:translateY(-12px)}
.btn-agent.done .cp-done{opacity:1;visibility:visible;transform:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:disabled:active{transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:599px){.btn-row .btn{width:100%}}
@media (max-width:419px){.btn{font-size:1rem;padding:12px 16px}.btn-sm{padding:0 14px}.btn-agent .ic-copy{display:none}}

/* header, menu sheet, theme toggle */
.hdr{position:sticky;top:0;z-index:40;background:var(--ink);color:var(--ink-text);border-bottom:1px solid var(--ink-line)}
.hdr .wrap{display:flex;align-items:center;gap:8px;height:60px}
.icon-btn.theme-hdr{display:none}
.sheet{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--ink-line);padding:4px var(--pad) 16px;box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.sheet.open{display:block}
.sheet a,.sheet-theme{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;color:var(--ink-text);text-decoration:none;font:inherit;font-size:1.0625rem;font-weight:550;border:0;border-bottom:1px solid var(--ink-line);background:none;padding:0;cursor:pointer;text-align:left}
.sheet-theme{border-bottom:0;color:var(--ink-text-2)}
.logo{display:flex;align-items:center;gap:9px;color:var(--ink-text);text-decoration:none;font-weight:750;font-size:1.25rem;letter-spacing:-.02em;margin-right:auto}
.nav{display:none;gap:4px}
.nav a{color:var(--ink-text-2);text-decoration:none;font-size:.9375rem;font-weight:500;padding:8px 12px;border-radius:8px}
.nav a:hover{color:var(--ink-text)}
.hdr-login{display:none;color:var(--ink-text);text-decoration:none;font-weight:500;font-size:.9375rem}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;border:0;background:transparent;color:var(--ink-text-2);cursor:pointer}
.icon-btn:hover{color:var(--ink-text);background:rgba(255,255,255,.06)}
[data-theme=light] .i-sun,[data-theme=dark] .i-moon{display:none}
@media (min-width:1024px){.hdr .wrap{gap:20px}.nav{display:flex;margin-right:auto}.logo{margin-right:12px}.hdr-login{display:inline}.burger{display:none}.icon-btn.theme-hdr{display:inline-grid}.sheet{display:none!important}}
@media (max-width:1023px){.hdr .btn-sm{display:none}}

/* details rows */
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;font-weight:600;font-size:1.0625rem;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:translateY(-3px) rotate(45deg);transition:transform .16s}
.qa details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.qa details p{padding:0 0 20px;color:var(--text-2);max-width:68ch}
@media (max-width:1023px){.qa summary{min-height:56px;padding:12px 0;font-size:1rem}}

/* footer */
.foot{padding:56px 0 120px;border-top:1px solid var(--line);font-size:.9375rem}
.foot-grid{display:grid;gap:28px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr 1fr}}
.foot h3{margin:0 0 10px;font-size:.8125rem;line-height:1.55;letter-spacing:normal;font-weight:650;color:var(--text-3)}
.foot li{margin:6px 0}
.foot a{color:var(--text);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .fine{margin-top:36px;font-size:.875rem;color:var(--text-3);display:grid;gap:8px;max-width:90ch}
.foot .brand-col p{margin-top:10px;color:var(--text-2);max-width:32ch}
@media (min-width:1024px){.foot{padding-bottom:56px}}
@media (max-width:1023px){.foot{padding-bottom:calc(88px + env(safe-area-inset-bottom))}}
@media (max-width:899px){.foot-prod{display:none}}

/* sticky mobile bar */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -12px 32px -16px rgba(14,18,24,.25);transform:translateY(110%);transition:transform .24s var(--ease)}
.sbar.on{transform:none}
.sbar p{font-size:.875rem;color:var(--text-2);line-height:1.3}
.sbar p b{display:block;color:var(--text);font-size:1rem}
@media (min-width:1024px){.sbar{display:none}}

/* motion */
*,*::before,*::after{font-variant-numeric:normal!important}
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important}
 .js .rv{opacity:1;transform:none}
}
@media print{
body{background:#fff}
:root{--ink:#fff;--ink-text:#0E1218;--ink-text-2:#454D5A;--ink-line:#D5DAE1;--ink-ctl:#454D5A}
.ink{background:#fff;color:#0E1218}
.ink .kicker,.ink h1 .hl{color:#B8360B}
.ink .btn-agent.done{color:#0B7A48;box-shadow:inset 0 0 0 1.5px #0B7A48}
}