/* Self-hosted fonts (SIL OFL 1.1, see assets/fonts/OFL.txt). Variable latin subsets. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/InstrumentSans-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500 600;font-display:swap;src:url(assets/fonts/GeistMono-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ProTrack marketing site. Colours/type from Design System v1 (see tokens.css). */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--background);background-image:var(--bg-image);background-attachment:fixed;color:var(--text);font:16px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased;transition:background-color var(--motion-theme),color var(--motion-theme)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus-outline);outline-offset:2px;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
.mono{font-family:var(--font-mono)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface-raised);padding:8px 12px;border-radius:var(--radius-md);z-index:999}.skip:focus{left:8px}
h1,h2,h3{color:var(--text-strong);letter-spacing:var(--tracking-tight);font-weight:700}
h1{font-size:clamp(38px,6vw,64px);line-height:1.03;margin:14px 0 18px}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1}
h3{font-size:var(--text-lg);line-height:1.3;margin-bottom:6px}
.hl{color:var(--brand-ink)}
.eyebrow{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-overline);font-weight:600;color:var(--brand-ink)}
.sub,.lead{color:var(--muted);font-size:18px;max-width:640px}
.lead{margin-bottom:26px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--radius-md);background:var(--brand);color:var(--brand-contrast);font-weight:600;font-size:15px;border:1px solid transparent;box-shadow:var(--shadow-brand);cursor:pointer;font-family:inherit;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast)}
.btn:hover{background:var(--brand-hover);transform:translateY(-1px)}.btn:active{background:var(--brand-pressed);transform:none}
.btn.ghost{background:var(--surface-raised);color:var(--text);border-color:var(--border-strong);box-shadow:none}.btn.ghost:hover{background:var(--surface-hover);border-color:var(--border-input)}
.btn.sm{height:36px;padding:0 14px;font-size:14px}.btn.xs{height:28px;padding:0 10px;font-size:12px}.btn.lg{height:52px;padding:0 26px;font-size:16px}
/* nav */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--nav-glass);backdrop-filter:blur(var(--blur-glass)) saturate(var(--glass-saturate));-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(var(--glass-saturate));border-bottom:1px solid var(--glass-border)}
.navin{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--logo-word);letter-spacing:var(--tracking-snug)}
.logo{width:32px;height:32px;border-radius:9px;background:var(--logo-tile);color:var(--logo-glyph);display:grid;place-items:center}.logo svg{width:22px;height:22px}
.links{display:flex;gap:4px;margin-left:12px}.links a{padding:8px 12px;border-radius:var(--radius-sm);color:var(--muted);font-weight:500;font-size:15px;transition:background var(--motion-fast),color var(--motion-fast)}.links a:hover{background:var(--surface-hover);color:var(--text-strong)}
.navr{margin-left:auto;display:flex;gap:8px;align-items:center}
.themebtn{width:36px;height:36px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast)}
.themebtn:hover{background:var(--surface-hover);transform:rotate(-12deg)}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.i-moon{display:none}[data-theme="graphite"] .i-moon{display:block}[data-theme="graphite"] .i-sun{display:none}
/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:56px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.ticks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;color:var(--muted);font-size:14px}
.ticks li:before{content:"✓";color:var(--success);font-weight:700;margin-right:6px}
/* demo */
.demo{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-glass),var(--shadow-strong);padding:18px;backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass))}
.demo-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}.demo-title{font-size:var(--text-xs);color:var(--subtle);font-weight:500}.demo-top .btn{margin-left:auto}
.dots{display:flex;gap:5px}.dots i{width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
.paste{background:var(--surface-sunken);border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--shadow-inset);min-height:92px}
.lbl,.f span{display:block;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-overline);color:var(--subtle);font-weight:600;margin-bottom:4px}
.paste p{font-size:13px;line-height:1.6;color:var(--text);min-height:3.2em}
mark{border-radius:4px;padding:0 2px;color:inherit;transition:background var(--motion-base)}
.m0{background:var(--info-soft)}.m1{background:var(--success-soft)}.m2{background:var(--warning-soft)}.m3{background:var(--violet-soft)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0;counter-reset:s}
.steps li{position:relative;text-align:center;font-size:12px;font-weight:600;color:var(--subtle);padding:7px 4px;border-radius:var(--radius-pill);background:var(--surface-subtle);border:1px solid var(--border);transition:all var(--motion-base) var(--ease-out)}
.steps li.on{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand)}
.steps li[aria-current]{background:var(--brand);color:var(--brand-contrast)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.f{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 12px;opacity:.35;transform:translateY(4px);transition:opacity var(--motion-base),transform var(--motion-base) var(--ease-out),border-color var(--motion-base)}
.f b{font-size:14px;font-weight:600;color:var(--text-strong);visibility:hidden}
.f.on{opacity:1;transform:none;border-color:var(--border-strong)}.f.on b{visibility:visible}
.stage{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.card-s{background:var(--surface-raised);border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:10px;opacity:.35;transform:scale(.97);transition:all var(--motion-slow) var(--ease-out)}
.card-s.on{opacity:1;transform:none;border-style:solid;box-shadow:var(--shadow)}
.card-s b{display:block;font-size:13px;margin:6px 0 2px;color:var(--text-strong)}.card-s small{font-size:11.5px;color:var(--muted);line-height:1.35;display:block}
.badge{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);background:var(--brand-soft);color:var(--brand-ink)}.badge.ok{background:var(--success-soft);color:var(--success)}
.demo-note{font-size:11px;color:var(--subtle);margin-top:10px}
/* sections */
.sec{padding-top:72px;padding-bottom:24px}
.sec-h{margin-bottom:32px}.sec-h h2{margin:10px 0 10px;max-width:760px}
.card{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px}
.hov{transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base),border-color var(--motion-base)}
.hov:hover{transform:translateY(-3px);box-shadow:var(--shadow-strong);border-color:var(--border-strong)}
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flow p,.feats p{color:var(--muted);font-size:15px}
.num{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-pill);background:var(--brand-soft);color:var(--brand-ink);font-family:var(--font-mono);font-weight:600;margin-bottom:14px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* device frames */
.dev{margin:0}.dev figcaption{text-align:center;font-size:14px;color:var(--muted);margin-top:12px}
.shot{position:relative;overflow:hidden;background:var(--surface-sunken)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.shot.missing img,.shot.pending img{display:none}
.r-desktop{aspect-ratio:16/10}.r-tablet{aspect-ratio:3/4}.r-phone{aspect-ratio:1179/2556}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--subtle);background:repeating-linear-gradient(135deg,var(--surface-sunken) 0 12px,var(--surface-subtle) 12px 24px);text-align:center;padding:10px}
.ph span{font-weight:600;font-size:14px}.ph small{font-family:var(--font-mono);font-size:11px;opacity:.8}
.desktop{transition:transform var(--motion-base) var(--ease-out)}
.desktop>.shot,.desktop>.bar{border-left:1px solid var(--border-strong);border-right:1px solid var(--border-strong)}
.bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:var(--surface-subtle);border-top:1px solid var(--border-strong);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.bar i{width:10px;height:10px;border-radius:50%;background:var(--border-strong)}
.bar span{margin:0 auto;font-size:12px;color:var(--subtle);background:var(--surface-raised);padding:2px 40px;border-radius:var(--radius-pill);font-family:var(--font-mono)}
.desktop>.shot{border-bottom:1px solid var(--border-strong);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-strong)}
.desktop.sm .bar{height:24px;border-radius:var(--radius-md) var(--radius-md) 0 0}.desktop.sm .bar i{width:7px;height:7px}.desktop.sm>.shot{border-radius:0 0 var(--radius-md) var(--radius-md)}
.dev:hover{transform:translateY(-4px)}.dev{transition:transform var(--motion-base) var(--ease-out)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.mobrow{display:flex;justify-content:center;align-items:flex-end;gap:28px;margin-top:44px;flex-wrap:wrap}
.tablet{width:min(300px,100%)}.phone{width:180px}
.tablet>.shot{border:14px solid #15181D;border-radius:30px;box-shadow:var(--shadow-strong),0 0 0 1px var(--border-strong)}
.phone>.shot{border:9px solid #15181D;border-radius:38px;box-shadow:var(--shadow-strong),0 0 0 1px var(--border-strong)}
.phone>.shot:before{content:"";position:absolute;top:8px;left:50%;width:30%;height:16px;transform:translateX(-50%);background:#15181D;border-radius:10px;z-index:2}
/* pricing */
.billing{display:inline-flex;padding:4px;border-radius:var(--radius-pill);background:var(--surface-sunken);box-shadow:var(--shadow-inset);margin-bottom:24px}
.billing button{font:inherit;font-size:14px;font-weight:600;border:0;background:none;color:var(--muted);padding:8px 18px;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--motion-fast)}
.billing button:hover{color:var(--text-strong)}
.billing button[aria-checked="true"]{background:var(--surface-raised);color:var(--text-strong);box-shadow:var(--shadow)}
.save{font-size:11px;background:var(--success-soft);color:var(--success);padding:2px 7px;border-radius:var(--radius-pill);margin-left:4px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.plan{display:flex;flex-direction:column}
.plan.featured{border:2px solid var(--brand);box-shadow:var(--shadow-strong)}
.tier{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 9px;border-radius:var(--radius-pill);font-size:var(--text-xs,12px);font-weight:700;letter-spacing:.02em;white-space:nowrap;border:1px solid}
.tier .i{flex:none;display:block}
.tier-basic{color:var(--tier-basic-fg);background:var(--tier-basic-bg);border-color:var(--tier-basic-border)}
.tier-gold{color:var(--tier-gold-fg);background:var(--tier-gold-bg);border-color:var(--tier-gold-border)}
.tier-platinum{color:var(--tier-platinum-fg);background:var(--tier-platinum-bg);border-color:var(--tier-platinum-border)}
.tier.is-soon{border-style:dashed}
.tier .soon,.tier i.soon{display:inline-flex;align-items:center;margin-left:3px;padding-left:7px;border-left:1px solid currentColor;font-weight:600;letter-spacing:.01em;font-style:normal}
.price{margin-top:16px;color:var(--muted)}.price b{font-family:var(--font-mono);font-size:var(--text-3xl);letter-spacing:var(--tracking-figures);color:var(--text-strong);margin-right:4px}
.eq{font-size:13px;color:var(--success);font-weight:500;min-height:20px}
.per{font-size:14px;color:var(--subtle)}.inc{font-weight:600;margin:16px 0 8px;font-size:15px}
.checks{list-style:none;display:grid;gap:8px;margin-bottom:22px;font-size:14.5px;color:var(--muted)}
.checks li{padding-left:24px;position:relative}.checks li:before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700}
.checks li.no:before{content:"–";color:var(--subtle)}
.plan .btn{margin-top:auto}
.seats{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-top:16px;color:var(--muted)}
.seats b{color:var(--text-strong)}
.final{text-align:center;padding:56px 24px;background:var(--surface-inverse);border:0}
.final h2{color:var(--text-inverse)}.final p{color:var(--text-inverse);opacity:.8;margin:12px auto 24px;max-width:520px}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:48px;padding-bottom:40px;color:var(--subtle);font-size:14px}.foot a:hover{color:var(--text-strong);text-decoration:underline}
/* reveals */
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js-reveal .reveal.in{opacity:1;transform:none}
/* mobile menu button — base hidden; shown in max-width:960px media below */
.menubtn{display:none;align-items:center;justify-content:center;width:40px;height:36px;padding:0;border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--text);cursor:pointer;flex:none}
.menubtn:hover{background:var(--surface-hover)}
.menubtn svg{width:20px;height:20px;display:none}
.menubtn .i-menu{display:block}
.nav.is-open .menubtn .i-menu{display:none}
.nav.is-open .menubtn .i-close{display:block}
/* responsive */
@media (max-width:960px){.hero{grid-template-columns:1fr;gap:36px;padding-top:44px}.flow{grid-template-columns:1fr 1fr}.feats,.plans,.grid3{grid-template-columns:1fr 1fr}.plans{grid-template-columns:1fr}.links{display:none}.menubtn{display:inline-flex}}
@media (max-width:600px){.flow,.feats,.grid3{grid-template-columns:1fr}.navr .nav-signin{display:none}.seats{flex-direction:column;align-items:flex-start}.fields{grid-template-columns:1fr}.stage{grid-template-columns:1fr}.mobrow{gap:20px}.phone{width:44%}.sub,.lead{font-size:16px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.hov:hover,.dev:hover,.btn:hover,.themebtn:hover{transform:none}}
.soon{display:inline-block;margin-left:.4em;padding:.05em .5em;border-radius:999px;font-size:.78em;font-weight:600;border:1px solid currentColor;vertical-align:middle;white-space:nowrap}

.shot img.th-dk{display:none}[data-theme="graphite"] .shot img.th-dk{display:block}[data-theme="graphite"] .shot img.th-lt{display:none}

.showcase{position:relative;max-width:1000px;margin:0 auto;padding-right:90px;padding-bottom:40px}
.showcase .desktop{margin:0}
.showcase .phone{position:absolute;right:0;bottom:0;width:200px;margin:0;z-index:2}
.sc-cap{text-align:center;color:var(--muted);margin-top:18px;font-size:15px}
.split{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;margin-top:88px}
.split-t h3{font-size:28px;line-height:1.2;margin:10px 0 12px}.split-t p{margin:0 0 16px}
.split .desktop{margin:0}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:28px;margin-top:56px}.showcase{padding-right:44px;padding-bottom:24px}.showcase .phone{width:28%}}
.shot img{height:auto}
.btn.xs{min-height:32px}
.r-comm{aspect-ratio:1220/465}
.phone>.shot{padding-top:30px;background:var(--background)}.phone>.shot img{height:auto}
@media (max-width:860px){.showcase .phone{width:32%}.phone>.shot{border-width:4px;border-radius:18px;padding-top:13px}.phone>.shot:before{top:4px;height:7px;width:28%;border-radius:6px}}
/* showcase: phone beside desktop, no overlap */
.showcase{display:flex;align-items:flex-end;gap:28px;padding:0!important;max-width:1060px}
.showcase .desktop{flex:1 1 auto;min-width:0}
.showcase .phone{position:static!important;flex:0 0 200px;width:200px!important}
@media (max-width:1000px){.showcase{gap:12px}.showcase .phone{flex-basis:27%;width:27%!important}}
/* a11y: keep demo labels at full contrast before the animation plays */
.card-s{opacity:1;background:color-mix(in srgb,var(--surface-raised) 35%,transparent)}.card-s.on{background:var(--surface-raised)}
.card-s:not(.on)>:not(.badge){opacity:.35}.card-s>*{transition:opacity var(--motion-slow) var(--ease-out)}
/* Pricing: taglines, Pro tags, Enterprise coming soon */
.tagl{font-size:14px;color:var(--muted);margin-top:8px}
.tag-t{display:inline-block;margin-left:.35em;padding:.05em .5em;border-radius:999px;font-size:.62em;font-weight:600;vertical-align:middle;color:var(--tier-gold-fg);background:var(--tier-gold-flat);border:1px solid var(--tier-gold-border)}
.plan .wl{display:inline-flex;align-items:center;justify-content:center;text-align:center;margin-top:10px;width:100%;text-decoration:none;box-sizing:border-box}
.cmp thead .soon{display:block;width:max-content;margin:4px auto 0;font-size:11px;font-weight:600}
.seats .btn{white-space:nowrap;flex:none}
/* FAQ (from alt) */
.ul{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.faqg{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.qas{border-top:1px solid var(--border)}
.qa{border-bottom:1px solid var(--border)}
.qa summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:17px;color:var(--text-strong);position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform var(--motion-fast)}
.qa[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.qa p{color:var(--muted);padding:0 40px 20px 0;max-width:620px}
@media (max-width:980px){.faqg{grid-template-columns:1fr;gap:28px}}
@media (max-width:700px){.qa summary{font-size:16px}}
.qa p .soon{font-size:.8em}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
/* Closing Loop logo (Brand asset pack v1), swaps with theme */
.brand img{display:block;height:34px;width:auto}
.brand img.th-dk{display:none}[data-theme="graphite"] .brand img.th-dk{display:block}[data-theme="graphite"] .brand img.th-lt{display:none}
.nf .brand img{height:40px}
@media (max-width:600px){.brand img{height:28px}}
/* sticky nav overlap fix */
.plan,#pricing{scroll-margin-top:84px}
@media (max-width:600px){.nav{background:var(--background);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Mobile nav + waitlist note */
.mnav{display:none;flex-direction:column;gap:4px;padding:12px 20px 16px;border-top:1px solid var(--border);background:var(--background)}
.nav.is-open .mnav{display:flex}
.mnav[hidden]{display:none!important}
.nav.is-open .mnav:not([hidden]){display:flex}
.mnav a{display:flex;align-items:center;padding:12px 10px;border-radius:var(--radius-md);color:var(--text-strong);font-weight:600;font-size:15px;text-decoration:none}
.mnav a:hover{background:var(--surface-hover)}
.mnav .btn{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:8px;text-decoration:none;box-sizing:border-box}
.wl-note{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--subtle);text-align:center}
#enterprise{scroll-margin-top:84px}
@media (max-width:390px){.navin{gap:10px}.navr{gap:6px}.btn.sm{padding:0 10px;font-size:13px}}

/* Enterprise waitlist form (flag-gated in site.js; none of these classes exist when the flag is OFF) */
.plan .wlf-toggle{gap:8px}
.wlf-chev{transition:transform var(--motion-base) var(--ease-out)}
.wlf-toggle[aria-expanded="true"] .wlf-chev{transform:rotate(180deg)}
.wlf{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--motion-base) var(--ease-out),opacity var(--motion-base) var(--ease-out)}
.wlf.is-open{grid-template-rows:1fr;opacity:1}
.wlf[hidden]{display:none}
.wlf-in{min-height:0;overflow:hidden}
.wlf-form{display:grid;gap:14px;padding:16px 2px 4px;text-align:left}
.wlf-f{display:grid;gap:6px}
.wlf-f[hidden]{display:none}
.wlf-f label{font-size:14px;font-weight:600;color:var(--text-strong)}
.wlf-opt{font-weight:400;color:var(--subtle)}
.wlf-hint{font-size:13px;line-height:1.4;color:var(--subtle);margin-top:-2px}
.wlf input,.wlf select,.wlf textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--border-input);background:var(--surface);color:var(--text);font:16px/1.4 var(--font-sans);transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.wlf textarea{resize:vertical;min-height:72px}
.wlf input::placeholder,.wlf textarea::placeholder{color:var(--subtle)}
.wlf input:focus-visible,.wlf select:focus-visible,.wlf textarea:focus-visible{outline:2px solid var(--focus-outline);outline-offset:1px;border-color:var(--brand);box-shadow:var(--shadow-focus);border-radius:var(--radius-md)}
.wlf [aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.wlf-sel{position:relative;display:block}
.wlf-sel select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.wlf-sel:after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.wlf-err{display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:1.4;font-weight:600;color:var(--danger)}
.wlf-err:before{content:"!";flex:none;display:inline-grid;place-items:center;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--danger);color:var(--danger-contrast);font-size:11px;font-weight:700}
.wlf-err[hidden]{display:none}
.wlf-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.wlf-ts{min-height:65px}
.wlf-ts[hidden]{display:none}
.plan .wlf-submit{width:100%;margin-top:2px}
.wlf-submit[hidden]{display:none}
.wlf-submit:disabled{opacity:.65;cursor:progress;transform:none}
.wlf-status{font-size:14px;line-height:1.45;color:var(--muted);text-align:center}
.wlf-status:empty{display:none}
.wlf-status.is-err{color:var(--danger);font-weight:600}
.wlf-status.is-ok{padding:14px;border-radius:var(--radius-md);background:var(--success-soft);color:var(--text-strong);text-align:left}
.wlf-status.is-ok b{display:block;margin-bottom:2px}
.wlf-status.is-ok .ul{display:inline-block;margin-top:6px}
.wlf-status:focus{outline:none}
.wlf-status:focus-visible{outline:2px solid var(--focus-outline);outline-offset:2px}
