:root {
  --brand: #a465db;
  --brand-strong: #8443c4;
  --bg: #ffffff;
  --surface: #f7f3fb;
  --text: #1d1b20;
  --muted: #5f5a66;
  --border: #e4dfea;
  --max: 720px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #c69af0;
    --brand-strong: #d9b8f7;
    --bg: #141217;
    --surface: #1e1b22;
    --text: #ece8f0;
    --muted: #a8a1b0;
    --border: #2f2a35;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--brand-strong); }
a:hover { text-decoration-thickness: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

header.site {
  border-bottom: 1px solid var(--border);
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}
.logo {
  font-weight: 700;
  font-size: 22px;
  color: var(--brand);
  text-decoration: none;
  letter-spacing: -0.02em;
}
nav.site a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 18px;
  font-size: 15px;
}
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--text); }

main { padding: 48px 0 64px; }

.hero { text-align: center; padding: 56px 0 32px; }
.hero h1 {
  font-size: clamp(44px, 9vw, 72px);
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--brand);
  letter-spacing: -0.03em;
}
.hero p { font-size: 20px; color: var(--muted); margin: 0 auto; max-width: 30em; }
.badge {
  display: inline-block;
  margin-top: 28px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 15px;
  color: var(--muted);
}

.doc h1 { font-size: 34px; line-height: 1.2; margin: 0 0 4px; letter-spacing: -0.02em; }
.doc .updated { color: var(--muted); margin: 0 0 32px; font-size: 15px; }
.doc h2 { font-size: 22px; margin: 40px 0 8px; }
.doc h3 { font-size: 18px; margin: 24px 0 4px; }
.doc ul { padding-left: 22px; }
.doc li { margin: 4px 0; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 12px 0; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { background: var(--surface); }

.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0;
}

footer.site {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}
footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  padding-bottom: 32px;
}
footer.site a { color: var(--muted); margin-right: 16px; }

@media (max-width: 480px) {
  nav.site a { margin-left: 12px; font-size: 14px; }
  main { padding: 32px 0 48px; }
}

