:root{
  /* Brand — navy + gold + teal. These 10 vars are also injected server-side from the
     site_theme table (see server/index.js serveThemedHtml) and the Appearance admin
     tab, so they stay at their original values here — that's the single source of
     truth for the live palette, not this file. */
  --navy:#12213A; --navy2:#0a1626; --gold:#a9812e; --gold-light:#cda856;
  --paper:#faf9f5; --text:#1b2130; --muted:#5c6273; --teal:#1f6f5c;
  --rule:#dbd5c6; --wa-green:#1f7a4d;

  /* Supplementary tokens — the "premium polish" layer: derived from the brand colors
     above for hover/elevation/surface detail, but not part of the admin-controlled
     palette, so they're safe to refine here without fighting the theme system. */
  --navy-soft:#1c2f4f; --gold-dark:#8a691f; --teal-light:#2f9179;
  --surface:#ffffff; --surface-2:#f3f1ea; --rule-strong:#c9c2ac;
  --danger:#8c3f36;

  /* Type */
  --font-heading:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Spacing scale (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:48px; --space-9:64px;

  /* Radius + elevation */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,29,51,0.06), 0 1px 3px rgba(16,29,51,0.08);
  --shadow-md:0 6px 16px rgba(16,29,51,0.10), 0 2px 6px rgba(16,29,51,0.06);
  --shadow-lg:0 18px 40px rgba(16,29,51,0.18), 0 6px 16px rgba(16,29,51,0.08);

  --ease-premium:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:150ms; --dur-base:220ms; --dur-slow:340ms;

  /* ---------- Theme-integration tokens (Sept 2026 dark-header/footer pass) ----------
     New surface-tier variables layered on top of the existing brand vars above —
     additive only, nothing above this line was changed. Maps the approved dark
     theme reference 1:1 onto tokens already in this file (gold/gold-light/teal/
     muted/rule) plus three new "ink" tiers for depth on dark surfaces (header,
     footer, and — in later phases — idea-detail/category chrome). */
  --ink:#06111f; --ink-2:#0a1a2c;
  --surface-dark:#09192c; --surface-dark-2:#0d2037; --surface-dark-3:#102844;
  --line-dark:#284058; --line-dark-soft:#1b3047;
  --cream:#f3eee2;
  
  /* ---------- Admin UI Redesign Variables (Premium) ---------- */
  --admin-sidebar-width: 260px;
  --admin-sidebar-collapsed-width: 64px;
  --admin-topbar-height: 64px;
  --admin-activity-panel-width: 320px;
  --admin-sidebar-bg: var(--navy);
  --admin-sidebar-bg-hover: rgba(255, 255, 255, 0.05);
  --admin-sidebar-bg-active: rgba(205, 168, 86, 0.15);
  --admin-sidebar-text: #ffffff;
  --admin-sidebar-text-muted: rgba(255, 255, 255, 0.7);
  --admin-sidebar-accent: var(--gold);
  --admin-sidebar-accent-glow: rgba(205, 168, 86, 0.3);
  --admin-topbar-bg: var(--surface);
  --admin-topbar-border: var(--rule-strong);
  --admin-topbar-text: var(--text);
  --admin-main-bg: var(--paper);
  --admin-activity-bg: var(--surface);
  --admin-activity-border: var(--rule);
  --admin-activity-text: var(--text);
  --admin-breadcrumb-subtitle: var(--muted);
  --admin-user-avatar-bg: var(--gold);
  --admin-user-avatar-text: #fff;
  --admin-badge-bg: var(--teal);
  --admin-badge-text: #fff;
  --admin-overlay-bg: rgba(18, 33, 58, 0.7);
}

*{box-sizing:border-box;}
.hidden{display:none !important;}
/* Visually hidden but present in the DOM/accessibility tree — used for the
   server-rendered SEO fallback content (see #seoIdeasFallback in
   server/index.js) so search engines and no-JS/screen-reader users get the
   same real idea text the interactive carousel shows, without a visible
   duplicate on screen. Standard sr-only pattern, not display:none. */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px;}
/* Site-wide dark theme base — every customer-facing page now shares the
   same --ink background as the homepage (see the per-page component
   overrides in idea-detail.css/policy.css for the content-area surfaces
   layered on top of this base). */
body.pg-home, body.pg-idea-detail, body.pg-account{background:var(--ink);}
a{color:var(--gold-dark);}

h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;letter-spacing:-0.01em;color:var(--navy);}

/* ---------- Focus & interaction baseline ---------- */
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:4px;}
button, a, input, select, textarea{font-family:inherit;}
button{touch-action:manipulation;}
button:not(:disabled), a[href]{cursor:pointer;}
button:disabled{cursor:not-allowed;opacity:0.6;}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Header ---------- */
.site-header{
  background:rgba(6,17,31,0.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:80;
  border-bottom:1px solid var(--line-dark);
  box-shadow:none;
  transition:box-shadow var(--dur-base) var(--ease-premium);
}
/* Toggled by a passive scroll listener in app.js (wireHeaderChrome()) once
   the user scrolls past a small threshold — purely cosmetic depth cue,
   matches the approved dark-theme reference's nav-scrolled treatment. */
.site-header.nav-scrolled{box-shadow:0 12px 24px rgba(0,0,0,0.34);}
.header-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{height:32px;width:32px;object-fit:contain;flex:none;}
.brand-mark{font-family:var(--font-heading);font-weight:700;font-size:1.35rem;letter-spacing:-0.01em;}
.brand-mark .dot{color:var(--gold-light);}
.header-right{display:flex;align-items:center;gap:10px;}
.header-nav{display:flex;align-items:center;gap:22px;}
.header-nav a{color:#c3c9dc;text-decoration:none;font-size:0.9rem;font-weight:600;transition:color var(--dur-fast) ease;}
.header-nav a:hover{color:var(--gold-light);}

/* ---------- Mobile navigation (hamburger) ----------
   Previously .header-nav simply had display:none under 900px with no
   replacement — real links vanished from mobile entirely. This panel
   restores the same destinations at all widths. */
.menu-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  background:transparent;border:1px solid var(--line-dark);border-radius:var(--radius-md);
  color:var(--cream);
  transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease;
}
.menu-toggle:hover{border-color:var(--gold);background:rgba(255,255,255,0.06);}
.menu-toggle svg{width:20px;height:20px;}
.mobile-nav-panel{display:none;}
.mobile-nav-panel.open{
  display:block;
  border-top:1px solid var(--line-dark);
  background:var(--surface-dark);
}
.mobile-nav-panel .wrap{display:flex;flex-direction:column;gap:2px;padding:10px 20px 16px;}
.mobile-nav-panel a{
  padding:12px 4px;color:var(--cream);text-decoration:none;
  font-size:0.92rem;font-weight:600;border-bottom:1px solid var(--line-dark-soft);
}
.mobile-nav-panel a:last-child{border-bottom:none;}
.mobile-nav-panel a:hover, .mobile-nav-panel a:focus-visible{color:var(--gold-light);}

@media (max-width:900px){
  .menu-toggle{display:inline-flex;}
}

.btn-account{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;padding:8px 14px;border-radius:var(--radius-pill);
  cursor:pointer;font-size:0.86rem;font-weight:600;
  min-height:40px;
  transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.btn-account:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.3);}
.btn-account .icon{display:inline-flex;width:17px;height:17px;flex:none;}
.btn-account .icon svg{width:100%;height:100%;}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(165deg,var(--navy),var(--navy2));color:#fff;padding:64px 0 52px;text-align:center;overflow:hidden;min-height:70vh;display:flex;align-items:center;}
.hero-bg-anim{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,173,99,0.16) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(47,145,121,0.16) 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(212,173,99,0.10) 0%, transparent 50%);
  background-size:200% 200%;
  animation:heroDrift 22s ease-in-out infinite;
}
@keyframes heroDrift{
  0%{background-position:0% 0%, 100% 100%, 50% 100%;}
  50%{background-position:30% 20%, 70% 80%, 60% 90%;}
  100%{background-position:0% 0%, 100% 100%, 50% 100%;}
}
/* Optional cinematic background video (public/app.js populates it only once
   admin-configured URLs exist — see server/routes/heroVideo.js). Stays
   `.hidden` and z-index:1 (above the gradient, below the text) until then,
   so with nothing configured the hero is pixel-identical to the gradient-only
   look above. */
