/* subscribe-cosmic.css — Mazmazika Pro pricing page on the cosmic shell.
   Tokens (--ink/--sub/--accent/--surface/--line/--cta/--accent2/--accent-ink)
   come from the cosmic theme (cosmic-shell.js applyVars + cosmic-shell.css), so
   the page follows the rail/tweaks theme automatically (light & dark). */

/* The .cosmic-shell-content.cosmic-tool wrapper already provides the shared
   1080px centered frame (identical top bar / hero position on every cosmic page),
   so .sub-main must NOT impose its own width/padding or it would double-frame. */
.sub-main { max-width: none; margin: 0; padding: 0; }

/* ── banners / status ─────────────────────────────────────────────────────── */
.sub-banner, .sub-status {
  display: flex; align-items: center; gap: 10px; margin: 0 auto 16px; max-width: 760px;
  border-radius: 13px; padding: 13px 18px; font-size: 14px; line-height: 1.45;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--ink);
}
.sub-banner span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; flex-shrink: 0; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.sub-banner.ok   { border-color: color-mix(in srgb,#10b981 50%,var(--line)); background: color-mix(in srgb,#10b981 12%,transparent); }
.sub-banner.ok span { background:#10b981; color:#fff; }
.sub-banner.err  { border-color: color-mix(in srgb,#ef4444 50%,var(--line)); background: color-mix(in srgb,#ef4444 12%,transparent); }
.sub-banner.err span { background:#ef4444; color:#fff; }
.sub-banner.warn { border-color: color-mix(in srgb,#f59e0b 50%,var(--line)); background: color-mix(in srgb,#f59e0b 12%,transparent); }
.sub-banner.warn span { background:#f59e0b; color:#1a1206; }
.sub-status { justify-content: center; font-weight: 500; }
.sub-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); }
.sub-status strong { color: var(--ink); }

/* Calm test-mode note — informational, deliberately NOT a warning. */
.sub-testmode {
  margin: 22px auto 0; max-width: 640px; text-align: center;
  font-size: 12.5px; font-style: italic; line-height: 1.5;
  color: color-mix(in srgb, var(--sub) 80%, transparent);
}

/* ── coupon box ───────────────────────────────────────────────────────────── */
.sub-coupon { max-width: 480px; margin: 0 auto 20px; }
.sub-coupon-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-radius: 13px; padding: 8px 10px 8px 14px; color: var(--sub);
}
.sub-coupon-row svg { flex-shrink: 0; color: var(--accent); }
.sub-coupon-row input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--ink); font: inherit; font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase;
}
.sub-coupon-row input::placeholder { color: var(--sub); text-transform: none; letter-spacing: 0; }
.sub-coupon-row input:disabled { opacity: .85; font-weight: 700; }
.sub-coupon-btn {
  flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink);
  border-radius: 9px; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.sub-coupon-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.sub-coupon-btn:disabled { opacity: .6; cursor: default; }
.sub-coupon-msg { margin-top: 8px; font-size: 13px; line-height: 1.5; text-align: center; }
.sub-coupon-msg.ok  { color: #10b981; }
.sub-coupon-msg.err { color: #ef4444; }

/* Per-card discount preview (injected by js/subscribe.js when a coupon applies) */
.sub-coupon-deal {
  margin: -4px 0 8px; font-size: 13.5px; color: var(--ink);
  line-height: 1.9; /* chips need air between rows when they wrap on narrow cards */
}
.sub-coupon-deal s { color: var(--sub); margin-right: 4px; }
.sub-coupon-deal strong { font-size: 16px; font-weight: 800; color: var(--ink); }
.sub-coupon-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: #10b981; border: 1px solid color-mix(in srgb, #10b981 45%, transparent);
  background: color-mix(in srgb, #10b981 12%, transparent);
}
.sub-btn-nocoupon { opacity: .45; cursor: not-allowed; }

/* ── Rooted page promo (the admin's auto-apply coupon) ────────────────────── */
.sub-promo-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  /* bottom margin must clear the yearly card's badge, which floats 13px ABOVE
     its card (top:-13px) — collapsed with .sub-plans' 10px this yields ~23px
     of real daylight between the banner edge and the badge */
  margin: 18px 0 36px; padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #ffb300 45%, transparent);
  background:
    linear-gradient(105deg,
      color-mix(in srgb, #ffb300 16%, transparent),
      color-mix(in srgb, #ff6f61 10%, transparent) 45%,
      color-mix(in srgb, #ffb300 14%, transparent));
}
.sub-promo-banner::after { /* shimmer sweep */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: subPromoShine 3.2s ease-in-out .4s 3;
}
@keyframes subPromoShine { to { transform: translateX(100%); } }
.sub-promo-burst { font-size: 30px; line-height: 1; animation: subPromoPop 1s ease 1; }
@keyframes subPromoPop {
  0% { transform: scale(.4) rotate(-20deg); }
  55% { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1); }
}
.sub-promo-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sub-promo-copy strong { font-size: 14.5px; color: var(--ink); letter-spacing: .02em; }
.sub-promo-copy span {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--sub);
}
.sub-promo-copy em { font-style: normal; opacity: .9; }
.sub-promo-chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-weight: 800; font-size: 11.5px; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, #ffb300 55%, transparent);
  background: color-mix(in srgb, #ffb300 20%, transparent);
  animation: subPromoPulse 2.4s ease-in-out infinite;
}
@keyframes subPromoPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #ffb300 40%, transparent); }
  55% { box-shadow: 0 0 0 6px transparent; }
}
/* card-level promo chip on the deal line (sibling of .sub-coupon-tag) */
.sub-promo-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, #ffb300 55%, transparent);
  background: color-mix(in srgb, #ffb300 18%, transparent);
}
.sub-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sub-confetti i {
  position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; opacity: 0;
  animation-name: subConfettiFall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
/* pieces die out BEFORE reaching the banner's clipped bottom edge — a piece
   cut mid-fall by overflow:hidden reads as a stray red smear, not confetti */
@keyframes subConfettiFall {
  0% { opacity: 0; transform: translateY(-12px) rotate(0deg); }
  10% { opacity: 1; }
  65% { opacity: .9; }
  100% { opacity: 0; transform: translateY(84px) rotate(300deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sub-promo-banner::after, .sub-promo-burst, .sub-promo-chip, .sub-confetti i { animation: none; }
}
@media (max-width: 700px) {
  .sub-promo-banner { padding: 12px 14px; gap: 10px; }
  .sub-promo-burst { font-size: 24px; }
}

/* ── plans grid ───────────────────────────────────────────────────────────── */
/* FOUR tiers (Free · Pro Daily · Pro Monthly · Pro Yearly) inside the shared
   1080px cosmic frame. The 4-up row is a touch tighter than the old 3-up one —
   padding, price size and feature text step down with it in the desktop query
   below, so the cards stay readable instead of just narrower. */
.sub-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-top: 10px; }
.sub-plan {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px 24px;
  box-shadow: 0 18px 48px -30px rgba(0,0,0,.7);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Micro-interaction: gentle lift + shadow bloom on hover (kept subtle). */
.sub-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.8);
}
.sub-plan.pro { border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.sub-plan.pro:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* Featured (Pro Yearly): premium glow + straddling badge only (no ribbon bar,
   no scale/offset) — the three cards stay symmetric. */
.sub-plan.feat {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: 0 26px 70px -34px color-mix(in srgb, var(--accent) 65%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent) inset;
}
.sub-plan.feat:hover {
  box-shadow: 0 34px 80px -34px color-mix(in srgb, var(--accent) 75%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) inset;
}
@media (prefers-reduced-motion: reduce) {
  .sub-plan, .sub-btn { transition: none; }
  .sub-plan:hover { transform: none; }
}

/* Smart discount badge — pill straddling the top edge, premium gradient,
   scales for 2–3 digit values.
   It must WRAP, never overflow: js/subscribe.js swaps the short server label for
   "Save X% compared to Monthly" whenever an offer is live, and a translation of
   that runs 350px+ ("ΕΞΟΙΚΟΝΟΜΗΣΕ 50% ΣΕ ΣΥΓΚΡΙΣΗ ΜΕ ΤΟ ΜΗΝΙΑΙΟ"). With the old
   `nowrap` it spilled out of the card and pushed the whole document sideways on
   a 390px phone in Greek and Finnish. */
.sub-plan-badge {
  /* left+right+auto margins, NOT left:50% — an absolutely positioned box gets
     shrink-to-fit width out of the space that remains to its right, so with
     left:50% the pill could never be wider than half a card and wrapped into a
     5-line block. Anchored by its BOTTOM edge so extra lines grow up into the
     gap above the card instead of down over the plan name. */
  position: absolute; bottom: calc(100% - 9px); left: 9px; right: 9px; z-index: 1;
  width: fit-content; max-width: calc(100% - 18px); margin-inline: auto;
  text-align: center; line-height: 1.3;
  /* --cta IS a gradient string (linear-gradient(...)) in the cosmic theme, so it
     must be the whole background — nesting it inside another linear-gradient()
     is invalid CSS and left the badge transparent (white-on-white in light). */
  background: var(--cta, var(--accent));
  color: var(--accent-ink, #fff); font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 999px;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.sub-plan-head { min-height: 78px; }
.sub-plan-name { font-size: 19px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.sub-plan-cycle { font-family: var(--font-display, 'Instrument Serif', serif); font-style: italic; font-weight: 400; font-size: 18px; color: var(--accent); }
.sub-plan-tag { margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--sub); }

/* Price: large, bold, modern; tabular digits so dynamic values never shift layout. */
.sub-plan-price { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 2px; }
.sub-plan-price .amt {
  font-size: 48px; font-weight: 700; line-height: 1; color: var(--ink);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.sub-plan.feat .sub-plan-price .amt { font-size: 52px; }
.sub-plan-price .per { font-size: 14px; font-weight: 400; color: color-mix(in srgb, var(--sub) 85%, transparent); }
.sub-plan-note { font-size: 12.5px; color: var(--sub); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.sub-plan-note strong { color: var(--ink); }

.sub-feats { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.sub-feat { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.sub-feat svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.sub-feat strong { font-weight: 700; }
.sub-feat > span { min-width: 0; }
.sub-feat small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--sub); }
.sub-feat .sub-num { font-variant-numeric: tabular-nums; }
.sub-feat.off { color: var(--sub); }
.sub-feat.off svg { color: color-mix(in srgb, var(--ink) 32%, transparent); }

/* ── buttons ──────────────────────────────────────────────────────────────── */
/* 2026-08-14: the CTA moved ABOVE the perks list (owner request — the action is
   visible without scrolling past the features), so it no longer bottom-pins. */
.sub-plan-cta { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.sub-feats { margin-top: 20px; margin-bottom: 4px; }

/* Checkout trust line (padlock + "secured by Stripe") under each Pro CTA. */
.sub-secured {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11.5px; color: var(--sub); line-height: 1.4; text-align: center;
}
.sub-secured svg { flex-shrink: 0; color: color-mix(in srgb, var(--accent) 75%, var(--sub)); }

/* Cross-tier symmetry (owner 2026-08-14): head, price, offer chip, note and CTA
   each share ONE row height across all four cards, so the perks — "Free From
   Ads" first on every Pro tier — start at the same Y everywhere. Subgrid where
   supported; the flex layout above stays as the fallback. The JS-injected
   .sub-coupon-deal gets an explicit row so cards WITHOUT a live offer keep
   their elements aligned instead of sliding up. */
@supports (grid-template-rows: subgrid) {
  .sub-plans { grid-template-rows: repeat(5, auto) 1fr; }
  .sub-plans .sub-plan { display: grid; grid-template-rows: subgrid; grid-row: span 6; align-content: start; }
  .sub-plan-head   { grid-row: 1; }
  .sub-plan-price  { grid-row: 2; align-self: end; }
  .sub-coupon-deal { grid-row: 3; }
  .sub-plan-note   { grid-row: 4; align-self: start; }
  /* start, not end: the Pro CTAs carry a "secured by Stripe" line under the
     button, so bottom-aligning the block pushed the Free card's lone button
     down past the Pro buttons. Top-aligned, all four buttons share one Y. */
  .sub-plan-cta    { grid-row: 5; align-self: start; }
  .sub-feats       { grid-row: 6; }
}
.sub-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box; padding: 12px 16px; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none; border: 1px solid transparent;
  transition: transform .12s ease, filter .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sub-btn:hover { transform: translateY(-1px); }
.sub-btn:active { transform: translateY(0) scale(.985); }
.sub-btn-primary { background: var(--cta, var(--accent)); color: var(--accent-ink, #fff); box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.sub-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.sub-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.sub-btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.sub-btn-current { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--sub); cursor: default; }
.sub-btn-current:hover, .sub-btn-current:active { transform: none; }
.sub-tick { font-style: normal; }
.sub-btn-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent-ink,#fff) 45%, transparent); border-top-color: var(--accent-ink, #fff); animation: sub-spin .7s linear infinite; }
.sub-btn.loading { pointer-events: none; opacity: .85; }
.sub-btn.loading .sub-btn-label { visibility: hidden; }
.sub-btn.loading .sub-btn-spin { display: block; position: absolute; }
@keyframes sub-spin { to { transform: rotate(360deg); } }

/* Mono palette: --cta / --accent is grayscale (near-white in dark, near-black in
   light), so the fixed white label on the primary CTA + "Best Value" badge goes
   low-contrast. --bg is always the opposite luminance of --accent in Mono, so it
   stays readable in BOTH appearances. (data-palette is set on <html> by
   js/cosmic-shell.js.) */
[data-palette="mono"] .sub-btn-primary,
[data-palette="mono"] .sub-plan-badge { color: var(--bg); }
[data-palette="mono"] .sub-btn-primary .sub-btn-spin {
  border-color: color-mix(in srgb, var(--bg) 45%, transparent); border-top-color: var(--bg);
}

/* Monthly -> Yearly "Change commitment": credit explanation under the CTA. */
.sub-upgrade-note { font-size: 12px; line-height: 1.55; color: var(--sub); text-align: center; font-variant-numeric: tabular-nums; }
.sub-upgrade-note s { color: color-mix(in srgb, var(--sub) 75%, transparent); }
.sub-upgrade-note strong { color: var(--ink); }

/* arriving via #slug highlight */
.sub-plan-flash { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent) !important; transition: outline .3s ease, box-shadow .3s ease; }

/* ── Desktop 4-up: reclaim the width the fourth card took ──────────────────────
   MUST sit after every base .sub-plan* rule above: a media query adds no
   specificity, so declared earlier these would all have lost to the unscoped
   defaults (that is exactly what happened first time round — only the padding
   survived). Below 1021px the grid drops to 2 columns and the full-size type
   comes back on its own. */
@media (min-width: 1021px) {
  .sub-plan { padding: 24px 19px 20px; }
  /* One reserved head height for all four cards = the four price rows sit on one
     line even though the tag lines wrap to 2–4 lines depending on language. */
  .sub-plan-head, .sub-plan.feat .sub-plan-head { min-height: 124px; }
  .sub-plan-price { margin-top: 8px; }
  .sub-plan-price .amt { font-size: 42px; }
  .sub-plan.feat .sub-plan-price .amt { font-size: 45px; }
  .sub-plan-tag { font-size: 12.5px; }
  .sub-plan-badge { font-size: 10.5px; padding: 5px 12px; letter-spacing: .02em; }
  .sub-feat { font-size: 13px; gap: 8px; }
  .sub-feat small { font-size: 11.5px; }
  .sub-btn { font-size: 13.5px; padding: 11px 12px; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.sub-faq { max-width: 780px; margin: 44px auto 0; }
.sub-faq h2 { font-family: var(--font-display, 'Instrument Serif', serif); font-style: var(--display-style, italic); font-weight: 600; font-size: 26px; color: var(--ink); text-align: center; margin: 0 0 18px; }
.sub-faq-item { border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface) 80%, transparent); margin-bottom: 10px; overflow: hidden; transition: border-color .15s ease; }
.sub-faq-item:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.sub-faq-item summary { list-style: none; cursor: pointer; padding: 15px 18px; font-size: 14.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sub-faq-item summary::-webkit-details-marker { display: none; }
.sub-faq-item summary::after { content: '+'; font-size: 20px; font-weight: 400; color: var(--accent); line-height: 1; flex-shrink: 0; }
.sub-faq-item[open] summary::after { content: '\2013'; }
.sub-faq-body { padding: 0 18px 16px; }
.sub-faq-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--sub); }
.sub-faq-body p:last-child { margin-bottom: 0; }
.sub-faq-body strong { color: var(--ink); }
/* Links inside an answer (the profile page) had no rule at all, so they rendered
   in the UA's default blue — barely legible on the cosmic dark background. */
.sub-faq-body a {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.sub-faq-body a:hover { color: var(--ink); }

/* FAQ 2 — responsive categorized tool grid. */
.sub-toolgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 6px; }
.sub-toolcat {
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 55%, transparent); padding: 13px 14px;
}
.sub-toolcat h4 {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.sub-toolcat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sub-toolcat li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.sub-toolcat li svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); opacity: .9; }

/* ── Hook section (tools included) ────────────────────────────────────────── */
.sub-hook-section {
  max-width: 960px;
  margin: 45px auto 55px;
  padding: 40px 36px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 20px;
  box-shadow: 
    0 24px 60px -25px rgba(0, 0, 0, 0.75),
    0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sub-hook-section:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 
    0 32px 70px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset;
}

/* Subtle glowing background aura inside the hook section */
.sub-hook-section::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -150px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.sub-hook-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 32px;
}

.sub-hook-title {
  font-family: var(--font-body, 'Geist', sans-serif);
  font-size: clamp(24px, 4.5vw, 32px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}

.sub-hook-title em {
  font-family: var(--hero-serif, var(--font-display, serif));
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

.sub-hook-subtitle {
  font-size: 15px;
  line-height: 1.5;
  color: var(--sub);
  margin: 0;
}

/* Make grid items look premium and larger */
.sub-toolgrid.hook-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.sub-toolcat.hook-cat {
  background: color-mix(in srgb, var(--bg2) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 14px;
  padding: 22px 20px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sub-toolcat.hook-cat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--bg2) 90%, transparent);
}

.sub-toolcat.hook-cat h4 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  padding-bottom: 6px;
}

.sub-toolcat.hook-cat ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sub-toolcat.hook-cat li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.sub-toolcat.hook-cat li svg {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 1;
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.sub-toolcat.hook-cat li:hover svg {
  transform: scale(1.18);
}

/* Small qualifier under a tool label (e.g. AI Music Generator — test phase). */
.sub-toolcat.hook-cat li .sub-tool-note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  opacity: 0.9;
}

/* ── responsive ───────────────────────────────────────────────────────────── */
/* Tablet: two columns — the featured Yearly plan spans the full first row so it
   stays visually dominant; its feature list flows in two columns to use the
   width. Monthly + the day pass share row two, Free closes.
   The DOM order is the desktop commitment ladder (Free → Daily → Monthly →
   Yearly), so every card states its `order` here rather than relying on it. */
@media (max-width: 1020px) {
  .sub-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .sub-plan.feat { grid-column: 1 / -1; order: 1; }
  #mazmazika-pro-monthly { order: 2; }
  #mazmazika-pro-daily { order: 3; }
  #free { order: 4; }
  .sub-plan.feat .sub-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 22px; align-content: start; }
  .sub-plan.feat .sub-plan-head { min-height: 0; }
}
/* Mobile: single stacked column, highest value first (Yearly → Monthly → Daily → Free). */
@media (max-width: 680px) {
  .sub-plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; gap: 16px; }
  .sub-plan { padding: 24px 20px 20px; }
  .sub-plan.feat { order: 1; }
  #mazmazika-pro-monthly { order: 2; }
  #mazmazika-pro-daily { order: 3; }
  #free { order: 4; }
  .sub-plan.feat .sub-feats { display: flex; flex-direction: column; }
  .sub-plan-head, .sub-plan.feat .sub-plan-head { min-height: 0; }
  .sub-plan-price .amt, .sub-plan.feat .sub-plan-price .amt { font-size: 44px; }
  .sub-toolgrid { grid-template-columns: 1fr; }
  .sub-toolgrid.hook-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 760px) {
  .sub-main { padding-left: 16px; padding-right: 16px; }
  .sub-hook-section {
    margin: 32px auto 40px;
    padding: 28px 24px;
    border-radius: 16px;
  }
  .sub-hook-title {
    font-size: 24px;
  }
  .sub-hook-subtitle {
    font-size: 14px;
  }
  .sub-toolcat.hook-cat {
    padding: 18px 16px;
  }
  .sub-toolcat.hook-cat h4 {
    margin-bottom: 12px;
  }
}
@media (min-width: 681px) and (max-width: 1020px) {
  .sub-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-toolgrid.hook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── "New" chip ───────────────────────────────────────────────────────────────
   ONE definition for every surface that flags a just-landed capability (tool
   grid, Pro feature list, both comparison tables). Sized in em so it always
   tracks its host line's font-size instead of drifting between the 12.5px grid
   note and the 13.5px feature line; inline-block + a small y-offset so it never
   raises the line box it sits in. */
.sub-new {
  display: inline-block; vertical-align: 1.5px; margin-left: .5em;
  padding: .12em .5em; border-radius: 999px;
  font-size: max(9.5px, .72em); font-weight: 800; line-height: 1.5;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink, #fff);
}
[data-palette="mono"] .sub-new { color: var(--bg); }

/* ── Free vs Pro comparison (Free vs Pro) — values from the admin grid ─────── */
.sub-lencmp { max-width: 820px; margin: 44px auto 0; text-align: center; }
.sub-lencmp h2 { font-family: var(--font-display, 'Instrument Serif', serif); font-style: var(--display-style, italic); font-weight: 600; font-size: 26px; color: var(--ink); margin: 0 0 6px; }
.sub-lencmp-sub { font-size: 13.5px; color: var(--sub); margin: 0 0 18px; }
.sub-lencmp-tablewrap { overflow-x: auto; }
.sub-lencmp-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 80%, transparent); overflow: hidden; }
.sub-lencmp-table th, .sub-lencmp-table td { padding: 12px 18px; font-size: 13.5px; text-align: center; border-bottom: 1px solid var(--line); }
.sub-lencmp-table tbody tr:last-child th, .sub-lencmp-table tbody tr:last-child td { border-bottom: none; }
.sub-lencmp-table thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.sub-lencmp-table .svc { text-align: left; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sub-lencmp-table td { color: var(--sub); }
.sub-lencmp-table td.pro { color: var(--accent); font-weight: 700; }
.sub-lencmp-table thead th.pro { color: var(--accent); }
@media (max-width: 760px) {
  .sub-lencmp { margin-top: 36px; }
  .sub-lencmp-table th, .sub-lencmp-table td { padding: 10px 12px; }
}

/* ── Comparison tables v2 (daily allowance + engines & track length) ──────────
   The tools are multi-ENGINE now, so the table gained group headers, a second
   descriptive line per row and three kinds of cell (a length, a tick, a "Pro
   only" lock). Everything below only styles .sub-cmp-table, so the plain
   .sub-lencmp-table rules above stay valid for any other caller. */
.sub-cmp-h3 {
  margin: 26px 0 4px; text-align: left;
  font-size: clamp(14px, 1.9vw, 15.5px); font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.sub-cmp-h3:first-of-type { margin-top: 6px; }
.sub-cmp-h3sub { margin: 0 0 12px; text-align: left; font-size: 12.5px; line-height: 1.5; color: var(--sub); }
.sub-lencmp .sub-cmp-h3 + .sub-lencmp-tablewrap { margin-top: 10px; }

/* Row label column: wraps (engine names + notes are long) and carries the note. */
.sub-cmp-table .svc { white-space: normal; line-height: 1.35; }
.sub-cmp-table .svc small {
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400;
  line-height: 1.45; color: var(--sub); white-space: normal;
}
/* Engine rows are indented under their group header and read one notch quieter
   than the group name, so the hierarchy survives without extra chrome. */
.sub-cmp-table .sub-cmp-sub { padding-left: 30px; font-weight: 600; }

/* Group header row — a full-width band naming the tool. */
.sub-cmp-grouprow th {
  text-align: left; padding: 13px 18px 10px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.sub-cmp-grouprow:first-child th { border-top: none; }
.sub-cmp-groupname {
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.sub-cmp-grouprow small {
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; line-height: 1.45; color: var(--sub);
}

/* Cells. Fixed-ish value columns keep the two plans easy to scan side by side. */
.sub-cmp-table td { width: 22%; vertical-align: middle; }
.sub-cmp-len { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub-cmp-table td.pro .sub-cmp-len { color: var(--accent); }
.sub-cmp-inf {
  display: inline-block; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.sub-cmp-yes { display: inline-grid; place-items: center; color: var(--accent); }
.sub-cmp-table td:not(.pro) .sub-cmp-yes { color: color-mix(in srgb, var(--ink) 62%, transparent); }
.sub-cmp-lock {
  display: inline-block; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  border: 1px dashed color-mix(in srgb, var(--ink) 26%, transparent);
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.sub-cmp-foot { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--sub); text-align: left; }
.sub-cmp-cta { margin-top: 18px; display: flex; justify-content: center; }
.sub-cmp-cta .sub-btn { min-width: min(320px, 100%); }

/* Mobile: the value columns shrink to their content and the label column takes
   the rest, so the table still fits without a horizontal scroll on a 360px
   phone. .sub-lencmp-tablewrap keeps overflow-x:auto as the safety net. */
@media (max-width: 700px) {
  .sub-cmp-table th, .sub-cmp-table td { padding: 10px 8px; font-size: 12.5px; }
  .sub-cmp-table .svc { padding-left: 12px; }
  .sub-cmp-table .sub-cmp-sub { padding-left: 20px; }
  .sub-cmp-grouprow th { padding: 11px 12px 9px; }
  .sub-cmp-table td { width: 24%; }
  .sub-cmp-table .svc small, .sub-cmp-grouprow small { font-size: 11px; }
  .sub-cmp-inf, .sub-cmp-lock { font-size: 10.5px; padding: 2px 7px; }
}