/* Chicago AI Studio: luxury design system (DEV concept, shared by all three concepts).
Uses only theme tokens from theme.css: --deep-rgb, --deep2-rgb, --paper-rgb, --stone-rgb, --metal-rgb, --accent-rgb.
Swapping theme.css is the only difference between concepts. Light sections by default; header, hero, footer and the
featured website package are "dark scopes" that flip the semantic tokens. */
/* ---------- Semantic tokens ---------- */
:root{
--c-ink-rgb:var(--deep-rgb);--c-ink2-rgb:var(--accent-rgb);--c-soft-rgb:var(--stone-rgb);--c-line-rgb:var(--stone-rgb);--c-paper-rgb:var(--paper-rgb);--c-metal-rgb:var(--metal-rgb);
--serif:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;
--sans:"Manrope","Manrope Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--radius:2px;
--ease:cubic-bezier(.22,1,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
--band:rgb(var(--stone-rgb) / var(--band-a,.14));
}
.site-header,.hero,.site-footer,#pricing .featured{
--c-ink-rgb:var(--paper-rgb);--c-ink2-rgb:var(--stone-rgb);--c-soft-rgb:var(--metal-rgb);--c-line-rgb:var(--paper-rgb);--c-paper-rgb:var(--deep-rgb);
}
:root,.site-header,.hero,.site-footer,#pricing .featured{
--c-ink:rgb(var(--c-ink-rgb));--c-ink-2:rgb(var(--c-ink2-rgb));--c-soft:rgb(var(--c-soft-rgb));--c-line:rgb(var(--c-line-rgb) / .14);
--c-paper:rgb(var(--c-paper-rgb));--c-metal:rgb(var(--c-metal-rgb));--c-rule:rgb(var(--c-ink-rgb) / .14);
}
:root{--c-ink-2:rgb(var(--deep-rgb) / .76);--c-label:rgb(var(--accent-rgb))}
.site-header,.hero,.site-footer{--c-label:var(--c-metal)}
#pricing .featured{--c-label:rgb(var(--feat-label-rgb))}
#pricing .featured{--c-ink-2:rgb(var(--paper-rgb) / .78)}
.site-header,.hero,.site-footer,#pricing .featured{color:var(--c-ink)}
/* ---------- Self-hosted fonts (SIL OFL; see fonts/OFL.txt) ---------- */
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-italic-latin.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* metric-matched fallbacks so the swap barely moves anything */
@font-face{font-family:"Cormorant Fallback";src:local("Georgia"),local("Times New Roman"),local("Liberation Serif"),local("DejaVu Serif");size-adjust:86%;ascent-override:108%;descent-override:34%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica"),local("DejaVu Sans");size-adjust:104%;ascent-override:104%;descent-override:29%;line-gap-override:0%}
/* ---------- Base ---------- */
body{font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.75;letter-spacing:.005em;color:var(--c-ink);background-color:var(--c-paper);background-image:var(--grain)}
a{color:var(--c-ink-2);text-decoration-thickness:1px;text-underline-offset:4px}a:hover{color:var(--c-ink)}
.wrap{max-width:1240px;padding:0 40px}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--c-ink);letter-spacing:-.01em}
::selection{background:rgb(var(--metal-rgb) / .35)}
.btn:focus-visible,a:focus-visible,.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible,
.nav-toggle:focus-visible,.tabs [role=tab]:focus-visible,.details-toggle:focus-visible,.panel:focus-visible,.demo:focus-visible,.play-call:focus-visible{outline:1px solid var(--c-ink);outline-offset:4px}
.draft-banner{background:var(--band);color:var(--c-ink);border-bottom:1px solid var(--c-rule);font-size:12px;letter-spacing:.08em;padding:9px 16px}
.ph{background:rgb(var(--c-metal-rgb) / .12);color:inherit;border:1px dashed rgb(var(--c-ink-rgb) / .45);border-radius:0;padding:0 6px;font-size:.82em;letter-spacing:.02em}
.tag{background:transparent;color:var(--c-ink);border:1px solid rgb(var(--c-ink-rgb) / .3);border-radius:0;font-size:10.5px;font-weight:600;letter-spacing:.18em;padding:4px 10px 3px}
/* eyebrow labels */
.eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.32em;color:var(--c-metal)}
.eyebrow::before{width:48px;height:1px;background:var(--c-metal)}
/* editorial section numbers (decorative, hidden from assistive tech) */
main{counter-reset:sec}
.section h2{font-size:clamp(40px,4.8vw,68px);line-height:1.02;font-weight:500;margin:0 0 18px;max-width:16ch}
.section h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero) / "";display:block;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.32em;color:var(--c-label);margin-bottom:22px}
h2::after{width:56px;height:1px;background:var(--c-metal);margin-top:26px}
.sub{font-size:18px;font-weight:400;color:var(--c-ink-2);max-width:640px;margin:0 0 56px}
.sub.small{font-size:15px}
#work .sub{margin-bottom:20px}#work .sub.small{margin-bottom:56px}
.fine{font-size:13px;color:var(--c-ink-2);letter-spacing:.01em}
/* ---------- Header (dark) ---------- */
.site-header{background:rgb(var(--deep-rgb) / .97);border-bottom:1px solid rgb(var(--metal-rgb) / .22);backdrop-filter:none}
.site-header.is-scrolled{background:rgb(var(--deep-rgb) / .985);box-shadow:none;border-bottom-color:rgb(var(--metal-rgb) / .35)}
.nav{padding-top:18px;padding-bottom:18px}
.brand{font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--c-ink);gap:14px}
.logo-mark{width:34px;height:34px;border-radius:0;background:transparent;border:1px solid rgb(var(--metal-rgb) / .6);color:var(--c-metal)}
.logo-mark svg path:first-child{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:miter}
.logo-mark .snow{fill:none}
nav{gap:30px}
nav a{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--paper-rgb) / .86)}
nav a:hover{color:var(--c-ink);text-decoration:none}
nav a:not(.btn)::after{height:1px;bottom:-4px;background:var(--c-metal);transition:transform .7s var(--ease)}
nav a.is-active{color:var(--c-ink)}
.nav-toggle{border-radius:0;border:1px solid rgb(var(--paper-rgb) / .3);background:transparent}
.bars span{height:1px;background:var(--c-ink)}
/* ---------- Buttons: slim, understated ---------- */
.btn{border-radius:0;border-width:1px;padding:15px 30px;font-size:14px;font-weight:500;letter-spacing:.06em;box-shadow:none;background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper)!important;
transition:background-color .6s var(--ease),border-color .6s var(--ease),color .6s var(--ease)}
.btn:hover{background:var(--c-ink-2);border-color:var(--c-ink-2);transform:none;box-shadow:none}
.btn:active{transform:scale(.99);box-shadow:none}
.btn-sm{padding:10px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.btn-ghost{background:transparent;color:var(--c-ink)!important;border:1px solid rgb(var(--c-ink-rgb) / .55)}
.btn-ghost:hover{background:var(--c-ink);color:var(--c-paper)!important;border-color:var(--c-ink)}
.btn-arrow{gap:16px}.arrow{transition:transform .6s var(--ease)}
.btn-arrow:hover .arrow,.btn-arrow:focus-visible .arrow,.learn:hover .arrow,.learn:focus-visible .arrow{transform:translateX(6px)}
.arrow path{stroke-width:1.4}
/* dark scopes: metallic primary */
#pricing .featured .btn,.site-header .btn{background:var(--c-metal);border-color:var(--c-metal);color:rgb(var(--deep-rgb))!important}
.hero .btn:not(.btn-ghost){background:rgb(var(--cta-rgb));border-color:rgb(var(--cta-line-rgb));color:rgb(var(--cta-ink-rgb))!important}
.hero .btn:not(.btn-ghost):hover,#pricing .featured .btn:hover,.site-header .btn:hover{background:var(--c-ink);border-color:var(--c-ink);color:rgb(var(--deep-rgb))!important}
.site-header .btn{background:transparent;color:var(--c-ink)!important;border-color:rgb(var(--metal-rgb) / .7)}
.site-header .btn:hover{background:var(--c-metal);border-color:var(--c-metal);color:rgb(var(--deep-rgb))!important}
.is-sending .btn[type=submit]::before{border-color:rgb(var(--c-paper-rgb) / .35);border-top-color:var(--c-paper)}
/* ---------- Hero (dark, editorial, asymmetric) ---------- */
.hero{background-color:rgb(var(--deep-rgb));background-image:var(--grain-dark);border-bottom:0;padding:150px 0 190px}
.hero-contours{color:rgb(var(--metal-rgb) / .9);opacity:.16}
.hero-contours path{vector-effect:non-scaling-stroke}
.hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);grid-template-rows:auto auto auto auto auto 1fr;column-gap:104px;row-gap:0;align-items:start}
.hero-grid>div{display:contents}
.hero .eyebrow,.hero h1{grid-column:1/-1}
.hero .lead,.hero .cta-row,.hero .fine{grid-column:1}
.hero .plate{grid-column:2;grid-row:3/7;align-self:start;margin-top:8px}
.hero h1{font-size:clamp(54px,7.4vw,116px);line-height:.95;letter-spacing:-.025em;font-weight:500;margin:.36em 0 .42em}
.hero .accent{color:var(--c-metal);font-weight:400}
.hero .lead{font-size:20px;font-weight:300;line-height:1.7;color:rgb(var(--paper-rgb) / .82);max-width:520px}
.cta-row{gap:18px;margin:44px 0 40px}
.hero .fine{max-width:520px;border-top:1px solid var(--c-rule);padding-top:20px;color:var(--c-ink-2)}
.hero-scene{height:200px}
.hero-scene .layer path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.layer-far{color:rgb(var(--stone-rgb) / .3)}
.layer-mid{color:rgb(var(--metal-rgb) / .55)}
.layer-near{color:rgb(var(--paper-rgb) / .16)}
/* fine-line plate */
.plate{margin:0;padding:16px 16px 0;border:1px solid rgb(var(--metal-rgb) / .38);background:rgb(var(--paper-rgb) / .025);box-shadow:none;border-radius:0}
.plate svg{display:block;width:100%;height:auto}
.plate .mask{fill:rgb(var(--deep-rgb))}
.plate .ln{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:miter;stroke-linecap:round}
.plate .ln-main{stroke:rgb(var(--paper-rgb) / .9);stroke-width:1.2}
.plate .ln-far{stroke:rgb(var(--stone-rgb) / .7)}
.plate .ln-metal{stroke:var(--c-metal)}
.plate .ln-faint{stroke:rgb(var(--stone-rgb) / .38)}
.plate .ln-hatch{stroke:rgb(var(--paper-rgb) / .32)}
.plate .art-note{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--c-ink-2);text-align:left;padding:16px 2px 18px;border-top:1px solid var(--c-rule);margin-top:6px}
.js-motion .hero .plate{animation:rise-lg 1.2s var(--ease-out) .45s both}
.js-motion .plate .draw{stroke-dasharray:1;animation:pen 2.8s var(--ease-out) .7s both}
.js-motion .plate .draw.d2{animation-delay:1.1s}.js-motion .plate .draw.d3{animation-delay:1.5s;animation-duration:2.2s}
@keyframes pen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.js-motion .hero .eyebrow,.js-motion .hero h1,.js-motion .hero .lead,.js-motion .hero .cta-row,.js-motion .hero .fine{animation-duration:.95s}
.js-motion .hero h1{animation-delay:.12s}.js-motion .hero .lead{animation-delay:.32s}.js-motion .hero .cta-row{animation-delay:.48s}.js-motion .hero .fine{animation-delay:.62s}
@keyframes rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes rise-lg{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
/* ---------- Sections ---------- */
.section{padding:144px 0}
.section.alt{background-color:var(--band);border-top:1px solid var(--c-rule);border-bottom:1px solid var(--c-rule)}
.js-motion [data-reveal]{transform:translate3d(0,14px,0);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
h2::after{transition:transform .9s var(--ease-out) .2s}
/* cards: quiet, hairline, square */
.card{background:transparent;border:1px solid var(--c-rule);border-radius:0;box-shadow:none;padding:40px}
.card h3{font-size:28px;font-weight:500;line-height:1.15}
.card p{color:var(--c-ink-2)}
/* services: editorial columns with a top rule */
.grid3{gap:56px}
.services .card{border:0;border-top:1px solid rgb(var(--c-ink-rgb) / .3);padding:40px 0 0;background:transparent}
.services .card::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--c-metal);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.services .card.is-in:hover,.services .card:focus-within,html:not(.js-motion) .services .card:hover{transform:translate3d(0,-3px,0);box-shadow:none}
.services .card:hover::after,.services .card:focus-within::after{transform:scaleX(1)}
.services .card:active{transform:translate3d(0,-1px,0)!important}
.js-motion .services .card[data-reveal]{transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
.services .card.is-in{transition:opacity .8s var(--ease-out),transform .7s var(--ease)}
.svc-icon{display:block;align-self:flex-start;width:auto;height:auto;background:none;border-radius:0;color:var(--c-ink-2);margin-bottom:28px;transition:transform .7s var(--ease)}
.svc-icon svg *{stroke-width:1.1}
.services .card:hover .svc-icon,.services .card:focus-within .svc-icon{transform:translateY(-2px);background:none}
.learn{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink);border-bottom:1px solid var(--c-metal);padding-bottom:4px;margin-top:10px;transition:border-color .6s var(--ease),color .6s var(--ease)}
.learn:hover{border-color:var(--c-ink);color:var(--c-ink)}
.also{gap:56px;margin-top:72px}
.also li{border-top:1px solid var(--c-rule);color:var(--c-ink-2);padding-top:22px;font-size:15.5px}
.also b{color:var(--c-ink);font-weight:600}
/* portfolio: asymmetric editorial grid, framed plates */
.demo-heading{font-size:34px;line-height:1.1;margin:88px 0 14px}
.demo-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px 72px;align-items:start}
.demo:nth-child(even){margin-top:120px}
.demo:nth-child(3){margin-top:-60px}
.demo{border-radius:0;color:var(--c-ink)}
.demo .browser{border-radius:0;border:1px solid var(--c-rule);background:var(--c-paper);box-shadow:none;padding:0 14px 14px;transition:border-color .7s var(--ease)}
.demo:hover .browser,.demo:focus-visible .browser{box-shadow:none;border-color:rgb(var(--c-ink-rgb) / .45)}
.browser.mini .browser-bar{background:transparent;border-bottom:0;padding:11px 0}
.dots i{width:7px;height:7px;background:transparent!important;border:1px solid rgb(var(--c-ink-rgb) / .35)}
.url{background:transparent;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);padding:0 6px}
.shot{background:var(--band)}
.demo:nth-child(even) .shot{aspect-ratio:4/5}
.demo:nth-child(even):hover .shot img,.demo:nth-child(even):focus-visible .shot img{transform:translate3d(0,-47%,0)}
.shot img{transition:transform 1.6s var(--ease)}
.demo-meta{padding:20px 0 0;gap:8px 14px}
.demo-name{font-size:26px;font-weight:500}
.demo-kind{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-label)}
/* how it works: numerals, hairlines, no boxes */
.steps{gap:48px;counter-reset:s}
.steps li{background:transparent;border:0;border-top:1px solid rgb(var(--c-ink-rgb) / .3);border-radius:0;padding:28px 0 0;color:var(--c-ink-2)}
.steps li b{display:block;color:var(--c-ink);font-weight:600;margin-bottom:6px}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;width:auto;height:auto;background:none;border-radius:0;color:var(--c-ink);font-family:var(--serif);font-style:italic;font-weight:400;font-size:46px;line-height:1;margin-bottom:22px}
/* workflow simulation */
.flow{background:var(--c-paper);border:1px solid var(--c-rule);border-radius:0;padding:44px 48px;box-shadow:none}
.tabs{gap:0 40px;border-bottom:1px solid var(--c-rule);padding-bottom:0}
.tabs [role=tab]{border:0;border-bottom:1px solid transparent;border-radius:0;padding:14px 0;margin-bottom:-1px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink-2);background:transparent;transition:color .6s var(--ease),border-color .6s var(--ease)}
.tabs [role=tab]:hover{background:transparent;color:var(--c-ink);border-color:var(--c-rule)}
.tabs [role=tab][aria-selected=true]{background:transparent;color:var(--c-label);border-color:var(--c-label)}
.flow-steps{gap:28px;margin-top:40px}
.flow-steps li{color:var(--c-ink-2);font-size:14.5px}
.flow-steps li b{color:var(--c-ink);font-weight:600;font-size:15px}
.node{background:var(--c-paper);border:1px solid var(--c-metal);color:var(--c-ink);font-family:var(--serif);font-style:italic;font-weight:500;font-size:18px;box-shadow:0 0 0 8px var(--c-paper)}
.flow-steps li:not(:last-child)::after{height:1px;background:rgb(var(--c-ink-rgb) / .35)}
.pill{border-radius:0;background:rgb(var(--c-metal-rgb) / .14);border:1px solid rgb(var(--c-metal-rgb) / .8);color:var(--c-ink);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px}
.js-motion .panel.is-playing .flow-steps li{animation-duration:.8s;animation-delay:calc(var(--i) * 620ms)}
.js-motion .panel.is-playing .flow-steps li .node{animation:none}
.js-motion .panel.is-playing .flow-steps li::after{animation-duration:.8s;animation-delay:calc(var(--i) * 620ms + 340ms)}
@media (max-width:960px){.flow-steps li:not(:last-child)::after{width:1px;height:calc(100% - 30px)}}
/* receptionist demo */
.recep-demo{background:var(--c-paper);border:1px solid var(--c-rule);border-radius:0;padding:64px;gap:72px}
.recep-copy h3{font-size:36px;line-height:1.1}
.notify{background:transparent;border:1px solid var(--c-rule);border-left:1px solid var(--c-metal);border-radius:0;padding:18px 20px}
.notify-head{letter-spacing:.2em!important;font-size:10.5px!important;color:var(--c-label)}
.phone{border-radius:38px;padding:9px;box-shadow:none;background:rgb(var(--deep-rgb));outline:1px solid rgb(var(--metal-rgb) / .35);outline-offset:-4px}
.phone-screen{border-radius:30px;background:var(--c-paper)}
.call-head{border-bottom:1px solid var(--c-rule)}
.call-label{letter-spacing:.2em;font-size:10.5px;color:var(--c-label)}
.caller{font-size:28px}.caller small,.call-num{color:var(--c-ink-2)}
.ring{border:1px solid var(--c-metal)}
.msg{border-radius:2px;font-size:13.5px}
.msg .who{letter-spacing:.16em;font-size:10px;font-weight:600}
.msg.ai{background:rgb(var(--c-soft-rgb) / .2);border-bottom-left-radius:0}
.msg.caller-msg{background:transparent;border:1px solid var(--c-rule);border-bottom-right-radius:0}
.msg.sys{border:1px dashed rgb(var(--c-ink-rgb) / .3);border-radius:0}
.status-chip{border-radius:0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:6px 10px;background:var(--c-ink);color:var(--c-paper)}
.idle-time{font-size:56px;font-weight:400}
.js-motion .recep-demo [data-step]{transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),visibility 0s linear .8s}
.js-motion .recep-demo [data-step].on{transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),visibility 0s}
/* pricing */
.pricing{gap:32px}
.price{padding:48px 40px 40px}
.price h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--c-label);margin:0 0 22px}
.amount{font-family:var(--serif);font-size:68px;font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--c-ink);margin:0 0 14px}
.amount span{font-family:var(--sans);font-size:13px;letter-spacing:.12em;color:var(--c-ink-2);margin-left:4px}
.desc{color:var(--c-ink-2);font-size:15.5px}
.price ul{list-style:none;padding:0;margin:26px 0 32px;border-top:1px solid var(--c-rule)}
.price li{margin:0;padding:12px 0 12px 24px;border-bottom:1px solid var(--c-rule);position:relative;font-size:15px}
.price li::before{content:"";position:absolute;left:0;top:1.35em;width:12px;height:1px;background:var(--c-metal)}
.pricing .card{transition:transform .7s var(--ease),border-color .7s var(--ease)}
.js-motion .pricing .card[data-reveal]{transition:opacity .8s var(--ease-out),transform .9s var(--ease-out),border-color .7s var(--ease);transition-delay:var(--d,0ms),var(--d,0ms),0s}
.pricing .card.is-in:hover,html:not(.js-motion) .pricing .card:hover{transform:translate3d(0,-4px,0);box-shadow:none;border-color:rgb(var(--c-ink-rgb) / .4)}
.featured,.pricing .featured,.pricing .featured.is-in:hover{border:1px solid rgb(var(--c-metal-rgb) / .9);box-shadow:none}
.featured::before{left:0;right:0;top:-1px;height:1px;border-radius:0;background:var(--c-metal)}
#pricing .featured{background-color:rgb(var(--deep2-rgb));background-image:var(--grain-dark)}
.card .badge,.badge{top:-13px;right:28px;border-radius:0;background:rgb(var(--deep-rgb));color:var(--c-metal);border:1px solid var(--c-metal);font-size:10.5px;letter-spacing:.24em;padding:5px 12px}
.bundle{background:transparent;border:1px solid var(--c-rule);border-left:1px solid var(--c-metal);border-radius:0;padding:24px 28px;margin-top:40px;color:var(--c-ink-2)}
.bundle b{color:var(--c-ink)}
.details-toggle{border-radius:0;border:1px solid rgb(var(--c-ink-rgb) / .45);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:12px 20px;margin-top:36px;transition:background-color .6s var(--ease)}
.details-toggle:hover{background:rgb(var(--c-ink-rgb) / .06)}
.collapse{transition:grid-template-rows .7s var(--ease)}
.collapse-inner ul{transition:opacity .6s var(--ease)}
/* contact */
.contact-grid{gap:96px}
.contact-facts li::before{height:1px;width:10px;background:var(--c-metal)}
.contact-facts li{color:var(--c-ink-2)}
.form.card{background:var(--c-paper);padding:48px}
.form label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink-2)}
.form .check{text-transform:none;letter-spacing:.01em;font-size:14px;font-weight:400;color:var(--c-ink)}
.form input,.form select,.form textarea{border:0;border-bottom:1px solid rgb(var(--c-ink-rgb) / .45);border-radius:0;background:transparent;padding:12px 2px;margin-top:4px;color:var(--c-ink);letter-spacing:0;text-transform:none;font-weight:400}
.form input[type=checkbox]{accent-color:rgb(var(--deep-rgb))}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--c-ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--c-ink);box-shadow:0 1px 0 0 var(--c-ink)}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:1px solid var(--c-ink);outline-offset:4px}
.form [aria-invalid=true]{border-width:0 0 1px;border-color:var(--c-ink);box-shadow:0 1px 0 0 var(--c-ink),0 6px 0 -5px var(--c-metal)}
.form textarea{border:1px solid rgb(var(--c-ink-rgb) / .3);padding:12px}
.field-msg{text-transform:none;letter-spacing:.01em;color:var(--c-ink);font-weight:500}
.field-msg::before{border-radius:0;width:10px;height:1px;vertical-align:middle;background:var(--c-metal)}
.field-ok{color:var(--c-ink-2)}
.form-status.ok{color:var(--c-ink)}
.form-status.err{border-left:1px solid var(--c-metal)}
.form-status.ok::before{border-radius:0;background:var(--c-ink);-webkit-mask:url("data:image/svg+xml;utf8,") center/22px no-repeat;mask:url("data:image/svg+xml;utf8,") center/22px no-repeat}
/* footer (dark) */
.site-footer{background-color:rgb(var(--deep-rgb));background-image:var(--grain-dark);color:var(--c-ink-2);border-top:1px solid rgb(var(--metal-rgb) / .3);padding:56px 0;font-size:14px}
.site-footer b{font-family:var(--serif);font-size:22px;color:var(--c-ink)}
.site-footer a{color:var(--c-ink)}
.site-footer .ph{border-color:rgb(var(--paper-rgb) / .45)}
/* mobile menu panel (inside the dark header) */
@media (max-width:960px){
.js-motion #site-nav{background:rgb(var(--deep-rgb));border-bottom:1px solid rgb(var(--metal-rgb) / .3);box-shadow:none;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .6s}
.js-motion #site-nav.is-open{transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
.js-motion #site-nav a:not(.btn){font-size:12.5px;padding:16px 2px;border-bottom:1px solid var(--c-rule)}
.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:56px}
}
@media (max-width:900px){
.hero{padding:96px 0 150px}.hero-grid{grid-template-columns:1fr;grid-template-rows:none;gap:0}
.hero .plate{grid-column:1;grid-row:auto;max-width:420px;margin:56px 0 0}
.section{padding:104px 0}
.grid3{gap:40px}
.demo-grid{gap:48px 40px}.demo:nth-child(even){margin-top:72px}.demo:nth-child(3){margin-top:-36px}
.recep-demo{padding:40px;gap:40px}
.contact-grid{gap:48px}
}
@media (min-width:901px){.hero{min-height:880px}}
@media (max-width:620px){
body{font-size:16px}
.wrap{padding:0 22px}
.js-motion .nav.wrap{padding-left:22px;padding-right:22px}
.brand{font-size:13.5px;letter-spacing:.2em;gap:12px}
.hero{padding:64px 0 110px}
.hero h1{font-size:clamp(46px,13vw,60px)}
.hero .lead{font-size:18px}
.cta-row{margin:34px 0 30px;gap:12px}
.cta-row .btn{width:100%;justify-content:center;text-align:center}
.section{padding:84px 0}
.section h2{font-size:clamp(36px,10vw,44px)}
.demo-grid{grid-template-columns:1fr}.demo:nth-child(even),.demo:nth-child(3){margin-top:0}
.demo:nth-child(even) .shot{aspect-ratio:16/10}
.demo:nth-child(even):hover .shot img{transform:translate3d(0,-73.5%,0)}
.flow{padding:28px 22px}.tabs{gap:0}.tabs [role=tab]{width:100%;text-align:left}
.recep-demo{padding:24px 18px}
.price{padding:40px 26px 30px}.amount{font-size:58px}
.form.card{padding:28px 22px}
.card{padding:28px 24px}.services .card{padding:32px 0 0}
}
/* reduced motion: keep every final state, no movement */
@media (prefers-reduced-motion:reduce){
.services .card::after{transition:none}
.plate .draw{stroke-dasharray:none!important}
.demo:nth-child(even):hover .shot img{transform:none!important}
}