/* ==========================================================================
   TuConnect · pages.css
   Page-specific styles. Loaded after styles.css + components.css.
   --------------------------------------------------------------------------
   Section 1  Shared page sections (hero, grids, testimonials, stats, CTA)
              ported from the original prototype. Two corrections applied
              everywhere: --ink-faint text -> --ink-soft, and brand-green
              TEXT -> --green-ink (fills keep --green). Mouse-only aurora and
              spotlight decorations were removed (invisible to most traffic,
              paint cost on mobile).
   Section 2  AI Resume Builder page (scorecard, result, pricing table, etc.)
   ========================================================================== */

/* ==========================================================================
   SECTION 1 — Shared page sections (Home / Grow / Hire)
   ========================================================================== */

/* Base section vertical rhythm. This matches the visual benchmark (96px).
   Previously only the responsive overrides existed, so desktop sections had
   no vertical padding and read cramped. `.section` (used by the Resume Builder
   and stubs) already carries this; this aligns the ported Home/Grow/Hire
   sections to the same rhythm. */
.bg-soft, .bg-blue, .bg-ink{padding:var(--space-20) 0;}

/* Separation between the last content section and the footer.
   Measured across 19 pages this ranged from 0px (article layouts, where content
   butted straight against the footer) to 128px, with the home page at 48px and
   most pages at 64px. The footer itself is identical everywhere (398px), so the
   inconsistency was entirely in what preceded it. One value, set here, applies
   regardless of which section type happens to end a page. */
main > *:last-child{padding-bottom:var(--space-20);}
.tight{padding:var(--space-16) 0;}   /* intentionally tighter — matches benchmark */

.hero{padding:88px 0 72px;position:relative;overflow:hidden;}

/* --------------------------------------------------------------------------
   Aurora — ambient background depth for hero sections. Restored from the
   original redesign: three large, blurred, slowly-drifting colour blobs
   (blue / pink / green) behind the content. This is a pure-CSS ambient
   effect (no JS, no pointer dependency) that gives the hero the premium,
   Linear/Stripe-style glow.

   Performance: the blobs animate only `transform` (compositor-only, no
   layout/paint), sit on their own layer via `will-change`, and are capped at
   three elements. The blur is baked once. Sizes are modest so the painted
   area stays small. Under reduced-motion the blobs are shown but static.
   Accessibility: purely decorative — pointer-events:none, aria-hidden in
   markup, sits behind content (which is z-index:1), and does not affect
   contrast of the text above it.
   -------------------------------------------------------------------------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.blob{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform;}
.blob-1{width:440px;height:440px;background:var(--blue);opacity:.22;
  top:-160px;left:-120px;animation:drift1 19s ease-in-out infinite alternate;}
.blob-2{width:380px;height:380px;background:var(--pink);opacity:.15;
  bottom:-180px;right:-100px;animation:drift2 23s ease-in-out infinite alternate;}
.blob-3{width:300px;height:300px;background:var(--green);opacity:.13;
  top:18%;right:14%;animation:drift3 17s ease-in-out infinite alternate;}
@keyframes drift1{from{transform:translate(0,0);}to{transform:translate(46px,32px);}}
@keyframes drift2{from{transform:translate(0,0);}to{transform:translate(-34px,-42px);}}
@keyframes drift3{from{transform:translate(0,0);}to{transform:translate(-22px,26px);}}
@media (prefers-reduced-motion: reduce){
  .blob-1,.blob-2,.blob-3{animation:none;}
}
/* On smaller screens, drop to two blobs and lighter blur to keep paint cheap. */
@media (max-width:600px){
  .blob{filter:blur(56px);}
  .blob-3{display:none;}
}

/* --------------------------------------------------------------------------
   Hero spotlight — a soft radial glow that follows the pointer. Rendered on a
   pseudo-element so it composites cheaply (opacity/background-position only,
   no layout). Position comes from two custom properties set by interactions.js;
   the glow is invisible until JS confirms a fine pointer and sets --spot-on.
   Static fallback: with no JS (or coarse pointer / reduced motion) the hero is
   simply flat, exactly as before. GPU-friendly: no box-shadow, no blur filter.
   -------------------------------------------------------------------------- */
.hero::before,
.rb-hero::before{
  content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease-out);
  background:radial-gradient(420px circle at var(--spot-x,50%) var(--spot-y,30%),
    rgba(63,41,207,.10), rgba(63,41,207,0) 60%);
}
.hero[data-spot="on"]::before,
.rb-hero[data-spot="on"]::before{opacity:1;}
.hero > *:not(.aurora),
.rb-hero > *:not(.aurora),
.article-hero > *:not(.aurora){position:relative;z-index:1;}
@media (prefers-reduced-motion: reduce){
  .hero::before,
  .rb-hero::before{display:none;}
}
.hero h1{font-size:clamp(40px,6.2vw,78px);letter-spacing:-.03em;}
.hero .sub{
    font-size:19px;color:var(--ink-soft);max-width:600px;
    margin-top:22px;line-height:1.55;
  }
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center;}
.hero-note{font-size:14px;color:var(--ink-soft);margin-top:18px;display:flex;align-items:flex-start;gap:8px;}
.hero-note svg{flex:none;color:var(--success);width:16px;height:16px;margin-top:3px;}
.hero-head{max-width:760px;}
.home-hero{padding-bottom:0;}
.hero-testimonial{
    margin-top:30px;padding:16px 20px;max-width:420px;
    background:var(--card-background);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid var(--card-border);border-radius:16px;
    text-align:left;
  }
.product-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;}
.product-pill{
    background:var(--card-background);
    border-radius:var(--radius-lg);padding:30px;
    border:1.5px solid var(--card-border);
  }
/* Restored from the original design: the tag row (dot + product name) and the
   coloured indicator dots — Grow blue/purple, Hire green. These rules had gone
   missing, leaving zero-size (invisible) dots and unstyled titles. */
.product-pill .tag{
    font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--text-primary);
    display:flex;align-items:center;gap:8px;margin-bottom:10px;
  }
.product-pill .tag .dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--blue);}
.product-pill p{color:var(--text-secondary);font-size:15px;line-height:1.6;margin:0;}
.product-pill.hire .tag .dot{background:var(--green);}
.path-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:22px;
    margin-top:56px;align-items:stretch;
  }
@media(max-width:768px){.path-grid{grid-template-columns:1fr;}}
.path-card{
    background:var(--card-background);
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-lg);
    padding:36px;
    display:flex;flex-direction:column;
    height:100%;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
.path-card h2,.path-card h3{
    font-family:var(--font-display);font-size:22px;font-weight:800;
    color:var(--text-primary);margin:16px 0 8px;
  }
.path-card p{
    color:var(--text-secondary);font-size:15px;line-height:1.6;
    margin:0 0 24px;flex:1;
  }
.path-card .btn{
    margin-top:auto;align-self:flex-start;
  }
.path-icon{
    width:52px;height:52px;border-radius:16px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:var(--blue-tint);color:var(--stat-primary);
  }
.path-card.hire .path-icon{background:var(--green-tint);color:var(--green-ink);}
.logo-strip{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:36px;
  }
.strip-label{text-align:center;font-size:13px;color:var(--text-secondary);letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-bottom:26px;}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.problem-card{
    background:var(--card-background);border-radius:var(--radius-md);
    padding:30px 26px;border:1.5px solid var(--card-border);
  }
.pnum{
    font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--badge-text);
    background:var(--badge-bg-purple);padding:3px 10px;border-radius:var(--radius-full);display:inline-block;
    letter-spacing:.05em;margin-bottom:14px;
  }
.problem-tail{
    margin-top:36px;padding-top:32px;border-top:1px solid var(--line);
    font-family:var(--font-display);font-weight:700;font-size:20px;
    max-width:640px;
  }
.stakes-strip{
    background:var(--card-background);
    border:1.5px solid rgba(255,0,107,.25);
    border-radius:var(--radius-lg);
    padding:34px 38px;margin-top:40px;
  }
.stakes-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.stakes-bridge{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--stat-primary);}
.plan-grid{display:grid;gap:18px;}
.plan-card{
    background:var(--card-background);border-radius:var(--radius-md);
    padding:28px 24px;position:relative;border:1.5px solid var(--card-border);
  }
.plan-step-num{
    font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--stat-primary);
    margin-bottom:12px;
  }
.toolkit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tool-card{
    background:var(--card-background);border-radius:var(--radius-md);
    padding:28px 24px;border:1.5px solid var(--card-border);
    display:flex;flex-direction:column;height:100%;
    transition:transform var(--duration-base) var(--ease-out),
               box-shadow var(--duration-base) var(--ease-out),
               border-color var(--duration-base) var(--ease-out);
  }

/* The CTA cell sits inside a grid of white tool cards. It keeps the same card
   surface as its siblings so the grid reads as one row, and lets the filled
   button be the only accent — rather than competing with it for attention. */
