:root {
  --bg:#FAFAF8; --surface:#FFFFFF; --surface2:#F4EFF9; --border:#E2D8EE;
  --accent:#542C9E; --accent2:#C4A4E8; --plum:#3D1E7A;
  --text:#1A1018; --muted:#6B5A7E; --hint:#766488;
  --gold:#542C9E; --green:#1B9E4B; --red:#B23B30;
  --blue:#3D1E7A; --orange:#E0670F; --teal:#1A5C5C;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Always reserve the vertical scrollbar gutter. Report pages render their body
   client-side, so the page starts short then grows tall; reserving the gutter up
   front stops that from reflowing every centred element sideways (cumulative
   layout shift). scrollbar-gutter:stable reserves the space WITHOUT painting a
   permanent scrollbar, so a short page shows no bar and only genuinely long
   content scrolls. */
html{overflow-y:auto;scrollbar-gutter:stable}
/* Sticky-footer column: body fills at least the viewport and #main-content
   grows to absorb the slack, so on short pages (home, contact, faq, etc.) the
   footer sits at the bottom instead of leaving a band of body background below
   it. Applies site-wide since every page extends base.html. */
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
  display:flex;flex-direction:column}
#main-content{flex:1 0 auto}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.hero{background:#1A1140;padding:36px 32px;text-align:center;position:relative;overflow:hidden}
.hero-compact{padding:28px 32px 24px}
.hero-compact h1{font-size:1.7rem;margin-bottom:10px}
.hero-inner{max-width:680px;margin:0 auto}
.hero-mark{font-size:10px;color:#FFFFFF;margin-bottom:20px;letter-spacing:.12em;
  text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px}
.hero-mark-diamond{width:8px;height:8px;background:#C4A4E8;transform:rotate(45deg);
  flex-shrink:0;display:inline-block}
