/* 2026-07-13 REL_97 -- /subscription doctor-plans page glue (.di-sub__*). ONLY page-unique layout the di-system didn't have: the plan cards, the savings + comparison
   tables, the CSS-driven hero art, and the feature grid. Everything else (di-eyebrow / di-lead / di-btn / di-faq / di-wrap + :root tokens) is reused. Global di tokens
   only, zero raw hex (only #fff on solid-brand), sober/crisp per DESIGN_IDENTITY (hero = the one gradient moment; no glows), light-only (di dark == light). */

.di-sub__sronly { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- section shells ---------- */
.di-sub__sec { padding:64px 0; }
.di-sub__sec--tint { background:var(--tint2); }
.di-sub__shead { text-align:center; max-width:660px; margin:0 auto 40px; }
.di-sub__shead .di-eyebrow { margin-bottom:16px; }
.di-sub__shead h2 { font-family:"Jakarta","Inter",sans-serif; font-weight:800; letter-spacing:-.02em; font-size:clamp(24px,3vw,33px); color:var(--ink); margin:0 0 10px; }
.di-sub__shead p { color:var(--ink2); font-size:16px; margin:0; }

/* ---------- hero (the one signature gradient) ---------- */
.di-sub__hero { background:linear-gradient(155deg, color-mix(in srgb, var(--blue) 12%, var(--white)) 0%, var(--tint2) 55%, var(--white) 100%); border-bottom:1px solid var(--line); }
.di-sub__herogrid { display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding:60px 0 66px; }
.di-sub__herotxt h1 { font-family:"Jakarta","Inter",sans-serif; font-weight:800; letter-spacing:-.02em; line-height:1.12; font-size:clamp(30px,4.4vw,49px); color:var(--ink); margin:0 0 14px; }
.di-sub__grad { background:linear-gradient(120deg, var(--blue2), var(--blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.di-sub__hero .di-lead { max-width:560px; }
.di-sub__herocta { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.di-sub__trust { list-style:none; display:flex; gap:30px; margin:30px 0 0; padding:0; flex-wrap:wrap; }
.di-sub__trust b { display:block; font-family:"Jakarta","Inter",sans-serif; font-weight:800; font-size:22px; color:var(--ink); }
.di-sub__trust b small { font-size:13px; font-weight:700; color:var(--ink2); }
.di-sub__trust span { font-size:12.5px; color:var(--muted); font-weight:600; }

/* hero art = the brand doctor photo (self-hosted /assets/img/di/hero.jpg -> CSP img-src 'self' safe) with a single overlaid "verified" badge */
.di-sub__heroart { position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh); aspect-ratio:4 / 3.2; background:color-mix(in srgb, var(--blue) 10%, var(--white)); }
.di-sub__herophoto { width:100%; height:100%; object-fit:cover; object-position:32% center; display:block; }
.di-sub__glass { position:absolute; left:18px; bottom:18px; z-index:2; background:color-mix(in srgb, var(--white) 92%, transparent); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh); padding:12px 16px; display:flex; align-items:center; gap:11px; }
.di-sub__glass b { display:block; font-family:"Jakarta","Inter",sans-serif; font-size:15px; color:var(--ink); }
.di-sub__glass span { font-size:12px; color:var(--muted); }
.di-sub__glassic { flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--green) 15%, var(--white)); color:var(--green-ink); }
.di-sub__glassic svg { width:19px; height:19px; }

/* ---------- plan cards ---------- */
.di-sub__plans { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.di-sub__plan { position:relative; border:1.5px solid var(--line); border-radius:var(--r-lg); background:var(--white); padding:32px 30px; display:flex; flex-direction:column; box-shadow:var(--sh-sm); }
.di-sub__plan--feat { border-color:transparent; background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, var(--white)), var(--navy)); box-shadow:var(--sh); }
.di-sub__tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg, var(--blue), var(--blue-dark)); color:var(--white); font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:6px 16px; border-radius:var(--pill); box-shadow:var(--sh-blue); white-space:nowrap; }
.di-sub__planname { font-family:"Jakarta","Inter",sans-serif; font-weight:800; font-size:20px; color:var(--ink); }
.di-sub__plansub { font-size:13.5px; color:var(--ink2); margin:4px 0 0; min-height:38px; }
.di-sub__price { margin:18px 0 4px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.di-sub__price b { font-family:"Jakarta","Inter",sans-serif; font-size:40px; color:var(--ink); line-height:1; }
.di-sub__price s { font-size:18px; color:var(--muted); }
.di-sub__per { font-size:14px; color:var(--ink2); font-weight:600; }
.di-sub__note { font-size:12.5px; color:var(--muted); margin:0 0 20px; }
.di-sub__feats { list-style:none; display:flex; flex-direction:column; gap:11px; margin:6px 0 26px; padding:0; flex:1; }
.di-sub__feats li { display:flex; gap:10px; font-size:14px; color:var(--ink2); align-items:flex-start; }
.di-sub__chk { flex:0 0 auto; display:inline-grid; place-items:center; width:20px; height:20px; margin-top:1px; border-radius:50%; background:color-mix(in srgb, var(--green) 14%, var(--white)); color:var(--green-ink); }
.di-sub__chk svg { width:12px; height:12px; }
.di-sub__cta { width:100%; justify-content:center; }
.di-sub__mini { margin:14px 0 0; text-align:center; font-size:12.5px; color:var(--muted); }
/* featured (dark) card — explicit near-white text so every bullet reads clearly on the gradient */
.di-sub__plan--feat .di-sub__planname, .di-sub__plan--feat .di-sub__price b { color:var(--white); }
.di-sub__plan--feat .di-sub__price s { color:color-mix(in srgb, var(--white) 80%, var(--blue)); }
.di-sub__plan--feat .di-sub__plansub, .di-sub__plan--feat .di-sub__per { color:color-mix(in srgb, var(--white) 86%, var(--blue)); }
.di-sub__plan--feat .di-sub__note, .di-sub__plan--feat .di-sub__mini { color:color-mix(in srgb, var(--white) 74%, var(--blue)); }
.di-sub__plan--feat .di-sub__feats li { color:color-mix(in srgb, var(--white) 92%, var(--blue)); font-weight:500; }
.di-sub__plan--feat .di-sub__feats li b { color:var(--white); }
.di-sub__plan--feat .di-sub__chk { background:color-mix(in srgb, var(--green) 30%, transparent); color:var(--green-bright); }
.di-sub__plan--feat .di-btn--primary { background:var(--white); color:var(--blue); box-shadow:var(--sh); }
.di-sub__plan--feat .di-btn--primary:hover { background:var(--tint); }

/* ---------- savings ---------- */
.di-sub__savings { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center; }
/* wrap the 3-col table so it scrolls WITHIN its box on narrow phones instead of being clipped by html{overflow-x:clip} (QA: 360/375 clip). */
.di-sub__savescroll { overflow-x:auto; border-radius:var(--r-lg); box-shadow:var(--sh-sm); border:1px solid var(--line); }
.di-sub__savetbl { width:100%; min-width:360px; border-collapse:collapse; background:var(--white); }
.di-sub__savetbl th, .di-sub__savetbl td { padding:14px 18px; text-align:left; font-size:14px; border-bottom:1px solid var(--line); }
.di-sub__savetbl thead th { background:var(--tint); font-family:"Jakarta","Inter",sans-serif; font-size:13px; color:var(--ink); font-weight:800; }
.di-sub__savetbl tbody th { font-weight:600; color:var(--ink); }
.di-sub__savetbl td { color:var(--ink2); }
.di-sub__savetbl td.di-sub__di { color:color-mix(in srgb, var(--green-ink) 62%, var(--ink)); font-weight:700; } /* specificity beats `.di-sub__savetbl td{color:--ink2}` so "Complimentary" stays green; deepened for AA (same treatment as .di-sub__savepill) */
.di-sub__savetbl tr:last-child th, .di-sub__savetbl tr:last-child td { border-bottom:0; }
.di-sub__savetotal th, .di-sub__savetotal td { background:var(--tint2); font-weight:800; font-family:"Jakarta","Inter",sans-serif; }
.di-sub__savecard { background:linear-gradient(160deg, var(--blue), var(--navy)); color:var(--white); border-radius:var(--r-lg); padding:32px 30px; box-shadow:var(--sh); }
.di-sub__savek { font-size:12.5px; color:color-mix(in srgb, var(--white) 78%, var(--blue)); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.di-sub__savev { display:block; font-family:"Jakarta","Inter",sans-serif; font-weight:800; font-size:42px; margin:6px 0; }
.di-sub__savev small { font-size:18px; font-weight:700; }
.di-sub__savepill { display:inline-flex; align-items:center; gap:7px; background:var(--white); color:color-mix(in srgb, var(--green-ink) 62%, var(--ink)); font-weight:700; font-size:13.5px; padding:6px 13px; border-radius:var(--pill); }
.di-sub__savepill svg { width:14px; height:14px; }
.di-sub__savecard p { color:color-mix(in srgb, var(--white) 84%, var(--blue)); font-size:13.5px; margin:16px 0 0; }

/* ---------- comparison table ---------- */
.di-sub__cmp { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); }
.di-sub__cmpscroll { overflow-x:auto; }
.di-sub__cmptbl { width:100%; border-collapse:collapse; min-width:620px; }
.di-sub__cmptbl thead th { position:sticky; top:0; background:linear-gradient(180deg, var(--white), var(--tint2)); padding:18px 20px; text-align:center; font-family:"Jakarta","Inter",sans-serif; font-weight:800; font-size:15px; color:var(--ink); border-bottom:2px solid var(--line); z-index:2; }
.di-sub__cmptbl thead th:first-child { text-align:left; }
.di-sub__cmptbl thead th.di-sub__cmpfeat { color:var(--blue); }
.di-sub__pp { display:block; font-family:"Inter",sans-serif; font-weight:600; font-size:12.5px; color:var(--ink2); margin-top:2px; }
.di-sub__cmptbl tbody th { text-align:left; font-weight:600; font-size:14px; color:var(--ink); padding:14px 20px; background:var(--white); border-bottom:1px solid var(--line); }
.di-sub__cmptbl tbody td { text-align:center; padding:14px 20px; font-size:13.5px; color:var(--ink2); border-bottom:1px solid var(--line); }
.di-sub__cmptbl tbody tr:nth-child(even) th, .di-sub__cmptbl tbody tr:nth-child(even) td { background:var(--tint2); }
.di-sub__cmptbl tbody td.di-sub__cmpfeat { background:color-mix(in srgb, var(--blue) 4%, var(--white)); }
.di-sub__cmpgrp th { background:var(--tint); font-family:"Jakarta","Inter",sans-serif; font-weight:800; font-size:13px; color:var(--blue-dark); letter-spacing:.03em; text-transform:uppercase; }
.di-sub__val { font-weight:700; color:var(--ink); }
.di-sub__dash { color:var(--line); font-size:18px; }
.di-sub__cmptbl .di-sub__chk { margin:0; }
.di-sub__cmpcta { text-align:center; margin-top:26px; }

/* ---------- feature grid ---------- */
.di-sub__fgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.di-sub__fcard { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--sh-sm); transition:transform .18s, box-shadow .18s; }
.di-sub__fcard:hover { transform:translateY(-3px); box-shadow:var(--sh); }
.di-sub__fic { display:grid; place-items:center; width:50px; height:50px; border-radius:14px; background:color-mix(in srgb, var(--blue) 10%, var(--white)); color:var(--blue); margin-bottom:16px; }
.di-sub__fic svg { width:24px; height:24px; }
.di-sub__fcard h3 { font-family:"Jakarta","Inter",sans-serif; font-weight:800; font-size:17px; color:var(--ink); margin:0 0 9px; }
.di-sub__fcard ul { list-style:none; display:flex; flex-direction:column; gap:8px; margin:0; padding:0; }
.di-sub__fcard li { position:relative; padding-left:18px; font-size:13.5px; color:var(--ink2); }
.di-sub__fcard li::before { content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--blue2); }

