/* ============================================================
   SUBSCRIPTION · page-subscription
   Scoped under #page-subscription. Prefix sb- avoids the global
   [class*="hero|eyebrow|-card|-tile|tag|badge|metric|stat-|pill|
   -fill|footer|-input|search-|-section|progress-|mood-|avatar"] traps.
   Reuses the existing HabituallyU palette, Playfair/Nunito type,
   rounded-corner + soft-shadow treatment. No global styles changed.
   ============================================================ */
#page-subscription{
  --sb-navy:#243447; --sb-ink:#33402f; --sb-muted:#78766c;
  --sb-white:#FFFDFA; --sb-cream:#FBF6EC;
  --sb-sage:#7d9e77; --sb-sage-deep:#5E7E57; --sb-sage-tint:#EAF1E4;
  --sb-olive:#687058;
  --sb-terra:#C6764F; --sb-terra-tint:#F6E7DD;
  --sb-gold:#CF9E3F; --sb-butter:#E9C566; --sb-butter-tint:#FAF0D0;
  --sb-tan-tint:#F3E7D8; --sb-line:#EAE2D4;
  --sb-shadow:0 14px 34px rgba(51,64,47,.10); --sb-shadow-sm:0 6px 16px rgba(51,64,47,.07);
  color:var(--sb-ink); font-family:'Nunito',system-ui,sans-serif; line-height:1.6;
}
#page-subscription *{box-sizing:border-box}
#page-subscription .sb-sec{padding:56px 20px}
#page-subscription .sb-wrap{max-width:1120px;margin:0 auto}
#page-subscription .sb-sec--white{background:var(--sb-white)}
#page-subscription .sb-sec--cream{background:var(--sb-cream)}
#page-subscription .sb-sec--sage{background:var(--sb-sage-tint)}
#page-subscription .sb-sec--deep{background:linear-gradient(150deg,#31465F,#243447)}

#page-subscription .sb-eb{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-terra);margin:0 0 12px}
#page-subscription .sb-eb svg{width:16px;height:16px}
#page-subscription .sb-eb--sage{color:var(--sb-sage-deep)}
#page-subscription h2.sb-h{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.15;margin:0 0 10px;color:var(--sb-navy)}
#page-subscription .sb-lead{font-size:1.02rem;color:var(--sb-muted);max-width:66ch;margin:0 0 26px}

/* hero */
#page-subscription .sb-top{background:linear-gradient(150deg,#31465F,#243447);color:#fff;padding:26px 20px 56px;text-align:center}
#page-subscription .sb-top__in{max-width:820px;margin:0 auto}
#page-subscription .sb-back{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:8px 15px 8px 11px;font:inherit;font-weight:700;font-size:.86rem;cursor:pointer;float:left}
#page-subscription .sb-back svg{width:17px;height:17px}
#page-subscription h1.sb-top__t{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(1.9rem,4.4vw,2.9rem);margin:44px 0 12px;color:#fff !important;-webkit-text-fill-color:#fff !important}
#page-subscription .sb-top__p{color:rgba(255,255,255,.88);margin:0 auto 16px;max-width:56ch}
#page-subscription .sb-top__inc{display:inline-flex;align-items:center;gap:8px;background:rgba(233,197,102,.16);border:1px solid rgba(233,197,102,.5);color:var(--sb-butter);border-radius:999px;padding:9px 18px;font-size:.88rem;font-weight:700}
#page-subscription .sb-top__inc svg{width:16px;height:16px;flex:none}

/* buttons */
#page-subscription .sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font:inherit;font-weight:800;font-size:.96rem;padding:13px 24px;cursor:pointer;border:2px solid transparent;line-height:1;min-height:46px;transition:.16s;width:100%}
#page-subscription .sb-btn svg{width:17px;height:17px}
#page-subscription .sb-btn--sage{background:var(--sb-sage-deep);color:#fff}
#page-subscription .sb-btn--sage:hover{background:#4d6a47}
#page-subscription .sb-btn--olive{background:var(--sb-olive);color:#fff}
#page-subscription .sb-btn--olive:hover{background:#565d49}
#page-subscription .sb-btn--ghost{background:#fff;color:var(--sb-sage-deep);border-color:var(--sb-line)}
#page-subscription .sb-btn--ghost:hover{border-color:var(--sb-sage)}
#page-subscription .sb-btn--auto{width:auto}
#page-subscription .sb-btn--sm{padding:9px 16px;font-size:.85rem;min-height:40px}
#page-subscription .sb-btn[disabled]{opacity:.45;cursor:not-allowed}