.hero-mark-dot{color:#8B5CF6;opacity:.7}
.hero h1{font-family:'DM Sans',sans-serif;font-size:2.1rem;font-weight:300;
  color:#FAF8FF;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px}
.hero h1 em{font-family:'DM Serif Display',serif;font-style:italic;
  font-weight:400;color:#C4A4E8}
.hero-sub{color:#9B8AB0;font-size:1rem;letter-spacing:.04em;margin-bottom:0}
.hero-bar{position:absolute;bottom:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,#3D1E7A,#8B5CF6,#C4A4E8,#8B5CF6,#3D1E7A);border-radius:0}

/* ── Page wrapper ───────────────────────────────────────────────────────────── */
.page-wrap{max-width:1920px;margin:0 auto;padding:32px 16px 80px}

/* ── Home page vertical centring ──────────────────────────────────────────────
   The home page content is short, so in normal top-aligned flow the search block
   sat just under the hero with a small gap above it and a big empty gap below it
   down to the footer ("not in the middle"). Make the page fill the viewport and
   centre the search block in the space below the hero, so the top and bottom gaps
   match. Scoped to body.home-page so the report and other pages keep their normal
   top-aligned flow. The flex item's default min-height (its content) means a long
   report still grows naturally and is never clipped. */
body.home-page{display:flex;flex-direction:column;min-height:100vh}
body.home-page #main-content{flex:1;display:flex;flex-direction:column}
body.home-page .page-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-top:40px;padding-bottom:40px}
/* The search block's own bottom margin would pull it above true centre, so drop
   it on the home page (the flex centring provides the spacing instead). */
body.home-page .search-wrap{margin-bottom:0}

/* ── Search area ────────────────────────────────────────────────────────────── */
.search-wrap{max-width:660px;margin:0 auto 32px}
/* The search field used to float alone in the centre of the page, reading as
   "barren and lost". It now sits inside a deliberate panel: a kicker, a prompt
   headline and a one-line value promise above the field, with trust ticks below.
   Bordered + softly tinted (no glow) so it anchors the page as the obvious place
   to start. */
.search-panel{position:relative;background:#FFFFFF;border:1px solid #E2D8EE;
  border-radius:18px;padding:34px 36px 28px;overflow:hidden;text-align:center}
.search-kicker{font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#542C9E;margin-bottom:10px}
.search-title{font-family:'DM Sans',sans-serif;font-size:1.7rem;font-weight:300;
  color:#1A1018;letter-spacing:-.01em;line-height:1.2;margin-bottom:10px}
.search-title em{font-family:'DM Serif Display',serif;font-style:italic;
  font-weight:400;color:#542C9E}
.search-lead{max-width:480px;margin:0 auto 22px;font-size:.95rem;
  color:var(--muted);line-height:1.55}
/* Handle field + Analyse button sit together on one row so the primary action
   is never separated from the input. The field flexes to fill, the button
   hugs its label on the right. */
.search-box{display:flex;align-items:stretch;gap:13px;
  max-width:600px;margin:0 auto}
/* Instagram glyph lives INSIDE the field, left of the "@" prefix, so the input
   reads as a single integrated Instagram handle field. */
.ig-logo{flex-shrink:0;display:flex;align-items:center;line-height:0;
  padding-left:18px}
.ig-logo svg{display:block}
/* The handle field shows the IG glyph + a fixed "@" prefix so the user types
   only their username. The wrapper carries the border, focus ring and load
   pulse; the input inside is borderless. It is auto-focused on load and pulses
   twice so the user sees where to type first without having to click into it. */
.handle-field{flex:1;display:flex;align-items:center;height:70px;border-radius:10px;
  background:#FFFFFF;border:1px solid #D9D0EE;
  transition:border-color .2s,box-shadow .2s;
  animation:handle-attn 1.1s ease-out 2}
.handle-field:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(84,44,158,.18)}
.handle-at{padding:0 3px 0 10px;color:var(--hint);font-size:19px;line-height:1;
  font-family:'DM Sans',sans-serif;user-select:none;transition:color .2s}
.handle-field:focus-within .handle-at{color:var(--accent)}
/* Left padding stands in for the gap the old "@" prefix used to give, so the
   placeholder/text sits a touch right of the Instagram glyph. */
.search-box input{flex:1;min-width:0;padding:16px 23px 16px 15px;height:100%;
  background:transparent;border:none;outline:none;
  color:var(--text);font-size:19px;font-family:'DM Sans',sans-serif}
.search-box input::placeholder{color:var(--hint)}
/* Inline Analyse button on the search row: matches the field height and hugs
   its label so it sits flush beside the input. */
.analyse-inline{flex-shrink:0;padding:0 35px;height:70px;border-radius:10px;
  border:none;cursor:pointer;background:#3D1E7A;color:#EDE0FF;
  font-family:'DM Sans',sans-serif;font-size:20px;font-weight:500;
  letter-spacing:.04em;white-space:nowrap;transition:background .2s}
.analyse-inline:hover{background:#2E155C}
.analyse-inline:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:620px){
  .search-box{flex-direction:column;align-items:stretch}
  .analyse-inline{width:100%}
}
@keyframes handle-attn{
  0%,100%{box-shadow:0 0 0 3px rgba(84,44,158,.22);border-color:var(--accent)}
  50%{box-shadow:0 0 0 8px rgba(84,44,158,.07);border-color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){.handle-field{animation:none}}

/* Trust ticks under the field: short, scannable reassurances that lower the
   bar to hitting Analyse. */
.search-trust{list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.search-trust li{display:inline-flex;align-items:center;gap:7px;
  font-size:.84rem;font-weight:500;color:var(--muted)}
.search-trust-tick{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;flex-shrink:0;
  background:#EDE4F7;color:#542C9E;font-size:10px;font-weight:700}
@media(max-width:620px){
  .search-panel{padding:26px 20px 22px}
  .search-title{font-size:1.4rem}
  .search-lead{font-size:.9rem;margin-bottom:18px}
  .search-trust{gap:6px 16px}
  .search-trust li{font-size:.78rem}
}

/* Competitor input slot. Now used by the report-page Compare bar (the home-page
   competitor inputs were removed). The wrapper carries the border, focus ring
   and a fixed "@" prefix so the user types only the username, never a doubled
   "@". */
.comp-slot{position:relative;display:flex;align-items:center;min-width:0;
  height:48px;border-radius:8px;background:#FFFFFF;border:1px solid #D9D0EE;
  transition:border-color .2s,box-shadow .2s}
.comp-slot:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(84,44,158,.18)}
.comp-slot input{flex:1;width:100%;min-width:0;height:100%;
  padding:13px 18px 13px 2px;background:transparent;border:none;outline:none;
  color:var(--text);font-size:15px;font-family:'DM Sans',sans-serif}
.comp-slot input::placeholder{color:var(--hint)}

#status{text-align:center;color:var(--muted);padding:16px;display:none;font-size:.875rem}
#error-box{background:#FDF3F1;border:1px solid #EDD5D0;border-radius:10px;
  padding:14px 20px;color:var(--red);display:none;margin-top:24px;margin-bottom:24px;font-size:.875rem}
.spinner{display:inline-block;width:16px;height:16px;
  border:2px solid rgba(84,44,158,.2);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card{background:#FFFFFF;border:1px solid var(--border);
  border-radius:12px;padding:28px;margin-bottom:16px}
.card-title{font-size:.625rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:20px;
  display:flex;align-items:center;padding-left:14px;position:relative}
.card-title::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:2px;height:14px;
  background:var(--accent);border-radius:1px}
/* Leading descriptive line at the top of a card (Content Mix, Music, Length,
   Themes). Sits flush against the card's top padding (no extra gap) so the
   wording fills the space under the page header, compact and muted. */
.card-subtitle{font-size:.82rem;color:var(--muted);line-height:1.5;
  margin:0 0 16px}
/* Justify the Content Mix line so the long sentence spreads evenly edge to edge. */
#content-mix-card .card-subtitle{text-align:justify}

/* Reels Ranked table - capped height so the whole reel list fits inside the
   card and the table body scrolls vertically (sticky header keeps the
   column titles visible). Also horizontal scroll for the 10 columns on
   narrow viewports. */
.reels-table-wrap{border:1px solid var(--border);border-radius:10px;
  max-height:65vh;overflow:auto;
  scrollbar-width:thin;scrollbar-color:#CDBBE6 transparent}
.reels-table-wrap::-webkit-scrollbar{width:10px;height:10px}
.reels-table-wrap::-webkit-scrollbar-track{background:transparent}
.reels-table-wrap::-webkit-scrollbar-thumb{background:#DCD0EC;border-radius:8px;border:2px solid #fff}
.reels-table-wrap:hover::-webkit-scrollbar-thumb{background:#BCA3DC}
/* Keep the column headers visible while the body scrolls. */
.reels-table-wrap table thead th{position:sticky;top:0;z-index:6;background:#fff;
  box-shadow:inset 0 -1.5px 0 var(--border)}

/* ── Divider labels ─────────────────────────────────────────────────────────── */
.divider-label{display:flex;align-items:center;gap:10px;
  font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--hint);font-weight:600;margin:16px 0 10px}
/* The first header in a card/column has no header above it, so drop its top
   margin and let it sit flush at the top, filling the space (Posting Frequency,
   Hashtag Strategy, Format Type Performance, Hook Type Performance). */
.divider-label:first-child{margin-top:0}
.divider-label::before{content:'';width:24px;height:1px;
  background:var(--border);flex-shrink:0}
.divider-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── Profile header ─────────────────────────────────────────────────────────── */
/* visibility (not display) + reserved min-height so revealing the filled
   header after the client render doesn't shove the page down (kills CLS). */
#profile-header{visibility:hidden;min-height:176px;background:#FFFFFF;
  border:1px solid var(--border);border-radius:12px;padding:24px 28px;margin-bottom:16px}
#profile-header .pname{font-size:1.3rem;font-weight:600;color:var(--text);line-height:1.3}
#profile-header .pfoll{color:var(--muted);font-size:.875rem;margin-top:4px}
#profile-header .pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
@media(max-width:600px){ #profile-header .pstats{grid-template-columns:repeat(2,1fr)}}
.stat-box{text-align:center}
.stat-box .val{font-size:1.3rem;font-weight:700;color:var(--accent)}
.stat-box .lbl{font-size:.72rem;color:var(--muted);margin-top:2px}

/* ── Benchmark row ──────────────────────────────────────────────────────────── */
/* Reserve the grid height so filling the two cards in doesn't nudge the rest
   of the card (keeps cumulative layout shift down). */
/* Card head: title left, "View top reel" pill right, on one balanced row. The
   title's own bottom margin is moved onto the head so the row stays tight. */
.bench-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:20px}
.bench-head .card-title{margin-bottom:0}

/* Generic card head: title left, time-window dropdown right, on one balanced
   row. The canonical placement for the report's Time-window control - every
   time-scoped card carries its own dropdown here, so it reads consistently
   site-wide (mirrors the .bench-head treatment). */
.card-window-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-window-head .card-title{margin-bottom:0}
/* Solo variant: a card whose head carries ONLY the Time-window dropdown (no
   title beside it), pinned to the card's top-right as a quiet toolbar. Used by
   every time-scoped page now the dropdown lives inside the first card instead of
   floating in the page header. Negative top margin pulls it level with the
   card's top padding so it doesn't add a tall empty band above the content. */
.card-window-head--solo{justify-content:flex-end;margin-top:-6px}
.card-window-head--solo:empty{display:none;margin:0}
/* Below-text variant: the head sits UNDER the card's intro line/subtitle (not as
   the card's first child), so the reader sees what the card is before the scope
   control. Cancels the --solo pull-up and adds normal breathing room below; the
   dropdown stays right-aligned (inherits --solo's flex-end). Defined after --solo
   so it wins the margin-top tie. */
.card-window-head--below{margin-top:0;margin-bottom:14px}
/* Inline variant: the card's intro line/subtitle and the Time-window dropdown
   share ONE row - the intro text leads on the left (grows and wraps internally),
   the dropdown rides right-aligned and never shrinks, top-aligned with the first
   line of text. The canonical treatment for time-scoped cards that carry a
   descriptive lead line (Top Topics, Content Mix, Music, Length, Themes,
   Opportunities). Cancels the --solo pull-up. */
.card-window-head--intro{align-items:flex-start;flex-wrap:nowrap;gap:14px;
  margin-top:0;margin-bottom:14px}
.card-window-head--intro > :first-child{flex:1 1 auto;min-width:0;margin-bottom:0}
.card-window-head--intro .report-window{flex-shrink:0}

/* ── Hero verdict: the report's opening headline ─────────────────────────────
   A 0-100 composite score in a conic-gradient ring, a grade word and one
   personalised verdict line. The ring fills via the --bh-deg custom property
   (animated by JS in step with the count-up). */
.bench-hero{display:flex;align-items:center;gap:22px;padding:20px 22px;
  background:linear-gradient(135deg,#FBF8FF,var(--surface2));
  border:1px solid var(--border);border-radius:12px;
  animation:benchReveal .5s ease both}
@media(max-width:560px){.bench-hero{flex-direction:column;text-align:center;gap:14px}}
.bh-ring{--bh-deg:0deg;width:92px;height:92px;flex-shrink:0;border-radius:50%;
  background:conic-gradient(currentColor var(--bh-deg),var(--border) 0);
  display:flex;align-items:center;justify-content:center;
  transition:background .9s ease}
.bh-ring-inner{width:74px;height:74px;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.bh-score{font-size:1.7rem;font-weight:800;color:var(--text);line-height:1}
.bh-outof{font-size:.62rem;font-weight:600;color:var(--muted);margin-top:2px}
/* Gap-led hero: the headroom number leads (gold, large), its meaning sits under
   it, and the explanation reads lighter beneath. The composite score ring is
   demoted to a small side stat ("Account health") so it informs without
   crowning. */
.bh-gap{flex:1;min-width:0;order:1}
.bh-gap-head{font-size:2.8rem;font-weight:800;line-height:1;letter-spacing:-.02em;margin-bottom:3px}
.bh-gap-label{font-size:.95rem;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:9px}
.bh-gap-sub{font-size:.86rem;line-height:1.55;color:var(--muted)}
.bh-gap-sub strong{color:var(--text);font-weight:700}
.bh-mini{order:2;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.bh-mini-cap{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.bh-mini .bh-ring{width:66px;height:66px}
.bh-mini .bh-ring-inner{width:52px;height:52px}
.bh-mini .bh-score{font-size:1.2rem}
.bh-mini .bh-outof{font-size:.55rem}
.bh-grade{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
@media(max-width:560px){.bh-gap-head{font-size:2.4rem}}

.bench-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;min-height:104px}
@media(max-width:900px){.bench-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.bench-grid{grid-template-columns:1fr}}
/* Centre each stat vertically so the cards read as an even, balanced row
   regardless of how many status lines each one carries. Stagger their reveal
   so the row "deals out" left to right. */
.bench-card{background:var(--surface2);border-radius:10px;padding:18px;
  display:flex;flex-direction:column;justify-content:center;
  animation:benchReveal .5s ease both}
.bench-card:nth-child(1){animation-delay:.04s}
.bench-card:nth-child(2){animation-delay:.10s}
.bench-card:nth-child(3){animation-delay:.16s}
.bench-card:nth-child(4){animation-delay:.22s}
.bench-card .bc-label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;margin-bottom:8px}
.bench-card .bc-val{font-size:1.75rem;font-weight:700;margin-bottom:4px}
.bench-card .bc-status{font-size:.8rem;line-height:1.4}
.color-gold{color:var(--accent)}
.color-green{color:var(--green)}
.color-yellow{color:var(--orange)}
.color-red{color:var(--red)}
.color-muted{color:var(--muted)}

@keyframes benchReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bench-hero,.bench-card{animation:none}
  .bh-ring{transition:none}
}

/* ── "What your breakout reels share" ────────────────────────────────────────
   The traits the 2x+ reels hold in common. */
.bo-lede{font-size:.95rem;color:var(--text);line-height:1.5;margin-bottom:14px}
.bo-lede strong{color:var(--accent);font-weight:800}
.bo-threads{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.bo-thread{display:flex;align-items:baseline;gap:10px 18px;flex-wrap:wrap;justify-content:space-between;
  padding:10px 14px;background:var(--surface2);border-radius:9px}
.bo-dim{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;flex:0 0 112px;white-space:nowrap}
.bo-val{font-size:.95rem;font-weight:700;color:var(--text);flex:0 1 auto;min-width:0}
.bo-share{font-size:.82rem;color:var(--muted);white-space:nowrap}
.bo-vs{color:var(--accent);font-weight:600;margin-left:4px}
.bo-pills{margin-bottom:14px}
.bo-pills-lbl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;margin-bottom:10px}
.bo-reels{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:600px){.bo-reels{grid-template-columns:1fr}}
.bo-reel{display:flex;flex-direction:column;gap:7px;
  padding:12px 14px;background:var(--surface2);border-radius:10px}
.bo-reel-subj{font-size:.86rem;font-weight:600;color:var(--text);line-height:1.35}
.bo-reel-tags{display:flex;flex-wrap:wrap;gap:5px}
.bo-reel-tag{font-size:.67rem;font-weight:600;color:var(--accent);
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:2px 9px}
.bo-reel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:1px}
.bo-reel-views{font-size:.82rem;font-weight:700;color:var(--text);white-space:nowrap}
.bo-foot{font-size:.83rem;color:var(--muted);line-height:1.5}
@media(max-width:560px){.bo-dim{flex-basis:100%}}

/* ── Pattern tables ─────────────────────────────────────────────────────────── */
.patterns-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.patterns-grid{grid-template-columns:1fr}}
.pattern-table{width:100%;border-collapse:collapse;font-size:.84rem}
.pattern-table th{text-align:left;padding:8px 10px;color:var(--muted);
  border-bottom:1.5px solid var(--border);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.05em}
.pattern-table td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.pattern-table tr:last-child td{border-bottom:none}
.pattern-table tr:hover td{background:var(--surface2)}
/* Content Themes table: fixed layout so the seven columns space evenly instead
   of the Theme name eating the row and the numeric columns bunching on the
   right. Theme gets the wide first column; the six data columns split the rest. */
#category-table{table-layout:fixed}
#category-table th,#category-table td{width:12%;text-align:left}
#category-table th:first-child,#category-table td:first-child{width:22%}
#category-table th:last-child,#category-table td:last-child{width:18%}
#category-table .bar-wrap{gap:6px}
#category-table .bar{max-width:42px}
.bar-wrap{display:flex;align-items:center;gap:8px}
.bar{height:5px;border-radius:2.5px;background:var(--accent);flex-shrink:0}
.bar-val{font-size:.8rem;color:var(--gold);font-weight:600;white-space:nowrap}
.low-sample-note{font-size:.78rem;color:var(--muted);font-style:italic;white-space:nowrap}
.high-potential-note{display:inline-block;max-width:240px;font-size:.74rem;line-height:1.4;
  color:var(--accent);font-weight:600;white-space:normal}
.pt-sub{font-size:.72rem;color:var(--muted)}

/* ── Posting & Hashtags ─────────────────────────────────────────────────────── */
.ci-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch}
@media(max-width:640px){.ci-grid{grid-template-columns:minmax(0,1fr);gap:20px}}
/* min-width:0 lets each column shrink below its content's min-content (the
   default `auto` minimum otherwise blows the grid track out to ~358px on a
   narrow phone, pushing the bars + values off the right edge of the card). */
.ci-col{display:flex;flex-direction:column;min-width:0}
.ci-section{margin-bottom:0}
.ci-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;margin-bottom:10px}
.day-list{display:flex;flex-direction:column;gap:9px}
/* The value column is a FIXED width (not `auto`) so every bar track ends at the
   same x and every number right-aligns to the same edge - rows that carry the
   "open top reel" arrow no longer shift the bar + number left of the rows that
   don't. The number right-aligns in .dv-num; the arrow lives in its own fixed
   .dv-arrow slot that is always reserved (empty on rows with no top reel), so
   the numbers stay in one clean column. */
.day-row{display:grid;grid-template-columns:88px 1fr 104px;align-items:center;gap:12px;
  font-size:.92rem;padding:4px 0}
.day-name{color:var(--text);font-weight:500;white-space:nowrap}
.day-bar-track{position:relative;height:8px;background:#F0E8F8;border-radius:4px;overflow:hidden;width:100%}
.day-bar{position:absolute;left:0;top:0;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#C4A4E8,#542C9E)}
.day-bar.day-bar-worst{background:linear-gradient(90deg,#E89A9A,#C4756A)}
.day-val{font-size:.88rem;color:#542C9E;font-weight:700;white-space:nowrap;
  display:flex;align-items:center;justify-content:flex-end;gap:6px}
.day-val .dv-num{text-align:right}
.day-val .dv-arrow{flex:0 0 auto;display:inline-flex;justify-content:flex-end;align-items:center}
/* minmax(0,1fr) (not the default 1fr = minmax(auto,1fr)) so a long unbreakable
   chip - a tag like "#fitnessjourney" plus its "29.0K (×6) -4%" value - can't
   force its track wider than half the card and spill the right column off the
   card edge. The chip shrinks to fit its track instead. */
.hash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.hash-chip{background:#FAF7FD;border:1px solid #E2D8EE;border-radius:8px;
  padding:8px 12px;font-size:.84rem;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;min-width:0;gap:4px 8px;
  transition:background .15s ease,border-color .15s ease}
.hash-chip:hover{background:#F4EFF9;border-color:#C4A4E8}
/* min-width:0 + break lets a long single-token hashtag wrap inside its chip
   rather than push the chip (and the whole grid) past the card. */
.hash-chip .ht{color:#542C9E;font-weight:600;min-width:0;overflow-wrap:anywhere}
.hash-chip .hv{color:#7B5E9A;font-size:.76rem;font-weight:600}
.hash-chip.hash-cluster{grid-column:1/-1;flex-direction:column;align-items:flex-start;gap:4px}
.hash-cluster-tags{font-size:.72rem;color:var(--muted);word-break:break-word;line-height:1.5}
/* Hashtag Intelligence (Compare page): a three-column overlap (Venn laid flat) -
   tags only you use, tags you both use, tags only they use. The spatial split
   makes "who uses what" obvious without table-like rows to parse. */
.htx-vs-handle{font-size:.74rem;font-weight:600;color:#7B5E9A;margin-left:8px}
.hto-summary{font-size:.76rem;color:var(--muted);margin:6px 0 12px}
.hto-summary strong{color:var(--text);font-weight:700}
.hto-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
@media (max-width:720px){.hto-cols{grid-template-columns:1fr}}
.hto-col{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.hto-col-hdr{padding:9px 12px 1px;font-size:.82rem;font-weight:700;color:#3D1E7A;background:#FAF7FD}
.hto-col-sub{padding:0 12px 9px;font-size:.66rem;color:var(--muted);background:#FAF7FD;border-bottom:1px solid #EFE7F8}
.hto-col-them .hto-col-hdr,.hto-col-them .hto-col-sub{background:#F3EEFA}
.hto-items{display:flex;flex-direction:column}
.hto-card{border-top:1px solid #F2ECF8}
.hto-items .hto-card:first-child{border-top:none}
.hto-tag{font-weight:600;color:#542C9E;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hto-card{display:flex;flex-direction:column;gap:3px;padding:9px 12px}
.hto-vsrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.76rem}
.hto-vs-lbl{color:var(--muted);text-transform:uppercase;font-size:.6rem;letter-spacing:.04em}
.hto-vs-num{font-weight:700;color:var(--text)}
.hto-vs-num.hto-win{color:var(--green)}
.hto-lead{align-self:flex-start;margin-top:3px;font-size:.62rem;font-weight:700;padding:2px 9px;border-radius:20px;letter-spacing:.02em}
.hto-lead-you{background:#E8F5EE;color:#1A5C3A}
.hto-lead-them{background:#FDF2E0;color:#7A4A0A}
.hto-lead-tie{background:var(--surface2);color:var(--muted)}
.hto-num-big{font-size:.84rem;font-weight:700;color:var(--text)}
.hto-num-big span{font-size:.66rem;font-weight:500;color:var(--muted)}
/* All three columns share this card shape: hashtag on the left, the View reel
   pill pinned to the top-right, with the reach (or you/them) rows sitting below.
   Roomier gap + padding so the stacked cards breathe evenly. */
.hto-card-op,.hto-card-sh{gap:7px;padding:11px 12px}
.hto-op-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:24px}
.hto-op-top .hto-tag{flex:1 1 auto;min-width:0}
.hto-op-top .mix-view-cta{flex-shrink:0}
.hto-empty{padding:12px;font-size:.72rem;color:var(--muted);line-height:1.45}
.freq-insight{background:linear-gradient(135deg,#F4EFF9,#FAF7FD);border:1px solid #DDD0EE;
  border-radius:10px;padding:14px 16px;
  font-size:.92rem;line-height:1.55;color:var(--text);margin-bottom:14px}
.freq-headline{font-weight:700;color:#3D1E7A;font-size:1.05rem;margin-bottom:4px}
.freq-verdict{font-size:.88rem;color:var(--muted);line-height:1.5}

/* Best window callout: fills the white space under Best Hours with a
   synthesized "best day × best hour" recommendation. */
.ci-best-window{position:relative;margin-top:14px;background:#FAF7FD;border:1px solid #E2D8EE;
  border-radius:10px;padding:14px 16px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:14px}
.ci-best-window-main{min-width:0;padding-right:96px}
.ci-best-window .reel-pill{position:absolute;top:14px;right:16px;margin-left:0;flex-shrink:0;
  font-size:9px;font-weight:700;padding:3px 8px}
.ci-best-window-label{font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#7B5E9A;margin-bottom:6px}
.ci-best-window-line{font-size:.95rem;color:var(--text);line-height:1.55}
.ci-best-window-line strong{color:#3D1E7A;font-weight:700}
.ci-best-window-foot{margin-top:6px;font-size:.8rem;color:var(--muted);line-height:1.5}
.ci-best-window-driver{margin-top:6px;font-size:.8rem;color:var(--muted);line-height:1.5}
.ci-best-window-driver a{color:#542C9E;font-weight:700;text-decoration:none;border-bottom:1px solid #C4A4E8}
.ci-best-window-driver a:hover{border-bottom-color:#542C9E}
/* "Open the top reel behind this slot" pill sitting next to a best-day /
   best-hour average. It is the site-standard purple reel pill (IG glyph + arrow
   chip via the global reel-icon transform); the views number stays to its left
   in .dv-num. The pill's default margin-left is dropped - the .day-val flex gap
   already spaces it off the number - and its padding is trimmed a touch so the
   compact chip sits neatly inside the value column. */
.day-val .reel-peek-pill{margin-left:0;padding:4px 9px;flex-shrink:0}

.kv-row{display:flex;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid #EBE0F5;font-size:.92rem}
.kv-row:last-child{border-bottom:none}
.kv-row .k{color:var(--muted)}
.kv-row .v{color:#3D1E7A;font-weight:700}
.kv-row .vg{color:var(--green);font-weight:600}
.kv-row .vr{color:var(--red);font-weight:600}

/* ── Reels table ────────────────────────────────────────────────────────────── */
.reels-table{width:100%;border-collapse:collapse;font-size:.85rem}
.reels-table th{text-align:left;padding:10px;color:var(--muted);
  border-bottom:1.5px solid var(--border);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.05em}
.reels-table td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.reels-table tr:last-child td{border-bottom:none}
.reels-table tr:hover td{background:var(--surface2)}
.medal-cell{font-size:1.1rem;text-align:center;width:36px}
.views-cell{font-weight:700;color:var(--gold);white-space:nowrap}
.likes-cell{color:var(--muted);white-space:nowrap}
.eng-cell{color:var(--blue);font-size:.8rem;white-space:nowrap}
/* View reel: action column holding the purple pill, centred and vertically
   middled so it sits level with the row's hook regardless of caption height.
   The header cell and the body cell share the same centred min-width so the
   sticky header always spans (covers) the full width of the pill below it. */
.reels-table th:last-child{text-align:center;min-width:116px}
.reels-view-cell{text-align:center;white-space:nowrap;vertical-align:middle;min-width:116px}
.caption-text{color:var(--text);line-height:1.4}
.reel-link{color:var(--accent);text-decoration:none;font-size:.76rem}
.reel-link:hover{text-decoration:underline}
a.caption-link{color:var(--text);text-decoration:none;display:block;line-height:1.4}
a.caption-link:hover{color:var(--accent)}
.badge{display:inline-block;border-radius:4px;padding:2px 7px;
  font-size:.7rem;white-space:nowrap;font-weight:500}
.badge-format{background:#EDE0FA;border:1px solid #C4A4E8;color:#542C9E}
.badge-theme{background:#F5E8D8;border:1px solid #D4B98C;color:#6B4A1F}
.badge-hook{background:#E2EBF5;border:1px solid #8FB1D9;color:#1F3D6B}
.badge-trigger{background:#E0F0E8;border:1px solid #7BBDA0;color:#1A5C3A}
.badge-cta{background:#EDE0FA;border:1px solid #C4A4E8;color:#3D1E7A}
.badge-music{background:#F5F0E0;border:1px solid #D4C890;color:#5A4A00}
.na{color:var(--hint)}

/* ── Insight grid ───────────────────────────────────────────────────────────── */
.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.insight-grid{grid-template-columns:1fr}}
.insight-col h3{font-size:.8rem;font-weight:700;margin-bottom:12px}
.works-title{color:var(--green)}
.fails-title{color:var(--red)}


/* ── Niche Intelligence ─────────────────────────────────────────────────────── */
.niche-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
@media(max-width:640px){.niche-grid{grid-template-columns:1fr}}
.flag-item{background:#FDF3F1;border:1px solid #EDD5D0;border-radius:10px;
  padding:12px 14px;margin-bottom:8px;font-size:.84rem}
.flag-item .flag-type{font-weight:700;color:var(--orange);
  display:flex;align-items:center;gap:6px;margin-bottom:4px}
.flag-item .flag-count{color:var(--muted);font-size:.76rem;margin-bottom:4px}
.flag-item .flag-guidance{color:#7A4A0A;font-size:.78rem;line-height:1.5}
.journey-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.journey-box{background:var(--surface2);border-radius:8px;padding:12px;text-align:center}
.journey-box .jval{font-size:1.2rem;font-weight:700;color:var(--gold)}
.journey-box .jlbl{font-size:.74rem;color:var(--muted);margin-top:4px}
.journey-box .jcount{font-size:.72rem;color:var(--hint)}
.winner-tag{background:#E0F0E8;border:1px solid #7BBDA0;color:var(--green);
  font-size:.7rem;padding:2px 8px;border-radius:4px;font-weight:600}
.seasonal-list{display:flex;flex-direction:column;gap:6px}
/* These report cards used to cap at ~one screen and scroll inside. That nested
   scrollbar showed for only moderately long content, so the cards now flow at
   their natural height and the page scrolls as one - a scrollbar appears only
   when the whole page is really long. (.aq-scroll covers Comments, Top Topics,
   Posting & Hashtags, Format & Hooks, Strategy Summary, What's Working, etc.) */
.seasonal-scroll{padding-right:6px}
.aq-scroll{padding-right:6px}
.seasonal-row{display:flex;justify-content:space-between;align-items:center;
  background:var(--surface2);border-radius:8px;padding:10px 14px;font-size:.84rem}
.seasonal-row .sr-period{color:var(--text)}
.seasonal-row .sr-val{color:var(--gold);font-weight:700;font-size:.8rem}
.seasonal-row .sr-cnt{color:var(--muted);font-size:.74rem}
/* Low-coverage / untapped windows render muted so they don't compete visually
   with high-performing ones, but still read as opportunities (not failures). */
.seasonal-row.sr-state-untapped,
.seasonal-row.sr-state-low_coverage{background:#FAF7FD;border:1px dashed #DDD0EE}
.seasonal-row.sr-state-untapped .sr-period,
.seasonal-row.sr-state-low_coverage .sr-period{color:var(--muted)}
.sr-untapped,.sr-low-coverage{color:#7B5E9A;font-style:italic;font-size:.78rem}
.sr-opportunity-note{margin-top:6px;font-size:.76rem;color:#6B5A7E;
  background:#F4EFF9;border:1px solid #DDD0EE;padding:6px 10px;border-radius:8px}
.sr-overall-note{margin-top:8px;padding:8px 12px;font-size:.78rem;color:var(--muted);
  background:#FAF7FD;border:1px dashed #DDD0EE;border-radius:8px;font-style:italic}
/* Shown inside a Worked/Underperformed panel when the window has only one reel,
   so a lone example reads as "you posted once here", not a missing second row. */
.sr-single-note{margin-top:8px;padding:7px 11px;font-size:.76rem;line-height:1.45;
  color:#6B5A7E;background:#FAF7FD;border:1px dashed #DDD0EE;border-radius:8px}

/* Best / worst CTAs at the bottom of each seasonal window. Single-click
   shortcuts to the most-viewed and least-viewed reel in that period. */
.sr-cta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sr-cta{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border-radius:8px;font-size:.78rem;font-weight:500;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;
  transition:background .15s,transform .1s,box-shadow .15s}
.sr-cta-best{background:#3D1E7A;color:#FAF8FF;border:1px solid #3D1E7A}
.sr-cta-best:hover{background:#2E155C;transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(60,21,88,.22)}
.sr-cta-worst{background:#FFFFFF;color:#B23B30;border:1px solid #EDD5D0}
.sr-cta-worst:hover{background:#FDF3F1;border-color:#C4756A;
  transform:translateY(-1px);box-shadow:0 2px 6px rgba(196,117,106,.18)}
.seasonal-action{margin-top:14px;padding:16px 18px;border-radius:10px;
  line-height:1.75;font-size:.84rem}
.seasonal-action.sa-urgent{background:#FDF5E0;border:2px solid #D4A830}
.seasonal-action.sa-normal{background:var(--surface2);border:1px dashed var(--border)}
.sa-line1{font-weight:700;color:#7B4A00;margin-bottom:6px}
.sa-line2{color:var(--text);margin-bottom:4px}
.sa-line3{color:var(--green);font-weight:600;margin-bottom:4px}
.sa-line4{color:var(--muted);font-size:.79rem}
.sa-callout{color:var(--muted);font-style:italic;font-size:.81rem}
/* Seasonal reel CTA: descriptive label stacked above the site-standard purple
   Instagram-icon + arrow pill (the words stay as text, the pill is the click
   target), so it matches every other reel link across the report. */
.sa-reel-cta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:12px}
.sa-reel-cta-label{font-size:.82rem;font-weight:700;color:var(--accent)}
.sa-normal .sa-reel-cta{margin-top:10px}

/* ── Business Intelligence ──────────────────────────────────────────────────── */
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
@media(max-width:600px){.biz-grid{grid-template-columns:1fr}}
.biz-card{background:var(--surface2);border-radius:10px;padding:16px;text-align:center}
.biz-card .bval{font-size:1.5rem;font-weight:700;color:var(--accent);margin-bottom:4px}
.biz-card .blbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.biz-card .bsub{font-size:.74rem;color:var(--muted);margin-top:8px;line-height:1.4}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
@media(max-width:560px){.offer-grid{grid-template-columns:1fr}}
.offer-box{background:var(--surface2);border-radius:10px;padding:14px;text-align:center}
.offer-box .oval{font-size:1.2rem;font-weight:700;margin-bottom:4px}
.offer-box .olbl{font-size:.72rem;color:var(--muted)}
.offer-box .osub{font-size:.76rem;color:var(--hint);margin-top:4px}
.winner-box{background:var(--surface2);border:1px solid;border-radius:10px;
  padding:14px;text-align:center;margin-bottom:20px}
.dm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dm-grid.cmp-grid{grid-template-columns:1fr 1fr}
@media(max-width:560px){.dm-grid{grid-template-columns:1fr}}
/* Winning box in the No-CTA vs DM-CTA comparison (reuses .offer-box) */
.offer-box.cmp-win{border:1px solid var(--gold)}

/* ── Competitor table ───────────────────────────────────────────────────────── */
/* Horizontal-scroll container for the 10-column Account Health table. Gives
   mobile a visible thin scrollbar + momentum scrolling instead of clipping. */
.comp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:#DCD0EC transparent}
.comp-table-wrap::-webkit-scrollbar{height:10px}
.comp-table-wrap::-webkit-scrollbar-track{background:transparent}
.comp-table-wrap::-webkit-scrollbar-thumb{background:#DCD0EC;border-radius:8px;border:2px solid #fff}
.comp-table-wrap:hover::-webkit-scrollbar-thumb{background:#BCA3DC}
/* min-width keeps the 10 columns legible: on a narrow viewport the fixed layout
   would otherwise squeeze every column to a few px and overflow the nowrap
   numbers/badges INSIDE their cells. Holding a floor width instead lets the
   parent .overflow-x:auto wrapper scroll horizontally, like the Reels table. */
.comp-table{width:100%;min-width:840px;border-collapse:collapse;font-size:.72rem;table-layout:fixed}
.comp-table th{text-align:left;padding:8px 6px;color:var(--muted);
  border-bottom:1.5px solid var(--border);font-size:.66rem;
  text-transform:uppercase;letter-spacing:.04em}
.comp-table td{padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:middle;
  word-break:break-word}
.comp-table tr:last-child td{border-bottom:none}
.comp-table tr:hover td{background:var(--surface2)}
.comp-table .you{color:var(--accent);font-weight:700}
.comp-table th:nth-child(1),.comp-table td:nth-child(1){width:5%}    /* Rank */
.comp-table th:nth-child(2),.comp-table td:nth-child(2){width:16%}   /* Account */
.comp-table th:nth-child(3),.comp-table td:nth-child(3){width:9%}    /* Followers */
.comp-table th:nth-child(4),.comp-table td:nth-child(4){width:8%}    /* Reels/Mo */
.comp-table th:nth-child(5),.comp-table td:nth-child(5){width:9%}    /* Avg Views */
.comp-table th:nth-child(6),.comp-table td:nth-child(6){width:9%}    /* Views/Follower */
.comp-table th:nth-child(7),.comp-table td:nth-child(7){width:8%}    /* Best Reel */
.comp-table th:nth-child(8),.comp-table td:nth-child(8){width:7%}    /* Eng Rate% */
.comp-table th:nth-child(9),.comp-table td:nth-child(9){width:10%}   /* Top Format */
.comp-table th:nth-child(10),.comp-table td:nth-child(10){width:9%}  /* Standing */
.comp-table th:nth-child(11),.comp-table td:nth-child(11){width:10%} /* View Reel */
.comp-table .badge{white-space:normal}
/* "How to close it" tip under a metric where the user trails the competitor */
.mi-gap-tip{font-size:.8rem;color:#3D2E4D;line-height:1.5;background:#FDF3F1;
  border:1px solid #EDD5D0;border-radius:8px;padding:8px 12px;margin:0}
.mi-gap-tip strong{color:#C4756A}
.comp-rank{font-size:.82rem;font-weight:700;text-align:center}

/* ── Competitor Intelligence: profile block - mirrors the user's top header ──── */
/* Identity on the left, the four stat cards pushed to the right (same heading
   layout as the Analyse act's identity row). Wraps the stats under the name on
   narrow screens. */
.cmp-profile{background:#FFFFFF;border:1px solid var(--border);
  border-radius:12px;padding:24px 28px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px 28px;flex-wrap:wrap}
.cmp-profile-id{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 auto}
/* The avatar and the Instagram-handle link stack vertically: photo on top, the
   tiny IG glyph + username link directly below it. */
.cmp-avatar-col{display:flex;flex-direction:column;align-items:center;gap:6px;
  flex-shrink:0;min-width:0}
.cmp-avatar{width:48px;height:48px;border-radius:50%;background:#F4EFF9;border:2px solid #C4A4E8;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:#3D1E7A;font-weight:600;font-size:1.1rem}
.cmp-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-profile-meta{min-width:0}
.cmp-name{font-size:1.3rem;font-weight:600;color:var(--text);line-height:1.3}
/* Follower count + change-competitor link share one row under the name. */
.cmp-followers-row{display:flex;align-items:center;gap:12px;margin-top:4px;
  flex-wrap:wrap}
/* "Change competitor" link: active = a purple text link; locked (one pick per
   month already spent) = muted, non-interactive, captioned with the unlock date. */
.cmp-edit-link{font-size:11px;font-weight:600;color:#7A45E8;text-decoration:none;
  white-space:nowrap}
.cmp-edit-link:hover{text-decoration:underline}
/* Locked competitor: the link is now a pay-again upsell (track another rival),
   so it stays an active accent link, not a greyed-out disabled state. */
.cmp-edit-link.is-locked{color:#7A45E8;font-weight:600;cursor:pointer;
  text-decoration:none}
.cmp-followers{font-size:.9rem;color:var(--accent);font-weight:600}
.cmp-stats{display:grid;grid-template-columns:repeat(4,minmax(108px,128px));
  gap:12px;flex:0 1 auto}
@media(max-width:760px){ .cmp-stats{width:100%;grid-template-columns:repeat(4,1fr)} }
@media(max-width:600px){ .cmp-stats{grid-template-columns:repeat(2,1fr)} }

/* ── Threat: priority action card + fairness note ──────────────────────────── */
.prio-card{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#FAF7FD 100%);
  border:1px solid #DDD0EE;border-radius:12px;padding:18px 20px 16px;
  box-shadow:0 1px 0 rgba(84,44,158,.04)}

.prio-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.prio-target{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#542C9E;
  background:#F4EFF9;border:1px solid #DDD0EE;border-radius:14px;padding:3px 10px}
.prio-urgency{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:3px 9px;border-radius:14px;color:#fff}
.prio-urgency-high   {background:#C4756A}
.prio-urgency-medium {background:#EF9F27}
.prio-urgency-low    {background:#1D9E75}
.prio-threat{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:3px 9px;border-radius:14px}
.prio-threat-high  {background:#FDF3F1;border:1px solid #EDD5D0;color:#9A3A2E}
.prio-threat-medium{background:#FDF2E0;border:1px solid #E8C870;color:#7A4A0A}
.prio-threat-low   {background:#E8F5EE;border:1px solid #B5D9C5;color:#1A5C3A}

.prio-headline{font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:8px}
.prio-detail{font-size:.86rem;color:var(--muted);line-height:1.6;margin-bottom:14px}

.prio-timeline-when{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:#542C9E;background:#F4EFF9;border-radius:10px;padding:3px 10px;margin-bottom:10px}
.prio-timeline{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.prio-step{display:flex;gap:12px;align-items:flex-start;background:#FFFFFF;border:1px solid #EBE0F5;
  border-radius:8px;padding:10px 12px}
.prio-step-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:#542C9E;color:#FAF8FF;
  font-size:.75rem;font-weight:700;margin-top:1px}
.prio-step-content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.prio-step-when{align-self:flex-start;font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:#542C9E;background:#F4EFF9;border-radius:10px;padding:2px 8px}
.prio-step-body{font-size:.84rem;color:var(--text);line-height:1.55}

.prio-verdict{font-size:.82rem;color:#542C9E;font-style:italic;line-height:1.55;
  padding:8px 12px;background:#F4EFF9;border:1px solid #DDD0EE;border-radius:8px;
  margin-bottom:10px}
.prio-why{background:#FAF7FD;border:1px solid #E2D8EE;border-radius:8px;padding:10px 14px}
.prio-why-lbl{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:#7B5E9A;margin-bottom:4px}
.prio-why p{margin:0;font-size:.82rem;color:var(--text);line-height:1.6}

/* Priority Action - target goals (what winning looks like) */
.prio-goals{margin-bottom:14px}
.prio-goals-lbl,.prio-model-lbl{display:block;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:#7B5E9A;margin-bottom:8px}
.prio-goals-row{display:flex;flex-wrap:wrap;gap:8px}
.prio-goal{display:inline-flex;flex-direction:column;gap:3px;background:#FFFFFF;
  border:1px solid #DDD0EE;border-radius:10px;padding:8px 12px}
.prio-goal-metric{font-size:.68rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.prio-goal-vals{display:inline-flex;align-items:baseline;gap:6px}
.prio-goal-you{font-size:.92rem;font-weight:700;color:var(--muted)}
.prio-goal-arrow{color:#A98AD0;font-weight:700}
.prio-goal-target{font-size:.92rem;font-weight:700;color:#1D9E75}

/* Priority Action - expected payoff (data-only reach gap) */
.prio-payoff{display:flex;flex-direction:column;gap:4px;background:#E8F5EE;
  border:1px solid #B5D9C5;border-radius:8px;padding:10px 14px;margin-bottom:14px}
.prio-payoff-fig{font-size:1rem;font-weight:700;color:#1A5C3A}
.prio-payoff-note{font-size:.8rem;color:#2C6B49;line-height:1.55}

/* Priority Action - model-this-reel tile */
.prio-model{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:#FAF7FD;
  border:1px solid #E2D8EE;border-radius:8px;padding:12px 14px;margin-bottom:10px}
.prio-model-text{flex:1;min-width:200px}
.prio-model-text p{margin:4px 0 0;font-size:.82rem;color:var(--text);line-height:1.55}

.cmp-urgency{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:2px 8px;border-radius:20px;margin-left:8px}

.gap-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gap-chip{background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  padding:4px 10px;font-size:.78rem;color:var(--blue)}
.gap-chip span{color:var(--muted);font-size:.72rem}

/* ── Replication briefs ─────────────────────────────────────────────────────── */
.briefs-grid{display:grid;grid-template-columns:1fr;gap:16px}
.brief-card{background:linear-gradient(135deg,#F4EFF9,#EDE0FA);
  border:1px solid #C4A4E8;border-radius:12px;padding:24px}
.brief-title{font-size:.9375rem;font-weight:600;color:var(--accent);margin-bottom:4px}
.brief-stats{color:var(--muted);font-size:.8rem;margin-bottom:16px}
.brief-section{margin-bottom:14px}
.brief-section label{display:block;font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:5px;font-weight:600}
.brief-section p{font-size:.875rem;color:var(--text);line-height:1.6}
.brief-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:560px){.brief-row{grid-template-columns:1fr}}
.caption-formula{background:#FFFFFF;border:1px solid var(--border);
  padding:10px 14px;border-radius:8px;font-size:.875rem;
  color:var(--text);font-style:italic;margin-bottom:14px}
.brief-footer{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.brief-footer a.reel-pill{margin-left:auto}
/* right-aligned "View reel" action used across competitor sections */
.sec-reel-action{display:flex;justify-content:flex-end;margin-top:10px}
.comp-reel-hook--row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.comp-reel-hook--row .comp-reel-hook-text{flex:1;min-width:0}
.comp-reel-hook--row a.reel-pill{flex-shrink:0}
.brief-badge{display:inline-block;border-radius:5px;padding:3px 10px;
  font-size:.75rem;font-weight:500}
.brief-badge-trigger{background:#E0F0E8;border:1px solid #7BBDA0;color:#1A5C3A}
.brief-badge-cta{background:#EDE0FA;border:1px solid #C4A4E8;color:#3D1E7A}
.brief-example-link{color:var(--accent);font-size:.8rem;text-decoration:none;margin-left:auto}
.brief-example-link:hover{text-decoration:underline}

/* ── Reels controls ─────────────────────────────────────────────────────────── */
.reels-ctrl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.reels-ctrl label{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:5px}
.reels-ctrl select{font-size:.78rem;border:1px solid var(--border);border-radius:5px;
  padding:4px 8px;background:#fff;color:var(--text);font-family:'DM Sans',sans-serif;
  cursor:pointer;outline:none}
.reels-ctrl select:focus{border-color:var(--accent)}
#reels-count{font-size:.75rem;color:var(--hint);margin-bottom:8px}

/* ── Hook cell truncation ───────────────────────────────────────────────────── */
.hook-cell{max-width:0;vertical-align:top}
/* Flex row so both links are >=24px tall tap targets (target-size). The hook
   link flexes to fill the width and ellipsises. The explicit open affordance now
   lives in the dedicated "View reel" column, so the hook cell is just the link. */
.hook-inner{max-width:260px;display:flex;align-items:center;gap:8px}
a.reel-hook-link{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:#542C9E;text-decoration:underline;font-weight:500;
  min-height:24px;line-height:24px}
a.reel-hook-link:hover{color:var(--plum)}
.caption-sub{color:#7B5E9A;font-size:.6875rem;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.reels-table tr:hover td{background:#FAF8FF}

/* ── Insight reel example rows ──────────────────────────────────────────────── */
.iexample-section{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.iexample-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;margin-bottom:5px;display:block}
.iexample-label.green{color:#3C7A57}
.iexample-label.red{color:#A05C53}
/* Thumbnail on the far left, the date/age stacked over the hook in the
   flexible middle, and the views + action pill stacked on the right. */
.ireel-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;column-gap:11px;font-size:.8rem;padding:5px 0}
.ireel-thumb{flex-shrink:0;display:block;width:44px;height:52px;border-radius:6px;
  overflow:hidden;background:#F4EFF9;border:1px solid #E2D8EE}
.ireel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ireel-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.ireel-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  white-space:nowrap}
/* "view reel" / "see why" pill, pinned bottom-right inside the white box. */
.ireel-foot{display:flex;justify-content:flex-end;margin-top:8px}
/* Hook + its "view reel" pill share the first column: the hook truncates, the
   pill stays a fixed-size tappable chip at the end of the title. */
.ireel-hook-cell{display:flex;align-items:center;gap:8px;min-width:0}
.ireel-hook-cell .ireel-pill-open{flex-shrink:0}
.ireel-hook{color:#542C9E;text-decoration:underline;text-underline-offset:2px;
  font-weight:500;cursor:pointer;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ireel-hook.muted{color:#6B5A7E}
.ireel-views{font-weight:500;color:var(--gold);white-space:nowrap;font-size:.78rem;text-align:right}
.ireel-views a{color:var(--gold)}
.ireel-date{color:#6B5A7E;font-size:.74rem;white-space:nowrap;text-align:left}
/* Age flag for historical (>12-month) example reels - muted amber chip so it
   reads as a quiet caveat, not an alarm. */
.ireel-age{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:10px;
  background:#F4EEDB;color:#8A6D2F;font-size:.66rem;font-weight:600;
  letter-spacing:.02em;vertical-align:middle}
a.ireel-pill-open{font-size:9px;font-weight:700;border-radius:20px;
  padding:3px 8px;text-decoration:none;white-space:nowrap;display:inline-block;justify-self:end}
a.ireel-pill-open.plum{background:#542C9E;color:#fff}
a.ireel-pill-open.red{background:#9C6F66;color:#fff}
.ireel-note{font-size:11px;font-style:italic;color:#B23B30;margin-top:2px;display:block}
.ireel-example + .ireel-example{margin-top:12px;padding-top:12px;border-top:1px dotted var(--border)}

/* ── Seasonal best/worst panels ─────────────────────────────────────────────
   Each window splits its reels into two visually distinct groups so the reader
   can tell at a glance which reels worked and which underperformed. Every reel
   in a group carries its own Insight / Data / Action breakdown. */
/* Both panels share one neutral, plum-tinted surface so the seasonal card
   doesn't read like a rainbow next to the purple theme. Win vs loss is carried
   by a single thin left accent stripe (muted green / muted terracotta) plus the
   header icon and label colour - no large green/red fills. */
.sr-group{margin-top:10px;border-radius:10px;padding:11px 13px;
  background:#F8F5FC;border:1px solid #EADFF5;border-left-width:3px}
.sr-group-win {border-left-color:#5AAE83}
.sr-group-loss{border-left-color:#C58B83}
.sr-group-head{display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sr-group-head .iexample-label{margin-bottom:0}
/* Count chip is neutral for both - the stripe and label already signal which
   panel this is, so a coloured pill here would only add to the rainbow. */
.sr-group-count{font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 9px;border-radius:20px;white-space:nowrap;
  background:#EFE7F8;color:#5B4A72}
/* Per-reel divider inside a panel (overrides the generic dotted rule). */
.ireel-example-win + .ireel-example-win,
.ireel-example-loss + .ireel-example-loss{margin-top:10px;padding-top:10px;
  border-top:1px dotted rgba(0,0,0,.12)}
/* The three-layer block sits in its own white tile with a neutral plum border;
   the parent panel's left stripe already carries the win/loss signal. */
.ireel-breakdown{margin-top:7px;padding:9px 11px;border-radius:7px;
  background:#fff;border:1px solid #EADFF5}
.ireel-breakdown-win,
.ireel-breakdown-loss{border:1px solid #EADFF5}

/* ── Custom header tooltips (click the ⓘ to open) ───────────────────────────── */
.th-tip{position:relative;cursor:pointer;user-select:none}
.th-i{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  margin-left:4px;border-radius:50%;background:#C4A4E8;color:#fff;font-size:9px;font-weight:700;
  font-style:normal;line-height:1;vertical-align:middle;text-transform:none}
.th-tip:hover .th-i{background:#542C9E}
.th-tip .tip-box{display:none;position:absolute;top:100%;left:0;z-index:200;
  background:#fff;border:1px solid #DDD0EE;border-radius:8px;
  padding:8px 12px;min-width:200px;max-width:280px;
  font-size:11px;color:#4A3D5C;font-weight:400;line-height:1.5;
  white-space:normal;box-shadow:0 6px 20px rgba(84,44,158,.14);
  text-transform:none;letter-spacing:0}
.th-tip:hover .tip-box,.th-tip.open .tip-box{display:block}
/* Right-align the box for tooltips on right-hand columns so a 280px panel
   opens leftward from the column's right edge instead of overflowing the card. */
.th-tip .tip-box.tip-right{left:auto;right:0}

/* ── MI plain English comparison card ──────────────────────────────────────── */
.mi-compare-card{background:#F4EFF9;border:1px solid #DDD0EE;border-radius:10px;
  padding:14px 16px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.mi-compare-heading{font-size:16px;font-weight:500;color:#1A1018;margin-bottom:10px}
/* One metric block: a card-on-card row with the head line, the You-vs-them
   split + balance bar, and any extra (best-reel pill) / coaching tip. */
.mi-su-row{background:#fff;border:1px solid #E6DCF2;border-radius:10px;
  padding:12px 22px;display:flex;flex-direction:column;gap:9px}
.mi-su-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mi-su-icon{display:inline-flex;align-items:center;line-height:1;color:#9580AE}
.mi-su-icon svg{display:block}
.mi-su-label{font-size:.8rem;font-weight:700;color:#1A1018;letter-spacing:-.01em}
.mi-su-note{font-size:.68rem;color:var(--muted)}
/* Paired comparison bars: a You row and a competitor row drawn on a shared
   scale (the larger value fills the track, the other is proportional) so the two
   bar lengths compare directly. The big right-aligned number is the hero, so the
   exact value reads cleanly instead of being squashed into a side column. You =
   brand lilac, competitor = soft neutral grey; no dark purple, and no win/loss
   tint on the bar (the verdict pill + magnitude word carry who's ahead). The
   value column is a fixed width so both tracks stay the same length and the two
   numbers line up. */
.mi-su-bars{display:flex;flex-direction:column;gap:9px;
  max-width:520px;margin-left:auto;margin-right:auto;width:100%}
.mi-su-pair{display:grid;grid-template-columns:90px minmax(0,1fr) 72px;
  align-items:center;gap:11px}
.mi-su-pair-lbl{font-size:.64rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#9580AE;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.mi-su-lbl-you{color:#7E5DC0}
.mi-su-track{height:14px;background:#F1ECF8;border-radius:7px;overflow:hidden}
.mi-su-fill{display:block;height:100%;border-radius:7px;min-width:3px}
.mi-su-fill-you{background:#A78BDC}
.mi-su-fill-them{background:#D7D0E2}
.mi-su-pair-val{font-size:.88rem;font-weight:500;color:#1A1018;line-height:1;
  white-space:nowrap;text-align:right}
/* Gap magnitude word ("2.3x ahead" / "38% to close"), tinted to the verdict.
   Sits on the right of the head (margin-left:auto) where the old verdict pill was. */
.mi-su-mag{font-size:.72rem;font-weight:700;white-space:nowrap;margin-left:auto}
.mi-su-mag-lead{color:#1A5C3A}
.mi-su-mag-gap{color:#C4756A}
.mi-su-mag-neck{color:#7E5DC0}
/* Neutral context rows (cadence, followers): grey, no win/loss tint. */
.mi-su-mag-neutral{color:#8A8597;font-weight:600}
/* What the comparison rests on - sample size + active window. */
.mi-su-foot{margin-top:12px;padding-top:10px;border-top:1px solid #EFE7F8;
  font-size:.72rem;color:var(--muted);line-height:1.5}
.verdict-pill{display:inline-block;border-radius:12px;padding:1px 9px;
  font-size:.72rem;font-weight:600;margin-left:6px;vertical-align:middle}
.verdict-lead{background:#E8F5EE;color:#1A5C3A}
.verdict-gap{background:#FDF3F1;color:#C4756A}
.verdict-neck{background:#F4EFF9;color:#7E5DC0}

/* ── MI info notice ─────────────────────────────────────────────────────────── */
.mi-info-notice{background:#F4EFF9;border:1px solid #DDD0EE;border-radius:8px;
  padding:10px 14px;margin-top:14px;font-size:12px;color:#4A3D5C;line-height:1.6}