/* Presentation only: pilot-v3.js still owns photo, generation and result state.
   The compatibility aliases also recolor existing pilot components, not their behavior. */
:root {--bg:var(--ht-color-paper);--ink:var(--ht-color-ink);--muted:var(--ht-color-muted);--line:var(--ht-color-line);--accent:var(--ht-color-focus);--paper:var(--ht-color-paper);--soft:var(--ht-color-soft);--radius:var(--ht-radius-card)}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:32px}
body {margin:0;min-width:0;color:var(--ht-color-ink);background:white;font:var(--ht-size-body)/var(--ht-leading-body) var(--ht-font-body);-webkit-font-smoothing:antialiased}
[hidden] {display:none!important}
img {display:block;max-width:100%;height:auto}
a {color:inherit;text-underline-offset:4px}
button,input,select {font:inherit}
button {cursor:pointer}
button:disabled {cursor:not-allowed;opacity:.45}
:focus-visible {outline:3px solid var(--ht-color-focus);outline-offset:4px}
figure,h1,h2,h3,p {margin:0}
h1,h2,h3,.brand {font-family:var(--ht-font-display);letter-spacing:var(--ht-tracking-display);font-weight:700;line-height:var(--ht-leading-heading)}
h1 {font-size:var(--ht-size-h1)}
h2 {font-size:var(--ht-size-h2)}
h3 {font-size:var(--ht-size-h3)}
.frame {width:82%;max-width:var(--ht-width-page);margin-inline:auto}
.skip {position:absolute;top:-90px;left:24px;z-index:100;background:white;padding:12px}.skip:focus {top:8px}
.eyebrow {font:700 var(--ht-size-eyebrow)/1.6 var(--ht-font-body);letter-spacing:var(--ht-tracking-eyebrow);color:#59616d;text-transform:uppercase;margin-bottom:16px}
.micro,.image-note {font-size:var(--ht-size-small);line-height:1.7;color:var(--ht-color-muted)}
.button {display:inline-flex;justify-content:center;align-items:center;text-align:center;border:1px solid var(--ht-color-ink);border-radius:var(--ht-radius-control);padding:16px 25px;min-height:var(--ht-height-control);font-size:17px;font-weight:600;line-height:1.4;text-decoration:none;background:var(--ht-color-ink);color:white;transition:background var(--ht-motion-fast)}
.button:hover {background:#30394b}
.button.secondary {background:transparent;color:var(--ht-color-ink);border-color:var(--ht-color-outline)}
.button.secondary:hover {background:var(--ht-color-soft)}
.text-link {display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.topbar {position:static;background:transparent;border:0;backdrop-filter:none}
.nav {display:flex;gap:28px;align-items:center;min-height:68px;justify-content:space-between}
.brand {font-size:34px;font-weight:400;text-decoration:none;line-height:1.15;white-space:nowrap}
.brand span {display:none}
.nav-menu {display:flex;align-items:center;gap:28px;margin-left:auto;font-size:13px;color:var(--ht-color-muted)}
.nav-menu a {text-decoration:none;min-height:44px;display:flex;align-items:center}
.nav-link,.nav .button {font-size:12px;border-radius:5px;min-height:42px;min-width:135px;padding:10px 20px;display:inline-flex;align-items:center;text-decoration:none;background:var(--ht-color-ink);color:white}
.site-wash {background:white var(--ht-asset-wash) center/100% 100% no-repeat}
.breadcrumbs {display:flex;flex-wrap:wrap;gap:8px;padding:20px 0 12px;font-size:12px;color:var(--ht-color-muted)}
.breadcrumbs a {text-decoration:none;min-height:24px}
.article-hero {display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;padding:40px 0 72px}
.article-hero h1 {margin:18px 0 26px;line-height:1.18}
.article-hero .lead {font-size:19px;line-height:1.8;color:var(--ht-color-muted);max-width:520px}
.article-actions {display:flex;flex-wrap:wrap;gap:16px;margin:28px 0 18px}
.article-actions .button {min-width:190px}
.hero-portraits {display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.hero-portraits figure:nth-child(2) {margin-top:56px}
.hero-portraits img {width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--ht-radius-photo);box-shadow:var(--ht-shadow-photo)}
.hero-portraits figcaption {font-size:13px;color:var(--ht-color-muted);margin-top:12px}
.editorial-section {padding:64px 0}
.section-heading {max-width:720px;margin:0 auto 36px;text-align:center}
.section-heading h2 {margin-bottom:16px}
.section-heading>p:last-child {color:var(--ht-color-muted);margin-top:12px}
.guide-grid {display:grid;grid-template-columns:1fr 1fr;gap:32px}
.guide-card {display:block;text-decoration:none;border-radius:10px;background:var(--ht-color-soft);overflow:hidden}
.guide-card:hover h3 {text-decoration:underline;text-underline-offset:5px}
.guide-card img {width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 24%}
.guide-card .guide-pair {display:grid;grid-template-columns:1fr 1fr;gap:2px}
.guide-pair img {aspect-ratio:3/4}
.guide-card-copy {padding:28px 32px 32px}
.guide-card h3 {font-size:26px;margin:12px 0}
.guide-card p {color:var(--ht-color-muted)}
.guide-card .text-link {margin-top:18px;color:var(--ht-color-ink)}
.label {font-size:11px;letter-spacing:.12em;font-weight:600;color:var(--ht-color-muted)}
.editorial-row {display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-bottom:72px}
.editorial-row.reverse .editorial-visual {order:2}
.editorial-visual img {width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;border-radius:var(--ht-radius-photo)}
.editorial-copy h2 {margin:16px 0 24px}
.editorial-copy p {color:var(--ht-color-muted);margin-bottom:18px}
.editorial-copy .button {margin-top:10px}
.reading {max-width:var(--ht-width-reading);margin:auto}
.reading h2 {margin-bottom:24px}.reading h3 {margin:32px 0 12px}
.reading p {color:var(--ht-color-muted);margin-bottom:20px}
.reading li {margin-bottom:12px;color:var(--ht-color-muted)}
.evidence-panel {background:var(--ht-color-soft);padding:32px 36px;border-radius:var(--ht-radius-card)}
.evidence-panel h3 {margin:0 0 18px}
.evidence-panel details {border-bottom:0;padding:0}
.evidence-panel summary {cursor:pointer;min-height:44px;font-size:14px}
.evidence-panel details p {font-size:13px;margin:12px 0 0}
.evidence-table {width:100%;border-collapse:collapse;font-size:15px;margin-bottom:16px}
.evidence-table th,.evidence-table td {padding:14px 0;border-bottom:1px solid var(--ht-color-line);text-align:left}
.evidence-table th:last-child,.evidence-table td:last-child {text-align:right;white-space:nowrap}
.salon-note {background:var(--ht-color-soft);border:0;border-radius:10px;padding:40px;max-width:900px;margin:0 auto 64px}
.salon-note blockquote {margin:24px 0;border:0;background:transparent;font-size:17px;padding:0;line-height:1.9}
.salon-note .section-heading {text-align:left;margin:0}
.faq {background:var(--ht-color-faq);padding:56px 40px;border-radius:10px;margin-bottom:64px}
.faq details {padding:0;border:0;border-radius:10px;background:white;margin:12px 0}
.faq summary {font:600 15px/1.6 var(--ht-font-body);min-height:64px;padding:16px 20px;cursor:pointer;display:list-item;list-style-position:inside}
.faq details p {font-size:15px;line-height:1.8;color:var(--ht-color-muted);padding:0 20px 20px;margin:0}
.sources {font-size:13px;color:var(--ht-color-muted);padding:32px 0;border-top:1px solid var(--ht-color-line)}
.sources h2 {font-size:20px;margin-bottom:12px}.sources li {margin-bottom:8px}
.closing-cta {text-align:center;padding:64px 24px 72px}
.closing-cta h2 {margin-bottom:20px}.closing-cta>p {color:var(--ht-color-muted);max-width:680px;margin:0 auto 26px}
.store-badges {display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:24px auto 0}
.store-badges a {display:flex;align-items:center;min-height:48px}
.store-badges img {height:40px;width:auto}
.footer {background:var(--ht-color-footer);color:var(--ht-color-footer-text);max-width:none;width:100%;border:0;padding:42px max(24px,calc((100% - 1184px)/2));display:flex;flex-wrap:wrap;align-items:center;gap:24px;justify-content:space-between}
.footer .brand {color:white}.footer>div {display:flex;flex-wrap:wrap;gap:24px;font-size:12px}.footer a {text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.footer small {font-size:11px}
.download-dialog {width:min(440px,calc(100% - 40px));padding:28px;border:0;border-radius:10px;background:white;color:var(--ht-color-ink)}
.download-dialog::backdrop {background:#18243088}
.download-dialog h2 {font-size:30px;margin:12px 0 18px}.download-dialog p {color:var(--ht-color-muted)}
.dialog-close {display:block;margin-left:auto;min-height:44px;padding:8px 14px;background:white;border:1px solid var(--ht-color-line);border-radius:5px}
.download-dialog .store-badges {gap:16px}
/* Bob guide: keep its DOM hooks and no-upload comparison, but match the LP's
   masthead, serif hierarchy, soft surfaces and centered photo-free final CTA. */
.bob-guide main.frame {position:relative}
.bob-guide::before {content:'';position:absolute;top:0;left:0;right:0;height:760px;background:white var(--ht-asset-wash) center/100% 100% no-repeat;z-index:-1;pointer-events:none}
.bob-guide .hero {display:grid;grid-template-columns:1.08fr 1fr;grid-template-rows:auto;gap:28px 64px;align-items:center;padding:36px 0 72px}
.bob-guide .hero-copy,.bob-guide .hero-demo {display:block}
.bob-guide .hero-copy {grid-column:1;grid-row:1}.bob-guide .hero-demo {grid-column:2;grid-row:1}.bob-guide .hero-action {max-width:440px;margin-top:28px}
.bob-guide .hero h1 {font-size:clamp(32px,3.5vw,50px);line-height:1.22;margin:20px 0 24px}
.bob-guide .hero .lead {font-size:18px;color:var(--ht-color-muted);line-height:1.85}
.bob-guide .compare {aspect-ratio:3/4;max-height:none;border-radius:18px;box-shadow:var(--ht-shadow-photo);container-type:inline-size}
.bob-guide .compare img {object-fit:cover;object-position:50% 30%}
.bob-guide .compare-before img {width:100cqw;min-width:0;max-width:none}
.bob-guide .hero-action .button {width:auto;max-width:100%;min-width:220px}
.bob-guide .guide-link {justify-content:flex-start;font-size:13px;margin-top:12px}
.bob-guide .styles,.bob-guide .fit {margin:0 0 72px;padding:24px 0 0}
.bob-guide .style-grid {gap:24px}.bob-guide .style-card {border:0;box-shadow:none;background:var(--ht-color-soft);border-radius:10px;outline:1px solid transparent}
.bob-guide .style-card.selected {outline:2px solid var(--ht-color-ink);outline-offset:3px;box-shadow:none}
.bob-guide .style-body {padding:22px 20px;gap:12px}.bob-guide .style-body h3 {font-size:20px}.bob-guide .style-body p {font-size:14px;line-height:1.8;flex:1}
.bob-guide .tags li {background:white;color:var(--ht-color-muted)}
.bob-guide .style-select {border-radius:5px;min-height:48px}.bob-guide .style-select[aria-pressed=true]::before {content:none}
.bob-guide .tryon {background:var(--ht-color-blue);border-radius:10px;padding:44px;margin-bottom:72px}
.bob-guide .tryon-heading {margin-bottom:32px}.bob-guide .tryon-heading h2 {font-size:var(--ht-size-h2)}
.bob-guide .style-picker label,.bob-guide .upload-box {border-color:var(--ht-color-line);border-radius:10px;background:white}
.bob-guide .style-picker label:has(input:focus-visible) {outline-color:var(--ht-color-focus)}
.bob-guide .fit-list {gap:24px}.bob-guide .fit-card {border:0;background:var(--ht-color-soft);grid-template-columns:150px 1fr}.bob-guide .fit-card>img {border:0;min-height:220px}.bob-guide .fit-body {padding:22px}.bob-guide .fit-body h3 {font-size:21px}
.bob-guide .reading-cta {background:#fffffffa}.bob-guide .reading-cta .button {min-height:46px;font-size:13px;padding:10px 14px}
.bob-guide .tryon .store-links {gap:16px;flex-wrap:wrap}
.bob-guide .store-links .button {font-size:15px;min-height:48px}
@media(max-width:1000px) {.nav-menu {gap:18px}.nav-menu a:first-child {display:none}.article-hero {gap:36px}.editorial-row {gap:40px}.bob-guide .hero {gap:28px 36px}.bob-guide .style-grid {grid-template-columns:1fr 1fr}.bob-guide .fit-list {grid-template-columns:1fr}}
@media(max-width:900px) {
  .frame {width:auto;margin-inline:24px}.nav {min-height:70px;gap:14px}.brand {font-size:29px}.nav-menu {display:none}.nav-link,.nav .button {min-width:0;font-size:12px;padding:10px 14px}
  .breadcrumbs {padding-top:8px;font-size:11px}
  .article-hero {grid-template-columns:1fr;gap:24px;padding:24px 0 48px}.article-hero h1 {font-size:clamp(30px,7.3vw,40px);margin:16px 0 22px}.article-hero .lead {font-size:17px}
  .hero-portraits {gap:12px;max-width:440px;width:100%;margin:auto}.hero-portraits figure:nth-child(2) {margin-top:30px}
  .article-actions {gap:12px}.article-actions .button {min-width:0;font-size:15px;flex:1;padding:14px 16px;min-height:52px}
  .editorial-section {padding:44px 0}.guide-grid {grid-template-columns:1fr;gap:28px}.guide-card-copy {padding:24px}.guide-card h3 {font-size:25px}
  .editorial-row {grid-template-columns:1fr;gap:26px;margin-bottom:52px}.editorial-row.reverse .editorial-visual {order:0}.editorial-visual {max-width:440px;margin:auto;width:100%}.editorial-copy p {font-size:16px}
  .section-heading {margin-bottom:28px}.evidence-panel {padding:24px 20px}.evidence-table {font-size:13px}.evidence-table td:first-child {padding-right:12px}
  .salon-note {padding:28px 22px;margin-bottom:48px}.salon-note blockquote {font-size:16px}.salon-note .button {width:100%}
  .faq {padding:32px 16px;margin-bottom:48px}.faq summary {padding:16px;font-size:14px}.faq details p {padding:0 16px 20px}
  .closing-cta {padding:48px 24px}.footer {padding:32px 24px 90px;gap:16px}.footer small {flex-basis:100%}
  .bob-guide::before {height:1050px}.bob-guide .hero {display:flex;flex-direction:column;gap:18px;padding:20px 0 48px}
  .bob-guide .hero-copy,.bob-guide .hero-demo {display:contents}.bob-guide .hero .eyebrow {order:1;margin:0}.bob-guide .hero h1 {order:2;font-size:clamp(27px,6.8vw,38px);margin:0}.bob-guide .compare {order:3;width:100%;max-width:400px;max-height:480px}.bob-guide .hero-action {order:4;width:100%;max-width:400px;margin-top:0}.bob-guide .hero .lead {order:5;font-size:16px;margin-top:8px}.bob-guide .hero-action .button {width:100%;min-width:0;font-size:15px}.bob-guide .guide-link {justify-content:center;text-align:center}
  .bob-guide .styles,.bob-guide .fit {margin-bottom:48px}.bob-guide .style-grid {grid-template-columns:1fr 1fr;gap:20px 12px}.bob-guide .style-body {padding:16px 12px}.bob-guide .style-body h3 {font-size:19px}.bob-guide .style-body p {font-size:13px}.bob-guide .tags {gap:4px}.bob-guide .tags li {font-size:10px;padding:3px 6px}.bob-guide .style-select {font-size:12px;padding:10px 6px;line-height:1.6}
  .bob-guide .tryon {padding:28px 18px;margin-bottom:48px}.bob-guide .style-picker {gap:6px}.bob-guide .style-picker span {font-size:10px}.bob-guide .upload-layout {grid-template-columns:1fr;gap:24px}.bob-guide .fit-card {grid-template-columns:100px 1fr}.bob-guide .fit-body {padding:16px}.bob-guide .fit-body h3 {font-size:19px}.bob-guide .fit-body p {font-size:13px}.bob-guide .fit-card>img {min-height:190px}
}
@media(max-width:600px) {.bob-guide .style-grid {grid-template-columns:1fr;gap:28px}.bob-guide .style-body {padding:24px}.bob-guide .style-body h3 {font-size:24px}.bob-guide .style-body p {font-size:15px}.bob-guide .style-select {font-size:14px}.bob-guide .tags li {font-size:12px;padding:4px 10px}}
@media(max-width:360px) {.frame {margin-inline:20px}.bob-guide .hero h1 {font-size:24px}.store-badges {gap:14px}.store-badges img {height:40px;max-width:100%}.nav .button {font-size:11px}.bob-guide .nav-link {font-size:10px;padding:10px 12px}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}.button {transition:none}}