/* PenFlow · концепт В · ТАРИФЫ */

.p-hero { position: relative; padding: clamp(48px, 8vw, 96px) 0 10px; text-align: center; overflow: hidden; }
.p-hero h1 { font-size: clamp(2.3rem, 5.4vw, 4.3rem); }
.p-hero .lead { margin-inline: auto; max-width: 52ch; }
.chips-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.term-row { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.term-row .hand { color: var(--muted); font-size: 1.3rem; }

/* стол с тетрадями */
.desk-plans { position: relative; padding: 24px 0 var(--sec-y); background:
  radial-gradient(900px 500px at 50% 60%, color-mix(in srgb, var(--desk) 70%, transparent), transparent 70%), var(--paper); }
.desk-plans::before { content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image: repeating-linear-gradient(97deg, transparent 0 22px, color-mix(in srgb, var(--desk-2) 55%, transparent) 22px 23px, transparent 23px 61px);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 60%, #000 30%, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 60%, #000 30%, transparent 75%); }
.desk-plans .wrap { position: relative; }

/* подбор тетради */
.picker { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: clamp(40px, 6vw, 64px); }
.picker .card { background: var(--stage); }
.picker-out { font: 600 1.6rem/1.25 var(--hand); color: var(--accent); }
.picker-out b { font-family: var(--script); font-weight: 400; font-size: 1.25em; }
.picker-out small { display: block; font: 500 14px/1.5 var(--font); color: var(--muted); margin-top: 6px; }
.nb .pick-ring { position: absolute; inset: -26px -22px calc(var(--thick) * -1px - 26px) -22px; pointer-events: none; z-index: 8; overflow: visible; width: calc(100% + 44px); height: calc(100% + 52px + var(--thick) * 1px); }
.nb .pick-ring path { fill: none; stroke: var(--stamp); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2200; stroke-dashoffset: 2200; transition: stroke-dashoffset 1.1s var(--ease-io); }
.nb.picked .pick-ring path { stroke-dashoffset: 0; }
.nb .pick-say { position: absolute; right: -10px; bottom: -58px; font: 700 1.45rem/1 var(--hand); color: var(--stamp); transform: rotate(-4deg); opacity: 0; transition: opacity .4s .8s; pointer-events: none; z-index: 8; }
.nb.picked .pick-say { opacity: 1; }
@media (max-width: 860px) { .picker { grid-template-columns: 1fr; } }

/* промокод */
.promo { max-width: 760px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-top: 30px; }
.promo .field { margin: 0; flex: 1 1 240px; }
.promo-msg { flex-basis: 100%; font-size: 14px; color: var(--muted); min-height: 1.5em; }

/* пакеты */
.packs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
@media (max-width: 960px) { .packs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .packs { grid-template-columns: 1fr; } }

/* сравнение */
.table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); margin-top: 30px; }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp-table th:first-child, .cmp-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--paper); z-index: 1; min-width: 190px; }
.cmp-table thead th { font-weight: 800; font-size: 16px; }
.cmp-table thead .col-best { color: var(--accent); }
.cmp-table tbody th { font-weight: 600; }
.cmp-table tbody tr:hover td, .cmp-table tbody tr:hover th { background: var(--accent-soft); }
.cmp-table .grp td { font: 700 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--stage); text-align: left; }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 0; }
.yes { display: inline-block; width: 24px; height: 24px; vertical-align: middle; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .5s var(--ease); }
.table-wrap.in .yes { stroke-dashoffset: 0; }
.table-wrap.in tr:nth-child(2n) .yes { transition-delay: .12s; } .table-wrap.in tr:nth-child(3n) .yes { transition-delay: .24s; }
.nope { color: var(--muted); }

