.page-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding-bottom: var(--space-10); }

/* ---------- Home (redesign: Main.dc.html) ---------- */
.home-hero { max-width: 1200px; margin: 0 auto; padding: 72px 24px 40px; text-align: center; }
.home-pill { display: inline-block; margin: 0 0 24px; padding: 6px 14px; background: var(--color-action-primary-surface); color: var(--color-action-primary-hover); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; }
.home-hero h1 { margin: 0 auto; max-width: 900px; font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 7vw, 88px); line-height: .98; letter-spacing: -.035em; color: var(--color-text-primary); }
.home-sub { margin: 24px auto 0; max-width: 560px; font-size: 19px; line-height: 1.5; color: var(--color-text-secondary); }

.home-search { margin: 40px auto 0; max-width: 720px; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); box-shadow: var(--shadow-search); }
.home-search input { flex: 1 1 280px; min-width: 0; border: 0; outline: none; padding: 16px 18px; font-family: inherit; font-size: 18px; background: transparent; color: var(--color-text-primary); }
.home-search button { flex: 0 0 auto; min-height: 56px; padding: 0 28px; border: 0; border-radius: 14px; background: var(--color-action-primary); color: #FFFFFF; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.home-search button:hover { background: var(--color-action-primary-hover); }

.home-popular { margin: 18px auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-muted); }
.home-popular span { padding: 10px 4px; }
.home-trust { margin: 20px 0 0; font-size: 14px; color: var(--color-text-muted); }

.home-section { max-width: 1200px; margin: 0 auto; padding: 56px 24px; }
.home-section h2 { margin: 0 0 24px; font-family: var(--font-display); font-size: clamp(30px, 4vw, 36px); font-weight: 700; letter-spacing: -.02em; color: var(--color-text-primary); }

.home-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.home-steps__num { margin: 0; font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--color-action-primary); }
.home-steps h3 { margin: 12px 0 8px; font-size: 20px; color: var(--color-text-primary); }
.home-steps p { margin: 0; color: var(--color-text-secondary); line-height: 1.5; }

.home-band { background: var(--color-surface-dark); color: #FFFFFF; border-radius: var(--radius-band); padding: 56px 40px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.home-band h2 { margin: 0; font-family: var(--font-display); font-size: clamp(32px, 4vw, 44px); line-height: 1.05; letter-spacing: -.02em; color: #FFFFFF; }
.home-band__copy { flex: 1 1 380px; }
.home-band__copy p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: #C3C8D2; }
.home-band__card { flex: 1 1 320px; background: var(--color-surface-dark-2); border-radius: var(--radius-card); padding: 28px; }
.home-band__card-name { margin: 0; color: #C3C8D2; font-size: 14px; }
.home-band__prices { margin-top: 16px; display: flex; gap: 32px; flex-wrap: wrap; }
.home-band__prices p { margin: 0; font-size: 13px; color: #A3A9B5; }
.home-band__prices strong { display: block; margin-top: 4px; font-size: 34px; font-weight: 600; color: #FFFFFF; }
.home-band__cta { margin-top: 24px; display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: var(--radius-control); background: var(--color-brand-expression); color: var(--color-surface-dark); text-decoration: none; font-weight: 600; font-size: 16px; }

.home-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.home-benefits h3 { margin: 0 0 8px; font-size: 17px; color: var(--color-text-primary); }
.home-benefits p { margin: 0; color: var(--color-text-secondary); line-height: 1.5; }

.account-menu { position: fixed; z-index: 50; min-width: 200px; background: var(--color-surface-raised); border: var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); padding: var(--space-2); }
.account-menu__email { margin: 0; padding: var(--space-3) var(--space-3) var(--space-2); font-size: 12px; color: var(--color-text-secondary); border-bottom: var(--border-default); margin-bottom: var(--space-2); }
.account-menu a, .account-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; color: var(--color-text-primary); text-decoration: none; cursor: pointer; }
.account-menu__divider { height: 1px; background: var(--color-border-subtle); margin: var(--space-2) 0; }
.account-menu a:hover, .account-menu button:hover { background: var(--color-interaction-surface); }
/* Redesign: .cart-icon is now a dark pill (see base.css). Pulse kept with the new count badge. */

/* Cart drawer — slides in from the left per explicit design direction */
.cart-drawer-overlay { position: fixed; inset: 0; background: rgba(16, 19, 18, 0.45); z-index: 40; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--color-surface-raised); z-index: 41; transform: translateX(100%); transition: transform var(--duration-standard) var(--ease-standard); overflow-y: auto; box-shadow: var(--shadow-overlay); }
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6) var(--space-6) var(--space-4); border-bottom: var(--border-default); }
.cart-drawer__header h2 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.cart-drawer__header button { border: 0; background: transparent; font-size: 16px; color: var(--color-text-secondary); cursor: pointer; padding: var(--space-2); }
.cart-drawer__header button:hover { color: var(--color-text-primary); }