.hero-video-layer{position:absolute;inset:0;z-index:1;overflow:hidden;}
.hero-video-layer.hidden{display:none;}
.hero-video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.hero-video-overlay{
  position:absolute;inset:0;
  /* rgba equivalents of --navy/--navy2/--gold at readability-strength alpha —
     not new brand colors. A theme-preset-reactive version of this overlay
     would need to be injected via server/index.js's serveThemedHtml() the
     way site_theme colors are; out of scope for now. */
  background:
    linear-gradient(165deg, rgba(18,33,58,0.88), rgba(10,22,38,0.82)),
    radial-gradient(circle at 30% 20%, rgba(169,129,46,0.12), transparent 60%),
    radial-gradient(ellipse at center, transparent 55%, rgba(8,17,31,0.45) 100%);
}
.hero-inner{position:relative;z-index:2;}
.hero-logo{width:92px;height:92px;object-fit:contain;margin-bottom:16px;filter:drop-shadow(0 4px 14px rgba(0,0,0,0.35));}
.hero h1{font-size:clamp(1.9rem,4.2vw,2.6rem);line-height:1.16;margin:0 0 16px;color:#fff;font-weight:600;}
.hero-highlight{color:var(--gold-light);}
.hero-sub{max-width:640px;margin:0 auto 20px;color:#c3c9dc;font-size:1.05rem;line-height:1.6;}
.hero-stats{color:var(--gold-light);font-style:italic;margin-bottom:26px;font-size:0.95rem;}
.hero-stats span{margin:0 6px;}
.hero-cta-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
/* .btn-secondary.hero-secondary-btn (not just .hero-secondary-btn) so this
   wins over the later, equal-specificity base .btn-secondary{color:var(--navy)}
   rule further down this file -- previously the navy text rendered nearly
   invisible against the dark hero background. */
.btn-secondary.hero-secondary-btn{color:#fff;border-color:rgba(255,255,255,0.35);}
.btn-secondary.hero-secondary-btn:hover{border-color:var(--gold-light);background:rgba(255,255,255,0.08);}
.hero-trust-line{margin-top:16px;font-size:0.88rem;color:#99aabd;}

/* ---------- Hero: editorial two-column composition (left text / right
   creative idea-board), matching the supplied Canva reference's hero
   structure. .hero-inner (left column) keeps every rule above completely
   unchanged as its base/fallback look — this only actives the split
   layout and right column on wider screens once JS has real idea data to
   show; if that fetch ever fails, .hero-col-board is simply empty and the
   hero still reads correctly as a centered single column. ---------- */
.hero-split{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;}
.hero-col-board{display:none;position:relative;min-height:420px;}
@media (min-width:980px){
  .hero{text-align:left;padding:76px 0;}
  .hero-split{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:4%;text-align:left;}
  .hero-inner .hero-logo{margin-left:0;}
  .hero-sub{margin-left:0;margin-right:0;}
  .hero-cta-row{justify-content:flex-start;}
  .hero-stats{text-align:left;}
  .hero-col-board{display:block;}
}

/* Decorative concentric-ring backdrop behind the paper cards — subtle,
   matches the Canva reference's .hero-orbit rings. Purely decorative
   (aria-hidden), never carries content. */
.hero-board-orbit{position:absolute;inset:0;pointer-events:none;}
.hero-board-orbit::before, .hero-board-orbit::after{
  content:"";position:absolute;border:1px solid rgba(212,173,99,0.22);border-radius:999px;
  left:50%;top:46%;transform:translate(-50%,-50%);
}
.hero-board-orbit::before{width:19rem;height:19rem;}
.hero-board-orbit::after{width:12.5rem;height:12.5rem;}

/* Paper/clip idea cards — literal "creative notes pinned to a dark board":
   warm cream paper surface (not another dark glass panel) so they read as
   physical notes against the navy hero, per the brief. Position/rotation
   is fixed per slot; only the CONTENT cross-fades on rotation (see
   updateHeroBoard() in app.js), so the pinned composition itself never
   jumps around. */
.hero-paper-card{
  position:absolute;width:min(78%,19rem);padding:16px 18px;
  background:var(--cream);color:var(--navy);border:1px solid rgba(18,33,58,0.1);
  border-radius:4px;box-shadow:0 18px 34px rgba(0,0,0,0.32);
  text-decoration:none;display:block;
  transition:opacity 480ms ease, transform 480ms ease;
}
.hero-paper-card::before{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:34px;height:14px;border-radius:3px;
  background:linear-gradient(165deg,var(--gold-light),var(--gold));
  box-shadow:0 3px 6px rgba(0,0,0,0.25);
}
.hero-paper-card.slot-1{top:0;left:0;transform:rotate(-4deg);z-index:1;}
.hero-paper-card.slot-2{top:34%;right:0;transform:rotate(3deg);z-index:2;}
.hero-paper-card.slot-3{bottom:0;left:8%;transform:rotate(-2deg);z-index:1;}
.hero-paper-card:hover{transform:translateY(-4px) rotate(0deg);box-shadow:0 24px 40px rgba(0,0,0,0.4);z-index:3;}
.hero-paper-card-badge{display:inline-block;font-size:0.64rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px;}
.hero-paper-card h3{font-family:var(--font-heading);font-size:1.05rem;line-height:1.25;margin:0 0 6px;color:var(--navy);}
.hero-paper-card p{font-size:0.8rem;line-height:1.45;color:#3a4556;margin:0;}

@media (prefers-reduced-motion:reduce){
  .hero-paper-card{transition:none;}
}
@media (max-width:640px){
  .hero-paper-card{width:min(84%,17rem);}
}

@keyframes fadeInUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.fade-in-up{animation:fadeInUp 0.7s var(--ease-premium) both;}
.fade-in-up:nth-child(2){animation-delay:0.08s;}
.fade-in-up:nth-child(3){animation-delay:0.16s;}
.fade-in-up:nth-child(4){animation-delay:0.24s;}

.scroll-fade{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium);}
.scroll-fade.visible{opacity:1;transform:translateY(0);}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--wa-green);color:#fff;border:none;
  padding:14px 28px;border-radius:var(--radius-pill);
  font-size:1rem;font-weight:700;cursor:pointer;min-height:48px;
  box-shadow:var(--shadow-sm);
  transition:background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.btn-primary:hover{background:#226b47;box-shadow:var(--shadow-md);}
.btn-primary .icon{width:18px;height:18px;display:inline-flex;flex:none;}
.btn-primary .icon svg{width:100%;height:100%;}

/* ---------- Filters ---------- */
.filters{display:flex;gap:12px;margin:28px auto;flex-wrap:wrap;}
.filters input, .filters select{
  padding:12px 16px;border:1px solid var(--line-dark);border-radius:var(--radius-md);
  font-size:0.95rem;flex:1;min-width:200px;background:var(--surface-dark);color:#fff;
  transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.filters input::placeholder{color:#7890a7;}
/* Homepage discovery entry points: hand off to the /ideas.html catalogue (no second search UI here). */
.filters-entry{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.filters-entry-btn{padding:10px 18px;font-size:0.9rem;text-decoration:none;white-space:nowrap;}
@media (max-width:560px){.filters-entry{flex:1 1 100%;}.filters-entry-btn{flex:1 1 calc(50% - 5px);text-align:center;}}
/* Search Ideas / Filter Ideas sit on the dark filters strip. The base .btn-secondary text is navy (made for light
   surfaces: ~1.1:1 against this strip). Same on-dark treatment the hero secondary button uses; the double class
   beats the later equal-specificity base .btn-secondary{color:var(--navy)} and its :hover. Size, radius and
   border width come from the existing rules and are untouched. */
.btn-secondary.filters-entry-btn{color:#fff;border-color:rgba(255,255,255,0.35);}
.btn-secondary.filters-entry-btn:hover{color:#fff;border-color:var(--gold-light);background:rgba(255,255,255,0.08);}
.btn-secondary.filters-entry-btn:focus-visible{color:#fff;outline:2.5px solid var(--gold-light);outline-offset:2px;}
.btn-secondary.filters-entry-btn:disabled,.btn-secondary.filters-entry-btn[aria-disabled="true"]{color:#8fa0b8;border-color:rgba(255,255,255,0.2);cursor:not-allowed;}
/* Homepage search results (public/app.js "Homepage search" block): the first catalogue matches under the search box. */
.home-search-results{flex:1 1 100%;margin-top:6px;padding:12px 14px;background:var(--surface-dark);border:1px solid var(--line-dark);border-radius:var(--radius-md);color:#c3c9dc;}
.home-search-results[hidden]{display:none;}
.home-search-count,.home-search-empty{margin:0 0 8px;font-size:0.88rem;color:#c3c9dc;}
.home-search-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px;}
.home-search-item{color:#fff;font-weight:700;text-decoration:none;}
.home-search-item:hover,.home-search-item:focus-visible{color:var(--gold-light);text-decoration:underline;}
.home-search-hook{display:block;font-size:0.82rem;color:#99aabd;}
.home-search-all{color:var(--gold-light);font-weight:700;font-size:0.9rem;text-decoration:none;}
.home-search-all:hover,.home-search-all:focus-visible{text-decoration:underline;}
.filters input:focus, .filters select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,129,46,0.15);}

/* ---------- Idea cards / carousel ---------- */
.section-eyebrow{color:var(--gold-light);font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px;}
.section-eyebrow::before{content:"—";margin-right:8px;color:var(--gold);}

#ideasCarouselSection{padding:56px 0;background:var(--surface-dark);border-top:1px solid var(--line-dark-soft);border-bottom:1px solid var(--line-dark-soft);}
/* Mobile/tablet: carousel and the Watch & Follow panel stack vertically,
   panel centered below (per the mobile spec — "Watch & Follow moves below
   the carousel"). Desktop (see the 1100px+ rule further down) restores the
   side-by-side main-carousel + sidebar layout. */
.ideas-layout{display:flex;flex-direction:column;gap:40px;margin-top:24px;}
.ideas-carousel-col{min-width:0;}
.instagram-sidebar{max-width:480px;margin:0 auto;}
.ideas-carousel{position:relative;display:flex;align-items:center;gap:var(--space-4);}
.ideas-viewport{flex:1;overflow:hidden;min-width:0;}

.carousel-arrow{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--rule);color:var(--navy);
  transition:background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.carousel-arrow svg{width:20px;height:20px;}
.carousel-arrow:hover:not(:disabled){box-shadow:var(--shadow-md);border-color:var(--gold);}
.carousel-arrow:active:not(:disabled){transform:scale(0.94);}

.carousel-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap;}
.carousel-dot{width:9px;height:9px;padding:0;border-radius:50%;background:var(--rule-strong);border:none;transition:background var(--dur-fast) ease, transform var(--dur-fast) ease;}
.carousel-dot.active{background:var(--gold);transform:scale(1.2);}

/* One carousel "page" now renders a group of up to 4 stacked .idea-slide
   rows (see CAROUSEL_GROUP_SIZE in app.js) -- the gap keeps them reading
   as distinct cards rather than one long fused block. */
.ideas-grid{display:flex;flex-direction:column;gap:22px;}

/* ---------- Editorial idea slide (one idea = one full-width slide) ----------
   This IS the existing ideas carousel's card — same #ideasGrid, same
   arrows/dots/swipe logic in app.js, only the presentation changed: a
   large image panel + a large text panel, alternating side by side per
   slide index (index % 2), matching the Canva reference's alternating
   idea-row composition. Real idea data only — no separate/duplicate
   catalog. */
.idea-slide{
  display:grid;grid-template-columns:1fr;
  /* No forced min-height here anymore -- the old viewport-scaled
     clamp(360px,44vw,540px) kept forcing the image column taller than its
     real 16:9 content needed, showing as a large empty letterboxed strip.
     Row height is now purely content-driven (whichever column is
     naturally taller). Narrower max-width (below) also brings the image's
     16:9 height and the text column's natural height closer together. */
  max-width:980px;margin:0 auto;
  border:1px solid var(--line-dark);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface-dark-2);color:#fff;box-shadow:var(--shadow-md);
}
/* align-items:center (not stretch) so the real <img> below sizes itself
   from its own aspect-ratio instead of being stretched to match the text
   column's height — this panel can be taller than the image (e.g. when
   the text panel needs more room); the extra space is simply letterboxed
   with this same background, never used to crop or stretch the photo. */
.idea-slide-image{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--navy2);}
.idea-slide-image img{
  position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;
  transition:transform 650ms var(--ease-premium);
}
.idea-slide-image:hover img{transform:scale(1.04);}
.idea-slide-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(6,17,31,0.35), transparent 40%);
}
.idea-slide-content{display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,3vw,36px);min-width:0;}

/* Reusable "idea visual" fallback panel — shown whenever an idea has no
   real photo. Premium gradient + subtle grid texture + the idea's own
   emoji/initial, never a blank strip or a fabricated photograph. */
.idea-slide-image-fallback{
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(212,173,99,0.16) 0%, transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(47,145,121,0.16) 0%, transparent 50%),
    linear-gradient(155deg,var(--surface-dark-3),var(--navy2));
}
.idea-slide-image-fallback::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:28px 28px;
}
.idea-slide-image-fallback::after{display:none;}
.idea-visual-fallback{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;}
.idea-visual-fallback-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:9rem;height:9rem;border-radius:50%;
  background:radial-gradient(circle, rgba(212,173,99,0.22) 0%, transparent 70%);
}
.idea-visual-fallback-icon{position:relative;font-size:3.2rem;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35));}
.idea-visual-fallback-initial{
  position:relative;font-family:var(--font-heading);font-size:0.85rem;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-light);
}
.idea-slide-badge-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.idea-slide-badge{
  display:inline-flex;align-items:center;background:var(--gold);color:var(--navy);
  font-size:0.7rem;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--radius-pill);
}
.idea-slide-price{font-family:var(--font-heading);font-weight:700;color:var(--gold-light);font-size:1.05rem;}
/* Phase C8-3: the honest slot label the homepage rotation can add ("For You" /
   "Fresh"). Presentation only - reuses the existing badge row tokens. */