.tool-card--cta{
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  }
.tool-card--cta p,.tool-card__text{
    color:var(--text-primary);font-weight:600;font-size:15px;line-height:1.5;margin:0 0 16px;
  }

.tool-icon{
    width:44px;height:44px;border-radius:12px;
    background:var(--blue-tint);color:var(--stat-primary);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  }
/* --------------------------------------------------------------------------
   Responsive column grids. These previously set grid-template-columns WITHOUT
   display:grid, so they silently fell back to block flow and every section
   using them stacked full-width. Now they are real grids with graceful
   breakpoints: desktop → tablet (2) → mobile (1).
   -------------------------------------------------------------------------- */
.cols-2,.cols-3,.cols-4{display:grid;gap:20px;align-items:stretch;}

/* Card headings sit inside a section whose heading is an h2, so they must be h3
   to avoid an h2 -> h4 skip in the outline. There is no base h4 size rule, so
   h4 rendered at 1rem; this preserves that appearance at the correct level.
   Pages still using h4 here are unaffected. */
.problem-card h3,.plan-card h3,.tool-card h3{font-size:1rem;line-height:1.3;}
.cols-2{grid-template-columns:repeat(2,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){
  .cols-3,.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;}
}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.testi-card{
    background:var(--card-background);border-radius:var(--radius-md);
    padding:26px 24px;border:1.5px solid var(--card-border);
    display:flex;flex-direction:column;gap:16px;height:100%;margin:0;
    text-align:left;
  }
/* Testimonial grids stretch cards to equal height; the author block is pinned
   to the bottom of each card so names/roles line up across the row regardless
   of quote length. */
.cols-3:has(.testi-card){align-items:stretch;}
.testi-quote{font-size:15px;line-height:1.62;color:var(--text-primary);text-align:left;font-style:normal;margin:0;}
.testi-person{display:flex;align-items:center;gap:12px;margin-top:auto;text-align:left;}

/* --------------------------------------------------------------------------
   Proof testimonials. Uses the same container width as every other section so
   its left/right edges align with the rest of the page (an earlier wider
   override made this section jut out past all the others). Internal spacing
   (grid gap, card padding, heading gap) is kept for a clean card layout.
   Equal-height + bottom-pinned author still hold.
   -------------------------------------------------------------------------- */
.section--soft:has(#proof-title) .section-head{margin-bottom:32px;}
.testi-avatar{
    width:38px;height:38px;border-radius:50%;
    background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:700;font-size:14px;flex:none;
  }
.testi-stars{color:var(--pink);font-size:15px;letter-spacing:2px;text-align:left;margin:0;}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;
  max-width:820px;margin-inline:auto;text-align:center;}
.stat-card{text-align:center;padding:12px;}
.stat-num{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(38px,5vw,58px);color:var(--text-primary);line-height:1;
  }
.stat-label{font-size:14.5px;color:var(--text-secondary);margin-top:10px;max-width:220px;margin-inline:auto;}
.session-panel{
    background:var(--card-background);
    backdrop-filter:blur(16px);
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-lg);
    padding:40px 44px;text-align:center;
  }
/* When the stats panel sits directly under the testimonial grid (the product
   pages: Resume Builder, Cover Letter, Job Tracker), give it the same breathing
   room the Job Seekers page gets from its separate section — otherwise the panel
   crowds the cards. */
.testi-grid + .session-panel{margin-top:64px;}
.session-panel-head{margin-bottom:30px;}
.session-num{
    font-family:var(--font-display);font-weight:800;font-size:40px;
    background:linear-gradient(120deg, var(--blue), var(--pink));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
.session-label{font-size:13.5px;color:var(--ink-soft);margin-top:8px;max-width:180px;margin-inline:auto;line-height:1.4;}
.session-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.session-note{font-size:13px;color:var(--ink-soft);margin-top:26px;}

/* --------------------------------------------------------------------------
   Home footer-area rhythm. These two sections (partner marquee, and the final
   CTA banner) were bare <section>s with no padding, so the marquee crowded the
   banner and the banner touched the footer. Give them intentional, consistent
   vertical spacing. Slightly narrower wrap on the CTA gives the banner more
   breathing room from the viewport edges.
   -------------------------------------------------------------------------- */
.marquee-outer{padding:var(--space-20) 0 var(--space-12);}
.cta-outer{padding:var(--space-8) 0 var(--space-16);}
.cta-outer .wrap{max-width:1080px;}
.guide-band{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
.flywheel-row{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}
.fw-diagram{
    position:relative;aspect-ratio:1/1;max-width:420px;margin:0 auto;
  }
.flywheel-steps{display:flex;flex-direction:column;gap:0;}
.fw-step{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);}
.fw-num{
    flex:none;width:34px;height:34px;border-radius:50%;
    background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:700;font-size:14px;
  }
.bg-soft{background:var(--surface-section);}
.bg-blue{background:linear-gradient(150deg,var(--blue) 0%, var(--blue-dark) 100%);color:var(--text-on-brand-primary,#FFFFFF);}
.bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4, .bg-blue .stat-num {color:var(--text-on-brand-primary,#FFFFFF);}
.bg-blue p, .bg-blue .stat-label, .bg-blue .sub, .bg-blue .section-head p {color:var(--text-on-brand-secondary,rgba(255,255,255,.85));}
.bg-blue .eyebrow, .bg-blue .strip-label {color:var(--text-on-brand-muted,rgba(255,255,255,.70));}
.bg-ink{background:var(--surface-section);color:var(--text-primary);}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:var(--text-primary);}
.bg-ink p{color:var(--text-secondary);}
.bg-ink--centered{padding-top:40px;padding-bottom:58px;background:var(--surface-section);color:var(--text-primary);}
.bg-ink--centered .section-head{margin-bottom:0;}
/* The toolkit-cards section (bare <section>, no padding) sat flush against the
   dark "Where this takes you" band, so the cards touched it. Add bottom padding
   so the cards clear the section boundary; combined with the dark band's 40px
   top padding this gives a normal ~80px transition consistent with the rest of
   the page. */
.toolkit-outro{padding-bottom:40px;}
/* The trailing "As featured in" marquee is a .tight (64px) strip sitting
   between two 80px body sections, which produced odd 144px gaps instead of the
   page's consistent 160px rhythm. Bring it onto the standard body spacing so
   the whole main flow uses one rhythm. */
.featured-outro{padding-top:80px;padding-bottom:80px;}
.center{margin-left:auto;margin-right:auto;text-align:center;}
.g-green .tool-icon{background:var(--green-tint);color:var(--green-ink);}

/* MEDIA */
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }
@media (max-width:600px){.stakes-strip{padding:26px 22px;}}
@media (max-width:920px){
    /* (Nav responsive behaviour lives in components.css and breaks at 768px.
       The duplicate nav rules that were here referenced a defunct .menu-open
       class and have been removed.) */
    .path-grid, .flywheel-row, .guide-band, .foot-grid{grid-template-columns:1fr;}
    .flywheel-row{gap:40px;}
    .fw-diagram{max-width:280px;}
    .problem-grid, .toolkit-grid, .testi-grid, .stats-row{grid-template-columns:1fr 1fr;}
    .plan-grid.cols-3{grid-template-columns:1fr 1fr;}
    .plan-grid.cols-4{grid-template-columns:1fr 1fr;}
    .product-row{grid-template-columns:1fr;}
    .bg-soft, .bg-blue, .bg-ink{padding:var(--space-18) 0;}
    .tight{padding:var(--space-12) 0;}
  }
@media (max-width:600px){
    .wrap{padding:0 20px;}
    .problem-grid, .toolkit-grid, .testi-grid, .stats-row, .plan-grid.cols-3, .plan-grid.cols-4{grid-template-columns:1fr;}
    .hero{padding:52px 0 44px;}
    .hero h1{font-size:34px;}
    .bg-soft, .bg-blue, .bg-ink{padding:var(--space-16) 0;}
    .tight{padding:var(--space-12) 0;}
  }
@media (max-width:920px){
    .toolkit-grid .tool-card:nth-child(1),
    .toolkit-grid .tool-card:nth-child(6){grid-column:span 2;}
  }
@media (max-width:600px){
    .toolkit-grid .tool-card:nth-child(1),
    .toolkit-grid .tool-card:nth-child(6){grid-column:span 1;}
  }
@media (max-width:600px){
    .session-panel{padding:30px 24px;}
    .session-stats{grid-template-columns:1fr;gap:22px;}
  }
/* --------------------------------------------------------------------------
   Final CTA band. The action row reused .hero-actions, which is left-aligned
   for the hero — but this band is centre-aligned, so the buttons hung to the
   left with a large empty space beside them. Centre the actions here and
   tighten the vertical padding so the band is not taller than it needs to be.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Card hover states — restored to match the visual benchmark. Interactive
   cards (tool, plan, path) lift on hover; content cards (problem, testimonial)
   deliberately stay still. These transitions existed on the cards but the
   :hover rules were dropped during the port, so they never animated.
   -------------------------------------------------------------------------- */
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-tint-2);}
.plan-card{transition:transform var(--duration-base) var(--ease-out),
  box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out);}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-tint-2);}
