/* Resender — site stylesheet. Direction "technical": Space Grotesk + IBM Plex Sans + JetBrains Mono, dotted grid, hard shadows. */
:root{color-scheme:light dark;--bg:#f6f7f9;--dot:rgba(20,22,26,.13);--paper:#ffffff;--surface:#eef0f4;--ink:#14161a;--text:#14161a;--muted:#4f5762;--accent:#1550c8;--accent-ink:#0d3a94;--accent-soft:#dbe5ff;--ok:#1e9e5a;--warn-bg:#fff8e6;--warn-bd:#e0c060;--border:#d9dee6;--r:10px;--wrap:74rem;--measure:42rem;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--display:"Space Grotesk",var(--sans);--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
@media (prefers-color-scheme:dark){:root{--bg:#0e1014;--dot:rgba(232,236,242,.10);--paper:#161a20;--surface:#1b2028;--ink:#e8ecf2;--text:#e8ecf2;--muted:#a5aebb;--accent:#86aeff;--accent-ink:#5b8cf0;--accent-soft:#1a2b52;--warn-bg:#241f10;--warn-bd:#6a5a2a;--border:#2a313b}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg) radial-gradient(var(--dot) 1px,transparent 1px) 0 0/28px 28px;color:var(--text);font:400 17px/1.6 var(--sans);text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,4vw,2.6rem)}
h3{font-size:1.15rem;letter-spacing:-.015em}
h4{font-size:1.05rem;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:var(--measure);text-wrap:pretty}ul,ol{max-width:var(--measure)}
strong{font-weight:600}
.mono{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;color:var(--muted)}
.kick{display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.kick::before{content:"// "}
button.lang{position:relative;font-family:var(--mono);font-size:.85rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid var(--ink);border-radius:8px;padding:.4rem .7rem;background:var(--paper);color:var(--text);user-select:none}
button.lang::after{content:"▾";font-size:.75em}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--paper);color:var(--text);padding:.6rem 1rem;z-index:10}.skip:focus{inset-inline-start:.5rem;top:.5rem}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
section{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1.5px solid var(--border)}
section.hero{border-top:0;padding-top:clamp(1.5rem,4vw,3rem)}
/* header */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;color:var(--text);text-decoration:none}
.brand>img{width:2.1rem;height:2.1rem;border-radius:.55rem;display:block}.brand picture{display:block}.brand picture img{display:block;height:1.05rem;width:auto}
.head-right{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:.5rem}.status i{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok)}
@media (max-width:40rem){.status{display:none}}
.nav{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.95rem;font-weight:500}.nav a{color:var(--text);text-decoration:none}.nav a:hover{color:var(--accent)}
@media (max-width:52rem){.nav{display:none}}
/* language switcher */
/* hero */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:center}
@media (min-width:60rem){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem}}
.hero .lead{font-size:clamp(1.1rem,2.2vw,1.3rem);color:var(--muted);max-width:34rem;margin:1.25rem 0 0}
.hero .sub{color:var(--muted);font-size:1rem;margin:.9rem 0 0;max-width:36rem}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.25rem;margin:1.9rem 0 0}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-height:3.6rem;padding:.6rem 1.35rem;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;border:1.5px solid var(--accent-ink);box-shadow:4px 4px 0 var(--accent-ink)}
.store b{font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em}.store span{font-size:.8rem;opacity:.85}
.store:hover{color:#fff;transform:translate(1px,1px);box-shadow:3px 3px 0 var(--accent-ink)}
@media (prefers-color-scheme:dark){.store{color:#0e1014}.store:hover{color:#0e1014}}
.cta .mono{max-width:22rem;line-height:1.4}
.phone-wrap{display:flex;justify-content:center}
/* diagram */
.diag{display:grid;grid-template-columns:1fr;gap:0;margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0 4px 4px 0;align-items:center;overflow-x:clip}
@media (min-width:60rem){.diag{grid-template-columns:1.2fr .85fr 1.35fr .85fr 1.2fr .85fr 1.2fr}.diag .nd{min-height:7.6rem}}
.nd{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);padding:.9rem 1rem;box-shadow:4px 4px 0 var(--ink)}
.nd .lb{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.nd b{display:block;font-family:var(--display);font-size:1.1rem;letter-spacing:-.015em;margin-bottom:.1rem}.nd span{font-size:.85rem;color:var(--muted);display:block}
.nd.hi{background:var(--accent);color:#fff;border-color:var(--accent-ink);box-shadow:4px 4px 0 var(--accent-ink)}.nd.hi .lb{color:#bcd0ff}.nd.hi span{color:#dbe5ff}
@media (prefers-color-scheme:dark){.nd.hi{color:#0e1014}.nd.hi .lb{color:#0d3a94}.nd.hi span{color:#1a2b52}}
.wire{position:relative;justify-self:start;margin-left:1.5rem;width:0;height:3.4rem;border-left:2px dashed var(--ink)}
.wire::after{content:"";position:absolute;left:-6px;bottom:-2px;border:5px solid transparent;border-top:8px solid var(--ink)}
.wire i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--muted);white-space:normal;width:calc(100vw - 6rem);max-width:28rem;line-height:1.3}
@media (min-width:60rem){.wire{width:auto;height:0;border-left:0;border-top:2px dashed var(--ink);justify-self:stretch;margin:0 .6rem}.wire::after{left:auto;right:-2px;top:-6px;bottom:auto;border:5px solid transparent;border-left:8px solid var(--ink)}.wire i{left:50%;top:auto;bottom:.45rem;transform:translateX(-50%);background:none;padding:0;white-space:normal;width:auto;max-width:calc(100% - 1.5rem);text-align:center;line-height:1.2}}
/* phone mock — proportions match the 1080×1920 app screenshot (screen ≈ 9:19.5); internals in em of .scr */
.phone{width:min(300px,78vw);aspect-ratio:300/650;background:#0f1115;border-radius:13%/6%;padding:10px;box-shadow:0 40px 80px -30px rgba(10,20,60,.45);flex:none;container-type:inline-size;transition:transform .3s}
@media (min-width:60rem){.phone{transform:rotate(-4deg)}.phone:hover{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.phone{transition:none}}
.scr{background:#f2f4f8;border-radius:10.5%/5%;height:100%;padding:1.2em 1.1em 0;color:#14161a;overflow:hidden;position:relative;font-family:var(--sans);font-size:4.35cqw;line-height:1.3}
.scr .sb{display:flex;justify-content:space-between;align-items:center;font-size:.9em;font-weight:400;padding:0 .6em;color:#222}
.scr .sbt{font-weight:500;letter-spacing:.01em}.scr .sbr{display:inline-flex;gap:.3em;align-items:center}.scr .sbr svg{width:1.05em;height:1.05em;fill:currentColor;display:block}.scr .sbr svg:last-child{transform:rotate(90deg);width:1.15em;height:1.15em}
.scr .live{display:flex;align-items:center;gap:.5em;font-size:.85em;color:#5b6472;margin:1.6em .2em .5em}.scr .live::before{content:"";width:.55em;height:.55em;border-radius:50%;background:#1e9e5a}
.scr .wm{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin:0 .2em 1.1em}.scr .wm picture{display:block;flex:none;width:46.07%}.scr .wm img{display:block;width:100%;height:auto}.scr .wm .ic{margin-inline-start:auto}
/* the fresh install (build.js emptyMainView): no last-send line, the bar where it would be; the plain mark, then the tier pill — onSurface, the words in surface, the crown in proBright (ui/MainScreen.kt TierPill) */
.scr .sb+.wm{margin-top:2.75em}.scr .wm .mk{width:33%}.scr .pill{display:inline-flex;align-items:center;gap:.3em;flex:none;background:#111827;color:#fff;border-radius:99em;padding:.4em .8em .4em .6em;font-size:.85em;font-weight:600;font-style:normal;white-space:nowrap}.scr .pill svg{width:1.15em;height:1.15em;fill:#e9b949}
/* the sending method not set up yet: the app's errorContainer / onErrorContainer (ui/DashboardTab.kt SenderBlock error), the card's border kept */
.scr .cardx.miss{background:#fee2e2;color:#7f1d1d}.scr .miss .row small{color:#7f1d1d}.scr .miss .chev{stroke:#7f1d1d}.scr .miss .det{display:block;font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the app bar's journal and gear: the app's own 24 dp stroke icons (ui/primitives/Icons.kt), stroke 2, onSurfaceVariant, 24 dp apart */
.scr .ic{display:flex;gap:1.42em;align-items:center}.scr .ic svg{width:1.42em;height:1.42em;fill:none;stroke:#6b7280;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scr .wm span{display:inline-block;width:1.2em;height:1.2em;border:.14em solid #6b7280;border-radius:50%;margin-left:1em}
.scr .cardx{background:#fff;border:1px solid #dde2ea;border-radius:1em;overflow:hidden}
.scr .row{display:flex;align-items:center;justify-content:space-between;padding:.9em 1em;font-size:1em;border-top:1px solid #e7ebf1;gap:.7em}.scr .row:first-child{border-top:0}.scr .row>div:first-of-type{flex:1;min-width:0}.scr .row b,.scr .row .arr,.scr .row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.scr .grip{display:block;flex:none;width:1.1em;height:.55em;border-top:.13em solid #8a93a3;border-bottom:.13em solid #8a93a3;margin:0 .3em 0 .1em}
.scr .row small{display:block;font-size:.85em;color:#6b7280;margin-bottom:.1em}.scr .row b{font-weight:600}.scr .row .arr{color:#6b7280;font-size:.85em;font-weight:400}
.scr .ok{background:#d6f5e3;color:#126b3b;font-size:.85em;font-weight:600;padding:.25em .7em;border-radius:99em;white-space:nowrap}
.scr .chev{width:1.42em;height:1.42em;flex:none;fill:none;stroke:#6b7280;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:.6em}
.scr .rules{margin:1.1em -1.1em 0;background:#fff;border-radius:1.8em 1.8em 0 0;padding:1.2em 1.1em 2em;border:1px solid #e3e7ee;border-bottom:0;min-height:100%}
.scr .rh{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7em;gap:.6em}.scr .rh>div:first-child{flex:1;min-width:0}.scr .rh b{font-size:.78em;letter-spacing:.08em;color:#6b7280;display:block}.scr .rh small{font-size:.88em;color:#6b7280;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr .rh span{flex:none;border:.1em dashed #9db3e8;color:#1550c8;border-radius:.6em;padding:.4em .7em;font-size:.92em;font-weight:600;white-space:nowrap}
.scr .tog{width:2.85em;height:1.7em;border-radius:1em;background:#1550c8;position:relative;flex:none}.scr .tog::after{content:"";position:absolute;right:.2em;top:.2em;width:1.3em;height:1.3em;border-radius:50%;background:#fff}
.scr .row.rest{background:#f4f6f9;color:#4f5762}.scr .rules .row b{white-space:normal}.scr .nb{white-space:nowrap;direction:ltr;unicode-bidi:isolate}
/* The hero phone follows the site's scheme (the founder, 2026-11-01): the app's own dark palette (ui/theme/Color.kt DarkColors). */
@media (prefers-color-scheme:dark){.scr{background:#111827;color:#f9fafb}.scr .sb{color:#e5e7eb}.scr .live{color:#9ca3af}.scr .ic svg,.scr .chev{stroke:#9ca3af}.scr .wm span{border-color:#9ca3af}.scr .cardx{background:#1f2937;border-color:#374151}.scr .row{border-top-color:#374151}.scr .grip{border-color:#6b7280}.scr .row small,.scr .row .arr,.scr .rh b,.scr .rh small{color:#9ca3af}.scr .ok{background:#064e3b;color:#a7f3d0}.scr .rules{background:#1f2937;border-color:#374151}.scr .rh span{border-color:#1e3a8a;color:#60a5fa}.scr .tog{background:#60a5fa}.scr .tog::after{background:#0b1e3f}.scr .row.rest{background:#273244;color:#d1d5db}}
/* The home's four drawn screens (build.js MOCK_SCREENS): the hero's .scr in a 9:20 frame, scaled so 1em is the hero's em; the sheets
   are the app's (ui/primitives/AppSheet.kt) over its scrim, in the app's light and dark palettes (ui/theme/Color.kt). */
.mocks .crop{container-type:inline-size;background:none}
/* Drawn screens are pictures, not text: the hero phone, the home mocks and the battery pages' drawings cannot be selected; captions and step lists stay selectable. */
.scr,.mocks .crop,.sch-screen{-webkit-user-select:none;user-select:none}
.mocks .scr{border-radius:0;font-size:4.66cqw;text-align:start}.mocks .scr .wm img{position:static}.mocks .scr .wm .mk-pro{width:44.9%}
/* the app's scrim over the main screen behind a sheet: onSurface at 55 % light, black at 70 % dark (ui/theme/Color.kt LIGHT/DARK_SCRIM_ALPHA) */
.scr .scrim{position:absolute;inset:0;background:rgba(17,24,39,.55)}
.scr .sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:1.8em 1.8em 0 0;padding:.5em 1.1em 2.2em;display:flex;flex-direction:column;gap:.75em}
.scr .handle{display:block;width:2.6em;height:.3em;border-radius:1em;background:#4b5563;margin:0 auto .3em}
.scr .x{position:absolute;right:1.1em;top:-2.4em;width:1.6em;height:1.6em;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.scr .st{font-size:1.45em;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.scr .cap{font-size:.85em;color:#6b7280;font-weight:500}
.scr .sec{font-size:.78em;letter-spacing:.08em;color:#6b7280;font-weight:600;text-transform:uppercase;margin-top:.3em}
.scr .tiles{display:flex;flex-wrap:wrap;gap:.5em}
.scr .tile{flex:1 1 0;min-width:max-content;display:flex;align-items:center;justify-content:center;gap:.6em;border:1px solid #9ca3af;border-radius:.6em;padding:.8em .7em;font-weight:600;font-size:.9em;white-space:nowrap}
.scr .tiles:has(.tile:nth-child(3)) .tile{font-size:.75em;gap:.45em;padding:.95em .45em} /* three tiles take the app's compact look */
.scr .tile svg{width:1.3em;height:1.3em;flex:none}
.scr .field{display:flex;align-items:center;border:1px solid #9ca3af;border-radius:.6em;padding:.9em 1em;min-height:3.4em;min-width:0}.scr .ph{color:#6b7280}
.scr .dds{display:flex;gap:.5em}.scr .dd{flex:1 1 0;min-width:max-content;justify-content:space-between;gap:.3em;padding-inline:.8em;white-space:nowrap}.scr .dd .chev{width:1.2em;height:1.2em;margin:0}
.scr .fl{flex-direction:column;align-items:flex-start;justify-content:center;padding:.45em 1em}.scr .fl small{font-size:.75em;color:#6b7280}
.scr .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.25em;border:1px solid #9ca3af;border-radius:.6em;padding:.25em}
.scr .seg span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:2.4em;padding:.3em;border-radius:.45em;color:#6b7280;font-weight:600;font-size:.88em;line-height:1.15}.scr .seg .on{background:#dbeafe;color:#1e3a8a}
.scr .tog.off{background:#f3f4f6;border:.12em solid #9ca3af}.scr .tog.off::after{right:auto;left:.25em;top:.24em;width:1em;height:1em;background:#9ca3af}
.scr .btns{display:flex;align-items:center;gap:.5em}.scr .btn{flex:1;text-align:center;background:#1550c8;color:#fff;border-radius:.6em;padding:.8em;font-weight:600}.scr .btn-text{color:#dc2626;font-weight:600;padding:.8em}
.scr .show{align-self:flex-end;color:#1550c8;font-weight:600;font-size:.88em}
.scr .log{padding:.6em .8em .7em}.scr .lh{display:flex;align-items:center;gap:.4em;margin-bottom:.15em}.scr .lh b{font-size:.9em;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.scr .lh small{flex:none;margin-inline-end:auto;color:#6b7280;font-size:.75em;white-space:nowrap}.scr .lh .ok{flex:none;font-size:.75em}.scr .log .arr{color:#6b7280;font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-color-scheme:dark){.scr .scrim{background:rgba(0,0,0,.7)}.scr .pill{background:#f9fafb;color:#111827}.scr .cardx.miss{background:#7f1d1d;color:#fecaca}.scr .miss .row small{color:#fecaca}.scr .miss .chev{stroke:#fecaca}.scr .sheet{background:#111827}.scr .handle{background:#9ca3af}.scr .x{stroke:#e5e7eb}.scr .tile{background:#1f2937;border-color:#6b7280}.scr .field,.scr .seg{border-color:#6b7280}.scr .ph,.scr .fl small,.scr .cap,.scr .sec,.scr .lh small,.scr .log .arr,.scr .seg span{color:#9ca3af}.scr .seg .on{background:#1e3a8a;color:#dbeafe}.scr .tog.off{background:#374151;border-color:#6b7280}.scr .tog.off::after{background:#6b7280}.scr .btn{background:#60a5fa;color:#0b1e3f}.scr .btn-text{color:#f87171}.scr .show{color:#60a5fa}}
/* cards */
.cards{display:grid;gap:1rem;padding:0;margin:1.75rem 0 0;list-style:none;max-width:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.card{background:var(--paper);border:1.5px solid var(--border);border-radius:var(--r);padding:1.2rem 1.3rem}
.card .num{font-family:var(--mono);font-size:.75rem;color:var(--accent);letter-spacing:.08em;margin-bottom:.6rem}
.card h3,.card h4{font-size:1.08rem;margin:0 0 .45em}
.card p{margin:0;color:var(--muted);font-size:.95rem;max-width:none}.card p+p{margin-top:.6em}
/* steps */
.steps{list-style:none;padding:0;margin:1.75rem 0 0;max-width:none;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.steps li{position:relative;padding-top:2.6rem}
.steps .num{position:absolute;top:0;left:0;font-family:var(--mono);font-size:1.3rem;font-weight:500;color:var(--accent);line-height:1}
.steps .num::after{content:"";display:block;width:3rem;border-top:2px dashed var(--ink);margin-top:.6rem}
.steps h3{margin-bottom:.35em}.steps p{color:var(--muted);margin:0}
/* screenshots */
.shots{display:grid;gap:2rem 1.25rem;margin:2.5rem 0 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.shots figure{margin:0;text-align:center}
.shots .crop{position:relative;overflow:hidden;border-radius:1.6rem;aspect-ratio:9/20;max-width:15rem;margin:0 auto;background:var(--surface);border:1.5px solid var(--border)}
.shots .crop img{position:absolute;display:block;width:100%;left:0;top:0;height:auto}
.shots figcaption{max-width:16rem;margin:.8rem auto 0;color:var(--muted);font-size:.85rem;line-height:1.45;font-family:var(--mono)}
.note{color:var(--muted);font-size:.92rem}
.cards+.note,.shots+.note,.tiers+.note{margin:1.25rem 0 0}
/* promise */
.promise blockquote{margin:0 0 1.5rem;padding:1.2rem 1.4rem;background:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:var(--r);font-family:var(--display);font-size:clamp(1.3rem,3vw,1.8rem);font-weight:700;letter-spacing:-.02em;max-width:var(--measure)}
.promise blockquote p{margin:0;max-width:none}
.points{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.points li{max-width:var(--measure)}
.callout{background:var(--warn-bg);border:1.5px solid var(--warn-bd);border-radius:var(--r);padding:1rem 1.2rem;margin:1.75rem 0 0;max-width:none}
.callout p{margin:0;max-width:none}
/* pricing */
.tiers{display:grid;gap:1rem;padding:0;margin:1.75rem 0 0;list-style:none;max-width:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.tier{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);padding:1.4rem 1.5rem;box-shadow:4px 4px 0 var(--ink)}
.tier .lb{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.tier h3{font-size:1.6rem;margin:.3rem 0 .1rem}
.tier .price{display:block;font-family:var(--display);font-size:1.15rem;color:var(--muted);margin-bottom:.8rem}
.tier p{color:var(--muted);max-width:none;font-size:.95rem}.tier p:last-child{margin-bottom:0}
.tier.hi{background:var(--accent);color:#fff;border-color:var(--accent-ink);box-shadow:4px 4px 0 var(--accent-ink)}.tier.hi .lb{color:#bcd0ff}.tier.hi .price,.tier.hi p{color:#dbe5ff}
@media (prefers-color-scheme:dark){.tier.hi{color:#0e1014}.tier.hi .lb{color:#0d3a94}.tier.hi .price,.tier.hi p{color:#1a2b52}}
/* faq */
.faq{display:grid;gap:.6rem;margin-top:1.5rem;max-width:var(--measure)}
.faq details{background:var(--paper);border:1.5px solid var(--border);border-radius:var(--r)}
.faq summary{cursor:pointer;padding:.9rem 1.1rem;list-style:none;display:flex;gap:.8rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);color:var(--accent);flex:none}
.faq details[open] summary::before{content:"–"}
.faq summary h3{margin:0;font-size:1.02rem}
.faq details p{padding:0 1.1rem 1rem 2.4rem;margin:0;color:var(--muted);max-width:none}
/* footer */
.site-foot{border-top:1.5px solid var(--border);padding:2rem 0 3rem;color:var(--muted);font-size:.9rem}
.site-foot ul{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;list-style:none;padding:0;margin:0 0 .9rem;max-width:none}
.site-foot p{max-width:var(--measure);margin-bottom:.6em}.site-foot p:last-child{margin-bottom:0}
.site-foot .brand{font-size:1rem;margin-bottom:1rem}.site-foot .brand>img{width:1.5rem;height:1.5rem;border-radius:.4rem}.site-foot .brand picture img{height:.85rem}
/* legal / subpages / 404 */
section.page{border-top:0;padding-top:clamp(1.5rem,4vw,3rem)}
.legal h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:.6em}.legal h2{margin-top:2.75rem;font-size:clamp(1.35rem,3vw,1.8rem)}.legal h3{margin-top:1.75rem;margin-bottom:.35em}.legal ul{padding-left:1.15rem}.legal li{margin-bottom:.5em}
.legal .toc{list-style:none;padding:0;margin:0 0 2.5rem;display:flex;flex-wrap:wrap;gap:.5rem .6rem;max-width:none}.legal .toc li{margin:0}.legal .toc a{display:inline-block;font-family:var(--mono);font-size:.8rem;padding:.35rem .7rem;border:1.5px solid var(--border);border-radius:99px;background:var(--paper);color:var(--text);text-decoration:none}.legal .toc a:hover{border-color:var(--ink);color:var(--text)}
.legal .address{font-family:var(--mono);font-size:.95rem;background:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:var(--r);padding:1rem 1.2rem;display:inline-block}
.legal .langlist{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}.legal .langlist li{margin:0}.legal .langlist a{display:inline-block;padding:.6rem 1.1rem;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--text);text-decoration:none;font-weight:500;box-shadow:3px 3px 0 var(--ink)}.legal .langlist a:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.center-page{min-height:70vh;display:grid;place-items:center;text-align:center}.center-page p{margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.store:hover{transform:none}}

@media (min-width:60rem) and (max-width:72rem){.wire{margin:0 .4rem}.wire i{font-size:.62rem}}
/* query pages and section hubs (page.html) */
.crumbs{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-bottom:1.25rem;display:flex;flex-wrap:wrap;gap:.4rem}.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--text)}.crumbs i{font-style:normal;color:var(--border)}.crumbs span{color:var(--text)}
.legal .cards{margin-top:1.5rem}.legal .cards li{margin:0}.legal .cards h3{margin-top:0}.legal .cards a{text-decoration:none;color:var(--text)}.legal .cards a:hover{color:var(--accent)}
.related{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .6rem;max-width:none}.related li{margin:0}.related a{display:inline-block;font-family:var(--mono);font-size:.8rem;padding:.35rem .7rem;border:1.5px solid var(--border);border-radius:99px;background:var(--paper);color:var(--text);text-decoration:none}.related a:hover{border-color:var(--ink);color:var(--text)}
.legal .faq{margin-top:1rem}.legal .faq summary h3{margin:0}.legal .shots{margin-top:2rem}.legal .cta{margin:2.5rem 0 0}.legal .lead{font-size:clamp(1.1rem,2.2vw,1.3rem);color:var(--muted)}

/* language panel (dialog): columns on desktop, a sheet from the bottom on phones, search, two names per language */
.langs{border:1.5px solid var(--ink);border-radius:var(--r);padding:0;background:var(--paper);color:var(--text);width:min(60rem,calc(100vw - 2rem));box-shadow:6px 6px 0 var(--ink)}
.langs::backdrop{background:rgba(14,16,20,.45)}
.langs-head{display:flex;gap:.6rem;align-items:center;padding:1rem 1rem .6rem;margin:0;max-width:none}
.langs-head input{flex:1;min-width:0;font:inherit;padding:.6rem .8rem;border:1.5px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.langs-head button{font:inherit;font-size:1.3rem;line-height:1;width:2.4rem;height:2.4rem;flex:none;border:1.5px solid var(--border);border-radius:8px;background:var(--paper);color:var(--text);cursor:pointer}
.lang-grid{list-style:none;margin:0;padding:.4rem 1rem 1rem;max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.15rem;align-content:start;max-height:min(70vh,40rem);overflow:auto}
.lang-grid li{margin:0}.lang-grid a{display:block;padding:.45rem .6rem;border-radius:8px;text-decoration:none;color:var(--text);line-height:1.25}.lang-grid a:hover{background:var(--surface);color:var(--text)}
.lang-grid a[aria-current]{outline:1.5px solid var(--accent)}.lang-grid b{display:block;font-weight:600}.lang-grid small{display:block;color:var(--muted);font-size:.82rem}
@media (max-width:40rem){.langs{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none}.langs-head{padding-top:max(1rem,env(safe-area-inset-top))}.lang-grid{grid-template-columns:1fr 1fr;max-height:none;height:calc(100dvh - 4.6rem - max(1rem,env(safe-area-inset-top)));padding-bottom:max(1rem,env(safe-area-inset-bottom))}}

/* the app's drawn setup instructions on the battery pages (build.js → schematicBlock; ui/SchematicParts.kt and the instruction animations in the app):
   sizes are the app's dp; a step is 3000 ms + the 900 ms hold, its change 1000 ms in; the base styles are the last frame, which reduced motion shows still */
@property --hi{syntax:"<number>";inherits:true;initial-value:0}
@property --on{syntax:"<number>";inherits:true;initial-value:0}
@property --sel{syntax:"<number>";inherits:true;initial-value:0}
@property --cur{syntax:"<number>";inherits:true;initial-value:0}
.schematic{--sch-step:3900ms;--sch-n:3;--sch-loop:calc(var(--sch-n) * var(--sch-step));--sch-row:40px;--sch-outline:color-mix(in srgb,var(--muted) 70%,var(--paper));margin:1.25rem 0 2rem;padding:1rem;max-width:48rem;display:grid;gap:1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r)}
.schematic-xiaomi{--sch-n:4}
@media (min-width:48rem){.schematic{grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:start;gap:1.5rem;padding:1.25rem}}
.sch-screen{display:flex;flex-direction:column;gap:8px;min-width:0;width:100%;max-width:20rem;padding:12px;background:var(--paper);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:var(--sans)}
.sch-title{display:flex;align-items:center;gap:8px;min-width:0;font-size:16px;line-height:24px;font-weight:600}.sch-title span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sch-glyph{display:block;flex:none;width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .sch-back{transform:scaleX(-1)}
.sch-pages{display:grid}.sch-page{grid-area:1/1;display:flex;flex-direction:column;gap:8px;min-width:0}
.sch-rows{display:flex;flex-direction:column}.sch-s-choose{gap:8px}
.sch-row{display:flex;align-items:center;gap:8px;flex:none;height:var(--sch-row);padding:0 8px;border-radius:8px;border:2px solid color-mix(in srgb,var(--accent) calc(var(--hi,0) * 100%),var(--paper));background:color-mix(in srgb,var(--accent-soft) calc(var(--hi,0) * 100%),var(--paper))}
.sch-icon{display:block;flex:none;width:24px;height:24px;clip-path:circle(50%)}.sch-dot{border-radius:50%;background:var(--border)}
.sch-text{flex:1;min-width:0;font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sch-bar{display:block;width:60%;height:8px;border-radius:99px;background:var(--border)}
.sch-switch{display:block;flex:none;width:32px;height:18px;padding:1px;border-radius:99px;border:1px solid color-mix(in srgb,var(--accent) calc(var(--on,0) * 100%),var(--sch-outline));background:color-mix(in srgb,var(--accent) calc(var(--on,0) * 100%),var(--surface))}
.sch-switch b{display:block;width:14px;height:14px;border-radius:50%;margin-inline-start:calc(var(--on,0) * 14px);background:color-mix(in srgb,var(--paper) calc(var(--on,0) * 100%),var(--sch-outline))}
.sch-radio{--sel:0;display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) calc(var(--sel,0) * 100%),var(--sch-outline))}
.sch-radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);transform:scale(var(--sel,0))}
.sch-radio.sch-chosen-a{--sel:var(--on,0)}.sch-radio.sch-chosen-b{--sel:calc(1 - var(--on,0))}
.sch-filter{display:inline-flex;align-self:flex-start;align-items:center;gap:4px;height:26px;padding:0 8px;border-radius:99px;background:color-mix(in srgb,var(--accent-soft) calc(var(--hi,0) * 100%),var(--surface));font-size:12px;line-height:16px;font-weight:600}
.sch-labels{display:grid}.sch-labels>span{grid-area:1/1;white-space:nowrap}.sch-filter .sch-glyph{width:16px;height:16px}
.sch-list{position:relative}.sch-list .sch-rows{height:calc(3 * var(--sch-row))}
.sch-slot{flex:none;height:var(--sch-row);overflow:hidden}
.sch-menu{--on:1;position:absolute;top:0;inset-inline-start:0;display:flex;flex-direction:column;padding:4px 0;border-radius:8px;background:var(--surface);box-shadow:0 8px 20px -6px rgba(10,20,60,.4);opacity:0;pointer-events:none}
.sch-menu>span{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;font-size:12px;line-height:16px;white-space:nowrap;background:color-mix(in srgb,var(--accent-soft) calc(var(--sel,0) * 100%),var(--surface))}
.sch-menu .sch-glyph{width:16px;height:16px;stroke:var(--accent);opacity:var(--sel,0)}
.sch-m-all{--sel:var(--on,0)}.sch-m-not{--sel:calc(1 - var(--on,0))}
.schematic-steps{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:.4rem;align-content:start;counter-reset:sch}
.legal .schematic-steps li{--cur:0;counter-increment:sch;display:flex;gap:.7rem;align-items:flex-start;margin:0;padding:.55rem .7rem;border-radius:8px;font-size:.95rem;line-height:1.45;color:color-mix(in srgb,var(--text) calc(var(--cur,0) * 100%),var(--muted));background:color-mix(in srgb,var(--paper) calc(var(--cur,0) * 100%),transparent);border:1.5px solid color-mix(in srgb,var(--accent) calc(var(--cur,0) * 100%),transparent)}
.schematic-steps li::before{content:counter(sch);flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;margin-top:-.05rem;border-radius:50%;font-family:var(--mono);font-size:.78rem;color:var(--accent);border:1.5px solid color-mix(in srgb,var(--accent) calc(var(--cur,0) * 100%),var(--border));background:color-mix(in srgb,var(--accent-soft) calc(var(--cur,0) * 100%),transparent)}
/* the last frame: what each picture rests on */
.legal .schematic-steps li:last-child{--cur:1}
.sch-on{--on:1}
.sch-page-a{opacity:0}.sch-x-app{--hi:1;--on:1}.sch-x-choose{--on:1}.sch-x-choose .sch-opt{--hi:1}
.sch-h-tog,.sch-t-tog2{--hi:1;--on:1}.sch-t-tog1,.sch-s-choose{--on:1}
.sch-l-not{opacity:0}.sch-b-app{--hi:1}
/* the loop: every keyframe holds until the next (step-end); a switch slides for 300 ms */
.sch-screen *,.schematic-steps li{animation-duration:var(--sch-loop);animation-timing-function:step-end;animation-iteration-count:infinite}
.schematic-steps li{animation-name:sch-cur3}.schematic-xiaomi .schematic-steps li{animation-name:sch-cur4}
.schematic-steps li:nth-child(2){animation-delay:calc(var(--sch-step) - var(--sch-loop))}
.schematic-steps li:nth-child(3){animation-delay:calc(2 * var(--sch-step) - var(--sch-loop))}
.schematic-steps li:nth-child(4){animation-delay:calc(3 * var(--sch-step) - var(--sch-loop))}
.sch-page-a{animation-name:sch-x-page-a}.sch-page-b{animation-name:sch-x-page-b}.sch-x-app{animation-name:sch-x-app}.sch-x-choose{animation-name:sch-x-pick}.sch-x-choose .sch-opt{animation-name:sch-x-opt}
.sch-h-app{animation-name:sch-hi-c0-s2,sch-off-c1}.sch-h-tog,.sch-t-tog2{animation-name:sch-hi-s2,sch-on-c2}
.sch-t-app{animation-name:sch-hi-c0-s1}.sch-t-tog1{animation-name:sch-hi-s1-s2,sch-on-c1}
.sch-s-choose{animation-name:sch-pick-c1}.sch-s-choose .sch-opt{animation-name:sch-hi-s1-s2}
.schematic-battery .sch-filter{animation-name:sch-b-open}.sch-menu{animation-name:sch-b-menu}.sch-l-not{animation-name:sch-b-not}.sch-l-all{animation-name:sch-b-all}.sch-slot{animation-name:sch-b-slot}.sch-b-app{animation-name:sch-b-app}
/* the steps' text, highlighted for its step; li n is shifted by n − 1 steps */
@keyframes sch-cur3{0%{--cur:1}33.333%{--cur:0}100%{--cur:0}}
@keyframes sch-cur4{0%{--cur:1}25%{--cur:0}100%{--cur:0}}
/* three steps (11 700 ms): steps start at 0, 33.333 %, 66.667 %; changes at 8.547 %, 41.880 %, 75.214 %; 300 ms = 2.564 % */
@keyframes sch-hi-c0-s1{0%{--hi:0}8.547%{--hi:1}33.333%{--hi:0}100%{--hi:0}}
@keyframes sch-hi-c0-s2{0%{--hi:0}8.547%{--hi:1}66.667%{--hi:0}100%{--hi:0}}
@keyframes sch-hi-s1-s2{0%{--hi:0}33.333%{--hi:1}66.667%{--hi:0}100%{--hi:0}}
@keyframes sch-hi-s2{0%{--hi:0}66.667%{--hi:1}100%{--hi:1}}
@keyframes sch-on-c1{0%{--on:0}41.880%{--on:0;animation-timing-function:ease-in-out}44.444%{--on:1}100%{--on:1}}
@keyframes sch-off-c1{0%{--on:1}41.880%{--on:1;animation-timing-function:ease-in-out}44.444%{--on:0}100%{--on:0}}
@keyframes sch-on-c2{0%{--on:0}75.214%{--on:0;animation-timing-function:ease-in-out}77.778%{--on:1}100%{--on:1}}
@keyframes sch-pick-c1{0%{--on:0}41.880%{--on:1}100%{--on:1}}
/* the battery list (ui/BatteryInstruction.kt): menu opens 600 ms in (5.128 %), "All" ticked at 1300 ms (11.111 %), menu closes at 2000 ms (17.094 %);
   Resender found from step 2; its switch goes off 800 ms into step 3 (73.504 %) */
@keyframes sch-b-open{0%{--hi:0}5.128%{--hi:1}17.094%{--hi:0}100%{--hi:0}}
@keyframes sch-b-menu{0%{opacity:0;--on:0}5.128%{opacity:1;--on:0}11.111%{opacity:1;--on:1}17.094%{opacity:0;--on:1}100%{opacity:0;--on:1}}
@keyframes sch-b-not{0%{opacity:1}17.094%{opacity:0}100%{opacity:0}}
@keyframes sch-b-all{0%{opacity:0}17.094%{opacity:1}100%{opacity:1}}
@keyframes sch-b-slot{0%{height:0}11.111%{height:var(--sch-row)}100%{height:var(--sch-row)}}
@keyframes sch-b-app{0%{--hi:0;--on:1}33.333%{--hi:1;--on:1}73.504%{--hi:1;--on:1;animation-timing-function:ease-in-out}76.068%{--hi:1;--on:0}100%{--hi:1;--on:0}}
/* four steps (Xiaomi, 15 600 ms): steps start at 0, 25 %, 50 %, 75 %; changes at 6.410 %, 31.410 %, 56.410 %, 81.410 %; 300 ms = 1.923 % */
@keyframes sch-x-page-a{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
@keyframes sch-x-page-b{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
@keyframes sch-x-app{0%{--hi:0;--on:0}6.410%{--hi:1;--on:0}31.410%{--hi:1;--on:0;animation-timing-function:ease-in-out}33.333%{--hi:1;--on:1}100%{--hi:1;--on:1}}
@keyframes sch-x-opt{0%{--hi:0}75%{--hi:1}100%{--hi:1}}
@keyframes sch-x-pick{0%{--on:0}81.410%{--on:1}100%{--on:1}}
@media (prefers-reduced-motion:reduce){.sch-screen *,.schematic-steps li{animation:none!important}}