/* Hasp — сайт. Токены те же, что в приложении (app/Hasp/Theme/Theme.swift): цинк, воронёная
   табличка, латунь для ключа, эмаль только для «заперто». Шрифты — системные Apple: на iPhone
   это те же New York и SF, что в приложении; у остальных — достойные запасные. */
:root{
  --zinc:#DDDFD9; --card:#E8E9E4; --ink:#14171A; --muted:#5C6068; --hair:#B9BCB6;
  --plate:#151A21; --plate-text:#EDEEEA; --plate-muted:#9AA0A8;
  --brass:#9C7A45; --enamel:#B3261E;
  --serif: ui-serif, "New York", "Source Serif 4", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{ --zinc:#121517; --card:#1B1F24; --ink:#EDEEEA; --muted:#9AA0A8; --hair:#2A2E33;
         --plate:#0A0D12; --brass:#C8A66A; --enamel:#C3372E; color-scheme: dark; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zinc);color:var(--ink);font:17px/1.55 var(--sans)}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
.eyebrow{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(38px,6.4vw,64px);line-height:1.04}
h2{font-size:clamp(28px,3.6vw,38px);line-height:1.12}
h3{font-size:21px;line-height:1.2}
p{margin:0}
.muted{color:var(--muted)}

/* Шапка */
.nav{display:flex;align-items:center;gap:22px}
.nav a{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:10px 0}
.langs{position:relative}
.langs summary{list-style:none;cursor:pointer;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 0}
.langs summary::-webkit-details-marker{display:none}
.langs summary::after{content:" ▾";letter-spacing:0}
.langs ul{position:absolute;right:0;top:100%;z-index:5;list-style:none;margin:6px 0 0;padding:8px;min-width:210px;
  background:var(--card);border:1px solid var(--hair);border-radius:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.langs li a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:15px;letter-spacing:0;text-transform:none}
.langs li a:hover,.langs li a[aria-current]{background:var(--zinc)}
.langs-foot{flex-basis:100%;margin-top:6px;font-size:13px}
.langs-foot a{white-space:nowrap}
.top{display:flex;align-items:center;justify-content:space-between;padding-block:22px}
.brand{display:inline-flex;align-items:center;gap:10px;font:600 26px/1 var(--serif);text-decoration:none}
.icon{border-radius:22.5%;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 10px -4px rgba(0,0,0,.4)}
.icon.big{display:block;margin-bottom:16px}
.brand-s{display:inline-flex;align-items:center;gap:8px}

/* Фирменный знак — окно состояния из приложения: серое «открыто», и въезжает красная эмаль
   «заперто». Красный на сайте только здесь, как и в приложении: он значит «заперто». */
.bolt{position:relative;width:min(340px,100%);height:48px;border-radius:13px;background:#C9CCC6;overflow:hidden;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 2px 4px rgba(0,0,0,.18)}
.bolt-open{position:absolute;inset:0;display:flex;align-items:center;padding-left:16px;
      font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#5C6068}
.bolt-bar{position:absolute;inset:4px auto 4px 4px;width:calc(100% - 8px);border-radius:10px;background:var(--enamel);color:#fff;
      display:flex;align-items:center;gap:10px;padding-left:14px;font:600 15px/1 var(--mono);letter-spacing:.02em;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transform:translateX(-104%);animation:bolt .7s cubic-bezier(.2,.8,.2,1) .5s forwards}
.bolt-bar i{width:9px;height:9px;border-radius:50%;background:#fff;flex:none}
@keyframes bolt{to{transform:none}}
@media (prefers-reduced-motion: reduce){.bolt-bar{animation:none;transform:none}}
@media (prefers-color-scheme: dark){.bolt{background:#2A3038}.bolt-open{color:#9AA0A8}}
.lang{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:10px 0}

/* Первый экран */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-block:28px 72px}
.hero .lede{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:34ch;margin-top:20px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 24px;border-radius:18px;
     background:var(--plate);color:var(--plate-text);font:600 17px/1 var(--sans);text-decoration:none;
     border:1px solid rgba(255,255,255,.12)}
.btn[aria-disabled="true"]{cursor:default}
.btn .dot{width:8px;height:8px;border-radius:50%;background:var(--brass)}
.cta .note{font-size:14px;color:var(--muted);max-width:30ch}

/* Настоящий iPhone: снимок в корпусе iPhone 17 Pro, прозрачный фон */
.device{justify-self:center;display:block;width:min(340px,100%);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.28))}
.plate .device{width:min(280px,100%)}

/* Как это работает */
.section{padding-block:72px;border-top:1px solid var(--hair)}
.section-head{display:grid;gap:14px;max-width:40ch;margin-bottom:36px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0}
.step{display:grid;gap:12px;align-content:start}
.step .n{font:600 12px/1 var(--mono);color:var(--brass)}
.step p{color:var(--muted);font-size:16px}
.art{width:88px;height:88px}
.art .dark{display:none}
@media (prefers-color-scheme: dark){ .art .light{display:none} .art .dark{display:block} }
.art img{width:88px;height:88px}

/* Строгий режим — тёмная табличка, как в приложении */
.plate{background:var(--plate);color:var(--plate-text);border-radius:28px;padding:clamp(28px,5vw,56px);
       display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center;
       box-shadow:0 24px 48px -24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14)}
.plate .eyebrow{color:var(--plate-muted)}
.plate p{color:var(--plate-muted)}
.plate ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.plate li{display:grid;grid-template-columns:22px 1fr;gap:12px;color:var(--plate-text)}
.plate li::before{content:"";width:10px;height:10px;margin-top:8px;border-radius:2px;background:#C8A66A}

/* Честный предел */
.limit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.limit p{font-size:18px;color:var(--muted);max-width:52ch}

/* Бесплатно и навсегда */
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tier{background:var(--card);border:1px solid var(--hair);border-radius:22px;padding:26px}
.tier h3{margin-bottom:6px}
.tier .sub{font:500 13px/1.3 var(--mono);color:var(--muted);margin-bottom:16px}
.tier ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--ink)}
.tier.paid{background:var(--plate);color:var(--plate-text);border-color:transparent}
.tier.paid .sub{color:var(--plate-muted)} .tier.paid ul{color:var(--plate-text)}
.tier.paid li::marker{color:#C8A66A}

/* Приватность */
.privacy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.privacy h3{font-size:18px;margin-bottom:6px}
.privacy p{color:var(--muted);font-size:16px}

/* Статьи */
.guides{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.guides a{display:block;height:100%;background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:22px;text-decoration:none}
.guides a:hover{border-color:var(--brass)}
.guides h3{font-size:20px;margin-bottom:8px}
.guides p{color:var(--muted);font-size:15px}
.doc.wide{max-width:1040px}
.lede-doc{font-size:19px;color:var(--muted);margin:14px 0 32px;max-width:60ch}
.crumbs{margin-bottom:18px}.crumbs a{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);text-decoration:none}
.article .meta{font:500 13px var(--mono);color:var(--muted);margin:-8px 0 28px}
.doc.article p,.doc.article li{color:var(--ink);font-size:18px;line-height:1.65}
.article h2{font-size:26px;margin:40px 0 12px}
.article ul,.article ol{padding-left:22px;display:grid;gap:8px;margin:14px 0}
.article p+p{margin-top:16px}
.article strong{font-weight:600}
.endcap{margin-top:48px;background:var(--plate);color:var(--plate-text);border-radius:24px;padding:28px}
.endcap h2{margin:0 0 8px;font-size:24px}.endcap p{color:var(--plate-muted);font-size:16px}
.endcap .btn{background:#EDEEEA;color:#14171A}
.endcap .link{color:var(--plate-text);font-size:15px}
.more{margin-top:48px}.more h2{font-size:22px;margin:0 0 16px}

footer{border-top:1px solid var(--hair);padding-block:28px 48px;display:flex;flex-wrap:wrap;gap:12px 24px;
       font-size:14px;color:var(--muted)}
footer a{text-decoration:none} footer a:hover{text-decoration:underline}
footer .sp{flex:1}

/* Документы: политика, поддержка, метка */
.doc{max-width:680px;padding-block:24px 64px}
.doc h1{font-size:clamp(34px,5vw,48px);margin-bottom:20px}
.doc h2{font-size:22px;margin:34px 0 8px}
.doc p,.doc li{color:var(--muted)} .doc p+p{margin-top:12px}
.doc code{font:14px var(--mono)}

a:focus-visible,.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media (max-width:820px){
  .hero,.plate,.limit{grid-template-columns:1fr}
  .hero{gap:36px;padding-block:12px 56px}
  .steps,.privacy{grid-template-columns:1fr}
  .tiers,.guides{grid-template-columns:1fr}
  .device{width:min(300px,82%)}
  .section{padding-block:56px}
}

/* Японский без пробелов: заголовки переносим по смысловым фразам, а не посреди слова. */
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3{word-break:auto-phrase}