/* Витрина Рецептбук. Цвета, шрифты и формы берутся из tokens.css.
   Светлая и тёмная схемы переключаются автоматически (prefers-color-scheme). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--al-font-sans);font-size:17px;line-height:1.6;color:var(--al-ink);background:var(--al-bg);
  min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:880px;margin:0 auto;padding:0 16px}
a{color:var(--al-accent-text);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--al-accent-text);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--al-surface);color:var(--al-ink);padding:8px 14px;border-radius:var(--al-r-pill);z-index:10}
.skip:focus{left:16px}
header.site{padding:14px 0 6px}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.brand{font-family:var(--al-font-hand);font-weight:700;font-size:34px;line-height:1;color:var(--al-ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.brand img{width:32px;height:32px}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
nav.main a{display:inline-block;padding:8px 14px;border-radius:var(--al-r-pill);color:var(--al-ink-2);text-decoration:none;font-weight:500;font-size:16px}
nav.main a:hover{background:var(--al-accent-soft);color:var(--al-ink)}
nav.main a[aria-current="page"]{background:var(--al-accent-soft);color:var(--al-accent-text);font-weight:700}
main{flex:1;padding:18px 0 40px}
h1{font-size:clamp(28px,6vw,44px);line-height:1.15;margin:12px 0 14px;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(22px,4.4vw,28px);line-height:1.25;margin:34px 0 12px;font-weight:700}
h3{font-size:19px;margin:22px 0 8px}
p{margin:0 0 12px}
.lead{font-size:19px;color:var(--al-ink-2);max-width:42em}
.card{background:var(--al-surface);border-radius:var(--al-r-l);padding:22px;box-shadow:var(--al-shadow-1);border:1px solid var(--al-line)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.price b{font-family:var(--al-font-hand);font-size:64px;line-height:1;color:var(--al-accent-text)}
.price span{color:var(--al-ink-2)}
.btn{display:inline-block;background:var(--al-accent);color:var(--al-accent-ink);padding:13px 24px;border-radius:var(--al-r-pill);font-weight:700;text-decoration:none;box-shadow:0 6px 16px -8px var(--al-accent-glow)}
.btn:hover{filter:brightness(1.08)}
.hero{display:grid;gap:18px;margin-bottom:8px}
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding:14px 16px 14px 62px;background:var(--al-surface);border:1px solid var(--al-line);border-radius:var(--al-r-m)}
.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:34px;height:34px;border-radius:50%;background:var(--al-accent);color:var(--al-accent-ink);font-weight:800;display:grid;place-items:center}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.facts li{padding-left:28px;position:relative}
.facts li::before{content:"";position:absolute;left:4px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--al-accent-2)}
dl.req{display:grid;grid-template-columns:minmax(0,13rem) 1fr;margin:0}
dl.req dt,dl.req dd{margin:0;padding:10px 0;border-bottom:1px solid var(--al-line)}
dl.req dt{color:var(--al-ink-2);padding-right:14px}
dl.req dd{font-weight:500;overflow-wrap:anywhere}
@media(max-width:560px){dl.req{grid-template-columns:1fr}dl.req dt{border:0;padding-bottom:0}}
table{border-collapse:collapse;width:100%;margin:8px 0 16px;font-size:16px}
th,td{border:1px solid var(--al-line);padding:9px 11px;text-align:left;vertical-align:top}
th{background:var(--al-surface-2)}
.tablewrap{overflow-x:auto}
.doc h2{margin-top:28px}
.doc p{max-width:46em}
.meta{color:var(--al-ink-2);font-size:15px}
.ph{background:#ffe94d;color:#3d2e00;padding:0 .25em;border-radius:4px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
a .ph,a:has(.ph){color:inherit}
.note{background:var(--al-sun);color:var(--al-sun-ink);border-radius:var(--al-r-m);padding:12px 16px;margin:16px 0;font-size:16px}
.note .ph{background:#fff6a8}
footer.site{background:var(--al-surface);border-top:1px solid var(--al-line);padding:26px 0 30px;font-size:15px;color:var(--al-ink-2)}
footer.site .cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
footer.site h2{font-size:16px;margin:0 0 8px;color:var(--al-ink)}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pay{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 10px}
.pay img{width:72px;height:42px;display:block}
.nko{display:inline-block;padding:7px 12px;border:1px solid var(--al-line);border-radius:var(--al-r-s);background:var(--al-surface-2);color:var(--al-ink);font-weight:600;text-decoration:none}
/* Arctic AI: тарифы и вставки */
.tariffs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:12px 0}
.tariff{display:flex;flex-direction:column;gap:6px}
.tariff h3{margin:0;font-size:22px}
.tariff .price b{font-size:52px}
.tariff.pop{border:2px solid var(--al-accent);box-shadow:var(--al-shadow-1),0 0 0 4px var(--al-accent-soft)}
.badge{align-self:flex-start;background:var(--al-accent-soft);color:var(--al-accent-text);font-size:14px;font-weight:700;padding:2px 12px;border-radius:var(--al-r-pill)}
.lim{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;font-size:16px}
.lim li{padding-bottom:6px;border-bottom:1px solid var(--al-line)}
.lim li:last-child{border:0}
.lim b{font-weight:700}
.kinds{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:10px 0}
.kinds .card{padding:16px}
.kinds h3{margin:0 0 6px;font-size:18px}
.kinds p{margin:0;font-size:16px;color:var(--al-ink-2)}

/* Рецептбук */
.btn.alt{background:transparent;color:var(--al-accent-text);box-shadow:inset 0 0 0 2px var(--al-accent-text)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.brand small{font-family:var(--al-font-sans);font-size:13px;font-weight:500;color:var(--al-ink-2);margin-left:2px}
.cards3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:10px 0}
.cards3 h3{margin:0 0 6px;font-size:19px}
.cards3 p{margin:0;font-size:16px;color:var(--al-ink-2)}
.tariff.free{border-color:var(--al-accent-2)}
.tariff .price b{font-size:52px}
.tariff .lim{margin-top:2px}
.faq h3{margin:18px 0 4px;font-size:18px}
.faq p{max-width:46em}
.hero .card h2{font-family:var(--al-font-hand);font-size:34px;line-height:1.1}
@media(max-width:480px){.btn{display:block;text-align:center}.cta{display:grid}}