.idea-slide-source{margin-left:auto;padding:2px 10px;border:1px solid var(--gold-light);border-radius:var(--radius-pill);
  color:var(--gold-light);font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;}
.idea-slide-content h3{margin:0 0 8px;}
.idea-slide-content h3 a{
  font-family:var(--font-heading);font-weight:700;letter-spacing:-0.01em;color:#fff;
  font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.15;text-decoration:none;
}
.idea-slide-content h3 a:hover{color:var(--gold-light);}
/* Clamped to 2 lines -- the full hook is always readable on the idea's
   own detail page; here it's a teaser, and capping it keeps the text
   column's natural height from ballooning well past the image's 16:9
   height regardless of how long an individual idea's hook text is. */
.idea-slide-hook{
  color:#c3c9dc;font-size:clamp(0.9rem,1.1vw,1rem);line-height:1.5;margin:0 0 14px;max-width:56ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.idea-slide-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;padding:10px 0;margin-bottom:14px;border-top:1px solid rgba(255,255,255,0.14);border-bottom:1px solid rgba(255,255,255,0.14);max-width:420px;}
.idea-slide-facts div{display:flex;flex-direction:column;gap:2px;}
.idea-slide-facts b{color:#fff;font-size:0.95rem;font-weight:700;}
.idea-slide-facts span{font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#8fa0b8;}
.idea-slide-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.idea-slide-lock{display:inline-flex;align-items:center;gap:6px;font-size:0.78rem;font-weight:700;letter-spacing:0.02em;color:#a9b4c8;}
.idea-slide-lock .icon-inline{width:13px;height:13px;}
.idea-slide-lock.idea-slide-open{color:var(--teal-light,#5fc9a8);}
.idea-slide-cta{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  color:#fff;font-weight:700;text-decoration:none;font-size:0.98rem;
  border-bottom:2px solid var(--gold);padding-bottom:3px;transition:gap var(--dur-fast) ease, color var(--dur-fast) ease;
}
.idea-slide-cta:hover{gap:13px;color:var(--gold-light);}

/* Guest-limit prompt slide: appears as the final slide once the server
   has capped the response (see GET /api/ideas -- X-Guest-Limited
   header), never a client-side-only illusion of a limit. */
.idea-slide-guest-prompt{display:flex;align-items:center;justify-content:center;text-align:center;}
.idea-slide-guest-inner{max-width:420px;padding:clamp(32px,5vw,56px) 24px;}
.idea-slide-guest-inner .ip-eyebrow{justify-content:center;}
.idea-slide-guest-inner h3{font-family:var(--font-heading);font-size:clamp(1.4rem,2.6vw,1.9rem);color:#fff;margin:8px 0 12px;}
.idea-slide-guest-inner p{color:#c3c9dc;font-size:0.98rem;line-height:1.6;margin:0 0 24px;}

@media (min-width:860px){
  .idea-slide{grid-template-columns:1fr 1fr;}
  .idea-slide-image{order:1;}
  .idea-slide-content{order:2;}
  .idea-slide.reverse .idea-slide-image{order:2;}
  .idea-slide.reverse .idea-slide-content{order:1;}
}

/* ---------- Desktop-only upgrade: fluid full-width section (~5% side
   gutters), matching the Canva reference's near-full-bleed editorial
   rows. Scoped to 901px+ so tablet/mobile stay exactly as already
   approved. ---------- */
@media (min-width:901px){
  #ideasCarouselSection{
    width:min(90%, 1680px);
    max-width:none;
    margin:0 auto;
    padding:56px 0;
  }
}

/* Desktop: restore the side-by-side main-carousel + Watch & Follow sidebar
   layout (the carousel column still gets the large majority of the ~90%
   section width set above, so each slide stays large/cinematic). */
@media (min-width:1100px){
  .ideas-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:44px;align-items:start;}
  .instagram-sidebar{max-width:none;margin:0;}
}

/* ---------- Homepage dark surface layering (Canva-fidelity pass) ----------
   Each homepage section gets its own distinguishable dark tier (deepest
   ink at hero/footer, mid surface-dark tiers in between) rather than one
   flat background, per the design brief. Scoped to #statStripSection
   because .ip-stat-strip itself (defined in policy.css) is shared with
   the light legal-page hero cards and must stay untouched there. */
/* Anchor-jump targets (header nav / footer links use #id hrefs) offset so
   the sticky header never covers a section's heading right after the jump. */
#ideasCarouselSection,#categoryTabsSection,#instagramSection,#videosSection,#howItWorksSection,#accessSection{scroll-margin-top:84px;}

#statStripSection{background:var(--ink-2);padding:8px 0 36px;}
body.pg-home #statStripSection .ip-stat-strip{
  background:var(--surface-dark);border-color:var(--line-dark);
  box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, var(--shadow-md);
}
body.pg-home #statStripSection .ip-stat-strip > div{border-right-color:var(--line-dark-soft);}
body.pg-home #statStripSection .ip-stat-strip strong{color:var(--gold-light);}
body.pg-home #statStripSection .ip-stat-strip span{color:#8fa0b8;}
@media (max-width:640px){
  body.pg-home #statStripSection .ip-stat-strip > div{border-bottom-color:var(--line-dark-soft);}
}

#categoryTabsSection, #premiumTeaser, #filtersSection{background:var(--ink-2);}
#videosSection{background:var(--ink);padding-top:52px;}

.instagram-browse-ideas-btn{
  display:block;text-align:center;margin-top:14px;
  color:var(--ink);background:linear-gradient(135deg,var(--gold-light),var(--gold));
  border:none;font-weight:700;
}
.instagram-browse-ideas-btn:hover{background:linear-gradient(135deg,var(--gold),var(--gold-dark));}

/* ---------- How It Works ---------- */
.how-it-works-section{background:var(--ink);padding:64px 0;}
.how-it-works-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin-top:32px;position:relative;}
.how-step{
  position:relative;padding:0 28px 0 0;border-right:1px dashed var(--line-dark);
}
.how-step:last-child{border-right:none;padding-right:0;}
.how-step-num{
  display:inline-block;font-family:var(--font-heading);font-size:1.6rem;font-weight:700;
  color:var(--gold);margin-bottom:10px;
}
.how-step h3{color:#fff;font-size:1.08rem;margin:0 0 8px;}
.how-step p{color:#99aabd;font-size:0.92rem;line-height:1.6;margin:0;}
@media (max-width:760px){
  .how-it-works-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .how-step{border-right:none;padding-right:0;border-bottom:1px dashed var(--line-dark);padding-bottom:20px;}
}
@media (max-width:480px){
  .how-it-works-grid{grid-template-columns:1fr;}
}

/* ---------- Access / how access works ---------- */
.access-section{background:var(--ink-2);padding:64px 0;}
.access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:32px;}
.access-card{
  background:var(--surface-dark);border:1px solid var(--line-dark);border-radius:var(--radius-lg);
  padding:28px 24px;position:relative;transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.access-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.access-card h3{color:#fff;font-family:var(--font-heading);font-size:1.15rem;margin:0 0 10px;}
.access-card p{color:#99aabd;font-size:0.92rem;line-height:1.6;margin:0;}
.access-card-featured{
  background:linear-gradient(165deg,var(--surface-dark-3),var(--surface-dark-2));
  border-color:var(--gold);box-shadow:0 0 0 1px rgba(169,129,46,0.25), var(--shadow-md);
}
.access-card-badge{
  position:absolute;top:-12px;left:24px;background:var(--gold);color:var(--ink);
  font-size:0.68rem;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;
  padding:4px 12px;border-radius:var(--radius-pill);
}

/* ---------- The 4 access levels (generic explainer, no hardcoded ₹ --
   real pricing is always per-idea, shown on each idea's own page/plan
   cards) — sits below .access-grid inside the same #accessSection,
   reusing that section's exact dark-card/featured/badge visual language. */
.access-tiers-head{margin-top:48px;}
.access-tiers-head h3{color:#fff;font-family:var(--font-heading);font-size:1.3rem;margin:6px 0 0;}
.access-tiers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:24px;}
.access-tier-card{
  display:block;background:var(--surface-dark);border:1px solid var(--line-dark);border-radius:var(--radius-lg);
  padding:24px 20px;position:relative;text-decoration:none;color:inherit;cursor:pointer;
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-base) ease;
}
.access-tier-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold);}
.access-tier-badge{
  display:inline-block;background:var(--surface-dark-3);color:var(--gold-light);
  font-size:0.68rem;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;
  padding:4px 12px;border-radius:var(--radius-pill);margin-bottom:14px;
}
.access-tier-card h4{color:#fff;font-family:var(--font-heading);font-size:1.02rem;margin:0 0 8px;}
.access-tier-card p{color:#99aabd;font-size:0.88rem;line-height:1.55;margin:0;}
.access-tier-card-featured{
  background:linear-gradient(165deg,var(--surface-dark-3),var(--surface-dark-2));
  border-color:var(--gold);box-shadow:0 0 0 1px rgba(169,129,46,0.25), var(--shadow-md);
}
.access-tier-card-featured .access-tier-badge{background:var(--gold);color:var(--ink);}
.access-tier-cta{
  display:block;text-align:center;margin-top:26px;color:var(--gold-light);
  font-weight:700;text-decoration:none;font-size:0.96rem;
}
.access-tier-cta:hover{color:var(--gold);text-decoration:underline;}

/* ---------- Trust strip ---------- */
.trust-strip{background:var(--ink);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:28px;padding:20px 0 44px;color:#99aabd;font-size:0.88rem;font-weight:600;}
.trust-item{display:flex;align-items:center;gap:8px;}

.site-footer{background:var(--ink);color:#aab1c8;padding:0;font-size:0.85rem;border-top:1px solid var(--line-dark);}
.footer-links a{color:#c3c9dc;text-decoration:none;}
.footer-links a:hover{color:var(--gold-light);text-decoration:underline;}

/* ---------- Footer: brand + link columns (dark theme pass) ---------- */
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding:44px 0 36px;}
.footer-brand-col{min-width:0;}
.footer-logo{height:34px;width:34px;object-fit:contain;margin-bottom:12px;}
.footer-tagline{color:var(--muted);font-size:0.86rem;line-height:1.6;max-width:32ch;margin:0;}
.footer-col-title{color:var(--cream);font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin:0 0 12px;}
.footer-col-links{display:flex;flex-direction:column;gap:9px;}
.footer-col-links a{color:var(--muted);text-decoration:none;font-size:0.88rem;width:fit-content;transition:color var(--dur-fast) ease;}
.footer-col-links a:hover{color:var(--gold-light);}
.footer-bottom{border-top:1px solid var(--line-dark);padding:16px 0;text-align:center;}
.footer-bottom p{margin:0;font-size:0.8rem;color:#7890a7;}
/* Simple footer variant used on legal pages (no column grid, just a
   cross-link row above the copyright bar). */
.site-footer > .wrap:not(.footer-grid){padding:18px 0 4px;text-align:center;}
.site-footer > .wrap:not(.footer-grid) .footer-links{margin:0;font-size:0.85rem;}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr;gap:24px;padding:36px 0 28px;}
}

/* ---------- Videos section ---------- */
.videos-section{padding:52px 0 10px;}
.section-title{color:#fff;font-size:1.6rem;text-align:center;margin-bottom:6px;font-family:var(--font-heading);}
.section-sub{color:#99aabd;text-align:center;margin-bottom:28px;font-size:0.96rem;}
.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-bottom:36px;}
.video-card{background:var(--surface-dark);border:1px solid var(--line-dark);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-base) ease;}
.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold);}
.video-card .video-embed{position:relative;width:100%;padding-top:177.77%;background:#000;}
.video-card .video-embed.landscape{padding-top:56.25%;}
.video-card .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-card .video-body{padding:16px 18px;}
.video-card h4{margin:0 0 6px;color:#fff;font-size:1.02rem;}
.video-card p{margin:0 0 10px;font-size:0.89rem;color:#99aabd;}
.video-card .video-links a{font-size:0.83rem;color:var(--gold-light);text-decoration:none;font-weight:700;margin-right:14px;}
.insta-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 20px;text-align:center;background:linear-gradient(150deg,var(--surface-dark-2),var(--surface-dark));border:1px solid var(--line-dark);border-radius:var(--radius-lg);}
.insta-card .insta-icon{font-size:2.2rem;margin-bottom:10px;}
.insta-card h4{color:#fff;}
.insta-card p{color:#99aabd;}
.insta-card a{background:var(--gold);color:var(--ink);padding:9px 20px;border-radius:var(--radius-pill);text-decoration:none;font-weight:700;font-size:0.85rem;margin-top:10px;transition:background var(--dur-fast) ease;}
.insta-card a:hover{background:var(--gold-light);}

/* ---------- Instagram sidebar (compact, beside the ideas carousel) ---------- */
.instagram-sidebar{
  background:linear-gradient(150deg,var(--navy),var(--navy2));
  border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);
  color:#fff;box-shadow:var(--shadow-md);
}
.instagram-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:18px;}
.instagram-icon{font-size:1.7rem;line-height:1;flex:none;transition:transform var(--dur-fast) ease;}
.instagram-header:hover .instagram-icon{transform:scale(1.08) rotate(-4deg);}
.instagram-sidebar-title{margin:0;font-size:1rem;color:#fff;}
.instagram-sidebar-sub{margin:0;font-size:0.8rem;color:#c3c9dc;}

.instagram-cta-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-bottom:22px;}
.instagram-handle{font-weight:700;color:var(--gold-light);font-size:0.95rem;letter-spacing:0.01em;}
.instagram-cta-row .btn-primary,.instagram-cta-row .btn-secondary{width:100%;padding:11px 18px;font-size:0.86rem;min-height:auto;}
.instagram-follow-btn{background:linear-gradient(135deg,var(--gold),var(--gold-dark));}
.instagram-follow-btn:hover{background:linear-gradient(135deg,var(--gold-dark),var(--gold));box-shadow:var(--shadow-md);}
.instagram-cta-row .btn-secondary{color:#fff;border-color:rgba(255,255,255,0.3);}
.instagram-cta-row .btn-secondary:hover{border-color:var(--gold-light);background:rgba(255,255,255,0.08);}
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:transparent;color:var(--navy);border:1.5px solid var(--rule-strong);
  padding:12.5px 26px;border-radius:var(--radius-pill);
  font-size:0.95rem;font-weight:700;cursor:pointer;min-height:48px;text-decoration:none;
  transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.btn-secondary:hover{border-color:var(--teal);background:rgba(31,111,92,0.06);}
.btn-secondary:active,.btn-primary:active,.instagram-reel-card:active{transform:scale(0.98);}

/* Reel previews — strict 9:16 portrait, matching real Instagram Reels.
   Stacked vertically in the sidebar; width is capped so 3 stacked cards
   stay compact rather than filling the whole sidebar height. */
.instagram-reels-grid{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);margin-bottom:22px;}
.instagram-reel-card{
  position:relative;display:block;
  width:100%;max-width:150px;aspect-ratio:9/16;
  text-decoration:none;border-radius:var(--radius-md);overflow:hidden;
  background:linear-gradient(150deg,var(--navy-soft),var(--navy2));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-premium);
}
.instagram-reel-card:hover{box-shadow:var(--shadow-lg);}
.instagram-reel-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
.instagram-reel-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(169,129,46,0.35), transparent 55%);
  pointer-events:none;
}
.instagram-reel-card .reel-thumb-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 300ms ease-out;
}
.instagram-reel-card:hover .reel-thumb-img{transform:scale(1.04);}
.instagram-reel-card .reel-icon{
  position:absolute;top:18%;left:0;right:0;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;opacity:0.55;
}
.instagram-reel-card .reel-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.3) 100%);
  transition:opacity 300ms ease-out;
}
.instagram-reel-card .reel-badge{
  position:absolute;top:10px;left:10px;background:rgba(255,255,255,0.2);color:#fff;
  font-size:0.6rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--radius-pill);z-index:1;
}
.instagram-reel-card .reel-play-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.22);color:#fff;font-size:0.95rem;
  z-index:1;transition:transform 300ms ease-out;
}
.instagram-reel-card:hover .reel-play-icon{transform:translate(-50%,-50%) scale(1.08);}
.instagram-reel-card .reel-cta{
  position:absolute;bottom:9px;left:0;right:0;text-align:center;
  color:#fff;font-weight:700;font-size:0.72rem;z-index:1;
}

