/* HIOLO site v1 — Swarm × 4c "Mesh, chromatic". Font: Mona Sans (SIL OFL), self-hosted. One family: the small labels are Mona Sans too. */
@font-face{font-family:"Mona Sans";src:url(/assets/fonts/mona-sans-latin.woff2) format("woff2");font-weight:400 800;font-stretch:100% 125%;font-display:swap;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:"Mona Sans";src:url(/assets/fonts/mona-sans-latin-ext.woff2) format("woff2");font-weight:400 800;font-stretch:100% 125%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* metric-matched fallbacks keep the layout still while the fonts arrive */
@font-face{font-family:"Mona Fallback";src:local("Arial");size-adjust:104%;ascent-override:92%;descent-override:24%}

:root{
 --bg:#FAFAFC;--fg:#14121F;--fg2:#3A3848;--mute:#6B697B;--accent:#6A3CFF;--accent2:#5B3CF0;--line:rgba(20,18,31,.12);--card:#fff;
 --em:linear-gradient(100deg,#6A3CFF,#1BA8F0 30%,#19C9A0 50%,#F24FB8 74%,#FF8A3D);
 --display:"Mona Sans","Mona Fallback",system-ui,sans-serif;--body:"Mona Sans","Mona Fallback",system-ui,sans-serif;--mono:var(--body);
 --dispW:800;--dispTrack:-.035em;--dispStretch:112.5%;--monoSize:11px;--monoTrack:.06em;--monoW:560;
 --pad:clamp(18px,3vw,44px);--maxw:1360px;--ease:cubic-bezier(.2,.7,.2,1);
 --glow:radial-gradient(45% 40% at 50% 55%,rgba(106,60,255,.035),transparent 70%);
 --shade:20,18,31;--phone:drop-shadow(0 26px 22px rgba(20,18,31,.20)) drop-shadow(0 6px 6px rgba(20,18,31,.10));
 color-scheme:light
}
/* dark (v7 4b "Mesh, dark"): ink-violet night, the mesh is light. Set by the head script; the media query covers no-JS. */
:root[data-theme=dark]{
 --bg:#0B0A1C;--fg:#F4F1FF;--fg2:#CDC8E8;--mute:#9C96BC;--accent:#8B5CFF;--accent2:#B39BFF;--line:rgba(244,241,255,.14);--card:#15132D;
 --em:linear-gradient(100deg,#9B6CFF,#18C8FF 30%,#2BE8B8 50%,#FF5AA0 74%,#FFB55C);
 --glow:radial-gradient(55% 50% at 88% 6%,rgba(139,92,255,.30),transparent 70%),radial-gradient(40% 40% at 102% 58%,rgba(24,200,255,.11),transparent 70%),radial-gradient(44% 26% at 6% 80%,rgba(255,90,134,.12),transparent 70%);
 --shade:0,0,0;--phone:drop-shadow(0 0 .6px rgba(214,204,255,.55)) drop-shadow(0 28px 26px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(139,92,255,.16));
 color-scheme:dark
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
 --bg:#0B0A1C;--fg:#F4F1FF;--fg2:#CDC8E8;--mute:#9C96BC;--accent:#8B5CFF;--accent2:#B39BFF;--line:rgba(244,241,255,.14);--card:#15132D;
 --em:linear-gradient(100deg,#9B6CFF,#18C8FF 30%,#2BE8B8 50%,#FF5AA0 74%,#FFB55C);
 --glow:radial-gradient(55% 50% at 88% 6%,rgba(139,92,255,.30),transparent 70%),radial-gradient(40% 40% at 102% 58%,rgba(24,200,255,.11),transparent 70%),radial-gradient(44% 26% at 6% 80%,rgba(255,90,134,.12),transparent 70%);
 --shade:0,0,0;--phone:drop-shadow(0 0 .6px rgba(214,204,255,.55)) drop-shadow(0 28px 26px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(139,92,255,.16));
 color-scheme:dark
}}
.theming,.theming body,.theming .top,.theming .solid,.theming .foot,.theming .card{transition:background-color .35s,color .35s!important}
*{box-sizing:border-box;margin:0;padding:0}
html{background-color:var(--bg);background-image:var(--glow);background-attachment:fixed;background-repeat:no-repeat;min-height:100%;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{color:var(--fg);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:30;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
/* small labels: Mona Sans, semibold-ish caps, opened up a little; numbers on even widths so 01/02/03 line up */
.mono{font-family:var(--mono);font-size:var(--monoSize);letter-spacing:var(--monoTrack);text-transform:uppercase;font-weight:var(--monoW);line-height:1.55;font-variant-numeric:tabular-nums}
.display{font-family:var(--display);font-weight:var(--dispW);font-stretch:var(--dispStretch);letter-spacing:var(--dispTrack);line-height:.98}
.em{background:var(--em);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- header ---------- */
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--fg)}
.brand .mk{width:20px;height:20px;flex:none}
.brand .wm{height:12.5px;width:auto;flex:none}
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);transition:background .3s,box-shadow .3s}
.top.is-solid{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.top nav{display:flex;gap:28px;align-items:center}
.top nav a{text-decoration:none;position:relative;color:var(--fg2);padding:6px 0}
.top nav a.m{color:var(--fg)}
.top nav a[aria-current]{color:var(--fg)}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.top nav a:hover::after,.top nav a:focus-visible::after,.top nav a[aria-current]::after{transform:scaleX(1)}
.tools{display:flex;align-items:center;gap:8px;order:2;margin-left:clamp(14px,2vw,26px)}
.top nav{margin-left:auto}
.theme{position:relative;width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--fg);cursor:pointer;display:grid;place-items:center;transition:border-color .3s,background .3s}
.theme:hover{border-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.theme svg{grid-area:1/1;width:16px;height:16px;transition:transform .5s var(--ease),opacity .3s}
.theme .moon{opacity:0;transform:rotate(-70deg) scale(.6)}
:root[data-theme=dark] .theme .sun{opacity:0;transform:rotate(70deg) scale(.6)}
:root[data-theme=dark] .theme .moon{opacity:1;transform:none}
.menu{display:none;background:none;border:1px solid var(--line);border-radius:99px;padding:8px 14px;color:var(--fg);cursor:pointer}
@media (max-width:860px){
 .menu{display:block}
 .top nav{position:fixed;inset:64px 12px auto 12px;flex-direction:column;align-items:stretch;gap:0;padding:8px 18px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 24px 60px -24px rgba(var(--shade),.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
 .top nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:12px}
 .top nav a:last-child{border:0}
 .top nav a::after{display:none}
 .top.open nav{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--ease)}
}

/* ---------- swarm canvases ---------- */
canvas.swarm{display:block;opacity:0;transition:opacity .9s}
canvas.swarm.on{opacity:1}
#field{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
#field.off{opacity:0!important;transition:opacity .5s}
#cur{position:fixed;left:0;top:0;opacity:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--fg);border-radius:50%;z-index:25;pointer-events:none;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s;display:none}
#cur::before{content:"";position:absolute;left:50%;top:-7px;bottom:-7px;width:1px;background:var(--accent2)}
#cur.down{width:60px;height:60px;margin:-30px 0 0 -30px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
#cur.link{width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--fg)}
#cur.link::before{display:none}
@media (pointer:fine){.home #cur{display:block}.home,.home a,.home button{cursor:none}}
.rule{position:relative;height:36px;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.rule canvas{position:absolute;inset:0 var(--pad);width:calc(100% - 2 * var(--pad));height:100%}

/* ---------- home ---------- */
.home main{position:relative;z-index:2}
.hero{height:100vh;height:100svh;min-height:560px;position:relative;pointer-events:none}
.hero h1{position:absolute;left:var(--pad);top:15vh;font-size:calc(clamp(26px,2.9vw,46px) * .94);line-height:1.04;max-width:14em}
.band{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:14px;pointer-events:auto}
.band a,.band div{text-decoration:none;color:var(--fg)}
.band span{display:block;color:var(--mute)}
.band a:hover span{color:var(--fg2)}
.band i,.meta i{font-style:normal}
.meta i::after{content:":"}
.hero .slot{display:contents}
.fallback{display:none}
.no-gl .fallback{display:block;position:absolute;left:5vw;right:5vw;top:42vh;transform:translateY(-50%)}
.no-gl .fallback svg{width:100%;height:auto}

.products{height:420vh;position:relative}
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.step{position:absolute;left:var(--pad);top:20vh;width:min(36vw,460px);opacity:0;transform:translateY(18px);transition:opacity .6s,transform .8s var(--ease);pointer-events:none}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step .k{color:var(--mute);margin-bottom:18px;display:flex;gap:14px}
.step .k span:last-child{color:var(--accent2)}
.step h3{font-size:calc(clamp(48px,6.2vw,96px) * .94);margin-bottom:22px;line-height:.95}
.step p{font-size:clamp(16px,1.25vw,19px);max-width:24em;color:var(--fg2)}
.plate{margin-top:28px;display:flex;gap:18px;align-items:flex-end}
.plate>img{flex:0 0 auto;width:124px}
.plate.android>img{width:121.8px}
.plate figcaption{color:var(--mute);max-width:15em}
.more{display:inline-flex;gap:10px;align-items:center;margin-top:26px;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:3px}
.more::after{content:"→";font-family:var(--body);transition:transform .3s var(--ease)}
.more:hover::after{transform:translateX(4px)}
.counter{position:absolute;right:var(--pad);bottom:var(--pad);color:var(--mute);text-align:right}
.counter b{color:var(--fg);font-weight:inherit}

.agents{height:160vh;position:relative}
.agents .stick .txt{position:absolute;left:var(--pad);top:20vh;width:min(40vw,520px)}
.kicker{color:var(--mute);margin-bottom:18px;display:flex;gap:14px}
.kicker span+span{color:var(--accent2)}
.h2{font-size:calc(clamp(40px,5vw,80px) * .94);margin-bottom:22px}
.lead{font-size:clamp(17px,1.3vw,20px);color:var(--fg2);max-width:26em}
.roles{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.roles li{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--fg2)}
.roles li b{font-family:var(--mono);font-size:var(--monoSize);text-transform:uppercase;letter-spacing:var(--monoTrack);font-weight:var(--monoW);color:var(--fg);padding-top:3px}

.solid{position:relative;z-index:3;background:var(--bg)}
.sect{padding-top:clamp(80px,12vh,140px);padding-bottom:clamp(80px,12vh,140px)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin-top:48px}
.card{background:var(--card);border-radius:20px;padding:28px 26px 30px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:12px;transition:box-shadow .3s,transform .4s var(--ease)}
.card .n{color:var(--mute)}
.card h3{font-family:var(--display);font-stretch:var(--dispStretch);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.card p{color:var(--fg2);font-size:15.5px}
.card ul{list-style:none;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--fg2);font-size:14.5px}
.card ul li{padding:4px 0}
a.card{text-decoration:none}
a.card:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 22%,transparent),0 24px 50px -30px rgba(var(--shade),.5);transform:translateY(-2px)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:99px;text-decoration:none;font-weight:500;font-size:15px;background:var(--fg);color:var(--bg);transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(var(--shade),.6)}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 35%,transparent)}
.btn svg{width:16px;height:16px;flex:none}

.close{height:120vh;position:relative}
.close .txt{position:absolute;left:var(--pad);bottom:max(7vh,44px);max-width:46em}
.close p{font-size:18px;max-width:28em;margin-bottom:24px;color:var(--fg2)}
.mail{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.01em;border-bottom:1px solid var(--accent);text-decoration:none;padding-bottom:2px}

/* ---------- footer ---------- */
.foot{position:relative;z-index:3;padding:8px 0 calc(28px + env(safe-area-inset-bottom));color:var(--fg2)}
.foot .rule{width:100%;margin-bottom:34px}
.fwrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,3fr);gap:40px var(--pad)}
.fbrand .brand{display:inline-flex}
.fbrand .mk{width:26px;height:26px}
.fbrand .wm{height:16px;width:auto}
.ftag{margin-top:18px;font:600 17px/1.4 var(--body);letter-spacing:-.005em;color:var(--fg)}
.ftag .em{display:inline-block}
.fcols{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:28px var(--pad)}
.fcols h2{color:var(--mute);margin-bottom:12px}
.fcols ul{list-style:none}
.fcols a{display:inline-flex;align-items:center;min-height:32px;font-size:15px;color:var(--fg2);text-decoration:none;transition:color .2s}
.fcols a:hover{color:var(--fg)}
.fcols a[href^=mailto]{color:var(--fg);border-bottom:1px solid var(--accent);min-height:0;padding:6px 0 2px;margin-bottom:6px}
.fbase{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;padding-top:14px;border-top:1px solid var(--line);color:var(--mute)}
.fbase span:nth-child(2){flex:1}
.fbase a{display:inline-flex;align-items:center;min-height:44px;color:var(--fg2);text-decoration:none}
.fbase a:hover{color:var(--fg)}

