/* Hairstyle guide variant B (shared by bob, men's center part, ...). Loaded after tokens-v1 / guides-v1; pilot-v3.js owns behavior.
   Phone order: hook, demo, photo picker + proof, 2x2 choice, try-on, folded references. */
.guide-v3::before {content:'';position:absolute;top:0;left:0;right:0;height:900px;background:white var(--ht-asset-wash) center/100% 100% no-repeat;z-index:-1;pointer-events:none}
.guide-v3 main.frame {position:relative}

/* hero */
.v3-hero {display:flex;flex-direction:column;gap:16px;padding:12px 0 44px}
.v3-hero-copy .eyebrow {margin-bottom:10px}
.v3-hero h1 {font-size:clamp(30px,7.6vw,52px);line-height:1.22}
.v3-lead {margin-top:12px;font-size:16px;line-height:1.8;color:var(--ht-color-muted)}
.guide-v3 .compare {aspect-ratio:3/4;max-height:none;border-radius:var(--ht-radius-photo);box-shadow:var(--ht-shadow-photo);container-type:inline-size}
.guide-v3 .compare img {object-fit:cover;object-position:50% 30%}
.guide-v3 .compare-before img {width:100cqw;min-width:0;max-width:none}
/* Same 3:4 as the portraits, so neither the head nor the shoulders are cropped. */
.v3-hero-demo .compare {width:100%;max-width:380px;max-height:none;margin:0 auto;background:white}
/* Short phones: shrink the 3:4 demo so the photo button stays in the first viewport. */
@media (max-width:760px) {.v3-hero-demo .compare {max-width:clamp(240px,calc((100vh - 340px) * .75),380px);max-width:clamp(240px,calc((100svh - 340px) * .75),380px)}}
.v3-hero-demo .compare img {object-position:50% 0}
.v3-hero-action {display:flex;flex-direction:column;align-items:stretch;text-align:center}
.v3-hero-action .button {width:100%}
.v3-photo-button {position:relative;overflow:hidden;cursor:pointer}
.v3-photo-button input {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.v3-photo-button:focus-within {outline:3px solid var(--ht-color-focus);outline-offset:4px}
.v3-proof {margin-top:14px;font-size:14px;line-height:1.6}
.v3-proof strong {font:700 22px/1 var(--ht-font-display);letter-spacing:-.02em;margin-right:2px}
.v3-proof a {font-size:11px;color:var(--ht-color-muted);text-decoration:none;margin-left:2px;vertical-align:super}
.v3-hero-action .micro {margin-top:4px}

/* 2x2 choice */
.v3-styles {padding:8px 0 48px}
.v3-styles h2 {font-size:clamp(24px,6vw,36px);text-align:center;margin-bottom:20px}
.v3-style-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v3-tile {position:relative;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0 0 12px;border:0;border-radius:var(--ht-radius-card);background:var(--ht-color-soft);text-align:left;color:var(--ht-color-ink);overflow:hidden;outline:2px solid transparent;outline-offset:2px;transition:outline-color var(--ht-motion-fast)}
.v3-tile img {width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 16%;margin-bottom:8px}
.v3-tile strong {font-size:14px;padding:0 10px;line-height:1.4}
.v3-tile>span:not(.v3-badge) {font-size:12px;line-height:1.5;color:var(--ht-color-muted);padding:0 10px}
.v3-tile[aria-pressed=true] {outline-color:var(--ht-color-ink);background:var(--ht-color-soft);color:var(--ht-color-ink)}
.v3-tile[aria-pressed=true]::before {content:none}
.v3-tile:disabled {opacity:.45}
.v3-tile[aria-pressed=true]::after {content:'✓';position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--ht-color-ink);color:white;font-size:13px;display:flex;align-items:center;justify-content:center}
.v3-badge {position:absolute;top:8px;left:8px;background:white;color:var(--ht-color-ink);font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;box-shadow:0 1px 4px #0001}
.v3-faceshape {margin-top:22px;text-align:center}
.v3-faceshape>p:first-child {font-size:13px;color:var(--ht-color-muted)}
.v3-chips {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.v3-chip {display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px;border:1px solid var(--ht-color-line);background:white;border-radius:10px;font-size:12px;font-weight:600;color:var(--ht-color-ink)}
.v3-chip img {width:100%;max-width:96px;aspect-ratio:1;object-fit:contain}
.v3-chip[aria-pressed=true] {border-color:var(--ht-color-ink);box-shadow:0 0 0 1px var(--ht-color-ink)}
.v3-chip-reason {min-height:0;font-size:13px;line-height:1.7;color:var(--ht-color-ink);margin-top:10px}
.v3-chip-reason:empty {display:none}
.v3-styles-cta {display:flex;width:100%;max-width:400px;margin:24px auto 0}

/* try-on */
/* Bleed only the background to the viewport edges. Keeping layout dimensions
   intact preserves card/upload widths and avoids 100vw scrollbar overflow.
   Clip the decorative layer vertically, never the controls or focus rings. */
.guide-v3 .tryon {position:relative;isolation:isolate;background:transparent;border-radius:0;padding:28px 18px;margin-bottom:48px}
.guide-v3 .tryon::before {content:'';position:absolute;inset:0;z-index:-1;background:var(--ht-color-blue);box-shadow:0 0 0 100vmax var(--ht-color-blue);clip-path:inset(0 -100vmax);pointer-events:none}
.guide-v3 .tryon-heading {text-align:center;margin-bottom:20px}
.guide-v3 .tryon-heading h2 {font-size:clamp(24px,6vw,36px)}
.guide-v3 .tryon.has-result .tryon-heading {display:none}
.guide-v3 .style-picker {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
/* Retain the localized fieldset name for assistive technology, without a visible heading. */
.guide-v3 .style-picker legend {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.guide-v3 .upload-box {border-color:var(--ht-color-line);border-radius:10px;background:white}
/* Mirror the gallery cards above: photo crop, soft surface, type and selection check.
   Keep native radios so keyboard selection and the existing consent gate are unchanged. */
.guide-v3 .style-picker label {display:flex;flex-direction:column;gap:2px;padding:0 0 12px;border:0;border-radius:var(--ht-radius-card);background:var(--ht-color-soft);text-align:left;color:var(--ht-color-ink);outline:2px solid transparent;outline-offset:2px;transition:outline-color var(--ht-motion-fast)}
.guide-v3 .style-picker img {display:block;aspect-ratio:4/5;object-position:50% 16%;margin-bottom:8px}
.guide-v3 .style-picker span {padding:0 10px;min-height:0;font-size:14px;font-weight:700;line-height:1.4}
.guide-v3 .style-picker label:has(input:checked) {box-shadow:none;outline-color:var(--ht-color-ink)}
.guide-v3 .style-picker label:has(input:checked)::after {content:'✓';position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--ht-color-ink);color:white;font-size:13px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.guide-v3 .style-picker label:has(input:focus-visible) {outline:3px solid var(--ht-color-focus);outline-offset:4px}
.guide-v3 .upload-layout {grid-template-columns:1fr;gap:18px}
.guide-v3 .upload-box {min-height:200px}
.guide-v3 .consent {margin:0 0 6px;font-size:14px}
.guide-v3 .consent a {color:var(--ht-color-ink)}
.guide-v3 .upload-help details {padding:0 0 10px;border:0}
.guide-v3 .upload-help summary {font-size:12px;color:var(--ht-color-muted);min-height:32px}
.guide-v3 .upload-help .button {width:100%}
.v3-progress-steps {list-style:none;padding:0;margin:0 auto 18px;max-width:320px;display:grid;gap:10px;text-align:left}
.v3-progress-steps li {display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ht-color-muted)}
.v3-progress-steps li::before {content:'';width:18px;height:18px;border-radius:50%;border:2px solid var(--ht-color-line);flex-shrink:0;box-sizing:border-box}
.v3-progress-steps li.active {color:var(--ht-color-ink);font-weight:600}
.v3-progress-steps li.active::before {border-color:var(--ht-color-focus);border-top-color:transparent;animation:spin 1s linear infinite}
.v3-progress-steps li.done::before {content:'✓';border:0;background:var(--ht-color-ink);color:white;font-size:11px;display:flex;align-items:center;justify-content:center}
.v3-result-title {text-align:center;font-size:clamp(24px,6vw,34px);margin-bottom:16px}
.v3-result-compare {width:100%;max-width:420px;margin:0 auto}
.v3-result-compare img {object-fit:contain;object-position:50% 50%;background:white}
.v3-result-compare.single .compare-before,.v3-result-compare.single .compare-handle,.v3-result-compare.single .compare-range,.v3-result-compare.single .compare-label.before {display:none}
.v3-result-note {text-align:center;margin:10px auto 0;max-width:420px}
.v3-result-actions {display:flex;flex-direction:column;align-items:stretch;gap:10px;max-width:420px;margin:18px auto 0}
.v3-result-actions .text-button {align-self:center;padding:8px}
.v3-locked {margin-top:32px;padding-top:28px;border-top:1px solid #cfe1ea;text-align:center}
.v3-locked h3 {font-size:clamp(22px,5.6vw,30px)}
.v3-locked-grid {list-style:none;padding:0;margin:18px 0 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.v3-locked-grid li {position:relative;font-size:11px;line-height:1.4;color:var(--ht-color-muted)}
.v3-locked-grid img {width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;border-radius:8px;filter:grayscale(.35) brightness(.92);margin-bottom:6px}
.v3-lock {position:absolute;left:50%;bottom:34px;transform:translateX(-50%);white-space:nowrap;background:#171c25d9;color:white;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px}
.v3-locked>p {font-size:14px;color:var(--ht-color-muted)}
.guide-v3 .store-links {flex-direction:column;gap:10px;margin-top:16px}
.guide-v3 .store-links .button {font-size:15px;min-height:52px}
.guide-v3 #used {text-align:center}.guide-v3 #used p {font-size:14px;margin:10px 0 0}

/* folded references */
.v3-more {max-width:var(--ht-width-reading);margin:0 auto 24px}
.v3-more h2 {font-size:clamp(22px,5.4vw,30px);margin-bottom:14px}
.v3-fold {background:var(--ht-color-soft);border:0;border-radius:10px;padding:0;margin-bottom:8px}
.v3-fold summary {font:600 15px/1.6 var(--ht-font-body);padding:14px 16px;min-height:52px}
.v3-fold-body {padding:0 16px 18px}
.v3-fold-body p {font-size:14px;color:var(--ht-color-muted);margin:0}
.v3-fold blockquote {margin:0 0 14px;font-size:15px;line-height:1.9;background:white;border-radius:8px;padding:14px 16px}
.v3-fold .button {width:100%}
.v3-proof-note {margin-top:18px}
.v3-closing {padding:40px 24px 56px}.v3-closing h2 {font-size:clamp(24px,6vw,36px)}

@media(max-width:900px) {.guide-v3::before {height:1100px}}
/* Phones: the taller 3:4 portrait needs the room the breadcrumbs used, to keep the photo button on the first screen. */
@media(max-width:760px) {.guide-v3 .breadcrumbs {display:none}.v3-hero {padding-top:4px;gap:14px}.v3-lead {margin-top:8px;font-size:15px}}
@media(max-width:360px) {.v3-tile strong {font-size:13px}.v3-tile>span:not(.v3-badge) {font-size:11px}.guide-v3 .nav-link {font-size:10px;padding:10px 12px}}
@media(min-width:761px) {
  .v3-hero {display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:auto auto;gap:24px 56px;align-items:start;padding:36px 0 72px}
  .v3-hero-copy {grid-column:1;grid-row:1;align-self:end}.v3-hero-demo {grid-column:2;grid-row:1/span 2}.v3-hero-action {grid-column:1;grid-row:2;max-width:420px;text-align:left}
  .v3-hero-demo .compare {max-height:none;max-width:460px}
  .v3-lead {font-size:18px}
  .v3-style-grid {grid-template-columns:repeat(4,1fr);gap:18px}
  .v3-chips {max-width:560px;margin-inline:auto}
  .v3-chip {font-size:13px}
  .v3-tile strong {font-size:16px}.v3-tile>span:not(.v3-badge) {font-size:13px}
  .guide-v3 .tryon {padding:44px}
  .guide-v3 .style-picker {grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:720px;margin:0 auto 28px}
  .guide-v3 .style-picker span {font-size:16px}
  /* A single task column keeps photo selection -> consent -> try-on in order.
     Match the picker width rather than stretching the upload across the page. */
  .guide-v3 .upload-layout {grid-template-columns:1fr;gap:24px;max-width:720px;margin-inline:auto;align-items:start}
  .guide-v3 .upload-box {min-height:240px}
  .guide-v3 .store-links {flex-direction:row;justify-content:center}
  .v3-locked-grid {max-width:520px;margin-inline:auto}
  .v3-closing {padding:64px 24px 72px}
}
@media(prefers-reduced-motion:reduce) {.v3-progress-steps li.active::before {animation:none}.v3-tile,.guide-v3 .style-picker label {transition:none}}
.v3-fold-body .v3-salon-tip {margin:10px 0 16px}
.v3-data {margin:-8px auto 20px;max-width:30em;text-align:center;font-size:14px;line-height:1.6;color:var(--ht-color-muted)}
.v3-data a {font-size:11px;text-decoration:none;margin-left:2px;vertical-align:super;color:inherit}
/* Match the homepage's official badges; keep pricing quiet and ratings off the guide. */
#guide-app-links .store-badges {margin-top:24px;gap:16px}
.guide-app-price {display:block;margin-top:12px;color:var(--ht-color-muted);font-size:12px;line-height:1.5}
.guide-app-features {display:inline-block;margin-top:8px;padding:8px;color:var(--ht-color-muted);font-size:14px;text-underline-offset:4px}
.guide-app-features:focus-visible {outline:2px solid currentColor;outline-offset:3px}