/* Hemlock — blue light, white space, floating glass. */
@font-face {
  font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-site-ascii-symbols-300-700-normal.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
:root {
  --ink:#101b2d; --muted:#435771; --paper:#dfeafb; --line:rgba(67,104,157,.22);
  --accent:#087dff; --accent-dark:#0864d0; --white:#fff; --radius:24px; --header:96px;
  --glass:linear-gradient(145deg,rgba(255,255,255,.97),rgba(244,249,255,.91));
  --glass-border:rgba(106,149,205,.42);
  --shadow:0 30px 65px -28px rgba(31,74,137,.34),0 7px 18px rgba(48,91,154,.09),inset 0 1px 0 #fff;
  font-family:'Space Grotesk',Arial,sans-serif; font-synthesis:none; color-scheme:light;
  background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
html { scroll-padding-top:calc(var(--header) + 18px); }
body { margin:0; background:radial-gradient(ellipse at 80% 2%,#f7fbff 0,transparent 26%),radial-gradient(ellipse at 0% 39%,#c3dafa 0,transparent 30%),linear-gradient(180deg,#edf4ff 0%,#dce9fb 27%,#d1e2f8 68%,#e8f1ff 100%); }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { touch-action:manipulation; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin:0; }
h1,h2 { font-weight:500; letter-spacing:-.055em; line-height:1.06; }
h3 { font-weight:500; letter-spacing:-.035em; line-height:1.18; }
p { line-height:1.7; }
em { color:var(--accent); font-style:normal; }
::selection { background:#087dff26; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline-offset:3px; }
[hidden] { display:none!important; }
.container { width:min(100% - 96px,1320px); margin-inline:auto; }
.muted { color:#8091ac; }
.skip-link { position:fixed; z-index:30; top:8px; left:16px; transform:translateY(-180%); border-radius:12px; background:var(--accent); color:white; padding:14px 24px; }
.skip-link:focus { transform:none; }
/* A small, static glass surface keeps the account entry independent of motion. */
.account-link { position:fixed; z-index:25; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); display:grid; place-items:center; width:52px; height:52px; border:1px solid #8db6e8; border-radius:50%; color:var(--accent-dark); background:var(--glass); box-shadow:0 6px 22px #356ba030,inset 0 1px 0 white; transition:background .2s,border-color .2s,box-shadow .2s; }
.account-link svg { pointer-events:none; }
.account-link:focus-visible { outline:3px solid var(--accent-dark); outline-offset:4px; box-shadow:0 0 0 4px white,0 6px 22px #356ba030; }
@media(hover:hover) {
  .account-link:hover { background:#fff; border-color:var(--accent-dark); box-shadow:0 8px 26px #356ba040,inset 0 1px 0 white; }
}
body[data-page=home] .hero-bottom,body[data-page=home] .footer-top { padding-inline-end:calc(72px + env(safe-area-inset-right,0px)); }
body[data-page=home] .site-footer { padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
@media(max-width:380px) {
  body[data-page=home] .hero-actions { padding-inline-end:calc(72px + env(safe-area-inset-right,0px)); }
}
/* Only small foreground surfaces use live backdrop blur. */
.site-header { position:sticky; top:0; z-index:20; height:var(--header); padding-top:16px; }
.site-header>.container { width:min(100% - 48px,1360px); }
.nav-inner { height:64px; padding:10px 20px 10px 22px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid rgba(124,162,211,.36); border-radius:999px; background:rgba(255,255,255,.88); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); box-shadow:0 10px 28px #356ba021,inset 0 1px 0 white; }
.brand { display:inline-flex; gap:10px; align-items:center; font-size:16px; font-weight:600; letter-spacing:.04em; }
.brand img { width:28px; height:28px; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:31px; font-size:12px; }
.nav-links>a:not(.button),.footer-links a { transition:color .2s; }
.nav-links>a:hover,.nav-links>a[aria-current=page],.footer-links a:hover { color:var(--accent); }
.button { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:52px; padding:15px 22px; border:1px solid transparent; border-radius:999px; font-size:13px; font-weight:500; line-height:1.3; transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s; }
.button span { font-size:19px; line-height:1; }
.button:hover { transform:translateY(-2px); }
.button-dark,.button-light { background:linear-gradient(135deg,#1473db,#0864d0); color:#fff; border-color:#ffffff5c; box-shadow:0 6px 22px #168aff2b,inset 0 1px 0 #ffffff4d; }
.button-dark:hover,.button-light:hover { background:linear-gradient(135deg,#0864d0,#0756b2); color:white; box-shadow:0 8px 28px #168aff3d,inset 0 1px 0 #ffffff4d; }
.button-outline,.button-outline-light { background:rgba(255,255,255,.7); border-color:#b8d7ff99; color:#1b70cd; box-shadow:0 5px 20px #337ab508,inset 0 1px 0 white; }
.button-outline:hover,.button-outline-light:hover { background:#edf6ff; border-color:#9dc9ff; }
.button-small { min-height:40px; padding:10px 17px; gap:24px; }
.nav-links .button-small { color:var(--accent); background:#e6f2ff9e; box-shadow:inset 0 1px 0 white; border-color:#97c6ff73; }
.nav-links .button-small:hover { background:#d8eaff; }
.menu-toggle { display:none; width:44px; height:44px; padding:12px; border:0; background:none; }
.menu-toggle span { display:block; width:22px; height:1px; margin:6px 0; background:var(--ink); }
#mobile-menu { padding:16px 22px 20px; margin-top:8px; border:1px solid white; border-radius:24px; background:rgba(247,250,255,.97); box-shadow:var(--shadow); }
#mobile-menu a { display:block; padding:14px 0; font-size:15px; }
.eyebrow { display:flex; align-items:center; gap:10px; font-size:10px; line-height:1.5; text-transform:uppercase; letter-spacing:.14em; font-weight:500; color:#647791; }
.status-dot { display:inline-block; width:6px; height:6px; background:#2c96ff; border-radius:50%; box-shadow:0 0 10px #158bff48; flex-shrink:0; }
/* The original product scrub is progressive and follows native scrolling. */
.hero { position:relative; overflow-x:clip; }
.hero-sticky { min-height:min(810px,calc(100svh - var(--header))); display:flex; flex-direction:column; justify-content:space-between; }
.hero-main { display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:center; flex:1; padding:38px 0 44px; }
.hero-copy { position:relative; z-index:3; padding-block:25px; }
.hero-copy>.eyebrow { display:inline-flex; padding:8px 12px; border:1px solid #fff; border-radius:999px; background:#ffffff8c; box-shadow:0 2px 14px #508ac80a; font-size:9px; }
.hero h1 { font-size:clamp(52px,5.65vw,82px); font-weight:600; margin:26px -55px 25px 0; letter-spacing:-.065em; }
.hero-description { font-size:21px; line-height:1.55; max-width:500px; color:var(--muted); }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:28px; }
.hero-actions .button { gap:16px; }
.hero-signoff { color:#8391a4; font-size:11px; margin-top:23px; }
.hero-animation-track { display:contents; }
.hero-visual { position:relative; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:460px; isolation:isolate; }
.hero-render { position:relative; z-index:1; width:120%; max-width:none; aspect-ratio:1024/634; mix-blend-mode:multiply; mask-image:radial-gradient(ellipse at center,#000 40%,transparent 73%); -webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 73%); }
.hero-render img,.hero-render canvas { width:100%; height:100%; object-fit:contain; }
.hero-render canvas { position:absolute; inset:0; opacity:0; }
.hero.has-frame canvas { opacity:1; }
.hero-orb { position:absolute; pointer-events:none; z-index:-2; border-radius:50%; }
.hero-orb-one { width:100%; aspect-ratio:1; top:4%; left:5%; background:radial-gradient(circle,#c0dcff85,#dfecff50 46%,transparent 70%); }
.hero-orb-two { width:58%; aspect-ratio:1; bottom:6%; left:-15%; background:radial-gradient(circle,#c8e8ff65,transparent 70%); }
.hero-orbit { position:absolute; inset:15% 0 14%; z-index:-1; border:1px solid #a4c8ff24; border-radius:50%; transform:rotate(-25deg); pointer-events:none; }
.hero-orbit-two { inset:7% 7% 7%; transform:rotate(30deg); border-color:#a4c8ff1c; }
.visual-topline { position:absolute; top:7%; left:10%; right:0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:9px; letter-spacing:.13em; color:#7a90ac; z-index:2; }
.visual-topline span:first-child { background:#ffffffa1; padding:8px 12px; border:1px solid #fff; border-radius:999px; color:#327cd0; }
.visual-topline span:last-child { padding-right:15px; }
.visual-caption { position:absolute; bottom:4%; left:10%; right:0; display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:10px; color:#7f91a8; }
.tiny-cross { font-size:17px; padding-right:5px; color:var(--accent); }
.frame-counter { font-variant-numeric:tabular-nums; letter-spacing:.07em; font-size:9px; }
.hero:not(.motion-enabled) .frame-counter { display:none; }
.hero-progress { position:absolute; bottom:0; left:10%; right:0; height:1px; background:#a6c3e630; }
.hero-progress-fill { height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#abd4ff,#087dff); }
.hero-bottom { border-top:1px solid var(--line); display:flex; justify-content:flex-end; align-items:center; gap:20px; padding:23px 0; color:#7d8ba0; font-size:11px; }
.hero-tools { display:flex; align-items:center; gap:30px; }
.scroll-link { display:flex; align-items:center; gap:22px; color:#4f729c; }
.scroll-link span { font-size:18px; }
.motion-toggle { border:0; padding:8px 4px; background:transparent; color:#72849a; font-size:10px; text-decoration:underline; text-underline-offset:4px; }
@media(prefers-reduced-motion:no-preference) and (min-height:541px) and (min-width:701px) {
  .hero-motion-pending .hero,.hero.motion-enabled { height:210svh; }
  .hero-motion-pending .hero-sticky,.motion-enabled .hero-sticky { position:sticky; top:var(--header); height:calc(100svh - var(--header)); min-height:0; }
  .hero-motion-pending .hero-main,.motion-enabled .hero-main { min-height:0; }
  .hero-motion-pending .hero-visual,.motion-enabled .hero-visual { min-height:0; }
}
/* A floating glass story card with an illustrative force trace. */
.signal-section { position:relative; width:min(100% - 64px,1400px); margin:32px auto 90px; border-radius:36px; padding:70px 0 42px; color:var(--ink); background:var(--glass); border:1px solid var(--glass-border); box-shadow:var(--shadow); }
.signal-section::before { content:''; position:absolute; width:35%; aspect-ratio:1; border-radius:50%; right:0; top:0; z-index:-1; background:radial-gradient(circle,#c2ddff6b,transparent 70%); }
.signal-section>.container { width:calc(100% - 100px); }
.signal-grid { display:grid; grid-template-columns:1fr .85fr; gap:70px; align-items:center; }
.signal-section .eyebrow { margin-bottom:22px; color:#6b89b2; }
.signal-section h2 { font-size:clamp(32px,3.15vw,44px); line-height:1.13; letter-spacing:-.045em; }
.signal-section h2 span { color:var(--accent); }
.signal-copy p { font-size:20px; line-height:1.6; color:var(--muted); }
.signal-copy p+p { margin-top:12px; }
.signal-trace { margin-top:43px; border:1px solid #fff; border-radius:20px; background:#ffffff73; padding:20px 24px; }
.trace-label { display:flex; align-items:center; gap:9px; font-size:9px; letter-spacing:.08em; color:#6284ad; }
.trace-label>span:last-child { margin-left:auto; letter-spacing:.015em; font-size:8px; color:#8497ad; }
.signal-trace svg { width:100%; height:88px; margin-top:20px; overflow:visible; }
.trace-grid { stroke:#548bd51a; stroke-width:1; }
.trace-secondary { stroke:#8bbefa; stroke-width:1.5; }
.trace-primary { stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.trace-stages { display:flex; justify-content:space-between; margin-top:10px; font-size:9px; color:#778dab; }
.section-space { padding-block:105px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:48px; }
.section-heading .eyebrow { margin-bottom:20px; }
.section-heading h2 { font-size:clamp(40px,4.2vw,60px); }
.section-intro { font-size:15px; line-height:1.7; color:var(--muted); max-width:355px; }
.section-intro .text-link { margin-top:20px; color:var(--accent-dark); }
/* Each offer stays in normal document flow, then pins for its native scroll span. */
.how-section { padding-top:88px; }
.how-section>.offer-scroll { margin-bottom:0; }
.paths-section { padding-top:88px; padding-bottom:28px; }
.paths-section>.section-heading { margin-bottom:42px; }
.paths-section>.section-heading h2 { font-size:clamp(38px,4.4vw,62px); }
.offer-scroll { position:relative; margin-bottom:76px; --scrub-distance:115svh; }
.offer-scroll.sequence-pending,.offer-scroll.sequence-enabled { height:calc(var(--sequence-card-height) + var(--scrub-distance)); }
.offer-card { position:static; top:calc(var(--header) + 16px); display:grid; grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr); align-items:center; min-height:min(600px,calc(100svh - var(--header) - 40px)); padding:20px; gap:14px; border:1px solid var(--glass-border); border-radius:34px; background:var(--glass); box-shadow:var(--shadow); isolation:isolate; }
.sequence-pending>.offer-card,.sequence-enabled>.offer-card { position:sticky; }
.offer-copy { min-width:0; padding:30px 28px 38px; }
.offer-copy h3,.emg-card .offer-copy h2 { font-size:clamp(43px,4.5vw,65px); font-weight:500; letter-spacing:-.055em; line-height:1.04; margin-bottom:25px; }
.emg-card .offer-copy h2 { font-size:clamp(40px,4.1vw,59px); }
.offer-copy p { font-size:clamp(20px,1.65vw,25px); line-height:1.55; color:#344b69; max-width:480px; }
.offer-copy>.button { margin-top:30px; font-size:14px; }
.offer-media { position:relative; top:-8px; z-index:1; min-width:0; aspect-ratio:16/10; width:100%; overflow:hidden; border-radius:23px; background:#183044; box-shadow:0 30px 46px -18px #163b6980,0 12px 22px -10px #244f8070,0 0 0 1px #ffffffed; }
.offer-media::after { content:""; position:absolute; z-index:2; inset:0; border:1px solid #ffffff9e; border-radius:inherit; box-shadow:inset 0 1px 0 #ffffffad; pointer-events:none; }
.offer-media img,.offer-media canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.offer-media canvas { opacity:0; }
.offer-media.has-sequence-frame canvas { opacity:1; }
.offer-progress { position:absolute; bottom:0; left:32px; right:32px; height:3px; overflow:hidden; border-radius:3px; background:#94b9e332; opacity:0; }
.sequence-enabled .offer-progress { opacity:1; }
.offer-progress span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:#087dff; }
.data-card { background:linear-gradient(140deg,#fffffff7,#f2f8fff0); }
/* Measure a stable small-viewport budget without placing any card content
   behind the navigation. The invisible ruler never participates in layout. */
.result-card { --result-sequential:0; --result-columns:2; --result-bottom-space:calc(48px + env(safe-area-inset-bottom,0px)); grid-template-columns:minmax(0,1fr); min-height:0; gap:26px; top:calc(var(--header) + 16px); }
.result-card::before { content:""; position:absolute; width:0; height:max(1px,calc(100svh - var(--header) - 16px - var(--result-bottom-space))); visibility:hidden; pointer-events:none; }
.result-card .offer-copy { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); align-items:start; gap:32px; padding:22px 28px 0; }
.result-card .offer-copy h3 { margin-bottom:0; }
.result-card .offer-copy p { max-width:690px; }
.result-media { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; min-width:0; }
.result-track { min-width:0; }
.result-card .offer-media { aspect-ratio:16/9; height:var(--result-frame-height,auto); }
.result-card .offer-media img { object-fit:contain; }
.result-caption { position:relative; z-index:1; padding:12px 10px 3px; color:#435771; font-size:14px; line-height:1.35; white-space:nowrap; }
.collection-settings { padding-top:4px; padding-bottom:92px; }
.collection-settings .section-heading { align-items:flex-start; margin-bottom:32px; }
.collection-settings h2 { max-width:650px; font-size:clamp(36px,4.2vw,58px); }
.collection-settings .section-intro { max-width:410px; padding-top:4px; font-size:19px; line-height:1.55; }
.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.setting-card { min-width:0; padding:16px; border:1px solid var(--glass-border); border-radius:27px; background:var(--glass); box-shadow:var(--shadow); }
.setting-media { position:relative; top:-8px; aspect-ratio:3/2; border-radius:18px; overflow:hidden; background:#d5e4f5; box-shadow:0 26px 38px -18px #163b6973,0 9px 18px -10px #244f8061,0 0 0 1px #ffffffed; }
.setting-media::after { content:""; position:absolute; inset:0; border:1px solid #ffffff9e; border-radius:inherit; box-shadow:inset 0 1px 0 #ffffffad; pointer-events:none; }
.setting-media img { width:100%; height:100%; object-fit:cover; }
.setting-copy { position:relative; padding:14px 14px 16px; }
.setting-card h3 { font-size:27px; margin-bottom:14px; }
.setting-card p { color:#435771; font-size:18px; line-height:1.55; }
.text-link { display:flex; justify-content:space-between; align-items:center; width:fit-content; min-height:36px; gap:28px; font-size:13px; font-weight:500; color:var(--accent-dark); }
.text-link span { font-size:20px; transition:transform .2s; }
.text-link:hover span { transform:translate(3px,-3px); }
.workflow-section { position:relative; padding-top:40px; padding-bottom:75px; background:radial-gradient(ellipse at 25% 90%,#e0edff70,transparent 55%); }
.workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; margin:55px 0 0; padding:0; }
.workflow-grid li { position:relative; border:1px solid var(--glass-border); background:var(--glass); border-radius:24px; padding:28px; box-shadow:var(--shadow); }
.step-no { display:grid; place-items:center; width:37px; height:37px; border-radius:11px; border:1px solid #cce4ff; background:linear-gradient(130deg,#f3f9ff,#e1efff); color:var(--accent); font-size:11px; margin-bottom:30px; }
.workflow-grid h3 { font-size:24px; margin-bottom:16px; }
.workflow-grid p { font-size:14px; color:var(--muted); }
.step-tag { display:block; margin-top:28px; font-size:8px; letter-spacing:.08em; color:#4f88c9; }
.collection-list { display:flex; flex-direction:column; gap:12px; }
.collection-row { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:26px; padding:28px; border:1px solid #fff; border-radius:20px; background:#ffffff9e; box-shadow:0 8px 30px #4681bd07,inset 0 1px 0 #fff; }
a.collection-row { transition:background .2s,box-shadow .2s; }
a.collection-row:hover { background:#edf6ff; box-shadow:0 10px 35px #418ce519,inset 0 1px 0 #fff; }
.collection-row h3 { font-size:25px; margin-bottom:7px; }
.collection-row p { font-size:14px; color:var(--muted); max-width:690px; }
.collection-arrow { display:grid; place-items:center; width:36px; height:36px; border:1px solid #bfdcfa; border-radius:50%; color:var(--accent); font-size:21px; }
.collection-note { font-size:11px; color:#7a8ea6; margin-top:22px; }
.closing-section { position:relative; width:min(100% - 64px,1400px); margin:0 auto 36px; padding:85px 0 90px; border-radius:36px; border:1px solid var(--glass-border); background:radial-gradient(ellipse at 83% 35%,#c8e1ff6e,transparent 65%),linear-gradient(130deg,#fff,#ecf4ffd4); box-shadow:var(--shadow); }
.closing-inner { width:calc(100% - 100px); }
.closing-section .eyebrow { color:#6385b0; margin-bottom:30px; }
.closing-section h2 { font-size:clamp(48px,6.2vw,88px); letter-spacing:-.06em; }
.closing-section h2 em { color:var(--accent); }
.closing-section p:not(.eyebrow) { color:var(--muted); font-size:15px; margin-top:27px; }
.closing-actions { display:flex; gap:12px; margin-top:30px; }
.site-footer { padding:36px 0 28px; }
.footer-top { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.footer-links { display:flex; gap:30px; font-size:12px; color:#62768f; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); margin-top:36px; padding-top:22px; font-size:10px; color:#7c8da3; }
/* Talk to us and collection areas share the same glass surfaces. */
.page-heading { max-width:850px; padding-top:72px; padding-bottom:60px; }
.page-heading .eyebrow { margin-bottom:23px; }
.page-heading h1 { font-size:clamp(48px,6.5vw,82px); margin-bottom:26px; }
.lede { max-width:710px; color:var(--muted); font-size:18px; line-height:1.65; }
.page-heading>.button { margin-top:28px; }
.page-heading>h2 { font-size:clamp(34px,4vw,52px); }
.contact-layout { width:min(100%,780px); margin:0 auto 95px; padding-top:18px; }
body[data-page=contact] .page-heading { max-width:780px; margin-inline:auto; }
.contact-aside h2 { font-size:28px; margin-bottom:20px; }
.contact-aside h3 { font-size:19px; margin:30px 0 12px; }
.contact-aside p { font-size:14px; color:var(--muted); margin-bottom:22px; }
.contact-aside .info-card { margin-bottom:20px; }
.contact-aside .info-card h2 { font-size:26px; }
.contact-aside .info-card p { margin-bottom:14px; }
.contact-aside .text-link { margin-bottom:0; }
.info-card>.text-link+.text-link { margin-top:6px; }
.contact-aside>div:last-child:not(.info-card) { padding:18px 26px 0; }
.contact-form { min-width:0; padding:36px; border:1px solid var(--glass-border); border-radius:30px; background:var(--glass); box-shadow:var(--shadow); align-self:start; }
.contact-form h2 { font-size:30px; margin-bottom:28px; }
.contact-form>p { color:var(--muted); font-size:14px; margin-bottom:26px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px 20px; }
.field { display:flex; min-width:0; flex-direction:column; gap:9px; }
.field-full { grid-column:1/-1; }
.field label { font-size:14px; font-weight:500; color:#445a76; }
.field input,.field select,.field textarea { width:100%; min-width:0; min-height:48px; padding:13px 14px; background:#ffffff91; border:1px solid #bad1ee85; border-radius:12px; font-size:14px; color:var(--ink); box-shadow:inset 0 2px 5px #6285b305; }
.field textarea { resize:vertical; min-height:145px; }
.field input::placeholder,.field textarea::placeholder { color:#8696ab; }
.field input:focus,.field select:focus,.field textarea:focus { background:#fff; }
.field-hint { color:#7c8ca2; font-size:11px; line-height:1.6; }
.contact-form .button { margin-top:20px; }
.form-status { font-size:13px; line-height:1.6; min-height:1.6em; margin-top:15px; color:#376797; }
[data-state=error] .form-status { color:#9a382c; }
.form-note,.contact-form .form-note { font-size:12px; line-height:1.65; color:var(--muted); }
.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.card-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:36px 0 70px; }
.info-card { padding:30px; border:1px solid var(--glass-border); border-radius:24px; background:var(--glass); box-shadow:var(--shadow); }
.info-card .number { display:block; margin-bottom:24px; }
.info-card h2,.info-card h3 { font-size:29px; margin-bottom:18px; }
.info-card p { font-size:15px; color:var(--muted); margin-bottom:20px; }
.info-card ul { color:var(--muted); font-size:14px; padding-left:18px; line-height:1.9; }
.info-card .text-link { margin-top:20px; }
.inquiry-links { display:flex; flex-direction:column; gap:0; margin-top:12px; }
.inquiry-link { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; color:#4375ad; font-size:13px; border-top:1px solid var(--line); transition:color .2s; }
.inquiry-link:hover { color:var(--accent); }
.inquiry-link span[aria-hidden] { font-size:18px; }
.tags { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; max-width:240px; }
.tag { color:#6185b2; border:1px solid #b6d4f566; border-radius:999px; background:#eaf4ff6e; padding:7px 11px; font-size:10px; }
body:not([data-page=home]) .collection-list { margin-bottom:65px; }
body:not([data-page=home]) .section-heading { margin-top:30px; }
body[data-page=applications] section.page-heading { max-width:none; padding-top:10px; padding-bottom:0; }
button:disabled { opacity:.65; cursor:wait; transform:none; }
/* Content starts visible. GSAP is an optional progressive enhancement. */
[data-split] { overflow-wrap:normal; }
.motion-word { display:inline-block; }
@media(max-width:1100px) {
  .container { width:calc(100% - 64px); }
  .nav-links { gap:21px; }
  .hero h1 { font-size:61px; margin-right:-28px; }
  .hero-main { grid-template-columns:1fr 1fr; gap:30px; }
  .hero-description { font-size:19px; }
  .hero-actions .button { padding:14px 15px; font-size:12px; gap:11px; }
  .hero-visual { min-height:400px; }
  .signal-grid { gap:40px; }
  .contact-layout { gap:28px; }
  .workflow-grid li { padding:24px; }
  .workflow-grid h3 { font-size:22px; }
}
@media(max-width:899px) {
  :root { --header:86px; }
  .site-header { padding-top:12px; }
  .site-header>.container { width:calc(100% - 32px); }
  .nav-inner { height:60px; padding:8px 12px 8px 18px; }
  .nav-links { display:none; }
  .menu-toggle { display:block; }
  .hero-main { gap:20px; padding-block:30px; }
  .hero h1 { font-size:50px; margin-block:22px; }
  .hero-copy { padding:0; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .hero-actions .button { min-width:210px; }
  .hero-description { font-size:18px; }
  .hero-signoff { margin-top:18px; }
  .hero-visual { min-height:360px; }
  .hero-render { width:132%; }
  .visual-topline { top:3%; left:8%; right:0; }
  .visual-caption { bottom:1%; left:5%; font-size:9px; }
  .hero-bottom { font-size:10px; }
  .hero-tools { gap:15px; }
  .signal-section>.container,.closing-inner { width:calc(100% - 60px); }
  .signal-section h2 { font-size:32px; }
  .section-intro { max-width:300px; font-size:14px; }
  .section-heading { gap:30px; }
  .workflow-grid { gap:15px; }
  .workflow-grid li { padding:21px; }
  .workflow-grid h3 { font-size:21px; }
  .workflow-grid p { font-size:13px; }
  .collection-row { grid-template-columns:32px 1fr auto; gap:16px; padding:24px; }
  .collection-row h3 { font-size:23px; }
  .tags { max-width:175px; }
  .contact-layout { grid-template-columns:minmax(0,1fr); gap:30px; }
  .contact-form { max-width:none; }
  .contact-aside { max-width:720px; }
}
@media(max-width:700px) {
  .container { width:calc(100% - 40px); }
  .brand { font-size:15px; }
  .brand img { width:26px; height:26px; }
  .hero-main { grid-template-columns:1fr; gap:10px; padding:30px 0 14px; }
  .hero-sticky { min-height:0; }
  .hero h1 { font-size:clamp(43px,9.5vw,64px); margin:23px 0; }
  .hero-description { font-size:19px; max-width:500px; }
  .hero-actions { flex-direction:row; margin-top:25px; gap:9px; }
  .hero-actions .button { min-width:0; padding:15px 24px; gap:24px; font-size:14px; white-space:nowrap; }
  .hero-signoff { margin-top:18px; }
  .hero-visual { min-height:0; height:auto; aspect-ratio:1.05; margin-top:12px; }
  .hero-render { width:118%; }
  .visual-topline { top:1%; left:0; }
  .visual-topline span:first-child { padding:6px 9px; font-size:8px; }
  .visual-caption { left:0; bottom:0; font-size:9px; }
  .visual-caption .frame-counter { display:none; }
  .hero-progress { display:none; }
  .hero-orbit { inset:10% 5%; }
  .hero-bottom { margin-top:10px; padding-block:22px; align-items:flex-start; font-size:9px; }
  .hero-bottom>p { max-width:150px; }
  .hero-tools { align-items:center; flex-direction:row; gap:24px; min-height:44px; }
  .scroll-link { gap:12px; font-size:11px; }
  .motion-toggle { font-size:11px; padding:5px 2px; }
  .signal-section,.closing-section { width:calc(100% - 24px); border-radius:28px; }
  .signal-section { padding:38px 0 25px; margin-top:24px; }
  .signal-section>.container,.closing-inner { width:calc(100% - 44px); }
  .signal-grid { grid-template-columns:1fr; gap:25px; }
  .signal-section h2 { font-size:32px; }
  .signal-section .eyebrow { font-size:8px; }
  .signal-copy p { font-size:18px; }
  .signal-trace { margin-top:28px; padding:15px 13px; border-radius:15px; }
  .trace-label { font-size:8px; gap:6px; }
  .trace-label>span:last-child { font-size:7px; }
  .signal-trace svg { height:65px; margin-top:16px; }
  .trace-stages { font-size:8px; }
  .section-space { padding-block:65px; }
  .section-heading { display:block; margin-bottom:30px; }
  .section-heading h2 { font-size:43px; }
  .section-heading .eyebrow { margin-bottom:18px; }
  .section-intro { max-width:480px; margin-top:22px; }
  .workflow-section { padding-top:10px; padding-bottom:10px; }
  .workflow-grid { grid-template-columns:1fr; gap:18px; margin-top:32px; }
  .workflow-grid li { padding:25px; }
  .step-no { margin-bottom:24px; }
  .workflow-grid h3 { font-size:25px; }
  .workflow-grid p { font-size:14px; max-width:480px; }
  .step-tag { margin-top:22px; }
  .collection-row { grid-template-columns:20px 1fr 27px; gap:11px; padding:22px 17px; border-radius:19px; }
  .collection-row h3 { font-size:21px; line-height:1.2; }
  .collection-row p { font-size:12px; }
  .collection-row .number { align-self:start; margin-top:4px; font-size:8px; }
  .collection-arrow { width:27px; height:27px; font-size:17px; }
  .collection-row .tags,.collection-row>.text-link { grid-column:2/-1; max-width:none; justify-content:flex-start; }
  .collection-note { font-size:10px; }
  .closing-section { padding:50px 0; margin-bottom:25px; }
  .closing-section .eyebrow { font-size:8px; margin-bottom:23px; }
  .closing-section h2 { font-size:clamp(40px,10vw,60px); }
  .closing-section p:not(.eyebrow) { font-size:14px; }
  .closing-actions { gap:9px; flex-wrap:wrap; }
  .closing-actions .button { font-size:12px; padding:14px; gap:12px; }
  .footer-top { align-items:flex-start; gap:20px; }
  .footer-links { display:grid; grid-template-columns:1fr; gap:13px; font-size:12px; }
  .footer-bottom { margin-top:30px; font-size:9px; }
  .footer-bottom span:first-child { max-width:120px; }
  .page-heading { padding:48px 0 36px; }
  .page-heading h1 { font-size:49px; }
  .lede { font-size:16px; }
  .contact-layout { margin-bottom:55px; padding-top:8px; }
  .contact-form { padding:28px 22px; border-radius:26px; }
  .contact-form h2 { font-size:28px; }
  .form-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .field input,.field select,.field textarea { font-size:16px; }
  .card-grid { grid-template-columns:1fr; gap:20px; margin-bottom:45px; }
  .info-card { padding:26px; }
  body:not([data-page=home]) .collection-list { margin-bottom:50px; }
}
@media(max-width:370px) {
  .container { width:calc(100% - 32px); }
  .hero h1 { font-size:42px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .button { width:100%; justify-content:space-between; }
  .closing-actions { flex-direction:column; align-items:flex-start; }
  .footer-bottom { font-size:8px; }
}
@media(max-height:740px) and (min-width:701px) {
  .hero-main { padding-block:22px; }
  .hero-copy { padding:0; }
  .hero h1 { font-size:clamp(45px,5vw,65px); margin-block:18px; }
  .hero-description { font-size:18px; }
  .hero-actions { margin-top:22px; }
  .hero-signoff { margin-top:16px; }
  .hero-bottom { padding-block:16px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .hero-progress,.frame-counter,.motion-toggle { display:none; }
  .hero.motion-enabled { height:auto; }
  .hero-sticky { position:static; }
}

/* Content and animation share a card; neither needs another product page. */
.nav-cta { white-space:nowrap; }
@media(max-width:1100px) and (min-width:701px) {
  .offer-card { padding:16px; gap:6px; }
  .offer-copy { padding:26px 22px 30px; }
  .offer-copy h3,.emg-card .offer-copy h2 { font-size:46px; }
  .offer-copy p { font-size:20px; }
  .offer-media { aspect-ratio:1.35; }
  .result-card { gap:22px; }
  .result-card .offer-copy { padding:18px 22px 0; gap:24px; }
  .result-caption { font-size:13px; }
  .collection-settings .section-heading { gap:30px; }
  .collection-settings h2 { max-width:440px; }
  .collection-settings .section-intro { max-width:310px; font-size:18px; }
  .settings-grid { gap:16px; }
  .setting-card { padding:12px; }
  .setting-media { top:-5px; border-radius:17px; }
  .setting-copy { padding:14px 10px 13px; }
  .setting-card h3 { font-size:24px; }
  .setting-card p { font-size:17px; }
}
@media(max-width:700px) {
  .how-section { padding-top:54px; }
  .paths-section { padding-top:54px; padding-bottom:10px; }
  .paths-section>.section-heading { margin-bottom:28px; }
  .paths-section>.section-heading h2 { font-size:40px; }
  .offer-scroll { margin-bottom:48px; --scrub-distance:95svh; }
  .offer-card { grid-template-columns:minmax(0,1fr); min-height:0; padding:12px; gap:22px; border-radius:27px; }
  .offer-copy { padding:20px 13px 0; }
  .offer-copy h3,.emg-card .offer-copy h2 { font-size:40px; margin-bottom:18px; }
  .offer-copy h3 br,.emg-card .offer-copy h2 br { display:none; }
  .offer-copy p { font-size:20px; line-height:1.5; max-width:540px; }
  .offer-copy>.button { margin-top:22px; min-height:46px; padding:12px 18px; font-size:13px; }
  .offer-media { top:-3px; aspect-ratio:16/10; border-radius:17px; box-shadow:0 20px 28px -13px #163b6978,0 7px 15px -8px #244f8070,0 0 0 1px #ffffffed; }
  .offer-progress { left:24px; right:24px; }
  .result-card { gap:24px; }
  .result-card .offer-copy { display:block; padding:20px 13px 0; }
  .result-card .offer-copy h3 { margin-bottom:18px; }
  .result-media { gap:10px; }
  .result-card .offer-media { border-radius:14px; }
  .result-caption { padding:10px 3px 3px; font-size:12px; }
  .collection-settings { padding-top:10px; padding-bottom:45px; }
  .collection-settings .section-heading { margin-bottom:25px; }
  .collection-settings h2 { font-size:38px; }
  .collection-settings .section-intro { max-width:540px; padding-top:0; margin-top:20px; font-size:19px; }
  .settings-grid { grid-template-columns:minmax(0,1fr); gap:25px; }
  .setting-card { padding:14px; border-radius:25px; }
  .setting-media { top:-5px; border-radius:18px; box-shadow:0 20px 28px -15px #163b6973,0 7px 15px -9px #244f8061,0 0 0 1px #ffffffed; }
  .setting-copy { padding:15px 12px 14px; }
  .setting-card h3 { font-size:26px; margin-bottom:12px; }
  .setting-card p { font-size:18px; max-width:500px; }
  .signal-section { margin-bottom:54px; }
  .nav-cta { min-height:40px; padding:10px 15px; font-size:12px; gap:12px; }
}
@media(max-height:740px) and (min-width:701px) {
  .offer-card { min-height:0; padding:16px; }
  .offer-copy { padding:20px; }
  .offer-copy h3,.emg-card .offer-copy h2 { font-size:42px; margin-bottom:20px; }
  .offer-copy p { font-size:20px; }
  .offer-copy>.button { margin-top:22px; }
  .result-card { gap:20px; }
  .result-card .offer-copy { padding:12px 20px 0; }
  .result-card .offer-copy h3 { margin-bottom:0; }
  .result-card .offer-media { aspect-ratio:2; }
}
@media(prefers-reduced-motion:reduce) {
  .offer-scroll.sequence-pending,.offer-scroll.sequence-enabled { height:auto; }
  .sequence-pending>.offer-card,.sequence-enabled>.offer-card { position:static; }
  .offer-progress { display:none; }
}

/* Preserve complete tasks and recording HUDs across both human views and the result pair. */
.offer-media[data-track=emg],.offer-media[data-track=hardware],.offer-media[data-track=worker],.result-card .offer-media { aspect-ratio:16/9; }

/* Phones keep the complete demonstrations large enough to read. */
@media(max-width:700px), (max-width:1100px) and (max-height:540px) {
  .button,.hero-actions .button,.closing-actions .button { justify-content:center; gap:0; text-align:center; }
  .button>span[aria-hidden=true] { display:none; }
  .result-card { --result-columns:1; padding:12px; gap:12px; }
  .result-card .offer-copy { display:block; padding:0 8px; }
  .result-card .offer-copy h3 { font-size:36px; margin-bottom:12px; }
  .result-card .offer-copy p { font-size:18px; line-height:1.5; }
  .result-media { grid-template-columns:minmax(0,1fr); gap:12px; }
  .result-card .offer-media { top:0; border-radius:16px; background:#e8f1fb; }
  .result-card .offer-media img { object-fit:contain; }
  .result-caption { padding:7px 3px 0; font-size:12px; }
}

/* If the complete pair cannot fit at a useful size, hold the introduction
   below the header and give each demonstration its own pin beneath it. */
.offer-scroll.result-sequential.sequence-pending,.offer-scroll.result-sequential.sequence-enabled { height:auto; }
.result-sequential.sequence-pending>.result-card,.result-sequential.sequence-enabled>.result-card { position:static; }
.result-sequential .result-media { grid-template-columns:minmax(0,1fr); }
.result-sequential.sequence-pending .offer-copy,.result-sequential.sequence-enabled .offer-copy { position:sticky; top:calc(var(--header) + 16px); z-index:3; background:var(--glass); border-radius:12px; }
.result-sequential.sequence-pending .result-track,.result-sequential.sequence-enabled .result-track { height:calc(var(--sequence-track-height,0px) + var(--scrub-distance)); }
.result-sequential.sequence-pending .result-visual,.result-sequential.sequence-enabled .result-visual { position:sticky; top:calc(var(--header) + 16px + var(--result-copy-height,0px) + var(--result-copy-gap,12px)); }
.result-sequential .result-card>.offer-progress { display:none; }

/* Landscape keeps a compact, readable heading and description above each
   independently pinned full-frame demonstration. */
@media(max-width:1100px) and (max-height:540px) and (orientation:landscape) {
  .result-card { --result-sequential:1; }
  .result-card .offer-copy { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:24px; align-items:center; }
  .result-card .offer-copy h3 { font-size:28px; margin:0; }
  .result-card .offer-copy p { font-size:16px; line-height:1.35; }
}

/* The mobile intro scrolls normally; only the Bracelet pins for its scrub. */
@media(prefers-reduced-motion:no-preference) and (max-width:700px), (prefers-reduced-motion:no-preference) and (max-height:540px) {
  .hero-motion-pending .hero,.hero.motion-enabled { height:auto; }
  .hero-motion-pending .hero-sticky,.hero.motion-enabled .hero-sticky { position:static; height:auto; min-height:0; }
  .hero-motion-pending .hero-main,.hero.motion-enabled .hero-main { display:block; padding-bottom:14px; }
  .hero-motion-pending .hero-animation-track,.hero.motion-enabled .hero-animation-track { --hero-stage-height:min(560px,calc(100svh - var(--header) - 24px)); display:block; position:relative; height:calc(var(--hero-stage-height) + 100svh); margin-top:12px; }
  .hero-motion-pending .hero-visual,.hero.motion-enabled .hero-visual { position:sticky; top:calc(var(--header) + 12px); height:var(--hero-stage-height); min-height:0; aspect-ratio:auto; margin:0; }
  .hero-motion-pending .hero-render,.hero.motion-enabled .hero-render { width:min(118%,calc(var(--hero-stage-height) * 1.615)); flex-shrink:0; }
}