.path-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-tint-2);}
@media (prefers-reduced-motion: reduce){
  .tool-card:hover,.plan-card:hover,.path-card:hover{transform:none;}
}

/* ==========================================================================
   STUB PAGES — coming-soon layout (ai-career-copilot, localized-career-guidance,
   interview-preparation). Extracted from repeated inline styles on all three pages.
   ========================================================================== */
.section-head--stub{max-width:640px;}
.stub-h1{font-size:clamp(32px,5vw,52px);}
.stub-lead{color:var(--text-secondary);font-size:18px;margin-top:20px;line-height:1.6;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}
.section-head--stub .note{margin-top:24px;}

/* ==========================================================================
   SECTION 2 — AI Resume Builder page
   Scorecard, result panel, pricing clarity, ecosystem grid.
   Uses shared tokens throughout.
   ========================================================================== */

/* Hero product mock */
/* Resume Builder hero. Previously had no padding, so it sat cramped at the top
   and the trust strip felt detached (0 bottom here + 64px on the strip = a big
   gap). Give the hero balanced breathing room, and pull the following trust
   strip closer so the logos read as part of the same hero block. */
.rb-hero{padding:56px 0 24px;position:relative;overflow:hidden;}
.rb-hero + .tight{padding-top:20px;padding-bottom:24px;}
.rb-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.rb-hero__grid > *{align-self:center;}
.rb-hero__lead{margin-top:24px;font-size:18px;color:var(--text-secondary);max-width:52ch;line-height:1.6;}
.rb-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;}
.rb-hero__note{margin-top:20px;}
.rb-mock{width:100%;height:auto;filter:drop-shadow(0 24px 48px rgba(63,41,207,.16));}

/* Stakes panel */
.rb-stakes{background:var(--blue-tint);border-radius:var(--radius-lg);padding:48px;margin-top:64px;}
.rb-stakes__list{margin-top:24px;display:grid;gap:16px;}
.rb-stakes__item{display:flex;gap:12px;align-items:flex-start;color:var(--text-primary);line-height:1.6;}
.rb-stakes__item::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--pink-ink);}
.rb-stakes__bridge{margin-top:32px;padding-top:24px;border-top:1px solid var(--line-strong);
  font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.35;}

/* ---- Scorecard (signature) ----
   The section's intro (lead + meta chips) is styled with on-dark colours
   (--text-on-dark-soft, translucent-white chip fills). Those require a dark
   section background — which had gone missing, so the near-white text was
   rendering invisibly on the default light background. Restore the intended
   dark surface here; the white .scorecard panel inside sits on top of it. */
.rb-score{background:var(--paper-soft);color:var(--text-primary);}
.rb-score h2{color:var(--text-primary);}
.rb-score__intro{max-width:62ch;margin:0 auto 48px;text-align:center;}
.rb-score__lead{margin-top:16px;font-size:18px;color:var(--text-secondary);line-height:1.6;}
.rb-score__meta{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.rb-score__metaitem{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-full);
  background:var(--card-background);border:1px solid var(--card-border);font-size:14px;color:var(--text-secondary);}
.rb-score__metaitem svg{flex:none;color:#8FE06A;width:16px;height:16px;}

.scorecard{background:var(--card-background);color:var(--text-primary);border-radius:var(--radius-lg);
  padding:48px;border:1px solid var(--card-border);box-shadow:var(--shadow-lg);}

.rb-progress{margin-bottom:40px;}
.rb-progress__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;}
.rb-progress__label{font-size:14px;font-weight:600;color:var(--text-secondary);}
.rb-progress__count{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--blue-ink);}
.rb-progress__track{height:8px;border-radius:var(--radius-full);background:var(--blue-tint);overflow:hidden;}
.rb-progress__bar{height:100%;width:0%;border-radius:var(--radius-full);background:var(--blue);
  transition:width var(--duration-base) var(--ease-out);}

.rb-qlist{display:grid;gap:32px;}
.rb-q{border:0;padding:0;margin:0;min-width:0;}

/* --------------------------------------------------------------------------
   Guided stepper. When JS enables it (form[data-stepper="on"]), only the
   active question is shown; the rest are removed from flow. Without JS the
   form stays a normal stacked list (fully usable, crawlable).
   -------------------------------------------------------------------------- */
form[data-stepper="on"] .rb-qlist{gap:0;min-height:340px;}
form[data-stepper="on"] .rb-q--slide{display:none;}
form[data-stepper="on"] .rb-q--slide.is-active{display:block;}
@media (prefers-reduced-motion: no-preference){
  form[data-stepper="on"] .rb-q--slide.is-active.slide-from-right{animation:rbSlideR .32s var(--ease-out);}
  form[data-stepper="on"] .rb-q--slide.is-active.slide-from-left{animation:rbSlideL .32s var(--ease-out);}
}
@keyframes rbSlideR{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
@keyframes rbSlideL{from{opacity:0;transform:translateX(-24px);}to{opacity:1;transform:none;}}

.rb-stepper__nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}
.rb-stepper__count{font-size:14px;font-weight:600;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;text-align:center;flex:0 1 auto;white-space:nowrap;}
.rb-stepper__prev[disabled]{opacity:.4;cursor:not-allowed;}
@media (max-width:600px){
  .rb-stepper__nav{gap:8px;}
  .rb-stepper__prev,.rb-stepper__next{flex:0 0 auto;padding:8px 12px;font-size:13px;}
  .rb-stepper__count{font-size:12px;white-space:nowrap;flex:0 1 auto;}
}
.rb-q__legend{display:flex;gap:12px;align-items:baseline;font-family:var(--font-display);
  font-weight:700;font-size:18px;line-height:1.35;padding:0;}
.rb-q__n{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--radius-full);
  background:var(--blue-tint);color:var(--blue-ink);font-size:12px;font-weight:800;transform:translateY(-2px);}
.rb-q__help{margin:8px 0 0 38px;font-size:14px;color:var(--text-secondary);line-height:1.55;}
.rb-q__opts{margin:16px 0 0 38px;display:grid;gap:8px;}
.rb-q.is-missing .rb-q__legend{color:var(--danger);}
.rb-q.is-missing .chip__label{border-color:var(--danger);}

.chip{display:block;position:relative;}
.chip__input{position:absolute;opacity:0;width:1px;height:1px;}
.chip__label{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;
  border:1.5px solid var(--card-border);border-radius:var(--radius-sm);background:var(--card-background);
  color:var(--text-primary);cursor:pointer;font-size:15px;line-height:1.45;
  transition:border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);}
.chip__label::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-strong);background:var(--card-background);
  transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);}
.chip__label:hover{border-color:var(--blue);background:var(--blue-tint);}
.chip__input:checked + .chip__label{border-color:var(--blue);background:var(--blue-tint);font-weight:500;}
.chip__input:checked + .chip__label::before{border-color:var(--blue);box-shadow:inset 0 0 0 4px var(--blue);}
.chip__input:focus-visible + .chip__label{outline:3px solid var(--focus-ring);outline-offset:2px;}

.scorecard__actions{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.form-error{display:none;margin-top:16px;padding:12px 16px;border-radius:var(--radius-sm);
  background:var(--danger-surface);border:1px solid var(--danger);color:var(--danger);
  font-size:14px;font-weight:500;}
.form-error[data-visible="true"]{display:block;}
.scorecard__disclaimer{margin:20px auto 0;font-size:12px;color:var(--text-secondary);
  line-height:1.6;max-width:52ch;text-align:center;text-wrap:balance;}

.rb-result{display:none;margin-top:48px;padding-top:48px;border-top:2px solid var(--line);}
.rb-result[data-visible="true"]{display:block;}
.rb-result__top{display:flex;flex-wrap:wrap;gap:48px;align-items:center;}
.ring{position:relative;flex:none;width:148px;height:148px;}
.ring__svg{transform:rotate(-90deg);}
.ring__track{fill:none;stroke:var(--line);stroke-width:12;}
.ring__bar{fill:none;stroke:var(--blue);stroke-width:12;stroke-linecap:round;
  transition:stroke-dashoffset 900ms var(--ease-out);}
.ring__value{position:absolute;inset:0;display:grid;place-items:center;text-align:center;}
.ring__num{font-family:var(--font-display);font-weight:800;font-size:40px;line-height:1;font-variant-numeric:tabular-nums;}
.ring__den{display:block;font-size:12px;color:var(--text-secondary);margin-top:2px;letter-spacing:.04em;}
.rb-result__summary{flex:1 1 280px;min-width:0;}
.rb-result__band{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-full);
  font-size:14px;font-weight:600;margin-bottom:16px;}
