html{background:#0C0A09}
body{margin:0;min-height:100vh;background:#FFFFFF}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:12px}
h1,h2,h3{text-wrap:balance}
a{color:#C2410C}a:hover{color:#9A3412}
/* wordmark: hand-drawn letters from partials/wordmark.svg (orange ball for the o, pink-orange S, floating parts) */
.wordmark{display:block;height:32px;width:auto;overflow:visible}
.brand-foot .wordmark{height:28px}
@media (max-width:420px){.site-header .wordmark{height:28px}}
a:focus-visible,summary:focus-visible{outline:2px solid #E8590C;outline-offset:3px;border-radius:6px}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] .faq-plus{transform:rotate(45deg)}
.faq-plus{transition:transform .2s ease}

/* narrower windows: the section links become one scrollable row under the logo */
@media (max-width:1179px){
  .topnav{order:3;width:100%;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin:-6px 0 2px}
  .topnav::-webkit-scrollbar{display:none}
}
@media (max-width:600px){header>div{column-gap:12px!important}}

/* the frosted header shows what is behind it; at the top of the page that is the white page wrapper,
   which turned the header grey. Every page opens on a dark section, so make the wrapper dark up there too. */
div:has(>.site-header){background:#FFFFFF linear-gradient(#12100F,#12100F) no-repeat 0 0/100% 200px!important}

/* card rows: every card's parts share the row's tracks, so the 适合 lines and 了解更多 links line up
   even when one card's text wraps to an extra line (phones swipe these cards one at a time) */
#features .hs>div>p,#scenarios .hs>div>p{text-wrap:pretty}
@media (min-width:761px){@supports (grid-template-rows:subgrid){
  #features .hs>div{display:grid!important;grid-template-rows:subgrid;grid-row:span 4}
  #features .hs>div>p:last-child{margin-top:0!important}
  #scenarios .hs>div{display:grid!important;grid-template-rows:subgrid;grid-row:span 5;align-content:start}
  #scenarios .hs>div>a{align-self:start!important;justify-self:start}
}}

/* language picker */
.lang{position:relative}
.lang>summary{position:relative;display:flex;align-items:center;gap:7px;min-height:40px;padding:0 15px 0 12px;border:1px solid #3A3330;border-radius:999px;color:#E7E1DC;font-size:14px;-webkit-tap-highlight-color:transparent;transition:background-color .2s,border-color .2s,color .2s}
.lang>summary svg{width:20px;height:20px;flex:none}
.lang>summary:hover,.lang[open]>summary{color:#FFFFFF;border-color:#5A514C;background:#1D1A18}
.lang-menu{position:absolute;right:0;top:calc(100% + 2px);z-index:30;min-width:180px;padding:6px;display:grid;background:#1D1A18;border:1px solid #2E2A27;border-radius:14px;box-shadow:0 24px 48px -12px rgba(0,0,0,.6)}
.lang-menu a{display:block;padding:9px 12px;border-radius:9px;color:#D6CFC9;text-decoration:none;font-size:14px;line-height:1.3}
.lang-menu a:hover{background:#2A2522;color:#FFFFFF}
.lang-menu a[aria-current]{color:#FF8F5E;font-weight:600}
.lang-veil,.hd-dl-i{display:none}
/* phones: a 40 px round button (48 px to tap) and a sheet from the bottom */
@media (max-width:760px){
  .lang>summary{width:40px;padding:0;justify-content:center}
  .lang>summary::after{content:'';position:absolute;inset:-4px}
  .lang>summary>span{display:none}
  .lang>summary svg{width:22px;height:22px}
  .site-header.lang-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:#12100F!important}
  .lang[open] .lang-veil{display:block;position:fixed;inset:0;z-index:46;background:rgba(0,0,0,.55);animation:rs-fade .25s ease-out}
  .lang-menu{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:47;min-width:0;max-height:85dvh;overflow-y:auto;grid-template-columns:1fr 1fr;gap:8px;padding:6px 16px calc(20px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:22px 22px 0 0;box-shadow:none;animation:rs-sheet .32s cubic-bezier(.2,.65,.25,1)}
  .lang-menu::before{content:attr(data-title);grid-column:1/-1;padding:16px 4px 6px;color:#A8A29E;font-size:13px;font-weight:600}
  .lang-menu a{display:flex;align-items:center;min-height:50px;padding:0 16px;border-radius:12px;background:#272320;font-size:16px}
  .lang-menu a[aria-current]{background:#3B2216}
  .site-header.tight .hd-dl{width:40px;padding:0!important;justify-content:center}
  .site-header.tight .hd-dl span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .site-header.tight .hd-dl-i{display:block}
}
@keyframes rs-fade{from{opacity:0}}
@keyframes rs-sheet{from{translate:0 100%}}

/* overview diagram: drawn at 1120 px; site.js zooms it to narrower columns, phones get a stacked list.
   Without the script it scrolls sideways; with it the box never scrolls, so the cards' entrance motion
   can't raise a scrollbar (Safari counts translated children as overflow). */
.ov-wrap{overflow-x:auto}
.ov-wrap.fit{overflow:visible}
.ov-wrap.fit-t{overflow:hidden}
.ov-wrap.fit-t>.ov{transform-origin:0 0;margin:0!important}
#overview{overflow-x:hidden;overflow-x:clip}
@media (max-width:760px){
  .ov-wrap{overflow:visible;margin-top:36px!important}
  .ov{width:auto!important;height:auto!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px}
  .ov>svg,.ov>.ov-lm{display:none}
  .ov>.ov-i{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;grid-column:1/-1}
  .ov-lc{order:1;margin-bottom:10px;font-size:13px!important}
  .ov>.ov-c1,.ov>.ov-c2,.ov>.ov-c3{grid-column:auto;flex-direction:column;justify-content:flex-start!important;gap:10px!important;padding:14px 6px!important;text-align:center;border-radius:18px!important}
  .ov-c1{order:2}.ov-c2{order:3}.ov-c3{order:4}
  .ov-c1>div:first-child,.ov-c2>div:first-child,.ov-c3>div:first-child{width:auto!important;height:52px;align-items:center}
  .ov-c1 img,.ov-c2 img,.ov-c3 img{width:min(76px,100%)!important}
  .ov-c1 p:first-child,.ov-c2 p:first-child,.ov-c3 p:first-child{font-size:15px!important;line-height:1.3}
  .ov-c1 p+p,.ov-c2 p+p,.ov-c3 p+p{margin-top:4px!important;font-size:12.5px!important;line-height:17px!important}
  .ov-c1 p+p br,.ov-c2 p+p br,.ov-c3 p+p br,.ov-c1 p+p span,.ov-c2 p+p span,.ov-c3 p+p span{display:none}
  .ov>.ov-hub{order:5;margin-top:30px;padding:22px 20px!important}
  .ov>.ov-pill{order:6;justify-self:center;transform:none!important;margin:16px 0}
  .ov>.ov-mac{order:8;padding:22px 20px!important}
  .ov-mac>img{width:min(100%,300px)!important;margin:0 auto}
  .ov-mac span{font-size:12.5px!important}
  .ov-hub::before,.ov-pill::before,.ov-pill::after{content:'';position:absolute;left:50%;height:28px;border-left:2px dashed #D6CFC8}
  .ov-hub::before{top:-30px}
  .ov-pill::before{top:-17px;height:16px}.ov-pill::after{bottom:-17px;height:16px}
  .ov>.ov-lr{order:9;margin-top:24px;margin-bottom:8px;font-size:13px!important}
  .ov>.ov-reg{order:10;padding:14px 18px!important}
  #overview .ov-wrap+div{display:none!important}
}

/* home page relay: the route (devices → your relay → Mac, with the direct path arcing over) leads */
.rl-path{position:relative;display:flex;align-items:flex-start;padding-top:92px}
.rl-direct{position:absolute;left:84px;right:84px;top:0;height:118px;pointer-events:none}
.rl-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rl-note{position:absolute;left:50%;top:28px;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:5px 12px 5px 6px;border-radius:999px;background:#1C1816;border:1px solid #3A3531;font-size:13px;color:#D6CFC9}
.rl-note span,.rl-k em{font-style:normal;font-size:11.5px;line-height:1;padding:4px 8px;border-radius:999px;border:1px solid #3A3531;color:#B8B0A9}
.rl-node{flex:none;width:168px;display:flex;flex-direction:column;align-items:center;text-align:center}
.rl-hub{width:216px}
.rl-pic{height:128px;display:flex;align-items:center;justify-content:center}
.rl-pic img{display:block;height:auto}
.rl-pair{display:flex;align-items:flex-end;gap:6px}
.rl-tile{width:120px;height:120px;border-radius:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#4A2414 0%,#26150E 100%);border:1.5px solid rgba(255,143,94,.6);box-shadow:0 0 0 10px rgba(194,65,12,.08),0 0 0 22px rgba(194,65,12,.04),0 30px 60px -18px rgba(194,65,12,.65)}
.rl-name{margin:16px 0 0;font-size:16px;font-weight:600}
.rl-hub .rl-name{font-size:17px;color:#FFFFFF}
.rl-cap{margin:4px 0 0;font-size:13px;color:#9C948E}
.rl-hub .rl-cap{color:#FFB089}
.rl-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.rl-steps{grid-template-columns:minmax(0,1fr)}}
.rl-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1060px){.rl-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rl-facts{grid-template-columns:minmax(0,1fr)}}
.rl-seg{flex:1 1 0;min-width:40px;height:128px;position:relative;display:flex;align-items:center;padding:0 6px}
.rl-line{position:relative;flex:1;height:0}
.rl-line i{position:absolute;left:0;top:-5px;width:8px;height:8px;border-radius:50%;background:#FF8F5E;box-shadow:0 0 10px 2px rgba(255,143,94,.6);opacity:0}
.rl-lock{position:absolute;left:50%;bottom:calc(50% + 12px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:12.5px;font-weight:600;color:#FF8F5E;padding:4px 10px;border-radius:999px;background:#241712;border:1px solid #6B3A24}
@keyframes rl-flow{0%{left:0;opacity:0}12%,88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes rl-flow-v{0%{top:0;opacity:0}12%,88%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
@media (prefers-reduced-motion:no-preference){.rl-line i{animation:rl-flow 2.6s cubic-bezier(.45,0,.55,1) infinite}.rl-hub+.rl-seg .rl-line i{animation-delay:1.3s}}
.rl-step{border-top:2px solid #3A3531;padding-top:18px}
.rl-step.rl-on{border-top-color:#C2410C}
.rl-k{margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.rl-k span{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:#FF8F5E}
.rl-on .rl-k em{color:#FFB89A;border-color:#6B3A24}
.rl-step h3{margin:12px 0 0;font-size:18px;font-weight:700}
.rl-step>p:last-child{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:#B8B0A9}
.rl-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#24170F;border:1px solid #4A2A1A;color:#FF8F5E}
.rl-ft{margin:14px 0 0;font-size:17px;font-weight:600}
.rl-fd{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:#B8B0A9}
.rl-deploy{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)}
.rl-how{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
.rl-how li{display:flex;gap:12px;font-size:15px;line-height:1.6;color:#D6CFC9}
.rl-how li span{flex:none;width:26px;height:26px;border-radius:50%;background:#2E2A27;color:#FF8F5E;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
@media (max-width:900px){.rl-deploy{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .rl{margin-top:36px!important;gap:30px!important}
  .rl-path{flex-wrap:wrap;padding-top:0}
  .rl-direct{position:relative;left:auto;right:auto;flex:0 0 calc(100% - min(20vw,90px));min-width:0;height:auto;margin:0 calc(min(20vw,90px) / 2) 0;display:flex;justify-content:center}
  .rl-arc{top:13px;height:calc(100% + 9px)}
  .rl-note{position:relative;left:auto;top:auto;transform:none;flex:none;white-space:normal;max-width:calc(100% + min(20vw,90px));margin-bottom:22px;padding:4px 12px 4px 4px;font-size:12px;line-height:1.4}
  .rl-note span{flex:none;white-space:nowrap}
  .rl-sl{display:block;height:0;overflow:hidden}
  .rl-node{width:min(20vw,90px)}
  .rl-hub{width:min(27vw,116px)}
  .rl-pic{height:64px}
  .rl-pair{gap:3px}
  .rl-pair img:first-child{width:clamp(34px,11vw,46px)!important}
  .rl-pair img:last-child{width:clamp(22px,7vw,30px)!important}
  .rl-node:last-child img{width:clamp(52px,17vw,70px)!important}
  .rl-tile{width:60px;height:60px;border-radius:18px;box-shadow:0 0 0 6px rgba(194,65,12,.08),0 0 0 13px rgba(194,65,12,.04),0 18px 36px -12px rgba(194,65,12,.65)}
  .rl-tile svg{width:30px;height:30px}
  .rl-name{margin-top:10px;font-size:13px;line-height:1.35}
  .rl-hub .rl-name{font-size:13px}
  .rl-cap{font-size:12px;line-height:1.35}
  .rl-note span,.rl-k em{font-size:12px}
  .rl-seg{min-width:14px;height:64px;padding:0 2px}
  .rl-lock{gap:0;padding:4px;font-size:0;bottom:calc(50% + 7px)}
  .rl-steps{gap:0!important}
  .rl-step{padding:14px 0 16px}
  .rl-step h3{margin-top:8px;font-size:16.5px}
  .rl-step>p:last-child{font-size:14px}
  .rl+div{margin-top:48px!important;gap:20px!important}
  .rl-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 12px!important}
  .rl-facts>div{display:flex;align-items:center;gap:10px}
  .rl-ic{flex:none;width:36px;height:36px}
  .rl-ft{margin:0;font-size:14.5px;line-height:1.35}
  .rl-fd,.rl-how{display:none!important}
  .rl-deploy{margin-top:40px!important;padding:22px!important}
}
/* relay deploy guide */
.guide h2{margin:48px 0 0;font-size:24px;line-height:1.3;font-weight:700;scroll-margin-top:12px}
.guide p{margin:14px 0 0;font-size:16.5px;line-height:1.75;color:#44403C}
.guide pre{margin:18px 0 0;padding:16px 18px;overflow-x:auto;background:#12100F;border-radius:14px;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.7;color:#E7E1DB}
.guide code{font-family:inherit}

/* wide windows (one-row header): the header stays at the top as a frosted bar */
@media (min-width:1180px){
  .site-header{position:sticky;top:0;z-index:40;background:rgba(18,16,15,.82)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  section[id]{scroll-margin-top:64px}
}

/* scene pages and the help center */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;line-height:1.5;color:#8F8781;text-align:left}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:'›';color:#5C5550}
.crumbs a{color:#B8B0A9;text-decoration:none}.crumbs a:hover{color:#FFFFFF}
.crumbs [aria-current]{color:#E7E1DB}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Japanese headings: lines break only at the <wbr> between phrases (site.js), long words still fit */
.jp-ph{word-break:keep-all;overflow-wrap:anywhere}
.card-link{transition:transform .45s cubic-bezier(.2,.65,.25,1),box-shadow .45s cubic-bezier(.2,.65,.25,1)}
.card-link:hover{color:inherit;transform:translateY(-6px);box-shadow:0 28px 48px -26px rgba(40,20,10,.4)}
.doc{font-size:16.5px;line-height:1.75;color:#44403C}
.doc h2{margin:56px 0 0;font-size:26px;line-height:1.3;font-weight:700;color:#1C1917;scroll-margin-top:12px}
.doc h3{margin:28px 0 0;font-size:19px;line-height:1.4;font-weight:700;color:#1C1917}
.doc p{margin:14px 0 0}
.doc ul{margin:14px 0 0;padding-left:1.3em}
.doc li{margin-top:6px}
.doc b{color:#1C1917}
.doc figure{margin:28px 0 0}
.doc ol.steps{list-style:none;margin:22px 0 0;padding:0;counter-reset:st}
.doc ol.steps>li{counter-increment:st;position:relative;margin:0;padding:4px 0 26px 52px}
.doc ol.steps>li::before{content:counter(st);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:#FDEEE6;color:#C2410C;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.doc ol.steps>li::after{content:'';position:absolute;left:17px;top:42px;bottom:8px;width:1px;background:#E7E2DE}
.doc ol.steps>li:last-child::after{display:none}
.doc ol.steps figure{margin:16px 0 0}
.doc ol.steps figure img{max-width:min(100%,520px)!important;margin:0!important}

/* under the frosted header of wide windows */
@media (min-width:1180px){.doc h2{scroll-margin-top:72px}}

/* phones: laid out for a phone, not the desktop page stacked. A menu button opens the section links,
   the card groups (.hs) scroll sideways with dots under them (site.js), steps become a timeline,
   and pictures and buttons take the full width */
.menu-btn,.hs-dots{display:none}
@keyframes rs-menu{from{opacity:0;translate:0 -10px}}
@media (max-width:760px){
  section[id]{scroll-margin-top:60px}
  section:not(.hero)>div:first-child{padding-top:52px!important;padding-bottom:52px!important}
  .site-header{position:sticky;top:0;z-index:40;background:rgba(18,16,15,.86)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  .site-header>div{flex-wrap:nowrap!important;column-gap:10px!important}
  .site-header>div>div{gap:10px!important}
  .topnav{display:none!important}
  .menu-btn{display:block;position:relative;flex:none;width:40px;height:40px;margin-right:-8px;padding:0;border:0;background:none;color:#F5F3F1;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .menu-btn i{position:absolute;left:11px;right:11px;height:1.6px;border-radius:2px;background:currentColor;transition:translate .3s cubic-bezier(.2,.65,.25,1),rotate .3s cubic-bezier(.2,.65,.25,1)}
  .menu-btn i:first-child{top:16px}.menu-btn i:last-child{top:23px}
  .site-header.open{-webkit-backdrop-filter:none;backdrop-filter:none;background:#12100F!important}
  .site-header.open .menu-btn i:first-child{translate:0 3.5px;rotate:45deg}
  .site-header.open .menu-btn i:last-child{translate:0 -3.5px;rotate:-45deg}
  .site-header.open .topnav{display:flex!important;position:fixed;left:0;right:0;top:var(--hh,57px);bottom:0;z-index:45;flex-direction:column;flex-wrap:nowrap!important;width:auto;margin:0!important;padding:8px 24px 48px;overflow-y:auto;background:#12100F;white-space:normal;font-size:22px!important;animation:rs-menu .35s cubic-bezier(.2,.65,.25,1)}
  .site-header.open .topnav a{color:#F5F3F1!important;font-weight:600;padding:15px 0!important;border-bottom:1px solid #2A2522}

  .btns{flex-direction:column;align-items:stretch!important;width:100%;max-width:400px;margin-left:auto;margin-right:auto}
  .btns>a{justify-content:center;min-height:54px!important;text-align:center;line-height:1.3;text-wrap:balance;padding:10px 22px!important;font-size:15.5px!important}
  .hero-devices{position:relative;display:block!important;width:auto!important;aspect-ratio:1.4;margin:44px -8px 0!important}
  .hero-dev{position:absolute}
  .hero-dev>span{display:none}
  .hero-dev:nth-child(1){left:0;top:0;width:84%}
  .hero-dev:nth-child(2){right:0;bottom:7%;width:52%}
  .hero-dev:nth-child(3){left:3%;bottom:0;width:33%}

  .hs{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-top:32px!important;margin-left:calc(-1 * clamp(16px, 4vw, 40px));margin-right:calc(-1 * clamp(16px, 4vw, 40px));padding:4px clamp(16px, 4vw, 40px) 8px;scroll-padding:0 clamp(16px, 4vw, 40px)}
  .hs::-webkit-scrollbar{display:none}
  .hs>*{flex:0 0 84%;min-width:0;scroll-snap-align:start}
  .hs-dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
  .hs-dots i{width:7px;height:7px;border-radius:4px;background:#D6D1CC;transition:width .3s cubic-bezier(.2,.65,.25,1),background .3s}
  .hs-dots i.on{width:20px;background:#C2410C}
  #features .hs>div{padding:22px!important}
  #features .hs>div>div:first-child{height:118px!important}

  .spec{gap:0!important;margin-top:20px!important}
  .spec>div{background:none!important;border-radius:0!important;padding:14px 2px!important;border-top:1px solid #E7E2DE}

  .steps3{display:flex!important;flex-direction:column;gap:0!important;margin-top:36px!important}
  .steps3>*{position:relative;border:none!important;border-radius:0!important;background:none!important;padding:0 0 28px 54px!important}
  .steps3>*>p:first-child{position:absolute;left:0;top:-4px;width:38px;height:38px;border-radius:50%;background:#FDEEE6;display:flex;align-items:center;justify-content:center;font-size:14px!important;font-weight:700}
  .steps3>*::after{content:'';position:absolute;left:19px;top:42px;bottom:6px;width:1px;background:#E7E2DE}
  .steps3>:last-child{padding-bottom:4px!important}
  .steps3>:last-child::after{display:none}
  .steps3 h3{margin-top:0!important;font-size:18px!important}

  .price{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-top:36px!important}
  .price>:nth-child(2){grid-column:1/-1;order:-1;padding:26px 24px!important;container-type:inline-size}
  .price>:nth-child(2)>p:nth-child(2){font-size:min(44px,13cqi)!important}
  .price>:nth-child(odd){padding:20px 16px!important;gap:6px!important;container-type:inline-size}
  .price>:nth-child(odd)>p:first-child{font-size:14px!important}
  .price>:nth-child(odd)>p:nth-child(2){font-size:30px!important;font-size:min(30px,18cqi)!important}
  .price>:nth-child(odd)>p:nth-child(3){margin-top:2px!important;font-size:13.5px!important;line-height:1.55}

  #faq summary{min-height:56px!important;font-size:16.5px!important}
  .cards-list{gap:10px!important;margin-top:28px!important}
  .cards-list>a{position:relative;padding:16px 44px 16px 18px!important;gap:4px!important;border-radius:16px!important}
  .cards-list>a>span:first-child{display:none}
  .cards-list>a>span:nth-child(2){font-size:17px!important}
  .cards-list .clamp3{-webkit-line-clamp:2;font-size:14px!important}
  .cards-list>a>span:last-child{position:absolute;right:18px;top:50%;translate:0 -50%;margin:0!important;padding:0!important}
  #contact [style*="border-radius: 22px"]{padding:22px!important;gap:10px!important}
  #contact [style*="border-radius: 22px"]>span[aria-hidden]{display:none!important}
  #contact h3{margin-top:0!important}
  footer>div{padding-top:44px!important;padding-bottom:32px!important}
  footer>div>div:first-child{gap:28px!important}
  footer nav{gap:22px 16px!important}
  footer nav p{margin-bottom:4px!important}
  footer>div>div:last-child{margin-top:32px!important}
  /* text links get a finger-sized target */
  section a[style*="font-weight: 600; text-decoration: none"]:not([style*="border-radius"]){display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:400px){.site-header .wordmark{height:26px}.hd-dl{padding:0 14px!important;font-size:13px!important}}

/* motion: the hero plays once on load; site.js reveals the rest as it scrolls in and links the big
   pictures to the scroll position. Everything uses translate/scale/rotate/opacity, so inline
   transforms stay as they are. */
@keyframes rs-rise{from{opacity:0;translate:0 48px}}
@keyframes rs-rise-dev{from{opacity:0;translate:0 200px;scale:.84;rotate:x 28deg}}
@media (prefers-reduced-motion:no-preference){
  .hero-txt{animation:rs-rise 1.2s cubic-bezier(.16,1,.3,1) backwards}
  .hero-txt:nth-child(2){animation-delay:.08s}
  .hero-txt:nth-child(3){animation-delay:.16s}
  .hero-txt:nth-child(4){animation-delay:.3s}
  .hero-txt:nth-child(5){animation-delay:.42s}
  .hero-devices{perspective:1800px;transform-origin:50% 0}
  .hero-dev{animation:rs-rise-dev 1.8s cubic-bezier(.16,1,.3,1) backwards;transform-origin:50% 100%}
  .hero-dev:nth-child(1){animation-delay:.4s}
  .hero-dev:nth-child(2){animation-delay:.56s}
  .hero-dev:nth-child(3){animation-delay:.72s}

  /* headings: words (CJK characters) rise out of a blur one after another */
  .split .sw{display:inline-block;opacity:0;translate:0 .6em;filter:blur(10px);transition:opacity .8s cubic-bezier(.2,.65,.25,1),translate 1.1s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.2,.65,.25,1)}
  .split.in .sw{opacity:1;translate:none;filter:none}

  .rv{opacity:0;translate:0 90px;transition:opacity 1.1s cubic-bezier(.2,.65,.25,1),translate 1.4s cubic-bezier(.16,1,.3,1),scale 1.4s cubic-bezier(.16,1,.3,1),rotate 1.4s cubic-bezier(.16,1,.3,1);transition-delay:var(--rv-d,0s)}
  .rv-card{translate:0 110px;scale:.9}
  .rv-zoom{translate:0 130px;scale:.82}
  .rv-left{translate:-120px 0}
  .rv-right{translate:120px 0}
  .rv-pop{translate:0 24px;scale:.6;transition-timing-function:cubic-bezier(.2,.65,.25,1),cubic-bezier(.34,1.5,.64,1),cubic-bezier(.34,1.5,.64,1)}
  .rv-spin{translate:0 40px;scale:.4;rotate:-25deg;transition-timing-function:cubic-bezier(.2,.65,.25,1),cubic-bezier(.34,1.4,.64,1),cubic-bezier(.34,1.4,.64,1),cubic-bezier(.34,1.4,.64,1)}
  .rv-line{opacity:1;translate:none;scale:0 1;transform-origin:0 50%;transition-duration:.9s}
  .rv .rv-inner{scale:.8;translate:0 30px;transition:scale 1.6s cubic-bezier(.16,1,.3,1),translate 1.6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--rv-d,0s) + .15s)}
  .rv.in .rv-inner{scale:none;translate:none}
  .doc .rv:not(.rv-card){translate:0 40px}
  .rv.in{opacity:1;translate:none;scale:none;rotate:none}
  .ov-draw{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.45,.05,.25,1) var(--rv-d,0s)}
  .ov-draw.in{clip-path:inset(0 0 0 0)}

  /* scroll-linked: --p goes 0 → 1 while the picture rises into view (site.js): it starts lying
     back, small and low, and stands up into place */
  .sc-zoom{transform-origin:50% 60%;scale:calc(.82 + .18 * var(--p, 1));translate:0 calc((1 - var(--p, 1)) * 70px);rotate:x calc((1 - var(--p, 1)) * 24deg);opacity:calc(.2 + .8 * var(--p, 1))}
  .sc-zoom.sc-done{scale:none;translate:none;rotate:none;opacity:1}
  .hero-txt-x{translate:0 calc(var(--hp, 0) * 160px);opacity:calc(1 - var(--hp, 0) * 1.7)}
}
@media print{.rv,.sc-zoom,.split .sw{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;filter:none!important}.ov-draw{clip-path:none!important}}