/*==============================================================================
 * idea-detail.css — Presentation for the standalone Idea Detail page.
 *
 * The design layer for the IdeaDetailTemplate. It is intentionally swappable
 * (a future IdeaDetailTemplateV2 / Canva stylesheet can replace this file
 * without touching the template.html/js or any business logic).
 * Scope is isolated under `.idea-detail*` and reuses the brand `var(--*)`
 * tokens from style.css. Basic responsive structure only — no final polish.
 *============================================================================*/

.idea-detail-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 24px; position: sticky; top: 0; z-index: 20;
  background: var(--navy); color: #fff;
}
.idea-detail-bar .brand { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; }
.idea-detail-bar .brand a { color: var(--gold-light); text-decoration: none; }
.idea-detail-bar .bar-links { display: flex; align-items: center; gap: 16px; }
.idea-detail-bar .bar-links a { color: #fff; text-decoration: none; font-size: 0.9rem; }
.idea-detail-bar .bar-links button { padding: 8px 16px; border-radius: var(--radius-pill); background: var(--gold); color: #fff; border: none; cursor: pointer; font-weight: 600; }

.idea-detail {
  max-width: 1080px; margin: 0 auto; padding: 12px 24px 56px;
  font-family: var(--font-body, sans-serif); color: var(--text);
}

.idea-detail-hero { text-align: center; padding: 8px 0 30px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; }
.idea-detail-hero-media { max-width: 100%; display: flex; justify-content: center; margin: 0 auto 20px; }
.idea-detail-hero-media img { max-height: clamp(180px, 30vh, 360px); width: auto; height: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.idea-detail-kicker { font-size: clamp(0.68rem, 0.9vw, 0.8rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; }
.idea-detail-hero h1 { font-family: var(--font-heading); font-size: clamp(1.5rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; color: var(--navy); line-height: 1.2; margin: 0 0 10px; }
.idea-detail-hook { font-style: italic; color: #3a4556; font-size: clamp(0.9rem, 1.4vw, 1.08rem); line-height: 1.55; max-width: 680px; margin: 0 auto 16px; }
.idea-detail-stats { display: flex; gap: clamp(10px, 2vw, 26px); justify-content: center; flex-wrap: wrap; margin: 0; font-size: clamp(0.75rem, 1vw, 0.86rem); color: var(--muted); }
.idea-detail-stats > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.idea-detail-stats dt { color: var(--muted); font-size: 0.8em; }
.idea-detail-stats dd { color: var(--navy); font-weight: 700; margin: 2px 0 0; }

.idea-detail-section-title { font-size: clamp(0.72rem, 1vw, 0.9rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-dark); margin: 0 0 clamp(10px, 1.4vw, 18px); }

.idea-detail-about, .idea-detail-common-plan, .idea-detail-how-it-works,
.idea-detail-what-you-get, .idea-detail-chat { margin-bottom: 28px; }
.idea-detail-prose { font-size: clamp(0.9rem, 1.3vw, 1.02rem); line-height: 1.7; color: var(--text); }
.idea-detail-how-list, .idea-detail-wyg-list { padding-left: 1.25em; margin: clamp(6px,1vw,12px) 0; }
.idea-detail-how-list li, .idea-detail-wyg-list li { margin-bottom: 8px; }

.idea-detail-growth { text-align: center; margin-bottom: 28px; }
.idea-detail-growth-flow { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.4vw, 20px); flex-wrap: wrap; margin-bottom: 10px; }
.idea-detail-growth-step { display: flex; flex-direction: column; align-items: center; }
.idea-detail-growth-step b { font-size: clamp(0.85rem, 1.2vw, 1.05rem); font-weight: 800; color: var(--navy); letter-spacing: 0.02em; }
.idea-detail-growth-step em { font-size: clamp(0.7rem, 1vw, 0.85rem); color: var(--teal); }
.idea-detail-growth-arrow { font-size: clamp(0.75rem, 1.1vw, 0.95rem); color: var(--muted); }
.idea-detail-growth-note { font-size: 0.86rem; color: var(--muted); }

.idea-detail-plans { margin-bottom: 32px; }
.idea-detail-plans-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(14px, 2vw, 26px); }
.idea-detail-plan-card { border: 1px solid var(--rule); border-radius: var(--radius-md); padding: clamp(16px, 2vw, 26px); background: var(--surface-2); display: flex; flex-direction: column; gap: 12px; }
.idea-detail-plan-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.idea-detail-plan-head h3 { margin: 0; color: var(--navy); font-size: 1.05rem; }
.idea-detail-plan-price { font-weight: 700; color: var(--gold-dark); font-size: 1rem; }
.idea-detail-plan-note { font-size: 0.72rem; font-weight: 700; color: var(--teal); letter-spacing: 0.02em; }
.idea-detail-plan-content { font-size: clamp(0.86rem, 1.15vw, 0.96rem); line-height: 1.6; color: var(--text); }
.idea-detail-plan-content h3, .idea-detail-plan-content h4 { color: var(--navy); margin: 8px 0 4px; }
.idea-detail-plan-content ul, .idea-detail-plan-content ol { padding-left: 1.25em; margin: 6px 0; }
.idea-detail-plan-content li { margin-bottom: 4px; }
.idea-detail-plan-owned { color: var(--teal); font-weight: 600; }
.idea-detail-plan-owned a { color: var(--teal); }
.idea-detail-plan-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Compact plan card + collapsible detail panel (Idea/Plan content-separation
   fix): the card shows title/price/short preview by default; the gated
   detailed content, media and files stay behind "View details" so comparing
   plans doesn't mean scrolling a full document per card. */
.idea-detail-plan-toggle, .plan-toggle {
  align-self: flex-start; padding: 8px 16px; font-size: 0.85rem; font-weight: 700;
  color: var(--navy); background: transparent; border: 1.5px solid var(--rule);
  border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.idea-detail-plan-toggle:hover, .plan-toggle:hover { border-color: var(--gold); color: var(--gold-dark); }
.idea-detail-plan-detail-panel, .plan-detail-panel {
  display: flex; flex-direction: column; gap: 12px;
  animation: ipPlanPanelReveal var(--dur-base, 0.2s) var(--ease-premium, ease) both;
}
.idea-detail-plan-detail-panel[hidden], .plan-detail-panel[hidden] { display: none; }
@keyframes ipPlanPanelReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .idea-detail-plan-detail-panel, .plan-detail-panel { animation: none; }
}

/* ---- Browse Plans page (public/plans.html) ---- */
.plans-search-row { max-width: 480px; margin: 0 auto 28px; }
.plans-search-row input {
  width: 100%; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--radius-md);
  font-size: 0.95rem; font-family: inherit; background: var(--surface);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.plans-search-row input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169,129,46,0.15); }
.plans-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(14px, 2vw, 22px); }
.plans-empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.plans-empty a { color: var(--gold-dark); font-weight: 700; }
.idea-detail-plan-hook { color: var(--text); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.plans-more-note { text-align: center; color: var(--muted); font-size: 0.88rem; margin: -14px 0 24px; }

/* Small 16:9 thumbnail on each Browse Plans result -- only ever rendered
   when the idea has a real image_url (see plans.js); no placeholder/empty
   box is ever emitted for an idea without one, so there's nothing here to
   style for that case. object-fit:contain (not cover) so the real image
   is never cropped, matching the same rule used everywhere else on the
   site. */
.idea-detail-plan-card-img {
  display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-sm, 6px); background: var(--surface-2);
  margin: -4px 0 2px;
}
.idea-detail-plan-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Plan media — 16:9, no cropping. Rendered only when configured (the JS
   emits nothing at all when there is no media). */
.idea-detail-plan-media { display: flex; flex-direction: column; gap: 8px; }
.idea-detail-plan-media-item { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm, 6px); overflow: hidden; }
.idea-detail-plan-media-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.idea-detail-plan-media-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.idea-detail-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: clamp(11px, 1.5vw, 15px) clamp(20px, 2.6vw, 36px);
  font-size: clamp(0.9rem, 1.2vw, 1.02rem); font-weight: 700; cursor: pointer;
  background: transparent; color: var(--navy); border: 2px solid var(--navy);
  border-radius: var(--radius-pill); text-decoration: none; text-align: center;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.idea-detail-btn:hover { background: var(--navy); color: #fff; text-decoration: none; }
.idea-detail-btn-primary { background: var(--gold); color: #fff; border: none; }
.idea-detail-btn-primary:hover { background: var(--gold-dark); color: #fff; }

.idea-detail-cta { margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(18px, 2.4vw, 30px); border-top: 2px solid var(--navy); text-align: center; }
.idea-detail-cta-actions { display: flex; gap: clamp(10px, 1.5vw, 18px); justify-content: center; flex-wrap: wrap; }

.idea-detail-related { margin-top: 20px; }
.idea-detail-related-list { display: flex; flex-wrap: wrap; gap: 14px; }
.idea-detail-related-card { padding: 12px 18px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--surface); color: var(--navy); text-decoration: none; }

.idea-detail-error { text-align: center; padding: 40px 16px; }

/* ==============================================================================
 * Theme-integration pass (Stage 5/6, extended in the Customer Pages stage) —
 * dark header/hero + breadcrumb.
 * Scoped to `body.pg-idea-detail` (Idea Detail) and `body.pg-account`
 * (Profile/My Purchases/Requirements/Thank You) only: `.idea-detail-bar`,
 * `.idea-detail`, `.idea-detail-plan-*`, `.idea-detail-btn`, `.req-*`,
 * `.ty-*`, `.profile-*` etc. are shared verbatim across these 5 pages
 * (confirmed via grep across public/js/*.js before writing this) — nothing
 * below touches a bare (unscoped) selector, only its `.pg-idea-detail`/
 * `.pg-account`-prefixed counterpart, which affects only these pages.
 * ============================================================================*/
.pg-idea-detail .idea-detail-bar, .pg-account .idea-detail-bar{
  background:rgba(6,17,31,0.95);
  border-bottom:1px solid var(--line-dark);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.pg-idea-detail .idea-detail-bar .brand, .pg-account .idea-detail-bar .brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--font-heading);font-weight:700;letter-spacing:-0.01em;color:var(--gold-light);}
.pg-idea-detail .idea-detail-bar .bar-links a, .pg-account .idea-detail-bar .bar-links a{color:#c3c9dc;transition:color var(--dur-fast) ease;}
.pg-idea-detail .idea-detail-bar .bar-links a:hover, .pg-account .idea-detail-bar .bar-links a:hover{color:var(--gold-light);}
.pg-idea-detail .idea-detail-bar .bar-links button.btn-account, .pg-account .idea-detail-bar .bar-links button.btn-account{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.18);color:#fff;
  border-radius:var(--radius-pill);font-weight:600;
}
.pg-idea-detail .idea-detail-bar .bar-links button.btn-account:hover, .pg-account .idea-detail-bar .bar-links button.btn-account:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.3);}