.rb-result__band[data-band="risk"]{background:var(--danger-surface);color:var(--danger);}
.rb-result__band[data-band="mid"]{background:var(--warning-surface);color:var(--warning);}
.rb-result__band[data-band="strong"]{background:var(--success-surface);color:var(--success);}
.rb-result__headline{font-size:24px;line-height:1.25;font-family:var(--font-display);font-weight:800;}
.rb-result__sub{margin-top:12px;color:var(--text-secondary);line-height:1.6;}

.rb-result__block{margin-top:48px;}
.rb-result__blocktitle{font-size:18px;margin-bottom:20px;font-family:var(--font-display);font-weight:800;}
.fix{display:flex;gap:16px;padding:20px;border:1.5px solid var(--card-border);border-radius:var(--radius-md);background:var(--card-background);}
.fix + .fix{margin-top:12px;}
.fix__rank{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-full);
  background:var(--danger-surface);color:var(--danger);font-family:var(--font-display);font-weight:800;font-size:14px;}
.fix__title{font-size:16px;font-weight:700;font-family:var(--font-display);}
.fix__why{margin-top:8px;font-size:15px;color:var(--text-secondary);line-height:1.6;}
.strength{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-secondary);line-height:1.6;}
.strength + .strength{margin-top:12px;}
.strength__icon{flex:none;color:var(--success);margin-top:3px;width:17px;height:17px;}

.rb-result__cta{
  margin-top:44px;
  max-width:940px;
  margin-left:auto;
  margin-right:auto;
  padding:40px;
  border-radius:var(--radius-md);
  background:var(--surface-cta-brand);
  border:1.5px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow-sm);
  text-align:left;
  color:#ffffff !important;
}
.rb-result__ctatitle{
  font-size:clamp(20px,2.2vw,24px);
  font-family:var(--font-display);
  font-weight:800;
  color:#ffffff !important;
  line-height:1.3;
}
.rb-result__ctatext{
  margin-top:10px;
  font-size:15px;
  color:rgba(255, 255, 255, 0.88) !important;
  line-height:1.6;
  max-width:72ch;
}

/* Primary Action */
.rb-result__primary-action{
  margin-top:24px;
  display:flex;
  align-items:center;
}

/* Grow Suite Navigation Section */
.rb-result__grow-suite{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid rgba(255, 255, 255, 0.14);
}
.rb-grow-suite__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  color:#ffffff !important;
  margin-bottom:14px;
  letter-spacing:-0.01em;
}
.rb-grow-suite__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Tool Navigation Chips — High-contrast dark surface scoped styling */
.rb-result__cta .rb-grow-chip,
.rb-result__cta a.rb-grow-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:8px 16px;
  border-radius:var(--radius-full);
  background:rgba(255, 255, 255, 0.08) !important;
  border:1.5px solid rgba(255, 255, 255, 0.22) !important;
  color:#ffffff !important;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  transition:transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.rb-result__cta .rb-grow-chip span,
.rb-result__cta a.rb-grow-chip span{
  color:#ffffff !important;
}
.rb-result__cta .rb-grow-chip svg,
.rb-result__cta a.rb-grow-chip svg{
  color:rgba(255, 255, 255, 0.90) !important;
}
.rb-result__cta .rb-grow-chip:hover,
.rb-result__cta a.rb-grow-chip:hover{
  transform:translateY(-2px);
  background:rgba(255, 255, 255, 0.16) !important;
  border-color:rgba(255, 255, 255, 0.45) !important;
  color:#ffffff !important;
}
.rb-result__cta .rb-grow-chip.is-active,
.rb-result__cta a.rb-grow-chip.is-active{
  background:rgba(99, 102, 241, 0.30) !important;
  border-color:#818cf8 !important;
  color:#ffffff !important;
}
.rb-result__cta .rb-grow-chip.is-active span,
.rb-result__cta a.rb-grow-chip.is-active span{
  color:#ffffff !important;
}
.rb-result__cta .rb-grow-chip.is-active svg,
.rb-result__cta a.rb-grow-chip.is-active svg{
  color:#818cf8 !important;
}
.rb-chip__arrow{
  flex:none;
  opacity:0.7;
  transition:transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.rb-grow-chip:hover .rb-chip__arrow{
  transform:translateX(3px);
  opacity:1;
}

/* Email Capture Block */
.rb-capture{
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid rgba(255, 255, 255, 0.14);
}
.rb-capture__title{
  font-size:16px;
  font-weight:700;
  font-family:var(--font-display);
  color:#ffffff !important;
}
.rb-capture__text{
  margin-top:6px;
  font-size:14px;
  color:rgba(255, 255, 255, 0.88) !important;
  line-height:1.55;
  max-width:64ch;
}
.rb-capture__row{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}
.rb-result__cta .field{flex:1 1 280px;min-width:0;}
.rb-result__cta .field__label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
  color:#ffffff !important;
}
.rb-result__cta .field__input{
  width:100%;
  min-height:48px;
  padding:12px 16px;
  border:1.5px solid rgba(255, 255, 255, 0.22);
  border-radius:var(--radius-sm);
  background:rgba(255, 255, 255, 0.96);
  color:#0F172A;
  font-size:14px;
  font-weight:500;
  transition:border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.rb-result__cta .field__input::placeholder{
  color:#64748B;
  opacity:1;
}
.rb-result__cta .field__input:hover,
.rb-result__cta .field__input:focus{
  border-color:#818cf8;
  outline:none;
  background:#ffffff;
}
.rb-result__cta .field__submit{display:flex;align-items:flex-end;}
.rb-result__cta .field__submit .btn{
  background:rgba(255, 255, 255, 0.12) !important;
  border:1.5px solid rgba(255, 255, 255, 0.28) !important;
  color:#ffffff !important;
  min-height:48px;
  padding:0 24px;
  font-weight:600;
  transition:background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.rb-result__cta .field__submit .btn:hover{
  background:rgba(255, 255, 255, 0.22) !important;
  border-color:rgba(255, 255, 255, 0.50) !important;
  color:#ffffff !important;
}
.rb-result__cta .field__msg{margin-top:12px;font-size:14px;line-height:1.5;}
.rb-result__cta .field__msg[data-state="error"]{color:#fca5a5 !important;font-weight:500;}
.rb-result__cta .field__msg[data-state="success"]{color:#86efac !important;font-weight:500;}
.rb-result__cta .field__msg[data-state="loading"]{color:rgba(255, 255, 255, 0.85) !important;}

@media (max-width:768px){
  .rb-result__cta{padding:32px 24px;}
  .rb-grow-suite__chips{gap:8px;}
  .rb-result__cta .rb-grow-chip{flex:1 1 calc(50% - 6px);justify-content:space-between;}
}
@media (max-width:480px){
  .rb-result__cta{padding:24px 18px;}
  .rb-result__primary-action .btn{width:100%;}
  .rb-result__cta .rb-grow-chip{flex:1 1 100%;justify-content:space-between;}
  .rb-capture__row{flex-direction:column;align-items:stretch;gap:12px;}
  .rb-result__cta .field{flex:none;width:100%;}
  .rb-result__cta .field__submit{width:100%;}
  .rb-result__cta .field__submit .btn{width:100%;}
}

/* Steps */
.rb-step__n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-full);
  background:var(--blue);color:#fff;font-family:var(--font-display);font-weight:800;font-size:18px;margin-bottom:20px;}

/* Guide / Why We Built This — Compact editorial single-column layout anchored to left grid */
.rb-guide__grid{display:block;max-width:760px;margin-left:0;margin-right:auto;text-align:left;}
.rb-guide__grid .eyebrow{margin-bottom:8px;}
.rb-guide__grid h2{font-family:var(--font-display);font-size:clamp(24px,2.8vw,32px);font-weight:800;
  letter-spacing:-.02em;line-height:1.25;margin:0 0 12px;color:var(--text-primary);}
.rb-guide__grid p.section-head__lead{font-size:15.5px;line-height:1.55;color:var(--text-secondary);
  margin-bottom:12px;max-width:none;}
.rb-guide__grid .badge-row{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* Proof stat panel */
.statpanel{background:var(--card-background);border:1.5px solid var(--card-border);border-radius:var(--radius-lg);padding:48px;margin-top:32px;margin-left:0;margin-right:auto;}
.statpanel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px;}
.statpanel__num{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;color:var(--blue-ink);font-variant-numeric:tabular-nums;}
.statpanel__num span{font-size:18px;color:var(--text-secondary);}
.statpanel__label{margin-top:12px;font-size:15px;color:var(--text-secondary);line-height:1.5;}
.statpanel__method{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--text-secondary);}

/* How Credits Work — cohesive left-aligned pricing component */
.credits{max-width:1040px;margin-left:0;margin-right:auto;text-align:left;}

/* Left-aligned Component Section Header */
.credits__head{max-width:760px;margin-bottom:28px;margin-left:0;margin-right:auto;text-align:left;}
.credits__head .eyebrow{margin-bottom:8px;}
.credits__head h2{font-size:clamp(28px,3.4vw,38px);line-height:1.15;margin-bottom:12px;}
.credits__head .section-head__lead{color:var(--text-secondary);font-size:16px;line-height:1.6;}

/* 4 Feature Cards Grid */
.credits__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.credits__card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;
  padding:16px 18px;border:1.5px solid var(--card-border);border-radius:var(--radius-md);
  background:var(--card-background);transition:border-color var(--duration-base) var(--ease-out),
  transform var(--duration-base) var(--ease-out);}
.credits__card:hover{border-color:var(--card-border-hover);transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){.credits__card:hover{transform:none;}}

/* Featured "35 Free Credits" card */
.credits__card--featured{border-color:var(--blue);background:var(--blue-tint);}

.credits__card-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-full);
  background:rgba(63,41,207,.12);color:var(--blue-ink);flex:none;margin-bottom:2px;}