[hidden] { display: none !important; }
nav.site .nav-account { color: var(--brand-strong); border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; white-space: nowrap; }
header.site .wrap { min-height: 76px; height: auto; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
nav.site { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
nav.site a { margin-left: 0; }
.eyebrow { color: var(--brand-strong); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.auth-panel { max-width: 460px; }
.auth-panel h1, .store-heading h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.15; letter-spacing: -.035em; margin: 12px 0; }
label { display: block; margin: 18px 0 6px; font-size: 15px; }
input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; background: var(--bg); color: var(--text); }
button { border: 1px solid transparent; border-radius: 999px; padding: 12px 22px; background: var(--brand); color: #141217; font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
#auth-submit { width: 100%; }
.text-button { padding: 0; border: 0; background: none; color: var(--brand-strong); font-weight: 400; text-align: left; }
.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.error { color: #b53345; min-height: 1.6em; font-size: 15px; }
.store-wrap { max-width: 1120px; }
.store-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; margin: 28px 0; }
.product-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.product-card img, .product-placeholder { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface); display: block; }
.product-placeholder { display: grid; place-items: center; color: var(--brand); font-size: 30px; }
.product-body { padding: 18px; }
.product-body h2 { font-size: 19px; line-height: 1.35; margin: 8px 0; overflow-wrap: anywhere; }
.product-body p { margin: 6px 0; }
.product-body a { font-size: 15px; }
.price { font-weight: 600; }
@media (max-width: 760px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  header.site .wrap { gap: 12px; }
  nav.site { gap: 8px 12px; }
  .store-heading { align-items: flex-start; flex-direction: column; }
  .product-grid { gap: 14px 10px; }
  .product-body { padding: 12px; }
  .product-body h2 { font-size: 16px; }
}

.account-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.account-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
#photo-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid var(--border); border-radius: 20px; padding: 28px; background: var(--bg); color: var(--text); }
#photo-dialog::backdrop { background: rgba(12, 9, 18, .65); }
#photo-dialog h2 { line-height: 1.2; margin: 8px 0 16px; }
.photo-preview { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: 12px; background: var(--surface); margin: 16px 0; }
.photo-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; }
#photo-message { min-height: 1.6em; }
@media (max-width: 480px) { #photo-dialog { padding: 20px; } .account-actions button { padding: 10px 16px; } }

.variant-picker { width: 100%; margin: 10px 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.add-to-basket { width: 100%; margin: 12px 0; font-size: 15px; }
#basket-dialog { width: min(650px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid var(--border); border-radius: 20px; padding: 28px; background: var(--bg); color: var(--text); }
#basket-dialog::backdrop { background: rgba(12, 9, 18, .65); }
#basket-dialog h2 { line-height: 1.2; }
.basket-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); padding: 18px 0; }
.basket-row h3 { font-size: 18px; margin: 0; overflow-wrap: anywhere; }
.basket-row p { margin: 4px 0; }
.basket-quantity { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; max-width: 180px; }
.basket-quantity input { width: 80px; }
.basket-quantity button { padding: 8px 12px; font-size: 14px; }
#basket-totals > div { display: flex; justify-content: space-between; gap: 16px; margin: 12px 0; }
#basket-totals dd { margin: 0; }
.basket-total { border-top: 1px solid var(--border); padding-top: 16px; font-weight: 700; }
@media (max-width: 480px) { #basket-dialog { padding: 20px; } .basket-row { flex-direction: column; align-items: stretch; } .basket-quantity { max-width: none; justify-content: flex-start; } }

.google-signin-section { min-height: 85px; margin: 28px 0 12px; }
#google-signin { width: min(100%, 220px); min-height: 40px; margin-inline: auto; }
#google-signin iframe { display:block; width:220px !important; height:40px !important; max-width:100%; }
#google-signin[inert] { opacity: .6; pointer-events: none; }
#google-status { margin: 8px 0; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--border); }

/* Homepage */
.home-page { --ink:#29251f; --paper:#faf8f5; --soft:#f1ede7; --lav:#ede5f5; --purple:#8662a6; --green:#dce8d4; background:var(--paper); color:var(--ink); color-scheme:light; font-family:'DM Sans', sans-serif; overflow-x:hidden; }
.home-page h1,.home-page h2,.home-page h3,.home-logo { font-family:'Manrope',sans-serif; }
.home-header { max-width:1240px; margin:auto; padding:22px 34px; display:flex; align-items:center; justify-content:space-between; }
.home-logo { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:23px; font-weight:800; text-decoration:none; letter-spacing:-1.1px; }
.home-logo img { width:30px; height:30px; object-fit:contain; }
.home-header nav,.home-footer nav { display:flex; align-items:center; gap:28px; }
.home-header nav a,.home-header nav button,.home-footer nav a { color:#655f58; font:500 14px 'DM Sans',sans-serif; text-decoration:none; }
.home-header nav a:hover,.home-footer nav a:hover { color:var(--purple); }
.header-join { border:0; background:none; cursor:pointer; padding:5px 0; }
.home-header .header-join { display:inline-flex; align-items:center; gap:5px; }
.home-header .header-join svg { width:16px;height:16px; }
.home-header .header-join { padding:9px 12px; border:1px solid #e8e3dc; border-radius:999px; background:#fffdfa; color:#514b46; white-space:nowrap; }
.home-header .header-join:hover { background:#f2edf4; }
.home-header .header-join span,.store-button[data-platform] > b { display:none; }
.menu-toggle { display:none; width:42px;height:40px;padding:9px;border:1px solid #e8e3dc;border-radius:12px;background:#fffdfa;color:#382f3e;cursor:pointer; }
.menu-toggle span { display:block;width:20px;height:2px;margin:4px auto;background:currentColor;border-radius:2px;transition:transform .18s,opacity .18s; }
.header-join span { color:var(--purple); margin-left:4px; }
.home-hero { max-width:1200px; min-height:620px; margin:0 auto; padding:50px 44px 62px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; }
.hero-copy { max-width:530px; position:relative; z-index:1; }
.eyebrow-pill { display:inline-flex; align-items:center; gap:8px; color:#756389; letter-spacing:.11em; font-weight:700; font-size:10px; }
.hero-copy .eyebrow-pill { border:1px solid #e8e0eb; background:#fffdfa; border-radius:999px; padding:9px 13px; letter-spacing:.06em; font-size:11px; }
.eyebrow-pill > span { width:7px; height:7px; border-radius:50%; background:#91a87d; box-shadow:0 0 0 4px #91a87d22; }
.hero-copy h1 { margin:24px 0 18px; font-size:clamp(46px,6vw,76px); line-height:1.03; letter-spacing:-.065em; font-weight:600; }
.hero-copy h1 em,.section-heading h2 em,.closing-cta h2 em { color:var(--purple); font-style:normal; }
.hero-copy>p { max-width:450px; color:#746e68; font-size:16px; line-height:1.75; margin:0; }
.hero-buttons { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.store-button { min-width:166px; padding:11px 13px; border:1px solid #e8e3dc; border-radius:13px; background:#fffefa; display:flex; align-items:center; gap:10px; color:var(--ink); text-align:left; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.store-button:hover { transform:translateY(-3px); box-shadow:0 10px 25px #58433112; }
.store-button>span:nth-child(2) { display:flex; flex-direction:column; font-weight:700; font-size:13px; line-height:1.4; }
.store-button small { font:600 8px 'DM Sans',sans-serif; color:#8a837b; letter-spacing:.09em; }
.store-button b { margin-left:auto; color:#8c789f; font-size:15px; }
.store-icon,.android-mark { font-size:18px; color:#65566e; width:22px; text-align:center; }
.store-icon svg,.android-mark svg { width:20px;height:20px;display:block; }
.hero-note { margin-top:26px; color:#8e877f; font-size:12px; display:flex; align-items:center; gap:8px; }
.tiny-avatars { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#eee5f2; color:#8c6aa0; }
.hero-visual { min-height:510px; display:grid; place-items:center; position:relative; isolation:isolate; }
.hero-visual:before { content:''; position:absolute; z-index:-2; width:min(440px,90%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 40%,#e8dfef,#eae7dc 65%,#f2eee7); }
.decor { position:absolute; border-radius:50%; z-index:-1; }.decor-one { width:78px;height:78px;background:#dbe8d4;top:55px;right:80px;opacity:.8; }.decor-two { width:32px;height:32px;background:#e9d9ca;bottom:86px;left:40px; }
.phone { width:258px; height:500px; padding:8px; border:2px solid #2b2929; border-radius:39px; background:#242323; box-shadow:0 25px 70px #42382f2b,0 4px 12px #39312b25; transform:rotate(2deg); animation:phone-float 5s ease-in-out infinite; }
.phone-screen { height:100%; border-radius:31px; overflow:hidden; background:#faf8f4; position:relative; padding:12px 14px; }
.phone-status { height:22px; display:flex; justify-content:space-between; font:600 9px 'DM Sans'; padding:0 6px; }
.app-top { display:flex; align-items:center; gap:5px; font:800 13px 'Manrope'; }.app-top img { width:19px;height:19px;object-fit:contain; }.app-top span { margin-left:auto;font-size:20px;color:#836d94; }
.app-greeting { margin:19px 0 0; }.app-greeting small { color:#897c8b; letter-spacing:.14em; font-size:7px; font-weight:700; }.app-greeting h2 { font-size:26px; line-height:1.03; letter-spacing:-1.5px; margin:5px 0 0; font-weight:700; }
.app-model { height:252px; position:relative; margin:5px -3px 0; background:linear-gradient(155deg,#ede8df,#e4ebdf); border-radius:19px; overflow:hidden; }
.model-halo { position:absolute;width:190px;height:190px;border-radius:50%;background:#f5eee6;top:22px;left:28px; }.model-person { position:absolute;left:74px;top:27px;width:100px;height:205px; }
.model-head { position:absolute;top:0;left:34px;width:34px;height:39px;border-radius:48% 48% 46% 46%;background:#a87556;box-shadow:inset -7px 0 #8d6049;z-index:2; }.model-body { position:absolute;top:37px;left:17px;width:67px;height:101px;background:#88719a;border-radius:22px 22px 10px 10px;clip-path:polygon(20% 0,80% 0,100% 26%,84% 100%,16% 100%,0 26%);z-index:1; }.model-leg { position:absolute;top:130px;width:26px;height:72px;background:#665f59;border-radius:8px 8px 12px 12px; }.model-leg.left {left:21px;transform:rotate(3deg)}.model-leg.right{left:52px;transform:rotate(-3deg)}.model-arm { position:absolute;top:47px;width:19px;height:80px;border-radius:15px;background:#a87556; }.model-arm.left{left:8px;transform:rotate(11deg)}.model-arm.right{right:4px;transform:rotate(-11deg)}
.look-tag { position:absolute; left:12px; bottom:12px; background:#fffdfaeb; border:1px solid #ffffff; padding:8px 10px; border-radius:10px; font-size:9px; font-weight:600; box-shadow:0 4px 14px #51463219; }.look-tag b { color:#9272a6; margin-left:4px; }
.app-bottom { position:absolute;bottom:5px;left:0;right:0;padding:0 13px; }.app-tabs { display:flex;justify-content:space-between;border-top:1px solid #eae5df;padding:10px 7px 7px;color:#98908a; }.app-tabs span { display:flex;flex-direction:column;align-items:center;gap:2px;font-size:15px; }.app-tabs small{font-size:7px}.app-tabs .active{color:#806690}.phone-home{width:80px;height:3px;border-radius:5px;background:#292929;margin:7px auto 0}
.float-card { position:absolute; right:-2px; top:125px; border-radius:14px; padding:12px 15px; display:flex; align-items:center; gap:10px; background:#fffefa; box-shadow:0 9px 30px #40372d19; transform:rotate(-4deg); }.float-card .sparkle{width:28px;height:28px;border-radius:9px;background:#ede4f2;color:#856999;display:grid;place-items:center}.float-card span:last-child{display:flex;flex-direction:column;font-size:11px}.float-card small{font-size:9px;color:#8a837c;margin-top:2px}
.steps-section { padding:76px 30px 96px; background:#fffdfa; }.section-heading { text-align:center; }.section-heading h2,.closing-cta h2 { margin:12px 0 8px; font-size:clamp(30px,4vw,44px); letter-spacing:-.05em; line-height:1.1; }.section-heading>p{margin:0;color:#817a72;font-size:14px}.steps-grid { max-width:1060px;margin:48px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }.step-card { padding:14px 14px 20px; border-radius:20px; }.step-art {height:205px;border-radius:16px;position:relative;overflow:hidden;display:grid;place-items:center;margin-bottom:20px}.upload-art{background:#eee8f2}.tryon-art{background:#e8ede4}.shop-art{background:#f2e9df}.step-number{color:#9179a0;font-size:10px;font-weight:700;letter-spacing:.12em}.step-card h3{font-size:19px;letter-spacing:-.04em;margin:7px 0 5px}.step-card p{font-size:13px;line-height:1.55;color:#817a72;margin:0;max-width:260px}
.photo-card { width:106px;height:140px;background:#fbf8f2;border:5px solid #fff;border-radius:13px;box-shadow:0 8px 25px #4b3e4c18;position:relative;transform:rotate(-5deg);overflow:hidden }.photo-card>span{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:.12em;color:#82786f;font-weight:700}.photo-sun{position:absolute;top:17px;right:15px;width:20px;height:20px;border-radius:50%;background:#e6c89e}.photo-person{position:absolute;bottom:23px;left:32px;width:47px;height:88px}.photo-person i{position:absolute;top:0;left:14px;width:20px;height:23px;border-radius:50%;background:#a87556}.photo-person b{position:absolute;top:22px;left:3px;width:43px;height:52px;background:#8b7895;border-radius:12px 12px 5px 5px}.upload-arrow{position:absolute;left:calc(50% + 46px);top:66px;font-size:23px;color:#866b99;animation:arrow-bob 1.8s ease-in-out infinite}.upload-orb{position:absolute;bottom:30px;right:calc(50% - 85px);width:31px;height:31px;border-radius:50%;background:#fffdfa;color:#806690;display:grid;place-items:center;box-shadow:0 3px 9px #463c4519}
.tryon-photo{width:130px;height:158px;border-radius:14px;background:linear-gradient(#d5e1d0,#f1e8da);position:relative;overflow:hidden;box-shadow:0 8px 24px #4752411b}.tryon-person{position:absolute;bottom:8px;left:40px;width:57px;height:135px}.tryon-person i{position:absolute;top:0;left:18px;width:22px;height:26px;background:#a87556;border-radius:50%}.tryon-person b{position:absolute;top:24px;left:4px;width:51px;height:75px;background:#826b92;border-radius:15px 15px 7px 7px}.tryon-spark{position:absolute;top:27px;right:calc(50% - 91px);color:#967cac;font-size:30px;animation:sparkle 2s ease-in-out infinite}.tryon-chip{position:absolute;left:calc(50% + 30px);bottom:36px;background:#fffdfa;padding:8px 11px;border-radius:99px;color:#716377;font-size:9px;box-shadow:0 4px 12px #33421f16}
.shopping-bag{width:94px;height:105px;background:#8c739c;border-radius:11px 11px 18px 18px;display:grid;place-items:center;position:relative;box-shadow:0 10px 20px #553e5a27;transform:rotate(-5deg)}.shopping-bag:before{content:'';position:absolute;top:-19px;width:37px;height:32px;border:5px solid #8c739c;border-bottom:0;border-radius:20px 20px 0 0}.shopping-bag span{color:#fff;font:800 43px 'Manrope';opacity:.9}.shop-check{position:absolute;right:calc(50% - 80px);bottom:38px;width:37px;height:37px;background:#dce8d4;border:4px solid #fffdfa;border-radius:50%;display:grid;place-items:center;color:#617858;font-size:17px}.shop-star{position:absolute;color:#a08469}.star-a{top:40px;left:calc(50% - 83px);font-size:18px}.star-b{top:66px;right:calc(50% - 83px);font-size:23px}
.closing-cta { max-width:1060px; margin:62px auto; padding:34px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-radius:22px; background:#eee8f2; }.closing-cta h2{font-size:clamp(24px,3vw,35px);margin-bottom:0}.cta-button { border:0;border-radius:999px;background:#382f3e;color:#fff;padding:14px 20px;font:600 13px 'DM Sans';cursor:pointer;transition:transform .2s,background .2s; }.cta-button:hover{transform:translateY(-2px);background:#56455f}.cta-button span{margin-left:12px;color:#ddcce9}
.home-footer { max-width:1200px;margin:0 auto;padding:24px 34px 34px;border-top:1px solid #e9e4dd;display:flex;align-items:center;gap:26px; }.home-footer .home-logo{font-size:19px}.home-footer .home-logo img{width:25px;height:25px}.copyright{font-size:11px;color:#978f86}.home-footer nav{margin-left:auto;gap:23px}.home-footer nav a{font-size:12px}
.waitlist-dialog { width:min(440px,calc(100% - 32px));border:1px solid #ece6df;border-radius:24px;padding:34px;background:#fffdfa;color:var(--ink);box-shadow:0 25px 90px #241c2940; }.waitlist-dialog::backdrop{background:#211a28a6;backdrop-filter:blur(4px)}.waitlist-dialog[open]{animation:dialog-rise .25s ease-out}.dialog-close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:#837b74;font-size:27px;padding:4px 9px;cursor:pointer}.dialog-mark{width:43px;height:43px;border-radius:13px;background:#eee7f3;display:grid;place-items:center;margin-bottom:20px}.dialog-mark img{width:29px;height:29px;object-fit:contain}.waitlist-dialog h2{font-size:32px;letter-spacing:-.05em;margin:9px 0}.waitlist-dialog>p{font-size:14px;line-height:1.65;color:#7e766e;margin:0 0 20px}.waitlist-dialog label{font-size:12px;margin:0 0 7px}.waitlist-dialog input[type=email]{font-size:14px;background:#fff;padding:13px;border-color:#e7e1da}.waitlist-dialog form .cta-button{width:100%;margin-top:13px}.form-message{min-height:20px;margin:7px 0 0!important;color:#8a5978;font-size:12px!important}.form-message.success{color:#55744f}.privacy-note{display:block;color:#958d85;font-size:10px;text-align:center;margin-top:13px}.privacy-note a{color:#735a86}
.fade-in-up{animation:fade-rise .8s cubic-bezier(.2,.7,.2,1) both}@keyframes fade-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:translateY(0)}@keyframes phone-float{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes arrow-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes sparkle{0%,100%{transform:scale(.88) rotate(-8deg);opacity:.7}50%{transform:scale(1.12) rotate(8deg);opacity:1}}@keyframes dialog-rise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:820px){.home-header{padding:18px 22px}.home-hero{padding:34px 28px 48px;min-height:550px;gap:0}.hero-copy h1{font-size:clamp(43px,7vw,62px)}.hero-visual{min-height:460px;transform:scale(.88)}.phone{transform:rotate(2deg)}.float-card{right:-10px}.steps-grid{gap:8px}.step-card{padding:10px}.step-art{height:180px}.closing-cta{margin:45px 24px}}
@media(max-width:620px){.home-header{padding:15px 19px}.home-header nav{gap:13px}.home-header nav a{display:none}.header-join{font-size:12px!important}.home-hero{grid-template-columns:1fr;padding:52px 24px 34px;text-align:center}.hero-copy{margin:auto}.hero-copy h1{font-size:52px}.hero-copy>p{font-size:15px}.hero-buttons{justify-content:center}.hero-note{justify-content:center}.hero-visual{min-height:475px;transform:none;margin-top:10px}.phone{width:240px;height:460px}.app-model{height:224px}.model-person{transform:scale(.9);transform-origin:top center}.hero-visual:before{width:370px}.float-card{right:0;top:106px}.steps-section{padding:63px 20px}.steps-grid{grid-template-columns:1fr;gap:12px;max-width:380px;margin-top:30px}.step-card{display:grid;grid-template-columns:106px 1fr;column-gap:16px;align-items:center;padding:10px}.step-art{grid-row:1/4;width:106px;height:106px;margin:0;border-radius:15px;transform:scale(.95)}.step-number{align-self:end}.step-card h3{font-size:17px;margin:3px 0}.step-card p{font-size:12px;align-self:start}.photo-card{transform:scale(.64) rotate(-5deg)}.upload-arrow,.upload-orb,.tryon-chip{transform:scale(.75)}.tryon-photo{transform:scale(.72)}.shopping-bag{transform:scale(.72) rotate(-5deg)}.closing-cta{margin:34px 18px 45px;padding:25px 22px;flex-direction:column;align-items:flex-start}.closing-cta .cta-button{align-self:stretch}.home-footer{padding:23px 20px 30px;display:grid;grid-template-columns:1fr auto;gap:13px}.home-footer nav{grid-column:1/-1;margin:0;gap:16px;flex-wrap:wrap}.home-footer nav a{font-size:11px}.copyright{text-align:right}.waitlist-dialog{padding:29px 23px}}
@media(prefers-reduced-motion:reduce){.fade-in-up{animation:none}.reveal{transition:none;opacity:1;transform:none}.phone,.upload-arrow,.tryon-spark{animation:none}.store-button,.cta-button{transition:none}}

/* Shared shell on the support, policy, account and store pages */
.shared-header { max-width:1240px; margin:0 auto; padding:18px 34px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.shared-header nav { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px 23px; }
.shared-header nav>a { color:#655f58; font:500 13px 'DM Sans',sans-serif; text-decoration:none; }
.shared-header nav>a:hover { color:var(--purple); }
.shared-header .header-join { display:inline-flex; align-items:center; gap:6px; color:#655f58; font:600 12px 'DM Sans',sans-serif; }
.shared-header .header-join svg { width:17px; height:17px; }
.shared-header .header-join span { margin-left:0; }
.shared-login { padding:9px 14px; border:1px solid #e8e3dc; border-radius:999px; background:#fffdfa; }
.browse-store-link { border:0; border-radius:999px; background:#382f3e; color:#fff; padding:9px 14px; font:600 12px 'DM Sans',sans-serif; cursor:pointer; white-space:nowrap; }
.browse-store-link span { color:#ddcce9; margin-left:7px; }
.browse-store-hero { margin-top:17px; border:0; border-radius:999px; padding:13px 19px; background:#382f3e; color:#fff; box-shadow:0 8px 20px #382f3e20; font:600 13px 'DM Sans',sans-serif; cursor:pointer; transition:transform .2s,background .2s,box-shadow .2s; }
.browse-store-hero:hover { background:#56455f;transform:translateY(-2px);box-shadow:0 11px 25px #382f3e2c; }
.browse-store-hero span { padding-left:8px; color:#ddcce9; }
.store-auth-dialog { width:min(520px,calc(100% - 28px)); max-height:min(92dvh,850px); overflow:auto; position:relative; padding:0; border:1px solid #ece6df; border-radius:24px; background:#faf8f5; color:#29251f; box-shadow:0 25px 90px #241c2940; }
.store-auth-dialog::backdrop { background:#211a28a6; backdrop-filter:blur(4px); }
.store-auth-dialog[open] { animation:dialog-rise .25s ease-out; }
.store-auth-dialog .dialog-close { z-index:2; }
.store-auth-dialog .auth-panel { width:100%; max-width:none; margin:0; padding:34px; border:0; border-radius:24px; box-shadow:none; }
.store-auth-dialog .auth-panel h1 { margin:7px 0; }
.store-auth-dialog .auth-switch { text-align:center; margin:14px 0; }
.store-auth-dialog .auth-terms { text-align:center; }
.store-auth-dialog .google-signin-section { min-height:72px; margin:20px 0 8px; }
.store-auth-dialog #google-signin { display:flex; justify-content:center; width:220px; min-width:0; }
.store-auth-dialog #google-status { margin:5px 0; text-align:center; }
.store-auth-dialog #auth-submit { width:100%; }
.home-page .auth-panel #auth-title { margin:8px 0; }
.home-page .auth-panel .google-signin-section { display:flex; flex-direction:column; align-items:center; }
.home-page .auth-panel #google-signin { width:min(100%,220px); min-width:0; }
.home-page .auth-panel #google-status { text-align:center; }
.home-page .auth-panel input { color-scheme:light; background:#fffdfa; color:#29251f; border-color:#e7e1da; }
.home-page .auth-panel input:-webkit-autofill { -webkit-text-fill-color:#29251f; box-shadow:0 0 0 1000px #fffdfa inset; }
.home-page .store-auth-dialog .auth-panel { width:100%;max-width:none;margin:0;padding:34px;border:0;border-radius:24px;box-shadow:none; }
.home-header nav .browse-store-link { margin-right:4px; color:#fff; }
.home-page main { padding:32px 0 60px; }
.home-page .doc { max-width:900px; padding:42px 48px 48px; border:1px solid #eee8e1; border-radius:22px; background:#fffdfa; box-shadow:0 12px 45px #51442c08; }
.home-page .doc h1,.home-page .auth-panel h1,.home-page .store-heading h1 { color:#29251f; font-family:'Manrope',sans-serif; font-weight:650; letter-spacing:-.05em; }
.home-page .doc h1 { font-size:clamp(34px,5vw,46px); margin-bottom:8px; }
.home-page .doc .updated { color:#8e877f; font-size:12px; }
.home-page .doc h2 { margin-top:36px; color:#51445d; font:700 20px/1.3 'Manrope',sans-serif; letter-spacing:-.025em; }
.home-page .doc h3 { color:#51445d; font:650 16px/1.4 'Manrope',sans-serif; }
.home-page .doc p,.home-page .doc li { color:#645e57; font-size:15px; line-height:1.8; }
.home-page .doc a,.home-page .auth-panel a,.home-page .store-wrap a { color:#765b8a; }
.home-page .doc .callout { border-color:#e8e1ec; border-radius:14px; background:#f4eff6; color:#645e57; }
.home-page .doc th { background:#f3eef5; }
.home-page .auth-panel,.home-page .store-wrap { max-width:1060px; }
.home-page .auth-panel { width:min(100% - 40px,520px); margin:24px auto; padding:36px; background:#fffdfa; border:1px solid #eee8e1; border-radius:22px; box-shadow:0 12px 45px #51442c08; }
.home-page .auth-panel #auth-title { font-size:38px; }
.home-page .auth-panel>p { color:#746e68; }
.home-page .store-wrap { width:calc(100% - 48px); }
.home-page .store-heading { align-items:center; padding:32px 0 12px; }
.home-page .store-heading h1 { font-size:clamp(32px,5vw,46px); }
.home-page .store-wrap>.muted,.home-page .store-wrap section { color:#756e66; }
.home-page .product-card { border-color:#eee8e1; border-radius:17px; background:#fffdfa; box-shadow:0 8px 26px #51442c09; }
.home-page .product-body h2 { color:#29251f; font-family:'Manrope',sans-serif; }
.home-page button { transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.home-page button:hover:not(:disabled) { transform:translateY(-1px); }
.home-page dialog button:hover { transform:none; }
.home-page .site-logo { color:#29251f; }
@media(max-width:760px){.shared-header{padding:15px 20px;align-items:flex-start}.shared-header nav{gap:9px 13px}.shared-header nav>a:first-child{display:none}.home-page .doc{width:calc(100% - 32px);padding:28px 23px;border-radius:17px}.home-page .auth-panel{padding:28px 22px}.home-page .store-wrap{width:calc(100% - 32px)}}
@media(max-width:520px){.shared-header{flex-direction:column;gap:11px}.shared-header nav{width:100%;justify-content:space-between;gap:9px}.shared-header nav>a:not(.shared-login){display:none}.shared-header .header-join{font-size:11px!important}.shared-header .header-join svg{width:15px;height:15px}.shared-login{padding:7px 12px}.home-page main{padding-top:20px}.home-page .doc h1{font-size:34px}.home-page .doc h2{font-size:18px}.home-page .auth-panel #auth-title{font-size:32px}.home-page .store-heading{flex-direction:column;align-items:flex-start}}
@media(max-width:620px){.home-header{align-items:center}.home-header nav{max-width:calc(100% - 85px);justify-content:flex-end;flex-wrap:wrap;gap:6px 11px}.home-header nav>a{display:none}.home-header nav .browse-store-link{font-size:11px;padding:7px 10px}.home-header .header-join{font-size:11px!important}.home-header .header-join svg{width:14px;height:14px}.browse-store-hero{margin-top:13px}.home-page .store-auth-dialog .auth-panel{padding:27px 22px}}
@media(max-width:760px){
  .home-header{position:relative;display:flex;flex-wrap:wrap;gap:0 14px;padding:14px 20px}
  .home-header .home-logo{margin-right:auto}
  .menu-toggle{display:block;order:2}
  .home-header nav#main-nav{display:none;order:3;width:100%;max-width:none;margin-top:12px;padding:12px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;border:1px solid #e8e3dc;border-radius:16px;background:#fffdfa;box-shadow:0 12px 30px #40372d12}
  .home-header nav#main-nav.is-open{display:flex}
  .home-header nav#main-nav>a{display:block;padding:8px 10px}
  .home-header nav#main-nav .browse-store-link,.home-header nav#main-nav .header-join{width:100%;justify-content:flex-start;margin:0;padding:11px 12px;border-radius:11px;text-align:left;font-size:13px!important}
  .home-header nav#main-nav .header-join svg{width:17px;height:17px}
  .home-header nav#main-nav .browse-store-link{color:#fff}
  .home-header nav#main-nav .header-join span{display:none}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(6px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-6px) rotate(-45deg)}
}
