/* Competitor intelligence and deep report sections split from styles.css: profile enrichment, strategic profile, audience questions, performance patterns, playbook, film direction, missed alerts, hook DNA, jump nav, competitor detail, hashtag intelligence, next 4 posts, content gap. Loaded last so the cascade order is unchanged. */ /* ── Persistent competitor banner ──────────────────────────────────────────── */ /* On Compare + Dominate the tracked-competitor strip sits at the top of the content column, directly under the act tabs, so the reader sees who they're up against. Only ONE bar pins per act (stacking two frozen bars under the site header would eat too much vertical space), and the two acts choose a different one to freeze: - Compare: who you're up against is the anchor, so the competitor strip pins and the page title scrolls away (see .report-frame-act-competition). - Dominate: it's your own playbook, so the page title pins (default .report-page-header sticky) and the strip scrolls away. */ #comp-persistent-profile{padding-bottom:16px;background:var(--bg)} #comp-persistent-profile .cmp-profile{margin-bottom:0} /* When the strip is empty (a locked/non-paying report strips competitor data server-side) it must take NO space, or its 16px padding nudges the page title down. The Compare act already collapses its empty strip below; this global rule also covers the Dominate act, where the empty strip was pushing the Playbook header lower than every other tab. */ #comp-persistent-profile:empty{padding-bottom:0} /* Compare act: freeze the competitor strip, release the title. */ .report-frame-act-competition #comp-persistent-profile{ position:sticky;top:64px;z-index:30;padding-top:10px} /* On a locked (non-paying) Compare page the competitor data is stripped server-side, so #comp-persistent-profile renders empty. Collapse its padding when empty so it leaves no gap under the act tabs. */ .report-frame-act-competition #comp-persistent-profile:empty{ padding-top:0;padding-bottom:0} .report-frame-act-competition .report-page-header{ position:static;top:auto;border-bottom:none} @media(max-width:780px){ #comp-persistent-profile{padding-bottom:0} #comp-persistent-profile .cmp-profile{margin-bottom:16px} /* Narrow viewports keep both bars in flow (the report header is already static here) so neither eats the short mobile viewport. */ .report-frame-act-competition #comp-persistent-profile{ position:static;top:auto;padding-top:0;border-bottom:none} } /* ── Phone: competitor strip mirrors the user's own top identity band ───────── On a phone the analysed account's header collapses to a 46px avatar with a tight single row of four small stat boxes, and the handle + follower count on the row beneath (see .report-sidebar in styles-mobile.css). The competitor card carried its desktop shape into the phone (48px avatar, 1.3rem name, a chunky 2x2 stat grid), so it read as a different, heavier block. Match it to the user band so the two read as one format: dissolve .cmp-profile-id (display:contents) so the avatar and the name/followers become direct flex children, sit the avatar beside a 4-across stat strip on row one, and wrap the name + follower count onto row two. Also drop the boxed-card shell (border, background, radius, side padding) so the data spans the full page width like the user band, and close the strip with a soft-purple divider that echoes the line above the act pills. */ @media(max-width:600px){ /* Open band, no boxed-card shell - matches the user's borderless top band. */ .cmp-profile{padding:0;background:none;border:none;border-radius:0; align-items:center;justify-content:flex-start;column-gap:12px;row-gap:10px} /* Soft-purple rule after the competitor info (same #E0D2F0 as the act-pill bar's border) so it reads as a divider before the report below. Skipped when the strip is empty (a free/locked report strips competitor data). */ #comp-persistent-profile:not(:empty){border-bottom:1px solid #E0D2F0;margin-bottom:16px} /* Dissolve the id wrapper so avatar + meta become siblings of the stat strip. */ .cmp-profile-id{display:contents} .cmp-avatar-col{order:1;flex:0 0 auto} .cmp-avatar{width:46px;height:46px;font-size:1.05rem} /* Four small stat boxes in one tight row beside the avatar (matches the user band's .report-side-stats exactly). */ .cmp-stats{order:2;flex:1 1 0;min-width:0;display:grid; grid-template-columns:repeat(4,1fr);gap:6px} .cmp-stats .stat-box{padding:7px 3px;border-radius:9px;border:1px solid #ECE2F6; background:#fff;text-align:center;display:flex;flex-direction:column; align-items:center;justify-content:center} .cmp-stats .stat-box .val{font-size:.98rem;font-weight:700;line-height:1.15;color:var(--text)} .cmp-stats .stat-box .lbl{font-size:.55rem;line-height:1.12;margin-top:2px; text-transform:uppercase;letter-spacing:.02em;color:#8A739E} /* Name + follower count wrap onto their own full-width row below (handle left, followers right), like the user band's .report-side-id-row. */ .cmp-profile-meta{order:3;flex:1 1 100%;display:flex;align-items:baseline; justify-content:space-between;gap:6px 12px;flex-wrap:wrap;min-width:0} .cmp-name{font-size:.95rem;font-weight:600;min-width:0} .cmp-followers-row{margin-top:0;flex:0 0 auto} .cmp-followers{font-size:.82rem} } /* All-time fallback notice when a windowed page can't re-scope this account. */ .comp-window-note{margin-top:10px;font-size:.74rem;line-height:1.5;color:#8A6D2F; background:#FCF7EC;border:1px solid #EFE0C2;border-radius:7px;padding:8px 11px} /* ── Strategic Profile (AI bio analysis on a competitor card) ────────── */ .bio-analysis{margin-top:14px;padding:14px 16px;background:#F4EFF9; border:1px solid #DDD0EE;border-radius:10px; display:flex;flex-direction:column;gap:8px} .bio-analysis-title{font-size:.66rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:#542C9E;margin-bottom:2px} .bio-an-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.82rem} .bio-an-lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em; color:#7B5E9A;font-weight:600;min-width:96px} .bio-an-val{color:var(--text);font-weight:500} .bio-an-chip{background:#fff;border:1px solid #DDD0EE;color:#542C9E; font-size:.76rem;font-weight:600;padding:3px 10px;border-radius:12px} .bio-an-chip-aud{background:#EDE0FA;border-color:#C4A4E8} .bio-an-sigs{display:flex;flex-wrap:wrap;gap:4px} .bio-an-sig{background:#fff;border:1px solid #E2D8EE;color:var(--text); font-size:.74rem;font-weight:500;padding:2px 8px;border-radius:10px} /* Example reels under "Your move" in the Strategic Angle block. */ .bio-an-impl-eg{margin-top:13px;padding-top:11px;border-top:1px dashed #DDD0EE} .bio-an-eg-lbl{display:block;font-size:.62rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:#7A5BB0;margin-bottom:7px} .bio-an-eg-chips{display:flex;flex-wrap:wrap;gap:6px} .bio-an-eg-chip{display:inline-flex;align-items:center;gap:5px;font-size:.76rem; font-weight:600;color:#fff;background:#542C9E;border:1px solid #542C9E; border-radius:14px;padding:3px 11px;text-decoration:none;transition:background .12s} .bio-an-eg-chip:hover{background:#3D1E7A;border-color:#3D1E7A} .bio-an-eg-arrow{font-size:.82rem;opacity:.8} /* Raw bio is shown outright (no dropdown) so the reader sees the competitor's actual words straight away, framed like a quoted block. */ .bio-an-raw{margin-top:4px;padding-top:9px;border-top:1px dashed #DDD0EE} .bio-an-raw-lbl{font-size:.66rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#542C9E;margin-bottom:6px} .bio-an-raw-body{padding:10px 12px;background:#fff;border-radius:8px; border:1px solid #EBE3F4;border-left:3px solid #C4A4E8; font-size:.92rem;font-weight:500;color:var(--text);line-height:1.6; white-space:pre-wrap} .bio-an-raw-empty{color:var(--muted)} /* Hard profile facts under the bio quote - fills the box and gives the bio real context (followers, category, cadence, website) instead of white space. */ .bio-facts{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 14px} .bio-fact{display:flex;flex-direction:column;gap:2px;padding:7px 10px; background:#fff;border:1px solid #EBE3F4;border-radius:8px} .bio-fact-lbl{font-size:.6rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:#7B5E9A} .bio-fact-val{font-size:.82rem;font-weight:600;color:var(--text)} .bio-fact-link{font-size:.8rem;font-weight:600;color:#542C9E;text-decoration:none; word-break:break-all} .bio-fact-link:hover{text-decoration:underline} /* ── What Your Audience Is Asking (Prompt #11) ─────────────────────────────── */ .aq-sample{font-size:.76rem;color:var(--muted);font-style:italic;margin-bottom:12px} .aq-topic{background:#FAF7FD;border:1px solid #E2D8EE;border-radius:10px; padding:14px 16px;margin-bottom:12px;line-height:1.55} .aq-topic:last-child{margin-bottom:0} .aq-topic-hdr{display:flex;align-items:baseline;justify-content:space-between; gap:10px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #EBE3F4} .aq-topic-name{font-size:.95rem;font-weight:700;color:#542C9E;text-transform:capitalize} .aq-topic-count{font-size:.72rem;color:var(--muted);font-weight:500; background:#F4EFF9;padding:2px 8px;border-radius:10px} .aq-examples{margin:0 0 10px;padding-left:18px;font-size:.84rem;color:var(--text)} .aq-examples li{margin-bottom:4px;line-height:1.5} .aq-example-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .aq-example-quote{flex:1 1 auto;min-width:0} .aq-example-row a.reel-pill{flex-shrink:0;margin-left:auto} .aq-idea{padding:8px 12px;background:#fff;border-radius:6px;border:1px solid #EBE3F4; font-size:.82rem;line-height:1.55;color:var(--text)} .aq-idea-lbl{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:#542C9E;margin-right:6px} /* ── Performance Patterns (AI two-block summary) ─────────────────────── */ /* Mirrors the Seasonal panels: one neutral plum-tinted surface for both blocks, with win vs improve carried by a thin left accent stripe + a coloured label and coloured stat figures, never a large green/orange fill (the old cards read as a loud rainbow). The key numbers are lifted out of the Data sentence into scannable stat chips so the reader digests them at a glance. */ #performance-patterns-card .pp-block{padding:16px 18px;border-radius:12px;margin-bottom:14px; background:#F8F5FC;border:1px solid #EADFF5;border-left-width:3px} #performance-patterns-card .pp-block:last-child{margin-bottom:0} .pp-working{border-left-color:#5AAE83} .pp-hurting{border-left-color:#C58B83} .pp-block-label{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px} .pp-working .pp-block-label{color:#3C7A57} .pp-hurting .pp-block-label{color:#A05C53} .pp-headline{font-size:.95rem;font-weight:600;color:var(--text);line-height:1.45;margin-bottom:9px} /* Stat chips lifted from the Data sentence: a primary "avg views" figure plus a reel-count chip and (when present) a delta-vs-baseline chip. */ .pp-stat-row{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-bottom:9px} .pp-stat{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:500; color:#5B4A72;background:#fff;border:1px solid #E7DCF4;border-radius:8px;padding:6px 11px; white-space:nowrap} .pp-stat strong{font-weight:700;color:var(--text)} .pp-stat-primary{flex-direction:column;align-items:flex-start;gap:0;padding:7px 13px} .pp-stat-num{font-size:1.15rem;font-weight:700;line-height:1.05;letter-spacing:-.01em} .pp-working .pp-stat-num{color:#2E7D52} .pp-hurting .pp-stat-num{color:#B0584A} .pp-stat-unit{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .pp-delta{font-weight:700} .pp-delta-up{color:#2E7D52;background:#EEF7F1;border-color:#CDE7D8} .pp-delta-down{color:#A85044;background:#FBF1EF;border-color:#EDD5CF} /* The full Data sentence stays as quiet supporting context under the chips. */ .pp-why{font-size:.8rem;color:var(--muted);line-height:1.55;margin-bottom:9px} .pp-action{font-size:.86rem;line-height:1.5;font-weight:500;padding:9px 12px; border-radius:8px;background:#fff;border:1px solid #E7DCF4; display:flex;align-items:flex-start;gap:7px;color:var(--text)} .pp-action-arrow{flex-shrink:0;font-weight:700;font-size:.82rem;line-height:1.7} .pp-action-working .pp-action-arrow{color:#3C7A57} .pp-action-hurting .pp-action-arrow{color:#A05C53} /* Per-item example reels - derived client-side from cached reels by matching the item's `data` text against known taxonomy values (format / hook / trigger / CTA / category / content_mix). Restores the example-reel links the legacy "What Works / What Underperforms" grid carried. */ .pp-examples{margin-top:10px;padding:9px 12px;border-radius:8px; background:rgba(255,255,255,.55)} .pp-examples-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin-bottom:7px} /* The examples lay out as a row of discrete tiles. Each tile keeps its view count and its "view reel" pill bound together so the pairing is never ambiguous, even when the row wraps. */ .pp-example-grid{display:flex;flex-wrap:wrap;gap:8px} /* Each example tile: the view count as plain text, then the site-standard purple "view reel" pill - so the number reads as information and the pill reads as the click target. The border boxes the pair as one unit. */ .pp-example{display:inline-flex;align-items:center;gap:9px;white-space:nowrap; padding:5px 7px 5px 11px;border-radius:9px;background:rgba(255,255,255,.85); border:1px solid #E4D8F0} .pp-example-views{font-size:.78rem;font-weight:700;color:#3D1E7A} .pp-examples a.reel-pill{margin-left:0} /* Each working / improving finding sits in its own soft card so the three-layer text no longer stacks as one wall bunched against the left edge. */ #performance-patterns-card .pp-item{background:rgba(255,255,255,.6); border-radius:10px;padding:13px 15px;margin-bottom:10px} #performance-patterns-card .pp-item:last-child{margin-bottom:0} /* ── Your Playbook (merges Winning Formula + Hook DNA + Replication Briefs) ─ */ #playbook-card .pb-block{padding:16px 18px;border-radius:12px;margin-bottom:14px} #playbook-card .pb-block:last-child{margin-bottom:0} .pb-formula{background:#F4EFF9;border:1px solid #DDD0EE} .pb-direction{background:#FAF7FD;border:1px solid #E2D8EE} .pb-block-label{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:#542C9E;margin-bottom:10px} /* The Winning Formula heading is dropped (the page title already says it), so the confidence badge sits on its own left-aligned row above the hero stat. */ .pb-badge-row{text-align:left;margin-bottom:12px} .pb-badge-row .confidence-badge{margin:0} /* Block 1 - hero stat + formula grid + sig/competitor callouts */ .pb-hero{display:flex;align-items:baseline;gap:14px;margin-bottom:14px; padding:14px 16px;background:#fff;border:1px solid #DDD0EE;border-radius:10px} .pb-hero-num{font-size:2rem;font-weight:700;color:#542C9E;line-height:1;letter-spacing:-.01em} .pb-hero-meta{display:flex;flex-direction:column;gap:1px} .pb-hero-main{font-size:.84rem;color:var(--text);font-weight:600} .pb-hero-aux{font-size:.74rem;color:var(--muted)} .pb-formula-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;margin-bottom:14px} .pb-formula-row{display:flex;flex-direction:column;gap:2px; padding:8px 12px;background:#fff;border:1px solid #E2D8EE;border-radius:8px} .pb-formula-key{font-size:.66rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#7B5E9A} .pb-formula-val{font-size:.88rem;font-weight:600;color:var(--text)} @media(max-width:600px){.pb-formula-grid{grid-template-columns:1fr}} .pb-callout{padding:10px 14px;background:rgba(255,255,255,.7); border:1px solid #E2D8EE;border-radius:8px;margin-bottom:8px} .pb-callout:last-child{margin-bottom:0} .pb-callout-sig{border-color:#C4A4E8} .pb-callout-comp{border-color:#542C9E} .pb-callout-label{font-size:.66rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#542C9E;margin-bottom:5px} .pb-callout-body{font-size:.85rem;color:var(--text);line-height:1.6} .pb-body{font-size:.86rem;color:var(--text);line-height:1.6; padding:10px 12px;background:rgba(255,255,255,.55);border-radius:8px} /* Engagement Formula card - the reach card's companion. Same layout, a teal accent so the pair reads as "reach (purple) + engagement (teal)" at a glance. */ .pb-eng-intro{font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:14px} #playbook-engagement-card .pb-formula{background:#EAF6F4;border:1px solid #C9E6E1} #playbook-engagement-card .pb-block-label{color:#1F7A6B} #playbook-engagement-card .pb-hero{border-color:#C9E6E1} #playbook-engagement-card .pb-hero-num{color:#1F7A6B} #playbook-engagement-card .pb-formula-row{border-color:#C9E6E1} #playbook-engagement-card .pb-formula-key{color:#2E6F63} #playbook-engagement-card .pb-callout{border-color:#C9E6E1} #playbook-engagement-card .pb-callout-sig{border-color:#5FB5A6} #playbook-engagement-card .pb-callout-comp{border-color:#1F7A6B} #playbook-engagement-card .pb-callout-label{color:#1F7A6B} /* Block 2 - labelled production-brief grid */ .pb-brief-grid{display:flex;flex-direction:column;gap:8px} .pb-brief-row{display:grid;grid-template-columns:24px 140px 1fr;gap:10px; align-items:baseline;font-size:.86rem;line-height:1.5; padding:9px 12px;background:#fff;border:1px solid #E2D8EE;border-radius:8px} .pb-brief-icon{color:#542C9E;font-weight:700;font-size:.95rem;line-height:1.4} .pb-brief-lbl{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:#7B5E9A;line-height:1.6} .pb-brief-val{color:var(--text)} @media(max-width:600px){ .pb-brief-row{grid-template-columns:24px 1fr} .pb-brief-lbl{grid-column:2;line-height:1.4;margin-bottom:2px} .pb-brief-val{grid-column:1/-1} } /* ── Film & Caption Direction (own + competitor production briefs) ───────── */ /* Reuses the Playbook's .pb-brief-grid / .pb-brief-row so each brief reads identically; the wrappers add a per-source accent + provenance line so the reader can tell at a glance whose winning content a brief was built from. */ #film-briefs-card .fb-intro{font-size:.84rem;color:var(--muted);line-height:1.6;margin-bottom:16px} /* Empty-state copy when no brief is available, so the page is never blank. */ #film-briefs-card .fb-empty{font-size:.9rem;color:var(--muted);line-height:1.6; background:#F4EFF9;border:1px solid #DDD0EE;border-radius:12px;padding:16px 18px} /* "Starting template" note shown when the brief is a format preset, not a tailored AI brief. */ .fb-preset-note{font-size:.74rem;color:#7B5E9A;line-height:1.5;margin-bottom:12px;font-style:italic} .fb-comp .fb-preset-note{color:#8A6A2E} /* Mirrors the Seasonal panels: both briefs share one neutral plum-tinted surface, and "yours vs your competitor's" is carried by a thin left accent stripe plus a coloured label/source font (purple = you, gold = competitor), not a full amber or purple card fill. */ .fb-block{padding:16px 18px;border-radius:12px;margin-bottom:16px; background:#F8F5FC;border:1px solid #EADFF5;border-left-width:3px} .fb-block:last-child{margin-bottom:0} .fb-own{border-left-color:#7B4FC0} .fb-comp{border-left-color:#C9A24E} .fb-block-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:#542C9E;margin-bottom:6px} .fb-comp .fb-block-label{color:#8A5A00} .fb-source{font-size:.74rem;color:#7B5E9A;line-height:1.5;margin-bottom:12px; display:flex;align-items:baseline;gap:5px} .fb-comp .fb-source{color:#8A6A2E} .fb-source-icon{font-style:normal;opacity:.7;flex-shrink:0} /* Competitor brief: tint the reused brief rows amber so they read as the rival's source rather than the user's own purple. */ .fb-comp .pb-brief-row{border-color:#F0E0C0} .fb-comp .pb-brief-icon{color:#C08A2E} .fb-comp .pb-brief-lbl{color:#8A6A2E} /* Example reels strip: real posts of this format so the viewer sees concrete examples to film, not just the prose brief. Thumbnails link out to the reel. Tinted per source (purple own / amber competitor) like the rows above. */ .fb-examples{margin-top:14px;padding-top:13px;border-top:1px dashed #DDD0EE} .fb-comp .fb-examples{border-top-color:#F0E0C0} .fb-examples-label{font-size:.68rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#7B5E9A;margin-bottom:10px} .fb-comp .fb-examples-label{color:#8A6A2E} .fb-examples-row{display:flex;gap:12px;flex-wrap:wrap} .fb-reel{display:flex;flex-direction:column;align-items:center;gap:6px; width:96px;text-decoration:none} .fb-reel-thumb{position:relative;display:block;width:96px;height:128px; border-radius:9px;overflow:hidden;background:#EDE4F7;border:1px solid #DDD0EE; transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease} .fb-comp .fb-reel-thumb{background:#F6ECD9;border-color:#F0E0C0} .fb-reel-thumb img{width:100%;height:100%;object-fit:cover;display:block} /* Soft centre scrim so the play glyph always reads, even over a light/white thumbnail (sits above the image, below the play glyph). */ .fb-reel-thumb::after{content:'';position:absolute;inset:0;z-index:1; pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.34),rgba(0,0,0,0) 58%)} .fb-reel:hover .fb-reel-thumb{transform:translateY(-2px); box-shadow:0 6px 16px rgba(84,44,158,.22);border-color:#542C9E} .fb-comp .fb-reel:hover .fb-reel-thumb{box-shadow:0 6px 16px rgba(192,138,46,.22); border-color:#C08A2E} .fb-reel-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); z-index:2;font-size:1.4rem;color:#fff;opacity:.95;pointer-events:none; text-shadow:0 1px 5px rgba(0,0,0,.55)} .fb-reel-views{font-size:.72rem;font-weight:600;color:#542C9E;text-align:center; line-height:1.3} .fb-comp .fb-reel-views{color:#8A5A00} /* Purple "View reel" CTA pill under each example thumbnail - sized to fit the narrow 96px tile so the action to open the post is always explicit. */ .fb-reel .fb-reel-cta{font-size:.68rem;padding:4px 11px;margin-top:1px} /* Single-question variant: rare-question framing with verbatim quote */ .aq-single{background:#FAF7FD;border:1px solid #E2D8EE; border-radius:10px;padding:14px 16px;line-height:1.55} .aq-single-quote{font-size:1.02rem;font-weight:600;color:var(--text);font-style:italic; margin-bottom:8px;line-height:1.5} .aq-single-source{font-size:.84rem;color:var(--muted);margin-bottom:10px;line-height:1.55} .aq-reel-link{color:#542C9E;font-weight:500;text-decoration:none;border-bottom:1px solid #D5C6E8} .aq-reel-link:hover{border-bottom-color:#542C9E} /* Behavioural-insight variant: zero questions reframed as a positive signal */ .aq-behaviour{background:#FAF7FD;border:1px solid #E2D8EE;border-radius:10px; padding:14px 16px;line-height:1.6} .aq-behaviour-title{font-size:.85rem;font-weight:700;color:#542C9E; text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px} .aq-behaviour-body{font-size:.86rem;color:var(--text);line-height:1.6;display:flex;flex-direction:column;gap:12px} .aq-behaviour-section{margin-bottom:2px} .aq-behaviour-section:last-child{margin-bottom:0} .aq-behaviour-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;color:#542C9E;display:block;margin-bottom:4px} .aq-behaviour-text{font-size:.84rem;color:var(--text);line-height:1.5;margin:0} /* Mood / praise / buying-signal blocks (all read from the same comments) */ .aq-block{background:#FAF7FD;border:1px solid #E2D8EE;border-radius:10px; padding:14px 16px;margin-bottom:12px} .aq-block-title{font-size:.85rem;font-weight:700;color:#542C9E; text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px} .aq-block-sub{font-size:.78rem;color:var(--muted);margin-top:10px;line-height:1.55} .aq-loves{border-color:#4FAE84} .aq-loves-insight{margin-top:12px;padding:10px 12px;background:#EBF8F2;border:1px solid #CBEFDD;border-radius:6px} .aq-loves-insight-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;color:#1A5C3A;display:block;margin-bottom:4px} .aq-loves-insight-text{font-size:.82rem;color:var(--text);line-height:1.5;margin:0} .aq-buying{border-color:#C4A4E8} .aq-quote-list{list-style:none;margin:0;padding:0} .aq-quote-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; padding:7px 0;border-bottom:1px solid #EBE3F4} .aq-quote-row:last-child{border-bottom:none} .aq-quote{flex:1 1 auto;min-width:0;font-size:.86rem;color:var(--text); font-style:italic;line-height:1.5} .aq-quote-row a.reel-pill{flex-shrink:0;margin-left:auto} /* Mood bar: a single stacked proportion bar + legend + dominant emojis */ .aq-sent-bar{display:flex;height:14px;border-radius:7px;overflow:hidden; background:#EFE8F7;margin-bottom:10px} .aq-sent-seg{height:100%} .aq-sent-seg.pos{background:#4FAE84} .aq-sent-seg.neu{background:#CFC2E2} .aq-sent-seg.neg{background:#D98A8A} .aq-sent-legend{display:flex;flex-wrap:wrap;gap:14px} .aq-sent-key{display:inline-flex;align-items:center;gap:6px;font-size:.76rem; color:var(--muted);font-weight:500} .aq-sent-dot{width:9px;height:9px;border-radius:50%;display:inline-block} .aq-sent-dot.pos{background:#4FAE84} .aq-sent-dot.neu{background:#CFC2E2} .aq-sent-dot.neg{background:#D98A8A} .aq-sent-emojis{display:flex;align-items:center;gap:8px;margin-top:12px; padding-top:10px;border-top:1px solid #EBE3F4;flex-wrap:wrap} .aq-sent-emojis-lbl{font-size:.65rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#542C9E;margin-right:2px} .aq-sent-emoji{font-size:1.2rem;line-height:1} /* ── Missed Opportunity Alerts (mirrors Replication Brief layout) ──────────── */ /* Card head: title left, time-window dropdown right, on one balanced row. The title's own bottom margin moves onto the head so the row stays tight (matches the Performance Benchmarks .bench-head treatment). */ .missed-alerts-head{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap;margin-bottom:14px} .missed-alerts-head .card-title{margin-bottom:0} /* Head stripped of its title (the page header already carries it) - the lone time-window control sits right-aligned at the top of the card. */ .missed-alerts-head--control-only, .su-head--control-only{justify-content:flex-end} /* Flows at its natural height; the page scrolls as one rather than nesting an inner scrollbar for a moderately long alert list. */ .missed-alerts-grid{display:grid;grid-template-columns:1fr;gap:14px; padding-right:6px} .missed-alert-card{background:#fff;border:1px solid #E2D8EE; border-radius:12px;padding:0 0 14px;line-height:1.55;display:flex;flex-direction:column;overflow:hidden} /* Full-width card body: the header band spans the top, then the body splits into two zones - the opportunity + the proof it works (left), and your own starting point + the move to make (right) - divided by a faint centre rule. The columns stretch to equal height so the divider runs the full body. Falls back to one column when the right side is empty, and stacks on phones. */ .ma-body{display:grid;grid-template-columns:1fr 1fr;padding:14px 0 2px} .ma-body-single{grid-template-columns:1fr} .ma-body > .ma-col:nth-child(1){padding-right:24px} .ma-body:not(.ma-body-single) > .ma-col:nth-child(2){padding-left:24px;border-left:1px solid #EEE7F6} @media (max-width:720px){ .ma-body{grid-template-columns:1fr} .ma-body > .ma-col:nth-child(1){padding-right:0} .ma-body:not(.ma-body-single) > .ma-col:nth-child(2){padding-left:0;border-left:none;margin-top:15px} } /* Strength tile two-column: the recap headline tucks under the top padding, the column bottoms sit flush, and the divider goes green to stay on-theme. */ .ma-col > .missed-alert-headline{margin-top:0} .ma-col > :last-child{margin-bottom:0} .ma-strength-card .ma-body:not(.ma-body-single) > .ma-col:nth-child(2){border-left-color:#C7F0DD} /* Every body block shares the card's 16px content gutter so their left and right edges line up into one clean column (the header band is full-bleed). */ .missed-alert-card > :not(.ma-head){margin-left:16px;margin-right:16px} /* Header band: just the slot type + name. (The old right-aligned "views/reel gap" stat was dropped as unclear; reach detail lives in the Data line.) */ .ma-head{display:flex;align-items:flex-start;gap:12px; padding:13px 16px;margin-bottom:3px;border-bottom:1px solid #EEE7F6;background:#FCFAFE} .ma-head-id{display:flex;flex-direction:column;gap:3px;min-width:0} .ma-head-type{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9A7FC0} .ma-head-name{font-size:.98rem;font-weight:700;color:var(--text);line-height:1.25} /* Compact size override for the site-wide .reel-pill when it sits on a study row or an evidence-block label row (winning example / proven reels). */ .ma-row-pill{flex-shrink:0;font-size:.68rem;padding:3px 10px;gap:4px} .missed-alert-headline{font-size:.95rem;font-weight:600;color:var(--text);margin:11px 0 8px;line-height:1.45} .missed-alert-obs{font-size:.84rem;color:var(--muted);margin-bottom:12px;line-height:1.55} .missed-alert-action{font-size:.84rem;color:#542C9E;font-weight:500;line-height:1.55; margin-top:2px;padding:9px 12px;background:#F4EFF9;border:1px solid #DDD0EE;border-radius:8px} .missed-alert-action-lbl{font-size:.7rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:#3D1E7A;margin-right:6px} /* Evidence blocks share one calm surface + identical insets so the card reads as a tidy stack, not a pile of competing tints. "Your closest" carries an accent rule to flag it as the reader's own proven content. */ .ma-block-lbl{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:#7B5E9A;margin-bottom:6px} /* Label row that also carries a right-aligned "view reel" link. */ .ma-block-lbl-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px} /* The pill must not inherit the label's uppercase + wide tracking, so it reads "view reel" and matches every other reel pill on the card. */ .ma-block-lbl-row .reel-pill{text-transform:none;letter-spacing:.02em} .ma-example,.ma-proven,.ma-closest{margin-bottom:10px;padding:11px 12px; background:#FBF9FE;border:1px solid #ECE3F7;border-radius:8px} .ma-ex-hook{font-size:.92rem;font-weight:600;color:var(--text);line-height:1.4; margin-bottom:8px} .ma-chips{display:flex;flex-wrap:wrap;gap:6px} .ma-chip{font-size:.72rem;color:#3D1E7A;background:#fff;border:1px solid #E2D8EE; border-radius:6px;padding:3px 8px;line-height:1.3} .ma-chip-lbl{font-weight:700;color:#7B5E9A;margin-right:3px;text-transform:uppercase; font-size:.62rem;letter-spacing:.05em} /* Closing "what you already own" tile that balances the Opportunities grid on an odd card count. Green accent marks it as affirming (a strength), not a gap, so it reads distinctly from the alert cards beside it. */ .ma-strength-card{border-color:#A7F3D0} .ma-head-strength{background:#ECFDF5;border-bottom-color:#C7F0DD} .ma-head-strength .ma-head-type{color:#10B981} .ma-strength-chips .ma-chip{border-color:#BBF0D6} .ma-strength-chips .ma-chip-lbl{color:#0E9F6E} .ma-strength-chips{margin-bottom:12px} .ma-strength-proven{background:#F3FCF8;border-color:#C7F0DD} .ma-strength-proven .ma-block-lbl{color:#0E9F6E} .ma-row{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:7px; color:inherit} .ma-row + .ma-row{margin-top:6px} .ma-row-thumb{flex-shrink:0;width:34px;height:40px;border-radius:5px;object-fit:cover; background:#F4EFF9;border:1px solid #E2D8EE;display:block} .ma-row-thumb-empty{display:inline-block} .ma-row-hook{flex:1 1 auto;min-width:0;font-size:.8rem;color:var(--muted);line-height:1.35; overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* Views (plain text, never a link) sit above the "view reel" pill as one hard- right column so every row's numbers and pill align down the stack. */ .ma-row-meta{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end; gap:4px;text-align:right} .ma-row-views{font-size:.78rem;font-weight:600;color:#6B5A7E;white-space:nowrap} .ma-closest .ma-row{padding-left:0} .ma-closest-note{font-size:.78rem;color:#542C9E;margin-top:6px;line-height:1.45} /* Two-line intro: a scannable lead (what this page is) over a lighter "how to read each card" line, instead of one dense grey paragraph. */ .ma-intro{margin-bottom:16px} .ma-intro-lead{font-size:.85rem;color:var(--text);line-height:1.5;margin:0 0 7px} .ma-intro-how{font-size:.78rem;color:var(--muted);line-height:1.5;margin:0} /* Section signposts: each Opportunity card carries labelled sections (the gap, their proof, your starting point, your move). No numbers - across two columns a 1..4 sequence reads out of order. */ .ma-step{margin-bottom:15px} .ma-step:last-child{margin-bottom:0} .ma-step > :last-child{margin-bottom:0} .ma-step-lbl{font-size:.7rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:#542C9E;margin-bottom:9px} /* Full-width "The gap" lead above the two columns on a competitor card, plus the reach callout that anchors the right column. */ .ma-lead{padding-top:13px} .ma-reach-stat{background:#F4EFF9;border:1px solid #DDD0EE;border-radius:8px; padding:12px;margin-bottom:12px;text-align:center} .ma-reach-num{font-size:1.45rem;font-weight:800;color:#3D1E7A;line-height:1.05} .ma-reach-lbl{font-size:.74rem;color:#6B5A7E;line-height:1.4;margin-top:3px} /* Headline/action lead their steps; drop stray margins so they tuck straight under the step label. */ .ma-step .missed-alert-headline{margin-top:0} .ma-step .missed-alert-action{margin-top:0} /* ── Hook DNA Analysis (after Winning Formula, before Your Next 4 Posts) ───── */ #hook-dna-card .hd-sample-note{font-size:.78rem;color:var(--hint);margin-bottom:10px;font-style:italic} .hd-table{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:.86rem} .hd-table thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em; color:#7B5E9A;padding:8px 10px;text-align:left;font-weight:600; background:#F4EFF9;border-bottom:1px solid #DDD0EE} .hd-table td{padding:8px 10px;border-bottom:1px solid #EBE3F4} .hd-table tr:last-child td{border-bottom:none} .hd-trait{color:var(--muted)} .hd-val{font-weight:600;color:var(--text);white-space:nowrap} .hd-val-you{color:#542C9E} .hd-val-them{color:var(--text)} .hd-synthesis{padding:12px 14px;background:#FAF7FD;border:1px solid #E2D8EE; border-radius:8px;font-size:.88rem;line-height:1.6;color:var(--text);margin-bottom:10px} .hd-test-this{padding:10px 14px;background:#F4EFF9;border-radius:8px; font-size:.86rem;line-height:1.55;color:var(--text)} .hd-test-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:#542C9E;margin-right:6px} .hd-multi-note{margin-top:10px;font-size:.78rem;color:var(--hint);font-style:italic;line-height:1.5} #results{display:none} /* ── Jump-to-section nav (fixed in the left gutter beside the centred report) ─── */ #section-nav{ position:fixed;top:50%;transform:translateY(-50%); left:calc((100% - 980px)/2 - 194px); /* width + gap, sits just left of .page-wrap */ width:168px;max-height:86vh;overflow-y:auto;z-index:40; display:none;flex-direction:column;gap:1px; background:#fff;border:1px solid var(--border);border-radius:12px; padding:8px;box-shadow:0 6px 24px rgba(30,10,46,.07)} #section-nav.show{display:flex} .section-nav-title{font-size:.62rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--hint);padding:4px 8px 6px} #section-nav a{display:block;font-size:.76rem;line-height:1.3;color:var(--muted); text-decoration:none;padding:6px 8px;border-radius:7px;cursor:pointer; border-left:2px solid transparent;transition:background .12s,color .12s} #section-nav a:hover{background:var(--surface2);color:var(--text)} #section-nav a.active{background:#F4EFF9;color:var(--accent);font-weight:600;border-left-color:var(--accent)} .card{scroll-margin-top:18px} @media(max-width:1340px){#section-nav{display:none!important}} /* ── Competitor detail cards ────────────────────────────────────────────────── */ .comp-detail-card{background:#FFFFFF;border:1px solid var(--border); border-radius:12px; margin-bottom:16px;overflow:hidden} /* Per-metric "How to close it" coaching inside the Head-to-Head. The summary is a solid purple CTA pill (lightbulb cue kept) so it reads as "open me for the fix" - a deliberate action, not a static caption. Shut by default to keep the matchup a clean scan; the depth (steps + the data-only gap panel) opens below. */ .cmp-coach{border:none;margin-top:10px} .cmp-coach>summary{list-style:none;cursor:pointer;user-select:none; display:inline-flex;align-items:center;gap:8px;padding:8px 16px; border-radius:999px;font-size:12.5px;font-weight:700; color:#FAF8FF;background:#542C9E;border:none; transition:background .15s ease} .cmp-coach>summary:hover{background:#3D1E7A;color:#FAF8FF} .cmp-coach[open]>summary{background:#3D1E7A} .cmp-coach>summary::-webkit-details-marker{display:none} .cmp-coach>summary::before{content:'\1F4A1';font-size:15px;line-height:1} /* Big, obvious chevron so it clearly reads as "click to open the steps". */ .cmp-coach>summary::after{content:'\25BC';margin-left:6px; font-size:15px;font-weight:800;color:#FFFFFF;line-height:1; transition:transform .15s ease} .cmp-coach[open]>summary::after{transform:rotate(180deg)} .cmp-coach-body{margin-top:10px;padding:14px;color:#3D2E4D;background:#FAF7FD; border:1px solid #ECE2F8;border-radius:10px;line-height:1.55} /* ── Head-to-Head: per-section window + matchup ─────────────────────────────── */ /* Two head-to-heads share the Position sub-tab (the metrics table + the DNA matchup); each owns an independent time-window dropdown. */ .h2h-sub{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)} /* The Content DNA tab leads with this block (no preceding title to divide from), so drop the top rule + spacing - it would otherwise read as a stray line above the window dropdown. */ .h2h-sub-dna{margin-top:0;padding-top:0;border-top:none} .h2h-sub-title{font-size:13px;font-weight:700;color:#3D1E7A; display:flex;align-items:center;gap:6px} .h2h-sub-icon{font-size:14px} /* "How You Stack Up" head: title left, window dropdown right - matching the site-standard control row used elsewhere in the report. */ .h2h-sub-head{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap;margin-bottom:14px} .h2h-sub-head .h2h-sub-controls{margin-bottom:0} /* The window dropdown container inside the "How You Stack Up" head; .h2h-sub-head right-aligns it via space-between, so it stays a simple inline row. */ .h2h-sub-controls{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap; margin-bottom:14px} .h2h-window-select{margin:0} /* "How You Stack Up" card head (Account Health): title left, time-window dropdown right, on one balanced row - the same treatment as the Opportunities (.missed-alerts-head) and Performance Benchmarks (.bench-head) cards, so the window control reads consistently across the site. */ .su-head{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap;margin-bottom:14px} .su-head .card-title{margin-bottom:0} .su-window-select{margin:0} .h2h-thin-note{font-size:11px;color:#7A4A0A;background:#FDF2E0; border:1px solid #F2D9A8;border-radius:8px;padding:8px 11px;margin-bottom:12px} /* "Why this is a fair comparison" - an always-visible bite-size visual (no dropdown): the audience-size gap drawn as two proportional follower bars (you in brand lilac, them in soft neutral grey), the size multiplier, then the views-per-follower leveler as a single verdict pill. Loaded after styles.css, so these win the cascade. */ .h2h-fair{background:#FAF7FD;border:1px solid #ECE2F8;border-radius:10px; padding:12px 14px;margin:0 0 14px 0} .h2h-fair-hdr{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800; text-transform:uppercase;letter-spacing:.04em;color:#7B5E9A;margin-bottom:11px} .h2h-fair-icon{font-size:13px} .h2h-fair-bars{display:flex;flex-direction:column;gap:8px} .h2h-fair-bar{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:11px} .h2h-fair-bar-name{font-size:10px;font-weight:700;text-transform:uppercase; letter-spacing:.03em;color:#7E6BA6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .h2h-fair-bar:first-child .h2h-fair-bar-name{color:var(--accent)} .h2h-fair-track{height:13px;background:#EFE7F8;border-radius:7px;overflow:hidden} .h2h-fair-fill{display:block;height:100%;border-radius:7px} .h2h-fair-fill-you{background:#A78BDC} .h2h-fair-fill-comp{background:#D7D0E2} .h2h-fair-bar-num{font-size:12.5px;font-weight:800;color:#2A1F38;white-space:nowrap} .h2h-fair-mult{text-align:center;font-size:11px;font-weight:700;color:#5A4A72;margin-top:11px} .h2h-fair-level{margin-top:11px;padding-top:11px;border-top:1px solid #ECE2F8; display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} .h2h-fair-level-lbl{font-size:10px;font-weight:700;text-transform:uppercase; letter-spacing:.03em;color:#7B5E9A} .h2h-fair-level-vals{font-size:12px;font-weight:700;color:#2A1F38} .h2h-fair-level-tag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px; margin-left:auto} .h2h-fair-level-lead .h2h-fair-level-tag{background:#E8F5EE;color:#1A5C3A} .h2h-fair-level-gap .h2h-fair-level-tag{background:#FDF2E0;color:#9A6212} /* One comparison metric, a self-contained bite-size card: name + verdict pill, two value tiles side by side (the leader's tile tinted brand purple), one centred gap chip, and - when you're behind - the "How to close it" coaching shown open inline. No tug-of-war bar, no dropdown. */ .h2h-rows{display:flex;flex-direction:column;gap:10px} .h2h-row{background:#FFFFFF;border:1px solid #E2D8EE;border-radius:10px; padding:12px 13px} /* One compact line: metric name (left), the gap chip centred, the verdict pill (right). 1fr/auto/1fr keeps the chip optically centred regardless of the metric name or pill width, and folds the old separate chip line into this row so the card carries no wasted vertical space. */ .h2h-row-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:10px;margin-bottom:10px} .h2h-metric{font-size:12.5px;font-weight:700;color:#3D2E4D;justify-self:start} .h2h-row-top .h2h-verd{justify-self:end} .h2h-verd{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px; white-space:nowrap} .h2h-verd-lead{background:#E8F5EE;color:#1A5C3A} .h2h-verd-gap{background:#FDF2E0;color:#9A6212} .h2h-verd-neck{background:#F4EFF9;color:#3D1558} .h2h-verd-nodata{background:#FAFAF8;color:#9B8AB0} /* Two value tiles. Each tile names its side and shows the metric value big; the leader's tile is tinted + bordered in brand purple (no glow) so "who's ahead" reads instantly without a bar. */ .h2h-versus{display:grid;grid-template-columns:1fr 1fr;gap:10px} .h2h-tile{background:#FAF8FD;border:1px solid #E7DEF4;border-radius:10px; padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0} .h2h-tile-name{font-size:10px;font-weight:700;text-transform:uppercase; letter-spacing:.03em;color:#7E6BA6;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .h2h-tile-you .h2h-tile-name{color:var(--accent)} .h2h-tile-val{font-size:20px;font-weight:800;color:#2A1F38;line-height:1.1; white-space:nowrap} .h2h-tile-lead{background:#F3ECFB;border-color:#C9B3EC} .h2h-tile-lead .h2h-tile-val{color:var(--accent)} /* Centred gap chip - the single takeaway ("4.3K behind . 34%"), tinted by verdict so behind/ahead/level read at a glance. Lives in the row-top's middle grid cell, between the metric name and the verdict pill. */ .h2h-delta{display:flex;justify-content:center;margin:0;justify-self:center} .h2h-delta-inner{font-size:11.5px;font-weight:700;padding:4px 13px;border-radius:20px; white-space:nowrap} .h2h-delta-gap{background:#FDF2E0;color:#9A6212} .h2h-delta-lead{background:#E8F5EE;color:#1A5C3A} .h2h-delta-neck{background:#F4EFF9;color:#3D1558} .h2h-note{font-size:11px;color:#6B5A7E;margin-top:9px;text-align:center} /* "How to close it" - the coaching, shown open inline (no dropdown) in a soft tinted panel so the most useful part of the card is always visible. */ .h2h-close{margin-top:11px;background:#FBF9FE;border:1px solid #E8DFF5; border-radius:10px;padding:11px 13px} .h2h-close-hdr{font-size:10.5px;font-weight:800;text-transform:uppercase; letter-spacing:.05em;color:#7B5E9A;margin-bottom:9px} /* "Build on your best reel": a real reel to model, shown as the same thumbnail + purple View-reel tile used elsewhere, with a short heading above. */ .h2h-gap-model{margin-top:12px;display:flex;flex-direction:column;gap:8px} .h2h-gap-model-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase; letter-spacing:.04em;color:#7B5E9A} .h2h-gap-model .h2h-reel-tile{flex-direction:row;align-items:center;gap:10px} .h2h-gap-model .h2h-reel-thumb{width:54px;height:72px} /* DNA matchup cards. Each card: a title row, two horizontal sides (cover left, details right) for the rival and you, split by a centred VS chip. */ .dna-cards{display:flex;flex-direction:column;gap:12px} .dna-card{background:#FFFFFF;border:1px solid #E2D8EE;border-radius:12px;padding:14px 16px} .dna-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px} .dna-card-title{font-size:11px;font-weight:700;text-transform:uppercase; color:#7B5E9A;letter-spacing:.04em} .dna-card-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch} .dna-side{display:flex;flex-direction:row;gap:12px;align-items:flex-start;min-width:0} /* Centred "VS" badge in the gutter: a thin divider line runs the full height of the card, with the chip masking it at the midpoint - identical on every card. */ .dna-vs{position:relative;display:flex;align-items:center;justify-content:center} .dna-vs::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:#ECE4F6} .dna-vs-chip{position:relative;z-index:1;background:#F3EEFA;border:1px solid #E2D8EE; color:#9A86C0;font-size:9px;font-weight:800;letter-spacing:.04em; width:26px;height:26px;border-radius:50%;display:flex;align-items:center; justify-content:center} .dna-side-info{display:flex;flex-direction:column;align-items:flex-start;gap:5px; min-width:0;flex:1} .dna-thumb{width:84px;height:112px;border-radius:9px;flex-shrink:0} .dna-side-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em} .dna-side-comp .dna-side-name{color:#7E6BA6} .dna-side-you .dna-side-name{color:var(--accent)} .dna-stat{font-size:10.5px;color:var(--muted);font-weight:600} .dna-stat-muted{font-weight:500;opacity:.7;font-style:italic} .dna-views{font-size:.72rem;font-weight:700;color:#542C9E} .dna-cap{font-size:.7rem;line-height:1.35;color:var(--muted);max-width:100%; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .dna-cta{font-size:.68rem;padding:4px 11px;margin-top:2px} /* Best-reel tile: thumbnail + views + purple "View reel" CTA, so opening the reel (which leaves the page) is an unmistakable action. */ /* Horizontal: thumbnail on the left, the reel's stats + caption + CTA fill the space to its right, so a wide DNA column reads as one tile instead of a narrow strip with a big empty band beside it. */ .h2h-reel-tile{display:flex;flex-direction:row;align-items:flex-start;gap:12px; margin-top:4px} .h2h-reel-meta{display:flex;flex-direction:column;align-items:flex-start;gap:5px; min-width:0;flex:1;padding-top:2px} .h2h-reel-thumb{width:74px;height:99px;border-radius:8px;flex-shrink:0} .h2h-reel-views{font-size:.72rem;font-weight:600;color:#542C9E} /* The caption that drove the pattern - clamped to two lines so a long caption adds signal without unbalancing the card. */ .h2h-reel-cap{font-size:.7rem;line-height:1.35;color:var(--muted);max-width:100%; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* The "Build on your best reel" gap tile is a horizontal row with its own label, so the caption is redundant there - keep that tile compact. */ .h2h-gap-model .h2h-reel-cap{display:none} .h2h-reel-cta{font-size:.68rem;padding:4px 11px} .comp-detail-hdr{padding:14px 18px; background:#F4EFF9; border-bottom:1px solid var(--border)} .comp-detail-name{font-size:1.1rem;font-weight:700;color:var(--accent)} .comp-detail-fullname{font-size:.8rem;color:var(--muted);margin-top:2px} .comp-sec{padding:14px 18px;border-bottom:1px solid var(--border)} .comp-sec:last-child{border-bottom:none} .comp-sec-hdr{display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:14px} .comp-sec-num{display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:50%;flex-shrink:0; background:var(--accent);color:#fff;font-size:.68rem;font-weight:800} /* ── Content Strategy sub-tab: three separate cards per competitor ─────────── Strategic Angle (tinted insight lead), Their content formula (number-forward table) and What they post about (themes ranked by reach) each render as their own card, stacked with a gap (.cs-stack wrapper), so each block reads as a distinct table/card rather than one merged panel. */ .comp-strat-table{width:100%;border-collapse:collapse;font-size:.83rem} .cst-desc{margin-top:6px;font-size:.76rem;line-height:1.45;color:var(--muted)} .cs-stack{display:flex;flex-direction:column;gap:14px;margin-bottom:16px} .sa-band{background:#F6F1FC;border:1px solid #E4D7F2;border-radius:12px;padding:16px 18px} .cf-band,.ct-band{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px} .sa-band-title,.cf-band-title,.ct-band-title{font-size:.66rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:#542C9E;margin-bottom:11px} /* Strategic Angle: their read as a quoted lead, then the action in its own accented white panel so the to-do stands apart from the description. */ .sa-tag{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#7B5E9A;margin-bottom:5px} .sa-tag-move{color:#542C9E} .sa-angle{margin-bottom:13px} .sa-angle-quote{margin:0;font-size:.9rem;line-height:1.55;color:var(--text); font-style:italic;padding-left:12px;border-left:3px solid #C4A4E8} .sa-move{background:#fff;border:1px solid #DDD0EE;border-radius:9px;padding:12px 14px} .sa-move-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .sa-move-list li{position:relative;padding-left:21px;font-size:.86rem; line-height:1.5;color:var(--text)} .sa-move-list li::before{content:"\2192";position:absolute;left:0;top:0; color:#542C9E;font-weight:700} /* Their content formula: number-forward table (avg views pulled right). */ .cf-table td{padding:11px 0;border-bottom:1px solid var(--border);vertical-align:top} .cf-table tr:last-child td{border-bottom:none} .cf-table td.cf-key{width:74px;padding:14px 12px 0 0;color:var(--muted); font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700} .cf-cell{min-width:0} .cf-row1{display:flex;align-items:center;justify-content:space-between;gap:10px} .cf-num{flex-shrink:0;font-size:.9rem;font-weight:700;color:#3D1E7A;line-height:1} .cf-row2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px} .cf-count{font-size:.74rem;color:var(--muted)} .cf-sentence{margin-top:12px;padding-top:11px;border-top:1px dashed var(--border); font-size:.84rem;color:var(--muted);line-height:1.6} /* What they post about: numbered theme rows with a reach bar. */ .ct-band-sub{font-size:.78rem;color:var(--muted);line-height:1.45;margin:-6px 0 13px} .ct-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .ct-row{display:flex;gap:11px;align-items:flex-start} .ct-rank{flex-shrink:0;width:22px;padding-top:1px;font-size:.78rem;font-weight:800;color:#C4A4E8} .ct-main{flex:1;min-width:0} .ct-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .ct-name{font-size:.86rem;font-weight:600;color:var(--text)} .ct-views{flex-shrink:0;font-size:.82rem;font-weight:700;color:#3D1E7A} .ct-barwrap{height:6px;margin:6px 0;background:#EFE7F8;border-radius:4px;overflow:hidden} .ct-bar{display:block;height:100%;background:linear-gradient(90deg,#7A4FC0,#542C9E);border-radius:4px} .ct-foot{display:flex;align-items:center;justify-content:space-between;gap:10px} .ct-count{font-size:.74rem;color:var(--muted)} /* Compact the reel-link chip in these two tables: the site-standard IG-icon pill reads a touch heavy in the dense rows, so trim its padding and glyph here. */ .cf-band a.cst-reel,.ct-band a.strategy-topic-cta{padding:4px 9px} .cf-band a.cst-reel::before,.ct-band a.strategy-topic-cta::before{width:11px;height:11px} .cf-band a.cst-reel::after,.ct-band a.strategy-topic-cta::after{font-size:10px;margin-left:3px} .comp-reel-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)} .comp-reel-item:last-child{border-bottom:none;padding-bottom:0} .comp-reel-item:first-child{padding-top:0} .comp-reel-rank{font-size:.95rem;font-weight:700;color:var(--gold); width:26px;flex-shrink:0;padding-top:2px} .comp-reel-body{flex:1;min-width:0} .comp-reel-hook{font-size:.875rem;color:var(--text);margin-bottom:7px; font-style:italic;line-height:1.45;word-break:break-word} .comp-reel-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:8px} .comp-reel-why{font-size:.77rem;color:var(--muted);line-height:1.55;font-style:italic} .comp-sub-hdr{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em; color:var(--muted);margin:14px 0 4px;padding-top:12px;border-top:1px dashed var(--border)} .comp-sub-hdr--worst{color:#C4756A;border-top-color:#EDD5D0} .comp-sub-note{font-size:.74rem;line-height:1.5;color:var(--muted);margin:0 0 10px} .comp-reel-item:has(+ .comp-sub-hdr){border-bottom:none;padding-bottom:0} /* Poster thumbnail in the Top/Worst reel rows - fills the left gutter that was otherwise white space. Reuses the .fb-reel-thumb look (scrim + play glyph) at a row-fit size; sits between the rank badge and the reel body. A tile whose image can't be served hides itself (see _compReelThumb). */ .comp-reel-thumb{flex-shrink:0;display:block;line-height:0;text-decoration:none; align-self:flex-start} .comp-reel-thumb-img{width:60px;height:80px;border-radius:8px} .comp-reel-thumb .fb-reel-play{font-size:1.05rem} .comp-reel-thumb:hover .fb-reel-thumb{transform:translateY(-2px); box-shadow:0 6px 16px rgba(192,138,46,.22);border-color:#C08A2E} .comp-hash-list{display:flex;flex-wrap:wrap;gap:8px} .comp-hash-chip{background:var(--surface2);border:1px solid var(--border); border-radius:6px;padding:5px 10px;font-size:.78rem; color:var(--accent);display:flex;align-items:center;gap:7px} .comp-hash-untapped{background:#FDF5E0;border-color:#D4C870;color:#7B4A00} .untapped-label{font-size:.67rem;font-weight:700;color:#7B4A00; background:#FDF5E0;border:1px solid #D4C870; border-radius:4px;padding:1px 6px;white-space:nowrap} .comp-no-data{font-size:.83rem;color:var(--hint);font-style:italic;padding:2px 0} /* ── Hashtag Intelligence: per-tag table with real numbers ──────────────── */ .comp-hash-statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px; margin:8px 0 10px} .comp-hash-stat{background:#FAF8FC;border:1px solid #E2D8EE;border-radius:8px; padding:9px 6px;text-align:center;display:flex;flex-direction:column;gap:2px} .comp-hash-stat .chs-num{font-size:1.18rem;font-weight:800;color:#542C9E; line-height:1.05;letter-spacing:-.01em} .comp-hash-stat .chs-lbl{font-size:.64rem;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:#7B5E9A} .comp-hash-stat-key{background:#FDF5E0;border-color:#D4C870} .comp-hash-stat-key .chs-num{color:#7B4A00} .comp-hash-stat-key .chs-lbl{color:#7B4A00} @media(max-width:520px){.comp-hash-statbar{grid-template-columns:repeat(2,1fr)}} .comp-hash-summary{font-size:.84rem;color:var(--text);line-height:1.55; background:#FAF7FD;border:1px solid #E2D8EE;border-radius:8px; padding:10px 14px;margin:0 0 12px} .comp-hash-summary strong{color:#542C9E} .comp-hash-empty{font-size:.84rem;color:var(--hint);font-style:italic; padding:10px 0} .comp-hash-table-wrap{overflow-x:auto} .comp-hash-table{width:100%;min-width:660px;border-collapse:collapse;font-size:.84rem} .comp-hash-table thead th{font-size:.7rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:#7B5E9A;text-align:left; padding:8px 10px;border-bottom:1px solid #E2D8EE;background:#FAF8FC} .comp-hash-table tbody td{padding:9px 10px;border-bottom:1px solid #F1ECF6; vertical-align:middle} .comp-hash-table tbody tr:last-child td{border-bottom:none} .comp-hash-table .hash-tag{font-weight:600;color:#542C9E;white-space:nowrap} .comp-hash-table .hash-count, .comp-hash-table .hash-avg{color:var(--text);white-space:nowrap} .comp-hash-table .hash-best{white-space:nowrap} .comp-hash-table .hash-best-num{color:var(--text);font-weight:700;white-space:nowrap} .comp-hash-table .hash-reel-cta{white-space:nowrap} /* Even column spacing across the seven columns (auto layout uses these as hints; nowrap cells hold their width). */ .comp-hash-table th:nth-child(1),.comp-hash-table td:nth-child(1){width:20%} .comp-hash-table th:nth-child(2),.comp-hash-table td:nth-child(2){width:11%} .comp-hash-table th:nth-child(3),.comp-hash-table td:nth-child(3){width:15%} .comp-hash-table th:nth-child(4),.comp-hash-table td:nth-child(4){width:12%} .comp-hash-table th:nth-child(5),.comp-hash-table td:nth-child(5){width:14%} .comp-hash-table th:nth-child(6),.comp-hash-table td:nth-child(6){width:13%} .comp-hash-table th:nth-child(7),.comp-hash-table td:nth-child(7){width:15%} .comp-hash-table .hash-status-cell{white-space:nowrap} .comp-hash-table .hash-lift-cell, .comp-hash-table .hash-you-cell{white-space:nowrap} .hash-cell-na{color:var(--hint)} /* Performance lift vs the account's own average reach */ .hash-lift{display:inline-block;font-size:.78rem;font-weight:700; padding:1px 7px;border-radius:10px;letter-spacing:.01em} .hash-lift-up{background:#E8F0E8;color:#2A5C3A} .hash-lift-down{background:#FBEDEA;color:#B0584B} .hash-lift-flat{background:var(--surface2);color:var(--muted)} /* Head-to-head: the user's own reach on the same tag */ .hash-you-num{display:block;font-weight:700;color:var(--text);line-height:1.15} .hash-you-sub{display:block;font-size:.68rem;color:var(--muted)} .hash-view-reel{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} .hash-view-reel:hover{background:#3D1E7A;transform:translateY(-1px); box-shadow:0 2px 6px rgba(60,21,88,.18)} .hash-status{display:inline-block;font-size:.67rem;font-weight:700; letter-spacing:.04em;text-transform:uppercase;padding:2px 8px; border-radius:10px;white-space:nowrap} .hash-status-untapped{background:#FDF5E0;color:#7B4A00; border:1px solid #D4C870} .hash-status-shared{background:#E8F0E8;color:#2A5C3A; border:1px solid #A3C8A8} .hash-row-untapped{background:#FFFBF0} .comp-gap-item{background:var(--surface2);border-radius:8px; padding:10px 14px;margin-bottom:8px} .comp-gap-item:last-child{margin-bottom:0} .comp-gap-stat{color:var(--text);font-size:.84rem;line-height:1.6;margin-bottom:7px} .comp-gap-brief{color:var(--muted);font-size:.79rem;font-style:italic;line-height:1.55} .comp-threat-body{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .threat-badge{display:inline-block;padding:8px 22px;border-radius:8px; font-size:.875rem;font-weight:700;letter-spacing:.03em;white-space:nowrap} .threat-high {background:#FDF3F1;border:2px solid #EDD5D0;color:#C4756A} .threat-medium{background:#FDF2E0;border:2px solid #E8C870;color:#7A4A0A} .threat-low {background:#E8F5EE;border:2px solid #7BBDA0;color:#1A5C3A} .comp-threat-rationale{font-size:.875rem;color:var(--muted);line-height:1.6} /* ── Your Next 4 Posts ──────────────────────────────────────────────────────── */ .personalised-badge{font-size:.625rem;background:#F4EFF9;color:#542C9E; border:1px solid #DDD0EE;border-radius:5px;padding:3px 9px;font-weight:600; white-space:nowrap;letter-spacing:.03em} /* Intro line: the calendar blurb sits left of the "Personalised" badge. The badge never shrinks (nowrap), so on a phone it stacks below the blurb instead of crushing it into a one-word-per-line column (see styles-mobile.css). */ .post-plan-intro{display:flex;align-items:flex-start;justify-content:space-between; gap:16px;margin-bottom:4px} .post-plan-intro .post-plan-sub{margin:0} .post-plan-intro .personalised-badge{flex:none} .post-plan-sub{font-size:.8125rem;color:#4A3D5C;text-align:left; margin-bottom:24px;line-height:1.6;margin-top:6px} /* The month plan: a row of Week tabs (always all visible) over the active week's cards. No inner scroll, no hidden weeks - the reader sees Week 1-4 up front and switches between them, so it can never look like "just 4 posts". */ .post-plan-grid{display:flex;flex-direction:column;gap:14px} /* ── Monthly lens banner: the retention engine's header. THIS month's angle as a hero, the 4-month rotation as a connected roadmap TIMELINE (a progress indicator, not clickable), the next month as a reward, the never-repeat line as proof. Soft lavender, light not a heavy dark block. ─────────────────────── */ .lens-banner{background:#F6F1FC;border:1px solid #E4D8F4; border-left:3px solid #7A4FC0;border-radius:12px;padding:15px 18px} /* Hero: this month, stated big so it carries the card. */ .lens-hero{display:flex;flex-direction:column;gap:3px} .lens-eyebrow{font-size:.625rem;text-transform:uppercase;letter-spacing:.08em; color:#8A6FB0;font-weight:800} .lens-name{margin:1px 0 0;font-size:1.18rem;font-weight:800;color:#3D1E7A; line-height:1.18;letter-spacing:-.01em} .lens-tagline{font-size:.82rem;line-height:1.5;color:#5A4A70;margin:2px 0 0} /* The rotation: a connected 4-month TIMELINE. Divider above it so it reads as its own section; a "Month N" position pill sits opposite the label. */ .lens-rotation{margin:14px 0 0;padding:14px 0 0;border-top:1px solid #E7DCF5} .lens-rotation-head{display:flex;align-items:center;justify-content:space-between; gap:10px;margin:0 0 13px} .lens-rotation-lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.09em; font-weight:800;color:#8A6FB0} .lens-rotation-pos{font-size:.58rem;text-transform:uppercase;letter-spacing:.06em; font-weight:800;color:#5E2FAE;background:#EBE0FB;border:1px solid #D8C8F2; border-radius:20px;padding:2px 9px;white-space:nowrap} /* Each month is a node on a track. Equal columns; a connector line runs behind the nodes, filling in (purple) for the months already reached. Not clickable. */ .lens-track{list-style:none;display:flex;margin:0;padding:0} .lens-step{flex:1 1 0;position:relative;display:flex;flex-direction:column; align-items:center;text-align:center;gap:7px;padding:0 3px} .lens-step::before{content:"";position:absolute;top:14px;left:-50%;width:100%; height:2px;background:#E2D5F3;z-index:0} .lens-step:first-child::before{display:none} .lens-node{position:relative;z-index:1;width:29px;height:29px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:#fff;border:2px solid #DCCDF1;color:#9684AC; font-size:.74rem;font-weight:800} .lens-step-lbl{font-size:.625rem;line-height:1.25;color:#8E7FA6;font-weight:600; max-width:84px} .lens-step-tag{font-size:.5rem;text-transform:uppercase;letter-spacing:.06em; font-weight:800;color:#B3A6C8} /* Active = this month: filled, enlarged, named in dark; its connector is filled. */ .lens-step--active .lens-node{background:#7A4FC0;border-color:#7A4FC0;color:#fff; transform:scale(1.14)} .lens-step--active .lens-step-lbl{color:#3D1E7A;font-weight:800} .lens-step--active .lens-step-tag{color:#7A4FC0} .lens-step--active::before{background:#7A4FC0} /* Done = a month already delivered: ticked green, its connector filled. */ .lens-step--done .lens-node{background:#E1F1E1;border-color:#BFE0BF;color:#3C7A3C} .lens-step--done .lens-step-lbl{color:#4E6E4E} .lens-step--done .lens-step-tag{color:#79A879} .lens-step--done::before{background:#7A4FC0} /* Upcoming = locked, coming. Hollow dashed node, but the tag carries the personal unlock DATE in purple so it reads as "this is yours on this day", not "denied". */ .lens-step--upcoming .lens-node{border-style:dashed;color:#B6A6D0} .lens-step--upcoming .lens-node-lock{color:#B6A6D0} .lens-step--upcoming .lens-step-tag{color:#7A4FC0;letter-spacing:.02em} /* The never-repeat promise: the single line that earns the recurring payment, so it must READ as a feature, not faded fine print. Larger, darker, weighted, with a soft lavender chip behind it and an accent rule so the eye lands on it. */ .lens-track-note{font-size:.8rem;font-weight:600;font-style:italic;color:#3D1E7A; margin:11px 0 0;line-height:1.5;padding:8px 12px; background:#F3ECFD;border-left:3px solid #7A4FC0;border-radius:0 8px 8px 0} .lens-track-note strong{font-weight:800;font-style:normal} /* "Unlocks next month": the renewal hook. A deeper purple card (one shade richer than the banner so it pops as the reward), the next angle named in bold. No glow - solid fill + border only. */ .lens-next{margin:12px 0 0;padding:11px 14px;border-radius:10px; background:#EDE2FB;border:1px solid #D2BEF2} .lens-next-eyebrow{display:inline-flex;align-items:center;gap:5px; font-size:.6rem;text-transform:uppercase;letter-spacing:.08em; font-weight:800;color:#5E2FAE} .lens-next-eyebrow svg{flex:none} .lens-next-line{margin:4px 0 0;font-size:.86rem;line-height:1.5;color:#36206B} .lens-next-line strong{font-weight:800;color:#4A21A0} /* The freshness promise under the next-month line: why next month is worth the wait (rebuilt from new data + competitor activity). Quieter than the headline. */ .lens-next-fresh{margin:7px 0 0;font-size:.75rem;line-height:1.5;color:#5A3F86} /* Slim posts-page banner: the hook only. A link through to the full roadmap on the Future tab sits at the foot. */ .lens-future-link{display:inline-block;margin:11px 0 0;font-size:.74rem; font-weight:800;color:#5E2FAE;text-decoration:none} .lens-future-link:hover{text-decoration:underline} /* ── The Future tab: the full rotation story below the banner. ────────────── */ #post-future-body{display:flex;flex-direction:column;gap:16px} .lens-section-lbl{display:block;font-size:.6rem;text-transform:uppercase; letter-spacing:.09em;font-weight:800;color:#8A6FB0;margin:0 0 10px} /* Every angle explained: one light card per angle, its state badged. */ .lens-angles{background:#FAF7FE;border:1px solid #E9DFF7;border-radius:12px;padding:15px 16px} .lens-angle-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .lens-angle{padding:11px 13px;border-radius:10px;background:#fff;border:1px solid #ECE4F6} .lens-angle-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .lens-angle-name{font-size:.86rem;font-weight:800;color:#3D1E7A} .lens-angle-desc{margin:4px 0 0;font-size:.78rem;line-height:1.5;color:#5A4A70} .lens-angle-badge{flex:none;font-size:.55rem;text-transform:uppercase; letter-spacing:.06em;font-weight:800;border-radius:20px;padding:2px 9px; color:#9684AC;background:#F0EAF8;border:1px solid #E2D6F2} .lens-angle--active{border-color:#C9B4F0;background:#F5EFFD} .lens-angle--active .lens-angle-badge{color:#fff;background:#7A4FC0;border-color:#7A4FC0} .lens-angle--done .lens-angle-badge{color:#3C7A3C;background:#E1F1E1;border-color:#BFE0BF} .lens-angle--upcoming .lens-angle-name{color:#6E5C88} /* Upcoming badge carries the personal "Unlocks 10 July" date - tint it purple so it reads as an invitation/countdown, not a grey "locked" chip. */ .lens-angle--upcoming .lens-angle-badge{color:#5E2FAE;background:#EDE2FB;border-color:#D2BEF2} /* Months delivered: a compact log, newest first, the current month flagged. */ .lens-history{background:#FAF7FE;border:1px solid #E9DFF7;border-radius:12px;padding:15px 16px} .lens-history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px} .lens-history-row{display:flex;align-items:baseline;gap:10px;padding:8px 2px; border-bottom:1px solid #EFE7F8} .lens-history-row:last-child{border-bottom:none} .lens-history-month{flex:0 0 auto;min-width:84px;font-size:.78rem;font-weight:800;color:#3D1E7A} .lens-history-lens{flex:1 1 auto;font-size:.78rem;color:#5A4A70} .lens-history-count{flex:none;font-size:.72rem;color:#8E7FA6;font-weight:700} .lens-history-now{flex:none;font-size:.55rem;text-transform:uppercase;letter-spacing:.06em; font-weight:800;color:#fff;background:#7A4FC0;border-radius:20px;padding:2px 8px} .lens-history-row.is-current .lens-history-lens{color:#3D1E7A;font-weight:700} /* ── Retention loop: how last month's plan played out. ────────────────────── */ .loop-card{background:#F4FBF4;border:1px solid #CDE9CD;border-radius:10px;padding:13px 16px} .loop-eyebrow{font-size:.625rem;text-transform:uppercase;letter-spacing:.07em; color:#3C7A3C;font-weight:700} .loop-headline{font-size:.86rem;color:#1E3D1E;line-height:1.5;margin-top:4px} .loop-headline strong{font-weight:700} .loop-up{color:#2E7D32} .loop-down{color:#B23B30} .loop-chips{margin-top:8px} .loop-chip{display:inline-block;background:#E4F4E4;border:1px solid #C2E2C2; border-radius:20px;padding:2px 10px;font-size:.66rem;color:#2E6B2E;font-weight:600} .loop-best{margin-top:9px;font-size:.76rem;color:#2C3D2C;display:flex; flex-wrap:wrap;align-items:center;gap:8px} .loop-best-hook{font-style:italic;color:#1E3D1E} .loop-best-views{font-weight:600;color:#3C7A3C} /* Scope line + week dropdown on one row: the post/week count on the left, the site-standard time-window