.cart-drawer__empty { padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.cart-drawer__empty p { margin: 0; color: var(--color-text-secondary); }

.cart-drawer__items { padding: var(--space-2) var(--space-6) 0; display: flex; flex-direction: column; }
.cart-drawer__item { padding: var(--space-4) 0; border-bottom: var(--border-default); position: relative; }
.cart-drawer__item-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; border: 0; background: transparent; padding: 0; padding-right: 64px; cursor: pointer; text-align: left; }
.cart-drawer__item-row:hover .cart-drawer__item-name strong { text-decoration: underline; }
.cart-drawer__item-name { display: flex; flex-direction: column; }
.cart-drawer__item-name strong { font-size: 15px; color: var(--color-text-primary); }
.cart-drawer__item-package { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }
.cart-drawer__item-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.cart-drawer__item-price { font-size: 14px; font-weight: 600; }
.cart-drawer__chevron { color: var(--color-text-secondary); font-size: 14px; }
.cart-drawer__remove { position: absolute; top: var(--space-4); right: 0; border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 12px; padding: var(--space-1); text-decoration: underline; text-underline-offset: 2px; }
.cart-drawer__remove:hover { color: var(--color-error); }

.cart-drawer__bundle-options { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.cart-drawer__bundle-option { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); cursor: pointer; }
.cart-drawer__bundle-option:has(input:checked) { border-color: var(--color-text-primary); background: var(--color-brand-expression-surface); }
.cart-drawer__bundle-option input { margin-top: 3px; accent-color: var(--color-interaction); }
.cart-drawer__bundle-text { flex: 1; display: flex; flex-direction: column; }
.cart-drawer__bundle-label { font-size: 13px; font-weight: 600; }
.cart-drawer__bundle-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }
.cart-drawer__bundle-price { font-size: 13px; font-weight: 600; white-space: nowrap; }

.cart-drawer__mock-note { margin: var(--space-4) var(--space-6) 0; font-size: 11px; color: var(--color-text-secondary); font-style: italic; }
.cart-drawer__subtotal { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); margin-top: var(--space-2); border-top: var(--border-default); font-size: 16px; }
.cart-drawer__status { margin: 0; padding: 0 var(--space-6); color: var(--color-text-secondary); font-size: 13px; }
.cart-drawer__actions { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); }
.cart-drawer__actions .button { width: 100%; justify-content: center; }

.cart-drawer__back { border: 0; background: transparent; color: var(--color-text-primary); font-size: 14px; font-weight: 600; cursor: pointer; padding: var(--space-2) 0; }
.cart-drawer__back:hover { text-decoration: underline; }
.cart-drawer__auth { padding: var(--space-6); }
.cart-drawer__auth-heading { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.cart-drawer__auth-lede { margin: 0 0 var(--space-6); color: var(--color-text-secondary); font-size: 14px; }
.cart-drawer__auth #cart-auth-form { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-5); }
.cart-drawer__auth #cart-auth-form .button--primary { width: 100%; justify-content: center; margin-top: var(--space-2); }

@media (max-width: 720px) {
  .home-hero { padding: 56px 24px 32px; }
  .home-band { padding: 40px 24px; }
  .home-search button { flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }
}

/* (tld-menu removed — dead mock style) */