/* Breadcrumb strip — sits directly under the header, visually continuous
   with it (same dark surface) so it reads as part of the site chrome, per
   the approved audit's "breadcrumb slot beneath the header" recommendation. */
.ip-breadcrumb{background:var(--surface-dark, #09192c);border-bottom:1px solid var(--line-dark, #284058);}
.ip-breadcrumb-inner{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 24px;font-size:0.82rem;}
.ip-breadcrumb-inner a{color:var(--muted, #99aabd);text-decoration:none;}
.ip-breadcrumb-inner a:hover{color:var(--gold-light);text-decoration:underline;}
.ip-breadcrumb-inner span[aria-current]{color:var(--cream, #f3eee2);font-weight:600;}
.ip-breadcrumb-sep{color:var(--line-dark, #284058);}

/* Hero — restyled to match the homepage's dark gradient hero (same tokens,
   same visual language), so this page reads as the same product. Content
   sections below stay on the existing light surface (unchanged), matching
   how the homepage itself only darkens header/hero/footer, not every
   section. */
.pg-idea-detail .idea-detail-hero, .pg-account .idea-detail-hero{
  text-align:center; padding:clamp(28px,5vw,48px) 24px; margin:0 0 28px; border-bottom:none;
  background:linear-gradient(165deg,var(--navy),var(--navy2));
  color:#fff;
}
.pg-idea-detail .idea-detail-hero-media img, .pg-account .idea-detail-hero-media img{border-radius:var(--radius-md);box-shadow:var(--shadow-md);}
.pg-idea-detail .idea-detail-kicker, .pg-account .idea-detail-kicker{color:var(--gold-light);}
.pg-idea-detail .idea-detail-hero h1, .pg-account .idea-detail-hero h1{color:#fff;}
.pg-idea-detail .idea-detail-hook, .pg-account .idea-detail-hook{color:#c3c9dc;}
.pg-idea-detail .idea-detail-stats, .pg-account .idea-detail-stats{color:#c3c9dc;}
.pg-idea-detail .idea-detail-stats dt, .pg-account .idea-detail-stats dt{color:#99aabd;}
.pg-idea-detail .idea-detail-stats dd, .pg-account .idea-detail-stats dd{color:var(--gold-light);}

/* Plan cards + buttons: same light surface as the rest of the site, just a
   touch more premium (shadow + hover lift) to match the homepage idea-card
   treatment, reusing existing tokens rather than inventing new ones. Also
   used by My Purchases, which renders the same .idea-detail-plan-card
   markup for each purchased plan (public/js/my-purchases.js). */
.pg-idea-detail .idea-detail-plan-card, .pg-account .idea-detail-plan-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-base) var(--ease-premium), transform var(--dur-base) var(--ease-premium);}
.pg-idea-detail .idea-detail-plan-card:hover, .pg-account .idea-detail-plan-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.pg-idea-detail .idea-detail-btn-primary, .pg-account .idea-detail-btn-primary{background:var(--gold);}
.pg-idea-detail .idea-detail-btn-primary:hover, .pg-account .idea-detail-btn-primary:hover{background:var(--gold-dark);}

/* ---- Profile card polish (Customer Pages stage) — .profile-* is only ever
   rendered by public/js/profile.js, so this is inherently page-specific,
   but kept under .pg-account for consistency with the rest of this section. */
.pg-account .profile-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(18px,3vw,28px);max-width:560px;margin:0 auto;}
.pg-account .profile-row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule);}
.pg-account .profile-row:last-of-type{border-bottom:none;}
.pg-account .profile-row span{color:var(--muted);}
.pg-account .profile-row strong{color:var(--navy);font-weight:700;}
.pg-account .profile-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-weight:600;color:var(--navy);}
.pg-account .profile-field input, .pg-account .profile-field select{padding:10px 12px;border:1px solid var(--rule);border-radius:var(--radius-sm,6px);font-size:0.95rem;font-family:inherit;font-weight:400;}
.pg-account .profile-field input:focus, .pg-account .profile-field select:focus{outline:none;border-color:var(--gold);}
.pg-account .profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.pg-account .profile-cancel{background:transparent;border:1.5px solid var(--rule-strong);color:var(--navy);padding:10px 20px;border-radius:var(--radius-pill);font-weight:700;cursor:pointer;}
.pg-account .profile-cancel:hover{border-color:var(--navy);}
.pg-account .profile-logout{background:transparent;border:1.5px solid var(--danger);color:var(--danger);padding:10px 20px;border-radius:var(--radius-pill);font-weight:700;cursor:pointer;}
.pg-account .profile-logout:hover{background:var(--danger);color:#fff;}
.pg-account .profile-msg{font-size:0.88rem;color:var(--teal);min-height:1.2em;}
.pg-account .profile-email-note{font-size:0.82rem;color:var(--muted);}

/* ---- Requirements wizard chrome polish (Customer Pages stage) ---- */
.pg-account .req-step-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.pg-account .req-choice-option.checked{background:#fdf6e6;}
.pg-account .req-nav-row .idea-detail-btn-primary{background:var(--gold);}

/* ---- Thank You dark hero + card polish (Customer Pages stage) — .ty-* is
   only ever rendered by public/js/thank-you.js. ---- */
.pg-account .ty-hero{
  background:linear-gradient(165deg,var(--navy),var(--navy2));
  color:#fff;border-bottom:none;border-radius:var(--radius-lg);margin:12px 0 28px;
  padding:clamp(28px,5vw,48px) 24px;
}
.pg-account .ty-hero h1{color:#fff;}
.pg-account .ty-sub{color:#c3c9dc;}
.pg-account .ty-order, .pg-account .ty-item{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.pg-account .ty-steps li{border-radius:var(--radius-md);}
.pg-account .ty-guide-slot{border-radius:var(--radius-md);}

/* ==============================================================================
 * Site-wide dark theme pass — every account/idea-detail-family page now
 * matches the homepage's dark palette (same --ink/--surface-dark*/--line-dark
 * tokens already used there, no new tokens). Previously only the header/hero
 * on these pages was dark; the main content area stayed on the light
 * --surface-2/--navy-text palette. This block re-themes that content area
 * only via color/background/border — no markup or JS touched anywhere.
 * ============================================================================*/
.pg-idea-detail .idea-detail, .pg-account .idea-detail{color:#c3c9dc;}
.pg-idea-detail .idea-detail-section-title, .pg-account .idea-detail-section-title{color:var(--gold-light);}
.pg-idea-detail .idea-detail-prose, .pg-account .idea-detail-prose{color:#c3c9dc;}
.pg-idea-detail .idea-detail-how-list, .pg-account .idea-detail-how-list,
.pg-idea-detail .idea-detail-wyg-list, .pg-account .idea-detail-wyg-list{color:#c3c9dc;}
.pg-idea-detail .idea-detail-growth-step b, .pg-account .idea-detail-growth-step b{color:#fff;}
.pg-idea-detail .idea-detail-growth-arrow, .pg-account .idea-detail-growth-arrow,
.pg-idea-detail .idea-detail-growth-note, .pg-account .idea-detail-growth-note{color:#8fa0b8;}
.pg-idea-detail .idea-detail-cta, .pg-account .idea-detail-cta{border-top-color:var(--line-dark);}

/* Plan cards */
.pg-idea-detail .idea-detail-plan-card, .pg-account .idea-detail-plan-card{background:var(--surface-dark);border-color:var(--line-dark);}
.pg-idea-detail .idea-detail-plan-card-img, .pg-account .idea-detail-plan-card-img{background:var(--surface-dark-2);}
.pg-idea-detail .idea-detail-plan-head h3, .pg-account .idea-detail-plan-head h3{color:#fff;}
.pg-idea-detail .idea-detail-plan-content, .pg-account .idea-detail-plan-content{color:#c3c9dc;}
.pg-idea-detail .idea-detail-plan-content h3, .pg-account .idea-detail-plan-content h3,
.pg-idea-detail .idea-detail-plan-content h4, .pg-account .idea-detail-plan-content h4{color:#fff;}
.pg-idea-detail .idea-detail-related-card, .pg-account .idea-detail-related-card{background:var(--surface-dark);border-color:var(--line-dark);color:#fff;}

/* Buttons/links on dark surfaces */
.pg-idea-detail .idea-detail-btn, .pg-account .idea-detail-btn{color:#fff;border-color:rgba(255,255,255,0.35);}
.pg-idea-detail .idea-detail-btn:hover, .pg-account .idea-detail-btn:hover{background:rgba(255,255,255,0.1);color:#fff;}

/* Browse Plans search input */
.pg-account .plans-search-row input{background:var(--surface-dark);border-color:var(--line-dark);color:#fff;}
.pg-account .plans-search-row input::placeholder{color:#7890a7;}
.pg-account .plans-empty{color:#8fa0b8;}
.pg-account .idea-detail-plan-hook{color:#c3c9dc;}
.pg-account .plans-more-note{color:#8fa0b8;}

/* Cart rows/summary (also rendered on these pages) */
.pg-idea-detail .cart-item-row, .pg-account .cart-item-row,
.pg-idea-detail .cart-summary, .pg-account .cart-summary{background:var(--surface-dark);border-color:var(--line-dark);}
.pg-idea-detail .cart-item-tier, .pg-account .cart-item-tier,
.pg-idea-detail .cart-total-row, .pg-account .cart-total-row{color:#fff;}
.pg-idea-detail .cart-item-idea, .pg-account .cart-item-idea{color:#8fa0b8;}

/* Profile */
.pg-account .profile-card{background:var(--surface-dark);border-color:var(--line-dark);}
.pg-account .profile-row{border-bottom-color:var(--line-dark);}
.pg-account .profile-row strong, .pg-account .profile-field{color:#fff;}
.pg-account .profile-field input, .pg-account .profile-field select{background:var(--surface-dark-2);border-color:var(--line-dark);color:#fff;}
.pg-account .profile-cancel{color:#fff;border-color:rgba(255,255,255,0.35);}

/* Requirements wizard */
.pg-account .req-step-card{background:var(--surface-dark);border-color:var(--line-dark);}
.pg-account .req-step-title{color:#fff;}
.pg-account .req-field{border-bottom-color:var(--line-dark);}
.pg-account .req-field .req-input{background:var(--surface-dark-2);border-color:var(--line-dark);color:#fff;}
.pg-account .req-choice-option{background:var(--surface-dark-2);border-color:var(--line-dark);color:#c3c9dc;}
.pg-account .req-choice-option.checked{background:rgba(212,173,99,0.16);border-color:var(--gold);color:#fff;}
.pg-account .req-info-block{background:rgba(47,145,121,0.14);border-color:var(--teal-light);color:#c3c9dc;}
.pg-account .req-language-option{background:var(--surface-dark-2);border-color:var(--line-dark);color:#fff;}
.pg-account .req-review-row{border-bottom-color:var(--line-dark);}
.pg-account .req-review-label{color:#fff;}
.pg-account .req-review-value{color:#c3c9dc;}
.pg-account .req-progress-track{background:var(--line-dark);}

/* Thank You */
.pg-account .ty-order, .pg-account .ty-guide-slot{background:var(--surface-dark);border-color:var(--line-dark);}
.pg-account .ty-order dd, .pg-account .ty-guide-slot h3{color:#fff;}
.pg-account .ty-steps h2, .pg-account .ty-guide h2{color:#fff;}
.pg-account .ty-steps li{background:var(--surface-dark);border-color:var(--line-dark);color:#c3c9dc;}
.pg-account .ty-guide-slot li{color:#c3c9dc;}

@media (max-width:700px){
  .ip-breadcrumb-inner{padding:8px 16px;font-size:0.78rem;}
}

@media (max-width: 700px) {
  .idea-detail-bar { padding: 12px 16px; }
  .idea-detail { padding: 10px 14px 48px; }
  .idea-detail-plans-list { grid-template-columns: minmax(0, 1fr); }
  .idea-detail-cta-actions { flex-direction: column; align-items: stretch; }
  .idea-detail-btn { width: 100%; justify-content: center; }
  .idea-detail-related-list { flex-direction: column; }
}

/* Cart modal rows (reusing the existing client-side cart markup) -- kept in
   sync with the equivalent, richer rules in style.css (Checkout/Cart
   theme-integration pass) since this file loads after style.css on
   idea-detail.html/my-purchases.html/profile.html/requirements.html/
   thank-you.html and would otherwise override it with a plainer look. */
.cart-item-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--surface-2); margin-bottom: 10px; flex-wrap: wrap; transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.cart-item-row:hover { box-shadow: var(--shadow-sm); border-color: var(--rule-strong); }
.cart-item-row:last-child { margin-bottom: 0; }
.cart-item-info { display: flex; flex-direction: column; gap: 2px; }
.cart-item-tier { font-weight: 700; color: var(--navy); }
.cart-item-idea { color: var(--muted); font-size: 0.85rem; }
.cart-item-includes { font-size: 0.76rem; color: var(--teal); margin-top: 2px; }
.cart-item-remove { background: transparent; border: 1px solid var(--danger); color: var(--danger); cursor: pointer; border-radius: var(--radius-pill); padding: 6px 14px; font-size: 0.78rem; font-weight: 700; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.cart-item-remove:hover { background: var(--danger); color: #fff; }
.cart-summary { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--surface-2); }
.cart-summary-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.9rem; }
.cart-total-row { font-weight: 700; font-size: 1.1rem; color: var(--navy); margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--rule-strong); }
.cart-badge { position: absolute; top: -6px; right: -6px; background: var(--gold); color: #fff; font-size: 0.68rem; font-weight: 700; border-radius: 9px; padding: 0 4px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
/* ---- Requirements Wizard (Phase 2C) ---- */
.req-progress-wrap { margin-bottom: 22px; }
.req-progress-label { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.req-progress-track { height: 8px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.req-progress-fill { height: 100%; background: var(--gold); border-radius: 99px; transition: width 0.3s ease; }
.req-save-indicator { font-size: 0.78rem; color: var(--teal); margin-top: 8px; min-height: 1.2em; }
.req-save-indicator.error { color: #b3413a; }

.req-step-card { background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: clamp(18px, 3vw, 30px); margin-bottom: 20px; }
.req-step-title { font-family: var(--font-heading); color: var(--navy); font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0 0 6px; }
.req-step-desc { color: var(--muted); font-size: 0.92rem; margin: 0 0 20px; }

.req-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.req-field .req-input { width: 100%; max-width: 480px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm, 6px); font-size: 0.92rem; font-family: inherit; }
.req-field textarea.req-input { min-height: 100px; resize: vertical; }
.req-field .req-input:focus { outline: none; border-color: var(--gold); }
.req-field:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.req-field-desc { font-size: 0.85rem; color: var(--muted); margin: -2px 0 8px; }
.req-optional-tag { font-weight: 400; color: var(--muted); font-size: 0.78rem; text-transform: none; letter-spacing: 0; }

.req-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.req-choice-option { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; font-size: 0.86rem; background: var(--surface); transition: border-color 0.15s, background 0.15s; }
.req-choice-option:hover { border-color: var(--gold); }
.req-choice-option.checked { border-color: var(--gold); background: #fdf6e6; font-weight: 600; }
.req-choice-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.req-info-block { background: #eef5f2; border: 1px solid var(--teal); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.9rem; color: var(--text); }

.req-field-meta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }
.req-skip-toggle, .req-dontknow-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); cursor: pointer; }
.req-skip-toggle input, .req-dontknow-toggle input { width: 16px; height: 16px; }

.req-nav-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.req-nav-row .idea-detail-btn { min-width: 110px; text-align: center; }

.req-language-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0; }
.req-language-option { padding: 18px; text-align: center; border: 2px solid var(--rule); border-radius: var(--radius-md); cursor: pointer; font-weight: 700; color: var(--navy); background: var(--surface); }
.req-language-option:hover { border-color: var(--gold); }

.req-review-section { margin-bottom: 20px; }
.req-review-step-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold-dark); margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; }
.req-review-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem; }
.req-review-label { font-weight: 700; color: var(--navy); }
.req-review-value { color: var(--text); white-space: pre-wrap; }
.req-review-edit-link { font-size: 0.78rem; font-weight: 700; color: var(--teal); cursor: pointer; background: none; border: none; padding: 0; }

.req-submitted-card { text-align: center; padding: 40px 16px; }

@media (max-width: 700px) {
  .req-review-row { grid-template-columns: 1fr; }
  .req-nav-row { flex-direction: column-reverse; align-items: stretch; }
}
/* ---- Thank You page (premium) ---- */
.ty-loading{color:var(--muted);padding:30px 0;text-align:center;}
.ty-hero{text-align:center;padding:clamp(26px,4vw,56px) 0 clamp(20px,2vw,34px);border-bottom:1px solid var(--rule);}
.ty-hero-img{width:100%;max-width:760px;margin:0 auto 22px;display:block;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}
.ty-hero h1{font-size:clamp(1.4rem,2.6vw,2.3rem);color:var(--navy);line-height:1.25;}
.ty-sub{color:var(--muted);font-size:clamp(0.95rem,1.4vw,1.15rem);margin:10px 0 0;font-style:italic;}
.ty-order{max-width:760px;margin:0 auto 28px;border:1px solid var(--rule);border-radius:var(--radius-md);padding:16px 20px;background:var(--paper);}
.ty-order dl{margin:0;}
.ty-order div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;}
.ty-order dt{color:var(--muted);font-weight:600;}
.ty-order dd{color:var(--navy);font-weight:700;text-align:right;word-break:break-word;}
.ty-progress{color:var(--teal);font-weight:700;margin:10px 0 0;font-size:0.95rem;}
.ty-steps{max-width:760px;margin:0 auto 28px;}
.ty-steps h2,.ty-guide h2{color:var(--navy);font-size:1.25rem;margin-bottom:10px;}
.ty-steps ol{margin:0;padding-left:0;list-style:none;counter-reset:ty;}
.ty-steps li{padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius-md);margin-bottom:10px;background:var(--surface-2,#fff);}
.ty-cta{text-align:center;margin:22px 0 8px;}
.ty-cta .idea-detail-btn{margin:0 8px;}
.ty-guide{margin-top:26px;}
.ty-guide-note{color:var(--muted);font-size:0.85rem;margin:0 0 12px;}
.ty-guide-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.ty-guide-slot{border:1px solid var(--rule);border-radius:var(--radius-md);padding:14px 16px;background:var(--paper);}
.ty-guide-slot h3{color:var(--navy);font-size:1rem;margin:0 0 8px;}
.ty-guide-slot ul{margin:0;padding-left:0;list-style:none;}
.ty-guide-slot li{padding:4px 0;font-size:0.9rem;color:var(--text);}
.ty-guide-slot li::before{content:'•';color:var(--gold);margin-right:8px;}
@media (max-width:600px){.ty-order div{flex-direction:column;align-items:flex-start;}.ty-cta .idea-detail-btn{width:100%;}}
/* ---- Thank You multi-item + mobile hero refinement ---- */
.ty-item{border:1px solid var(--rule);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:12px;background:var(--paper);}
.ty-item-head{color:var(--navy);font-weight:700;font-size:1.05rem;margin:0 0 8px;}
.ty-item dl{margin:0;}
.ty-item .row{display:flex;justify-content:space-between;gap:12px;}
.ty-item dt{color:var(--muted);font-weight:600;}
.ty-item dd{color:var(--navy);font-weight:700;text-align:right;word-break:break-word;}
.ty-item-cta{margin-top:10px;}
.ty-total{border-top:2px solid var(--gold);padding:8px 0;display:flex;justify-content:space-between;align-items:center;color:var(--navy);font-weight:700;}
@media (max-width:600px){
  .ty-hero-img{max-width:86%;margin-bottom:16px;}
  .ty-item .row{flex-direction:column;align-items:flex-start;}
  .ty-item-cta .idea-detail-btn{width:100%;}
}
.ty-item dl div{display:flex;justify-content:space-between;gap:10px;padding:2px 0;}
@media (max-width:600px){ .ty-item dl div{flex-direction:column;align-items:flex-start;} .ty-item-cta .idea-detail-btn{width:100%;} }
.ty-item-head,.ty-item dd{overflow-wrap:anywhere;word-break:break-word;}
@media (max-width:600px){
  .ty-guide-grid{grid-template-columns:1fr;}
  .ty-item-cta .idea-detail-btn{display:block;width:100%;box-sizing:border-box;}
  .ty-cta .idea-detail-btn{width:100%;}
}
.ty-order,.ty-item,.ty-hero,.ty-cta{box-sizing:border-box;max-width:100%;}
@media (max-width:600px){
  body{margin:0;overflow-x:hidden;}
  .ty-item-cta .idea-detail-btn{display:block !important;width:100% !important;box-sizing:border-box;}
}
@media (max-width:600px){
  html,body{margin:0;width:100%;max-width:100%;overflow-x:hidden;}
  .ty-item{display:flex;flex-direction:column;}
  .ty-item-cta{width:100%;min-width:0;}
  .ty-item-cta .idea-detail-btn{display:block !important;width:100% !important;box-sizing:border-box;}
}

/* ==============================================================================
 * Major Design Upgrade pass — editorial rhythm + status pills + requirements
 * step indicator + cart/checkout labels. Reuses existing tokens only.
 * ============================================================================*/

/* Idea Detail: thin gold-rule dividers between major content sections,
   matching the .ip-legal-section divider language used on legal pages. */
.pg-idea-detail .idea-detail-common-plan,
.pg-idea-detail .idea-detail-how-it-works,
.pg-idea-detail .idea-detail-what-you-get,
.pg-idea-detail .idea-detail-growth,
.pg-idea-detail .idea-detail-plans{
  padding-top:24px;border-top:1px solid var(--rule);
}

/* Status pills: FREE / Locked-price / Purchased / Being Prepared all read as
   an intentional badge rather than plain colored text — used on both Idea
   Detail's plan cards and My Purchases' identical markup. */
.pg-idea-detail .idea-detail-plan-price, .pg-account .idea-detail-plan-price{
  display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--radius-pill);
  font-size:0.82rem;font-weight:700;background:var(--surface);border:1px solid var(--rule);
}
.pg-idea-detail .idea-detail-plan-owned .idea-detail-plan-price,
.pg-account .idea-detail-plan-owned{color:var(--teal);}

/* Requirements: numbered-circle step indicator next to the existing
   progress bar (label text unchanged, just visually anchored). */
.pg-account .req-progress-label{display:flex;align-items:center;gap:8px;}
.pg-account .req-progress-label::before{
  content:"";width:22px;height:22px;border-radius:50%;background:var(--gold);
  flex:none;
}

/* Cart / Checkout: "Order Summary" label + trust microcopy — copy/visual
   only, no logic change (store.js untouched). */
.cart-summary::before{
  content:"Order Summary";display:block;font-size:0.72rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px;
}
.pf-trust-line{display:flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--muted);margin-top:8px;justify-content:center;}