/* YouTube slot: a click-to-play facade button that fills the same 9:16
   frame as the Instagram <a> card, then gets replaced with a real iframe
   on click (see buildYouTubeCard() in app.js). */
.yt-lite-trigger{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:pointer;
}
.instagram-reel-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.instagram-profile-link{display:block;text-align:center;color:var(--gold-light);font-weight:700;text-decoration:none;font-size:0.85rem;}
.instagram-profile-link:hover{text-decoration:underline;}

.lead-card{background:linear-gradient(150deg,var(--surface-dark-3),var(--surface-dark-2));color:#fff;border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:34px 26px;text-align:center;max-width:520px;margin:0 auto 44px;box-shadow:var(--shadow-lg);}
.lead-card h3{margin:0 0 8px;font-size:1.25rem;color:#fff;}
.lead-card p{color:#c3c9dc;margin:0 0 20px;font-size:0.93rem;}
.lead-form{display:flex;flex-direction:column;gap:11px;}
.lead-form input, .lead-form select, .lead-form textarea{
  padding:12px 14px;border-radius:var(--radius-md);border:1px solid transparent;
  font-size:0.95rem;font-family:inherit;
  transition:box-shadow var(--dur-fast) ease;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{box-shadow:0 0 0 3px rgba(212,173,99,0.35);}
.lead-success{margin-top:16px;}
.lead-success.hidden{display:none;}
.lead-success a{display:inline-block;margin-top:10px;}

/* ---------- Category tabs ---------- */
.category-tabs-section{padding:22px 0 0;}
.category-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--line-dark);padding-bottom:0;}
.category-tab-btn{
  position:relative;display:inline-flex;align-items:center;background:none;border:none;padding:12px 18px;
  font-size:0.95rem;font-weight:700;color:#8fa0b8;text-decoration:none;
  min-height:44px;cursor:pointer;
  transition:color var(--dur-fast) ease;
}
.category-tab-btn::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-2px;height:3px;
  background:var(--gold);border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--dur-base) var(--ease-premium);
}
.category-tab-btn:hover{color:#fff;}
.category-tab-btn.active{
  color:var(--ink);font-weight:800;
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  border-radius:var(--radius-pill) var(--radius-pill) 0 0;
}
.category-tab-btn.active::after{transform:scaleX(1);background:var(--ink);}
.category-tab-btn .empty-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-left:5px;}

/* ---------- Premium teaser ---------- */
.premium-teaser{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:var(--surface-dark);border:1px solid var(--line-dark);border-radius:var(--radius-md);padding:16px 20px;margin:20px auto;font-size:0.9rem;color:var(--gold-light);}
.btn-request-link{background:var(--gold);color:var(--ink);border:none;padding:10px 18px;border-radius:var(--radius-pill);font-size:0.85rem;font-weight:700;cursor:pointer;min-height:40px;transition:background var(--dur-fast) ease;}
.btn-request-link:hover{background:var(--gold-light);}

/* Honeypot (invisible to humans, bots often fill every field) */
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* Captcha row — light variant (used inside white modal cards) */
.captcha-row{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-md);padding:9px 12px;}
.captcha-row label{font-size:0.85rem;font-weight:700;white-space:nowrap;color:var(--navy);}
.captcha-row input{width:80px !important;flex:none !important;border:1px solid var(--rule) !important;}
/* dark variant — used inside the navy lead-card */
.lead-card .captcha-row{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}
.lead-card .captcha-row label{color:#fff;}
.category-empty-note{text-align:center;color:var(--muted);padding:30px 0;}

.auth-card{max-width:380px;}
.auth-tabs{display:flex;gap:8px;margin-bottom:20px;}
.auth-tab-btn{flex:1;background:var(--paper);border:1px solid var(--rule);padding:10px;border-radius:var(--radius-md);cursor:pointer;font-weight:700;font-size:0.9rem;color:var(--muted);min-height:42px;transition:background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease;}
.auth-tab-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.auth-form{display:flex;flex-direction:column;gap:11px;}
.auth-form.hidden{display:none;}
.auth-form input,.auth-form select{padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius-md);font-size:0.95rem;transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;background:#fff;color:inherit;width:100%;}
.auth-form input:focus,.auth-form select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,129,46,0.15);outline:none;}
.auth-submit{width:100%;margin-top:4px;}
.auth-error{color:var(--danger);font-size:0.85rem;min-height:1.2em;margin:0;}
.auth-info{color:var(--muted);font-size:0.88rem;margin:8px 0;}
.auth-divider{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 12px;color:var(--muted);font-size:0.85rem;}
.auth-divider span::before,.auth-divider span::after{content:'';flex:1;height:1px;background:var(--rule);}
.auth-divider.hidden{display:none;}
.google-signin-row{display:flex;justify-content:center;margin:12px 0;}
.google-signin-row.hidden{display:none;}
.google-signin-row>div{width:100%;max-width:300px;}
/* Scoped to .auth-card (not a bare .btn-secondary override) so this
   full-width modal-button treatment never leaks into other .btn-secondary
   uses elsewhere on the page (e.g. the hero's outline "Browse All Ideas"
   button, which must keep its own transparent/bordered look). */
