/* Profile examples pages (build/profileExamplePages.ts). Builds on
   profile-review.css and adds the hero, the example layout, the Tinder and
   Bumble screens, the Hinge screenshots and the review modal. The screens are
   laid out in the points of a 390pt-wide iPhone screen and scale with their
   column: --px is one of those points. */

/* Sections alternate between the home page's two navies
   (src/components/Home/sectionColors.ts): the header and hero on the lighter
   one, then each example in its own band, starting dark, then the call to
   action for a rating on the navy the last example isn't on, then the
   section on AI photos, with its own call to action, on the review pages'
   light paper band, above the dark footer. */
:root { --section-dark: #0a1120; --section-light: #15233b; }
body { background: var(--section-light); }
.example-band:nth-of-type(odd) { background: var(--section-dark); }
.closing-cta { background: var(--section-light); border-block: 0; }
.examples:has(> .example-band:last-of-type:nth-of-type(even)) + .closing-cta { background: var(--section-dark); }
.ai-photos .button { margin-top: 48px; }
/* Every section has the same space above and below its content. */
:root { --section-space: 24px; }
.examples-hero, .example, .closing-cta, .ai-photos .section { padding-block: var(--section-space); }
/* The AI section's reveal, in the "AI Generated" stamp's orange, darkened
   to read on the paper band. */
.ai-photos h2 strong { color: #c2410c; font-weight: inherit; }

/* The headline is "<app> Profile", "Examples for" and "Men (<year>)" on three
   lines, then the app's icon, tilted as on the review pages. The text fills about
   75% of the row and the icon the rest, scaling with the column up to 520px:
   --title-em, set per page, is the width of the longest line in ems. */
.examples-hero h1 { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 72fr) minmax(0, 24fr); column-gap: 4%; align-items: center; width: min(100%, 520px); line-height: 1.02; }
/* Letter spacing is set here so its em is the title's own size. */
.examples-title { display: block; font-size: calc(72cqi / var(--title-em)); letter-spacing: -.065em; white-space: nowrap; }
.examples-title span { color: var(--cyan); }
.examples-hero .app-badge { position: static; width: 100%; height: auto; border-radius: 22%; transform: rotate(8deg); }

/* Each example: the app screen beside the name, the profile score, the
   scored photos and the notes on them, which fill the rest of the row. The
   screen's column is sized here, since the screen (a size container) has no
   width of its own. */
.example { --shot-width: 340px; display: grid; grid-template-columns: var(--shot-width) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "shot head" "shot scores" "shot notes"; column-gap: 72px; row-gap: 24px; }
/* The screens stay shorter than the window, so there's always page around
   them to scroll by: --screen-points, set per example, is the screen's
   height in its 390pt-wide points. */
.example:has(.app-screen) { --shot-width: min(360px, calc(82svh * 390 / var(--screen-points, 580))); }
.example-head { grid-area: head; }
.example-head .eyebrow { margin-bottom: 10px; }
.example-head h2 { font-size: 40px; }
.example-scores { grid-area: scores; }
/* Score and label on one line at every width. */
.example .lineup-score { flex-direction: row; align-items: baseline; margin: 0 0 6px; text-align: left; }
.example-scores .lineup-photos { grid-template-columns: repeat(3, 1fr); }
/* Just under the score, above the photos it's about. */
.example-hint { margin-bottom: 16px; color: var(--muted); font-size: 13px; }
.example-shot { grid-area: shot; align-self: start; container-type: inline-size; width: 100%; }
.example-notes { grid-area: notes; max-width: 640px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.example-notes p + p { margin-top: 14px; }

/* App screens: each app's preview of your own profile, cropped to the name
   and photo, measured on iPhone screenshots in the points of a 390pt-wide
   screen. */
/* Square-cornered, like a screenshot (Chris: sharp corners look more authentic). */
.app-screen { --px: calc(100cqw / 390); position: relative; isolation: isolate; overflow: hidden; box-shadow: 0 0 0 1px #ffffff26, 0 30px 60px #0007; font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif; line-height: 1.2; text-align: left; -webkit-user-select: none; user-select: none; }
/* Photos fill their frames. The apps' own icons are images too, cut from
   the screenshots and sized in the builder (uiIcon), and placed here where
   the screenshots have them. */
.app-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Text scribbled out in marker (scribbled() in the builder): invisible
   letters of about the covered text's width, under strokes sized in em so
   they keep their weight at any size, reaching a little above the capitals,
   below the line and past each end. */
.scribbled { position: relative; display: inline-block; color: transparent; text-shadow: none; font-variant-numeric: tabular-nums; }
.scribble { position: absolute; top: .12em; left: -.1em; width: calc(100% + .2em); height: 1em; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: #0b0b0b; stroke-width: .17em; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.app-screen :focus-visible { outline-offset: -3px; }

/* Tinder, in four layouts (tinderLayouts in the builder). "view": Edit
   Profile's View on iPhone, the name in bold and the age beside the black
   collapse button, then the photo edge to edge at 3:4 with its bars and
   menu dots. */
.tinder-screen { background: #f0eeef; color: #111; }
.tinder-head { position: relative; display: flex; align-items: center; height: calc(58 * var(--px)); padding-left: calc(17 * var(--px)); }
.tinder-name { font-size: calc(28 * var(--px)); font-weight: 400; letter-spacing: -.01em; }
.tinder-name strong { font-weight: 700; }
.tinder-collapse { position: absolute; top: calc(13.64 * var(--px)); right: calc(20.71 * var(--px)); }
.tinder-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #111; }
.tinder-photo { position: absolute; inset: 0; }
.tinder-photo[hidden] { display: none; }
.tinder-bars { position: absolute; top: calc(12 * var(--px)); left: calc(16 * var(--px)); right: calc(16 * var(--px)); z-index: 2; display: flex; gap: calc(3.5 * var(--px)); }
.tinder-bars span { flex: 1; height: calc(3 * var(--px)); border-radius: 99px; background: #00000094; }
.tinder-bars .is-active { background: #fff; }
.tinder-dots { position: absolute; top: calc(31.27 * var(--px)); right: calc(23.66 * var(--px)); z-index: 2; }
/* Tapping the left or right half of the photo steps through the photos. */
.tinder-tap { position: absolute; top: 0; bottom: 0; z-index: 3; width: 50%; padding: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tinder-tap[data-tap="-1"] { left: 0; }
.tinder-tap[data-tap="1"] { right: 0; }
/* Tinder's verified check: at the photo's bottom left on "view" and after
   the age on "preview". */
.tinder-preview .tinder-verified { margin-left: calc(-1.26 * var(--px)); }
.tinder-view .tinder-verified { position: absolute; left: calc(20.7 * var(--px)); bottom: calc(16.05 * var(--px)); z-index: 2; }
/* The card under the photo (College Details on "view", Looking for on
   "view-android"), with rounded top corners on the page's darker band. */
.tinder-below { padding-top: calc(8.5 * var(--px)); background: #e4dfdf; }
.tinder-details { padding: calc(24 * var(--px)) calc(23 * var(--px)) calc(23 * var(--px)); border-radius: calc(13 * var(--px)) calc(13 * var(--px)) 0 0; background: #f0eeef; }
/* Sizes are a little under the screenshots' so Inter (wider than Apple's
   system font) takes the same width. */
.tinder-details-heading { display: flex; align-items: center; gap: calc(6.38 * var(--px)); color: #7d7a7b; font-size: calc(14.5 * var(--px)); font-weight: 600; line-height: calc(19 * var(--px)); }
.tinder-heading-icon { flex: none; margin-left: calc(-.61 * var(--px)); }
.tinder-details ul { margin: calc(15.7 * var(--px)) 0 0; padding: 0; list-style: none; }
/* The rows' icons are centered on one line, 32.74pt from the screen's edge. */
.tinder-details li { display: grid; grid-template-columns: calc(19.02 * var(--px)) 1fr; align-items: center; column-gap: calc(5.35 * var(--px)); height: calc(38 * var(--px)); padding-left: calc(.23 * var(--px)); color: #0e0e0e; font-size: calc(16.2 * var(--px)); font-weight: 500; }
.tinder-details li + li { border-top: 1px solid #e2dfe0; }
.tinder-row-icon { justify-self: center; }
/* "view-android": the same View on Android, with a comma after the name, a
   bigger button, a shorter photo with rounded bottom corners over the page,
   thicker, wider-spaced bars, and the Looking for card below. */
/* The header on the page's light gray, then the darker band behind the
   photo's rounded corners and the card. */
.tinder-view-android { background: linear-gradient(#f0eeef calc(60 * var(--px)), #e2e0df 0); }
.tinder-view-android .tinder-head { height: calc(60 * var(--px)); padding-inline: calc(19 * var(--px)) calc(18 * var(--px)); }
.tinder-view-android .tinder-below { padding-top: calc(10 * var(--px)); background: none; }
.tinder-view-android .tinder-details { padding: calc(25 * var(--px)) calc(18.5 * var(--px)) calc(18 * var(--px)); border-radius: calc(16 * var(--px)) calc(16 * var(--px)) 0 0; }
.tinder-view-android .tinder-details-heading { gap: calc(7.17 * var(--px)); color: #3a3839; font-size: calc(15.8 * var(--px)); }
.tinder-view-android .tinder-heading-icon { margin-left: calc(-2.03 * var(--px)); }
.tinder-goal { margin-top: calc(9 * var(--px)); padding: 0 0 calc(18 * var(--px)) calc(4 * var(--px)); border-bottom: 1px solid #e2dfe0; color: #111; font-size: calc(21.3 * var(--px)); font-weight: 600; letter-spacing: -.01em; }
.tinder-tag { width: fit-content; margin-top: calc(18 * var(--px)); padding: calc(9 * var(--px)) calc(11 * var(--px)); border-radius: 99px; background: #e6e3e4; color: #a3a0a1; font-size: calc(16.6 * var(--px)); }
.tinder-view-android .tinder-name { font-size: calc(30 * var(--px)); }
.tinder-view-android .tinder-collapse { top: calc(10.17 * var(--px)); right: calc(16.88 * var(--px)); }
.tinder-view-android .tinder-card { aspect-ratio: .799; border-radius: 0 0 calc(16 * var(--px)) calc(16 * var(--px)); }
.tinder-view-android .tinder-bars { top: calc(8 * var(--px)); left: calc(11 * var(--px)); right: calc(11 * var(--px)); gap: calc(5.8 * var(--px)); }
.tinder-view-android .tinder-bars span { height: calc(4.5 * var(--px)); }
/* "preview" (Preview Profile) and "preview-light": the photo as a card inset
   5pt on the page, with the name and bio over its bottom beside an up
   button, dark with a thin light ring on "preview" and white on
   "preview-light". */
.tinder-preview, .tinder-preview-light { padding: calc(5 * var(--px)); }
.tinder-preview .tinder-card { aspect-ratio: .563; border-radius: calc(18 * var(--px)); }
.tinder-preview-light .tinder-card { aspect-ratio: .626; border-radius: calc(16 * var(--px)); }
.tinder-preview .tinder-bars { top: calc(12.7 * var(--px)); left: calc(16.5 * var(--px)); right: calc(16.5 * var(--px)); gap: calc(4 * var(--px)); }
.tinder-preview .tinder-bars span { height: calc(2.5 * var(--px)); }
.tinder-preview-light .tinder-bars { gap: calc(4.3 * var(--px)); }
.tinder-preview-light .tinder-bars span { height: calc(2.9 * var(--px)); }
.tinder-preview .tinder-card::after, .tinder-preview-light .tinder-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, #0000 62%, #00000080); pointer-events: none; }
.tinder-overlay { position: absolute; left: calc(18 * var(--px)); right: calc(16 * var(--px)); bottom: calc(52.75 * var(--px)); z-index: 2; color: #fff; pointer-events: none; }
.tinder-overlay-row { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--px)); }
.tinder-overlay .tinder-name { display: flex; align-items: center; gap: calc(9 * var(--px)); font-size: calc(27 * var(--px)); text-shadow: 0 1px 4px #0006; }
.tinder-overlay .tinder-name strong { margin-right: calc(-1 * var(--px)); }
/* Small enough that the template's one-line bio stays on one line in Inter. */
.tinder-bio { margin-top: calc(7 * var(--px)); font-size: calc(13 * var(--px)); line-height: 1.3; letter-spacing: -.005em; text-shadow: 0 1px 3px #0008; }
.tinder-preview .tinder-bio { margin-top: calc(3.9 * var(--px)); }
/* The up button's right edge where the screenshots have it, centered on the
   name's capitals. */
.tinder-expand { flex: none; margin-right: calc(-1.22 * var(--px)); translate: 0 calc(-1.4 * var(--px)); }
.tinder-preview-light .tinder-overlay { left: calc(16 * var(--px)); bottom: calc(52 * var(--px)); }
.tinder-preview-light .tinder-expand { margin-right: calc(-.83 * var(--px)); translate: none; }
/* "preview-light"'s gray camera badge after the age. */
.tinder-camera { flex: none; }

/* Bumble, in four layouts (bumbleLayouts in the builder), the photo inset on
   the white page with rounded corners. "header": the close button and the
   name and age centered above a 3:4 photo, 20pt in from the sides. */
.bumble-screen { padding: 0 calc(20 * var(--px)) calc(20 * var(--px)); background: #fff; color: #1b1b1b; }
.bumble-head { position: relative; display: flex; align-items: center; justify-content: center; height: calc(58 * var(--px)); }
/* The close cross where each screenshot has it. */
.bumble-close { position: absolute; top: calc(16.6 * var(--px)); left: calc(-3.89 * var(--px)); }
.bumble-overlay .bumble-close { top: calc(17.35 * var(--px)); }
.bumble-overlay-wide .bumble-close { top: calc(17.58 * var(--px)); left: calc(.59 * var(--px)); }
.bumble-name { font-size: calc(16 * var(--px)); font-weight: 700; letter-spacing: -.01em; }
.bumble-photo { position: relative; aspect-ratio: 3 / 4; margin-top: calc(1 * var(--px)); overflow: hidden; border-radius: calc(14 * var(--px)); background: #ddd; box-shadow: 0 calc(1 * var(--px)) calc(8 * var(--px)) #0000000f; }
/* "overlay" and "overlay-wide": the header, then a taller photo starting
   closer under it, with the verified pill, name, job and school over its
   bottom left ("overlay-wide" 18pt in from the sides). */
.bumble-overlay .bumble-photo { aspect-ratio: .544; margin-top: calc(-8 * var(--px)); }
.bumble-overlay-wide { padding: 0 calc(18 * var(--px)) calc(18 * var(--px)); }
.bumble-overlay-wide .bumble-photo { aspect-ratio: .537; margin-top: calc(-10 * var(--px)); }
/* "close-button": no header, just a tall photo 7pt in from every edge with
   the same over it. */
.bumble-close-button { padding: calc(7 * var(--px)); }
.bumble-close-button .bumble-photo { aspect-ratio: .551; margin-top: 0; border-radius: calc(13 * var(--px)); }
.bumble-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, #0000 60%, #00000080); pointer-events: none; }
.bumble-header .bumble-photo::after { content: none; }
/* Left-aligned on the line icons' left edge. */
.bumble-overlay-text { position: absolute; left: calc(15.26 * var(--px)); bottom: calc(33 * var(--px)); z-index: 1; display: flex; flex-direction: column; align-items: flex-start; color: #fff; text-shadow: 0 1px 4px #0006; }
.bumble-overlay-wide .bumble-overlay-text { left: calc(13.94 * var(--px)); bottom: calc(30.6 * var(--px)); }
.bumble-close-button .bumble-overlay-text { left: calc(18.92 * var(--px)); bottom: calc(19 * var(--px)); }
/* The verified pill, its text and all, from the screenshot of its kind. */
.bumble-verified { flex: none; margin: 0 0 calc(9.7 * var(--px)) calc(-.43 * var(--px)); }
.bumble-close-button .bumble-verified { margin: 0 0 calc(10.4 * var(--px)) calc(-.39 * var(--px)); }
.bumble-overlay-wide .bumble-verified { margin: 0 0 calc(9.1 * var(--px)); }
.bumble-photo-name { font-size: calc(18.5 * var(--px)); font-weight: 700; letter-spacing: -.01em; }
.bumble-close-button .bumble-photo-name { font-size: calc(17 * var(--px)); }
.bumble-overlay-wide .bumble-photo-name { font-size: calc(18 * var(--px)); }
.bumble-line { display: flex; align-items: center; gap: calc(8 * var(--px)); margin-top: calc(7 * var(--px)); font-size: calc(15 * var(--px)); font-weight: 600; }
.bumble-close-button .bumble-line { gap: calc(3.8 * var(--px)); margin-top: calc(10.2 * var(--px)); }
.bumble-overlay-wide .bumble-line { gap: calc(7 * var(--px)); margin-top: calc(5.3 * var(--px)); }
.bumble-overlay-wide .bumble-line + .bumble-line { margin-top: calc(1.9 * var(--px)); }
.bumble-line-icon { flex: none; }

/* Hinge: "Profile <n>: <name>", then the profile's real Edit Profile
   screenshots, each in its own section under a cyan heading and cropped a
   little differently for each profile: its photos (from an iPhone at 3x)
   beside its prompts (at 2x) and the paragraph on the whole profile under
   them, in columns that make the screenshots the
   same height (--hinge-columns, set per profile). Then the button to its
   full review across both. The name sits closer to the sections than the
   grid's gap. */
.example.hinge-example { grid-template-columns: var(--hinge-columns, minmax(0, 1fr) minmax(0, 1fr)); grid-template-rows: none; grid-template-areas: "head head" "photos prompts" "review review"; column-gap: 40px; row-gap: 28px; }
.example.hinge-example .example-head { margin-bottom: -16px; }
.hinge-photos { grid-area: photos; }
.hinge-prompts { grid-area: prompts; }
.hinge-part h3 { margin-bottom: 14px; color: var(--cyan); }
.hinge-shot { margin: 0; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #ffffff26, 0 30px 60px #0007; }
.hinge-shot img { display: block; width: 100%; height: auto; }
.hinge-note { margin-top: 20px; color: var(--muted); font-size: 15px; line-height: 1.7; text-wrap: balance; }
/* The review button spans the row, a light sweeping along its border every
   few seconds (::before is the border, masked to a 2px ring). */
.review-link { grid-area: review; position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 20px; background: #37dced14; color: var(--cyan); font-size: 20px; font-weight: 600; text-decoration: none; transition: background .2s; }
.review-link::before { content: ''; position: absolute; inset: 0; padding: 2px; background: linear-gradient(100deg, var(--cyan) 40%, #e6fdff 50%, var(--cyan) 60%) 0 0 / 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: review-link-shimmer 3.5s linear infinite; pointer-events: none; }
.review-link:hover { background: #37dced29; }
.review-link svg { flex: none; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes review-link-shimmer { 0% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .review-link::before { animation: none; } }
/* The statement under the headline, its key figure in bold cyan. */
.examples-subtitle { max-width: 520px; margin-top: 24px; color: #fff; font-size: 19px; font-weight: 500; line-height: 1.5; }
.examples-subtitle strong { color: var(--cyan); font-weight: 700; white-space: nowrap; }

/* Without an app screen or screenshot, the name and notes take the screen's
   column, beside the photos. */
.example:not(:has(.example-shot, .hinge-shot)) { grid-template-rows: auto 1fr; grid-template-areas: "head scores" "notes scores"; }

/* Stacked until the scored photos have room beside the screen: name, then
   the screen, then the photos at full width, then the notes. */
@media (max-width: 900px) {
  .example { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "shot" "scores" "notes"; }
  .example:not(:has(.example-shot, .hinge-shot)) { grid-template-rows: none; grid-template-areas: "head" "scores" "notes"; }
  .example-shot { width: min(100%, var(--shot-width)); justify-self: center; }
  /* On Hinge, the photos, the prompts and the button one under another, in a
     column no wider than a phone's screenshot needs. */
  .example.hinge-example { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "photos" "prompts" "review"; max-width: 520px; }
}

/* "Full Profile Review": the app's profile review (ProfileReviewDetails.tsx)
   in a modal, in the photo view's gray palette. The score and the photo grid
   sit beside the trait bars from 768px, as in the app, and above them below
   that. Its children fill the dialog, so a click on the dialog itself is a
   click on the backdrop. */
.review-modal { width: calc(100% - 16px); max-width: 960px; max-height: calc(100% - 24px); padding: 0; overflow-y: auto; background: #111827; color: #fff; border: 0; box-shadow: 0 25px 50px -12px #00000040; font-family: Inter, sans-serif; line-height: 1.4; }
.review-modal:focus { outline: none; }
.review-modal::backdrop { background: #000c; backdrop-filter: blur(4px); }
html:has(.review-modal[open]) { overflow: hidden; }
.review-modal svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; background: #111827f2; border-bottom: 1px solid #ffffff1a; backdrop-filter: blur(4px); }
.rm-head h3 { font: 600 17px/1.3 Inter, sans-serif; letter-spacing: 0; }
.rm-close { display: grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 0 0 3px; border: 1px solid #fff3; border-radius: 50%; background: #000c; color: #fff; font: 700 24px/1 Inter, sans-serif; cursor: pointer; }
.rm-close:hover { background: #000; }
.rm-body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: 8px; padding: 8px; }
/* ProfileScoreSection: the badge and its percentile beside the app, the
   relationship goal and the share of women who'd match with the profile. */
.rm-score { display: flex; align-items: center; justify-content: space-evenly; gap: 8px; margin: 4px 0 8px; }
.rm-rating { display: flex; flex-direction: column; align-items: center; }
.rm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; padding: 8px 20px; border: 1px solid #00000040; border-radius: 8px; color: #fff; font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #00000073; }
.rm-percentile { margin-top: 4px; color: #fff9; font-size: 12px; font-weight: 500; white-space: nowrap; }
.rm-interest { flex: 1; min-width: 0; text-align: center; }
.rm-chips { display: flex; justify-content: center; gap: 4px; }
.rm-chip { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #ffffff4d; border-radius: 6px; background: #ffffff0d; font-size: 10px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; white-space: nowrap; }
.rm-chip img { width: 16px; height: 16px; border-radius: 4px; }
.rm-chip-emoji { font-size: 14px; line-height: 1; }
.rm-chip svg { width: 12px; height: 12px; color: #ffffffb3; }
.rm-interest p { margin-top: 4px; color: #ffffffe6; font-size: 14px; line-height: 1.6; text-wrap: balance; }
.rm-interest strong { color: #4ade80; font-size: 18px; font-weight: 700; }
/* ImageGrid: square photos in three columns on black. */
.review-modal .lineup-photos { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 2px; background: #000; border-radius: 12px; }
.review-modal .lineup-photo { border: 0; }
.rm-hint { margin-top: 8px; color: #9ca3af; font-size: 12px; text-align: center; }
/* ScoresTab: each trait's emoji and score over its bar, in the Looks,
   Lifestyle and Vibe groups. */
.rm-traits { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #1f293780; border-radius: 8px; }
.rm-group { padding: 6px 16px; }
.rm-trait-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rm-trait { display: flex; flex-direction: column; }
.rm-trait-score { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.rm-trait-score > span:first-child { font-size: 16px; line-height: 1; }
.rm-trait-score.is-none > span:last-child { color: #ef4444; }
.rm-trait-bar { display: block; height: 8px; overflow: hidden; background: #ffffff1a; border-radius: 999px; }
.rm-trait-bar span { display: block; height: 100%; border-radius: 999px; }
.rm-trait-label { margin-top: 4px; font-size: 12px; text-align: center; }
@media (max-width: 767px) {
  .rm-body { grid-template-columns: minmax(0, 1fr); }
  .rm-interest p { font-size: 12px; }
  .rm-interest strong { font-size: 16px; }
  .rm-badge { font-size: 24px; }
  .rm-group { padding: 6px 12px; }
  .rm-group h4 { font-size: 14px; }
  .rm-trait-row { gap: 8px; }
  .rm-trait-score { font-size: 16px; }
  .rm-trait-score > span:first-child { font-size: 18px; }
  .rm-trait-bar { height: 12px; }
}
@media (max-width: 760px) {
  .ai-photos .button { width: 100%; max-width: 440px; margin-top: 32px; font-size: 15px; }
  .examples-subtitle { margin-top: 20px; font-size: 17px; }
  .example-head h2 { font-size: 32px; }
}