/* plan cards */
/* Cancel is now the only control in the manage row, so it goes to the 44px tap
   target rather than being left at the 40px it shared with the buttons removed
   alongside it. Back is raised with it for consistency. */
#page-subscription .sb-btn--sm, #page-subscription .sb-back{ min-height:44px !important; }
/* ONE PLAN (Aug 2026): a single card in a two-column grid left half the row
   empty. It is centred and capped instead. Restore `1fr 1fr` if tiers return. */
#page-subscription .sb-plans{display:grid;grid-template-columns:minmax(0,520px);justify-content:center;gap:22px;align-items:start}
#page-subscription .sb-plan{display:block;position:relative;background:#fff;border:1.5px solid var(--sb-line);border-radius:26px;padding:30px;box-shadow:var(--sb-shadow)}
#page-subscription .sb-plan--rec{border-color:var(--sb-sage);box-shadow:0 20px 50px rgba(94,126,87,.20);background:linear-gradient(160deg,var(--sb-sage-tint) 0%,#fff 42%)}
#page-subscription .sb-rec{position:absolute;top:-13px;left:30px;display:inline-flex;align-items:center;gap:6px;background:var(--sb-sage-deep);color:#fff;border-radius:999px;padding:6px 15px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#page-subscription .sb-rec svg{width:12px;height:12px}
#page-subscription .sb-plan__n{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--sb-navy);margin:6px 0 2px}
#page-subscription .sb-plan__s{font-family:'Caveat',cursive;font-size:1.35rem;color:var(--sb-terra);margin:0 0 14px}
#page-subscription .sb-price{display:flex;align-items:baseline;gap:6px;margin-bottom:14px}
#page-subscription .sb-price b{font-family:'Playfair Display',serif;font-size:2.6rem;color:var(--sb-navy);line-height:1}
#page-subscription .sb-price span{color:var(--sb-muted);font-size:.92rem;font-weight:700}
#page-subscription .sb-plan__d{color:var(--sb-muted);font-size:.94rem;margin:0 0 18px}
#page-subscription .sb-list{list-style:none;margin:0 0 22px;padding:0}
#page-subscription .sb-list li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:.94rem;color:var(--sb-ink)}
#page-subscription .sb-list svg{width:17px;height:17px;color:var(--sb-sage-deep);flex:none;margin-top:3px}

/* always included */
#page-subscription .sb-incs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#page-subscription .sb-inc{background:#fff;border:1px solid var(--sb-line);border-radius:18px;padding:20px;box-shadow:var(--sb-shadow-sm)}
#page-subscription .sb-inc__i{width:46px;height:46px;border-radius:14px;background:var(--sb-butter-tint);color:#a97e2b;display:grid;place-items:center;margin-bottom:12px}
#page-subscription .sb-inc__i svg{width:23px;height:23px}
#page-subscription .sb-inc b{display:block;color:var(--sb-navy);margin-bottom:3px}
#page-subscription .sb-inc span{font-size:.87rem;color:var(--sb-muted)}
#page-subscription .sb-freebar{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px dashed var(--sb-sage);border-radius:16px;padding:14px 18px;margin-top:20px;color:var(--sb-sage-deep);font-weight:700;font-size:.92rem}
#page-subscription .sb-freebar svg{width:19px;height:19px;flex:none}

/* comparison */
#page-subscription .sb-cmp{width:100%;border-collapse:collapse;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--sb-shadow);font-size:.94rem}
#page-subscription .sb-cmp th{text-align:left;padding:16px;background:var(--sb-cream);color:var(--sb-navy);font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:.05em}
#page-subscription .sb-cmp th:nth-child(3){background:var(--sb-sage-tint)}
#page-subscription .sb-cmp td{padding:14px 16px;border-top:1px solid var(--sb-line);vertical-align:top}
#page-subscription .sb-cmp td:first-child{font-weight:700;color:var(--sb-navy)}
#page-subscription .sb-cmp td:nth-child(3){background:rgba(234,241,228,.42)}
#page-subscription .sb-cmp svg{width:16px;height:16px;vertical-align:-3px;margin-right:5px}
#page-subscription .sb-yes{color:var(--sb-sage-deep);font-weight:700}
#page-subscription .sb-no{color:var(--sb-muted)}
/* icons must be sized everywhere these labels appear, not just inside the table,
   otherwise the mobile stacked cards render full-width SVGs and cause h-scroll */