.auth-card .btn-secondary,.auth-card .btn-tertiary{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:var(--radius-md);font-size:0.95rem;font-weight:600;cursor:pointer;transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease;border:none;}
.auth-card .btn-secondary{background:var(--surface-2);color:var(--navy);border:1px solid var(--rule);width:100%;margin-bottom:8px;}
.auth-card .btn-secondary:hover{background:var(--rule);border-color:var(--gold);}
.auth-card .btn-tertiary{background:transparent;color:var(--navy);border:1px solid var(--rule);width:100%;margin-top:8px;}
.auth-card .btn-tertiary:hover{border-color:var(--gold);}
.auth-gate-message{color:var(--navy);font-size:0.88rem;font-weight:600;margin:0 0 12px;background:var(--surface-2,#fff);padding:10px 12px;border:1px solid var(--rule);border-radius:var(--radius-md);}
.auth-link-btn{background:none;border:none;color:var(--teal);font-size:0.85rem;font-weight:600;cursor:pointer;text-align:right;padding:0;margin:-4px 0 0;align-self:flex-end;}
.auth-link-btn:hover{text-decoration:underline;}

/* ---------- Purchase Information Form (admin-configurable fields) ---------- */
.purchase-info-form{display:flex;flex-direction:column;gap:14px;}
#purchaseInfoFields{display:flex;flex-direction:column;gap:14px;}
.pf-field{display:flex;flex-direction:column;gap:5px;}
.pf-label{font-size:0.85rem;font-weight:700;color:var(--navy);}
.pf-required{color:var(--danger);margin-left:2px;}
.pf-field input[type="text"],.pf-field input[type="email"],.pf-field input[type="tel"],
.pf-field input[type="number"],.pf-field select,.pf-field textarea{
  padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius-md);font-size:0.95rem;
  font-family:inherit;width:100%;transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.pf-field textarea{resize:vertical;min-height:80px;}
.pf-field input:focus,.pf-field select:focus,.pf-field textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,129,46,0.15);outline:none;
}
.pf-field.pf-invalid input,.pf-field.pf-invalid select,.pf-field.pf-invalid textarea{
  border-color:var(--danger);
}
.pf-help{font-size:0.78rem;color:var(--muted);margin:0;}
.pf-error{font-size:0.8rem;color:var(--danger);margin:0;min-height:1.1em;}
.pf-checkbox-row{display:flex;align-items:center;gap:8px;}
.pf-checkbox-row input[type="checkbox"]{width:18px;height:18px;flex:none;}
.pf-checkbox-row label{font-size:0.9rem;color:var(--text);}
.pf-checkbox-row label a{color:var(--teal);text-decoration:underline;}
.pf-checkbox-row{align-items:flex-start;}
.pf-checkbox-row input[type="checkbox"]{margin-top:2px;}
.pf-ack.pf-invalid .pf-checkbox-row label{color:var(--danger);}
/* Order summary shown before payment (idea, plan, amount) */
.pf-summary:empty{display:none;}
.pf-summary{border:1px solid var(--rule);border-radius:10px;padding:12px 14px;background:var(--surface-2,#fff);}
.pf-summary-title{margin:0 0 8px;font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.pf-summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.pf-summary-list li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.pf-summary-item{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere;color:var(--navy);}
.pf-summary-plan{font-size:0.84rem;color:var(--muted);}
.pf-summary-amount{font-weight:700;color:var(--navy);white-space:nowrap;}
.pf-summary-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);color:var(--navy);}
.pf-summary-total strong{font-size:1.15rem;}
.pf-summary-note{margin:8px 0 0;font-size:0.78rem;color:var(--muted);line-height:1.5;}
.pf-summary-note a{color:var(--teal);text-decoration:underline;}

/* ---------- Cookie consent banner (js/consent.js) ----------
   Essential / Analytics only. A bottom bar that disappears once a choice is made;
   it sits below modals (z-index < .modal) so it never covers checkout or login. */
.ck-banner{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
  max-width:1100px;margin:0 auto 14px;padding:16px 20px;background:#0c1a2e;color:#e9edf5;border:1px solid rgba(255,255,255,0.14);border-top:2px solid var(--gold,#b8892d);
  border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,0.38);box-sizing:border-box;width:calc(100% - 28px);max-height:70vh;overflow-y:auto;}
.ck-text{flex:1 1 380px;min-width:0;}
.ck-title{margin:0 0 4px;font-size:1.02rem;color:#fff;font-weight:700;}
.ck-desc{margin:0;font-size:0.88rem;line-height:1.55;color:#d3dae8;}
.ck-links{margin:6px 0 0;font-size:0.84rem;color:#b4bfd3;}
.ck-link{color:var(--gold-light,#e2b85c);text-decoration:underline;}
.ck-actions{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto;}
.ck-btn{font:inherit;font-weight:700;font-size:0.9rem;padding:10px 18px;border-radius:8px;cursor:pointer;min-height:44px;border:1px solid transparent;}
.ck-btn-primary{background:var(--gold,#b8892d);color:#0c1a2e;border-color:var(--gold,#b8892d);}
.ck-btn-primary:hover{filter:brightness(1.08);}
.ck-btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,0.55);}
.ck-btn-secondary:hover{background:rgba(255,255,255,0.1);}
.ck-btn:focus-visible,.ck-link:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.ck-prefs-link{cursor:pointer;}
@media (max-width:640px){
  .ck-banner{margin:0 0 8px;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));width:calc(100% - 16px);border-radius:10px;}
  .ck-actions{width:100%;flex-direction:column;}
  .ck-btn{width:100%;}
}
@media (prefers-reduced-motion:no-preference){.ck-banner{animation:ckIn 0.22s ease-out;}}
@keyframes ckIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- Modal ----------
   Cart/Checkout theme-integration pass: kept LIGHT (var(--surface)) rather
   than dark — this is the same "premium light card, dark chrome elsewhere"
   pattern already used for Idea Detail's content sections and My
   Purchases' plan cards, chosen deliberately for readability of financial/
   form content (per instruction: don't force checkout dark if it hurts
   readability). The one new accent is a slim gold top border on every
   modal card, tying it visually to the same brand line used in the
   dark header/hero gradient elsewhere. */
.modal{position:fixed;inset:0;background:rgba(8,17,31,0.62);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;}
.modal.hidden{display:none;}
.modal-card{background:var(--surface);border-radius:var(--radius-lg);max-width:520px;width:100%;max-height:86vh;overflow-y:auto;padding:26px;position:relative;box-shadow:var(--shadow-lg);border-top:4px solid var(--gold);}
.modal-close{
  position:absolute;top:14px;right:14px;z-index:5;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:50%;cursor:pointer;color:var(--muted);
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease;
}
/* .auth-card's first content (Google Sign-In button/iframe, then the
   Login/Create Account tabs) is full-width and starts right at the card's
   normal top padding — without extra clearance here it visually sits
   under/behind the absolutely-positioned close button above. Reserve a
   top gutter tall enough for the close button's own height + offset
   (36px + 14px) plus a little breathing room, scoped to .auth-card only
   so every other modal's existing spacing is untouched. */
.auth-card{padding-top:58px;}
.modal-close svg{width:16px;height:16px;}
.modal-close:hover{background:var(--rule);color:var(--navy);}
.modal-card h2{color:var(--navy);margin-top:6px;padding-right:34px;}
.modal-card .code{font-size:0.75rem;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px;}
.modal-card .hook{font-style:italic;color:#333a4a;margin:12px 0;}
.modal-card .body-text{font-size:0.96rem;line-height:1.6;margin-bottom:16px;}
.body-locked{position:relative;margin-bottom:16px;}
.body-text.blurred{filter:blur(4px);user-select:none;pointer-events:none;}
.lock-overlay-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-weight:700;color:var(--navy);background:rgba(255,255,255,0.8);border-radius:var(--radius-md);padding:10px;z-index:2;}
.lock-overlay-text svg{width:18px;height:18px;flex:none;}
.modal-stats{display:flex;justify-content:space-between;background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:18px;font-size:0.85rem;}
.modal-stats b{display:block;color:var(--navy);font-size:1.02rem;}
.modal-actions{display:flex;flex-direction:column;gap:11px;}
.btn-buy{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gold);color:#fff;border:none;padding:14px;border-radius:var(--radius-md);
  font-weight:700;cursor:pointer;font-size:0.98rem;min-height:48px;
  transition:background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  box-shadow:var(--shadow-sm);
}
.btn-buy:hover{background:var(--gold-dark);box-shadow:var(--shadow-md);}
.btn-buy .icon-inline{width:16px;height:16px;}
.btn-chat-idea .icon-inline{width:16px;height:16px;}
.btn-chat-idea{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--wa-green);color:#fff;border:none;padding:14px;border-radius:var(--radius-md);
  font-weight:700;cursor:pointer;font-size:0.98rem;min-height:48px;
  transition:background var(--dur-fast) ease;
}
.btn-chat-idea:hover{background:#226b47;}

/* ---------- Phase 2: multi-tier plan cards (idea detail + My Purchases) ---------- */
.plans-section{margin-bottom:18px;}
.plans-section-title{font-size:0.8rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:10px;}
/* Full-width vertical stack — with rich pre-payment preview copy (headings
   + lists) per card now shown always, a narrow multi-column grid reads
   poorly; each level gets its own clearly-separated, fully readable card. */
.plans-grid{display:flex;flex-direction:column;gap:14px;}
.plan-card{
  border:1px solid var(--rule);border-radius:var(--radius-md);padding:18px;
  background:var(--surface-2);display:flex;flex-direction:column;gap:10px;position:relative;
  transition:box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.plan-card:hover{box-shadow:var(--shadow-sm);}
.plan-card.unlocked{background:var(--surface);border-color:var(--teal-light);box-shadow:0 0 0 1px rgba(31,111,92,0.15);}
.plan-builds-on{font-size:0.72rem;font-weight:700;color:var(--teal);letter-spacing:0.02em;}
.plan-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.plan-badge{font-size:0.85rem;font-weight:700;letter-spacing:0.02em;color:var(--navy);}
.plan-price{font-weight:700;color:var(--gold-dark);font-size:0.95rem;flex:none;}
.plan-card.unlocked .plan-price{color:var(--teal);}
.plan-card h4{margin:0;color:var(--navy);font-size:1rem;}
/* Optional per-plan media (image/YouTube). This element is only ever
   present in the DOM when at least one of image/video is actually
   configured and valid (see renderPlanMedia() in app.js) — so there is
   nothing to hide here for the "no media configured" case, it simply
   never exists, and .plan-card's own flex `gap` reserves no space for an
   element that isn't there. */
.plan-media{display:flex;flex-direction:column;gap:8px;border-radius:var(--radius-sm,6px);overflow:hidden;}
.plan-media-item{position:relative;width:100%;aspect-ratio:16/9;background:var(--surface-2);border-radius:var(--radius-sm,6px);overflow:hidden;}
.plan-media-item img{width:100%;height:100%;object-fit:cover;display:block;}
.plan-media-item iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* Same .plan-media markup also appears INLINE inside plan-content prose
   (see renderPlanMedia in app.js for the "cover" media case, and the
   admin's "Insert Image"/"Insert YouTube" toolbar buttons in admin.js for
   media embedded directly within previewHtml/contentHtml) — give it
   breathing room from surrounding paragraphs when nested that way. */
.plan-content .plan-media{margin:10px 0;}
.plan-content{font-size:0.9rem;line-height:1.6;color:var(--text);}
.plan-content h3,.plan-content h4{color:var(--navy);margin:10px 0 4px;font-family:var(--font-heading);}
.plan-content h3:first-child,.plan-content h4:first-child{margin-top:0;}
.plan-content ul,.plan-content ol{padding-left:1.25em;margin:6px 0;}
.plan-content li{margin-bottom:4px;}
.plan-content-divider{font-size:0.7rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--teal);margin:6px 0 4px;padding-top:10px;border-top:1px dashed var(--rule);}
.plan-locked-note{display:flex;align-items:center;gap:6px;font-size:0.85rem;color:var(--muted);}
.plan-locked-note svg{width:15px;height:15px;flex:none;}
.plan-card .btn-buy{padding:12px;font-size:0.92rem;min-height:auto;}
.plan-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.plan-file-btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--rule);
  color:var(--navy);padding:7px 12px;border-radius:var(--radius-sm,6px);font-size:0.8rem;font-weight:600;
  cursor:pointer;transition:background var(--dur-fast) ease;
}
.plan-file-btn:hover{background:var(--surface-2);}
@media (prefers-reduced-motion:reduce){
  .plan-card{transition:none;}
  .plan-card:hover{transform:none;}
}

