/* Profile review landing pages (build/profileReviewPages.ts). Builds on the
   shared layout in ethical-catfishing.css and adds the trait card, the sample
   review and a tighter phone layout. */

/* Even out line lengths so headings and short lines don't end on one word. */
h1, h2, h3, summary, .hero-tagline, .closing-cta p { text-wrap: balance; }
p { text-wrap: pretty; }
/* Keep each highlighted phrase on one line, so highlights stay a few words
   long (a long one jumps to its own line). */
.hero-description strong { white-space: nowrap; }

/* The headline is always two lines, "Free <app>" over "profile review", with
   the page's own app icon beside it in the corner, tilted like a sticker, so
   visitors see at a glance they're on the right page. The type scales with
   the text column so text and icon (about 8.4em with the tilt) fill its width. */
.hero-copy { container-type: inline-size; }
.hero h1 { position: relative; width: fit-content; padding-right: 2.2em; font-size: min(68px, 11.8cqi); white-space: nowrap; }
.app-badge { position: absolute; top: 50%; right: 0; width: 1.45em; height: 1.45em; border-radius: .32em; transform: translateY(-50%) rotate(8deg); box-shadow: 0 10px 28px #0006; }

/* Highlighted words, so the short paragraphs can be skimmed: cyan in the
   tagline and brighter bold text in body copy. */
.hero-tagline strong { font-weight: inherit; color: var(--cyan); }
.hero-description strong, .steps p strong { font-weight: 600; color: #fff; }
.benefit-grid p strong { font-weight: 600; color: var(--ink); }

/* The articles' FAQ follows a dark section and drops its top padding; here it
   follows the light tips band, so it needs its own. */
.faq-section { padding-top: 86px; }

.hero-actions { gap: 12px; }
.button-secondary { background: transparent; border-color: #37dced80; color: #fff; }
.button-secondary:hover { background: #37dced1f; }

/* The button follows the steps in the markup so it lands under them on
   phones; on wider screens it sits under the heading. */
.workflow { grid-template-rows: auto 1fr; row-gap: 0; }
.workflow > div { grid-column: 1; grid-row: 1; }
.workflow .steps { grid-column: 2; grid-row: 1 / span 2; }
.workflow-cta { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; }

/* The nine traits as the app's onboarding slide shows them
   (CommonAdvice2Slide.tsx): a light list of tinted rows, each with its emoji,
   what it covers and an example photo. */
.trait-card { display: grid; gap: 10px; width: min(100%, 440px); justify-self: center; padding: 28px; background: var(--surface); border: 1px solid #ffffff1f; border-radius: 14px; box-shadow: 0 25px 60px #0003; }
.trait-card h2 { font-size: 24px; letter-spacing: -.03em; }
.trait-card-intro { margin-bottom: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.trait-card-intro strong { font-weight: 600; color: #4ade80; }
/* Dark rows in the page's colors, each washed with its trait's app color
   (--trait, from traitStyles in build/photoScores.ts). */
.trait-list { margin: 0; padding: 0; overflow: hidden; list-style: none; background: #0b262f; border: 1px solid #ffffff1f; border-radius: 8px; }
.trait-list li { display: flex; align-items: center; gap: 2px; padding: 3px 4px 3px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--trait) 22%, transparent), transparent 75%); }
.trait-list li + li { border-top: 1px solid #ffffff14; }
.trait-emoji { flex: none; width: 42px; font-size: 20px; line-height: 1; text-align: center; }
.trait-text { display: grid; flex: 1; min-width: 0; }
.trait-text strong { font-size: 14px; font-weight: 600; line-height: 18px; color: #fff; }
.trait-text span { font-size: 12px; line-height: 16px; color: var(--muted); }
.trait-list img { flex: none; width: 42px; height: 42px; border-radius: 4px; object-fit: cover; }

/* Sample review: the lineup's photos, then its profile score as "9.1/10".
   Scores use the app's colors, passed in as --score (scoreColor in
   build/photoScores.ts). */
.lineup-score { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin-top: 16px; }
.lineup-score strong { font: 800 40px/1 Poppins, Inter, sans-serif; letter-spacing: -.03em; color: var(--score); }
.lineup-score span { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.lineup-score strong small { margin-left: 2px; color: var(--muted); font-size: .55em; font-weight: 700; letter-spacing: 0; }
/* One row of the lineup's photos (--photos columns, set per lineup; two rows
   past six). */
.lineup-photos { display: grid; grid-template-columns: repeat(var(--photos, 6), 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lineup-photo { position: relative; container-type: inline-size; overflow: hidden; aspect-ratio: 1; background: var(--surface); border: 1px solid #ffffff1f; border-radius: 8px; }
.lineup-photo > a { position: absolute; inset: 0; display: block; color: inherit; }
.lineup-photo > a:focus-visible { outline-offset: -3px; }
.lineup-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.lineup-photo > a:hover img { transform: scale(1.04); }
.photo-expand { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #000000a6; color: #fff; }
.photo-expand svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lineup-photo.is-new { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.lineup-photo.is-cut img { opacity: .55; filter: grayscale(.6); }
/* The shared stamp on one line across the lower third, so it stays prominent
   on a thumbnail without covering the face. */
.lineup-photo .ai-photo-stamp { top: auto; right: auto; bottom: 40px; left: 50%; width: min(92%, 160px); min-height: 0; padding: 2cqi; border-width: 2px; border-radius: 6px; font-size: clamp(9px, 10cqi, 14px); white-space: nowrap; transform: translateX(-50%) rotate(-5deg); }
/* The score in the top-left corner, as in the app's photo grid (ImageGrid.tsx). */
.photo-score { position: absolute; top: 0; left: 0; min-width: 28px; padding: 4px 8px; border-radius: 0 0 6px; background: #0009; backdrop-filter: blur(4px); color: var(--score); font-size: 14px; font-weight: 700; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.photo-tag { position: absolute; right: 6px; bottom: 6px; padding: 3px 7px; border-radius: 6px; background: #000000b3; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.is-new .photo-tag { background: var(--cyan); color: var(--ink); }

/* The score with the share of women who'd match (the app's green) beside it,
   centered on the score and wrapping in its own column, then the button and
   the link to the app's examples. */
.sample-score { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.sample-score .lineup-score { flex: none; margin-top: 0; }
.sample-match { flex: 1 1 0; min-width: 0; color: #ffffffe6; font-size: 16px; line-height: 1.5; text-align: right; text-wrap: balance; }
.sample-match strong { color: #4ade80; font-size: 20px; font-weight: 700; }
.sample-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.sample-more { color: var(--cyan); font-size: 15px; font-weight: 600; text-decoration: none; }
.sample-more:hover { text-decoration: underline; text-underline-offset: 3px; }/* The sample and "How it works" share a background, so a rule and one gap
   separate them instead of two full section paddings. */
#sample { padding-block: 56px 64px; border-bottom: 1px solid #ffffff1a; }
#sample + .workflow { padding-top: 64px; }
#sample h2 { margin-bottom: 24px; }

/* Photo modal: the app's photo view (PhotoDetailModal.tsx) in its own gray
   palette: the overall score over the photo, then the trait tiles, which open
   the trait's guide. Its children fill the dialog, so a click on the dialog
   itself is a click on the backdrop. */
.photo-modal { width: calc(100% - 8px); max-width: 448px; max-height: calc(100% - 24px); padding: 0; overflow-y: auto; background: #111827; color: #fff; border: 0; border-radius: 16px; box-shadow: 0 25px 50px -12px #00000040; font-family: Inter, sans-serif; }
.photo-modal[open] { display: flex; flex-direction: column; }
.photo-modal:focus { outline: none; }
.photo-modal::backdrop { background: #000c; backdrop-filter: blur(4px); }
html:has(.photo-modal[open]) { overflow: hidden; }
.photo-modal svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-close, .pm-counter { position: absolute; top: 8px; z-index: 30; border: 1px solid #fff3; backdrop-filter: blur(4px); }
.pm-close { right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0 0 3px; border-radius: 50%; background: #000c; color: #fff; font: 700 24px/1 Inter, sans-serif; cursor: pointer; }
.pm-close:hover { background: #000; }
.pm-counter { left: 8px; padding: 2px 10px; border-radius: 999px; background: #000000b3; font-size: 12px; font-weight: 500; line-height: 16px; font-variant-numeric: tabular-nums; }
.pm-overall { display: flex; flex: none; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: #404040; border-bottom: 1px solid #ffffff1a; color: #ffe99a; font-size: 20px; font-weight: 700; line-height: 1; }
.pm-overall img { width: 12px; height: auto; }
.pm-overall img:last-child { transform: scaleX(-1); }
.pm-photo { position: relative; display: flex; flex: none; justify-content: center; background: #000; }
/* static-pages.js sets the photo's --aspect, so the frame is as wide as the
   photo is at the frame's full height, and a small photo is scaled up. */
.pm-frame { --photo-height: 35vh; position: relative; width: min(100%, var(--photo-height) * var(--aspect, 1)); }
.pm-frame img { display: block; width: 100%; height: auto; aspect-ratio: var(--aspect, auto); object-fit: contain; }
/* The app's face ellipse (FaceEllipseOverlay.tsx), which static-pages.js draws
   over the photo row: traced in 1.5s, then the ticks, then a fade at 2s. */
.photo-modal .pm-face { position: absolute; inset: 0; z-index: 25; width: 100%; height: 100%; stroke: #2dd4bf; pointer-events: none; animation: pm-face-fade .5s ease-out 2s forwards; }
.pm-face ellipse { stroke-linecap: butt; stroke-dasharray: var(--length); stroke-dashoffset: var(--length); animation: pm-face-trace 1.5s cubic-bezier(0, 0, .2, 1) forwards; }
.pm-face line { opacity: 0; animation: pm-face-ticks 0s 1.5s forwards; }
@keyframes pm-face-trace { to { stroke-dashoffset: 0; } }
@keyframes pm-face-ticks { to { opacity: 1; } }
@keyframes pm-face-fade { to { opacity: 0; } }
.pm-frame .ai-photo-stamp { top: auto; right: auto; bottom: 8%; left: 50%; width: auto; min-height: 0; padding: 6px 12px; border-width: 3px; border-radius: 8px; font-size: 18px; white-space: nowrap; transform: translateX(-50%) rotate(-5deg); }
.pm-frame .ai-photo-stamp[hidden] { display: none; }
.pm-step { position: absolute; top: 50%; z-index: 40; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #fff3; border-radius: 50%; background: #0009; color: #fff; transform: translateY(-50%); cursor: pointer; backdrop-filter: blur(4px); }
.pm-step:hover { background: #000000e6; }
.pm-step[data-step="-1"] { left: 8px; }
.pm-step[data-step="1"] { right: 8px; }
.pm-step svg { width: 24px; height: 24px; }
.pm-scores { flex: none; background: #111827f2; border-top: 1px solid #374151; }
.pm-scores:has(.pm-trait:not([hidden])) { min-height: 18rem; }
.pm-details, .pm-trait { padding: 8px 4px; }
.pm-groups { display: flex; flex-direction: column; gap: 12px; }
/* TRAIT_GROUPS' rose, amber and sky tints. */
.pm-group[data-group="looks"] { --group: 244 63 94; --group-title: 253 164 175; }
.pm-group[data-group="lifestyle"] { --group: 245 158 11; --group-title: 252 211 77; }
.pm-group[data-group="vibe"] { --group: 14 165 233; --group-title: 125 211 252; }
.pm-group { padding: 6px; background: rgb(var(--group) / .06); border: 1px solid rgb(var(--group) / .2); border-radius: 12px; }
.pm-group h4 { margin: 0 0 4px; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--group-title) / .7); }
.pm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pm-tile { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 4px 6px; background: none; border: 1px solid #ffffff1a; border-radius: 6px; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.pm-tile:hover { background: #ffffff0d; border-color: #22d3ee80; }
/* A trait at 8 or more lights its tile in the trait's color, brighter at 9. */
.pm-tile.is-medium { background: color-mix(in srgb, var(--trait) 10%, transparent); border-color: color-mix(in srgb, var(--trait) 40%, transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--trait) 25%, transparent); }
.pm-tile.is-high { background: color-mix(in srgb, var(--trait) 25%, transparent); border-color: color-mix(in srgb, var(--trait) 95%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--trait) 45%, transparent); }
.pm-tile.is-medium:hover, .pm-tile.is-high:hover { filter: brightness(1.25); }
.pm-tile-score { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 4px; font-size: 12px; line-height: 16px; }
.pm-tile-score > span:first-child { line-height: 1; }
.pm-level { font-weight: 500; font-variant-numeric: tabular-nums; }
.pm-tile[data-state="na"] .pm-level { color: #fff6; }
.pm-tile[data-state="none"] .pm-level { color: #ef4444; }
.pm-tile-score svg { position: absolute; right: 0; align-self: center; width: 12px; height: 12px; color: #67e8f9b3; }
.pm-tile:hover .pm-tile-score svg { color: #67e8f9; }
.pm-bar { display: block; height: 6px; margin-top: 2px; overflow: hidden; background: #ffffff1a; border-radius: 999px; }
.pm-bar span, .pm-trait-bar span { display: block; height: 100%; border-radius: 999px; }
.pm-label { margin-top: 2px; overflow: hidden; color: #fffc; font-size: 11px; line-height: 16px; text-align: center; white-space: nowrap; }
.pm-trait { display: flex; flex-direction: column; }
.pm-trait[hidden] { display: none; }
.pm-back { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; margin-bottom: 8px; padding: 0; background: none; border: 0; color: #d1d5db; font: 12px/16px Inter, sans-serif; cursor: pointer; }
.pm-back:hover { color: #fff; }
.pm-back svg { width: 16px; height: 16px; }
.pm-trait-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 16px; line-height: 24px; }
.pm-trait-head > span:first-child { display: flex; align-items: center; gap: 6px; color: #e5e7eb; }
.pm-trait-emoji { font-size: 20px; line-height: 28px; }
.pm-trait-level { flex: none; font-weight: 600; }
.pm-trait-bar { height: 4px; margin-top: 4px; overflow: hidden; background: #374151; border-radius: 999px; }
.pm-trait-guide { margin-bottom: 12px; padding-top: 12px; color: #e5e7eb; font-size: 14px; font-style: italic; line-height: 20px; }
@media (min-width: 640px) {
  .photo-modal { width: calc(100% - 16px); max-width: 672px; max-height: 80vh; }
  .pm-overall { font-size: 24px; }
  .pm-frame { --photo-height: 42vh; }
  .pm-step { width: 40px; height: 40px; }
}

/* Side by side, the tips share rows so their text starts at the same height
   when one title runs to two lines. */
@media (min-width: 761px) {
  .benefit-grid > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
}
/* The hero text column is narrow on tablets: when the buttons wrap, give both
   the full column width. */
@media (min-width: 761px) and (max-width: 1000px) {
  .hero-actions { max-width: 440px; }
  .hero-actions .button { flex: 1 0 auto; }
}
@media (max-width: 1000px) {
  .trait-card { padding: 24px; }
}
@media (max-width: 760px) {
  /* Phones get one type scale (32px section titles, 20px card titles, 15px
     body, 11px labels) and tighter spacing than the shared layout. */
  .hero { padding-block: 28px 44px; }
  .hero-tagline { font-size: 20px; margin-block: 18px 14px; }
  .hero-description { line-height: 1.7; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 440px; margin-top: 24px; }
  .hero-actions .button, .workflow-cta, .closing-cta .button, .sample-actions .button { width: 100%; max-width: 440px; font-size: 15px; }
  .fine-print { font-size: 12px; }
  .section, .closing-cta { padding-block: 48px; }
  .faq-section { padding-top: 48px; }
  .section-heading { margin-bottom: 24px; }
  .closing-cta h2 { font-size: 32px; }
  .steps h3, .benefit-grid h3 { font-size: 20px; }
  .steps p, .benefit-grid p, details p { font-size: 15px; }
  .workflow { grid-template-rows: none; row-gap: 28px; }
  .workflow > div, .workflow .steps, .workflow-cta { grid-column: 1; grid-row: auto; }
  .workflow .workflow-cta { margin-top: 0; }
  .steps li { padding-block: 20px; }
  .steps li:first-child { padding-top: 0; }
  .steps li:last-child { padding-bottom: 0; border-bottom: 0; }
  .benefit-grid { gap: 24px; margin-top: 24px; }
  .benefit-grid .step-number { font-size: 11px; padding-top: 16px; margin-bottom: 10px; }
  .faq-section h2 { margin-bottom: 12px; }
  summary { padding-block: 18px; }
  .closing-cta > .wrap > p:not(.eyebrow):not(.fine-print) { margin-block: 16px 24px; }
  /* The hero is one column here, so drop the card frame and let the trait
     list line up with the text. */
  .trait-card { width: 100%; max-width: 440px; justify-self: start; padding: 28px 0 0; background: none; border: 0; border-top: 1px solid #ffffff1a; border-radius: 0; box-shadow: none; }
  #sample { padding-block: 32px 40px; }
  #sample + .workflow { padding-top: 40px; }
  #sample h2 { margin-bottom: 16px; }
  .sample-score { gap: 14px; }
  .sample-match { font-size: 14px; }
  .sample-match strong { font-size: 18px; }  .steps li { gap: 16px; }
  .steps li > span { flex-basis: 32px; height: 32px; }
  .lineup-score strong { font-size: 32px; }
}
@media (max-width: 760px) {
  .lineup-photos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
/* Small phones: keep the photo labels small. */
@media (max-width: 374px) {
  .photo-score { padding: 3px 6px; font-size: 12px; }
  .photo-tag { right: 4px; bottom: 4px; padding: 2px 5px; font-size: 9px; }
  .lineup-photo .ai-photo-stamp { bottom: 30px; }
}