/* ── Editorial type scale ────────────────────────────────────────────
   Measured against pango.ai and ego.ist: their largest section heading
   is 48–60px at about -0.025em with line-height ~1.0–1.05, on one
   typeface, with 16–20px body at 1.5–1.6. This page had section
   headings at 104–132px tracked to -0.068em and line-height 0.9 — the
   size and the tightness are what read as shouty rather than expensive.

   This sheet loads last and caps the scale. It changes no markup, adds
   no font, and touches nothing but type, rhythm and the buttons.
   The hero keeps its own (approved) treatment. ─────────────────────── */

:root {
  --t-display: clamp(38px, 4.4vw, 58px);   /* section headings          */
  --t-sub:     clamp(30px, 3.1vw, 42px);   /* in-section headings       */
  --t-lede:    clamp(17px, 1.25vw, 20px);  /* the one line under a title */
  --t-body:    17px;
  --ls-tight:  -.025em;
}

/* ── section headings ──────────────────────────────────────────────── */
.section-intro h2,
.experience-title h2,
.garu-experience .experience-title h2,
.plus-section .section-intro h2,
.studio-section > .section-intro h2,
.garu-outcomes .section-intro h2,
.compare-section .section-intro h2,
.platform-statement h2,
.integration-heading h2,
.difference-copy h2,
.feature-copy h2,
.footer-thesis h2,
.pilot h2,
.newsletter-signup-copy h2 {
  font-size: var(--t-display) !important;
  line-height: 1.04 !important;
  letter-spacing: var(--ls-tight) !important;
  font-weight: 500 !important;
  max-width: 20ch;
}
.section-intro h2, .platform-statement h2, .studio-section > .section-intro h2,
.plus-section .section-intro h2, .garu-outcomes .section-intro h2, .footer-thesis h2 { margin-left: auto; margin-right: auto; }

/* in-section headings (story steps, capability cards, feature rows) */
.story-step h3,
.garu-experience .story-step h3,
.capability-copy h3,
.channel-copy h3,
.fit-clean-row > h3,
.integration-launch h3,
.pricing-card h3 {
  font-size: var(--t-sub) !important;
  line-height: 1.08 !important;
  letter-spacing: var(--ls-tight) !important;
  font-weight: 500 !important;
}

/* the serif half of a pair stays the accent, not a second shout */
.type-pair > .type-serif { font-size: 1em !important; letter-spacing: -.03em !important; line-height: 1.02 !important; }

/* ── supporting copy ───────────────────────────────────────────────── */
.section-intro > p:last-child,
.platform-statement > p,
.experience-title > p,
.feature-copy > p:not(.eyebrow),
.story-copy > p:not(.eyebrow),
.difference-copy > p:not(.eyebrow),
.integration-launch p:not(.eyebrow),
.commerce-grid article > p:not(.eyebrow),
.conversion-panels article > p:not(.eyebrow),
.sizing-clean-row p:not(.eyebrow) {
  font-size: var(--t-lede) !important;
  line-height: 1.55 !important;
  max-width: 58ch;
}
.section-intro > p:last-child, .platform-statement > p, .experience-title > p { margin-left: auto; margin-right: auto; }

/* eyebrows: a label, not a headline */
.eyebrow { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .01em !important; text-transform: none !important; margin-bottom: 14px !important; opacity: .75; }

/* ── one button voice ──────────────────────────────────────────────── */
.button, .garu-nav .nav-demo { border-radius: 999px !important; min-height: 46px; padding: 0 22px; font-size: 15px !important; font-weight: 550 !important; letter-spacing: -.005em; gap: 10px; box-shadow: none !important; }
.button:hover { transform: none !important; }
.text-link { font-size: 15px; }

/* ── section rhythm: one spacing scale instead of five ─────────────── */
.section, .plus-section, .studio-section, .outcomes, .closing-section, .platform-overview { padding-top: clamp(72px, 8vw, 118px) !important; padding-bottom: clamp(72px, 8vw, 118px) !important; }
.section-intro { margin-bottom: clamp(40px, 4.5vw, 64px); }

@media (max-width: 767px) {
  :root { --t-display: clamp(32px, 8.4vw, 40px); --t-sub: clamp(27px, 7vw, 34px); --t-lede: 16px; }
  .section-intro h2, .experience-title h2, .platform-statement h2, .studio-section > .section-intro h2,
  .plus-section .section-intro h2, .garu-outcomes .section-intro h2, .footer-thesis h2,
  .compare-section .section-intro h2, .difference-copy h2, .feature-copy h2 { font-size: var(--t-display) !important; max-width: 17ch; }
  .story-step h3, .garu-experience .story-step h3, .capability-copy h3, .fit-clean-row > h3 { font-size: var(--t-sub) !important; }
  .eyebrow { font-size: 11px !important; }
}

/* ── the size readout on the "Know it." card ──────────────────────────
   The same chip the Garu Fit stage floats over a try-on (.tryon-stage
   .size-chip): white card, emerald dot, the size at 24px and its fit
   note beside it. It used to float top-right as a translucent pill,
   detached from anything — it now sits with the copy at the foot of the
   card, directly above "02 · Fit + Size", so it reads as the answer the
   headline promises. In normal flow, so it never lands on the paragraph
   at any width.

   The chip's spans have to restate everything `.capability-copy span`
   sets (block, uppercase, white, .08em) — that rule catches every span
   inside the copy block, this one included. */