/* ---------- Multi-idea cart ----------
   Theme-integration pass: cart lines are now individual bordered/rounded
   cards (matching the idea-card/plan-card language used elsewhere) instead
   of plain border-bottom rows, and the summary block is visually separated
   as its own "order total" panel so pricing reads distinctly from the line
   items above it and the payment CTA below it. */
.cart-badge{
  position:absolute;top:-6px;right:-6px;background:var(--gold);color:#fff;
  font-size:0.68rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
#cartBtn{position:relative;}
.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;min-width:0;}
.cart-item-idea{font-size:0.78rem;color:var(--muted);}
.cart-item-tier{font-weight:700;color:var(--navy);}
.cart-item-includes{font-size:0.76rem;color:var(--teal);margin-top:2px;}
.cart-item-right{display:flex;align-items:center;gap:12px;flex:none;}
.cart-item-price{font-weight:700;color:var(--gold-dark);}
.cart-item-remove{
  background:transparent;color:var(--danger);border:1px solid var(--danger);
  border-radius:var(--radius-pill);padding:6px 14px;font-size:0.78rem;font-weight:700;cursor:pointer;
  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;font-size:0.9rem;padding:3px 0;}
.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);}
/* Empty-cart / small inline hints inside modals — .admin-hint has no rule
   on customer-facing pages today (it's only styled in admin.css, which the
   storefront never loads), so this is purely additive here; on /admin
   itself admin.css loads after this file and its own .admin-hint rule
   still wins, so the admin panel is visually unchanged. */
.admin-hint{color:var(--muted);font-size:0.9rem;line-height:1.5;}
.plan-cta-row{display:flex;flex-direction:column;gap:8px;}
.btn-add-to-cart{
  background:var(--surface);border:1px solid var(--rule);color:var(--navy);
  padding:10px;border-radius:var(--radius-md);font-weight:600;font-size:0.85rem;cursor:pointer;
  transition:background var(--dur-fast) ease;
}
.btn-add-to-cart:hover{background:var(--surface-2);}
@media (min-width:480px){
  .plan-cta-row{flex-direction:row;}
  .plan-cta-row .btn-buy{flex:2;}
  .btn-add-to-cart{flex:1;}
}

/* ---------- Phase 2: "Up next" idea/plan cross-sell card ---------- */
/* Subtle, tasteful attention cue — a slow border-glow pulse, not a flash.
   The global prefers-reduced-motion rule near the top of this file already
   zeroes every animation-duration site-wide, so this card automatically
   renders static (no extra media query needed) for anyone who has
   reduced motion enabled — it just shows the same content without the
   glow, per the "same card, no animation" requirement. */
