/* Site shell - global header, footer, home extras, report watermark.
   Loaded after styles.css so the report card / hero rules established there
   stay authoritative; this file only adds the surrounding site chrome. */

/* ── Global header ─────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:#0A0712;
  border-bottom:1px solid #2E155C}
.site-header-inner{max-width:1920px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:28px}

.site-brand{display:flex;align-items:center;gap:10px;color:#FAF8FF;
  text-decoration:none;font-family:'DM Sans',sans-serif;font-weight:500;
  font-size:.95rem;letter-spacing:.02em}
.site-brand-diamond{width:9px;height:9px;background:#C4A4E8;
  transform:rotate(45deg);display:inline-block;flex-shrink:0}
.site-brand-name{color:#FAF8FF}
/* Logo asset is a tight 150x30 horizontal lockup; render it at natural ratio. */
.site-brand-logo{display:block;width:150px;height:auto;flex-shrink:0}
@media (max-width:640px){.site-brand-logo{width:124px}}

.site-nav{display:flex;align-items:center;gap:22px}
.site-nav a{color:#FFFFFF;text-decoration:none;font-size:.85rem;
  font-weight:400;letter-spacing:.02em;transition:color .15s}
.site-nav a:hover{color:#FAF8FF}
.site-nav a.active{background:#542C9E;color:#FAF8FF;
  padding:6px 14px;border-radius:6px}
.site-nav-cta{background:#542C9E;color:#FAF8FF !important;
  padding:8px 16px;border-radius:6px;font-weight:500 !important;
  letter-spacing:.04em;transition:background .15s}
.site-nav-cta:hover{background:#3D1E7A}

@media(max-width:640px){
  .site-header-inner{padding:12px 14px;gap:12px}
  .site-nav{gap:14px}
  .site-nav a{font-size:.78rem}
  .site-nav-cta{padding:6px 12px}
}

/* ── Header auth (login button / profile chip) ─────────────────────────────── */
/* Login/profile is pinned to the far top-right corner of the page. margin-left
   auto pushes it past the nav (How it works / Pricing / Get my report) so it
   sits alone in the corner and never reads as just another nav item. */
/* Reserve the auth slot's height so the header row is already as tall as the
   eventual "Log in" button / profile chip. The widget is rendered by JS after
   load; without this reservation the empty slot is 0-height and the button
   growing the header shoves the whole page down (a sitewide layout shift). */
.site-auth{display:flex;align-items:center;gap:8px;position:relative;margin-left:auto;min-height:36px}

/* Sign up: primary solid CTA. Log in: secondary ghost. Both open the same
   passwordless Google / email flow (a first sign-in creates the account), so
   they differ only in emphasis. */
.site-auth-signup{background:#542C9E;color:#FAF8FF;border:1px solid #542C9E;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:.85rem;
  letter-spacing:.04em;padding:8px 18px;border-radius:6px;transition:background .15s,border-color .15s}
.site-auth-signup:hover{background:#7A3DB0;border-color:#7A3DB0}

.site-auth-login{background:transparent;color:#FAF8FF;border:1px solid #3A1A52;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:.85rem;
  letter-spacing:.04em;padding:8px 18px;border-radius:6px;transition:border-color .15s,background .15s}
.site-auth-login:hover{border-color:#542C9E;background:#2E155C}
.site-auth-login-link{text-decoration:none;display:inline-block}

.site-auth-profile{position:relative}
.site-auth-trigger{display:flex;align-items:center;gap:9px;background:transparent;
  border:1px solid #3A1A52;cursor:pointer;padding:5px 12px 5px 6px;border-radius:30px;
  color:#FAF8FF;font-family:'DM Sans',sans-serif;font-size:.85rem;
  transition:border-color .15s,background .15s}
.site-auth-trigger:hover{border-color:#542C9E;background:#2E155C}
.site-auth-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#542C9E;color:#FAF8FF;font-size:.72rem;font-weight:600;letter-spacing:.02em}
.site-auth-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.site-auth-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-auth-caret{font-size:.62rem;color:#9B8AB0;margin-left:1px}

.site-auth-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:212px;
  background:#FFFFFF;border:1px solid #DDD0EE;border-radius:10px;
  box-shadow:0 10px 30px rgba(30,10,46,.22);padding:8px;z-index:60}
.site-auth-menu[hidden]{display:none}
.site-auth-menu-head{padding:8px 10px 10px;border-bottom:1px solid #F0E8F5;margin-bottom:6px}
.site-auth-menu-name{color:#2E155C;font-size:.86rem;font-weight:600;
  font-family:'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-auth-menu-email{color:#7B5E9A;font-size:.76rem;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-auth-menu-handle{display:flex;align-items:center;gap:5px;color:#542C9E;
  font-size:.78rem;font-weight:600;margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-auth-menu-handle .site-auth-ig{flex:0 0 auto;color:#C13584}
.site-auth-menu-status{display:flex;align-items:center;gap:6px;color:#3C8C4A;
  font-size:.72rem;margin-top:7px;font-weight:500}
.site-auth-menu-status::before{content:'';width:7px;height:7px;border-radius:50%;
  background:#3C8C4A;display:inline-block}
.site-auth-logout{width:100%;text-align:left;background:transparent;border:none;
  cursor:pointer;color:#542C9E;font-family:'DM Sans',sans-serif;font-size:.84rem;
  font-weight:500;padding:8px 10px;border-radius:6px;transition:background .15s}
.site-auth-logout:hover{background:#F4EFF9}
/* Owner-only Admin link in the dropdown (rendered only when is_admin). Sits
   above Log out, set off by a hairline divider so it reads as a separate row. */
.site-auth-admin{display:block;text-decoration:none;color:#542C9E;
  font-family:'DM Sans',sans-serif;font-size:.84rem;font-weight:600;
  padding:8px 10px;border-radius:6px;transition:background .15s;
  border-top:1px solid #F0E8F5;margin-top:6px;padding-top:10px}
.site-auth-admin:hover{background:#F4EFF9;text-decoration:none}

.site-auth-fallback{position:absolute;top:calc(100% + 8px);right:0;
  background:#FFFFFF;border:1px solid #DDD0EE;border-radius:10px;
  box-shadow:0 10px 30px rgba(30,10,46,.22);padding:14px;z-index:60}

@media(max-width:640px){
  .site-auth-name{max-width:70px}
  .site-auth-login,.site-auth-signup{padding:6px 12px}
}

/* ── Global footer ─────────────────────────────────────────────────────────── */
.site-footer{background:#000;color:#9B8AB0;margin-top:64px;
  border-top:1px solid #2E155C}
.site-footer-inner{max-width:1920px;margin:0 auto;padding:32px 20px;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.site-footer-brand{display:flex;align-items:center;gap:10px;
  color:#C4A4E8;font-family:'DM Sans',sans-serif;font-weight:500;
  font-size:.9rem;letter-spacing:.02em}
/* Natural-ratio lockup, sized for the footer. */
.site-footer-logo{display:block;width:120px;height:auto}
.site-footer-links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.site-footer-links a{color:#D9C4F2;text-decoration:none;font-size:.82rem;
  font-weight:500;letter-spacing:.02em;transition:color .15s}
.site-footer-links a:hover{color:#FAF8FF}
/* "Contact us" styled to read as one of the footer links (it is a <button> so
   the native chrome is reset); it opens the contact modal below. */
.site-footer-contact{font-family:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:#D9C4F2;font-size:.82rem;font-weight:500;letter-spacing:.02em;transition:color .15s}
.site-footer-contact:hover{color:#FAF8FF}
.site-footer-meta{font-size:.72rem;color:#9486A8;letter-spacing:.03em}

/* ── Contact modal ─────────────────────────────────────────────────────────── */
.contact-modal{position:fixed;inset:0;z-index:1000;display:flex;
  align-items:center;justify-content:center;padding:16px}
.contact-modal[hidden]{display:none}
.contact-modal-backdrop{position:absolute;inset:0;background:rgba(30,14,50,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:contactFade 220ms ease-out}
@keyframes contactFade{from{opacity:0}to{opacity:1}}
.contact-modal-panel{position:relative;background:#FFFFFF;border-radius:16px;
  padding:28px 26px 24px;max-width:440px;width:100%;min-width:0;
  box-shadow:0 24px 60px rgba(30,14,50,.32);
  animation:contactPanel 320ms cubic-bezier(.34,1.4,.64,1)}
@keyframes contactPanel{from{opacity:0;transform:scale(.94) translateY(8px)}
  to{opacity:1;transform:scale(1) translateY(0)}}
.contact-modal-close{position:absolute;top:10px;right:12px;background:transparent;
  border:none;color:#9B8AB0;font-size:26px;line-height:1;cursor:pointer;
  padding:2px 8px;border-radius:8px;transition:color .15s,background .15s}
.contact-modal-close:hover{color:#542C9E;background:#F4EFF9}
.contact-modal-title{font-size:19px;font-weight:600;color:#2A1A4A;
  margin:0 0 6px;text-align:center}
.contact-modal-sub{font-size:13px;color:#7B5E9A;margin:0 0 18px;
  text-align:center;line-height:1.5}
.contact-modal-form{display:flex;flex-direction:column;gap:10px}
.contact-modal-form input[type="text"],
.contact-modal-form input[type="email"],
.contact-modal-form textarea{width:100%;padding:11px 14px;font-size:14px;
  border:1px solid #E4DAF3;border-radius:10px;font-family:inherit;color:#2A1A4A;
  background:#FCFBFE;outline:none;transition:border-color 160ms;box-sizing:border-box}
.contact-modal-form textarea{resize:vertical;min-height:96px;line-height:1.5}
.contact-modal-form input:focus,
.contact-modal-form textarea:focus{border-color:#542C9E;background:#FFFFFF}
/* Honeypot: kept in the DOM for bots, removed from view + tab order for humans. */
.contact-modal-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact-modal-submit{background:#542C9E;color:#FFFFFF;border:none;padding:12px 18px;
  font-size:14px;font-weight:600;border-radius:10px;cursor:pointer;
  font-family:inherit;transition:background 160ms;margin-top:2px}
.contact-modal-submit:hover{background:#4A1872}
.contact-modal-submit:disabled{background:#B2A4C6;cursor:not-allowed}
.contact-modal-status{font-size:12px;min-height:16px;text-align:center;line-height:1.4}
.contact-modal-status.is-error{color:#C12A2A}
.contact-modal-status.is-ok{color:#207A3C}

/* ── Home page: recent reports list ────────────────────────────────────────── */
.home-cached{max-width:620px;margin:24px auto 0;text-align:center}
.home-cached-label{font-size:10px;color:#7B5E9A;
  text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:10px}
.home-cached-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.home-cached-pill{display:inline-block;padding:6px 14px;border-radius:20px;
  background:#F4EFF9;border:1px solid #DDD0EE;color:#542C9E;
  font-size:.82rem;font-weight:500;text-decoration:none;transition:background .15s}
.home-cached-pill:hover{background:#E6D7F5}

/* The report page wrapper adjusts top padding because the header
   are now stacked above the content (no hero on the report page). */
/* Reserve a modest slab of space so the footer starts low during the client
   render (keeps CLS down), without leaving a large empty gap between the pager
   and the footer on shorter pages. Deliberately a fixed px value, NOT 100vh: a
   vh-based min-height recomputes when the viewport height changes (e.g. when an
   auditor resizes for a full-page screenshot), which itself reflows the page and
   registers as layout shift. A fixed slab is immune to that. */
.report-page{padding-top:20px;min-height:420px}

/* Reels Ranked sub-tab gets extra width so the 10-column table fits without
   a horizontal scroll bar at the bottom of the card. Vertical scroll inside
   the card still works because of .reels-table-wrap max-height. */
.report-page.report-page-reels{max-width:1920px}
/* The page header is normally capped at 980px and centred, which lines it up
   with the card on a default-width page. On the widened reels page that centring
   pushes the "Reels Ranked by Views" wording inward, off the table card's left
   edge. Let the header span the full reels width so it left-aligns with the card
   (and the time-window dropdown aligns with the card's right edge) like every
   other tab. */
.report-page-reels .report-page-header{max-width:none}

/* The month-of-posts plan gets the same extra width so a 4-post week lays out
   horizontally across one row instead of stacking into a long vertical scroll. */
.report-page.report-page-posts{max-width:1920px}
.report-page-posts .report-page-header{max-width:none}

/* ── Report frame: bordered box around the report body ─────────────────────── */
/* The frame holds the report body (left sub-tab rail + content). The three act
   tabs sit free above this box, not inside it. calc width gives a 16px side
   gutter until the frame hits its max-width, then it centers. */
/* max-width 1888 = the masthead's 1920 cap minus its 32px side gutters, so the
   frame border lines up exactly with the profile-header card edges above it. */
/* overflow:clip (not hidden) keeps the rounded corners clipping the sidebar rail
   without creating a scroll container, so the sticky sub-tab rail can stick
   against the viewport as the report scrolls. */
/* No outer border/radius: the report body merges straight into the page so the
   top reads as a continuation of the site header and the bottom flows into the
   footer (no boxing horizontal line at either end). The inner cards + the
   sidebar rail's own borders still give the layout structure. No top margin, so
   the content sits flush under the header (the .report-body footer rule below
   removes the matching gap above the footer). */
.report-frame{width:calc(100% - 32px);max-width:1888px;margin:0 auto;
  background:var(--bg);overflow:clip}
/* Pull the footer up against the report so there's no empty band between the
   last section and the footer. Scoped to report pages so other pages keep the
   global footer breathing room. */
body.report-body .site-footer{margin-top:0}
/* Reels + post-plan pages run to the full width cap so their wide tables/grids fit. */
.report-frame-reels,.report-frame-posts{max-width:1920px}

/* Content sits inside the same frame; the frame owns the width + centering now,
   so drop the page-wrap's own cap/margins and give the content its own padding. */
.report-frame .page-wrap{width:auto;max-width:none;margin:0;padding:22px 22px 56px}
@media(max-width:780px){
  .report-frame .page-wrap{padding:16px 14px 48px}
}

/* ── Report nav ────────────────────────────────────────────────────────────── */
/* Two layers: the three act tabs sitting free above the content frame, and the
   per-act sub-tabs in the left sidebar rail inside the frame. */

/* ── Acts - one joined-up segmented pill at the top of the content column ──── */
/* The three acts read as a single segmented pill (iOS-style control) at the top
   of the content column. A white indicator sits behind the active segment and
   SLIDES across to the new act on navigation - the swipe is driven by the
   positionActsIndicator script, which starts the indicator under the act you
   left and transitions it to the active one. Equal-width segments keep the
   slide uniform; nothing about each segment fills, so widths never shift. */
.report-acts{margin:0 0 4px}
.report-acts-inner{position:relative;display:flex;align-items:stretch;
  background:#EDE4F7;border:1px solid #E0D2F0;border-radius:14px;padding:5px}
/* The highlight is a pure-CSS pill on the active segment (see
   .report-act.active) so the current tab reads as selected the instant the HTML
   paints - no JS, no waiting on the render scripts. The old JS-positioned
   sliding indicator is retired; the span stays in the markup but is hidden. */
.report-acts-indicator{display:none}
/* Each act is a transparent equal-width segment riding above the indicator. */
.report-act{flex:1 1 0;position:relative;z-index:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:13px;
  padding:11px 18px;
  background:transparent;border:none;border-radius:10px;
  color:#7B5E9A;text-decoration:none;
  transition:color .18s,background .18s,transform .12s;min-width:0}
/* Clear hover affordance on a non-active tab: a soft white pill lifts in behind
   the label and the whole segment nudges up a touch, so it reads as clickable.
   The active tab already carries the sliding white indicator, so it doesn't
   take the hover fill. */
.report-act:hover{color:#3D1E7A}
.report-act:not(.active):hover{background:rgba(255,255,255,.6);
  transform:translateY(-1px)}
.report-act:not(.active):hover .report-act-number{background:#D8C4F2;
  color:#542C9E;border-color:#C4A4E8}
/* Active segment: a quiet white pill with a soft purple edge, drawn with
   background + inset box-shadow (no border) so it adds the highlight without
   changing the segment's box size. Painted from the server-rendered .active
   class, so it's there on first paint - no JS, no delay. */
.report-act.active{color:#3D1E7A;background:#FFFFFF;
  box-shadow:inset 0 0 0 1px #D9C7EE}
/* On an in-app act change the router slides a transient floater pill between the
   old and new segment (see report-nav.js swipeActPill). The destination's
   resting pill is suppressed while the floater is in flight so it reads as one
   pill swiping across, then handed back to the CSS pill on arrival. */
.report-act.active.rdr-swiping{background:transparent;box-shadow:none}
.report-act-floater{position:absolute;top:0;left:0;z-index:0;
  border-radius:10px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #D9C7EE;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion: reduce){
  .report-act-floater{transition:none}}

.report-act-number{flex-shrink:0;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Serif Display',serif;font-style:italic;font-size:1.25rem;
  font-weight:400;line-height:1;
  background:#E3D4F4;color:#7B5E9A;border:1px solid #D6C4ED;
  transition:background .2s,color .2s,border-color .2s}
.report-act.active .report-act-number{background:#542C9E;
  color:#FAF8FF;border-color:#542C9E}

.report-act-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.report-act-title{font-family:'DM Sans',sans-serif;font-size:.92rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.2;color:inherit;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.report-act-tagline{font-family:'DM Serif Display',serif;font-style:italic;
  font-size:.85rem;font-weight:400;color:inherit;opacity:.78;
  line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Padlock on a paid (Compare / Dominate) act tab for non-paying viewers,
   mirroring the per-sub-tab padlock so the wall reads from the chapter strip. */
.report-act-lock{font-size:.7em;margin-left:7px;opacity:.72;
  vertical-align:middle;position:relative;top:-1px}
.report-act:hover .report-act-lock,
.report-act.active .report-act-lock{opacity:1}

@media(max-width:780px){
  /* The pill stays joined and horizontal so the swipe still reads; just tighten
     the segments so three fit a narrow row. */
  .report-act{padding:9px 11px;gap:9px}
  .report-act-number{width:28px;height:28px;font-size:1.05rem}
  .report-act-title{font-size:.74rem;letter-spacing:.05em}
  .report-act-tagline{font-size:.72rem}
}
@media(max-width:560px){
  /* Tightest phones: drop the number badge + tagline so the segments are just
     the act labels - a clean three-up segmented control the highlight slides
     across. */
  .report-act{padding:10px 6px;gap:0;justify-content:center}
  .report-act-number,.report-act-tagline{display:none}
  .report-act-title{font-size:.72rem;letter-spacing:.04em}
}

/* ── Two-column body: left sub-tab rail + content ─────────────────────────── */
/* The per-act sub-tabs moved out of a horizontal row under the acts and into a
   left sidebar rail, so the reader sees every section of the act at a glance and
   jumps to any one with a single click. The content fills the column to its
   right. The sidebar's right border lines up with the navband divider above so
   the whole frame reads as one control surface. */
.report-layout{display:flex;align-items:stretch}
.report-sidebar{flex:0 0 220px;align-self:stretch;
  background:#FAF7FD;border-right:1px solid #E2D8EE;
  padding:18px 14px}
/* Profile pic at the top of the rail (YouTube Studio style): a larger, centred
   avatar sitting above the sub-tab links. Reuses the masthead avatar's tint /
   ring; #ph-avatar img (in styles-competitor.css) fills it with the photo. */
.report-side-avatar{width:76px;height:76px;border-radius:50%;
  background:#F4EFF9;border:2px solid #C4A4E8;color:#3D1E7A;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;font-weight:600;letter-spacing:.02em;
  overflow:hidden;margin:0 auto 18px}
/* Content column: take the remaining width and allow it to shrink past its
   intrinsic min so wide tables inside scroll rather than blowing out the row. */
.report-layout .page-wrap{flex:1 1 auto;min-width:0}

/* ── Row 2: Sub-tabs - vertical button rail ───────────────────────────────── */
/* Full-width buttons stacked top to bottom. The active sub-tab is a filled
   purple button; the rest are quiet white buttons that colour up on hover. The
   inner stays put at the top of the rail as the content scrolls beside it. */
/* Sticks below the sticky site header (≈65px tall) so the rail stays in view as
   the content scrolls beside it, never tucking behind the header. */
.report-subtabs{display:flex;flex-direction:column;gap:6px;
  position:sticky;top:78px}
.report-subtab{display:block;width:100%;padding:9px 13px;border-radius:9px;
  background:#FFFFFF;border:1px solid #E4D8F0;
  color:#5C4A6E;font-size:.82rem;font-weight:600;letter-spacing:.005em;
  text-decoration:none;text-align:left;line-height:1.3;
  transition:background .15s,color .15s,border-color .15s}
.report-subtab:hover{background:#F1E9FB;color:#3D1E7A;border-color:#C4A4E8}
.report-subtab.active{background:#542C9E;color:#FAF8FF;border-color:#542C9E}

/* Stack the rail above the content on narrow viewports: the sidebar becomes a
   full-width band and its buttons flow back into a wrapping pill row so they
   don't eat vertical space on mobile. */
@media(max-width:780px){
  .report-layout{flex-direction:column}
  .report-sidebar{flex:0 0 auto;border-right:none;
    border-bottom:1px solid #E2D8EE;padding:12px 14px}
  /* On the stacked mobile band, the avatar shrinks and sits at the start above
     the wrapping pill row rather than taking a full centred row. */
  .report-side-avatar{width:52px;height:52px;font-size:1.2rem;margin:0 0 12px}
  .report-subtabs{flex-direction:row;flex-wrap:wrap;gap:6px 8px;
    position:static;top:auto}
  .report-subtab{width:auto;padding:6px 13px;border-radius:999px;
    font-size:.78rem}
}

/* ── Compare-act tracking block (inside the content) ──────────────────────── */
/* The competitor tracking control lives inside the Compare content rather than
   in a strip above the frame, so the chrome above stays fixed and the page
   doesn't jump when moving between Compare sub-tabs. It wraps the Pro compare
   bar (the functional add/change-competitor inputs) plus a note listing any
   handles we couldn't fetch. */
.compare-track{margin:0 0 18px}
.compare-track .compare-bar{margin:0}
.compare-track-note{margin-top:10px;font-size:.8rem;color:#7B5E9A;
  line-height:1.5}
.compare-track-note ul{margin:6px 0 0 18px;padding:0;list-style:disc}
.compare-track-note li{margin-bottom:4px}
.compare-track-note strong{color:#542C9E;font-weight:600}

/* ── Compare bar: add/change competitors from the top of any report page ───── */
/* Replaced the home-page competitor inputs. Pro users get live inputs + a
   Compare button; non-Pro see a locked upsell that routes to pricing. Reuses
   the global .comp-slot / .handle-at styling for the inputs, and the shared
   .lock-badge for the "Rival" tier tag. */
/* A page-width card (matches the report content column, not the full-bleed nav
   strips above it), clearly set apart as its own box. Three stacked rows:
   1) PRO badge + title, 2) the inputs + Compare button, 3) the note line. */
/* Account identity card now sits inside the content column (top of .page-wrap,
   above the act pill tabs), so it spans the column width with no own centering
   or padding - just bottom spacing to set it off from the tabs below. */
/* The identity heading and the four headline stat cards share one row: the
   account name + meta on the left, the stat cards pushed to the right. Wraps
   the stats under the name only when the row runs out of width (mobile). */
.report-top-identity{margin:0 0 14px;display:flex;align-items:center;
  justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
/* Plain text, no boxed card: drop the white background, border, radius and the
   tall reserved min-height the home-page #profile-header carries, so the account
   name + meta read as a quiet heading and the act tabs below stay the prominent
   element. Visibility stays hidden until paintReportPage() reveals it. */
.report-top-identity #profile-header{margin-bottom:0;background:none;border:none;
  border-radius:0;padding:0;min-height:auto;flex:1 1 auto;min-width:0}
.report-top-identity .pname{font-size:1.35rem;font-weight:600;color:var(--text);
  line-height:1.3}
/* Follower count + generated date share one meta line under the name. The dot
   separator hides itself when the follower count is empty (:empty) so a lone
   middot can't sit before the date. */
.report-id-meta{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin-top:5px}
.report-id-meta #ph-followers{font-size:.9rem;color:var(--accent);font-weight:600}
.report-id-meta .report-id-sep{color:var(--hint);font-size:.8rem}
.report-id-meta #ph-followers:empty + .report-id-sep{display:none}
.report-id-meta .report-generated{font-size:.78rem;color:var(--muted)}

/* Small, discreet "Your Username" caption under the sidebar avatar so the reader
   always knows whose report this is, centred to match the avatar above it. */
.report-side-id{text-align:center;margin:-8px 0 18px}
.report-side-id-label{font-size:.72rem;font-weight:700;color:#3D1E7A;
  letter-spacing:.01em}
.report-side-id-handle{font-size:.74rem;color:var(--muted);margin-top:1px;
  word-break:break-word}
@media(max-width:780px){.report-side-id{text-align:left;margin:-4px 0 12px}}

/* Headline stats band: sits to the RIGHT of the identity heading on the Analyse
   act, as four separate boxed cards (not one big box). The boxes are a fixed
   width (matching the competitor card's stat cards) so they don't stretch to
   fill the row; they wrap under the name only when the row runs out of width. */
.report-stats-band{margin:0;flex:0 1 auto;
  display:grid;grid-template-columns:repeat(4,minmax(108px,128px));gap:12px}
.report-stats-band .stat-box{background:#FFFFFF;border:1px solid #E2D8EE;
  border-radius:14px;padding:16px 14px;display:flex;flex-direction:column;
  justify-content:center}
/* Reserve the value line's height so an as-yet-unfilled box (the number is
   painted in by JS after load) is exactly as tall as a filled one. Without this
   the empty boxes start short and grow on paint, nudging the act tabs down. */
.report-stats-band .stat-box .val{min-height:1.3em;line-height:1.3}
/* When the row is too narrow to hold the title beside all four cards, let the
   band span the full width below the name rather than squeezing the boxes. */
@media(max-width:820px){.report-stats-band{width:100%;
  grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.report-stats-band{grid-template-columns:repeat(2,1fr);
  gap:14px}}
/* Compare bar now lives INSIDE the masthead box, so it spans the box's inner
   width (no own max-width/centering) and just sits below the stats. */
.compare-bar{margin:0;align-self:flex-start}
/* Light pill bar so the surface stays neutral and the only purple is the CTA.
   A compact single-line widget (padlock + input + CTA) that shrinks to its
   content, so it tucks beside the Time window on Compare/Dominate, or beside
   the Next pager button on Analyse, instead of spanning the full width. */
.compare-bar-inner{background:#FFFFFF;
  border:1px solid #E0D2F0;border-radius:999px;
  padding:7px;display:flex;flex-direction:row;align-items:center;
  gap:12px;flex-wrap:nowrap;width:auto}
/* One shared lock badge used everywhere a paid surface marks locked content
   (compare bar, paywall page banner, floating CTA card, per-card overlay).
   A single padlock in one consistent colour so the badge reads the same on
   every surface. Defined here (render-blocking) so the server-rendered
   compare-bar badge never flashes unstyled; paywall.css adds only the
   per-surface overrides. */
.lock-badge{display:inline-flex;align-items:center;gap:6px;
  background:#F4EFF9;border:1px solid #DDD0EE;color:#542C9E;
  border-radius:999px;padding:4px 12px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
/* In the centered compare-bar head row the badge sits inline, so drop the
   stacking margin (it's meant for the stacked paywall cards). */
.compare-bar .lock-badge{margin-bottom:0}
/* Input + CTA sit inline on the single-line bar. */
.compare-bar-row{display:flex;flex-direction:row;align-items:center;
  gap:10px;flex-wrap:nowrap;min-width:0}
.compare-bar .comp-slot{flex:0 0 200px;height:44px;width:200px;min-width:0;
  border-radius:999px}
/* Instagram glyph (matches the home-page field) replaces the old "@" prefix. */
.compare-bar .ig-logo{flex-shrink:0;display:flex;align-items:center;
  line-height:0;padding-left:12px}
.compare-bar .ig-logo svg{display:block}
.compare-bar .comp-slot input{padding-left:9px}
/* The one purple element: the CTA, as a pill in the site's brand purple to
   match every other "View reel" / action pill across the report. */
.compare-go{flex-shrink:0;padding:0 22px;height:44px;border-radius:999px;
  border:none;cursor:pointer;background:#542C9E;color:#FAF8FF;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.02em;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s}
.compare-go:hover{background:#3D1E7A}
.compare-go:disabled{opacity:.6;cursor:not-allowed}

/* ── Foot-of-page pager ───────────────────────────────────────────────────── */
/* A single Previous / Next step at the foot of the content so the reader never
   has to pick from a row of pills - it walks the report in order, rolling into
   the next act at an act boundary. Sits inside the content column, so it spans
   the column width with no own centering. */
.report-pager{margin:28px 0 8px;
  display:flex;gap:16px;align-items:stretch;justify-content:space-between}
/* Both buttons share one width and cap out so they never stretch into oversized
   half-page slabs: prev stays pinned left, next pinned right, with a clean gutter
   between. A lone button (first/last page) keeps the same capped width on its
   own side rather than ballooning across. */
.report-pager-btn{flex:1 1 0;max-width:360px;display:flex;align-items:center;gap:12px;
  padding:14px 18px;border:1px solid #DDD0EE;border-radius:12px;
  background:#FFFFFF;color:#3D1E7A;text-decoration:none;min-width:0;
  transition:background .15s,border-color .15s,box-shadow .15s}
.report-pager-btn:hover{background:#F4EFF9;border-color:#C4A4E8}
.report-pager-prev{justify-content:flex-start;text-align:left}
.report-pager-next{justify-content:flex-end;text-align:right}
/* Empty placeholder keeps the present button on its side when there is no
   partner (first page has no Previous, last page has no Next). */
.report-pager-empty{visibility:hidden}
.report-pager-arrow{flex-shrink:0;font-size:1.3rem;line-height:1;color:#542C9E}
.report-pager-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.report-pager-kicker{font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#9B86B5}
.report-pager-label{font-size:.92rem;font-weight:600;color:#3D1E7A;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Analyse foot: the compact compare/unlock box rides in the pager row, to the
   left of the Next button. Center the row so the taller box doesn't stretch the
   buttons, and let it wrap when the column is narrow. */
.report-pager-with-compare{align-items:center;flex-wrap:wrap}
.report-pager .compare-bar{flex:0 1 auto}

/* ── Mobile tweaks ────────────────────────────────────────────────────────── */
@media(max-width:780px){
  .report-pager{margin:24px 0 4px}
  .report-pager-btn{padding:12px 14px}
  /* On a phone the two buttons sit at ~half width each, so the single-line
     ellipsis was clipping section names ("Content Mix" -> "Content M..."). Let
     the label wrap to the full words instead - the button grows taller, never
     truncates. */
  .report-pager-label{font-size:.84rem;white-space:normal;overflow:visible;
    text-overflow:clip;line-height:1.25;overflow-wrap:break-word}
  /* On narrow screens the single-line bar stacks so it never overflows. The
     container softens to a rounded card (a full pill would bow when tall); the
     input and CTA stay pills since they keep their short height. */
  .compare-bar-inner{padding:12px;gap:10px;flex-direction:column;
    align-items:stretch;border-radius:20px}
  .compare-bar-row{flex-direction:column;align-items:stretch;width:100%}
  .compare-bar .comp-slot{flex:1 1 auto;width:100%}
  .compare-go{width:100%;justify-content:center}
}

/* ── Sub-page cards: Top 3 Reels (Competitors) ────────────────────────────── */
.top-reels-comp{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #ECE2F2}
.top-reels-comp:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.top-reels-comp-header{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.top-reels-comp-handle{font-size:1.05rem;font-weight:600;color:#3D1E7A;text-decoration:none}
.top-reels-comp-handle:hover{text-decoration:underline}
.top-reels-comp-followers{font-size:.78rem;color:var(--muted)}
.top-reels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:780px){.top-reels-grid{grid-template-columns:1fr}}
.top-reels-card{display:block;padding:14px 16px;border-radius:10px;
  background:#FFFFFF;border:1px solid var(--border);text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .1s;position:relative}
.top-reels-card:hover{border-color:#C4A4E8;
  box-shadow:0 4px 12px rgba(60,21,88,.08);transform:translateY(-2px)}
.top-reels-rank{position:absolute;top:-9px;left:-9px;width:24px;height:24px;
  border-radius:50%;background:#3D1E7A;color:#FAF8FF;display:flex;
  align-items:center;justify-content:center;font-size:.72rem;font-weight:700}
.top-reels-hook{font-size:.88rem;line-height:1.4;color:var(--text);
  margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.top-reels-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.74rem;
  color:var(--muted);margin-bottom:8px}
.top-reels-views{font-weight:600;color:var(--gold)}
.top-reels-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.top-reels-why{font-size:.75rem;color:#6B5A7E;line-height:1.4;font-style:italic}
.top-reels-empty-row{color:var(--muted);font-size:.85rem;padding:12px}

/* ── Sub-page cards: Content Strategy Summary (Competitors) ───────────────── */
.strategy-comp{padding:20px 22px;margin-bottom:14px;border-radius:10px;
  background:#FFFFFF;border:1px solid var(--border)}
.strategy-comp:last-child{margin-bottom:0}
.strategy-comp-header{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.strategy-comp-handle{font-size:1.05rem;font-weight:600;color:#3D1E7A;text-decoration:none}
.strategy-comp-handle:hover{text-decoration:underline}
.strategy-comp-archetype{font-size:.74rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:#542C9E;padding:3px 10px;border-radius:14px;
  background:#F4EFF9;border:1px solid #DDD0EE}
.strategy-comp-sentence{font-size:.92rem;line-height:1.5;color:var(--text);
  margin-bottom:14px;font-style:italic}
.strategy-comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px 18px;padding:12px 14px;background:#FAFAF8;border-radius:8px;margin-bottom:12px}
.strategy-comp-row{font-size:.84rem;line-height:1.5}
.strategy-comp-label{color:var(--muted);font-weight:500}
.strategy-comp-val{color:var(--text);font-weight:500}
.strategy-comp-implication{margin-top:10px;padding:10px 14px;border-radius:8px;
  background:#F4EFF9;border:1px solid #DDD0EE;font-size:.86rem;
  line-height:1.5;color:var(--text)}

/* ── Empty state on Competitors sub-pages (no competitors tracked yet) ────── */
.competitors-empty{padding:24px 28px;background:#F4EFF9;border:1px dashed #DDD0EE;
  border-radius:12px;text-align:left}
.competitors-empty .card-title{margin-bottom:10px}
.competitors-empty-body{font-size:.88rem;color:#4A3D5C;line-height:1.55;
  font-family:'DM Sans',sans-serif}


/* ── Per-competitor "What they post about" reel link ──────────────────────────
   The themes list itself now renders as a ranked table on the Content Strategy
   sub-tab (.ct-* in styles-competitor.css); this purple pill is the per-row reel
   link, kept here because the global reel-icon rule iconifies a.strategy-topic-cta. */
.strategy-topic-cta{display:inline-flex;align-items:center;padding:3px 10px;
  border-radius:12px;background:#542C9E;color:#FAF8FF;font-size:.7rem;
  font-weight:600;letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  transition:background .15s,transform .1s,box-shadow .15s}
.strategy-topic-cta:hover{background:#3D1E7A;transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(60,21,88,.18)}

/* ── Your Top Topics card on the Account page ─────────────────────────────── */
/* AI-derived domain-specific topics ranked by avg views. The bar shows
   relative performance so the reader sees which subjects pull the most reach. */
.account-topics-list{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:14px}
.account-topic{padding:12px 0;border-bottom:1px solid #F0E8F5}
.account-topic:last-child{border-bottom:none;padding-bottom:0}
.account-topic-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:6px}
.account-topic-name{font-size:.98rem;font-weight:600;color:var(--text)}
.account-topic-count{font-size:.74rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.account-topic-bar{position:relative;height:6px;border-radius:3px;
  background:#F4EFF9;overflow:hidden;margin-bottom:6px}
.account-topic-bar span{position:absolute;top:0;left:0;height:100%;
  background:linear-gradient(90deg,#C4A4E8 0%,#542C9E 100%);
  border-radius:3px;transition:width .4s ease}
.account-topic-meta{display:flex;gap:14px;font-size:.78rem;color:var(--muted);
  align-items:center;flex-wrap:wrap}
.account-topic-link{color:#542C9E;text-decoration:none;font-weight:500}
.account-topic-link:hover{text-decoration:underline}
/* Prominent CTA pill on each topic row - same purple pill style used by
   Categories / Seasonal / Performance Patterns so the action surface is
   consistent across the report. */
.account-topic-cta{display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:14px;
  background:#542C9E;color:#FAF8FF;font-size:.74rem;font-weight:600;
  letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  margin-left:auto;
  transition:background .15s,transform .1s,box-shadow .15s}
.account-topic-cta:hover{background:#3D1E7A;transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(60,21,88,.18)}
.account-topics-empty{padding:14px;color:var(--muted);font-size:.85rem;
  line-height:1.5;background:#FAFAF8;border-radius:8px}

/* ── Report page header (per-page H1 + story-beat subtitle + window dropdown) ── */
/* The page title locks to the top as the reader scrolls the cards, so they always
   know which section they are in (Playbook, Business, etc). It freezes flush under
   the sticky site header (~64px) with the page bg behind it and a hairline rule, so
   scrolling cards pass cleanly underneath. z-index sits below the site header (50)
   but above the report content. The title pins on the Analyse and Dominate acts.
   On Compare it is released to static and the competitor strip pins instead, so
   only one bar ever freezes per act (see .report-frame-act-competition in
   styles-competitor.css). */
.report-page-header{max-width:1920px;margin:0 auto 12px;padding:2px 4px 10px;
  position:sticky;top:64px;z-index:30;background:var(--bg)}
@media(max-width:780px){
  .report-page-header{position:static;top:auto;border-bottom:none;padding:2px 4px 0}
}
.report-page-header-top{display:flex;align-items:flex-start;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
/* Header layout is a 2-column grid: the title and subtitle stack together on the
   left as one unit (header directly above its subheader, exactly like desktop),
   while the compare/unlock bar sits to their right, vertically centred, spanning
   both rows - it reads as one tidy block in the space the old floating
   Time-window dropdown used to occupy. The title column flexes and wraps; the
   compare column takes its own width. The Time-window dropdown is no longer in
   the header at all - every time-scoped page carries it inside its first card
   head now (.card-window-head), which keeps this header clean. */
.report-page-header-main{flex:1 1 320px;min-width:0;
  display:grid;align-items:start;column-gap:18px;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"title compare" "subtitle compare"}
.report-page-title{grid-area:title}
.report-page-subtitle{grid-area:subtitle}
.report-page-title-compare{grid-area:compare;align-self:center;justify-self:end;
  display:flex;justify-content:flex-end;min-width:0}
.report-page-title-compare .compare-bar{margin:0}
/* No compare/unlock bar (a Pro viewer has locked their one competitor): collapse
   to a single column so the title + subtitle use the full width, and drop the
   now-empty bar wrapper so it can't open an implicit grid row. */
.report-page-header-main:not(:has(.compare-bar)){
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"title" "subtitle"}
.report-page-header-main:not(:has(.compare-bar)) .report-page-title-compare{display:none}
/* Legacy subtitle-row (kept for any page still rendering the old shape). */
.report-page-subtitle-row{display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px}
.report-page-subtitle-row > .report-page-subtitle{margin:0}
.report-page-act{font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#6B5A7E;margin-bottom:4px}
.report-page-title{font-family:'DM Sans',sans-serif;font-size:2rem;
  font-weight:300;letter-spacing:-.02em;color:#1A1018;margin-bottom:4px;
  line-height:1.15}
/* Act kicker (e.g. "COMPARE") and the Time-window dropdown share the top line,
   so "Time window" sits level with the kicker rather than against the big title
   below. The window goes horizontal here (label beside the select) to keep that
   line tidy. */
.report-page-act-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:4px}
.report-page-act-row .report-page-act{margin-bottom:0}
.report-page-act-row .report-window{flex-direction:row;align-items:center;gap:8px}
.report-page-subtitle{font-family:'DM Serif Display',serif;font-style:italic;
  font-weight:400;color:#542C9E;font-size:1.05rem;letter-spacing:.01em;
  line-height:1.45}
/* Compare + Dominate headers carry no act kicker and no "Time window" label;
   the bare dropdown sits below the subtitle with a little breathing room so the
   line reads title -> subtitle -> control. */
.report-window-below{margin-top:14px}

/* Compare act lifts the window dropdown into the top of the content, level with
   the cards below it (not up in the header), so it reads like the in-card window
   control on the Head to Head / Content DNA tabs. */
.report-window-incontent{margin:0 0 16px}

/* Right cluster of the page header: the Time-window select, and on the
   Compare/Dominate acts the compact compare/unlock box sitting to its right,
   all on the same line as the header title. */
.report-header-aside{display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;justify-content:flex-end}

/* Time-window dropdown - sits in the top-right of every report page header
   so the reader can re-scope the whole report to the last 30/90/180/365
   days without leaving the page. Drives ?days=<N> in the URL. */
.report-window{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;
  font-family:'DM Sans',sans-serif;flex-shrink:0}
.report-window-label{font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#6B5A7E}
.report-window-select{appearance:none;-webkit-appearance:none;
  padding:5px 22px 5px 10px;border-radius:8px;
  background:#FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' fill='none' stroke='%235B1F8A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 7px center;
  border:1px solid #DDD0EE;color:#3D1E7A;
  font-size:.82rem;font-weight:500;letter-spacing:.01em;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.report-window-select:hover{border-color:#C4A4E8}
.report-window-select:focus{outline:none;border-color:#542C9E;
  box-shadow:0 0 0 3px rgba(84,44,158,.12)}

/* Tablet + phone: stack the header into one column so the compare/unlock bar
   drops BELOW the title + subtitle (never between them). The title and its
   subtitle stay glued together at the top, exactly as on desktop. Breakpoint is
   780px so portrait tablets (iPad ~768px) get the clean stacked header too,
   where the side-by-side bar would otherwise crush the title column. */
@media(max-width:780px){
  .report-page-header-main{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"title" "subtitle" "compare"}
  .report-page-title-compare{justify-self:stretch;align-self:start;
    justify-content:flex-start;margin-top:12px}
}
@media(max-width:600px){
  .report-page-title{font-size:1.6rem}
  .report-page-subtitle{font-size:.95rem}
  /* The header flips to a column here; reset the row-layout flex basis so the
     header hugs its content rather than reserving ~320px of dead height. */
  .report-page-header-main{flex-basis:auto}
}

/* ── Report page footer (next-page CTA) ────────────────────────────────────── */
.report-page-footer{margin:32px 0 8px;text-align:center}
.report-page-next{display:inline-block;padding:12px 24px;border-radius:8px;
  background:#3D1E7A;color:#EDE0FF;text-decoration:none;
  font-size:.88rem;font-weight:500;letter-spacing:.03em;
  transition:background .15s}
.report-page-next:hover{background:#2E155C}

/* ── Audience-page empty-state-aware future-slot card ──────────────────────── */
.audience-future{background:#F4EFF9;border:1px dashed #DDD0EE;border-radius:12px;
  padding:24px 28px;margin-bottom:16px;text-align:left}
.audience-future .card-title{margin-bottom:10px}
.audience-future-body{font-size:.88rem;color:#4A3D5C;line-height:1.55;
  font-family:'DM Sans',sans-serif}

/* ── Founder contact pill (site-wide, bottom-right) ────────────────────────── */
/* A reachable human is one of the strongest trust signals a small brand can
   send. The pill sits bottom-right on every page and opens a WhatsApp chat with
   the founder. Brand-purple rather than the stock green bubble so it reads
   premium; the glyph keeps it recognisable as WhatsApp. The fuller founder
   story lives in its own section on How it works. */
.founder-contact{position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;align-items:center;gap:11px;padding:9px 16px 9px 9px;
  border-radius:40px;text-decoration:none;border:1px solid #6A3FB5;
  background:linear-gradient(135deg,#542C9E 0%,#3D1E7A 100%);
  box-shadow:0 8px 24px rgba(26,17,64,.32);
  font-family:'DM Sans',sans-serif;
  transition:transform .15s,box-shadow .15s}
.founder-contact:hover{transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(26,17,64,.42)}
.founder-contact-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#6A3FB5;border:1px solid rgba(196,164,232,.5)}
.founder-contact-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.founder-contact-monogram{width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;color:#FAF8FF;
  font-size:1.05rem;font-weight:600}
.founder-contact-text{display:flex;flex-direction:column;line-height:1.2}
.founder-contact-label{color:#FAF8FF;font-size:.9rem;font-weight:600;
  letter-spacing:.01em}
.founder-contact-sub{color:#C4A4E8;font-size:.72rem;letter-spacing:.02em}
.founder-contact-glyph{flex-shrink:0;color:#A9E5B8;display:flex;
  align-items:center;margin-left:2px}

@media(max-width:640px){
  /* Collapse to a compact icon-only pill on mobile so it never crowds content
     or covers a sticky CTA; the avatar + glyph still signal "talk to a human". */
  .founder-contact{right:14px;bottom:14px;padding:8px;gap:0;position:fixed}
  .founder-contact-text{display:none}
  .founder-contact-glyph{position:absolute;right:-3px;bottom:-3px;
    background:#1A1140;border-radius:50%;padding:3px;border:1px solid #6A3FB5}
}

/* ── Report tab router (report-nav.js) ─────────────────────────────────────── */
/* Toggled while an in-page tab swap is fetching. With prefetch the swap is
   usually instant, so this only shows on a cold click. */
html.rdr-loading{cursor:progress}
/* New frame fade-in on a tab swap: starts at 0 so the cards painting in async
   behind it read as one smooth reveal instead of a flash of empty skeletons.
   The class is added on insert and removed on the next frame, so it runs once.
   Skipped under reduced-motion (the JS skips adding it too). */
.report-frame{transition:opacity .22s ease, transform .22s ease}
.report-frame.rdr-enter{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion: reduce){
  .report-frame{transition:none}
}