/* ---------- faq (reuses di-faq) ---------- */
.di-sub__faq { max-width:820px; margin:0 auto; }
.di-sub__faqmore { text-align:center; margin:26px auto 0; max-width:820px; color:var(--ink2); font-size:14.5px; }
.di-sub__faqmore a { color:var(--blue); font-weight:600; }

/* ---------- cta band ---------- */
.di-sub__band { background:linear-gradient(135deg, var(--blue), var(--navy)); color:var(--white); border-radius:var(--r-xl); padding:52px; text-align:center; box-shadow:var(--sh); }
.di-sub__band h2 { font-family:"Jakarta","Inter",sans-serif; font-weight:800; letter-spacing:-.02em; font-size:clamp(24px,3vw,33px); margin:0; color:var(--white); } /* override the global h2 navy so the heading reads on the dark band */
.di-sub__band p { color:color-mix(in srgb, var(--white) 84%, var(--blue)); max-width:540px; margin:12px auto 26px; font-size:16px; }
.di-sub__bandcta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.di-sub__band .di-btn--primary { background:var(--white); color:var(--blue); }
.di-sub__band .di-btn--primary:hover { background:var(--tint); }
.di-sub__band .di-btn--ghost { background:transparent; color:var(--white); border-color:color-mix(in srgb, var(--white) 42%, transparent); }
.di-sub__band .di-btn--ghost:hover { background:color-mix(in srgb, var(--white) 12%, transparent); border-color:var(--white); }