/* ---------- inner pages ---------- */
.ph{position:relative;min-height:min(92vh,860px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:var(--pad);padding:110px var(--pad) 40px;max-width:var(--maxw);margin:0 auto}
.ph .txt{position:relative;z-index:2}
.ph h1{font-size:calc(clamp(52px,7.4vw,118px) * .94);margin-bottom:22px}
.ph h1.long{font-size:calc(clamp(40px,5.6vw,90px) * .94)}
.ph .lead{margin-bottom:6px}
.ph .art{position:relative;height:min(74vh,700px);min-height:340px}
.ph .art canvas{position:absolute;inset:0;width:100%;height:100%}
.ph .art .still{position:absolute;inset:12%;object-fit:contain;opacity:0;transition:opacity .6s}
.no-gl .ph .art .still{opacity:1}
.store{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;color:var(--mute)}
.meta b{color:var(--fg);font-weight:inherit}
.icon{width:64px;height:64px;border-radius:15px;box-shadow:0 0 0 1px var(--line);margin-bottom:24px}

/* app screens: every screen sits in a phone frame (assets/img/f, tools/frames.mjs); store-style row, staggered on desktop */
.shots{display:flex;gap:clamp(16px,1.8vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:26px var(--pad) 30px;margin:14px calc(var(--pad) * -1) 0;scrollbar-width:thin;overscroll-behavior-x:contain}
.phone{flex:0 0 auto;width:196px;scroll-snap-align:start}
.phone img{width:100%;height:auto}
.phone img,.plate>img{filter:var(--phone)}
.phone.android img{width:98.2%;margin-inline:auto} /* the Pixel frame is a touch taller: same height as the iPhones */
.phone figcaption{margin-top:18px;color:var(--fg2);font-size:14px;line-height:1.45;text-align:center;padding:0 4px}
.phone figcaption b{display:block;font-family:var(--mono);font-size:var(--monoSize);letter-spacing:var(--monoTrack);text-transform:uppercase;font-weight:var(--monoW);color:var(--mute);margin-bottom:5px}
@media (min-width:1100px){
 .shots{overflow:visible;justify-content:center;padding-bottom:64px}
 .phone{flex:1 1 0;min-width:0;max-width:212px}
 .phone:nth-child(even){transform:translateY(40px)}
}
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);align-items:start}
.feat{list-style:none;border-top:1px solid var(--line)}
.feat li{padding:16px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(9em,.6fr) 1fr;gap:20px}
.feat li b{font-weight:600}
.feat li span{color:var(--fg2)}
.note{margin-top:24px;color:var(--mute);font-size:14.5px;max-width:38em}
.next{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:40px 0;border-top:1px solid var(--line);text-decoration:none}
.next .display{font-size:clamp(36px,5vw,72px)}
.next:hover .display{background:var(--em);-webkit-background-clip:text;background-clip:text;color:transparent}