/* как считаются страницы */
.count-demo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.sheets-demo { position: relative; height: 300px; perspective: 1200px; display: grid; place-items: center; }
.demo-sheet { position: absolute; width: 170px; height: 240px; border-radius: 4px; transform-style: preserve-3d; transition: transform .9s var(--ease-io); }
.demo-sheet .side { position: absolute; inset: 0; border-radius: 4px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-color: var(--sheet); box-shadow: var(--shadow-2); background-image: repeating-linear-gradient(transparent 0 19px, var(--rule) 19px 20px); background-position: 0 30px; display: grid; place-items: center; font: 400 3rem/1 var(--script); color: #2a44c8; }
.demo-sheet .side.b { transform: rotateY(180deg); }
.sheets-demo[data-mode="duplex"] .demo-sheet { transform: rotateY(180deg); }
.sheets-demo[data-mode="file"] .demo-sheet { transform: translateX(-46px) rotate(-6deg); }
.sheets-demo .file-ic { position: absolute; width: 120px; height: 150px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; transform: translate(80px, 30px) rotate(6deg) scale(.6); opacity: 0; transition: transform .7s var(--spring), opacity .4s; box-shadow: var(--shadow-2); }
.sheets-demo[data-mode="file"] .file-ic { opacity: 1; transform: translate(80px, 30px) rotate(6deg) scale(1); }
.counter-big { font: 800 4rem/1 var(--font); letter-spacing: -.04em; color: var(--accent); }
.count-out { margin-top: 26px; }
.count-out .hand { font-size: 1.6rem; color: var(--muted); }
.count-out .expl { display: block; color: var(--muted); }
@media (max-width: 760px) { .count-demo { grid-template-columns: 1fr; } }

/* сроки */
.timeline { display: grid; gap: 18px; margin-top: 36px; }
.tl h3 { font-size: 1.1rem; }
.tl p { margin: 6px 0 14px; color: var(--muted); font-size: 15px; }
.tl .track { position: relative; height: 34px; margin-top: 30px; }
.tl .base { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 4px; background: var(--line); }
.tl .seg { position: absolute; top: 12px; height: 10px; border-radius: 6px; transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.tl.in .seg { transform: scaleX(1); }
.tl .seg.later { transition-delay: .5s; }
.tl .seg.thin { top: 26px; height: 6px; }
.c-acc { background: var(--accent); } .c-muted { background: var(--muted); } .c-warn { background: var(--warn); } .c-acc2 { background: var(--accent-2); }
.w-0-70 { left: 0; width: 70%; } .w-70-100 { left: 70%; width: 30%; } .w-0-55 { left: 0; width: 55%; } .w-20-90 { left: 20%; width: 70%; } .w-0-50 { left: 0; width: 50%; } .w-50-100 { left: 50%; width: 50%; }
.tl .mark { position: absolute; top: -16px; font: 600 1.15rem/1 var(--hand); color: var(--ink); transform: translateX(-50%); white-space: nowrap; }
.tl .mark::after { content: ""; position: absolute; left: 50%; top: 20px; width: 2px; height: 22px; background: var(--ink); opacity: .4; }
.m-70 { left: 70%; } .m-55 { left: 55%; } .m-50 { left: 50%; }
.tl .legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); margin-top: 14px; }
.tl .legend i { display: inline-block; width: 12px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* финал тарифов */
.final-mini { text-align: center; padding: clamp(80px, 10vw, 130px) 0; background: radial-gradient(60% 70% at 50% 0%, rgba(255, 200, 120, .2), transparent 70%), #0b0f1c; color: #f2f4fb; }
.final-mini .lead { color: #aab1cc; margin-inline: auto; }
.final-mini .eyebrow { color: #a3b4ff; }
.final-mini .btn { --bg: #7f97ff; --fg: #0b0f1c; --blot: #a3b4ff; }
.final-mini .btn.ghost { --bg: transparent; --fg: #f2f4fb; --blot: #1e2a5c; box-shadow: inset 0 0 0 1.5px #273153; }
.nb-price del, .nb-cv .big del, .pack .p-price del {
  display: block; font-size: .5em; line-height: 1.4; opacity: .7; font-weight: 500; letter-spacing: normal;
}
.nb-price del { flex-basis: 100%; }