/* ---------- upgrade button busy/loading state (2026-07-14: clear feedback + blocks multi-click while the check-login -> cart round-trip runs) ---------- */
.di-sub__upgrade.is-busy { pointer-events:none; opacity:.9; }
.di-sub__upgrade.is-busy::before { content:""; display:inline-block; width:15px; height:15px; border:2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color:currentColor; border-radius:50%; animation:di-spin .7s linear infinite; } /* reuse the shared di-spin keyframe (di-system.css) -- flex gap handles spacing */
@media (prefers-reduced-motion: reduce) { .di-sub__upgrade.is-busy::before { animation:none; } }

/* ---------- upgrade-flow notice dialog ---------- */
.di-sub__dialog { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; background:color-mix(in srgb, var(--navy) 55%, transparent); }
.di-sub__dialog[hidden] { display:none; }
/* [hidden] on the Continue anchor must win over .di-btn{display:inline-flex} so it actually hides when there's no follow-up URL */
.di-sub__dialog [hidden] { display:none !important; }
.di-sub__dialogcard { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--sh); max-width:420px; width:100%; padding:28px 26px; text-align:center; }
.di-sub__dialogt { font-family:"Jakarta","Inter",sans-serif; font-weight:800; font-size:19px; color:var(--ink); margin:0 0 10px; }
.di-sub__dialogmsg { color:var(--ink2); font-size:14.5px; margin:0 0 20px; }
.di-sub__dialogact { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* focus rings on the plan cards' interactive elements come from the SHARED di-btn / di-faq focus-visible rules (di-system.css); no page-local ring needed. */

/* ---------- responsive ---------- */
@media (max-width:900px) {
    .di-sub__herogrid { grid-template-columns:1fr; gap:30px; padding:44px 0 48px; }
    .di-sub__heroart { order:-1; aspect-ratio:16 / 10; }
    .di-sub__savings { grid-template-columns:1fr; }
    .di-sub__fgrid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
    .di-sub__plans { grid-template-columns:1fr; }
    .di-sub__tag { top:-12px; }
}
@media (max-width:600px) {
    .di-sub__sec { padding:48px 0; }
    .di-sub__fgrid { grid-template-columns:1fr; }
    .di-sub__band { padding:38px 24px; }
    .di-sub__trust { gap:20px; }
}