@font-face  {
  font-family:'DM Serif Display';
  src:url('/assets/fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap
}
:root  {
  --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Display',Roboto,'Segoe UI',sans-serif;
  color-scheme:light;
  --bg:#FDF9F6;
  --surface:#FFFBF8;
  --ink:#4E153B;
  --body:#6C5A68;
  --muted:#75616E;
  --primary:#5B1C43;
  --on-primary:#FFFFFF;
  --accent:#5B1C43;
  --line:#E4CFD9;
  --rose:#F7E8EF;
  --rose-ink:#5B1C43;
  --deep:#432039;
  --deep-ink:#fff7f1;
  --header-h:90px;
  --toc-bar-h:58px;
  --radius:22px
}
:root[data-theme=dark]  {
  color-scheme:dark;
  --bg:#170F13;
  --surface:#241B22;
  --ink:#FFF8F5;
  --body:#CBBCC8;
  --muted:#CBBCC8;
  --primary:#F4AFD2;
  --on-primary:#271620;
  --accent:#F4AFD2;
  --line:#4A3645;
  --rose:#2A1B25;
  --rose-ink:#f5cfdf;
  --deep:#291b25;
  --deep-ink:#fff7f1
}
@media(prefers-color-scheme:dark)  {
  :root.in-app:not([data-theme=light])  {
    color-scheme:dark;
    --bg:#170F13;
    --surface:#241B22;
    --ink:#FFF8F5;
    --body:#CBBCC8;
    --muted:#CBBCC8;
    --primary:#F4AFD2;
    --on-primary:#271620;
    --accent:#F4AFD2;
    --line:#4A3645;
    --rose:#2A1B25;
    --rose-ink:#f5cfdf;
    --deep:#291b25;
    --deep-ink:#fff7f1
  }
}
*  {
  box-sizing:border-box
}
html  {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 28px)
}
body  {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased
}
button,input  {
  font:inherit
}
button,a,input  {
  -webkit-tap-highlight-color:transparent
}
button  {
  color:inherit
}
button,a  {
  touch-action:manipulation
}
button  {
  cursor:pointer
}
a  {
  color:inherit;
  text-underline-offset:4px
}
a:hover  {
  color:var(--accent)
}
img  {
  display:block;
  max-width:100%;
  height:auto
}
button  {
  border:0
}
button:disabled  {
  cursor:wait
}
h1,h2,h3,p  {
  margin:0
}
h1,h2  {
  font-family:'DM Serif Display',Georgia,serif;
  font-weight:400;
  letter-spacing:-1.7px;
  line-height:1.06
}
h1  {
  font-size:clamp(54px,5.4vw,76px)
}
h2  {
  font-size:clamp(42px,4vw,58px)
}
h3  {
  font-weight:500;
  line-height:1.45;
  font-size:18px
}
em  {
  font-style:normal;
  color:var(--accent)
}
ul,ol  {
  padding-left:1.4em
}
.icon  {
  width:21px;
  height:21px;
  flex-shrink:0;
  vertical-align:middle
}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible  {
  outline:3px solid var(--accent);
  outline-offset:5px
}
::selection  {
  background:#F4AFD2;
  color:#271620
}
.container  {
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto
}
.container--narrow  {
  max-width:900px
}
.section-space  {
  padding-block:110px
}
.eyebrow  {
  font-size:10px;
  font-weight:500;
  letter-spacing:2.15px;
  line-height:1.6
}
.sr-only  {
  position:absolute!important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.skip-link  {
  position:fixed;
  z-index:200;
  top:8px;
  left:16px;
  background:var(--primary);
  color:var(--on-primary);
  padding:12px;
  transform:translateY(-150%)
}
.skip-link:focus  {
  transform:none
}
.btn  {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  padding:13px 23px;
  min-height:48px;
  text-decoration:none;
  border-radius:99px;
  font-size:12px;
  font-weight:500;
  transition:background .2s,transform .2s;
  line-height:1.4
}
.btn:hover  {
  transform:translateY(-2px)
}
.btn-primary  {
  background:var(--primary);
  color:var(--on-primary)
}
.btn-primary:hover  {
  color:var(--on-primary);
  filter:brightness(1.12)
}
.btn-secondary  {
  border:1px solid var(--line);
  background:var(--surface)
}
.btn-large  {
  padding:18px 27px;
  min-height:56px;
  font-size:13px
}
.btn .icon  {
  width:18px;
  height:18px
}
.text-link  {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:500;
  text-decoration:none;
  line-height:1.6
}
.text-link:hover  {
  text-decoration:underline
}
.text-link .icon  {
  width:17px;
  height:17px
}
.icon-btn  {
  width:42px;
  height:42px;
  display:inline-grid;
  place-items:center;
  background:transparent;
  border-radius:50%
}
.icon-btn:hover  {
  background:var(--rose)
}
.icon-btn .icon  {
  width:18px;
  height:18px
}
.icon-sun  {
  display:none
}
:root[data-theme=dark] .icon-sun  {
  display:block
}
:root[data-theme=dark] .icon-moon  {
  display:none
}
.brand  {
  font-family:'DM Serif Display',Georgia,serif;
  font-size:43px;
  letter-spacing:-1.8px;
  text-decoration:none;
  line-height:1;
  white-space:nowrap
}
.site-header  {
  height:var(--header-h);
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:border-color .2s
}
.site-header.is-scrolled  {
  border-color:var(--line)
}
.header-inner  {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.site-nav  {
  margin-left:auto;
  margin-right:25px
}
.nav-list  {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  gap:31px
}
.nav-list a  {
  font-size:11px;
  text-decoration:none;
  color:var(--body)
}
.nav-list a:hover,.nav-list a[aria-current]  {
  color:var(--accent)
}
.header-actions  {
  display:flex;
  gap:14px;
  align-items:center
}
.header-download  {
  min-height:43px;
  padding:12px 20px
}
.nav-toggle  {
  display:none
}
.hero  {
  padding-top:39px;
  padding-bottom:62px;
  display:grid;
  grid-template-columns:1.12fr 1fr;
  align-items:center;
  gap:60px
}
.hero-copy  {
  padding-block:20px 52px
}
.hero .eyebrow  {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px
}
.little-line  {
  width:30px;
  height:1px;
  background:var(--accent)
}
.hero h1  {
  margin-left:-3px
}
.hero h1 em  {
  display:inline-block
}
.hero-description  {
  max-width:440px;
  color:var(--body);
  font-size:14px;
  line-height:1.95;
  margin-top:25px
}
.hero-actions  {
  display:flex;
  gap:23px;
  align-items:center;
  margin-top:32px;
  flex-wrap:wrap
}
.hero-footnote  {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:51px;
  font-size:10px;
  color:var(--muted)
}
.hero-footnote .icon  {
  width:16px;
  height:16px
}
.hero-art  {
  position:relative;
  max-width:510px;
  width:100%;
  justify-self:end
}
.art-label  {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:12px;
  padding-inline:5px
}
.art-label .icon  {
  width:18px;
  height:18px
}
.comparison  {
  position:relative;
  aspect-ratio:4/4.6;
  overflow:hidden;
  border-radius:130px 130px 16px 16px;
  isolation:isolate;
  background:#ddc9bc;
  box-shadow:0 18px 48px #5B1C430a
}
.comparison-original,.comparison-after,.comparison-after img  {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  max-width:none
}
.comparison-after  {
  clip-path:inset(0 0 0 var(--split))
}
.comparison-tags  {
  position:absolute;
  top:32px;
  left:30px;
  right:30px;
  display:flex;
  justify-content:space-between;
  pointer-events:none
}
.comparison-tags span  {
  background:#fff9f3e8;
  padding:5px 11px;
  border-radius:99px;
  color:#5B1C43;
  font-size:9px
}
.comparison-line  {
  position:absolute;
  top:0;
  bottom:0;
  left:var(--split);
  width:1px;
  background:#fff8;
  pointer-events:none
}
.comparison-line span  {
  position:absolute;
  top:48%;
  left:0;
  transform:translate(-50%,-50%);
  background:#fff8f0ed;
  color:#5B1C43;
  border-radius:50%;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  font-size:21px;
  box-shadow:0 2px 12px #0001
}
.comparison-range  {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  z-index:3
}
.comparison:has(.comparison-range:focus-visible)  {
  outline:3px solid var(--accent);
  outline-offset:5px
}
.photo-caption  {
  position:absolute;
  bottom:16px;
  left:17px;
  right:17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fffdf8;
  background:#482036bc;
  backdrop-filter:blur(12px);
  padding:15px 20px;
  border:1px solid #fff3;
  border-radius:13px;
  pointer-events:none
}
.photo-caption small  {
  display:block;
  font-size:8px;
  letter-spacing:1.6px;
  line-height:1.4
}
.photo-caption strong  {
  font-family:'DM Serif Display',Georgia,serif;
  font-size:25px;
  font-weight:400
}
.caption-symbol  {
  width:35px;
  height:35px;
  border:1px solid #fff5;
  border-radius:50%;
  display:grid;
  place-items:center
}
.caption-symbol .icon  {
  width:18px;
  height:18px
}
.look-picker  {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:17px
}
.look-choice  {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:transparent;
  padding:6px;
  border-radius:10px;
  min-height:55px;
  text-align:left;
  font-size:9px;
  transition:background .2s,border-color .2s
}
.look-choice img  {
  width:32px;
  height:40px;
  object-fit:cover;
  border-radius:5px
}
.look-choice[aria-pressed=true]  {
  background:var(--rose);
  border-color:var(--accent)
}
.look-choice:hover  {
  border-color:var(--accent)
}
.demo-disclaimer  {
  text-align:center;
  font-size:8px;
  color:var(--muted);
  margin-top:10px;
  min-height:14px
}
.category-ribbon  {
  border-block:1px solid var(--line);
  padding-block:25px
}
.category-ribbon .container  {
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:center
}
.category-ribbon span  {
  display:flex;
  align-items:center;
  gap:13px;
  white-space:nowrap;
  font-size:9px;
  letter-spacing:1.7px
}
.category-ribbon span:first-child  {
  font-family:'DM Serif Display',Georgia,serif;
  letter-spacing:0;
  font-size:20px
}
.category-ribbon .icon  {
  width:15px;
  height:15px;
  color:var(--accent)
}
.section-heading  {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:42px
}
.section-heading .eyebrow  {
  margin-bottom:16px
}
.section-heading>p  {
  font-size:12px;
  color:var(--body);
  padding-bottom:5px;
  line-height:1.9
}
.editorial-grid  {
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:25px
}
.look-card-photo  {
  position:relative;
  aspect-ratio:.85;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--rose)
}
.look-card-photo img  {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s
}
.look-card:hover .look-card-photo img  {
  transform:scale(1.025)
}
.look-card--hair .look-card-photo  {
  border-top-left-radius:110px
}
.look-card--nails .look-card-photo img  {
  object-position:50% 50%
}
.photo-index  {
  position:absolute;
  top:17px;
  left:17px;
  background:#fff9f0e8;
  color:#5B1C43;
  border-radius:99px;
  padding:6px 12px;
  font-size:8px;
  letter-spacing:1.2px
}
.look-card h3  {
  font-family:'DM Serif Display',Georgia,serif;
  font-size:27px;
  font-weight:400;
  line-height:1.2;
  margin-block:22px 10px;
  letter-spacing:-.4px
}
.look-card p  {
  font-size:12px;
  color:var(--body);
  line-height:1.95;
  max-width:350px
}
.swatches  {
  display:flex;
  gap:6px;
  position:absolute;
  bottom:17px;
  left:17px;
  padding:9px 11px;
  background:#fff8efe8;
  border-radius:99px
}
.swatches i  {
  display:block;
  width:17px;
  height:17px;
  background:var(--swatch);
  border:1px solid #0001;
  border-radius:50%
}
.accessories-note  {
  display:flex;
  gap:32px;
  align-items:center;
  margin-top:42px;
  padding-block:25px;
  border-top:1px solid var(--line)
}
.accessories-note>span  {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:8px;
  letter-spacing:1.3px;
  white-space:nowrap
}
.accessories-note .icon  {
  width:18px;
  height:18px
}
.accessories-note p  {
  font-size:11px;
  color:var(--body);
  max-width:490px
}
.accessories-note a  {
  margin-left:auto;
  white-space:nowrap
}
.how-section  {
  background:var(--rose);
  color:var(--rose-ink)
}
.how-grid  {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:90px
}
.how-intro .eyebrow  {
  margin-bottom:21px
}
.how-intro>p:not(.eyebrow)  {
  font-size:13px;
  color:var(--body);
  margin-top:26px
}
.serif-star  {
  font-size:76px;
  line-height:1;
  margin-top:30px;
  color:var(--accent)
}
.steps  {
  list-style:none;
  margin:0;
  padding:0;
  align-self:center
}
.steps li  {
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding-block:30px;
  border-top:1px solid var(--line)
}
.steps li:last-child  {
  border-bottom:1px solid var(--line)
}
.step-number  {
  font-size:11px;
  color:var(--accent);
  padding-top:5px
}
.steps h3  {
  font-family:'DM Serif Display',Georgia,serif;
  font-size:27px;
  font-weight:400;
  line-height:1.2;
  margin-bottom:13px
}
.steps p  {
  font-size:12px;
  color:var(--body);
  line-height:1.9;
  max-width:345px
}
.steps li>.icon  {
  margin-left:auto;
  width:23px;
  height:23px
}
.how-note  {
  font-size:9px;
  color:var(--muted);
  margin-top:45px;
  text-align:right
}
.privacy-section  {
  background:var(--deep);
  color:var(--deep-ink)
}
.privacy-grid  {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:100px
}
.privacy-section .eyebrow  {
  color:#dab4c6;
  margin-bottom:24px
}
.privacy-section em  {
  color:#e4acc7
}
.privacy-section h2  {
  font-size:65px
}
.privacy-section .text-link  {
  margin-top:32px;
  color:#f2d6e3
}
.privacy-intro  {
  font-size:17px;
  line-height:1.8;
  margin-bottom:27px;
  max-width:470px
}
.privacy-point  {
  display:flex;
  gap:18px;
  padding-top:22px;
  border-top:1px solid #e6c2d32b;
  margin-top:22px
}
.privacy-point .icon  {
  color:#e6b5cd;
  margin-top:3px;
  width:21px;
  height:21px
}
.privacy-point h3  {
  font-size:12px;
  margin-bottom:6px
}
.privacy-point p  {
  font-size:11px;
  color:#dcc4d3;
  line-height:1.85
}
.faq-section  {
  max-width:1100px
}
.faq-section .section-heading  {
  margin-bottom:35px
}
.faq-list  {
  border-top:1px solid var(--line)
}
.faq-list details  {
  border-bottom:1px solid var(--line)
}
summary  {
  cursor:pointer;
  list-style:none
}
summary::-webkit-details-marker  {
  display:none
}
.faq-list summary  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:25px 0;
  font-size:14px;
  font-weight:500;
  line-height:1.6
}
.faq-list summary .icon  {
  width:17px;
  height:17px;
  transition:transform .2s
}
.faq-list details[open] summary .icon  {
  transform:rotate(180deg)
}
.faq-list details>p  {
  font-size:12px;
  color:var(--body);
  line-height:1.95;
  max-width:850px;
  padding:0 40px 27px 0
}
.closing-section  {
  background:var(--rose);
  padding-block:80px;
  overflow:hidden;
  position:relative;
  text-align:center
}
.closing-section .container  {
  position:relative
}
.closing-section .eyebrow  {
  margin-bottom:23px
}
.closing-section h2  {
  font-size:76px
}
.closing-section>.container>p:not(.eyebrow)  {
  font-size:12px;
  color:var(--body);
  margin-top:22px
}
.closing-section .btn,.closing-section .store-badge  {
  margin-top:27px
}
.closing-section p.availability-note  {
  font-size:9px;
  margin-top:14px
}
.closing-flower  {
  position:absolute;
  font-size:230px;
  line-height:1;
  right:-80px;
  top:28%;
  color:var(--accent);
  opacity:.12;
  pointer-events:none
}
.site-footer  {
  padding-block:55px 25px
}
.footer-main  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  margin-bottom:45px
}
.footer-main>div>p  {
  color:var(--body);
  font-size:10px;
  margin-top:15px
}
.footer-nav  {
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  font-size:10px
}
.footer-nav a  {
  text-decoration:none
}
.footer-nav a .icon  {
  width:14px;
  height:14px;
  margin-left:7px
}
.footer-bottom  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:20px;
  color:var(--muted);
  font-size:9px
}
.footer-legal  {
  font-size:8px;
  color:var(--muted);
  margin-top:12px
}
.store-badge  {
  display:inline-block
}
.store-badge img  {
  height:52px;
  width:auto
}
/* Shared document pages, including the app's legal webviews. */
.legal-hero  {
  padding-block:70px 55px;
  border-bottom:1px solid var(--line)
}
.legal-hero .eyebrow  {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--accent);
  margin-bottom:20px
}
.legal-hero .eyebrow img  {
  border-radius:6px
}
.page-title  {
  font-size:clamp(47px,5vw,70px)
}
.lede  {
  font-size:15px;
  color:var(--body);
  max-width:720px;
  margin-top:22px;
  line-height:1.85
}
.meta-row  {
  display:flex;
  font-size:10px;
  margin:27px 0 0
}
.meta-row>div  {
  display:flex;
  gap:14px
}
.meta-row dt  {
  color:var(--muted)
}
.meta-row dd  {
  margin:0
}
.legal-layout  {
  display:grid;
  grid-template-columns:245px minmax(0,1fr);
  gap:65px;
  padding-block:52px 90px
}
.toc  {
  position:sticky;
  top:calc(var(--header-h) + 25px);
  align-self:start;
  max-height:calc(100svh - var(--header-h) - 55px);
  overflow:auto;
  scrollbar-width:thin
}
.toc summary  {
  display:none
}
.toc-panel  {
  padding-right:12px
}
.toc-title  {
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:1.4px;
  margin-bottom:19px
}
.toc ol  {
  list-style:none;
  margin:0;
  padding:0
}
.toc li  {
  margin-bottom:3px
}
.toc li a  {
  display:flex;
  gap:11px;
  padding:7px 8px;
  text-decoration:none;
  border-radius:6px;
  font-size:10px;
  line-height:1.6;
  color:var(--body)
}
.toc a .n  {
  color:var(--accent);
  font-size:9px;
  padding-top:1px;
  flex:0 0 17px
}
.toc li a.is-active  {
  background:var(--rose);
  color:var(--ink)
}
.toc-foot  {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:15px;
  display:grid;
  gap:13px
}
.toc-foot a  {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  text-decoration:none
}
.toc-foot .icon  {
  width:15px;
  height:15px
}
.legal-doc  {
  min-width:0;
  color:var(--body);
  font-size:13px;
  line-height:1.95
}
.legal-doc p+p,.legal-doc p+ul,.legal-doc p+ol  {
  margin-top:16px
}
.legal-doc a  {
  color:var(--accent);
  overflow-wrap:anywhere
}
.legal-doc strong  {
  font-weight:500;
  color:var(--ink)
}
.legal-doc h3  {
  font-size:15px;
  margin-block:24px 11px;
  color:var(--ink)
}
.legal-doc li  {
  padding-left:4px;
  margin-block:8px
}
.legal-doc table  {
  border-collapse:collapse;
  width:100%;
  font-size:11px;
  margin-block:20px
}
.legal-doc th,.legal-doc td  {
  padding:12px;
  border:1px solid var(--line);
  text-align:left;
  vertical-align:top
}
.legal-doc th  {
  color:var(--ink);
  font-weight:500
}
.doc-intro  {
  font-size:14px
}
.doc-section  {
  margin-top:42px;
  padding-top:32px;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 28px)
}
.sec-head  {
  display:flex;
  align-items:flex-start;
  gap:15px;
  justify-content:space-between;
  margin-bottom:22px
}
.sec-head h2  {
  font-family:'DM Serif Display',Georgia,serif;
  font-size:29px;
  line-height:1.25;
  letter-spacing:-.5px;
  color:var(--ink)
}
.sec-num  {
  display:block;
  font-family:var(--font-body);
  letter-spacing:1px;
  font-size:9px;
  color:var(--accent);
  margin-bottom:8px
}
.anchor  {
  flex-shrink:0;
  opacity:.5;
  padding-top:7px
}
.anchor:hover  {
  opacity:1
}
.anchor .icon  {
  width:15px;
  height:15px
}
.glance  {
  background:var(--rose);
  border-radius:16px;
  padding:28px;
  margin-top:30px
}
.glance h2  {
  font-size:30px;
  color:var(--ink);
  letter-spacing:-.5px
}
.glance-sub  {
  font-size:10px;
  margin-top:10px
}
.glance ul  {
  padding:0;
  list-style:none;
  margin:20px 0 0
}
.glance li  {
  display:flex;
  gap:14px;
  font-size:12px;
  padding-left:0;
  margin-block:15px
}
.glance-ico  {
  flex-shrink:0;
  color:var(--accent);
  padding-top:4px
}
.glance .icon  {
  width:19px;
  height:19px
}
.callout  {
  background:var(--rose);
  border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;
  padding:20px;
  margin-block:22px;
  font-size:12px
}
.callout-title  {
  font-weight:500;
  color:var(--ink);
  margin-bottom:6px
}
.callout-title .icon  {
  width:17px;
  height:17px;
  margin-right:10px
}
.doc-end  {
  border-top:1px solid var(--line);
  padding-top:25px;
  margin-top:45px;
  color:var(--muted);
  font-size:10px
}
.support-layout  {
  padding-block:45px 85px
}
.contact-card  {
  display:flex;
  align-items:flex-start;
  gap:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  padding:30px;
  margin-block:25px
}
.contact-card img  {
  border-radius:12px;
  flex-shrink:0
}
.contact-card p  {
  font-size:12px;
  color:var(--body)
}
.contact-card .contact-title  {
  font-family:'DM Serif Display',Georgia,serif;
  font-size:28px;
  color:var(--ink);
  line-height:1.2;
  margin-bottom:10px
}
.contact-actions  {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px
}
.contact-actions .btn  {
  font-size:11px;
  padding-inline:18px;
  min-height:44px
}
.support-shortcuts  {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-block:30px
}
.shortcut  {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 15px;
  border:1px solid var(--line);
  border-radius:99px;
  text-decoration:none;
  font-size:10px
}
.shortcut .icon  {
  width:16px;
  height:16px
}
.howto li  {
  padding-left:9px
}
.support-doc .doc-section:first-child  {
  margin-top:20px
}
.error-page  {
  min-height:65svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding-block:80px
}
.error-page .card  {
  max-width:610px
}
.error-code  {
  font-size:12px;
  letter-spacing:4px;
  margin-bottom:25px;
  color:var(--accent)
}
.error-page h1  {
  font-size:62px
}
.error-page h1+p  {
  color:var(--body);
  margin-top:22px;
  max-width:500px
}
.error-actions  {
  display:flex;
  justify-content:center;
  gap:15px;
  margin-top:30px
}
.toast  {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,20px);
  padding:12px 22px;
  background:var(--primary);
  color:var(--on-primary);
  border-radius:99px;
  z-index:100;
  opacity:0;
  pointer-events:none;
  font-size:12px;
  transition:opacity .2s,transform .2s
}
.toast.is-visible  {
  opacity:1;
  transform:translate(-50%,0)
}
.in-app  {
  --header-h:0px
}
.in-app .site-header,.in-app .site-footer,.in-app .skip-link  {
  display:none
}
.in-app .legal-hero  {
  padding-top:32px
}
.in-app .legal-layout  {
  padding-top:25px
}
.in-app .legal-hero .eyebrow  {
  display:none
}
@media(min-width:1600px)  {
  .hero  {
    gap:110px
  }
  .hero-art  {
    max-width:500px
  }
}
@media(max-width:1150px)  {
  .container  {
    width:calc(100% - 64px)
  }
  .hero  {
    gap:32px;
    grid-template-columns:1.05fr 1fr
  }
  .hero h1  {
    font-size:65px
  }
  .hero-actions  {
    gap:19px
  }
  .hero-description  {
    font-size:13px
  }
  .site-nav  {
    margin-right:0
  }
  .nav-list  {
    gap:21px
  }
  .header-inner  {
    gap:20px
  }
  .category-ribbon span:first-child  {
    display:none
  }
  .category-ribbon .container  {
    justify-content:center;
    gap:35px
  }
  .how-grid,.privacy-grid  {
    gap:60px
  }
  .look-choice  {
    gap:5px
  }
  .look-choice span  {
    font-size:8px
  }
  .accessories-note  {
    gap:22px
  }
  .legal-layout  {
    gap:40px;
    grid-template-columns:220px minmax(0,1fr)
  }
}
@media(max-width:900px)  {
  :root  {
    --header-h:78px
  }
  .container  {
    width:calc(100% - 48px)
  }
  .site-nav  {
    order:3;
    margin:0
  }
  .header-actions  {
    margin-left:auto;
    gap:8px
  }
  .nav-toggle  {
    display:grid
  }
  .icon-close  {
    display:none
  }
  .nav-open .icon-close  {
    display:block
  }
  .nav-open .icon-menu  {
    display:none
  }
  .nav-list  {
    position:absolute;
    left:0;
    right:0;
    top:var(--header-h);
    padding:18px 24px 24px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    display:none;
    box-shadow:0 14px 15px #00000008
  }
  .nav-open .nav-list  {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .nav-list a  {
    display:block;
    padding:12px;
    font-size:13px
  }
  .hero  {
    gap:30px;
    padding-top:30px;
    padding-bottom:45px
  }
  .hero h1  {
    font-size:56px
  }
  .hero .eyebrow  {
    font-size:8px;
    letter-spacing:1.4px;
    margin-bottom:22px
  }
  .hero-description  {
    font-size:12px;
    margin-top:20px;
    line-height:1.9
  }
  .hero-actions  {
    display:grid;
    justify-items:start;
    margin-top:25px;
    gap:18px
  }
  .hero-footnote  {
    margin-top:30px;
    font-size:9px
  }
  .btn-large  {
    padding:15px 23px;
    font-size:12px
  }
  .comparison  {
    border-radius:95px 95px 15px 15px
  }
  .look-picker  {
    gap:5px
  }
  .look-choice  {
    display:grid;
    justify-items:center;
    text-align:center;
    gap:6px;
    padding:6px 2px;
    min-height:66px
  }
  .look-choice img  {
    width:28px;
    height:34px
  }
  .photo-caption  {
    padding:11px 14px;
    left:11px;
    right:11px;
    bottom:11px
  }
  .photo-caption strong  {
    font-size:21px
  }
  .photo-caption small  {
    font-size:7px
  }
  .comparison-tags  {
    left:20px;
    right:20px;
    top:25px
  }
  .category-ribbon .container  {
    gap:24px;
    flex-wrap:wrap
  }
  .category-ribbon span  {
    font-size:8px;
    letter-spacing:1.3px
  }
  .section-space  {
    padding-block:75px
  }
  .section-heading  {
    align-items:start;
    gap:25px
  }
  .section-heading>p  {
    max-width:240px;
    font-size:11px;
    padding-top:28px
  }
  .editorial-grid  {
    gap:18px
  }
  .look-card h3  {
    font-size:24px
  }
  .look-card p  {
    font-size:11px
  }
  .look-card--hair .look-card-photo  {
    border-top-left-radius:75px
  }
  .look-card-photo  {
    aspect-ratio:.75
  }
  .accessories-note  {
    align-items:start;
    flex-wrap:wrap;
    gap:13px
  }
  .accessories-note p  {
    max-width:none;
    flex-basis:65%
  }
  .accessories-note a  {
    margin-left:0
  }
  .how-grid  {
    gap:40px;
    grid-template-columns:1fr 1.1fr
  }
  .how-intro h2  {
    font-size:46px
  }
  .steps li  {
    gap:16px;
    padding-block:24px
  }
  .steps h3  {
    font-size:24px
  }
  .steps p  {
    font-size:11px
  }
  .steps li>.icon  {
    width:20px
  }
  .privacy-grid  {
    gap:45px
  }
  .privacy-section h2  {
    font-size:58px
  }
  .privacy-intro  {
    font-size:15px
  }
  .privacy-point  {
    gap:14px
  }
  .footer-main  {
    align-items:start
  }
  .footer-nav  {
    gap:18px;
    max-width:350px;
    justify-content:end
  }
  .legal-layout  {
    display:block
  }
  .toc  {
    top:var(--header-h);
    z-index:20;
    max-height:none;
    overflow:visible;
    background:var(--bg);
    border-block:1px solid var(--line);
    margin-bottom:35px
  }
  .toc summary  {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    min-height:var(--toc-bar-h);
    padding:12px 4px
  }
  .toc summary>.icon  {
    width:17px
  }
  .toc-chevron  {
    margin-left:auto
  }
  .toc-current  {
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:50%;
    font-size:9px
  }
  .toc-panel  {
    padding:14px 12px;
    max-height:65svh;
    overflow:auto
  }
  .toc-title  {
    display:none
  }
  .toc li a  {
    font-size:12px;
    padding:8px
  }
  .doc-section  {
    scroll-margin-top:calc(var(--header-h) + var(--toc-bar-h) + 20px)
  }
  .legal-hero  {
    padding-block:45px 35px
  }
  .legal-layout  {
    padding-top:25px
  }
  .legal-doc  {
    font-size:13px
  }
  .privacy-section .text-link  {
    font-size:11px
  }
}
@media(max-width:620px)  {
  :root  {
    --header-h:72px
  }
  .container  {
    width:calc(100% - 40px)
  }
  .brand  {
    font-size:37px
  }
  .header-inner  {
    gap:12px
  }
  .header-actions  {
    gap:3px
  }
  .header-download  {
    font-size:10px;
    min-height:38px;
    padding:10px 15px;
    gap:8px
  }
  .header-download .icon  {
    width:14px
  }
  .icon-btn  {
    width:35px;
    height:38px
  }
  .theme-toggle  {
    display:none
  }
  .hero  {
    display:flex;
    flex-direction:column;
    gap:27px;
    padding-block:33px 35px
  }
  .hero-copy  {
    padding:0;
    width:100%;
    text-align:center
  }
  .hero .eyebrow  {
    justify-content:center;
    font-size:8px;
    letter-spacing:1.5px;
    margin-bottom:22px
  }
  .hero h1  {
    font-size:clamp(38px,11.5vw,64px);
    letter-spacing:-1.5px;
    margin:0
  }
  .hero-description  {
    font-size:12px;
    max-width:350px;
    margin:20px auto 0;
    line-height:1.95
  }
  .hero-actions  {
    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:23px
  }
  .hero-actions .text-link  {
    font-size:10px
  }
  .hero-actions .btn  {
    font-size:11px;
    gap:10px;
    padding-inline:20px
  }
  .hero-footnote  {
    display:none
  }
  .hero-art  {
    max-width:410px;
    align-self:center
  }
  .art-label  {
    font-size:8px;
    margin-bottom:10px
  }
  .comparison  {
    aspect-ratio:4/4.2;
    border-radius:100px 100px 16px 16px
  }
  .photo-caption  {
    left:13px;
    right:13px;
    bottom:13px;
    padding:12px 16px
  }
  .photo-caption strong  {
    font-size:24px
  }
  .comparison-tags  {
    top:27px;
    left:25px;
    right:25px
  }
  .look-picker  {
    margin-top:13px;
    gap:7px
  }
  .look-choice  {
    display:flex;
    flex-direction:row;
    gap:6px;
    justify-content:center;
    min-height:51px;
    padding:5px
  }
  .look-choice img  {
    width:26px;
    height:33px
  }
  .look-choice span  {
    font-size:8px
  }
  .demo-disclaimer  {
    font-size:7px;
    margin-top:10px
  }
  .category-ribbon  {
    padding-block:19px
  }
  .category-ribbon .container  {
    gap:12px 23px;
    justify-content:center
  }
  .category-ribbon span  {
    font-size:7px;
    gap:9px
  }
  .category-ribbon .icon  {
    width:11px;
    height:11px
  }
  .section-space  {
    padding-block:57px
  }
  .section-heading  {
    display:block;
    margin-bottom:28px
  }
  .section-heading .eyebrow  {
    font-size:8px;
    margin-bottom:13px;
    letter-spacing:1.7px
  }
  .section-heading h2  {
    font-size:42px;
    letter-spacing:-1px
  }
  .section-heading>p  {
    max-width:none;
    padding:0;
    margin-top:17px;
    font-size:11px
  }
  .section-heading>p br  {
    display:none
  }
  .editorial-grid  {
    grid-template-columns:1fr 1fr;
    gap:30px 15px
  }
  .look-card--hair  {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:17px;
    align-items:end
  }
  .look-card--hair .look-card-photo  {
    grid-row:1/3;
    aspect-ratio:.8;
    border-top-left-radius:70px
  }
  .look-card--hair h3  {
    margin:0;
    font-size:27px;
    align-self:end
  }
  .look-card--hair p  {
    align-self:start;
    margin-top:10px
  }
  .look-card-photo  {
    aspect-ratio:.8;
    border-radius:14px
  }
  .photo-index  {
    font-size:6px;
    letter-spacing:.7px;
    top:11px;
    left:10px;
    padding:4px 8px
  }
  .look-card h3  {
    font-size:23px;
    margin-top:16px;
    margin-bottom:9px
  }
  .look-card p  {
    font-size:10px;
    line-height:1.9
  }
  .look-card--nails .look-card-photo img  {
    object-position:51%
  }
  .swatches  {
    gap:5px;
    bottom:11px;
    left:10px;
    padding:7px
  }
  .swatches i  {
    width:13px;
    height:13px
  }
  .accessories-note  {
    margin-top:28px;
    padding-bottom:0;
    display:block
  }
  .accessories-note>span  {
    font-size:7px;
    letter-spacing:1px
  }
  .accessories-note p  {
    font-size:10px;
    margin-top:12px
  }
  .accessories-note a  {
    font-size:10px;
    margin-top:14px
  }
  .how-grid  {
    display:block
  }
  .how-intro h2  {
    font-size:46px
  }
  .how-intro>.eyebrow  {
    font-size:8px;
    letter-spacing:1.4px
  }
  .how-intro>p:not(.eyebrow)  {
    font-size:11px;
    margin-top:20px
  }
  .serif-star  {
    display:none
  }
  .steps  {
    margin-top:30px
  }
  .steps li  {
    padding-block:24px;
    gap:20px
  }
  .steps h3  {
    font-size:26px
  }
  .steps p  {
    font-size:11px;
    max-width:280px
  }
  .steps li>.icon  {
    width:20px
  }
  .how-note  {
    font-size:8px;
    text-align:left;
    margin-top:25px
  }
  .privacy-grid  {
    display:block
  }
  .privacy-section h2  {
    font-size:55px
  }
  .privacy-section .eyebrow  {
    font-size:8px
  }
  .privacy-section .text-link  {
    margin-top:24px
  }
  .privacy-copy  {
    margin-top:35px
  }
  .privacy-intro  {
    font-size:15px
  }
  .privacy-point  {
    margin-top:19px;
    padding-top:19px
  }
  .privacy-point p  {
    font-size:11px
  }
  .faq-section .section-heading>.text-link  {
    margin-top:20px;
    font-size:11px
  }
  .faq-list summary  {
    font-size:12px;
    padding-block:21px
  }
  .faq-list details>p  {
    font-size:11px;
    padding-right:10px;
    padding-bottom:22px
  }
  .closing-section  {
    padding-block:60px
  }
  .closing-section .eyebrow  {
    font-size:7px;
    letter-spacing:1.6px
  }
  .closing-section h2  {
    font-size:56px
  }
  .closing-section>.container>p:not(.eyebrow)  {
    font-size:11px
  }
  .closing-section p.availability-note  {
    font-size:8px
  }
  .closing-flower  {
    font-size:190px;
    right:-95px;
    top:25%
  }
  .site-footer  {
    padding-top:40px
  }
  .footer-main  {
    display:block;
    margin-bottom:30px
  }
  .footer-main>div>p  {
    font-size:10px
  }
  .footer-nav  {
    justify-content:start;
    margin-top:27px;
    max-width:none;
    gap:18px;
    font-size:9px
  }
  .footer-bottom  {
    font-size:8px
  }
  .footer-legal  {
    font-size:7px;
    line-height:1.9
  }
  .legal-hero  {
    padding-block:36px 30px
  }
  .legal-hero .eyebrow  {
    font-size:9px
  }
  .page-title  {
    font-size:47px;
    letter-spacing:-1px
  }
  .lede  {
    font-size:12px;
    margin-top:18px
  }
  .meta-row  {
    font-size:9px;
    margin-top:20px
  }
  .legal-layout  {
    padding-bottom:50px
  }
  .legal-doc  {
    font-size:12px
  }
  .doc-intro  {
    font-size:12px
  }
  .sec-head h2  {
    font-size:27px
  }
  .doc-section  {
    margin-top:31px;
    padding-top:27px
  }
  .legal-doc h3  {
    font-size:14px
  }
  .glance  {
    padding:21px;
    margin-top:24px
  }
  .glance h2  {
    font-size:28px
  }
  .glance li  {
    font-size:11px;
    gap:12px
  }
  .glance-sub  {
    font-size:9px
  }
  .glance .icon  {
    width:17px;
    height:17px
  }
  .contact-card  {
    padding:22px;
    gap:15px;
    flex-wrap:wrap
  }
  .contact-card>img  {
    width:42px;
    height:42px
  }
  .contact-card .contact-title  {
    font-size:26px
  }
  .contact-card p  {
    font-size:11px
  }
  .contact-actions  {
    gap:9px
  }
  .contact-actions .btn  {
    font-size:10px;
    padding-inline:14px
  }
  .support-shortcuts  {
    gap:9px
  }
  .shortcut  {
    font-size:9px;
    padding:8px 12px
  }
  .support-layout  {
    padding-top:10px
  }
  .toc-current  {
    max-width:42%;
    font-size:8px
  }
  .toc summary  {
    font-size:10px
  }
  .error-page h1  {
    font-size:48px
  }
  .error-page h1+p  {
    font-size:12px
  }
  .error-actions  {
    flex-wrap:wrap
  }
  .in-app .container  {
    width:calc(100% - 36px)
  }
}
@media(prefers-reduced-motion:reduce)  {
  html  {
    scroll-behavior:auto
  }
  *,*::before,*::after  {
    animation:none!important;
    transition:none!important
  }
  .btn:hover,.look-card:hover .look-card-photo img  {
    transform:none
  }
}
@media print  {
  .site-header,.site-footer,.toc,.anchor,.contact-actions,.skip-link  {
    display:none!important
  }
  .legal-layout  {
    display:block;
    padding:20px 0
  }
  .legal-hero  {
    padding:20px 0
  }
  .container  {
    width:100%
  }
  .legal-doc  {
    font-size:10pt
  }
  .doc-section  {
    break-inside:avoid
  }
  body  {
    background:#fff;
    color:#222
  }
  h1,h2,h3,p,a  {
    color:#222!important
  }
}
/* Keep navigation available if JavaScript is disabled. */
@media (max-width: 900px)  {
  html:not(.js) .site-header  {
    height: auto;
    position: relative;
  }
  html:not(.js) .header-inner  {
    flex-wrap: wrap;
    padding-block: 18px;
  }
  html:not(.js) .site-nav  {
    flex-basis: 100%;
  }
  html:not(.js) .nav-toggle  {
    display: none;
  }
  html:not(.js) .nav-list  {
    display: flex;
    position: static;
    padding: 0;
    box-shadow: none;
    border: 0;
    flex-wrap: wrap;
    gap: 5px 20px;
  }
  html:not(.js) .nav-list a  {
    padding: 5px 0;
    font-size: 11px;
  }
}
html:not(.js) .look-picker, html:not(.js) .comparison-range, html:not(.js) .comparison-line  {
  display: none;
}
.header-cta-short  {
  display: none;
}
@media (max-width: 370px)  {
  .header-cta-full  {
    display: none;
  }
  .header-cta-short  {
    display: inline;
  }
  .hero-actions  {
    gap: 13px;
  }
  .hero-actions .btn  {
    padding-inline: 17px;
  }
  .hero-actions .text-link  {
    font-size: 9px;
  }
}
/* The app provides its own header at every viewport width. */
:root.in-app  {
  --header-h: 0px;
}
.mobile-appearance  {
  display: none;
}
@media (max-width: 620px)  {
  .mobile-appearance  {
    display: block;
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding-top: 10px;
  }
  .mobile-theme-button  {
    display: flex;
    gap: 12px;
    align-items: center;
    background: transparent;
    padding: 12px;
    width: 100%;
    text-align: left;
    font-size: 12px;
  }
  .mobile-theme-button .icon  {
    width: 17px;
    height: 17px;
  }
}

/* Match the active app: Home/Studio PaywallStyle, onboarding controls and Sizes. */
body { font-family: var(--font-body); font-size: 15px; letter-spacing: -.3px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); }
.brand-wordmark { font-family: 'DM Serif Display', Georgia, serif; font-size: 42px; font-weight: 400; line-height: 1; letter-spacing: -2.2px; }
.brand-icon { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; flex-shrink: 0; }
h1, h2, h3 { font-style: normal; }
.hero h1 { font-size: 58px; line-height: 1; letter-spacing: -1.8px; }
.hero-description { font-size: 18px; line-height: 1.3; letter-spacing: -.3px; }
.hero-footnote { font-size: 13px; }
h2 { font-size: clamp(36px, 4vw, 48px); line-height: 1.05; letter-spacing: -1.2px; }
.section-heading h2 { font-size: clamp(30px, 3.2vw, 42px); }
.section-heading > p, .look-card p, .steps p { font-size: 15px; line-height: 1.5; }
.how-intro > p:not(.eyebrow) { font-size: 17px; line-height: 1.35; }
.nav-list a { font-size: 14px; }
.btn { min-height: 48px; min-width: 44px; padding: 12px 16px; gap: 8px; border-radius: 15px; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.3px; transition: background-color 120ms, transform 120ms; }
.btn:hover { transform: none; filter: none; }
.btn-primary:hover { filter: none; background: var(--primary); }
.btn-primary:active { background: color-mix(in srgb, var(--primary) 92%, var(--on-primary)); }
.btn-secondary { color: var(--primary); background: transparent; border: 1px solid var(--primary); }
.btn-secondary:hover { background: var(--rose); }
.btn-large { min-height: 55px; padding: 15px 20px; font-size: 18px; font-weight: 500; line-height: 1.2; }
.btn-large:active { transform: scale(.98); }
.btn .icon { width: 20px; height: 20px; }
.header-download { min-height: 48px; padding: 12px 16px; font-size: 15px; }
.header-cta-short { display: none; }
.text-link { font-family: var(--font-body); font-size: 15px; letter-spacing: -.3px; }
.comparison, .look-card-photo, .look-card--hair .look-card-photo { border-radius: 18px; }
.photo-caption { background: var(--surface); color: var(--primary); border: 0; border-radius: 11px; padding: 9px 14px; }
.photo-caption small { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: -.3px; }
.photo-caption strong { font-size: 27px; }
.caption-symbol { border-color: var(--line); }
.look-choice { min-height: 48px; border-radius: 15px; font-family: var(--font-body); font-size: 13px; }
.look-choice span { font-size: 13px; }
.look-choice[aria-pressed=true] { background: var(--rose); border-color: var(--primary); }
.look-card h3, .steps h3 { font-size: 27px; letter-spacing: -1.2px; }
.category-ribbon .container { flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.category-ribbon span, .category-ribbon span:first-child { font-family: var(--font-body); font-size: 14px; letter-spacing: -.3px; }
.accessories-note > span { font-family: 'DM Serif Display', Georgia, serif; font-size: 28px; line-height: 1.05; letter-spacing: -1.2px; }
.accessories-note p { font-size: 17px; line-height: 1.35; }
.privacy-section h2 { font-size: 48px; }
.privacy-intro { font-size: 18px; line-height: 1.5; }
.privacy-section .btn-secondary { color: #FFF8F5; border-color: #F4AFD2; }
.privacy-section .btn-secondary:hover { background: #522746; }
.closing-app-icon { margin: 0 auto 24px; border-radius: 16px; }
.closing-section h2 { font-size: 48px; }
.closing-section > .container > p:not(.eyebrow) { font-size: 17px; line-height: 1.35; }
.shortcut { min-height: 44px; font-size: 13px; border-radius: 15px; }
.contact-actions .btn { min-height: 48px; padding: 12px 16px; font-size: 15px; }
@media (max-width: 1150px) {
  .header-inner { gap: 18px; }
  .nav-list { gap: 18px; }
  .nav-list a { font-size: 13px; }
  .hero-actions { gap: 12px; }
  .look-picker { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .look-choice { display: flex; justify-content: flex-start; gap: 9px; padding: 8px; }
  .look-choice img { width: 32px; height: 40px; }
  .hero-description { font-size: 17px; }
  .hero h1 { font-size: 54px; }
}
@media (max-width: 620px) {
  .brand-icon { width: 32px; height: 32px; border-radius: 8px; }
  .brand-wordmark { font-size: 38px; letter-spacing: -2px; }
  .brand { gap: 8px; }
  .header-inner { gap: 10px; }
  .header-download { min-height: 44px; padding: 10px 12px; font-size: 13px; gap: 6px; }
  .header-download .icon { width: 18px; }
  .hero h1 { font-size: clamp(48px, 14.75vw, 66px); line-height: 1; }
  .hero-description { font-size: 18px; line-height: 1.3; }
  .hero-actions { gap: 12px; flex-direction: column; align-items: stretch; }
  .hero-actions .btn { min-height: 48px; font-size: 15px; padding: 12px 16px; }
  .hero-actions .btn-large { min-height: 55px; font-size: 18px; padding: 15px 20px; }
  .hero-footnote { display: flex; justify-content: center; font-size: 12px; margin-top: 20px; }
  .section-heading h2 { font-size: 32px; }
  .section-heading > p, .look-card p, .steps p { font-size: 14px; }
  .look-card h3 { font-size: 24px; }
  .look-card--hair h3 { font-size: 27px; }
  .category-ribbon span, .category-ribbon span:first-child { font-size: 12px; }
  .category-ribbon .container { justify-content: center; gap: 13px 20px; }
  .accessories-note > span { font-size: 28px; }
  .accessories-note p { font-size: 17px; }
  .accessories-note a { font-size: 15px; }
  .how-intro h2 { font-size: 48px; }
  .how-intro > p:not(.eyebrow) { font-size: 17px; }
  .privacy-section h2, .closing-section h2 { font-size: 40px; }
  .privacy-intro { font-size: 17px; }
  .photo-caption strong { font-size: 24px; }
  .look-choice span { font-size: 13px; }
  .contact-actions .btn { font-size: 15px; }
}
@media (max-width: 370px) {
  .header-cta-full { display: none; }
  .header-cta-short { display: inline; }
}

@media (max-width: 370px) {
  .brand-icon { width: 28px; height: 28px; }
  .brand-wordmark { font-size: 34px; letter-spacing: -1.8px; }
}

/* App categories and multiline feature titles stay visible on narrow screens. */
.category-ribbon span:first-child { display: flex; }
.accessories-note > span { white-space: normal; align-items: flex-start; }
.app-feature-title { display: block; min-width: 0; }
.accessories-note > span > .icon { margin-top: 5px; }

/* Legal documents open directly into their content on mobile. */
@media (max-width: 900px) {
  :root { --toc-bar-h: 0px; }
  .toc { display: none; }
  .doc-section { scroll-margin-top: calc(var(--header-h) + 28px); }
}