.credits__card--featured .credits__card-icon{background:var(--blue);color:#fff;}
.credits__card-title{font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.25;color:var(--text-primary);}
.credits__card-body{font-size:13.5px;line-height:1.42;color:var(--text-secondary);}

/* Subcomponent Grouping & Labels — Standardized with Green Dot & Eyebrow styling */
.credits__group{margin-bottom:28px;}
.credits__label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);
  font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-primary);margin-bottom:12px;margin-left:0;padding-left:0;text-align:left;}
.credits__label::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--green-ink);}

/* Usage panel */
.credits__usage{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border:1.5px solid var(--card-border);
  border-radius:var(--radius-md);background:var(--card-background);}
.credits__usage-info{display:flex;flex-direction:column;gap:2px;text-align:left;}
.credits__usage-tool{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary);}
.credits__usage-desc{font-size:13.5px;color:var(--text-secondary);line-height:1.4;}
.credits__usage-cost{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--blue-ink);
  background:var(--blue-tint);padding:5px 14px;border-radius:var(--radius-full);white-space:nowrap;flex:none;}

/* Credit Boosts preview */
.credits__boosts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.credits__boost-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;
  padding:16px 18px;border:1.5px solid var(--card-border);border-radius:var(--radius-md);
  background:var(--card-background);position:relative;transition:border-color var(--duration-base) var(--ease-out);}
.credits__boost-card:hover{border-color:var(--card-border-hover);}
.credits__boost-card--popular{border-color:var(--blue);background:var(--blue-tint);}
.credits__boost-badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--blue);color:#fff;padding:2px 8px;border-radius:var(--radius-full);margin-bottom:2px;align-self:flex-start;}
.credits__boost-name{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text-primary);}
.credits__boost-credits{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--blue-ink);}
.credits__boost-price{font-size:13px;font-weight:600;color:var(--text-secondary);}

/* Link wrap */
.credits__link-wrap{margin-top:12px;text-align:left;font-size:14px;}

/* Trust row — Single Left-Aligned Footer System */
.credits__trust{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px 24px;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--text-secondary);}
.credits__trust span{display:inline-flex;align-items:center;gap:6px;}
.credits__trust .credits__check{width:15px;height:15px;color:var(--success);flex:none;}

/* Credits responsive */
@media (max-width:960px){
  .credits__grid{grid-template-columns:repeat(2,1fr);}
  .credits__boosts-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .credits__grid{grid-template-columns:1fr;}
  .credits__boosts-grid{grid-template-columns:1fr;}
  .credits__usage{flex-direction:column;align-items:flex-start;gap:8px;}
  .credits__trust{gap:10px 16px;}
}

/* ==========================================================================
   Dedicated Pricing & Credit Boosts Page (pricing.html)
   ========================================================================== */
/* Usage grid / table */
.usage-grid{display:flex;flex-direction:column;gap:12px;max-width:1040px;margin-left:0;margin-right:auto;}
.usage-item{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 24px;border:1.5px solid var(--card-border);border-radius:var(--radius-md);
  background:var(--card-background);transition:border-color var(--duration-fast) var(--ease-out);}
.usage-item:hover{border-color:var(--card-border-hover);}
.usage-item__tool{display:flex;flex-direction:column;gap:3px;text-align:left;}
.usage-item__title{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--text-primary);}
.usage-item__desc{font-size:13.5px;color:var(--text-secondary);line-height:1.4;}
.usage-item__cost{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--blue-ink);
  background:var(--blue-tint);padding:5px 14px;border-radius:var(--radius-full);white-space:nowrap;flex:none;}
.usage-note{margin-top:16px;display:flex;align-items:center;gap:6px;text-align:left;font-size:13.5px;color:var(--text-secondary);max-width:1040px;margin-left:0;margin-right:auto;}
.usage-note svg{flex:none;color:var(--blue-ink);}

/* Pricing Plan Cards */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1040px;margin-left:0;margin-right:auto;align-items:stretch;}
.plan-card{display:flex;flex-direction:column;padding:32px 28px;border:1.5px solid var(--card-border);
  border-radius:var(--radius-lg);background:var(--card-background);position:relative;
  transition:transform var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);}
.plan-card:hover{transform:translateY(-4px);border-color:var(--card-border-hover);box-shadow:var(--shadow-md);}
@media (prefers-reduced-motion:reduce){.plan-card:hover{transform:none;}}

.plan-card--recommended{border-color:var(--blue);box-shadow:var(--shadow-md);}
.plan-card__badge{position:absolute;top:-13px;left:28px;background:var(--blue);color:#fff;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:4px 12px;border-radius:var(--radius-full);}

.plan-card__name{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--text-primary);}
.plan-card__price{font-family:var(--font-display);font-weight:800;font-size:32px;color:var(--text-primary);margin-top:12px;line-height:1;}
.plan-card__credits{display:inline-block;font-family:var(--font-display);font-size:14px;font-weight:800;
  color:var(--blue-ink);background:var(--blue-tint);padding:4px 12px;border-radius:var(--radius-full);margin-top:10px;margin-bottom:24px;align-self:flex-start;}

.plan-card__ideal-head{font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-secondary);margin-bottom:12px;}
.plan-card__list{list-style:none;padding:0;margin:0 0 28px 0;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--text-secondary);}
.plan-card__list li{display:flex;align-items:flex-start;gap:8px;line-height:1.45;}
.plan-card__check{color:var(--success);width:16px;height:16px;flex:none;margin-top:2px;}
.plan-card__btn{margin-top:auto;}

/* Model comparison */
.compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1040px;margin-left:0;margin-right:auto;}
.compare-card{padding:28px;border-radius:var(--radius-lg);text-align:left;}
.compare-card--old{border:1.5px solid var(--card-border);background:var(--card-background);}
.compare-card--tuconnect{border:1.5px solid var(--blue);background:var(--blue-tint);}

.compare-card__title{font-family:var(--font-display);font-weight:800;font-size:18px;margin-bottom:16px;color:var(--text-primary);}
.compare-card__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:var(--text-secondary);}
.compare-card__list li{display:flex;align-items:flex-start;gap:10px;line-height:1.5;}
.compare-icon--bad{color:var(--danger);width:17px;height:17px;flex:none;margin-top:2px;}
.compare-icon--good{color:var(--success);width:17px;height:17px;flex:none;margin-top:2px;}