.next-offer-card{
  margin-top:22px;padding:18px 20px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);
  color:#fff;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 0 0 1px rgba(212,173,99,0.35);
  animation:nextOfferGlow 3.2s ease-in-out infinite;
}
@keyframes nextOfferGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(212,173,99,0.35),0 0 0 rgba(212,173,99,0);}
  50%{box-shadow:0 0 0 1px rgba(212,173,99,0.6),0 0 22px rgba(212,173,99,0.35);}
}
.next-offer-eyebrow{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-light);}
.next-offer-idea{font-family:var(--font-heading);font-size:1.15rem;font-weight:600;}
.next-offer-plan{font-size:0.9rem;color:#dfe3ec;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.next-offer-price{font-weight:700;color:var(--gold-light);}
.next-offer-cta{background:var(--gold);width:100%;}
.next-offer-cta:hover{background:var(--gold-dark);}
.next-offer-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
@media (min-width:520px){
  .next-offer-card{flex-direction:row;align-items:center;justify-content:space-between;gap:18px;}
  .next-offer-cta{width:auto;flex:none;white-space:nowrap;}
}

/* ---------- Chat widget ---------- */
.chat-toggle{
  position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;
  background:var(--wa-green);color:#fff;border:none;box-shadow:var(--shadow-lg);
  cursor:pointer;z-index:90;display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) ease;
}
.chat-toggle:hover{background:#226b47;}
.chat-toggle svg{width:24px;height:24px;}
.chat-widget{
  position:fixed;bottom:92px;right:22px;width:352px;max-width:92vw;height:468px;max-height:70vh;
  background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;z-index:95;
  transform-origin:bottom right;
}
.chat-widget.hidden{display:none;}
.chat-header{background:var(--navy);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:0.92rem;}
.chat-header button{background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;transition:background var(--dur-fast) ease;}
.chat-header button:hover{background:rgba(255,255,255,0.12);}
.chat-header button svg{width:16px;height:16px;}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;background:var(--surface-2);}
.msg{max-width:85%;padding:10px 13px;border-radius:var(--radius-md);font-size:0.88rem;line-height:1.45;}
.msg.user{align-self:flex-end;background:var(--navy);color:#fff;}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--rule);color:var(--text);}
.msg.bot.buy-hint{border-color:var(--gold);}
.msg .buy-btn-inline{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:var(--gold);color:#fff;padding:7px 13px;border-radius:var(--radius-pill);font-size:0.8rem;text-decoration:none;cursor:pointer;border:none;font-weight:700;transition:background var(--dur-fast) ease;}
.msg .buy-btn-inline:hover{background:var(--gold-dark);}
.msg .buy-btn-inline svg{width:13px;height:13px;}
.chat-input-row{display:flex;border-top:1px solid var(--rule);}
.chat-input-row input{flex:1;border:none;padding:14px;font-size:0.9rem;outline:none;background:var(--surface);}
.chat-input-row button{
  background:var(--wa-green);color:#fff;border:none;width:52px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast) ease;
}
.chat-input-row button:hover{background:#226b47;}
.chat-input-row button svg{width:18px;height:18px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .header-nav{display:none;}
}

@media (max-width:640px){
  .hero{padding:48px 0 40px;min-height:auto;}
  .hero{min-height:56dvh;max-height:78dvh;}
  .hero h1{font-size:1.7rem;}
  .header-inner{gap:10px;}
  .header-code{display:none;}
  .btn-account span:not(.icon){display:none;}
  .btn-account{padding:9px;width:40px;height:40px;justify-content:center;}
  #myPurchasesBtn.hidden{display:none;}
  .chat-widget{right:12px;bottom:84px;width:calc(100vw - 24px);}
  .chat-toggle{right:16px;bottom:16px;}
  .modal-card{padding:20px;}
  /* Re-assert the close-button clearance this mobile breakpoint's own
     .modal-card{padding:20px} above would otherwise wipe out (it resets
     all four sides, including the top gutter reserved for the close
     button on .auth-card -- see the non-mobile .auth-card rule). */
  .auth-card{padding-top:52px;}
  .hero-cta-row{flex-direction:column;align-items:stretch;}
}

@media (min-width:641px) and (max-width:900px){
  .videos-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
  .instagram-sidebar{max-width:420px;margin:0 auto;}
  .instagram-reels-grid{flex-direction:row;flex-wrap:wrap;justify-content:center;}
}

@media (max-width:640px){
  .instagram-reels-grid{flex-direction:row;flex-wrap:wrap;justify-content:center;}
}


/* ===================================================
   ENHANCED IDEA DETAIL MODAL — Full-Page Experience
   =================================================== */

#ideaModal { z-index: 101; overflow-x: hidden; overflow-y: auto; align-items: flex-start; }
#ideaModal .modal-card {
  max-width: none;
  width: 100%;
  max-height: none;
  margin: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  overflow-y: auto;
}
@media (min-width: 641px) {
  #ideaModal .modal-card {
    max-width: 96vw;
    min-height: calc(100vh - 16px);
    margin: 8px auto;
    padding: clamp(20px, 4vw, 32px);
    border-radius: var(--radius-md);
  }
}
@media (min-width: 1024px) {
  #ideaModal .modal-card {
    max-width: 1200px;
    min-height: auto;
    margin: 0;
    padding: clamp(32px, 5vw, 72px) clamp(28px, 4.5vw, 64px);
    border-radius: 0;
  }
}
#ideaModal .modal-card { overflow-y: auto; overscroll-behavior: contain; }
.id-hero { text-align:center; padding-bottom:clamp(14px,2vw,28px); margin-bottom:clamp(18px,2.5vw,40px); border-bottom:1px solid var(--rule); }
.id-hero-image-wrap { max-width:100%; margin:0 auto 18px; display:flex; justify-content:center; }
.id-hero-image-wrap img { max-height:clamp(160px,28vh,340px); width:auto; height:auto; object-fit:contain; border-radius:var(--radius-sm); max-width:100%; }
.id-hero h2 { font-family:var(--font-heading); font-size:clamp(1.3rem,3.2vw,2.2rem); font-weight:700; letter-spacing:-0.01em; color:var(--navy); margin:0 0 10px; line-height:1.25; }
.id-hero .id-hook { font-style:italic; color:#3a4556; font-size:clamp(0.88rem,1.35vw,1.06rem); line-height:1.55; max-width:680px; margin:0 auto 14px; }
.id-category-badge { display:inline-block; font-size:clamp(0.62rem,0.8vw,0.72rem); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; background:var(--navy); color:var(--gold-light); padding:3px 14px; border-radius:var(--radius-pill); margin-bottom:12px; }
.id-stats-row { display:flex; gap:clamp(8px,1.5vw,20px); justify-content:center; flex-wrap:wrap; margin-top:clamp(10px,1.5vw,18px); font-size:clamp(0.74rem,1vw,0.84rem); color:var(--muted); }
.id-stats-row b { color:var(--navy); font-weight:700; display:block; margin-top:2px; }
.id-stats-row span { display:flex; flex-direction:column; align-items:center; }
.id-section { margin-bottom:clamp(24px,3.5vw,48px); }
.id-section-title { font-size:clamp(0.7rem,0.9vw,0.8rem); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold-dark); margin:0 0 clamp(8px,1vw,14px); }
.id-body-text { font-size:clamp(0.88rem,1.3vw,1rem); line-height:1.7; color:var(--text); }
.id-body-text.blurred { filter:blur(3.5px); user-select:none; pointer-events:none; }
.id-lock-overlay { position:relative; padding:12px 0; }
.lock-overlay-text { font-size:0.82rem; font-weight:600; color:var(--teal); display:flex; align-items:center; gap:5px; margin-bottom:10px; }
.id-what-you-get { font-size:clamp(0.86rem,1.25vw,0.96rem); line-height:1.65; color:var(--text); background:var(--surface-2); border-left:3px solid var(--gold); padding:clamp(12px,1.5vw,18px) clamp(14px,1.8vw,22px); border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-top:0; }
.id-progression-wrap { text-align:center; padding:clamp(14px,2vw,24px) 0; margin-bottom:clamp(18px,2.5vw,32px); }
.id-progression-flow { display:flex; align-items:center; justify-content:center; gap:clamp(6px,1vw,14px); margin-bottom:10px; }
.id-progression-label { font-size:clamp(0.82rem,1.2vw,1rem); font-weight:800; color:var(--navy); letter-spacing:0.02em; }
.id-progression-arrow { font-size:clamp(0.7rem,1vw,0.85rem); color:var(--muted); }
.id-progression-line { flex:1; max-width:260px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--teal),var(--gold),var(--coral,#e07a5f)); margin:0 auto; }
.id-progression-sub { font-size:clamp(0.68rem,0.9vw,0.78rem); font-weight:600; color:var(--teal); letter-spacing:0.04em; display:flex; justify-content:center; gap:clamp(10px,2vw,24px); margin-top:8px; }
.id-final-cta { margin-top:clamp(28px,3.5vw,48px); padding-top:clamp(22px,2.8vw,40px); border-top:2.5px solid var(--navy); text-align:center; }
.id-cta-group { display:flex; gap:clamp(10px,1.5vw,18px); justify-content:center; flex-wrap:wrap; margin-bottom:clamp(14px,1.5vw,22px); }
.id-btn-buy { padding:clamp(13px,1.6vw,17px) clamp(28px,3.5vw,52px); font-size:clamp(0.92rem,1.35vw,1.12rem); font-weight:700; background:var(--gold); color:#fff; border:none; border-radius:var(--radius-pill); cursor:pointer; transition:background var(--dur-fast) ease,box-shadow var(--dur-fast) ease; min-width:180px; text-align:center; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.id-btn-buy:hover { background:var(--gold-dark); box-shadow:var(--shadow-sm); }
.id-btn-cart { padding:clamp(13px,1.6vw,17px) clamp(28px,3.5vw,52px); font-size:clamp(0.92rem,1.35vw,1.12rem); font-weight:700; background:transparent; color:var(--navy); border:2px solid var(--navy); border-radius:var(--radius-pill); cursor:pointer; transition:all var(--dur-fast) ease; min-width:180px; text-align:center; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.id-btn-cart:hover { background:var(--navy); color:#fff; }
#ideaModal .plans-grid { gap:clamp(12px,1.5vw,20px); }
#ideaModal .plan-card { padding:clamp(14px,2vw,22px); }
@media (min-width:768px) { #ideaModal .plans-grid { gap:20px; } #ideaModal .plan-card { padding:22px; } }
.id-chat-fallback { text-align:center; margin-top:clamp(14px,1.5vw,24px); }
#ideaModal .next-offer-card { margin-top:clamp(24px,3vw,44px); border-top:1px solid var(--rule); padding-top:clamp(16px,2vw,28px); }
@media (max-width:640px) {
  #ideaModal .modal-card { min-height:calc(100vh-16px); padding:14px; border-radius:0; margin:0; }
  #ideaModal { padding:0; }
  #ideaModal .modal-close { top:8px; right:10px; }
  .id-stats-row { gap:6px; }
  .id-cta-group { flex-direction:column; align-items:stretch; }
  .id-btn-buy,.id-btn-cart { min-width:unset; width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { #ideaModal .modal-card { transition:none !important; } }
/* ---- Customer Profile / My Account page ---- */
.profile-card{max-width:560px;width:100%;background:var(--surface,#fff);border:1px solid var(--rule,#dbd5c6);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow-sm, 0 1px 3px rgba(18,33,58,0.06));}
.profile-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule,#efeae0);flex-wrap:wrap;}
.profile-row:last-of-type{border-bottom:none;}
.profile-row span{color:var(--muted,#5c6273);font-size:0.9rem;font-weight:600;}
.profile-row strong{color:var(--navy,#12213A);font-size:0.95rem;font-weight:700;text-align:right;word-break:break-word;}
.profile-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:center;}
.profile-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;font-size:0.85rem;font-weight:700;color:var(--muted,#5c6273);}
.profile-field input,.profile-field select{padding:11px 12px;border:1px solid var(--rule,#dbd5c6);border-radius:8px;font-size:0.95rem;font-family:inherit;color:var(--text,#1b2130);background:#fff;width:100%;}
.profile-field input:focus,.profile-field select:focus{outline:2px solid var(--gold,#a9812e);border-color:var(--gold,#a9812e);}
.profile-email-note{font-size:0.8rem;color:var(--muted,#5c6273);margin:0 0 12px;}
.profile-notice{display:block;background:rgba(169,129,46,0.1);border:1px solid var(--gold,#a9812e);border-radius:8px;padding:10px 12px;font-size:0.85rem;color:var(--navy,#12213A);font-weight:600;}
.profile-locked-value{color:var(--text,#1b2130);font-size:0.95rem;font-weight:700;}
.profile-msg{font-size:0.88rem;font-weight:700;margin:6px 0 10px;}
.profile-logout{background:none;border:1px solid #c0473f;color:#c0473f;padding:10px 18px;border-radius:8px;font-weight:700;font-size:0.9rem;cursor:pointer;}
.profile-logout:hover{background:#fbeaea;}
.profile-cancel{background:none;border:1px solid var(--rule,#dbd5c6);color:var(--muted,#5c6273);padding:10px 18px;border-radius:8px;font-weight:700;font-size:0.9rem;cursor:pointer;}
@media (max-width:560px){ .profile-row{flex-direction:column;text-align:left;} .profile-row strong{text-align:left;} }
/* Phase 3A.1 — email change */
.profile-subhead{font-size:1.05rem;font-weight:800;color:var(--navy,#12213A);margin:0 0 6px;}

/* ---- Mobile Number: country-code selector ---- */
.phone-field-row{display:flex;gap:8px;align-items:stretch;position:relative;}
.country-code-btn{display:flex;align-items:center;gap:6px;flex:none;padding:11px 10px;border:1px solid var(--rule,#dbd5c6);border-radius:8px;background:#fff;font-size:0.95rem;font-weight:700;color:var(--text,#1b2130);cursor:pointer;white-space:nowrap;min-width:84px;font-family:inherit;}
.country-code-btn:hover{border-color:var(--gold,#a9812e);}
.country-code-btn:focus-visible{outline:2px solid var(--gold,#a9812e);outline-offset:1px;}
.country-code-btn .cc-caret{font-size:0.65rem;color:var(--muted,#5c6273);margin-left:2px;}
.phone-field-row input#pfPhoneNumber{flex:1;min-width:0;}
.country-dropdown{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:min(320px,100%);max-width:100%;background:#fff;border:1px solid var(--rule,#dbd5c6);border-radius:10px;box-shadow:var(--shadow-md,0 6px 16px rgba(16,29,51,0.10));padding:8px;}
.country-dropdown.hidden{display:none;}
.country-search{width:100%;padding:9px 10px;border:1px solid var(--rule,#dbd5c6);border-radius:6px;font-size:0.88rem;margin-bottom:6px;font-family:inherit;box-sizing:border-box;}
.country-search:focus{outline:2px solid var(--gold,#a9812e);border-color:var(--gold,#a9812e);}
.country-list{max-height:250px;overflow-y:auto;display:flex;flex-direction:column;gap:1px;}
.country-option{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:0.88rem;font-family:inherit;color:var(--text,#1b2130);}
.country-option:hover,.country-option:focus-visible{background:var(--surface-2,#f3f1ea);outline:none;}
.country-option.selected{background:rgba(169,129,46,0.12);font-weight:700;}
.co-flag{font-size:1.1rem;flex:none;}
.co-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.co-dial{flex:none;color:var(--muted,#5c6273);font-weight:700;}
.country-empty{padding:10px;text-align:center;color:var(--muted,#5c6273);font-size:0.85rem;margin:0;}
@media (max-width:480px){ .country-dropdown{width:100%;} .country-code-btn{min-width:74px;padding:11px 8px;} }
/* ---- Visitor AI: free-chat quota + WhatsApp handoff ---------------------- */
/* The 10-chat limit is enforced server-side; these styles only present it.  */
.chat-quota-note{padding:7px 16px;font-size:0.76rem;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--rule);}
.chat-quota-note.hidden{display:none;}
.chat-whatsapp{padding:12px 16px;background:var(--surface);border-top:1px solid var(--rule);}
.chat-whatsapp.hidden{display:none;}
.chat-whatsapp-text{margin:0 0 9px;font-size:0.85rem;line-height:1.45;color:var(--ink);}
.chat-whatsapp-btn{display:inline-flex;align-items:center;justify-content:center;background:#25D366;color:#08321f;font-weight:700;font-size:0.88rem;text-decoration:none;padding:11px 16px;border-radius:9px;}
.chat-whatsapp-btn:hover{background:#1ebe5a;}
.chat-input-disabled{opacity:0.6;}
.chat-input-row input:disabled,.chat-input-row button:disabled{cursor:not-allowed;}
/* ---- Visitor chat: guest free-message limit -> log in / create account --- */
.chat-whatsapp .chat-gate-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:2px;background:#0a2540;color:#fff;font-weight:700;font-size:0.88rem;border:0;border-radius:9px;padding:11px 16px;cursor:pointer;}
.chat-whatsapp .chat-gate-btn:hover{background:#123a5f;}
.chat-whatsapp .chat-whatsapp-btn{margin-top:8px;}
.chat-whatsapp .chat-gate-secondary{display:block;margin-top:10px;font-size:0.8rem;color:var(--muted);}

/* ==========================================================================
   Phase C5 — Wishlist (heart / save control + Wishlist page)
   Additive only, built from the existing brand tokens above. The heart is a
   normal inline-flex button, so it never breaks the surrounding flex rows and
   never causes horizontal overflow at any width.
   ========================================================================== */
.wishlist-heart{display:inline-flex;align-items:center;gap:6px;background:var(--surface);color:var(--navy);
  border:1px solid var(--rule-strong);border-radius:var(--radius-pill);padding:7px 14px;
  font-family:var(--font-body);font-size:0.86rem;font-weight:600;line-height:1.2;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-premium),color var(--dur-fast) var(--ease-premium),
    background var(--dur-fast) var(--ease-premium),transform var(--dur-fast) var(--ease-premium);}
.wishlist-heart:hover{border-color:var(--gold);color:var(--gold-dark);transform:translateY(-1px);}
.wishlist-heart:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.wishlist-heart:disabled{opacity:0.6;cursor:progress;transform:none;}
.wishlist-heart .wishlist-heart-icon{font-size:1.05rem;line-height:1;color:var(--muted);}
.wishlist-heart.is-saved{border-color:var(--gold);background:var(--surface-2);color:var(--gold-dark);}
.wishlist-heart.is-saved .wishlist-heart-icon{color:var(--gold);}
/* Compact form: icon only, used on plan cards and carousel slides. */
.wishlist-heart-compact{padding:6px 10px;gap:0;}
.idea-slide-foot{flex-wrap:wrap;}
.idea-detail-hero-wishlist{margin-top:var(--space-4);}
.idea-detail-plan-wishlist{margin-top:var(--space-3);}

/* ---- Wishlist page ---- */
.wishlist-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));}
.wishlist-item{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px;}
.wishlist-item.is-unavailable{border-style:dashed;background:var(--surface-2);}
.wishlist-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;}
.wishlist-item-title{margin:0;font-family:var(--font-heading);font-size:1.1rem;color:var(--navy);}
.wishlist-item-state{font-size:0.72rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  border-radius:var(--radius-pill);padding:4px 10px;white-space:nowrap;}
.wishlist-item-state.is-available{background:rgba(31,111,92,0.12);color:var(--teal);}
.wishlist-item-state.is-unavailable{background:rgba(140,63,54,0.12);color:var(--danger);}
.wishlist-item-meta{margin:0;color:var(--muted);font-size:0.9rem;}
.wishlist-item-price{margin:0;font-weight:700;color:var(--navy);}
.wishlist-item-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3);}
.wishlist-empty{background:var(--surface);border:1px dashed var(--rule-strong);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;}
@media (max-width:520px){
  .wishlist-heart{font-size:0.82rem;padding:6px 12px;}
  .wishlist-item-head{flex-direction:column;align-items:flex-start;}
}

/* ==========================================================================
   Phase C6 — Purchase intent + website lead form (additive, existing tokens).
   The soft hook + the enquiry CTA are ordinary inline-flex/flex-wrap elements, so
   they never introduce horizontal overflow at any width.
   ========================================================================== */
.ip-intent-hook{margin-top:var(--space-5);padding:var(--space-4);border:1px dashed var(--rule-strong);
  border-radius:var(--radius-md);background:var(--surface-2);display:flex;flex-direction:column;
  align-items:center;gap:var(--space-3);text-align:center;}
.ip-intent-hook-text{margin:0;color:var(--navy);font-size:0.95rem;max-width:48ch;line-height:1.5;}
.ip-intent-cta{white-space:normal;}
.ip-lead-success{margin:0;font-size:0.9rem;line-height:1.5;color:var(--teal);
  background:rgba(31,111,92,0.10);border-radius:var(--radius-sm);padding:10px 12px;}
#ipLeadIdea[readonly]{background:var(--surface-2);color:var(--navy);font-weight:600;}
#ipLeadModal .pf-field{margin-bottom:var(--space-3);}
/* The security check is the last field, so it needs no big gap before submit. */
#ipLeadCaptchaField{margin-bottom:var(--space-2);}
/* Local security check: a plain responsive row (never wider than its card). */
.ip-captcha-row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.ip-captcha-question{font-weight:700;color:var(--navy);font-size:0.98rem;white-space:nowrap;}
.ip-captcha-row input{flex:1 1 84px;min-width:72px;max-width:120px;}
.ip-captcha-refresh{background:transparent;border:1px solid var(--rule-strong);border-radius:var(--radius-pill);
  color:var(--muted);font-family:var(--font-body);font-size:0.78rem;font-weight:600;padding:5px 10px;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-premium),color var(--dur-fast) var(--ease-premium);}
.ip-captcha-refresh:hover{border-color:var(--gold);color:var(--gold-dark);}
.ip-captcha-refresh:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (max-width:520px){
  .ip-intent-hook{padding:var(--space-3);}
  #ipLeadModal .modal-card{padding:18px;}
  .ip-captcha-row input{max-width:100px;}
}


/* ---------------------------------------------------------------- Phase C7 --- */
/* Plan deep-link: the plan the link resolved to is presented as the primary card.
   Presentation only - access and lock state are unchanged (the server decides). */
.idea-detail-plan-card--selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 10px 26px rgba(18,33,58,0.10);}
.idea-detail-plan-selected-note{margin:0 0 var(--space-3);color:var(--gold-dark);font-weight:700;font-size:0.82rem;
  letter-spacing:0.04em;text-transform:uppercase;}
/* Recommended for you: 1 primary + up to 2 alternatives, never more. */
.ip-recs{margin-top:var(--space-6);}
.ip-recs-primary{margin-top:var(--space-3);}
.ip-recs-card{display:flex;flex-direction:column;gap:10px;padding:var(--space-4);border:1px solid var(--rule-strong);
  border-radius:var(--radius-lg);background:var(--surface);}
.ip-recs-card-primary{border-color:var(--gold);background:linear-gradient(180deg,rgba(169,129,46,0.06),transparent 60%);}
.ip-recs-tag{margin:0;color:var(--gold-dark);font-weight:700;font-size:0.76rem;letter-spacing:0.06em;text-transform:uppercase;}
.ip-recs-title{margin:0;color:var(--navy);font-size:1.06rem;line-height:1.3;}
.ip-recs-plan{margin:0;color:var(--navy);font-weight:600;font-size:0.95rem;}
.ip-recs-price{color:var(--gold-dark);font-weight:700;}
.ip-recs-hook{margin:0;color:var(--muted);font-size:0.92rem;line-height:1.55;}
.ip-recs-reason{margin:0;color:var(--muted);font-size:0.85rem;font-style:italic;}
.ip-recs-cta{align-self:flex-start;}
.ip-recs-alternatives{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3);margin-top:var(--space-4);}
.ip-recs-sub{margin:0 0 var(--space-2);color:var(--muted);font-size:0.8rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;}
.ip-recs-alternatives .ip-recs-sub{grid-column:1 / -1;}
@media (max-width:520px){
  .ip-recs-card{padding:var(--space-3);}
  .ip-recs-alternatives{grid-template-columns:1fr;}
  .ip-recs-cta{align-self:stretch;text-align:center;}
}


/* ---------------------------------------------------------------- Phase C8 --- */
/* Idea engagement: Like / Comment / Share. Idea-level only - there is no
   plan-level variant. Counts, likability and comment visibility are decided by
   the server; this file only presents them. */
.ip-engage-wrap{margin:var(--space-5) 0 var(--space-6);}
.ip-engage{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;}
.ip-engage-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:9px 16px;min-height:40px;
  border:1px solid var(--rule-strong);border-radius:var(--radius-pill);background:var(--surface);
  color:var(--navy);font:inherit;font-size:0.92rem;font-weight:600;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-premium),background var(--dur-fast) var(--ease-premium),
    box-shadow var(--dur-fast) var(--ease-premium);}
.ip-engage-btn:hover{border-color:var(--gold);background:var(--surface-2);}
.ip-engage-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.ip-engage-btn[disabled]{opacity:0.6;cursor:progress;}
.ip-engage-icon{font-size:1.02rem;line-height:1;}
.ip-engage-count{display:inline-flex;min-width:22px;justify-content:center;padding:1px 6px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--muted);font-size:0.8rem;font-variant-numeric:tabular-nums;}
.ip-engage-like.is-on{border-color:var(--gold);background:linear-gradient(180deg,rgba(169,129,46,0.10),transparent 70%);color:var(--gold-dark);}
.ip-engage-like.is-on .ip-engage-count{background:rgba(169,129,46,0.14);color:var(--gold-dark);}
.ip-engage-hint{animation:ip-engage-pulse var(--dur-slow) var(--ease-premium) 2;}
@keyframes ip-engage-pulse{0%,100%{box-shadow:0 0 0 0 rgba(31,111,92,0);}50%{box-shadow:0 0 0 4px rgba(31,111,92,0.18);}}
.ip-engage-btn-primary{border-color:var(--navy);background:var(--navy);color:var(--cream);}
.ip-engage-btn-primary:hover{border-color:var(--navy2);background:var(--navy2);}

.ip-engage-panel{margin-top:var(--space-4);padding:var(--space-5);border:1px solid var(--rule-strong);
  border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);}
.ip-engage-panel-title{margin:0 0 var(--space-3);color:var(--navy);font-family:var(--font-heading);
  font-size:1.14rem;display:flex;align-items:center;gap:var(--space-2);}
.ip-engage-list{display:flex;flex-direction:column;gap:var(--space-3);}
.ip-engage-comment{padding:var(--space-3) 0;border-top:1px solid var(--rule);}
.ip-engage-comment:first-child{border-top:0;padding-top:0;}
.ip-engage-comment-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);color:var(--navy);font-size:0.9rem;}
.ip-engage-comment-text{margin:6px 0 0;color:var(--text);font-size:0.95rem;line-height:1.6;overflow-wrap:anywhere;}
.ip-engage-when{color:var(--muted);font-size:0.8rem;}
.ip-engage-status{padding:1px 8px;border-radius:var(--radius-pill);font-size:0.72rem;font-weight:700;letter-spacing:0.03em;}
.ip-engage-status-pending{background:rgba(169,129,46,0.14);color:var(--gold-dark);}
.ip-engage-status-rejected{background:rgba(140,63,54,0.12);color:var(--danger);}
.ip-engage-comment-actions{display:flex;gap:var(--space-3);margin-top:6px;}
.ip-engage-link{border:0;background:none;padding:0;color:var(--teal);font:inherit;font-size:0.82rem;font-weight:600;
  text-decoration:underline;cursor:pointer;}
.ip-engage-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:var(--radius-sm);}

.ip-engage-empty,.ip-engage-sub,.ip-engage-note,.ip-engage-login{margin:0;color:var(--muted);font-size:0.86rem;line-height:1.55;}
.ip-engage-sub{margin-top:var(--space-5);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;font-size:0.76rem;}
.ip-engage-mine{margin-top:var(--space-4);padding-top:var(--space-2);}
.ip-engage-mine .ip-engage-list{margin-top:var(--space-2);}
.ip-engage-form{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-5);
  padding-top:var(--space-4);border-top:1px solid var(--rule);}
.ip-engage-form-label{color:var(--navy);font-weight:700;font-size:0.9rem;}
.ip-engage-form textarea{width:100%;min-height:84px;padding:var(--space-3);border:1px solid var(--rule-strong);
  border-radius:var(--radius-md);background:var(--paper);color:var(--text);font:inherit;font-size:0.94rem;resize:vertical;}
.ip-engage-form textarea:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.ip-engage-form .ip-engage-btn{align-self:flex-start;}
.ip-engage-error{margin:0;min-height:1.1em;color:var(--danger);font-size:0.84rem;}
.ip-engage-login{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--rule);}

.ip-engage-share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-2);}
.ip-engage-share-option{padding:11px 14px;border:1px solid var(--rule-strong);border-radius:var(--radius-md);
  background:var(--paper);color:var(--navy);font:inherit;font-size:0.9rem;font-weight:600;cursor:pointer;text-align:center;
  transition:border-color var(--dur-fast) var(--ease-premium),background var(--dur-fast) var(--ease-premium);}
.ip-engage-share-option:hover{border-color:var(--gold);background:var(--surface-2);}
.ip-engage-share-option:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.ip-engage-url{margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3);border:1px dashed var(--rule-strong);
  border-radius:var(--radius-md);background:var(--surface-2);color:var(--muted);font-size:0.8rem;overflow-wrap:anywhere;}

@media (max-width:640px){
  .ip-engage{gap:var(--space-2);}
  .ip-engage-btn{flex:1 1 auto;justify-content:center;padding:10px 12px;}
  .ip-engage-panel{padding:var(--space-4);}
  .ip-engage-form .ip-engage-btn{align-self:stretch;}
}
@media (prefers-reduced-motion:reduce){
  .ip-engage-hint{animation:none;}
  .ip-engage-btn,.ip-engage-share-option{transition:none;}
}