:root{
  --ground:#F4F2ED; --surface:#FFFFFF; --ink:#15202B; --muted:#56606B; --line:#E0DCD2;
  --accent:#1D4ED8; --accent-ink:#FFFFFF; --accent-soft:#E6EDFD; --hero:#15202B; --hero-ink:#F4F2ED; --hero-muted:#AEB8C4;
  --free-bg:#DCF2E6; --free-ink:#1F6B45; --paid-bg:#FDEBD8; --paid-ink:#8A4A0B; --zone-bg:#ECEAF6; --zone-ink:#3F3A7A;
  --display:'Fraunces', Georgia, 'Times New Roman', serif; --body:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme:dark;
    --ground:#11161C; --surface:#19202A; --ink:#E9E7E2; --muted:#9BA5B1; --line:#2A333E;
    --accent:#86A8FF; --accent-ink:#0E1420; --accent-soft:#1E2A45; --hero:#0B0F14; --hero-ink:#E9E7E2; --hero-muted:#8D97A3;
    --free-bg:#153526; --free-ink:#8BD9AE; --paid-bg:#3A2712; --paid-ink:#F2BE84; --zone-bg:#26243F; --zone-ink:#BEB8F2; }
}
:root[data-theme="dark"]{ color-scheme:dark;
  --ground:#11161C; --surface:#19202A; --ink:#E9E7E2; --muted:#9BA5B1; --line:#2A333E;
  --accent:#86A8FF; --accent-ink:#0E1420; --accent-soft:#1E2A45; --hero:#0B0F14; --hero-ink:#E9E7E2; --hero-muted:#8D97A3;
  --free-bg:#153526; --free-ink:#8BD9AE; --paid-bg:#3A2712; --paid-ink:#F2BE84; --zone-bg:#26243F; --zone-ink:#BEB8F2; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55}
[hidden]{display:none!important}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}
.wrap{max-width:1040px; margin-inline:auto; padding-inline:20px}
h1,h2,h3{text-wrap:balance; margin:0}
h2{font-family:var(--display); font-weight:600; font-size:clamp(24px,3.2vw,32px); line-height:1.15}

/* header */
.top{background:var(--hero); color:var(--hero-ink); position:sticky; top:env(safe-area-inset-top,0px); z-index:5}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.logo{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none}
.logo strong{font-family:var(--display); font-size:22px; display:block; line-height:1}
.logo small{display:block; color:var(--hero-muted); font-size:12px; margin-top:3px}
.logo-mark{width:34px; height:34px; border-radius:10px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:20px}
.lang{color:var(--hero-ink); font-size:14px; font-weight:500; padding:8px 12px; border:1px solid rgba(255,255,255,.25); border-radius:999px; text-decoration:none; min-height:40px; display:inline-flex; align-items:center}
.lang:hover{background:rgba(255,255,255,.08)}

/* hero */
.hero{background:var(--hero); color:var(--hero-ink); padding-block:40px 48px}
.hero h1{font-family:var(--display); font-weight:600; font-size:clamp(34px,6vw,62px); line-height:1.05; letter-spacing:-.01em; max-width:14ch}
.search{margin-top:26px; display:flex; align-items:center; gap:12px; background:var(--surface); color:var(--ink); border-radius:16px; padding:0 18px; height:62px; max-width:680px; border:2px solid transparent}
.search:focus-within{border-color:var(--accent)}
.search svg{flex-shrink:0; color:var(--muted)}
.search input{border:0; outline:0; background:transparent; font:inherit; font-size:18px; color:var(--ink); flex:1; min-width:0; height:100%}
.want{margin-top:22px; display:flex; flex-direction:column; gap:10px}
.want > span{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--hero-muted); font-weight:700}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:inherit; font-size:14px; font-weight:500; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:transparent; color:var(--hero-ink); cursor:pointer}
.chip:hover{background:rgba(255,255,255,.08)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}

/* list */
.list{padding-block:40px 8px}
.list-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; margin-bottom:18px}
.list-head p{margin:0; color:var(--muted); font-size:14px}
.ver{color:var(--free-ink); font-weight:500}
.groups{columns:2 320px; column-gap:28px}
.grp{break-inside:avoid; margin-bottom:26px}
.grp h3{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; padding-bottom:8px; border-bottom:1px solid var(--line)}
.grp ul{list-style:none; margin:0; padding:0}
.grp li a{display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; min-height:48px}
.grp li a:hover .li-name{color:var(--accent)}
.li-name{font-weight:500}
.li-num{font-family:var(--mono); font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.mono-badge{display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--accent-soft); color:var(--accent); font-family:var(--display); font-weight:700; font-size:24px; flex-shrink:0}
.mono-badge.sm{width:30px; height:30px; border-radius:8px; font-size:14px}
.empty{color:var(--muted); padding:12px 0}

