/* ==========================================================================
   seo.css — SEO-страницы: каталог, страна, устройства
   ========================================================================== */
.page-head.narrow{ max-width: 760px; }
.page-head .lead{ color: var(--muted); font-size: var(--fs-lg); line-height: 1.6; max-width: 62ch; margin-top: var(--sp-2); }
.seo-h2{ font-size: 1.15rem; font-weight: 700; margin: var(--sp-4) 0 var(--sp-2); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.seo-text{ max-width: 760px; margin: var(--sp-5) auto var(--sp-6); }
.seo-text h2, .seo-block h2{ font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--sp-2); }
.seo-text p{ color: var(--muted); line-height: 1.7; margin-bottom: var(--sp-2); }
.seo-text a, .seo-block p a, .seo-block .small a, .tips a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.seo-block{ margin: var(--sp-5) 0; max-width: 960px; }
.seo-block p{ color: var(--muted); line-height: 1.7; }
.muted.small, .small{ font-size: .85rem; }

.plans-table{ width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.plans-table th{ text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-dim); padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.plans-table td{ padding: .75rem 1rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.plans-table tr:last-child td{ border: 0; }
.plans-table td.muted{ color: var(--muted); }

.tips{ list-style: none; display: grid; gap: .8rem; }
.tips li{ position: relative; padding-left: 1.6rem; color: var(--muted); line-height: 1.65; }
.tips li::before{ content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.tips li b{ color: var(--text); font-weight: 600; }

.steps-3{ display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); }
@media (min-width: 760px){ .steps-3{ grid-template-columns: repeat(3, 1fr); } }
.step-card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3); }
.step-card .num{ font-family: var(--font-mono); color: var(--accent); font-size: .85rem; font-weight: 600; }
.step-card h3{ font-size: 1.05rem; font-weight: 700; margin: .5rem 0 .4rem; }
.step-card p{ font-size: .92rem; }