/* Dark Mode Standardization — Credits & Usage Items */
[data-theme="dark"] .usage-item__cost,
[data-theme="dark"] .credits__usage-cost,
[data-theme="dark"] .plan-card__credits {
  color: var(--badge-text, #FFFFFF);
  background: var(--badge-bg-purple, rgba(63, 41, 207, 0.32));
  border: 1px solid var(--badge-border, rgba(63, 41, 207, 0.50));
}
[data-theme="dark"] .credits__boost-credits {
  color: var(--badge-text, #FFFFFF);
}
[data-theme="dark"] .credits__boost-card--popular {
  background: rgba(63, 41, 207, 0.24);
  border-color: var(--blue, #818CF8);
}
[data-theme="dark"] .usage-note svg {
  color: var(--blue-ink, #A395FF);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .usage-item__cost,
  :root:not([data-theme="light"]) .credits__usage-cost,
  :root:not([data-theme="light"]) .plan-card__credits {
    color: var(--badge-text, #FFFFFF);
    background: var(--badge-bg-purple, rgba(63, 41, 207, 0.32));
    border: 1px solid var(--badge-border, rgba(63, 41, 207, 0.50));
  }
  :root:not([data-theme="light"]) .credits__boost-credits {
    color: var(--badge-text, #FFFFFF);
  }
  :root:not([data-theme="light"]) .credits__boost-card--popular {
    background: rgba(63, 41, 207, 0.24);
    border-color: var(--blue, #818CF8);
  }
  :root:not([data-theme="light"]) .usage-note svg {
    color: var(--blue-ink, #A395FF);
  }
}

@media (max-width:960px){
  .plan-grid{grid-template-columns:1fr;max-width:480px;}
  .compare-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .usage-item{flex-direction:column;align-items:flex-start;gap:8px;}
  .plan-card{padding:24px 20px;}
}

/* ==========================================================================
   Career Conversations Flagship Pillar (career-conversations.html)
   ========================================================================== */
.event-featured{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;
  padding:40px;border:1.5px solid var(--blue);border-radius:var(--radius-lg);
  background:var(--blue-tint);max-width:1040px;margin-left:0;margin-right:auto;}

.speaker-profile{display:flex;align-items:center;gap:18px;margin-bottom:20px;}
.speaker-avatar{width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:22px;flex:none;}
.speaker-info{display:flex;flex-direction:column;gap:3px;}
.speaker-name{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--text-primary);}
.speaker-role{font-size:14px;color:var(--text-secondary);line-height:1.35;}

.live-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;padding:4px 12px;border-radius:var(--radius-full);
  background:var(--blue);color:#fff;margin-bottom:14px;}
.live-badge--upcoming{background:var(--success);color:#fff;}
.live-badge--archived{background:var(--paper-soft);color:var(--text-secondary);border:1px solid var(--card-border);}

.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1040px;margin-left:0;margin-right:auto;}
.event-card{display:flex;flex-direction:column;padding:28px 24px;border:1.5px solid var(--card-border);
  border-radius:var(--radius-lg);background:var(--card-background);
  transition:transform var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);}
.event-card:hover{transform:translateY(-4px);border-color:var(--card-border-hover);box-shadow:var(--shadow-md);}
@media (prefers-reduced-motion:reduce){.event-card:hover{transform:none;}}

.event-card__title{font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.3;
  color:var(--text-primary);margin-top:12px;margin-bottom:10px;}
.event-card__desc{font-size:14px;color:var(--text-secondary);line-height:1.5;margin-bottom:20px;}
.event-card__meta{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--line);font-size:13px;color:var(--text-secondary);}
.event-card__btn{margin-top:16px;}

@media (max-width:960px){
  .event-featured{grid-template-columns:1fr;padding:28px;}
  .event-grid{grid-template-columns:1fr;max-width:520px;}
}

/* Ecosystem */
.linkcard{display:flex;flex-direction:column;gap:12px;height:100%;padding:24px;border:1.5px solid var(--card-border);
  border-radius:var(--radius-md);background:var(--card-background);color:var(--text-primary);
  transition:border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);}
.linkcard:hover{border-color:var(--card-border-hover);transform:translateY(-3px);}
@media (prefers-reduced-motion: reduce){ .linkcard:hover{transform:none;} }
.linkcard__title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:16px;}
.linkcard__body{font-size:15px;color:var(--text-secondary);line-height:1.55;}
.rb-eco__loop{margin-top:48px;padding:40px;border-radius:var(--radius-lg);background:var(--card-background);border:1.5px solid var(--green-tint);color:var(--text-primary);}
.rb-eco__looptitle{font-size:20px;color:var(--green-ink);font-family:var(--font-display);font-weight:800;}
.rb-eco__looptext{margin-top:12px;line-height:1.65;max-width:62ch;}

/* FAQ */
.faq{max-width:1040px;margin-left:0;margin-right:auto;text-align:left;}
.faq__item{border-bottom:1px solid var(--line);}
.faq__item:first-child{border-top:1px solid var(--line);}
.faq__q{display:flex;align-items:flex-start;gap:16px;padding:24px 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.4;}
.faq__q::-webkit-details-marker{display:none;}
.faq__q:hover{color:var(--blue-ink);}
.faq__chev{flex:none;margin-left:auto;color:var(--blue-ink);transition:transform var(--duration-base) var(--ease-out);}
.faq__item[open] .faq__chev{transform:rotate(180deg);}
.faq__a{padding-bottom:24px;color:var(--text-secondary);line-height:1.7;max-width:70ch;}
.faq__a p + p{margin-top:16px;}

/* CTA band */
.ctaband{background:var(--surface-cta-brand);border:1.5px solid rgba(255,255,255,.10);color:var(--cta-heading);border-radius:32px;padding:80px 48px;text-align:center;}
/* Escape hatch: the muted charcoal band, for the rare page where brand indigo
   would compete with adjacent content. Not the default — see AGENTS.md. */
.ctaband--dark{background:var(--surface-cta);border-color:var(--surface-cta-border);}
.ctaband .eyebrow{color:var(--text-on-brand-muted,rgba(255,255,255,.70));}
.ctaband h2{color:var(--cta-heading);max-width:20ch;margin:0 auto;font-size:clamp(24px,3.4vw,42px);line-height:1.12;}
.ctaband__text{margin-top:20px;color:var(--cta-body);font-size:18px;max-width:48ch;margin-left:auto;margin-right:auto;}
/* Left-aligned variant, for pages whose section headings are left-aligned. */
.ctaband--start{text-align:left;}
.ctaband--start h2,.ctaband--start .ctaband__text{margin-left:0;margin-right:0;}
.ctaband--start .ctaband__actions{justify-content:flex-start;}

@media (max-width:600px){
  .ctaband{padding:44px 20px;border-radius:20px;}
  .ctaband h2{font-size:24px;}
  .ctaband__text{font-size:15px;margin-top:14px;}
  .ctaband__actions{margin-top:24px;}
  .ctaband__actions .btn{width:100%;justify-content:center;}
  .faq__q{font-size:16px;padding:18px 0;}
  .btn-row, .hero-actions{flex-direction:column;width:100%;gap:10px;}
  .btn-row .btn, .hero-actions .btn{width:100%;justify-content:center;}
}
.ctaband__actions{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

/* Utilities used by the RB page */
.u-narrow{max-width:52rem;}
.u-center-x{justify-content:center;}
.text-link{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px;}
.text-link:hover{color:var(--blue-dark);}
.text-link--hire{color:var(--green-ink);}

/* RB responsive */
@media (max-width:920px){
  .rb-hero__grid,.rb-guide__grid{grid-template-columns:1fr;gap:40px;}
  .statpanel__grid{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:768px){
  .scorecard{padding:24px;}
  .rb-stakes,.statpanel{padding:32px;}
  .rb-q__help,.rb-q__opts{margin-left:0;}
  .scorecard__actions .btn,.rb-result__ctaactions .btn{width:100%;}

  .rb-result__top{gap:24px;}
  .ctaband{padding:56px 24px;}
}
@media (max-width:560px){
  .ring{width:120px;height:120px;}
  .ring__num{font-size:32px;}
}

/* ==========================================================================
   SECTION 3 — Grow toolkit cards as links (integration)
   The toolkit cards on For Job Seekers now navigate to each tool page.
   ========================================================================== */
a.tool-card{display:block;color:inherit;position:relative;}
.tool-card--link{transition:transform var(--duration-base) var(--ease-out),
  box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out);}
.tool-card--link:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-tint-2);}
@media (prefers-reduced-motion: reduce){ .tool-card--link:hover{transform:none;} }
.tool-card--soon{opacity:.92;}
/* Badge anchors to the bottom of the flex-column card; margin-top:auto pushes
   it down so every card in a row ends at the same height. */
.tool-card__soon{align-self:flex-start;margin-top:auto;padding:4px 12px;border-radius:var(--radius-full);
  background:var(--badge-bg-purple);border:1px solid var(--badge-border);
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--badge-text);}
/* Give the badge a minimum gap from the text above even when it's pushed down. */
.tool-card p{margin-bottom:18px;}
.tool-card--soon p{margin-bottom:0;}
.tool-card--link h4::after{content:"→";margin-left:8px;color:var(--blue-ink);opacity:0;
  transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);
  display:inline-block;}
.tool-card--link:not(.tool-card--soon):hover h4::after{opacity:1;transform:translateX(3px);}

/* ==========================================================================
   SECTION 4 — TuConnect Resource Hub
   Knowledge centre layouts, topic grids, reusable article cards,
   downloadable resource cards, search bar, and filter chips.
   ========================================================================== */

/* Search Bar Component */
.resource-search{display:flex;align-items:center;background:var(--paper-card);border:1px solid var(--border-subtle,#E4E2ED);
  border-radius:var(--radius-lg,12px);padding:6px 6px 6px 16px;box-shadow:var(--shadow-sm);
  transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);
  max-width:640px;width:100%;margin:28px 0 0;}
.resource-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(63,41,207,.12);}
.resource-search__icon{flex:none;color:var(--text-secondary);margin-right:12px;}
.resource-search__input{flex:1;border:none;background:transparent;font-family:inherit;font-size:16px;
  color:var(--text-primary);outline:none;width:100%;}
.resource-search__input::placeholder{color:var(--text-secondary);opacity:.8;}
.resource-search__btn{flex:none;}

/* Filter chips */
.resource-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.filter-chip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--radius-full,999px);
  background:var(--card-background);border:1px solid var(--card-border);font-size:13px;
  font-weight:600;color:var(--text-secondary);text-decoration:none;transition:all .2s ease;}