#page-subscription .sb-yes svg,#page-subscription .sb-no svg{width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:5px}
#page-subscription .sb-cmp-m dd{max-width:62%;display:flex;align-items:center;justify-content:flex-end;gap:2px}
#page-subscription .sb-cmp-m{display:none}
#page-subscription .sb-cmp-m .sb-plan{margin-bottom:16px}
#page-subscription .sb-cmp-m dl{margin:0}
#page-subscription .sb-cmp-m dl > div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--sb-line);font-size:.9rem}
#page-subscription .sb-cmp-m dt{color:var(--sb-muted)}
#page-subscription .sb-cmp-m dd{margin:0;font-weight:700;color:var(--sb-navy);text-align:right}

/* manage subscription */
#page-subscription .sb-manage{background:#fff;border:1px solid var(--sb-line);border-radius:22px;padding:26px;box-shadow:var(--sb-shadow)}
#page-subscription .sb-mrow{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed var(--sb-line);flex-wrap:wrap}
#page-subscription .sb-mrow:last-of-type{border-bottom:none}
#page-subscription .sb-mrow dt{color:var(--sb-muted);font-size:.88rem}
#page-subscription .sb-mrow dd{margin:0;font-weight:700;color:var(--sb-navy)}
#page-subscription .sb-mine{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#page-subscription .sb-mine span{background:var(--sb-sage-tint);color:var(--sb-sage-deep);border-radius:999px;padding:6px 13px;font-size:.83rem;font-weight:700}
#page-subscription .sb-todo{font-size:.8rem;color:var(--sb-muted);background:var(--sb-cream);border-radius:12px;padding:11px 14px;margin-top:14px;display:flex;gap:8px}
#page-subscription .sb-todo svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--sb-terra)}
#page-subscription .sb-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
#page-subscription .sb-actions .sb-btn{width:auto}

@media (max-width:900px){
  #page-subscription .sb-plans{grid-template-columns:1fr}
  #page-subscription .sb-incs{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  #page-subscription .sb-cmp{display:none}
  #page-subscription .sb-cmp-m{display:block}
}
@media (max-width:560px){
  #page-subscription .sb-sec{padding:40px 15px}
  #page-subscription .sb-incs{grid-template-columns:1fr}
  #page-subscription .sb-actions .sb-btn{width:100%}
}

/* ===================== BUILDER / MODALS (outside the page) ===================== */
#sbModal{position:fixed;inset:0;z-index:100000;background:rgba(28,32,26,.62);display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
#sbModal.on{display:flex}
#sbModal .sb-box{background:#FFFDFA;border-radius:26px;max-width:1000px;width:100%;max-height:92vh;overflow-y:auto;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.35);font-family:'Nunito',system-ui,sans-serif;color:#33402f;position:relative}
#sbModal .sb-box--sm{max-width:520px}
#sbModal h3{font-family:'Playfair Display',serif;font-size:1.6rem;color:#243447;margin:0 0 6px}
#sbModal .sb-mh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
#sbModal .sb-x{background:none;border:1px solid #EAE2D4;border-radius:10px;cursor:pointer;padding:9px 12px;color:#78766c;min-height:42px}
#sbModal .sb-x:hover{background:#FBF6EC}
#sbModal p{color:#78766c;margin:0}

/* progress steps */
#sbModal .sb-steps{display:flex;gap:8px;margin-bottom:18px}
#sbModal .sb-steps i{flex:1;height:6px;border-radius:999px;background:#EAE2D4;display:block}
#sbModal .sb-steps i.on{background:#5E7E57}
#sbModal .sb-stepn{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#C6764F;margin-bottom:6px}

