.option-card{min-width:0}
.code-box{overflow:hidden}
.code-box code{overflow-wrap:anywhere;word-break:break-word}
.copy-row{min-width:0}
.copy-row span{min-width:0}
.copy-row button{flex:0 0 auto}
.voice-media img{display:block;width:100%;height:100%;object-fit:cover}
.brand-wordmark{color:var(--ink);font-family:Georgia,'Times New Roman',serif;font-size:29px;font-weight:700;letter-spacing:-1.7px;text-decoration:none}
.service-stack{display:flex;align-items:center;min-height:78px}
.service-stack code{font-size:11px;letter-spacing:.02em}
.footer-brand{font-family:Georgia,'Times New Roman',serif;color:var(--ink);font-size:20px;letter-spacing:-.7px}

/* Live camera stage inside the try-on dialog. */
.tryon-content{padding-top:40px}
.tryon-stage{position:relative;margin:0 0 24px;border-radius:13px;overflow:hidden;background:#1d0d0d;aspect-ratio:3/4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tryon-stage video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
/* The rendered result plays un-mirrored (only the live selfie preview flips). */
.tryon-stage video.is-result{transform:none}
/* Spinner for the "rendering your try-on" wait. */
.camera-icon.spinning{animation:ow-spin 1s linear infinite}
@keyframes ow-spin{to{transform:rotate(360deg)}}
.tryon-garment{position:absolute;right:12px;bottom:12px;width:76px;border-radius:10px;background:#fff;border:2px solid rgba(255,255,255,.9);box-shadow:0 8px 22px rgba(0,0,0,.34)}
.tryon-content h3{margin-top:0}
#camera-demo{min-width:190px;margin-top:6px}
#camera-demo:disabled{opacity:.6;cursor:default}

/* 60s trial countdown badge, top-right of the live stage. */
.tryon-timer{position:absolute;top:12px;right:12px;z-index:3;font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;color:#fff;background:rgba(0,0,0,.58);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}

/* Signup sheet: Google button + "or" divider. */
.button-google{width:100%;height:49px;gap:10px;background:#fff;border:1px solid #d3d3d5;border-radius:6px;font-weight:500;cursor:pointer}
.button-google .google-g{width:18px;height:18px;flex:0 0 auto}
.signup-or{display:flex;align-items:center;gap:12px;margin:20px 0 4px;color:#8a7c7c;font-size:12px}
.signup-or::before,.signup-or::after{content:'';flex:1;height:1px;background:var(--line)}
#signup-dev{margin-top:2px}

/* Lets the demo intro run full width on one line. */
.wide-intro{max-width:none}

/* Responsive geometry matched to the reference storefront. */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(30px,4.5vw,60px)}
.split-grid{grid-template-columns:minmax(0,1fr) minmax(0,580px);gap:clamp(28px,4vw,50px)}
.option-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.hero h1{font-size:clamp(38px,4.7vw,58px)}
.one-column h2,.why h2{font-size:clamp(28px,3.4vw,40px)}

@media (max-width:940px){
  .hero-grid,.split-grid,.option-grid{grid-template-columns:minmax(0,1fr)}
  .hero-media,.why-media{width:min(100%,580px);margin-inline:auto}
  .option-card{min-height:460px}
}

@media (max-width:900px){
  .voice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .voice{min-width:0}
}

@media (max-width:820px){
  .metric{grid-template-columns:1fr;gap:5px;padding:18px 0}
  .metric p{grid-column:auto}
}

@media (max-width:760px){
  .garment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .garment{aspect-ratio:3/4}
}

@media (min-width:761px) and (max-width:800px){
  .garment-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:620px){
  .page-grid,.nav-wrap{width:calc(100% - 40px)}
  .hero h1{font-size:38px}
  .topbar .button-dark{font-size:14px;padding-inline:15px}
}

@media (max-width:520px){
  .voice-grid{grid-template-columns:1fr}
}

@media (max-width:480px){
  .option-light .stack-button{width:100%}
  .copy-row{align-items:flex-start}
  .copy-row span{line-height:1.35}
  .garment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}