.filter-chip:hover,.filter-chip.is-active{background:var(--badge-bg-purple);border-color:var(--badge-border);color:var(--badge-text);}

/* Topic Category Grid */
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:32px;}
.topic-card{display:flex;flex-direction:column;padding:24px;border-radius:var(--radius-lg,16px);
  background:var(--paper-card);border:1px solid var(--border-subtle,#E4E2ED);text-decoration:none;color:inherit;
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out);}
.topic-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-tint-2,#C8C3F4);}
@media (prefers-reduced-motion: reduce){ .topic-card:hover{transform:none;} }
.topic-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.topic-card__icon{width:44px;height:44px;border-radius:12px;background:var(--blue-tint,#F0EFFF);
  color:var(--blue-ink);display:flex;align-items:center;justify-content:center;flex:none;}
.topic-card__icon--hire{background:var(--green-tint,#E6F9F2);color:var(--green-ink,#007A4B);}
.topic-card__count{font-size:12px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full,999px);
  background:var(--badge-bg-purple);color:var(--badge-text);}
.topic-card__title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 6px;}
.topic-card__desc{font-size:14px;line-height:1.5;color:var(--text-secondary);margin:0;}
.topic-card__arrow{margin-top:auto;padding-top:16px;font-size:13px;font-weight:700;color:var(--blue-ink);
  display:inline-flex;align-items:center;gap:4px;}
.topic-card:hover .topic-card__arrow svg{transform:translateX(3px);}
.topic-card__arrow svg{transition:transform .2s ease;}

/* Article Card System */
.resource-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:32px;}
.resource-card{display:flex;flex-direction:column;border-radius:var(--radius-lg,16px);background:var(--paper-card);
  border:1px solid var(--border-subtle,#E4E2ED);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out);}
.resource-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-tint-2,#C8C3F4);}
@media (prefers-reduced-motion: reduce){ .resource-card:hover{transform:none;} }

.resource-card__cover{height:180px;position:relative;background:linear-gradient(135deg,var(--blue-tint,#F0EFFF) 0%,var(--paper-soft) 100%);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;}
.resource-card__cover--hire{background:linear-gradient(135deg,var(--green-tint,#E6F9F2) 0%,var(--paper-soft) 100%);}
.resource-card__cover-pattern{position:absolute;inset:0;opacity:.15;pointer-events:none;}
.resource-card__badge{position:absolute;top:14px;left:14px;padding:4px 12px;border-radius:var(--radius-full,999px);
  background:var(--badge-bg-purple);border:1px solid var(--badge-border);backdrop-filter:blur(4px);font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--badge-text);box-shadow:0 2px 6px rgba(0,0,0,.06);}
.resource-card__badge--hire{background:var(--badge-bg-green);border-color:var(--badge-border-green);color:var(--badge-text);}

.resource-card__body{display:flex;flex-direction:column;flex:1;padding:24px;}
.resource-card__title{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.35;
  color:var(--text-primary);margin:0 0 10px;transition:color .2s ease;}
.resource-card:hover .resource-card__title{color:var(--blue-ink);}
.resource-card__desc{font-size:14px;line-height:1.6;color:var(--text-secondary);margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

.resource-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;
  color:var(--text-secondary);padding-top:14px;border-top:1px solid var(--line,#E8E6F0);margin-top:auto;}
.resource-card__author{font-weight:600;color:var(--text-primary);}
.resource-card__dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--text-secondary);opacity:.6;}

.resource-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.resource-card__tag{font-size:12px;font-weight:600;color:var(--badge-text);background:var(--badge-bg-purple);
  padding:2px 8px;border-radius:4px;}

/* Featured Resource Card (Hero/Headline) */
.resource-card--featured{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr 1fr;min-height:360px;
  background:var(--paper-card);border:1.5px solid var(--card-border);border-radius:var(--radius-lg,16px);
  overflow:hidden;text-decoration:none;color:var(--text-primary);}
.resource-card--featured .resource-card__cover{height:100%;min-height:260px;position:relative;
  background:linear-gradient(135deg,var(--blue-tint,#F0EFFF) 0%,var(--paper-soft) 100%);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;}
.resource-card--featured .resource-card__body{padding:36px;display:flex;flex-direction:column;justify-content:center;color:var(--text-primary);}
.resource-card--featured .resource-card__title{font-family:var(--font-display);font-size:clamp(22px,2.5vw,30px);font-weight:700;line-height:1.3;color:var(--text-primary);margin-bottom:14px;}
.resource-card--featured .resource-card__desc{font-size:16px;line-height:1.6;color:var(--text-secondary);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:20px;}

[data-theme="dark"] .resource-card--featured{background:var(--paper-card,#201A38);border-color:rgba(255,255,255,.14);}
[data-theme="dark"] .resource-card--featured .resource-card__cover{background:linear-gradient(135deg,rgba(63,41,207,.30) 0%,rgba(32,26,56,.90) 100%);}
[data-theme="dark"] .resource-card--featured .resource-card__cover svg{stroke:#A395FF;}

@media (max-width:860px){
  .resource-card--featured{grid-template-columns:1fr;}
  .resource-card--featured .resource-card__cover{height:220px;min-height:auto;}
  .resource-card--featured .resource-card__body{padding:24px;}
}

/* Downloadable Template Cards */
.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;}
@media (max-width:992px){.download-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}}
.download-card{display:flex;flex-direction:column;padding:24px;border-radius:var(--radius-lg,16px);
  background:var(--paper-card);border:1px solid var(--border-subtle,#E4E2ED);box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);}
.resource-card:empty, .download-card:empty, .trust-card:empty{display:none !important;}
.download-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-tint-2,#C8C3F4);}
.download-card__icon{width:48px;height:48px;border-radius:12px;background:var(--blue-tint,#F0EFFF);
  color:var(--blue-ink);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.download-card__title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--text-primary);margin:0 0 8px;}
.download-card__desc{font-size:14px;line-height:1.5;color:var(--text-secondary);margin:0 0 16px;flex:1;}
.download-card__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line,#E8E6F0);}
.download-card__footer .btn{white-space:nowrap;flex-shrink:0;}
.download-card__format{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.05em;white-space:nowrap;}

/* Trust Grid Section */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:36px;}
.trust-card{padding:28px;border-radius:var(--radius-lg,16px);background:var(--paper-card);border:1px solid var(--border-subtle,#E4E2ED);}
.trust-card__icon{width:42px;height:42px;border-radius:10px;background:var(--blue-tint,#F0EFFF);
  color:var(--blue-ink);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.trust-card__title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 8px;}
.trust-card__desc{font-size:14px;line-height:1.6;color:var(--text-secondary);margin:0;}

/* Search Empty State Component */
.search-empty-state{
  text-align:center;
  padding:48px 24px;
  margin:32px auto;
  max-width:560px;
  background:var(--card-background);
  border:1.5px solid var(--card-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--card-shadow);
}
.search-empty-state__icon{
  width:60px;height:60px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--blue-tint);
  color:var(--blue-ink);
  display:flex;align-items:center;justify-content:center;
}
.search-empty-state h3{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:800;
  color:var(--text-primary);
  margin:0 0 8px;
}
.search-empty-state p{
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.55;
  margin:0 0 20px;
}
.search-empty-state__label{
  font-size:13px;
  font-weight:700;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:12px;
}
.search-empty-state__suggestions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.search-suggestion-btn{
  cursor:pointer;
  font-family:inherit;
  border:1px solid var(--card-border);
}

/* ==========================================================================
   SECTION 4 — Article / Pillar Guide Layout
   Long-form content pages with sidebar ToC, callouts, tables, FAQ.
   ========================================================================== */

/* Article page hero */
.article-hero{
  padding:64px 0 48px;
  border-bottom:1px solid var(--line);
  background:var(--paper-soft);
  position:relative;
  overflow:hidden;
}
.article-hero::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(63,41,207,.06),transparent 70%);
  pointer-events:none;
}
.article-hero>.wrap{position:relative;z-index:1;}
.article-category-badge{display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:var(--radius-full);font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--badge-bg-purple);border:1px solid var(--badge-border);
  color:var(--badge-text);margin-bottom:20px;}
.article-hero__title{font-size:clamp(28px,4.5vw,50px);line-height:1.15;
  letter-spacing:-.03em;color:var(--text-primary);margin:0 0 20px;
  max-width:800px;}
.article-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-size:14px;color:var(--text-secondary);}
.article-hero__meta-dot{width:3px;height:3px;border-radius:50%;
  background:var(--text-secondary);opacity:.5;display:inline-block;}
.article-hero__author{font-weight:600;color:var(--text-primary);}
.article-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}

/* Article layout: sidebar ToC + prose */
.article-layout{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:48px;
  align-items:start;
  padding:56px 0 80px;
}
@media(max-width:1024px){.article-layout{grid-template-columns:1fr;}}

/* Table of Contents sidebar */
.article-toc{
  position:sticky;
  top:96px;
  padding:24px;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  font-size:14px;
}
.article-toc__title{font-weight:800;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-secondary);margin:0 0 14px;}
.article-toc__list{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:2px;}
.article-toc__item a{display:block;padding:5px 8px;border-radius:6px;
  color:var(--text-secondary);text-decoration:none;line-height:1.4;
  transition:background .15s ease,color .15s ease;}
.article-toc__item a:hover,.article-toc__item a.is-active{
  background:var(--blue-tint);color:var(--blue-ink);font-weight:600;}
.article-toc__item--sub a{padding-left:20px;font-size:13px;}
.article-toc__divider{height:1px;background:var(--line);margin:12px 0;}

/* Prose body */
.article-prose{
  min-width:0;
  color:var(--text-primary);
  line-height:1.75;
  font-size:17px;
}
.article-prose h2{
  font-size:clamp(22px,3vw,32px);font-weight:800;
  letter-spacing:-.025em;color:var(--text-primary);
  margin:56px 0 16px;padding-top:8px;
  border-top:2px solid var(--blue-tint-2);
}
.article-prose h2:first-child{margin-top:0;border-top:none;}
.article-prose h3{
  font-size:clamp(18px,2.2vw,22px);font-weight:700;
  color:var(--text-primary);margin:36px 0 12px;
}
.article-prose h4{font-size:17px;font-weight:700;color:var(--text-primary);
  margin:24px 0 8px;}
.article-prose p{margin:0 0 18px;}
.article-prose ul,.article-prose ol{margin:0 0 20px;padding-left:24px;}
.article-prose li{margin-bottom:6px;line-height:1.7;}
.article-prose strong{font-weight:700;color:var(--text-primary);}
.article-prose a:not(.btn){color:var(--blue-ink);text-decoration:underline;
  text-underline-offset:3px;transition:opacity .15s ease;}
.article-prose a:not(.btn):hover{opacity:.75;}
.article-prose hr{border:none;border-top:1px solid var(--line);margin:40px 0;}

/* Article tables */
.article-table-wrap{overflow-x:auto;margin:24px 0 32px;border-radius:var(--radius-lg);
  border:1px solid var(--line);}
.article-table{width:100%;border-collapse:collapse;font-size:15px;}
.article-table th{background:var(--blue-tint);color:var(--blue-ink);font-weight:700;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);}
.article-table td{padding:12px 16px;border-bottom:1px solid var(--line);
  color:var(--text-primary);vertical-align:top;}
.article-table tr:last-child td{border-bottom:none;}
.article-table tr:nth-child(even) td{background:var(--paper-soft);}

/* Callout blocks */
.callout{border-radius:var(--radius-lg);padding:20px 24px;margin:28px 0;
  display:flex;gap:16px;align-items:flex-start;}
.callout__icon{flex:none;width:24px;height:24px;margin-top:2px;}
.callout__body{flex:1;}
.callout__title{font-weight:800;font-size:15px;margin:0 0 6px;}
.callout__text{font-size:15px;line-height:1.65;margin:0;color:inherit;}
.callout__text a{color:inherit;font-weight:700;}

.callout--tip{background:var(--blue-tint);border-left:4px solid var(--blue);
  color:var(--text-primary);}
.callout--tip .callout__icon{color:var(--blue-ink);}
.callout--tip .callout__title{color:var(--blue-ink);}

.callout--warning{background:#FFF4E0;border-left:4px solid #E08600;color:#5C3A00;}
[data-theme="dark"] .callout--warning{background:#2D2000;color:#FFD080;border-left-color:#E08600;}
.callout--warning .callout__icon{color:#E08600;}
.callout--warning .callout__title{color:#C47000;}
[data-theme="dark"] .callout--warning .callout__title{color:#FFD080;}

.callout--insight{background:var(--green-tint);border-left:4px solid var(--green);
  color:var(--text-primary);}
.callout--insight .callout__icon{color:var(--green);}
.callout--insight .callout__title{color:var(--green-ink);}

/* Knowledge Centre Standard Inline CTA Panel */
.apply-panel{
  background:var(--blue-tint);
  border:1.5px solid var(--badge-border);
  border-radius:var(--radius-lg);
  padding:28px 32px;
  margin:40px 0;
  display:flex;gap:20px;align-items:center;
  box-shadow:0 4px 20px rgba(63,41,207,.04);
  transition:transform .2s ease,box-shadow .2s ease;
}
.apply-panel:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(63,41,207,.08);
}
.apply-panel__icon{
  width:48px;height:48px;border-radius:14px;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:0 4px 12px rgba(63,41,207,.2);
}
.apply-panel__body{flex:1;min-width:240px;}
.apply-panel__label{font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue-ink);margin:0 0 6px;}
.apply-panel__title{font-size:19px;font-weight:800;color:var(--text-primary);
  margin:0 0 8px;line-height:1.3;}
.apply-panel__desc{font-size:14.5px;color:var(--text-secondary);line-height:1.6;margin:0;}
.apply-panel__action{flex:none;}

/* Pull quote */
.pull-quote{
  border-left:4px solid var(--blue);
  margin:32px 0;padding:12px 24px;
  font-size:clamp(18px,2.5vw,22px);font-style:italic;
  font-weight:600;color:var(--text-primary);line-height:1.5;
  background:var(--paper-soft);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}

/* Checklist */
.checklist{list-style:none;padding:0;margin:0 0 24px;}
.checklist li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:15px;color:var(--text-primary);}
.checklist li:last-child{border-bottom:none;}
.checklist__check{flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--green-tint);color:var(--green-ink);
  display:flex;align-items:center;justify-content:center;margin-top:1px;}

/* Example block */
.example-block{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px 24px;
  margin:24px 0;
}
.example-block__label{font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-secondary);margin:0 0 10px;}
.example-block__content{font-size:15px;line-height:1.7;color:var(--text-primary);}
.example-block__bad{border-left:4px solid #E03535;}
.example-block__good{border-left:4px solid var(--green);}
.example-block__bad .example-block__label{color:#E03535;}
.example-block__good .example-block__label{color:var(--green-ink);}

/* FAQ accordion */
.faq-list{margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.faq-item{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;}
.faq-item__trigger{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:18px 20px;background:none;border:none;
  font-family:inherit;font-size:16px;font-weight:700;
  color:var(--text-primary);text-align:left;cursor:pointer;gap:16px;
  transition:background .15s ease;
}
.faq-item__trigger:hover{background:var(--paper-soft);}
.faq-item__trigger[aria-expanded="true"]{background:var(--blue-tint);}
.faq-item__icon{flex:none;width:20px;height:20px;color:var(--blue-ink);
  transition:transform .25s ease;}
.faq-item__trigger[aria-expanded="true"] .faq-item__icon{transform:rotate(45deg);}
.faq-item__body{font-size:15px;line-height:1.7;color:var(--text-secondary);
  padding:0 20px 18px;display:none;}
.faq-item__body[aria-hidden="false"]{display:block;}
.faq-item__body a{color:var(--blue-ink);}

/* Article inline stats row */
.article-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:28px 24px;
  background:var(--blue-tint);
  border:1px solid var(--badge-border);
  border-radius:var(--radius-lg);
  margin:32px 0;
  align-items:start;
}
.article-stat{text-align:center;display:flex;flex-direction:column;align-items:center;}
.article-stat__number{font-size:clamp(24px,3vw,36px);font-weight:900;
  color:var(--blue-ink);line-height:1.1;display:block;}
.article-stat__label{font-size:13px;line-height:1.45;color:var(--text-secondary);
  font-weight:500;display:block;margin-top:6px;}

@media(max-width:640px){
  .article-stats{grid-template-columns:1fr;gap:20px;padding:24px 16px;}
}

/* Related articles strip */
.article-related{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);}
.article-related__title{font-size:20px;font-weight:800;color:var(--text-primary);
  margin:0 0 24px;}
.article-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;}

/* Responsive tweaks */
@media(max-width:1024px){
  .article-toc{position:static;top:auto;margin-bottom:36px;}
}
@media(max-width:768px){
  .article-hero{padding:44px 0 32px;}
  .article-hero__title{font-size:clamp(24px,5vw,36px);margin-bottom:16px;}
  .article-prose{font-size:16px;}
  .article-prose h2{margin-top:36px;font-size:22px;}
  .article-prose h3{font-size:18px;}
  .article-table-wrap{-webkit-overflow-scrolling:touch;}
  .apply-panel{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 20px;}
  .apply-panel__body{min-width:100%;}
  .apply-panel__action{width:100%;}
  .apply-panel__action .btn{width:100%;justify-content:center;}
}
@media(max-width:560px){
  .article-related-grid{grid-template-columns:1fr;}
  .callout{flex-direction:column;gap:10px;padding:16px 18px;}
}