/* проверка телефона */
.check-card{ display: grid; grid-template-columns: 1fr; gap: var(--sp-3); align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3); margin: var(--sp-4) 0; }
@media (min-width: 760px){ .check-card{ grid-template-columns: 260px 1fr; } }
.check-card h2{ font-size: 1.15rem; font-weight: 700; margin-bottom: var(--sp-2); }
.check-phone{ background: var(--well); border: 6px solid var(--border); border-radius: 34px; padding: 1.6rem 1rem; aspect-ratio: 9/14; display: flex; align-items: center; justify-content: center; max-width: 240px; margin: 0 auto; }
.check-screen{ width: 100%; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.check-screen .dial{ display: block; text-align: center; font-size: 1.6rem; color: var(--text); font-weight: 600; margin-bottom: 1.2rem; }
.check-screen .line{ padding: .5rem .6rem; border-top: 1px solid var(--border-soft); word-break: break-all; }
.check-screen .line.ok{ color: var(--accent); }

/* подбор тарифа: одна карточка — слева вопросы, справа ответ и сравнение с роумингом */
.picker{ display: grid; grid-template-columns: 1fr; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 900px){ .picker{ grid-template-columns: 1.1fr .9fr; } }
.picker-in{ padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.picker-in h2{ margin: 0; }
.picker-q{ display: flex; flex-direction: column; gap: .6rem; }
.picker-lbl{ font-size: .82rem; color: var(--muted); }
.picker-q .chip-row{ display: flex; flex-wrap: wrap; gap: .45rem; }
.picker-q .chip{ min-width: 3rem; justify-content: center; font-family: var(--font-mono); }
.use-tiles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.use-tile{ text-align: left; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: .8rem .8rem .7rem; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: .2rem; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.use-tile:hover{ border-color: var(--border); }
.use-tile.is-active{ border-color: var(--muted); background: var(--surface-2); }
.use-tile b{ font-size: .88rem; line-height: 1.2; }
.use-tile small{ font-size: .72rem; color: var(--muted); line-height: 1.3; }
.use-ic{ width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); margin-bottom: .35rem; }
.use-tile.is-active .use-ic{ color: var(--text); background: var(--surface-3); }
.use-ic svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.picker-out{ padding: var(--sp-4); background: var(--surface-1); border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 900px){ .picker-out{ border-top: 0; border-left: 1px solid var(--border-soft); } }
.tool-big{ font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.tool-big b{ color: var(--accent); font-family: var(--font-mono); }
.picker-reco{ font-size: .95rem; color: var(--muted); line-height: 1.5; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--sp-2); }
.picker-reco b{ color: var(--text); } .picker-reco .btn{ margin-top: .7rem; }
.vsbars{ display: grid; gap: .8rem; }
.vsbar{ display: grid; grid-template-columns: 1fr; gap: .3rem; }
.vsbar-lbl{ font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; } .vsbar-lbl small{ color: var(--muted-dim); }
.vsbar-track{ height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vsbar-track i{ display: block; height: 100%; border-radius: 999px; background: var(--muted-dim); transition: width .4s var(--ease); }
.vsbar.is-win .vsbar-track i{ background: var(--accent); }
.vsbar-val{ font-family: var(--font-mono); font-weight: 700; font-size: .95rem; } .vsbar-val small{ color: var(--muted-dim); font-weight: 500; }
.vsbar.is-win .vsbar-val{ color: var(--accent); }
.hint{ display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border); color: var(--muted-dim); font-style: normal; font-size: .65rem; cursor: help; }
.tool-saving{ margin: 0; font-weight: 600; color: var(--text) !important; }
.tool-saving b{ color: var(--accent); }
@media (max-width: 560px){ .use-tiles{ grid-template-columns: 1fr; } .use-tile{ flex-direction: row; align-items: center; gap: .7rem; } .use-tile .use-ic{ margin: 0; } .use-tile b{ display: block; } .use-tile small{ display: block; } .use-tile > b, .use-tile > small{ flex: 1 1 100%; } }

/* отзывы */
.rating-badge{ font-size: .85rem; font-weight: 600; color: #F5B942; background: rgba(245,185,66,.12); border: 1px solid rgba(245,185,66,.35); border-radius: 999px; padding: .2em .7em; vertical-align: middle; margin-left: .4rem; }
.reviews-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 760px){ .reviews-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .reviews-grid{ grid-template-columns: repeat(3, 1fr); } }
.review-card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3); display: flex; flex-direction: column; gap: .6rem; }
.review-stars span{ color: var(--muted-dim); font-size: 1rem; }
.review-stars span.on{ color: #F5B942; }
.review-card p{ color: var(--text) !important; line-height: 1.6; font-size: .95rem; flex: 1; }
.review-card footer{ font-size: .85rem; }

/* блог */
.post-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-6); }
@media (min-width: 720px){ .post-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px){ .post-grid{ grid-template-columns: repeat(3, 1fr); } }
.post-card{ display: flex; flex-direction: column; gap: .5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3); color: var(--text); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.post-card:hover{ border-color: var(--muted); transform: translateY(-2px); }
.post-card__top{ display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--muted-dim); font-family: var(--font-mono); }
.post-card__flag{ font-size: 1.1rem; }
.post-card h3{ font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.post-card p{ color: var(--muted); font-size: .9rem; line-height: 1.5; flex: 1; }
.post-card__more{ font-size: .85rem; font-weight: 600; color: var(--accent); }
.post{ max-width: 760px; margin: 0 auto; }
.post-head{ margin: var(--sp-2) 0 var(--sp-3); }
.post-head h1{ font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; margin: .5rem 0 .8rem; }
.post-lead{ color: var(--muted); font-size: 1rem; line-height: 1.55; }
.post-toc{ display: flex; flex-direction: column; gap: .25rem; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); font-size: .92rem; }
.post-toc b{ color: var(--muted-dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .2rem; }
.post-toc a{ color: var(--text); }
.post-body{ font-size: 1rem; line-height: 1.6; color: var(--text); opacity: .88; }
.post-body h2{ font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin: 1.9rem 0 .6rem; color: var(--text); scroll-margin-top: calc(var(--header-h) + 12px); }
.post-body h3{ font-size: 1.08rem; font-weight: 700; margin: 1.3rem 0 .4rem; color: var(--text); }
.post-body p, .post-body ul, .post-body ol{ margin-bottom: .85rem; color: inherit; }
.post-body li{ margin-bottom: .25rem; } .post-body ul, .post-body ol{ padding-left: 1.4rem; }
.post-body strong{ color: var(--text); }
.post-body a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body table{ width: 100%; border-collapse: collapse; margin: var(--sp-2) 0 var(--sp-3); font-size: .92rem; }
.post-body th, .post-body td{ text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border-soft); color: var(--muted); }
.post-body th{ color: var(--muted-dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.post-body blockquote{ border-left: 3px solid var(--accent); padding: .3rem 0 .3rem 1rem; margin: var(--sp-2) 0; color: var(--text); }
.post-body code{ font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: .1em .4em; border-radius: 6px; }
.post-cta{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; background: var(--accent-dim); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); margin: var(--sp-5) 0 var(--sp-3); }
.post-cta h3{ font-size: 1.15rem; font-weight: 800; margin: .3rem 0 .4rem; } .post-cta p{ color: var(--muted); }
.post-updated{ margin-bottom: var(--sp-5); }

/* «что вы получите кроме интернета» */
.get-grid{ display: grid; grid-template-columns: 1fr; gap: .7rem; margin-top: var(--sp-2); }
@media (min-width: 640px){ .get-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px){ .get-grid{ grid-template-columns: repeat(4, 1fr); } }
.get-card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3); display: flex; flex-direction: column; gap: .4rem; }
.get-card--accent{ border-color: var(--accent-line); background: var(--accent-dim); }
.get-card b{ font-size: 1rem; line-height: 1.25; } .get-card p{ color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0; }
.get-ic{ width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); margin-bottom: .3rem; }
.get-ic svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.get-link{ font-size: .85rem; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: auto; }

