:root {
  --ink: #0b0c0e;
  --muted: #74777d;
  --line: #dedfe2;
  --paper: #f7f7f5;
  --acid: #dfff36;
  --cyan: #22d3ee;
}

* { box-sizing: border-box; }
html, body { max-width:100%; overflow-x:hidden; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Inter, "Noto Sans SC", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }

.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 76px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 20px; letter-spacing: -.6px; }
.brand-mark { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 50%; background: var(--ink); }
.brand-mark i { width: 2px; background: #fff; border-radius: 2px; animation: brandWave 1.2s ease-in-out infinite; }
.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 15px; animation-delay: -.2s; }.brand-mark i:nth-child(3) { height: 11px; animation-delay: -.4s; }.brand-mark i:nth-child(4) { height: 5px; animation-delay: -.6s; }
@keyframes brandWave { 50% { transform: scaleY(.45); } }
.nav { display: flex; gap: clamp(24px, 4vw, 54px); font-size: 14px; font-weight: 500; }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: #111; transition: .25s; }
.nav a:hover::after { right: 0; }
.header-download { padding: 13px 18px; border: 1px solid #111; border-radius: 100px; font-size: 13px; font-weight: 600; transition: .25s; }
.header-download:hover { background: #111; color: white; }.header-download span { margin-left: 9px; }

.hero { min-height: calc(100vh - 92px); padding: clamp(60px, 8vw, 116px) clamp(24px, 5vw, 76px) 74px; display: grid; grid-template-columns: minmax(420px, .9fr) minmax(480px, 1.1fr); align-items: center; gap: clamp(40px, 7vw, 110px); overflow: hidden; }
.hero-copy { max-width: 650px; position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 11px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; }
.eyebrow span { width: 7px; height: 7px; background: #111; border-radius: 50%; box-shadow: 0 0 0 5px #eee; }
h1 { margin: 0; font-size: clamp(56px, 5.5vw, 92px); font-weight: 600; line-height: 1.04; letter-spacing: clamp(-5px, -.055em, -2px); }
h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.6px var(--ink); }
.lead { max-width: 570px; margin: 31px 0 38px; color: #676b70; font-size: 16px; line-height: 1.9; letter-spacing: .15px; }
.product-relation { max-width:650px; margin:-15px 0 28px; display:flex; align-items:center; gap:10px; color:#8a8d91; font-size:9px; letter-spacing:.2px; }
.product-relation span { padding:7px 9px; border:1px solid #dedfe1; border-radius:2px; background:#fafafa; }
.product-relation b { color:#111; font-weight:600; }.product-relation i { color:#a6a8ab; font-style:normal; }
.system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.system-card { min-height: 104px; display: grid; grid-template-columns: 46px 1fr 22px; align-items: center; gap: 14px; padding: 17px 20px; border: 1px solid #d6d7da; border-radius: 5px; background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.system-card:hover { transform: translateY(-3px); border-color: #111; box-shadow: 0 15px 35px rgba(0,0,0,.08); }
.system-card.primary { color: #fff; background: #0d0f12; border-color: #0d0f12; }
.system-card small { display: block; margin-bottom: 4px; color: #999da3; font-size: 8px; letter-spacing: 1.5px; }
.system-card strong { display: block; font-size: 16px; font-weight: 600; }
.version { display: block; margin-top: 6px; color: #96999e; font-size: 9px; }
.system-card b { align-self: start; font-size: 20px; font-weight: 400; }
.system-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: #f1f2f2; color: #111; }
.primary .system-icon { background: #292c30; color: white; }
.android-icon { position: relative; display: block; }.android-icon .head { position: absolute; width: 22px; height: 14px; left: 10px; top: 15px; border-radius: 10px 10px 3px 3px; background: currentColor; }
.android-icon .head i { position: absolute; width: 2px; height: 2px; top: 5px; background: #292c30; border-radius: 50%; }.android-icon .head i:first-child { left: 6px; }.android-icon .head i:last-child { right: 6px; }
.android-icon .antenna { position: absolute; top: 10px; width: 1px; height: 8px; background: currentColor; }.android-icon .antenna.left { left: 14px; transform: rotate(-34deg); }.android-icon .antenna.right { right: 14px; transform: rotate(34deg); }
.apple-icon { font-size: 0; }.apple-icon::before { content: "●"; font-size: 22px; }.apple-icon::after { content: ""; position: absolute; }
.trust-row { margin-top: 22px; display: flex; gap: 24px; color: #767a80; font-size: 11px; }.trust-row i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 5px; color: #111; background: #eee; border-radius: 50%; font-style: normal; font-size: 9px; }

.hero-visual { min-height: 660px; position: relative; display: grid; place-items: center; border-radius: 50%; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 48% 45%, #3a3d3f 0 7%, #202326 19%, #111315 39%, #08090a 61%, #020303 77%); box-shadow: 0 30px 100px rgba(0,0,0,.2); }
.hero-visual::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 55px, rgba(0,0,0,.07) 56px 57px); }
#voiceCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.sound-core { position: relative; z-index: 3; width: 190px; height: 190px; display: grid; place-items: center; }
.core-glow { position: absolute; inset: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(223,255,54,.24), transparent 65%); animation: glow 2.2s ease-in-out infinite; }
.core-disc { position:relative; width: 138px; height: 138px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: linear-gradient(145deg, rgba(42,45,47,.96), rgba(4,6,7,.98)); box-shadow: inset 0 0 34px rgba(255,255,255,.12), 0 0 50px rgba(223,255,54,.25); backdrop-filter: blur(10px); }
.host-portrait { position:relative; width:76px; height:88px; overflow:hidden; border-radius:38px 38px 28px 28px; background:radial-gradient(circle at 50% 28%, #f2f3f0 0 15%, #bfc4bc 16% 29%, #25292b 30% 100%); box-shadow:inset 0 0 20px rgba(255,255,255,.18); }
.portrait-head { position:absolute; left:25px; top:13px; width:27px; height:31px; border-radius:48% 48% 44% 44%; background:#d9ddd5; box-shadow:inset -5px -2px 8px rgba(0,0,0,.14); }
.portrait-body { position:absolute; left:13px; bottom:-19px; width:52px; height:57px; border-radius:50% 50% 12px 12px; background:linear-gradient(145deg,#dfff36,#6f7d18); }
.host-label { position:absolute; left:50%; bottom:-25px; transform:translateX(-50%); width:max-content; padding:5px 9px; color:#111; background:var(--acid); font-size:7px; font-weight:700; letter-spacing:1px; border-radius:2px; }
.mini-wave { height: 45px; display: flex; align-items: center; gap: 5px; }.mini-wave i { width: 3px; height: 10px; background: var(--acid); border-radius: 3px; animation: miniWave .8s ease-in-out infinite alternate; }.mini-wave i:nth-child(2),.mini-wave i:nth-child(6){animation-delay:-.2s}.mini-wave i:nth-child(3),.mini-wave i:nth-child(5){animation-delay:-.4s}.mini-wave i:nth-child(4){animation-delay:-.6s}
@keyframes miniWave { to { height: 43px; } } @keyframes glow { 50% { transform: scale(1.15); opacity: .6; } }
.pulse { position: absolute; inset: 25px; border: 1px solid rgba(223,255,54,.4); border-radius: 50%; animation: pulse 3s linear infinite; }.p2 { animation-delay: -1s; }.p3 { animation-delay: -2s; } @keyframes pulse { to { transform: scale(3.2); opacity: 0; } }
.orbit { position: absolute; z-index: 2; border: 1px dashed rgba(255,255,255,.26); border-radius: 50%; transform: rotate(-15deg); }.orbit-one { width: 72%; height: 38%; animation: orbitSpin 12s linear infinite; }.orbit-two { width: 85%; height: 50%; transform: rotate(52deg); animation: orbitSpin2 16s linear infinite; } @keyframes orbitSpin { to { transform: rotate(345deg); } } @keyframes orbitSpin2 { to { transform: rotate(-308deg); } }
.floating-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 13px 16px; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; background: rgba(10,12,14,.72); box-shadow: 0 15px 40px rgba(0,0,0,.22); backdrop-filter: blur(12px); animation: float 5s ease-in-out infinite; }
.floating-card small { display: block; margin-bottom: 3px; color: #a8aaae; font-size: 8px; letter-spacing: 1px; }.floating-card strong { font-size: 11px; font-weight: 500; }.listener-card { right: 3%; top: 24%; }.room-card { left: 3%; bottom: 22%; animation-delay: -2.5s; }.avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--acid); color: #111; font-size: 12px; font-weight: 700; }.live-dot { width: 5px; height: 5px; margin-left: 8px; border-radius: 50%; background: #ff4961; box-shadow: 0 0 0 4px rgba(255,73,97,.14); }.tiny-bars { height: 28px; display: flex; align-items: center; gap: 3px; }.tiny-bars i { width: 2px; height: 8px; background: #fff; animation: miniWave .7s alternate infinite; }.tiny-bars i:nth-child(2),.tiny-bars i:nth-child(4){animation-delay:-.25s}.tiny-bars i:nth-child(3){animation-delay:-.5s}
@keyframes float { 50% { transform: translateY(-9px); } }
.data-tag { position: absolute; z-index: 4; padding: 5px 7px; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.15); font-size: 7px; letter-spacing: 1.2px; }.tag-one { top: 17%; left: 25%; }.tag-two { bottom: 15%; right: 23%; }.tag-three { top: 46%; right: 5%; color: var(--acid); }
.visual-caption { position: absolute; z-index: 3; color: #111; }.visual-caption span { display:block; color:#8b8e93; font-size:7px; letter-spacing:1.5px; }.visual-caption b { font-size:10px; font-weight:600; }.visual-caption.top { top: 2%; right: 12%; }.visual-caption.bottom { bottom: 3%; left: 13%; }

.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 clamp(24px, 5vw, 76px); border-top: 1px solid #cfd0d2; border-bottom: 1px solid #cfd0d2; }
.feature-strip > div { padding: 42px clamp(20px, 3vw, 48px); border-right: 1px solid #d8d9da; }.feature-strip > div:first-child { padding-left: 0; }.feature-strip > div:last-child { border: 0; }
.feature-strip span { display: block; margin-bottom: 28px; color: #a3a5a9; font-size: 10px; }.feature-strip strong { font-size: 18px; }.feature-strip p { margin: 12px 0 0; color: #777a80; font-size: 12px; line-height: 1.7; }
.content-intro,.content-section { margin:0 clamp(24px,5vw,76px); border-top:1px solid #cfd0d2; }
.content-intro { padding:clamp(65px,8vw,118px) 0; display:grid; grid-template-columns:minmax(130px,.35fr) minmax(0,1fr); gap:clamp(35px,7vw,120px); }
.section-index { color:#a3a6aa; font-size:9px; letter-spacing:1.5px; }
.content-intro h2 { margin:0; font-size:clamp(38px,5vw,74px); line-height:1.08; letter-spacing:-.055em; }
.content-intro p { max-width:850px; margin:30px 0 25px; color:#696d72; font-size:15px; line-height:2; }
.text-link { display:inline-block; padding-bottom:7px; border-bottom:1px solid #111; font-size:11px; }.text-link span { margin-left:16px; }
.upgrade-strip { margin:0 clamp(24px,5vw,76px); padding:clamp(50px,7vw,90px) 0; border-top:1px solid #cfd0d2; }.upgrade-strip > header { display:grid; grid-template-columns:minmax(130px,.35fr) 1fr; gap:clamp(35px,7vw,120px); margin-bottom:38px; }.upgrade-strip header span { color:#a3a6aa; font-size:8px; letter-spacing:2px; }.upgrade-strip h2 { margin:10px 0 12px; font-size:clamp(28px,3.4vw,48px); line-height:1.15; letter-spacing:-.045em; }.upgrade-strip header p { margin:0; color:#777b80; font-size:12px; line-height:1.8; }.upgrade-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d9dadd; border-left:1px solid #d9dadd; }.upgrade-grid article { min-height:230px; padding:28px; border-right:1px solid #d9dadd; border-bottom:1px solid #d9dadd; }.upgrade-grid b { color:#a5a8ab; font-size:9px; }.upgrade-grid h3 { margin:30px 0 10px; font-size:17px; }.upgrade-grid p { margin:0; color:#73777c; font-size:12px; line-height:1.8; }.upgrade-grid small { display:block; margin-top:16px; color:#a2a5a8; font-size:9px; }
.custom-section { margin:0 clamp(24px,5vw,76px); padding:clamp(65px,8vw,110px) 0; border-top:1px solid #cfd0d2; }.custom-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #d9dadd; border-left:1px solid #d9dadd; }.custom-grid article { min-height:235px; padding:30px; border-right:1px solid #d9dadd; border-bottom:1px solid #d9dadd; }.custom-grid article > span { color:#a4a7aa; font-size:8px; letter-spacing:1.6px; }.custom-grid h3 { margin:29px 0 10px; font-size:17px; }.custom-grid p { margin:0; color:#73777c; font-size:12px; line-height:1.85; }.custom-grid small { display:block; margin-top:15px; color:#a2a5a8; font-size:9px; }.custom-note { margin-top:24px; padding:17px 20px; display:flex; gap:20px; background:#f5f5f3; color:#777b80; font-size:11px; line-height:1.7; }.custom-note b { color:#111; white-space:nowrap; }
.content-section { padding:clamp(65px,8vw,110px) 0; }
.section-head { display:grid; grid-template-columns:minmax(130px,.35fr) minmax(0,1fr); gap:clamp(35px,7vw,120px); margin-bottom:55px; min-width:0; }.section-head > div { min-width:0; }
.section-head > span { color:#a3a6aa; font-size:10px; }.section-head small { color:#a3a6aa; font-size:8px; letter-spacing:2px; }.section-head h2 { margin:12px 0 0; font-size:clamp(31px,4vw,55px); line-height:1.15; letter-spacing:-.045em; }
.section-head h2 i { margin-left:12px; color:#aaa; font-size:.42em; font-style:normal; vertical-align:top; transition:.2s; }.section-head h2 a:hover i { color:#111; transform:translate(3px,-3px); display:inline-block; }
.detail-hint { margin:16px 0 0; color:#929599; font-size:11px; }
.reading-copy { margin-left:calc(130px + clamp(35px,7vw,120px)); color:#666a70; font-size:14px; line-height:2.05; }
.two-column-copy { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,75px); }.reading-copy p { margin:0; }
.use-case-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d9dadd; border-left:1px solid #d9dadd; }
.use-case-grid article { min-height:280px; padding:32px; border-right:1px solid #d9dadd; border-bottom:1px solid #d9dadd; transition:.25s; }.use-case-grid article:hover { background:#f7f7f5; }
.use-case-grid article > span { color:#b3b5b8; font-size:9px; }.use-case-grid h3 { margin:35px 0 7px; font-size:18px; }.use-case-grid small { color:#a1a4a8; font-size:9px; }.use-case-grid p { margin:18px 0 0; color:#73777c; font-size:12px; line-height:1.85; }
.benefit-list { margin:0; padding:0; list-style:none; counter-reset:benefit; border-top:1px solid #d7d8da; }
.benefit-list li { counter-increment:benefit; display:grid; grid-template-columns:70px minmax(180px,.5fr) 1fr; align-items:center; gap:25px; padding:28px 0; border-bottom:1px solid #d7d8da; }.benefit-list li::before { content:"0" counter(benefit); color:#a5a8ab; font-size:9px; }.benefit-list b { font-size:16px; }.benefit-list p { margin:0; color:#74787d; font-size:12px; line-height:1.8; }
.help { margin: 90px clamp(24px, 5vw, 76px); padding: 58px 0; display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid #111; }.help small { font-size: 9px; letter-spacing: 2px; }.help h2 { margin: 16px 0 0; font-size: clamp(30px, 3vw, 48px); line-height: 1.25; letter-spacing: -2px; }.help > a { padding-bottom: 10px; border-bottom: 1px solid #111; font-size: 13px; }.help > a span { margin-left: 35px; }
footer { min-height: 110px; margin: 0 clamp(24px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; color: #8b8d91; font-size: 10px; }.footer-brand { color: #111; font-size: 15px; }.footer-brand .brand-mark { transform: scale(.8); }.footer-brand .brand-mark i { background:white; } footer div { display:flex; gap:24px; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 30px; transform: translate(-50%, 20px); padding: 12px 20px; color: white; background: #111; border-radius: 3px; font-size: 12px; opacity: 0; pointer-events:none; transition:.3s; }.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1050px) { .hero { grid-template-columns: 1fr; }.hero-copy { max-width: 760px; }.hero-visual { min-height: 620px; width: min(720px, 100%); justify-self:center; }.system-grid { max-width: 650px; } }
@media (max-width: 720px) { .site-header { height:74px; padding:0 20px; }.nav { display:none; }.header-download { padding:10px 14px; }.hero { padding:55px 20px 60px; gap:35px; }.hero-copy { min-width:0; } h1 { font-size:clamp(44px,13vw,65px); letter-spacing:-3px; }.lead { margin:23px 0 28px; font-size:14px; }.product-relation { flex-wrap:wrap; gap:6px; }.product-relation i { display:none; }.system-grid { grid-template-columns:1fr; }.hero-visual { min-height:440px; margin:5px -40px 0; width:calc(100% + 80px); }.floating-card { transform:scale(.82); }.listener-card { right:6%; top:20%; }.room-card { left:6%; bottom:17%; }.feature-strip { grid-template-columns:1fr; margin:0 20px; }.feature-strip > div,.feature-strip > div:first-child { padding:28px 0; border-right:0; border-bottom:1px solid #ddd; }.feature-strip > div:last-child { border-bottom:0; }.feature-strip span { margin-bottom:12px; }.help { margin:65px 20px; display:block; }.help > a { display:inline-block; margin-top:35px; } footer { margin:0 20px; padding:30px 0; flex-wrap:wrap; gap:20px; }.trust-row { gap:12px; flex-wrap:wrap; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }

/* Keep the complete product preview visible on the public download page. */
.detail-main { padding-top:1px; }
.detail-hero { margin:0 clamp(24px,5vw,76px); padding:clamp(75px,10vw,145px) 0; }
.detail-hero small { color:#a2a5a8; font-size:9px; letter-spacing:2px; }.detail-hero h1 { margin:22px 0 25px; }.detail-hero p { color:#777b80; font-size:14px; }
.tutorial-main { padding-top:1px; }.tutorial-hero { margin:0 clamp(24px,5vw,76px); padding:clamp(75px,10vw,140px) 0 clamp(65px,8vw,105px); }.tutorial-hero small,.tutorial-section header small,.tutorial-cta small { color:#a2a5a8; font-size:8px; letter-spacing:2px; }.tutorial-hero h1 { margin:22px 0 25px; }.tutorial-hero > p { color:#767a7f; font-size:14px; }.tutorial-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:35px; }.tutorial-tags span { padding:8px 12px; border:1px solid #d8d9db; border-radius:100px; color:#74777b; font-size:9px; }
.tutorial-section { margin:0 clamp(24px,5vw,76px); padding:clamp(65px,8vw,105px) 0; border-top:1px solid #d1d2d4; }.tutorial-section > header { display:grid; grid-template-columns:minmax(130px,.35fr) 1fr; gap:clamp(35px,7vw,120px); margin-bottom:50px; }.tutorial-section > header > span { color:#a3a6aa; font-size:10px; }.tutorial-section header h2 { margin:10px 0 0; font-size:clamp(31px,4vw,52px); letter-spacing:-.045em; }
.step-list { border-top:1px solid #d7d8da; }.step-list article { display:grid; grid-template-columns:55px 1fr auto; gap:25px; align-items:start; padding:32px 0; border-bottom:1px solid #d7d8da; }.step-list article > b { width:32px; height:32px; display:grid; place-items:center; border:1px solid #bfc1c3; border-radius:50%; font-size:11px; }.step-list h3 { margin:4px 0 9px; font-size:17px; }.step-list p { max-width:780px; margin:0; color:#74787d; font-size:12px; line-height:1.8; }.step-list article > span { color:#b0b2b5; font-size:7px; letter-spacing:1.5px; }
.safety-note { margin:30px 0 0 80px; padding:20px 24px; display:flex; gap:25px; background:#f5f5f3; }.safety-note b { flex:none; font-size:12px; }.safety-note p { margin:0; color:#777b80; font-size:11px; line-height:1.8; }
.workflow { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d8d9db; border-left:1px solid #d8d9db; }.workflow article { min-height:235px; padding:30px; border-right:1px solid #d8d9db; border-bottom:1px solid #d8d9db; }.workflow article > span { color:#aaaeb1; font-size:9px; }.workflow h3 { margin:34px 0 10px; font-size:17px; }.workflow p { margin:0; color:#73777c; font-size:12px; line-height:1.8; }.workflow a { display:inline-block; margin-top:16px; padding-bottom:4px; border-bottom:1px solid #111; font-size:9px; }
.quick-check ul { margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); list-style:none; border-top:1px solid #d8d9db; }.quick-check li { padding:21px 0; border-bottom:1px solid #d8d9db; color:#55595e; font-size:12px; }.quick-check li:nth-child(odd) { border-right:1px solid #d8d9db; }.quick-check li:nth-child(even) { padding-left:30px; }.quick-check i { display:inline-grid; place-items:center; width:18px; height:18px; margin-right:10px; border-radius:50%; background:#111; color:white; font-size:8px; font-style:normal; }
.faq-list { border-top:1px solid #d7d8da; }.faq-list details { border-bottom:1px solid #d7d8da; }.faq-list summary { padding:24px 0; display:flex; justify-content:space-between; cursor:pointer; font-size:14px; font-weight:600; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary i { color:#999; font-style:normal; font-weight:400; transition:.2s; }.faq-list details[open] summary i { transform:rotate(45deg); }.faq-list details p { max-width:850px; margin:0 0 25px; color:#73777c; font-size:12px; line-height:1.9; }
.tutorial-cta { margin:20px clamp(24px,5vw,76px) 90px; padding:55px 0; display:flex; align-items:end; justify-content:space-between; border-top:1px solid #111; border-bottom:1px solid #111; }.tutorial-cta h2 { margin:12px 0 0; font-size:clamp(28px,3.5vw,48px); }.tutorial-cta a { padding-bottom:8px; border-bottom:1px solid #111; font-size:12px; }.tutorial-cta a span { margin-left:30px; }
@media (max-width:800px) { .tutorial-section > header { grid-template-columns:1fr; gap:15px; }.step-list article { grid-template-columns:42px 1fr; }.step-list article > span { display:none; }.safety-note { margin-left:0; display:block; }.safety-note p { margin-top:10px; }.workflow { grid-template-columns:1fr; }.workflow article { min-height:0; }.quick-check ul { grid-template-columns:1fr; }.quick-check li:nth-child(odd) { border-right:0; }.quick-check li:nth-child(even) { padding-left:0; }.tutorial-cta { display:block; }.tutorial-cta a { display:inline-block; margin-top:32px; } }

/* Compact mobile rhythm: conserve vertical space on small phone screens. */
@media (max-width:800px) {
  .detail-page .section-head h2 { overflow-wrap:anywhere; word-break:break-word; }
  p { line-height:1.55 !important; }
  .site-header { height:64px; }
  .hero { min-height:auto; padding-top:38px; padding-bottom:38px; }
  .eyebrow { margin-bottom:16px; }
  .lead { margin:16px 0 20px; line-height:1.6 !important; }
  .product-relation { margin-bottom:18px; }
  .system-card { min-height:86px; padding:12px 15px; }
  .trust-row { margin-top:14px; }

  .content-intro { padding:38px 0; gap:12px; }
  .content-intro p { margin:16px 0; font-size:13px; }
  .home-page .content-section { padding:28px 0; }
  .section-head { margin-bottom:28px; gap:10px; }
  .section-head h2 { margin-top:7px; }
  .detail-hint { margin-top:8px; }
  .content-section { padding:38px 0; }
  .reading-copy { font-size:13px; line-height:1.6; }
  .two-column-copy { gap:12px; }
  .use-case-grid article { padding:20px 0; }
  .use-case-grid h3 { margin:15px 0 5px; }
  .use-case-grid p { margin-top:10px; }
  .benefit-list li { padding:18px 0; }
  .help { margin:38px 20px; padding:32px 0; }
  .help h2 { margin-top:10px; }
  .help > a { margin-top:22px; }

  .detail-hero,.tutorial-hero { padding:44px 0 38px; }
  .detail-hero h1,.tutorial-hero h1 { margin:14px 0 14px; }
  .tutorial-tags { margin-top:20px; }
  .tutorial-section { padding:36px 0; }
  .tutorial-section > header { margin-bottom:24px; gap:8px; }
  .tutorial-section header h2 { margin-top:6px; }
  .step-list article { gap:12px; padding:18px 0; }
  .step-list h3 { margin:3px 0 6px; }
  .safety-note { margin-top:18px; padding:15px 16px; }
  .workflow article { padding:18px 20px; }
  .workflow h3 { margin:13px 0 6px; }
  .workflow a { margin-top:10px; }
  .quick-check li { padding:15px 0; }
  .faq-list summary { padding:17px 0; }
  .faq-list details p { margin-bottom:17px; }
  .tutorial-cta { margin-bottom:45px; padding:34px 0; }
  .tutorial-cta h2 { margin-top:8px; }
  footer { padding:22px 0; }
}

.service-contact { display:flex; align-items:center; gap:14px; }
.service-contact b { color:#111; font-weight:600; }
.service-contact span { white-space:nowrap; }
.online-service { margin-top:28px; padding:22px 25px; display:flex; align-items:center; justify-content:space-between; background:#111; color:#fff; }
.online-service small { color:#808388; font-size:7px; letter-spacing:1.8px; }
.online-service h3 { margin:7px 0 0; font-size:17px; }
.online-service p { display:flex; gap:28px; margin:0; color:#b9bbbe; font-size:11px; }
.online-service b { color:#fff; font-size:13px; }

@media (max-width:800px) {
  footer .service-contact { order:3; width:100%; flex-wrap:wrap; gap:6px 14px; }
  .online-service { margin-top:20px; padding:17px; display:block; }
  .online-service p { margin-top:12px; display:grid; gap:6px; }
  .upgrade-strip { padding:38px 0; }.upgrade-strip > header { grid-template-columns:1fr; gap:10px; margin-bottom:22px; }.upgrade-grid { grid-template-columns:1fr; }.upgrade-grid article { min-height:0; padding:20px 18px; }.upgrade-grid h3 { margin:15px 0 7px; }.custom-section { padding:38px 0; }.custom-grid { grid-template-columns:1fr; }.custom-grid article { min-height:0; padding:20px 18px; }.custom-grid h3 { margin:15px 0 7px; }.custom-note { display:block; }.custom-note span { display:block; margin-top:7px; }
}

@media (max-width: 800px) {
  .content-intro,.section-head { grid-template-columns:1fr; gap:20px; }
  .content-intro { padding:65px 0; }
  .reading-copy { margin-left:0; }
  .two-column-copy { grid-template-columns:1fr; gap:20px; }
  .use-case-grid { grid-template-columns:1fr; }
  .use-case-grid article { min-height:0; padding:28px 0; border-left:0; border-right:0; }
  .benefit-list li { grid-template-columns:38px 1fr; gap:14px; }
  .benefit-list li p { grid-column:2; }
}