/* CEVO page system: the cross-cutting rules every section shares, loaded after all section stylesheets so one rule
   set governs the whole page (homepage audit items 11, 22, 30, 33, 34). Section files keep their own layout; edit the
   shared values here, not per section. rem = 10px at 1440 (fluid 1100–1440, site.css). */
/* ---------- small-text floors: between 1100 and 1439 the fluid rem drops to 7.6–9.9px, so small sizes are floored:
   mono labels never under 11px, reading text never under 12px (tools/font-floor.mjs checks every width). Sections use
   these for any text set under 1.4rem. ---------- */
:root { --fs-mono: max(11px, 1.1rem); --fs-small: max(12px, 1.2rem); --fs-control: max(12px, 1.3rem); }

/* ---------- 11 · the generated-model label: one mono pill, inside each generated image, bottom-left, 12px inset ---------- */
.gen-label.gen-label {
  position: absolute; left: 1.2rem; right: auto; top: auto; bottom: 1.2rem; z-index: 5; margin: 0;
  width: max-content; max-width: calc(100% - 2.4rem);
  padding: .4rem .9rem; border-radius: 999px;
  background: rgba(17, 22, 20, .55); color: #F3F5F2; box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--fs-mono); line-height: max(16px, 1.6rem); font-weight: 400;
  letter-spacing: .01em; text-transform: none; text-align: left; white-space: normal;
  pointer-events: none;
}
/* hero: the copy and the stats strip own the bottom-left, so the pill sits in the photo's own bottom corner */
.hero .gen-label.gen-label { left: auto; right: 4rem; bottom: 4rem; z-index: 0; }
/* full-bleed tablet and phone layouts: the copy sits over the bottom of the photo, so the pill takes its top-right corner */
@media (max-width: 1099px) {
  .hero .gen-label.gen-label { right: 4rem; bottom: auto; top: 10.4rem; }
}
@media (min-width: 900px) and (max-width: 1099px) and (min-aspect-ratio: 5/4) {
  .hero .gen-label.gen-label { top: auto; bottom: 4rem; }
}
/* phone: the photo's own bottom-left corner, under the buttons and just above the stats band (where the media ends),
   so it never sits on the head; the copy block leaves the room for it (site.css .hero__content padding-bottom) */
@media (max-width: 767px) {
  .hero .gen-label.gen-label { left: 1.6rem; right: auto; top: auto; bottom: 12.8rem; }
}
/* final band: on the tee, not straddling the seamless wall (desktop) */
@media (min-width: 900px) { .cta-band .gen-label.gen-label { left: calc(7% + 1.2rem); } }
/* before/after slider: above the readout bar */
.transformations .transformations__gen.gen-label { bottom: 5.6rem; }
@media (max-width: 767px) { .transformations .transformations__gen.gen-label { bottom: 5rem; left: .8rem; } }
/* How 01: the lens chip moves to the top-right corner so the label owns the bottom-left */
.how .how__stage--capture .how__lens { left: auto; right: 1.2rem; top: 1.2rem; bottom: auto; transform: none; }
/* Examples: the change badge moves to the top-left */
.examples .examples__badge { top: 1.2rem; bottom: auto; }
@media (max-width: 767px) { .examples .examples__badge { left: 1rem; top: 1rem; bottom: auto; } }