.capability-know video { object-position: center; }
.capability-chip { display: inline-block; width: 170px; margin: 0 0 22px; padding: 11px 15px; border-radius: 16px; background: #fff; color: #171719; text-align: left; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6); }
.capability-chip .chip-label { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #666; white-space: nowrap; }
.capability-chip .chip-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #007A68; flex: 0 0 auto; }
.capability-chip .chip-value { display: inline; margin: 0 8px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1; text-transform: none; color: #171719; }
.capability-chip .chip-note { display: inline; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #666; }
@media (max-width: 767px) { .capability-chip { width: 158px; margin-bottom: 18px; padding: 10px 14px; } .capability-chip .chip-value { font-size: 21px; } }

/* the lookbook gallery is a mood board, so it sits quieter than the demos */
.studio-gallery { margin-top: clamp(40px, 4.5vw, 64px) !important; }
.studio-gallery + .studio-features .product-shot-row { margin-top: clamp(48px, 5vw, 80px); }

/* ── Studio gallery: alternating column stagger (Aiuta's device) ──────
   Every other column drops, so the row reads

       || || || ||
          ||    ||

   rather than one flat band. The track is pulled up by half the offset
   and the columns overrun the masked box top and bottom, so the stagger
   never opens a gap. The earlier 2n/3n rules collided on column 6. */
.studio-gallery-track { margin-top: -58px !important; align-items: start !important; }
.studio-column { transform: none !important; }
.studio-column:nth-child(even) { transform: translateY(116px) !important; }
/* Size variation comes from the tile ratio, not scale(): scaling a grid
   item widens it into the gutter and the columns touch. */
.studio-column:nth-child(4n+1) .studio-tile { aspect-ratio: .78; }
.studio-column:nth-child(4n+3) .studio-tile { aspect-ratio: .72; }
.studio-gallery { height: clamp(400px, 43vw, 640px) !important; }
/* soften the top edge too, now that tiles are clipped at both ends */
.studio-gallery::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 90px; background: linear-gradient(#efeff2, transparent); pointer-events: none; }
@media (max-width: 767px) {
  .studio-gallery-track { margin-top: -34px !important; }
  .studio-column:nth-child(even) { transform: translateY(68px) !important; }
  .studio-gallery { height: 360px !important; }
  .studio-gallery::before { height: 56px; }
}

/* ── Studio: the models configurator (Aiuta's Models / Background panel) ─── */
.lab-panels { grid-area: panels; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lab-panel { background: #fafafb; border: 1px solid rgba(23,23,25,.06); border-radius: 20px; padding: 18px; }
.lab-title { margin: 0 0 16px; font-size: 14px; font-weight: 500; color: #171719; }
.lab-avatars { display: flex; margin-bottom: 16px; }
.lab-avatars img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #fafafb; box-shadow: 0 1px 2px rgba(0,0,0,.1); margin-left: -10px; }
.lab-avatars img:first-child { margin-left: 0; }
.lab-chips, .lab-bg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-chips button, .lab-bg-chips button, .lab-chip-more { height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid transparent; background: #fff; color: #171719; font: 500 12px/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.lab-chips button[aria-pressed="true"], .lab-bg-chips button[aria-pressed="true"] { background: #171719; color: #fff; }
.lab-chip-more { color: #6f6f74; cursor: default; display: inline-flex; align-items: center; }
.lab-bg { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.lab-bg img { display: block; width: 100%; height: 118px; object-fit: cover; }
.lab-bg-chips { position: absolute; inset: auto 0 10px; justify-content: center; }
.lab-prompt input { width: 100%; height: 34px; padding: 0 12px; border: 1px solid rgba(23,23,25,.08); border-radius: 10px; background: #fff; font: italic 12px/1 inherit; font-family: inherit; color: #9a9aa0; }
@media (max-width: 900px) {
    .lab-panels { grid-template-columns: 1fr; }
  }
/* gallery tiles: exact 3:4 so full-body frames keep their shoes — the
   .78/.72 variation was cropping the bottom of every fourth column */
.studio-column .studio-tile, .studio-column:nth-child(4n+1) .studio-tile, .studio-column:nth-child(4n+3) .studio-tile { aspect-ratio: 3 / 4 !important; }
.studio-tile img { object-position: center top; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── product-shot row: copy + real result on the left, the Models /
   Background panels on the right ────────────────────────────────────── */
.product-shot-row { align-items: start !important; }
.product-shot-row .lab-panels { align-self: center; }
.feature-copy .shot-pair { margin-top: 26px; max-width: 460px; }
.feature-copy .shot-pair img { height: 220px; }
.feature-copy .shot-pair figcaption { padding: 10px 12px 12px; font-size: 13px; color: #6f6f74; }
.feature-copy .shot-switcher { margin-top: 18px; }
.feature-copy .shot-switcher button { padding: 9px 14px; font-size: 14px; }
@media (max-width: 900px) { .feature-copy .shot-pair { max-width: none; } .feature-copy .shot-pair img { height: 200px; } }

/* footer wordmark: fully visible, no longer clipped by the footer's overflow */
.footer-mega { margin-bottom: 0 !important; line-height: .9 !important; }
.garu-footer { padding-bottom: 28px !important; }
/* an older sheet turns this row into a 4-column grid (249px 0 0 728px); it is
   two columns: copy + result on the left, the Models / Background panels right */
.studio-features .product-shot-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: clamp(40px, 6vw, 96px) !important; }
.studio-features .product-shot-row > * { grid-column: auto !important; grid-row: auto !important; }
.feature-copy .shot-pair { grid-template-columns: 1fr 1fr !important; gap: 12px; }
.feature-copy .shot-pair figure { background: #fff !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.feature-copy .shot-pair img { height: 230px; width: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
@media (max-width: 900px) { .studio-features .product-shot-row { grid-template-columns: 1fr !important; } .feature-copy .shot-pair img { height: 200px; } }

/* ── product-shot row, second pass: proportion ─────────────────────────
   The pair fills the left column; the panels stand as tall as the pair. */
.feature-copy .shot-pair { max-width: none; margin-top: 30px; }
.feature-copy .shot-pair img { height: clamp(260px, 26vw, 380px); }
.product-shot-row .lab-panels { gap: 16px; }
.lab-panel { padding: 22px; min-height: 100%; display: flex; flex-direction: column; }
.lab-title { font-size: 15px; margin-bottom: 18px; }
.lab-avatars img { width: 54px; height: 54px; }
.lab-chips button, .lab-bg-chips button, .lab-chip-more { height: 30px; padding: 0 13px; font-size: 13px; }
.lab-chips { gap: 8px; }
/* background: three real tiles, each shown whole */
.lab-bg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.lab-bg-tiles button { position: relative; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: #e9e6e1; cursor: pointer; aspect-ratio: 4 / 5; }
.lab-bg-tiles button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lab-bg-tiles button span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: #fff; color: #171719; font-size: 12px; font-weight: 500; white-space: nowrap; }
.lab-bg-tiles button[aria-pressed="true"] { border-color: #171719; }
.lab-bg-tiles button[aria-pressed="true"] span { background: #171719; color: #fff; }
.lab-prompt { margin-top: auto; }
.lab-prompt input { height: 40px; font-size: 13px; }
/* pages without the hero film start with a solid header */
.garu-nav.is-solid { background: rgba(255,255,255,.96); color: #171719; backdrop-filter: blur(14px); box-shadow: 0 1px 0 #00000010; }
.garu-nav.is-solid .menu-toggle { border-color: rgba(21,21,21,.12); }

/* ── product-shot row, third pass: the panels stand as tall as the pair ──── */
.product-shot-row .lab-panels { align-self: stretch !important; align-items: stretch; }
.product-shot-row .lab-panel { padding: 28px 26px; justify-content: flex-start; gap: 0; }
.product-shot-row .lab-title { font-size: 16px; margin-bottom: 22px; }
.product-shot-row .lab-avatars { margin-bottom: 26px; }
.product-shot-row .lab-avatars img { width: 68px; height: 68px; margin-left: -14px; border-width: 3px; }
.product-shot-row .lab-chips { gap: 10px; }
.product-shot-row .lab-chips button, .product-shot-row .lab-chip-more { height: 36px; padding: 0 16px; font-size: 14px; }
.product-shot-row .lab-bg-tiles { gap: 10px; margin-bottom: 18px; flex: 1; }
.product-shot-row .lab-bg-tiles button { aspect-ratio: auto; min-height: 200px; height: 100%; }
.product-shot-row .lab-bg-tiles button span { font-size: 13px; padding: 6px 12px; bottom: 12px; }
.product-shot-row .lab-prompt input { height: 46px; font-size: 14px; padding: 0 14px; }
@media (max-width: 900px) { .product-shot-row .lab-bg-tiles button { min-height: 0; aspect-ratio: 4 / 5; height: auto; } .product-shot-row .lab-bg-tiles { flex: none; } }
/* the modal's primary is the site's black, like Book a Demo */
.dm-submit, .dm-thanks .button { background: #171719 !important; color: #fff !important; }
/* fourth pass: content-sized panels, centred against the pair, 4:5 tiles */
.product-shot-row .lab-panels { align-self: center !important; }
.product-shot-row .lab-panel { padding: 30px 28px 28px; }
.product-shot-row .lab-avatars img { width: 72px; height: 72px; }
.product-shot-row .lab-bg-tiles { flex: none; }
.product-shot-row .lab-bg-tiles button { aspect-ratio: 4 / 5; min-height: 0; height: auto; }
.product-shot-row .lab-prompt { margin-top: 0; }
.product-shot-row .lab-avatars img { width: 56px; height: 56px; margin-left: -14px; }
.product-shot-row .lab-avatars img:first-child { margin-left: 0; }

/* ── product-shot row, fifth pass: the panels stack full-width on the right
   (Models above Background), so the avatars and setting tiles get the whole
   column instead of a third of it ───────────────────────────────────────── */
.studio-features .product-shot-row { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important; }
.product-shot-row .lab-panels { grid-template-columns: 1fr !important; gap: 18px; align-self: center !important; }
.product-shot-row .lab-panel { padding: 30px 30px 28px; }
.product-shot-row .lab-title { font-size: 17px; margin-bottom: 20px; }
.product-shot-row .lab-avatars img { width: 84px; height: 84px; margin-left: -18px; border-width: 3px; }
.product-shot-row .lab-avatars img:first-child { margin-left: 0; }
.product-shot-row .lab-chips { gap: 10px; }
.product-shot-row .lab-chips button, .product-shot-row .lab-chip-more { height: 40px; padding: 0 18px; font-size: 15px; }
.product-shot-row .lab-bg-tiles { gap: 12px; margin-bottom: 16px; }
.product-shot-row .lab-bg-tiles button { aspect-ratio: 4 / 5; border-radius: 16px; }
.product-shot-row .lab-bg-tiles button span { font-size: 14px; padding: 7px 14px; bottom: 12px; }
.product-shot-row .lab-prompt input { height: 48px; font-size: 15px; }
@media (max-width: 900px) { .product-shot-row .lab-avatars img { width: 64px; height: 64px; margin-left: -14px; } }

/* ── About: the index palette. Grey page, white cards, black for the dark
   band (the index's Fit section and footer are black, never wine), and the
   hero capped to the site's display scale ────────────────────────────────── */
body.about-page { background: #f4f4f6 !important; }
.about-page main, .about-hero { background: #f4f4f6 !important; }
.about-hero h1 { font-size: clamp(44px, 5vw, 72px) !important; letter-spacing: -.035em !important; line-height: 1 !important; font-weight: 500 !important; }
.about-hero .eyebrow, .about-purpose .eyebrow { color: #6f6f74 !important; }
.founders { background: #080808 !important; }
.founders .eyebrow { color: rgba(255,255,255,.55) !important; }
.founders h2, .about-purpose h2 { font-size: var(--t-display) !important; line-height: 1.04 !important; letter-spacing: var(--ls-tight) !important; font-weight: 500 !important; }
.about-purpose { background: #fff !important; }
/* the fifth-pass column rule must not win on phones */
@media (max-width: 900px) { .studio-features .product-shot-row { grid-template-columns: 1fr !important; } .product-shot-row .lab-avatars img { width: 64px; height: 64px; } .product-shot-row .lab-bg-tiles button { aspect-ratio: 4 / 5; } }

/* ---- Sep-15 pass: Fit title, Plus height, product-shot proportion, control affordance ---- */
/* Fit title: left-aligned, one line, compact band */
.garu-experience .experience-title { text-align: left !important; max-width: 1240px; margin: 0 auto; padding: clamp(64px, 7vw, 96px) 5vw 24px !important; }
.garu-experience .experience-title h2 { max-width: none !important; margin: 0 !important; font-size: clamp(34px, 3.4vw, 48px) !important; line-height: 1.06; letter-spacing: -.03em; }
.garu-experience .experience-title h2 .type-sans, .garu-experience .experience-title h2 .type-serif { display: inline !important; }
.garu-experience .experience-title h2 .type-serif { margin-left: .22em; font-size: 1.02em; }
.garu-experience .experience-title > p:last-child { margin: 12px 0 0 !important; max-width: 62ch; font-size: 17px !important; }
/* Garu Plus: fits one screen at 1440x900 */
.plus-section { padding-top: 56px !important; padding-bottom: 56px !important; }
.plus-section .section-intro h2 { font-size: clamp(34px, 3.4vw, 48px) !important; }
.plus-section .section-intro > p:last-child { margin-top: 8px !important; font-size: 17px !important; }
.plus-section .size-demo { margin-top: 24px !important; padding: 18px 26px 20px !important; }
.plus-section .size-pair { height: 340px !important; gap: 16px; }
.plus-section .size-demo-heading { font-size: 14px; }
.plus-section .size-controls { margin-top: 12px !important; }
.plus-section .size-controls button { min-width: 44px; min-height: 40px; }
.plus-section .size-note { margin-top: 6px; }
.plus-section .plus-materials article img { width: 96px !important; height: 96px !important; }
.plus-section .plus-materials article h3 { font-size: 22px; }
.plus-section .plus-materials article { gap: 16px; }
.plus-section .section-cta { margin-top: 20px !important; }
/* Product shots: both columns end on the same line */
.studio-features .product-shot-row { align-items: stretch !important; }
.product-shot-row .lab-panels { align-self: stretch !important; display: grid; grid-template-rows: auto 1fr; }
.product-shot-row .shot-pair figure img { max-height: 300px; }
.product-shot-row .feature-copy { display: flex; flex-direction: column; }
.product-shot-row .shot-switcher { margin-top: auto; padding-top: 14px; }
/* Affordance: only real controls look clickable, and they all react */
.lab-chips button, .lab-bg-tiles button, .shot-switcher button, .example-switcher button, .size-controls button, .billing-toggle button { cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.lab-chips button:hover, .shot-switcher button:hover { border-color: #171719; }
.lab-bg-tiles button:hover { transform: translateY(-2px); }
.lab-bg-tiles button:hover img { filter: brightness(1.04); }
.example-switcher button:hover, .size-controls button:hover { transform: translateY(-1px); }
.lab-chip-more, .lab-prompt input, #look-items figure, .plus-materials article, .studio-tile, .shot-pair figure { cursor: default; }
#look-items figure:hover, .plus-materials article:hover, .studio-tile:hover, .shot-pair figure:hover { transform: none; box-shadow: none; }
.garu-experience .experience-title .eyebrow { text-align: left; margin-left: 0 !important; margin-right: auto; }
.plus-section .plus-layout { margin-top: 8px !important; }
.plus-section .size-demo { margin-top: 0 !important; }
.plus-section .section-intro { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.plus-section .plus-layout { margin-top: 0 !important; padding-top: 0 !important; }
.plus-section .size-demo { padding-top: 0 !important; }
/* Plus card: these must outrank the earlier .plus-section rules in this sheet */
.plus-section .plus-card .size-pair { height: 480px !important; gap: 36px; }
.plus-section .plus-card .size-pair img { height: calc(100% - 26px) !important; width: auto; }
.plus-section .plus-card .plus-materials article img { width: 40px !important; height: 40px !important; border-radius: 6px; }
.plus-section .plus-card .plus-materials article h3 { font-size: 13px; }
.plus-section .plus-card .plus-materials article p { font-size: 11px; }
@media (max-width: 900px) { .plus-section .plus-card .size-pair { height: 340px !important; } }
/* Plus fabric notes: garu.ai's 104px tiles with the label beneath */
.plus-section .plus-card .plus-materials { display: grid !important; grid-template-columns: repeat(3, 104px) !important; gap: 16px !important; margin: 30px 0 0 !important; }
.plus-section .plus-card .plus-materials article { display: block !important; grid-template-columns: none !important; }
.plus-section .plus-card .plus-materials article img { width: 104px !important; height: 104px !important; border-radius: 4px !important; margin: 0; }
.plus-section .plus-card .plus-materials article h3 { margin: 10px 0 0; font-size: 13px !important; font-weight: 500; }
.plus-section .plus-card .plus-materials article p { margin: 2px 0 0; font-size: 11px !important; line-height: 1.4; color: #8a8a90; }
@media (max-width: 900px) { .plus-section .plus-card .plus-materials { grid-template-columns: repeat(3, 1fr) !important; } .plus-section .plus-card .plus-materials article img { width: 100% !important; height: auto !important; aspect-ratio: 1; } }

/* ---- Trusted-by strip: quiet label, monochrome marks at matched optical heights ---- */
.trust-strip { max-width: 1280px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) 5vw clamp(24px, 3vw, 40px); text-align: center; }
.trust-strip > p, .ab-trust > .ab-exp { margin: 0 0 26px; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #8a8a90; }
.trust-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px clamp(28px, 3.6vw, 56px); }
.trust-logos li { display: flex; align-items: center; }
.trust-logos img { display: block; height: var(--h, 24px); width: auto; max-width: 190px; filter: grayscale(1) contrast(1.05); opacity: .72; mix-blend-mode: multiply; transition: opacity .2s, filter .2s; }
.trust-logos li:hover img { filter: grayscale(0); opacity: 1; }
.trust-word { font-family: Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: .22em; color: #171719; opacity: .72; line-height: 1; }
.ab-trust { text-align: center; padding: clamp(56px, 7vw, 96px) 0 0; }
@media (max-width: 640px) { .trust-logos { gap: 18px 26px; } .trust-logos img { max-width: 140px; } .trust-strip { padding-top: 36px; } }
.trust-logos { gap: 22px clamp(24px, 2.8vw, 40px); }
.trust-logos img { max-width: 150px; }
.trust-word { font-size: 18px; }
/* merchant controls: the line chart inside the first stat card */
.stat-cards { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; }
.stat-chart .stat-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
.stat-chart .stat-metrics span { display: block; font-size: 10px; color: #8a8a90; }
.stat-chart .stat-metrics strong { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: #171719; }
.stat-chart svg { display: block; width: 100%; height: auto; }
.stat-chart .chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; color: #a3a3a3; }
@media (max-width: 900px) { .stat-cards { grid-template-columns: 1fr; } }
/* chat nudge next to the Crisp launcher */
.crisp-nudge { position: fixed; z-index: 199; right: 92px; bottom: 26px; display: flex; align-items: center; gap: 10px; padding: 12px 40px 12px 16px; border: 0; border-radius: 999px; background: #fff; color: #171719; box-shadow: 0 14px 40px -14px rgba(0,0,0,.35); font: inherit; font-size: 13px; cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.crisp-nudge.is-in { opacity: 1; transform: none; }
.crisp-nudge span { color: #6f6f74; }
.crisp-nudge b { font-weight: 600; }
.crisp-nudge-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: #f1f1f3; display: grid; place-items: center; font-size: 14px; line-height: 1; color: #6f6f74; }
@media (max-width: 640px) { .crisp-nudge { right: 16px; left: 16px; bottom: 90px; justify-content: center; } }

/* ---- Garu Plus: the custom tier gets its own ground. Charcoal, a studio sweep behind the figures, ivory type. ---- */
.plus-section .plus-card { background: #161514 !important; color: #f3efe8 !important; border: 1px solid rgba(255,255,255,.06); gap: 56px; }
.plus-section .plus-card .fit-eyebrow { color: rgba(243,239,232,.55); }
.plus-section .plus-card .fit-copy h3 { color: #f3efe8; }
.plus-section .plus-card .fit-sub { color: rgba(243,239,232,.66); }
.plus-section .plus-card .fit-copy .button, .plus-section .plus-card .fit-copy .button-dark { background: #f3efe8 !important; color: #161514 !important; }
.plus-section .plus-card .fit-copy .button:hover { background: #fff !important; }
.plus-section .plus-card .plus-materials { border-top: 1px solid rgba(255,255,255,.08); padding-top: 26px; }
.plus-section .plus-card .plus-materials article img { border-radius: 4px !important; }
.plus-section .plus-card .plus-materials article h3 { color: #f3efe8; }
.plus-section .plus-card .plus-materials article p { color: rgba(243,239,232,.5); }
.plus-section .plus-card .plus-tier { color: rgba(243,239,232,.55); }
.plus-section .plus-card .plus-tier a { color: #f3efe8; }
.plus-section .plus-card .fit-media { position: relative; padding: 24px 0 8px; }
.plus-section .plus-card .fit-media::before { content: ""; position: absolute; inset: -6% -10% 6%; background: radial-gradient(ellipse 60% 62% at 50% 42%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,0) 72%); pointer-events: none; }
.plus-section .plus-card .fit-media::after { content: ""; position: absolute; left: 50%; bottom: 118px; width: 62%; height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,.10), rgba(255,255,255,0) 70%); pointer-events: none; }
.plus-section .plus-card .size-pair { position: relative; z-index: 1; height: 520px !important; gap: 44px; }
.plus-section .plus-card .size-pair figcaption { color: rgba(243,239,232,.5); }
.plus-section .plus-card .size-controls { position: relative; z-index: 1; gap: 10px; margin-top: 22px; }
.plus-section .plus-card .size-controls button { background: transparent !important; color: rgba(243,239,232,.6) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: none !important; }
.plus-section .plus-card .size-controls button:hover { border-color: rgba(255,255,255,.4) !important; color: #f3efe8 !important; transform: none; }
.plus-section .plus-card .size-controls button[aria-pressed="true"] { background: #f3efe8 !important; color: #161514 !important; border-color: #f3efe8 !important; }
.plus-section .plus-card .size-row { position: relative; z-index: 1; color: rgba(243,239,232,.6); }
.plus-section .plus-card .demo-label { color: rgba(243,239,232,.45); }
@media (max-width: 900px) { .plus-section .plus-card .size-pair { height: 360px !important; } .plus-section .plus-card .fit-media::after { bottom: 108px; } }
/* most-tried-on rows under the chart */
.stat-items { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(23,23,25,.08); }
.stat-items > span { display: block; font-size: 10px; color: #8a8a90; margin-bottom: 8px; }
.stat-items > div { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 12px; color: #171719; }
.stat-items img { width: 28px; height: 34px; object-fit: cover; border-radius: 4px; background: #fff; border: 1px solid rgba(23,23,25,.06); }
.stat-items > div span:last-child { color: #6f6f74; font-variant-numeric: tabular-nums; }
.plus-section .plus-card .plus-tier b { color: #f3efe8; font-weight: 500; }
/* section eyebrows match the card eyebrows: quiet grey, not the legacy wine */
.section-intro > .eyebrow, .platform-statement .eyebrow { color: #a3a3a3 !important; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
/* phones: in Garu Plus the figures come before the copy */
@media (max-width: 900px) {
  .plus-section .plus-card { display: flex !important; flex-direction: column; }
  .plus-section .plus-card .fit-media { order: -1; margin-bottom: 26px; }
}

/* ---- Garu Plus on white ---- */
.plus-section .plus-card { background: #fff !important; color: #171719 !important; border: 1px solid rgba(23,23,25,.06) !important; }
.plus-section .plus-card .fit-eyebrow { color: #a3a3a3 !important; }
.plus-section .plus-card .fit-copy h3 { color: #171719 !important; }
.plus-section .plus-card .fit-sub { color: #4a4a4f !important; }
.plus-section .plus-card .fit-sub b { color: #171719 !important; }
.plus-section .plus-card .fit-copy .button, .plus-section .plus-card .fit-copy .button-dark { background: #0a0a0a !important; color: #fff !important; }
.plus-section .plus-card .plus-materials { border-top-color: rgba(23,23,25,.1) !important; }
.plus-section .plus-card .plus-materials article h3 { color: #171719 !important; }
.plus-section .plus-card .plus-materials article p { color: #8a8a90 !important; }
.plus-section .plus-card .plus-tier { color: #6f6f74 !important; }
.plus-section .plus-card .plus-tier a { color: #171719 !important; }
.plus-section .plus-card .fit-media::before { background: radial-gradient(ellipse 60% 62% at 50% 42%, rgba(23,23,25,.07) 0%, rgba(23,23,25,.03) 45%, rgba(23,23,25,0) 72%) !important; }
.plus-section .plus-card .fit-media::after { background: radial-gradient(ellipse at center, rgba(23,23,25,.09), rgba(23,23,25,0) 70%) !important; }
.plus-section .plus-card .size-pair figcaption { color: #8a8a90 !important; }
.plus-section .plus-card .size-controls button { background: transparent !important; color: #6f6f74 !important; border: 1px solid rgba(23,23,25,.16) !important; }
.plus-section .plus-card .size-controls button:hover { border-color: rgba(23,23,25,.45) !important; color: #171719 !important; }
.plus-section .plus-card .size-controls button[aria-pressed="true"] { background: #171719 !important; color: #fff !important; border-color: #171719 !important; }
.plus-section .plus-card .size-row { color: #6f6f74 !important; }
.plus-section .plus-card .demo-label { color: #8a8a90 !important; }

/* ---- Garu Fit: the try-on stage sits closer to its copy ---- */
@media (min-width: 901px) {
  #tryon-step.fit-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; }
  #tryon-step .fit-media .stage-row { justify-content: flex-start; }
  #tryon-step .fit-media { padding-left: 0; }
}
/* the row must fit its column once it is left-aligned, or the wardrobe hangs off the card */
@media (min-width: 901px) {
  #tryon-step .fit-media .stage-row { gap: 20px; }
  #tryon-step .fit-media .stage-fig { width: clamp(150px, 12vw, 168px) !important; }
  #tryon-step .fit-media .stage-photo { width: 118px !important; }
  #tryon-step .fit-media .stage-figures { gap: 12px; }
  #tryon-step .fit-media #look-items figure { width: 76px; }
  #tryon-step .fit-media .size-chip { width: 150px; }
}
/* narrower desktops need a little more room again */
@media (min-width: 901px) and (max-width: 1320px) {
  #tryon-step .fit-media .stage-fig { width: clamp(132px, 11vw, 150px) !important; }
  #tryon-step .fit-media .stage-photo { width: 104px !important; }
  #tryon-step .fit-media #look-items figure { width: 68px; }
  #tryon-step .fit-media .stage-row { gap: 16px; }
}
/* Left-aligning the stage only pays where there is room for it. Below 1200px
   the row is centred again and the pieces shrink, so the wardrobe never hangs
   off the card and the page never scrolls sideways. */
@media (min-width: 901px) and (max-width: 1199px) {
  #tryon-step .fit-media .stage-row { justify-content: center; gap: 12px; }
  #tryon-step .fit-media .stage-fig { width: clamp(112px, 10vw, 132px) !important; }
  #tryon-step .fit-media .stage-photo { width: 92px !important; }
  #tryon-step .fit-media #look-items figure { width: 60px; }
  #tryon-step .fit-media .size-chip { width: 132px; }
  #tryon-step.fit-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
/* .size-demo is only a hook for the cycling script here — drop its legacy box */
.plus-card .fit-media.size-demo { max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; }
/* Virtual try-on: the copy column is sized to its text, so the stage sits
   near the middle instead of being pushed right by an over-wide column. */
@media (min-width: 1200px) {
  #tryon-step.fit-card { grid-template-columns: minmax(0, 400px) minmax(0, 1fr) !important; gap: 16px !important; }
  #tryon-step .fit-copy { padding-right: 0; }
  #tryon-step .fit-copy > * { max-width: 400px; }
  #tryon-step .fit-copy .story-media-caption { max-width: 34ch; }
}

/* ---- Virtual try-on: bigger, centred, and no dead band on the right ---- */
@media (min-width: 1200px) {
  #tryon-step.fit-card { padding-right: clamp(16px, 1.6vw, 24px) !important; }
  #tryon-step .fit-media .stage-row { justify-content: center; gap: 24px; }
  #tryon-step .fit-media .stage-fig { width: clamp(196px, 16vw, 232px) !important; }
  #tryon-step .fit-media .stage-figures { gap: 14px; }
  #tryon-step .fit-media .stage-photo { width: 142px !important; }
  #tryon-step .fit-media .size-chip { width: 172px; }
  /* the garments read as product cards, the way Aiuta shows them */
  #tryon-step .fit-media #look-items { gap: 16px; }
  #tryon-step .fit-media #look-items figure { width: 112px !important; }
  #tryon-step .fit-media #look-items img { aspect-ratio: 4/5; border-radius: 10px; }
  #tryon-step .fit-media #look-items figcaption { font-size: 13px; line-height: 1.3; }
}
/* the example dots come out — the examples advance on their own now */
#tryon-step .fit-copy .example-switcher { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the comparison row looks like something you press */
.fit-more summary { border-radius: 16px; padding-left: 18px; padding-right: 18px; transition: background .18s; }
.fit-more summary:hover { background: #f4f4f6; }
.fit-more summary:focus-visible { outline: 2px solid #171719; outline-offset: 2px; }
.fit-more-cta { margin-left: auto; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #171719; white-space: nowrap; }
.fit-more-icon { margin-left: 12px; background: #171719; border-color: #171719; }
.fit-more-icon::before, .fit-more-icon::after { background: #fff; }
.fit-more[open] .fit-more-cta { color: #8a8a90; }
/* phones: the comparison row stacks instead of squeezing four things onto one line */
@media (max-width: 760px) {
  .fit-more summary { flex-wrap: wrap; gap: 6px 12px; padding: 18px 16px; }
  .fit-more summary .fit-eyebrow { flex: 1 0 100%; }
  .fit-more-title { flex: 1 0 100%; font-size: 16px; line-height: 1.3; }
  .fit-more-cta { margin-left: 0; }
  .fit-more-icon { margin-left: auto; width: 34px; height: 34px; }
}

/* ---- The Try-on and sizing lede, set the way Aiuta sets its equivalent line:
       Poppins 400 at 16.85px, -0.0151em, 1.3, pure black. ---- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.fit-section > .section-intro > p:last-child {
  font-family: "Poppins", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16.85px !important;
  letter-spacing: -0.0151em !important;
  line-height: 1.3 !important;
  color: #000 !important;
  max-width: 62ch;
}
/* the two figures stand together, and closer to the copy */
@media (min-width: 1200px) {
  #tryon-step .fit-media .stage-figures { gap: 0 !important; }
  #tryon-step .fit-media .stage-row { gap: 18px; }
  #tryon-step.fit-card { gap: 8px !important; }
}
/* the back cut-out carries ~22% transparent margin each side inside its 3:4 box,
   so the garments looked stranded; pull them into that margin */
@media (min-width: 1200px) {
  #tryon-step .fit-media .look-wardrobe { margin-left: -46px !important; }
  #tryon-step .fit-media #look-items figure::before { width: 18px; }
}

/* ---- Virtual try-on, fourth pass: copy column hugs its text, smaller photo,
       size chip sits above the two figures, everything shifts toward the middle ---- */
@media (min-width: 1200px) {
  #tryon-step.fit-card { grid-template-columns: 372px minmax(0, 1fr) !important; gap: 0 !important; }
  #tryon-step .fit-copy > * { max-width: 372px; }
  #tryon-step .fit-media .stage-row { justify-content: flex-start; gap: 22px; }
  #tryon-step .fit-media .stage-left { gap: 0; }
  #tryon-step .fit-media .stage-photo { width: 106px !important; }
  #tryon-step .fit-media .stage-figures { position: relative; padding-top: 84px !important; }
  #tryon-step .fit-media .stage-figures .size-chip { position: absolute !important; top: 0; left: 50%; transform: translateX(-50%); width: 196px; margin: 0 !important; z-index: 2; }
  #tryon-step .fit-media .look-wardrobe { margin-left: -40px !important; }
}
/* the earlier stage rule forces transform:none on the chip; the centring shift must outrank it */
@media (min-width: 1200px) { #tryon-step .fit-media .stage-figures .size-chip { transform: translateX(-50%) !important; } }
/* The chip is now a child of .stage-figures. Desktop: a badge pinned above the
   pair (bottom must be released or the old bottom:-22px stretches it into a
   column). Phones and narrow desktops: a full-width first row inside the
   figures block, never a flex item beside them. */
@media (min-width: 1200px) {
  #tryon-step .fit-media .stage-figures .size-chip { top: 0 !important; bottom: auto !important; left: 50% !important; right: auto !important; height: auto !important; width: 196px !important; }
}
@media (max-width: 1199px) {
  #tryon-step .fit-media .stage-figures { flex-wrap: wrap; justify-content: center; }
  #tryon-step .fit-media .stage-figures .size-chip { position: static !important; flex: 1 0 100% !important; order: -1; width: auto !important; max-width: 220px; margin: 0 auto 14px !important; transform: none !important; }
}
/* one treatment at every width: the chip floats above the figure pair, never a flex item beside them */
#tryon-step .fit-media .stage-figures { position: relative; padding-top: 84px !important; flex-wrap: nowrap !important; justify-content: center; max-width: 100%; }
#tryon-step .fit-media .stage-figures .size-chip { position: absolute !important; top: 0 !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; height: auto !important; width: 196px !important; max-width: none !important; margin: 0 !important; flex: none !important; order: 0 !important; z-index: 2; }
@media (max-width: 639px) { #tryon-step .fit-media .stage-figures .size-chip { width: 176px !important; } #tryon-step .fit-media .stage-figures { padding-top: 78px !important; } }
/* the size chip sits on the front figure, bottom-left by the shoes */
#tryon-step .fit-media .stage-figures { padding-top: 0 !important; }
#tryon-step .fit-media .stage-figures .size-chip { top: auto !important; bottom: 34px !important; left: -14px !important; right: auto !important; transform: none !important; width: 176px !important; }
@media (max-width: 639px) { #tryon-step .fit-media .stage-figures .size-chip { bottom: 22px !important; left: -6px !important; width: 156px !important; } }

/* ---- Sep-21: the three product cards are links to their sections ---- */
.capability-card { cursor: pointer; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.capability-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(0,0,0,.45); }
.capability-card:nth-child(2):hover { transform: translateY(-4px) !important; }
.capability-link { position: absolute; inset: 0; z-index: 5; border-radius: inherit; text-decoration: none; }
.capability-link:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.capability-copy { z-index: 2; }
.capability-arrow { display: inline-block; margin-left: .18em; font-weight: 400; opacity: .55; transition: transform .35s, opacity .35s; }
.capability-card:hover .capability-arrow { transform: translateY(4px); opacity: 1; }
html { scroll-behavior: smooth; }
#tryon-step, #ai-sizing, #studio { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .capability-card, .capability-arrow { transition: none; } .capability-card:hover { transform: none; } }
.capability-copy h3 .capability-arrow { display: inline; margin: 0 0 0 .18em; font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; }