/* карточка страны под текстом: вариант 1 «паспорт» и вариант 2 «роуминг vs eSIM» */
.dest-pass,.dest-save{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg,20px);padding:1.1rem 1.2rem;margin-top:1.4rem}
.dp-head,.ds-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.dp-head .fi,.ds-head .fi{width:40px;height:30px;border-radius:6px;object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--border)}
.dp-head b,.ds-head b{display:block;font-size:1.02rem;font-weight:800;color:var(--text)}
.dp-head span,.ds-head span{display:block;font-size:.82rem;color:var(--muted)}
.dp-head code{margin-left:auto;font-family:var(--font-mono);font-size:.78rem;color:var(--muted-dim);background:var(--well);border-radius:8px;padding:.25rem .5rem}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.dp-cell{background:var(--well);border-radius:14px;padding:.85rem .9rem;display:flex;flex-direction:column;gap:.25rem}
.dp-cell svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.15rem}
.dp-cell small{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-dim);font-family:var(--font-mono)}
.dp-cell b{font-size:.88rem;font-weight:600;color:var(--text);line-height:1.35}
@media (max-width:480px){.dp-grid{grid-template-columns:1fr}}
.ds-row{margin-top:.8rem}
.ds-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;font-size:.9rem;color:var(--muted)}
.ds-lbl b{color:var(--text);font-weight:700;white-space:nowrap}
.ds-bar{height:10px;border-radius:999px;background:var(--well);margin:.4rem 0 .3rem;overflow:hidden}
.ds-bar i{display:block;height:100%;border-radius:999px;background:var(--muted-dim);opacity:.55}
.ds-row.is-esim .ds-bar i{background:var(--accent-btn,var(--accent));opacity:1}
.ds-row.is-esim .ds-lbl span{color:var(--text)}
.ds-row small{font-size:.76rem;color:var(--muted-dim)}
.ds-total{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--border);font-size:.9rem;color:var(--muted)}
.ds-total b{font-size:1.3rem;font-weight:800;color:var(--accent)}

/* калькулятор дохода партнёра */
.pcalc{ display: flex; flex-direction: column; gap: var(--sp-3); }
.pcalc h2{ margin: 0; }
.pcalc .picker-q .chip-row{ margin: 0; }
.pcalc .picker-q .chip{ font-family: var(--font-mono); font-size: .84rem; padding: .5em .9em; }
.pcalc-out{ background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.pcalc-main .tool-big{ margin: .15rem 0 .1rem; }
.pcalc-year{ font-size: .88rem; color: var(--muted); } .pcalc-year b{ color: var(--text); }
.pcalc-flow{ display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; }
.pf-step{ flex: 1; min-width: 110px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .65rem .8rem; }
.pf-step small{ display: block; font-size: .7rem; color: var(--muted-dim); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); margin-bottom: .2rem; }
.pf-step b{ font-size: 1.05rem; font-weight: 700; }
.pf-step:last-child b{ color: var(--accent); }
.pf-arw{ align-self: center; color: var(--muted-dim); }
.pcalc-note{ margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.5; } .pcalc-note b{ color: var(--text); }
@media (max-width: 520px){ .pf-arw{ display: none; } .pf-step{ min-width: calc(50% - .5rem); } }

.tools-block{ max-width: none; }
.tools-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-3); align-items: start; }
@media (min-width: 900px){ .tools-grid{ grid-template-columns: 1.1fr .9fr; } }
.tool-card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); }
.tool-card h2{ margin: 0 0 .2rem; }
.tool-card .tips{ margin: 0; }
.pcalc .tool-big b{ font-family: var(--font-sans, inherit); letter-spacing: -.02em; }