/* ---------- 30 · eyebrows: one mono pill everywhere, the hero's included ---------- */
.hero .eyebrow,
.decoded .decoded__eyebrow,
.transformations .transformations__eyebrow,
.research .research__eyebrow,
.how .how__eyebrow,
.wyg .wyg__eyebrow,
.examples .examples__eyebrow,
.visualise .visualise__eyebrow,
.price .price__eyebrow,
.faq .faq__eyebrow,
.cta-band .cta-band__eyebrow {
  display: inline-flex; align-items: center; width: fit-content; height: auto; min-height: 0;
  padding: .6rem 1.2rem; border: 1px solid var(--cloud, #D2DCD5); border-radius: 9999px; background: transparent;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--fs-mono); line-height: max(16px, 1.6rem); font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; word-spacing: 0; color: rgba(17, 22, 20, .72);
}
.hero .eyebrow { align-self: flex-start; border-color: rgba(210, 220, 213, .42); color: var(--ink, #F3F5F2); }
.cta-band .cta-band__eyebrow { border-color: rgba(17, 22, 20, .2); }

/* ---------- 30 · one segmented control: 36px tall (44px hit area), 13px Switzer, pine-filled active thumb ---------- */
.decoded .decoded__switch { padding: .3rem; }
.decoded .decoded__opt,
.examples .examples__toggle button {
  position: relative; height: 3rem; min-height: 3rem; padding: 0 1.4rem;
  font-family: "Switzer Variable", Switzer, system-ui, sans-serif; font-size: var(--fs-control); line-height: max(16px, 1.6rem); font-weight: 400;
  letter-spacing: 0; text-transform: none;
}
.decoded .decoded__opt::after,
.examples .examples__toggle button::after { content: ""; position: absolute; inset: -.7rem -.2rem; }
.decoded .decoded__opt[aria-pressed="true"],
.examples .examples__toggle button[aria-pressed="true"] { background: var(--pine, #244839); color: var(--mist, #F3F5F2); box-shadow: none; }
.examples .examples__toggle { padding: .3rem; }
.examples .examples__thumb { top: .3rem; height: 3rem; background: var(--pine, #244839); box-shadow: none; }
.examples .examples__toggle--thumb button[aria-pressed="true"] { background: transparent; }
@media (max-width: 767px) {
  .decoded .decoded__opt { min-height: 3rem; }
  .examples .examples__toggle button { padding: 0 1.6rem; }
}

/* ---------- 22 · surfaces and rhythm ---------- */
/* How + What you get, and Pricing, sit on --paper; everything between stays on --mist. Same-colour neighbours meet at
   a 1px --cloud hairline drawn across the content column, with 96px either side; colour changes keep 120px. */
.decoded, .transformations, .research, .examples, .visualise, .faq { --canvas: var(--mist, #F3F5F2); background-color: var(--mist, #F3F5F2); }
.how, .wyg, .price { --canvas: var(--paper, #E4EBE6); background-color: var(--paper, #E4EBE6); }
:root { --sys-gutter: 5.6rem; --sys-col: 132.8rem; }
@media (max-width: 1099px) { :root { --sys-gutter: 3.2rem; } }
@media (max-width: 767px) { :root { --sys-gutter: 1.6rem; } }
.transformations, .research, .wyg, .visualise {
  background-image: linear-gradient(var(--cloud, #D2DCD5), var(--cloud, #D2DCD5));
  background-size: min(var(--sys-col), 100% - 2 * var(--sys-gutter)) 1px;
  background-position: 50% 0; background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .decoded { padding-bottom: 9.6rem; }
  .transformations { padding-top: 9.6rem; padding-bottom: 9.6rem; }
  .research { padding-top: 9.6rem; padding-bottom: 12rem; }
  .how { padding-top: 12rem; padding-bottom: 9.6rem; }
  .wyg { padding-top: 9.6rem; padding-bottom: 12rem; }
  .examples { padding-top: 12rem; padding-bottom: 9.6rem; }
  .visualise { padding-top: 9.6rem; padding-bottom: 12rem; }
  .price, .faq { padding-top: 12rem; padding-bottom: 12rem; }
}

/* ---------- 22 · one container: max 1328px of content, first column at x=56 on a 1440 screen ---------- */
@media (min-width: 1100px) {
  .hero .hero__content { padding-left: 1.6rem; padding-right: 1.6rem; }
  .transformations .transformations__inner,
  .research .research__inner,
  .visualise .visualise__inner { max-width: 136rem; }
  .examples .examples__list { max-width: none; gap: 3.2rem; }
  .price .price__grid, .price .price__free, .price .price__compare { max-width: none; }
}

/* ---------- 33 / 34 · phone ---------- */
@media (max-width: 767px) {
  /* every control reaches a 44px hit area */
  .wyg .wyg__tab { height: auto; min-height: 4.4rem; }
  .faq .faq__contact a { display: inline-block; padding-block: 1.2rem; margin-block: -1.2rem; }
  /* floors: 11px for mono labels, 12px for reading text */
  .hero .strip b, .hero .strip small { font-size: 1.2rem; }
  .hud-pill__k, .hud-pill__v { font-size: 1.1rem; }
  .transformations .transformations__readout { font-size: 1.1rem; letter-spacing: .04em; }
  .how .how__cam-label, .how .how__sheet-meta, .how .how__sheet-foot, .how .how__plan-tag,
  .how .how__phase-when, .how .how__plan-foot { font-size: 1.1rem; letter-spacing: .04em; }
  .wyg .dos__tag, .wyg .dos__kicker, .wyg .wyg__tab-num, .wyg .wyg__kicker { font-size: 1.1rem; letter-spacing: .04em; }
  .examples .examples__badge { font-size: 1.1rem; letter-spacing: .04em; }
  .visualise .visualise__seg .visualise__n { font-size: 1.1rem; letter-spacing: .04em; }
  .visualise .visualise__table tbody td.visualise__word { font-size: 1.2rem; }
}
@media (max-width: 600px) {
  .transformations, .research, .how, .wyg, .examples, .visualise, .price, .faq { padding-top: 5.6rem; padding-bottom: 5.6rem; }
  .decoded { padding-top: 5.6rem; }
  /* every head reads from the left edge */
  .how .how__head, .wyg .wyg__head, .price .price__head { align-items: flex-start; text-align: left; }
  .examples .examples__head { margin-left: 0; text-align: left; }
  .how .how__head > *, .wyg .wyg__head > *, .price .price__head > *, .examples .examples__head > * { margin-left: 0; margin-right: 0; text-align: left; }
  .price .price__sub { padding: 0; }
  /* Layer 1 / Layer 2 stack, split by one hairline */
  .transformations .transformations__layers { grid-template-columns: minmax(0, 1fr); }
  .transformations .transformations__layer,
  .transformations .transformations__layer + .transformations__layer { padding: 1.6rem 0; border-left: 0; }
  .transformations .transformations__layer + .transformations__layer { border-top: 1px solid var(--paper-line); padding-bottom: 0; }
}

/* wyg: the anatomical gloss under "Jaw to cheekbone width" */
.wyg .wyg__gloss { display: block; margin-top: .2rem; font-size: var(--fs-small); line-height: max(16px, 1.6rem); color: rgba(17, 22, 20, .56); }

/* wyg dossier: one label for the before/after pair, spanning both shots (one or two lines, never three) */
.wyg .dos__shot:first-child { overflow: visible; z-index: 1; }
.wyg .dos__shot:first-child img { border-radius: inherit; }
.wyg .dos__shot:first-child .gen-label.gen-label { max-width: calc(200% + .8rem - 2.4rem); }