.prose{max-width:760px}
.prose h1{font-size:calc(clamp(40px,5vw,72px) * .94);margin-bottom:18px}
.prose h2{font-family:var(--display);font-stretch:var(--dispStretch);font-weight:700;font-size:21px;letter-spacing:-.015em;margin:44px 0 12px}
.prose p,.prose li{color:var(--fg2);font-size:16px;line-height:1.65}
.prose ul{padding-left:20px;margin-top:10px}
.prose a{text-decoration-color:var(--accent);text-underline-offset:3px}
.page-top{padding-top:140px}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);margin-top:44px}
.steps li{counter-increment:s;border-top:1px solid var(--fg);padding-top:16px;color:var(--fg2);font-size:15.5px}
.steps li::before{content:"0" counter(s);display:block;font-family:var(--mono);font-size:var(--monoSize);font-weight:var(--monoW);letter-spacing:var(--monoTrack);font-variant-numeric:tabular-nums;color:var(--accent2);margin-bottom:10px}
.steps li b{display:block;color:var(--fg);font-weight:600;font-size:17px;margin-bottom:6px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;border-top:1px solid var(--line);padding-top:18px}
.facts div span{display:block;color:var(--mute)}
.facts div{font-size:18px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
 .grid3{grid-template-columns:1fr 1fr}
 .steps{grid-template-columns:1fr 1fr;row-gap:30px}
}
@media (max-width:760px){
 :root{--monoSize:11px}
 .top{padding:14px var(--pad)}
 .hero h1{top:13vh;font-size:calc(27px * .94)}
 .band{grid-template-columns:1fr 1fr;gap:12px 16px}
 .step{top:11vh;width:auto;right:var(--pad)}
 .step h3{font-size:calc(50px * .94);margin-bottom:12px}
 .step p{font-size:15px}
 .plate{display:none}
 .phone{width:168px}
 .more{margin-top:16px}
 .counter{display:none}
 .agents{height:150vh}
 .agents .stick .txt{top:11vh;width:auto;right:var(--pad)}
 .roles{display:flex;flex-wrap:wrap;gap:8px;border:0;margin-top:22px}
 .roles li{display:block;padding:7px 12px;border:1px solid var(--line);border-radius:99px}
 .roles li span{display:none}
 .grid3{grid-template-columns:1fr}
 .close .txt{right:var(--pad)}
 .ph{grid-template-columns:1fr;min-height:0;padding-top:96px;gap:0}
 .ph .art{height:56vw;min-height:250px;order:-1;margin:0 calc(var(--pad) * -1)}
 .ph h1{font-size:calc(54px * .94)}
 .ph h1.long{font-size:calc(40px * .94)}
 .icon{width:52px;height:52px;margin-bottom:16px}
 .two{grid-template-columns:1fr}
 .feat li{grid-template-columns:1fr;gap:4px}
 .steps{grid-template-columns:1fr}
 .facts{grid-template-columns:1fr;gap:14px}
 .facts div{font-size:16px}
 .facts div span{font-size:var(--monoSize);margin-bottom:2px}
}
@media (max-width:900px){.fwrap{grid-template-columns:1fr}}
/* ---------- phones: designed for the small screen, not the desktop page shrunk ---------- */
@media (max-width:760px){
 :root{--monoSize:12px;--monoTrack:.05em;--pad:20px}
 /* iOS ignores a fixed background: the dark glow goes on a fixed layer instead, so it stays the size of the screen */
 :root[data-theme=dark]{background-image:none}
 :root[data-theme=dark]::before{content:"";position:fixed;inset:0;height:100lvh;background:var(--glow);pointer-events:none;z-index:-1}
 /* header: every control a 44px target */
 .top{padding:calc(12px + env(safe-area-inset-top)) var(--pad) 12px}
 .brand{min-height:44px}
 .brand .mk{width:22px;height:22px}
 .brand .wm{height:14px}
 .theme{width:44px;height:44px}
 .menu{min-height:44px;padding:0 18px}
 .tools{gap:8px}
 .top nav{inset:calc(70px + env(safe-area-inset-top)) 10px auto 10px;padding:6px 20px 10px;border-radius:20px;text-transform:none;letter-spacing:0}
 .top nav a{display:flex;align-items:center;min-height:58px;padding:0;font-family:var(--display);font-stretch:var(--dispStretch);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--fg)}
 .top nav a[aria-current]{color:var(--accent2)}
 .top nav a.m{font-family:var(--body);font-stretch:100%;font-weight:500;font-size:16px;letter-spacing:0;color:var(--accent2)}

 /* home hero: headline, then the wordmark filling the width, then the index; one column, no dead space */
 /* the hero hugs its content: HIOLO on one line, edge to edge (94vw, past the page padding), close under the headline */
 .hero{height:auto;min-height:0;display:flex;flex-direction:column;padding:calc(96px + env(safe-area-inset-top)) var(--pad) 8px}
 .hero h1{position:static;font-size:min(9.2vw,40px);line-height:1.02;max-width:none}
 .hero .slot{display:block;position:relative;width:94vw;align-self:center;aspect-ratio:423/104;margin-top:clamp(24px,7vw,36px)}
 .no-gl .hero .fallback{position:static;transform:none}
 .band{position:static;padding-top:clamp(20px,6vw,30px);display:block;border:0;text-transform:none;letter-spacing:0;font-size:16px}
 .band .org{display:flex;flex-wrap:wrap;gap:4px 10px;padding-bottom:10px;font-size:var(--monoSize);letter-spacing:var(--monoTrack);text-transform:uppercase}
 .band .org span{display:inline}
 .band a{display:grid;grid-template-columns:2.6em 1fr auto;align-items:center;column-gap:4px;min-height:56px;padding:8px 0;border-top:1px solid var(--line);font-family:var(--body);font-weight:600;line-height:1.25}
 .band a:last-child{border-bottom:1px solid var(--line)}
 .band a i{grid-row:1/3;align-self:start;padding-top:3px;font-family:var(--mono);font-size:var(--monoSize);letter-spacing:var(--monoTrack);font-weight:var(--monoW);font-variant-numeric:tabular-nums;color:var(--accent2)}
 .band a span{grid-column:2;font-weight:400;font-size:14px;margin-top:2px;color:var(--mute)}
 .band a::after{content:"→";grid-column:3;grid-row:1/3;padding-left:12px;color:var(--fg2);transition:transform .3s var(--ease)}
 .band a:active::after{transform:translateX(4px)}

 .step{top:calc(84px + 2svh)}
 .more{min-height:44px;align-items:flex-end;padding-bottom:6px;margin-top:10px}
 .agents .stick .txt{top:calc(84px + 2svh)}
 .close{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:44svh var(--pad) 72px}
 .close .txt{position:static}
 .sect{padding-top:72px;padding-bottom:72px}
 .grid3{margin-top:32px}
 .btns .btn{min-height:48px}

 /* product and page headers: the shape first, big and dense, then one tidy column */
 .ph{padding:calc(76px + env(safe-area-inset-top)) var(--pad) 28px}
 .ph .art{order:-1;height:min(94vw,50svh);min-height:260px;margin:0 calc(var(--pad) * -1) 10px}
 .ph .txt{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
 .ph .txt>*{grid-column:1/-1}
 .ph .txt>.icon{grid-column:1;width:44px;height:44px;border-radius:11px;margin:0}
 .ph .txt>.icon+.kicker{grid-column:2;margin:0}
 .ph .txt>.kicker{margin-bottom:0}
 .ph h1{font-size:min(14vw,60px);margin:18px 0 16px}
 .ph h1.long{font-size:min(10.6vw,46px)}
 .store{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
 .store .btn{justify-content:center;min-height:52px;padding:0 14px}
 .store .btn:only-child,.store .btn:nth-child(3){grid-column:1/-1}
 .meta{display:block;margin-top:26px;border-top:1px solid var(--line)}
 .meta>span{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
 .meta i::after{content:none}
 .meta b{font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;text-align:right}
 .shots{scrollbar-width:none;gap:18px;padding-top:22px}
 .shots::-webkit-scrollbar{display:none}
 .phone{width:min(58vw,232px)}
 .feat li{padding:14px 0}
 .page-top{padding-top:112px}
 .next{padding:32px 0;min-height:44px}

 /* footer: the last screen. Exactly a screen tall, starting under the header, its last line clear of Safari's
    floating toolbar, so at the bottom of the page nothing sits under the header or the toolbar.
    Groups in two columns of 44px targets. */
 :root{scroll-padding-top:calc(96px + env(safe-area-inset-top))}
 .foot{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(84px + env(safe-area-inset-top)) 0 calc(env(safe-area-inset-bottom) + 40px)}
 .foot .rule{margin-bottom:20px}
 .fwrap{width:100%;gap:26px}
 .fbrand .mk{width:24px;height:24px}
 .fbrand .wm{height:15px}
 .ftag{margin-top:14px;font-size:16px}
 .fcols{grid-template-columns:1fr 1fr;justify-content:stretch;gap:18px 20px}
 .fcols h2{margin-bottom:2px}
 .fcols a{min-height:44px;font-size:15px}
 .fcols a[href^=mailto]{min-height:0;padding:11px 0 2px;margin-bottom:11px}
 .fbase{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 16px;padding-top:4px}
 .fbase span:nth-child(2){grid-column:1/-1;grid-row:2;padding-bottom:4px}
 .fbase a{grid-column:2;grid-row:1}
}
/* short phones (iPhone SE): the same end screen, tighter, so it still fits between header and toolbar */
@media (max-width:760px) and (max-height:640px){
 .foot{padding-top:calc(80px + env(safe-area-inset-top));padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
 .foot .rule,.fbrand .brand{display:none}
 .fwrap{gap:16px}
 .ftag{margin-top:0}
 .fcols{gap:8px 20px}
 .fcols a{min-height:40px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
}