/* feature selection grid */
#sbModal .sb-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:16px 0}
#sbModal .sb-feat{position:relative;background:#fff;border:2px solid #EAE2D4;border-radius:18px;padding:16px;cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;gap:12px;align-items:flex-start;transition:.15s;min-height:96px}
#sbModal .sb-feat:hover{border-color:#7d9e77;transform:translateY(-2px);box-shadow:0 10px 22px rgba(51,64,47,.10)}
#sbModal .sb-feat:focus-visible{outline:3px solid #CF9E3F;outline-offset:2px}
#sbModal .sb-feat[aria-pressed="true"]{border-color:#5E7E57;background:#EAF1E4;box-shadow:inset 0 0 0 1px #5E7E57}
#sbModal .sb-feat__i{width:40px;height:40px;border-radius:12px;background:#F3E7D8;color:#C6764F;display:grid;place-items:center;flex:none}
#sbModal .sb-feat__i svg{width:20px;height:20px}
#sbModal .sb-feat[aria-pressed="true"] .sb-feat__i{background:#5E7E57;color:#fff}
#sbModal .sb-feat__b{flex:1;min-width:0}
#sbModal .sb-feat__b b{display:block;color:#243447;font-size:.95rem}
#sbModal .sb-feat__b span{font-size:.8rem;color:#78766c;display:block;line-height:1.45}
#sbModal .sb-feat__tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;border:2px solid #EAE2D4;display:grid;place-items:center;background:#fff}
#sbModal .sb-feat__tick svg{width:13px;height:13px;color:#fff;opacity:0}
#sbModal .sb-feat[aria-pressed="true"] .sb-feat__tick{background:#5E7E57;border-color:#5E7E57}
#sbModal .sb-feat[aria-pressed="true"] .sb-feat__tick svg{opacity:1}
#sbModal .sb-feat__sel{display:none;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#5E7E57;margin-top:5px}
#sbModal .sb-feat[aria-pressed="true"] .sb-feat__sel{display:block}
#sbModal .sb-forme{display:inline-block;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#a97e2b;background:#FAF0D0;border-radius:999px;padding:3px 8px;margin-top:6px}
#sbModal .sb-feat.locked{opacity:.72}
#sbModal .sb-feat.locked .sb-feat__tick{border-style:dashed}

/* sticky summary */
#sbModal .sb-sum{position:sticky;bottom:0;background:#fff;border:1.5px solid #5E7E57;border-radius:18px;padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:0 -6px 24px rgba(51,64,47,.10);margin-top:6px}
#sbModal .sb-sum__c{font-weight:800;color:#243447}
#sbModal .sb-sum__c em{font-style:normal;color:#5E7E57}
#sbModal .sb-sum__d{display:flex;gap:5px}
#sbModal .sb-sum__d i{width:11px;height:11px;border-radius:50%;background:#EAE2D4;display:block}
#sbModal .sb-sum__d i.on{background:#5E7E57}
#sbModal .sb-sum .sb-go{margin-left:auto}
#sbModal .sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font:inherit;font-weight:800;font-size:.94rem;padding:12px 22px;cursor:pointer;border:2px solid transparent;line-height:1;min-height:46px}
#sbModal .sb-btn--sage{background:#5E7E57;color:#fff}
#sbModal .sb-btn--sage:hover{background:#4d6a47}
#sbModal .sb-btn--ghost{background:#fff;color:#5E7E57;border-color:#EAE2D4}
#sbModal .sb-btn--ghost:hover{border-color:#7d9e77}
#sbModal .sb-btn[disabled]{opacity:.45;cursor:not-allowed}
#sbModal .sb-swap{display:flex;flex-direction:column;gap:8px;margin:14px 0}
#sbModal .sb-swap label{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #EAE2D4;border-radius:12px;padding:12px 14px;cursor:pointer;font-size:.92rem;min-height:46px}
#sbModal .sb-swap label:hover{border-color:#7d9e77}
#sbModal .sb-swap input:checked+span{font-weight:800;color:#243447}
#sbModal .sb-note{display:flex;gap:9px;background:#FBF6EC;border-radius:14px;padding:13px 16px;font-size:.86rem;color:#78766c;margin-top:14px}
#sbModal .sb-note svg{width:16px;height:16px;color:#5E7E57;flex:none;margin-top:2px}
#sbModal .sb-mact{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media (max-width:900px){ #sbModal .sb-feats{grid-template-columns:1fr 1fr} }
@media (max-width:560px){
  #sbModal .sb-box{padding:18px;border-radius:20px;max-height:96vh}
  #sbModal .sb-feats{grid-template-columns:1fr}
  #sbModal .sb-sum{position:sticky;bottom:0;flex-direction:column;align-items:stretch;gap:10px}
  #sbModal .sb-sum .sb-go{margin-left:0;width:100%}
  #sbModal .sb-mact .sb-btn{width:100%}
}
#sb-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#243447;color:#fff;font-weight:700;font-size:.9rem;padding:13px 22px;border-radius:999px;box-shadow:0 16px 40px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.28s;z-index:100002;max-width:88vw;text-align:center}
#sb-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){#page-subscription *,#sbModal *{animation:none !important;transition:none !important}}