/* Subscribe (/subscribe) and privacy (/privacy) pages. Tokens only (base.css); motion: transform and opacity. */

/* ---------- Subscribe ---------- */
.sub { max-width: 980px; margin: 0 auto; display: grid; gap: var(--space-5); }
.sub-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.sub-hero > div { flex: 1 1 0; min-width: 0; }
.sub-title { margin-bottom: .2em; font-size: var(--fs-2xl); }
.sub-lead { max-width: 52ch; margin: 0; color: var(--text-muted); }
.sub-mascot { width: 72px; height: auto; }
.sub-soon-note { margin: 0; text-align: center; color: var(--text-muted); }
@media (min-width: 600px) { .sub-mascot { width: 104px; } }
.sub-perks { flex-basis: 100%; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sub-perks li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 2px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-family: var(--font-title);
    font-size: .95rem;
}
.sub-perks .icon { color: var(--link); }

.sub-plans { display: grid; gap: var(--space-4); padding-top: 12px; }
@media (min-width: 760px) {
    .sub-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
}
.sub-plan {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 28px 18px 22px;
    text-align: center;
    transition: transform .15s var(--ease-out);
    animation: sub-in .5s var(--ease-spring) backwards;
}
.sub-plan:nth-child(2) { animation-delay: .1s; }
.sub-plan:nth-child(3) { animation-delay: .2s; }
.sub-plan:hover { transform: translateY(-4px); }
.sub-plan.is-best {
    order: -1;
    background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), var(--surface);
}
@media (min-width: 760px) {
    .sub-plan.is-best { order: 0; padding-block: 40px 32px; }
}
.sub-ribbon {
    position: absolute;
    top: -16px;
    left: 50%;
    padding: 4px 18px;
    border: 2px solid var(--accent-edge);
    border-radius: var(--radius-pill);
    background: var(--amber);
    color: var(--navy);
    font-family: var(--font-title);
    font-size: 1.05rem;
    line-height: 1.4;
    box-shadow: 0 3px 0 var(--accent-edge);
    transform: translateX(-50%) rotate(-4deg);
    animation: sub-ribbon 2.6s ease-in-out 1s infinite;
}
@keyframes sub-ribbon {
    0%, 100% { transform: translateX(-50%) rotate(-4deg); }
    50% { transform: translateX(-50%) rotate(3deg) scale(1.06); }
}
.sub-plan-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 4px;
    border-radius: 18px;
    background: var(--primary-soft);
    color: var(--link);
    transform: rotate(-6deg);
}
.sub-plan.is-best .sub-plan-icon { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 0 var(--accent-edge); }
.sub-plan-name { margin: 0; font-size: var(--fs-lg); }
.sub-price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.sub-price strong { font-size: 3.2rem; line-height: 1.1; }
.sub-price span { color: var(--text-muted); font-weight: 500; }
.sub-plan.is-best .sub-price strong { color: var(--accent-text); }
.sub-price .sub-old { color: var(--text-muted); font-size: var(--fs-lg); font-weight: 600; text-decoration-thickness: 2px; }
.sub-yours { margin: 0; }
.sub-plan-note { margin: 0; max-width: 28ch; color: var(--text-muted); font-size: var(--fs-sm); }
@keyframes sub-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

.sub-steps-card { max-width: 720px; width: 100%; margin: 0 auto; }
.sub-steps { list-style: none; counter-reset: step; display: grid; gap: 16px; margin: 0 0 var(--space-4); padding: 0; }
.sub-steps li {
    position: relative;
    counter-increment: step;
    min-height: 44px;
    padding-inline-start: 58px;
    padding-top: 7px;
}
.sub-steps li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--font-title);
    font-size: 1.25rem;
    box-shadow: 0 3px 0 var(--primary-edge);
}
.sub-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50px;
    bottom: -12px;
    inset-inline-start: 20px;
    width: 4px;
    border-radius: 2px;
    background: repeating-linear-gradient(to bottom, var(--border-strong) 0 5px, transparent 5px 10px);
}
.sub-refund {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--success-soft);
    color: var(--success);
    font-weight: 500;
}
.sub-refund .icon { flex: none; }
.sub-actions { align-items: center; }
.sub-actions-note { flex-basis: 100%; margin: 0; }

/* ---------- Privacy ---------- */
.privacy { display: grid; gap: var(--space-3); }
.privacy-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); }
.privacy-head h1 { margin: 0; }
.privacy-head p { margin: 0; }
.privacy-badge {
    display: grid;
    place-items: center;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 4px 0 var(--primary-edge);
    transform: rotate(-5deg);
}
.privacy-block h2 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); }
.privacy-block h2::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--amber);
    transform: rotate(45deg);
}
.privacy-block li::marker { color: var(--primary); }
.privacy-key { border-color: color-mix(in srgb, var(--primary) 70%, var(--border)); box-shadow: var(--glow), 0 4px 0 var(--primary-edge); }
.sub-active {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    border: 2px solid var(--success-edge);
    border-radius: var(--radius);
    background: var(--success-soft);
    color: var(--text);
    font-weight: 500;
}
.sub-active .icon { flex: none; color: var(--success); }