/* how */
.how{padding-block:32px 16px}
.how ol{list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; counter-reset:s}
.how li{counter-increment:s; display:flex; flex-direction:column; gap:4px; padding-top:14px; border-top:2px solid var(--ink)}
.how li::before{content:counter(s); font-family:var(--mono); font-size:13px; color:var(--muted)}
.how strong{font-family:var(--display); font-size:21px; font-weight:600}
.how span{color:var(--muted)}

/* app */
.app{margin-block:40px; background:var(--accent); color:var(--accent-ink); border-radius:24px; padding:32px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; overflow:hidden}
.app h2{color:inherit}
.app p{margin:10px 0 0; max-width:48ch; opacity:.92}
.stores{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.store{display:inline-flex; flex-direction:column; padding:9px 16px; border-radius:12px; background:var(--accent-ink); color:var(--accent); font-weight:700; font-size:15px; line-height:1.2}
.store small{font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.75}
.phone{width:150px; height:250px; border-radius:26px; background:var(--hero); padding:9px; box-shadow:0 20px 40px rgba(0,0,0,.25); transform:rotate(4deg); margin-bottom:-60px}
.phone-screen{height:100%; border-radius:19px; background:#F4F2ED; padding:22px 12px; display:flex; flex-direction:column; gap:8px}
.ps-logo{font-family:var(--display); font-weight:700; color:#1D4ED8; font-size:14px}
.ps-q{font-family:var(--display); font-size:13px; line-height:1.15; color:#15202B}
.ps-search{height:20px; border-radius:6px; border:1.5px solid #1D4ED8; background:#fff}
.ps-row{height:22px; border-radius:6px; background:#fff; border:1px solid #E0DCD2}
.ps-row.short{width:70%}

/* company page */
.page{padding-block:24px 8px}
.crumb{font-size:14px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap}
.crumb a{color:var(--muted)}
.co-head{display:flex; align-items:center; gap:16px; margin-top:18px}
.co-head h1{font-family:var(--display); font-weight:600; font-size:clamp(30px,5vw,46px); line-height:1.05}
.meta{margin:6px 0 0; color:var(--muted); font-size:14px}
.contacts{margin-top:26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
.ct{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px; min-width:0}
.ct h3{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
.num-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px}
.num{font-family:var(--mono); font-size:22px; font-weight:500; letter-spacing:.01em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.num.mail{font-size:16px}
.sub{width:100%; font-size:13px; color:var(--muted)}
.note{width:100%; font-size:13px; color:var(--muted)}
.muted-ct .note{font-size:15px}
.tag{font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px}
.tag-free{background:var(--free-bg); color:var(--free-ink)}
.tag-paid{background:var(--paid-bg); color:var(--paid-ink)}
.tag-zone{background:var(--zone-bg); color:var(--zone-ink)}
.btn-copy{font:inherit; font-size:13px; font-weight:500; min-height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer}
.btn-copy:hover{border-color:var(--accent); color:var(--accent)}
.btn-copy.ok,.btn-main.ok{background:var(--free-bg); color:var(--free-ink); border-color:transparent}
.btn-out{align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:12px; background:var(--accent); color:var(--accent-ink); font-weight:700; text-decoration:none}
.url{font-size:12px; color:var(--muted); overflow-wrap:anywhere}
.addr{margin:0; font-size:15px}
.src{font-size:13px; color:var(--muted); margin:12px 0 0}
.letters{margin-top:40px}
.lead{color:var(--muted); max-width:65ch; margin:8px 0 16px}
.letter{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:0 18px; margin-bottom:12px}
.letter summary{cursor:pointer; font-weight:700; padding:16px 0; min-height:44px; list-style-position:outside}
.letter-body{white-space:pre-wrap; font-family:var(--body); font-size:15px; line-height:1.6; margin:0 0 14px; padding:18px; background:var(--ground); border-radius:10px; max-width:70ch; overflow-wrap:anywhere}
.btn-main{font:inherit; font-weight:700; min-height:44px; padding:0 18px; border-radius:12px; border:0; background:var(--ink); color:var(--ground); cursor:pointer; margin-bottom:18px}
.med{margin-top:28px; padding:18px 20px; border-radius:16px; border:1px dashed var(--muted)}
.med h2{font-size:20px}
.med p{margin:6px 0 0}

/* footer */
.foot{border-top:1px solid var(--line); padding-block:24px 36px; color:var(--muted); font-size:14px}
.foot p{margin:0 0 6px; max-width:75ch}
.foot .small{font-size:12px}

@media (max-width:640px){
  .app{grid-template-columns:1fr; padding:24px}
  .phone{display:none}
  .hero{padding-block:28px 36px}
  .search{height:56px}
  .num{font-size:20px}
}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto!important} }