@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src:url('/assets/fonts/bricolage-grotesque-vietnamese-500-normal.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src:url('/assets/fonts/bricolage-grotesque-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src:url('/assets/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src:url('/assets/fonts/bricolage-grotesque-vietnamese-600-normal.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src:url('/assets/fonts/bricolage-grotesque-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src:url('/assets/fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:url('/assets/fonts/dm-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src:url('/assets/fonts/dm-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src:url('/assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src:url('/assets/fonts/kalam-devanagari-700-normal.woff2') format('woff2');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src:url('/assets/fonts/kalam-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src:url('/assets/fonts/kalam-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{font-family:Outfit;font-weight:500;font-display:swap;src:url('/assets/fonts/Outfit-Medium.ttf') format('truetype');}

:root {
  --paper: #fffaf7;
  --ink: #512d40;
  --muted: #785c6b;
  --line: #eadde2;
  --panel: #f0e6f3;
  --accent: #963d61;
  --body: 'DM Sans', 'Noto Sans', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', 'DM Sans', 'Noto Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a, button, input, summary { outline-offset: 5px; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); }
figure, h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex-shrink: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; overflow-wrap: anywhere; }
h1 { font-size: clamp(65px, 6.7vw, 96px); line-height: 1.04; letter-spacing: -.055em; font-weight:600; }
h2 { font-size: clamp(38px, 3.8vw, 54px); line-height: 1.13; letter-spacing: -.04em; font-weight:500; text-wrap: balance; }
h3 { font-size: 17px; line-height: 1.4; font-weight: 400; }
::selection { background: #f4cbd9; }
.section-shell { width: min(1248px, calc(100% - 112px)); margin-inline: auto; }
.eyebrow { font-size: 10px; font-weight: 400; line-height: 1.6; letter-spacing: .13em; text-transform: uppercase; }
.caption-index { font-size: 10px; color: var(--muted); letter-spacing: .03em; }
.release-note, .image-note, .media-caption { font-size: 11px; color: var(--muted); line-height: 1.65; }
.skip-link { position: fixed; top: 8px; inset-inline-start: 12px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { width: min(1312px, calc(100% - 80px)); margin: auto; min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font: 500 27px/1 Outfit, var(--body); letter-spacing: -1px; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.desktop-nav { display: flex; gap: 30px; align-items: center; font-size: 12px; }
.desktop-nav a { white-space: nowrap; padding-block: 7px; border-bottom: 1px solid transparent; }
.desktop-nav a:hover { border-bottom-color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 26px; flex-shrink: 0; }
.language-trigger, .footer-language { display: flex; align-items: center; gap: 7px; font-size: 11px; padding: 10px 0; }
.language-trigger svg, .footer-language svg { width: 16px; height: 16px; }
.header-download { display: flex; gap: 19px; align-items: center; padding-block: 10px; border-bottom: 1px solid var(--ink); font-size: 12px; }
.header-download svg { width: 14px; height: 14px; }

.hero { display:grid; grid-template-columns:1fr 1.12fr; align-items:center; gap:70px; padding-block:55px 68px; min-height:680px; }
.hero-copy,.feature-copy,.inside-copy,.faq-heading,.faq-list { min-width:0; }
.hero-copy h1 { margin-block:22px 26px; }
.title-highlight { position:relative; display:inline-block; isolation:isolate; }
.title-highlight::after { content:''; position:absolute; inset-inline:1px; bottom:.035em; height:.16em; border-radius:45%; background:#f5c9d8; transform:rotate(-2deg); z-index:-1; }
.hero-description { max-width:380px; color:#745564; font-size:16px; line-height:1.8; }
.hero-actions { display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:28px; }
.download-button { display:inline-flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 21px; background:var(--ink); color:#fff; max-width:100%; border:1px solid var(--ink); border-radius:999px; }
.download-button>svg:first-child { width:22px; height:25px; }
.download-button>svg:last-child { width:16px; height:16px; margin-inline-start:7px; }
.download-button>span { font-size:13px; line-height:1.35; }
.download-button small { display:block; font-size:9px; line-height:1.2; margin-bottom:4px; letter-spacing:.03em; }
.download-button:hover { background:#753950; }
.text-link { display:inline-flex; align-items:center; gap:16px; padding-bottom:4px; border-bottom:1px solid currentColor; font-size:12px; line-height:1.5; }
.text-link svg { width:14px; height:14px; }
.text-link:hover { color:var(--accent); }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:30px; color:var(--muted); font-size:10px; line-height:1.5; }
.hero-meta span+span { padding-inline-start:20px; border-inline-start:1px solid #c7aab6; }
.hero-art { width:100%; max-width:580px; justify-self:end; min-width:0; }
.portrait-board { position:relative; height:500px; background:#f6dce5; border-radius:30px; isolation:isolate; }
.hero-portrait { position:absolute; min-width:0; background:#fffdf9; padding:8px 8px 0; border-radius:13px; box-shadow:0 10px 24px -19px #59334480; }
.hero-portrait>img { width:100%; height:auto; object-fit:cover; object-position:center 58%; border-radius:8px; background:#dedbd5; }
.bob-portrait { width:min(61%,318px); inset-inline-end:23px; top:25px; }
.bob-portrait>img { aspect-ratio:4/4.7; }
.hero-portrait figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:8px; min-height:36px; padding:10px 5px; font-size:12px; line-height:1.4; }
.original-portrait { width:min(34%,185px); inset-inline-start:21px; bottom:26px; transform:rotate(-5deg); z-index:2; padding:7px 7px 0; border-radius:9px; }
.original-portrait>img { aspect-ratio:4/4.8; border-radius:4px; }
.original-portrait figcaption { min-height:31px; font-size:11px; padding:8px 4px; }
.hero-sticker { position:absolute; top:32px; inset-inline-start:25px; display:grid; place-items:center; max-width:165px; min-height:66px; padding:13px 20px; background:#ffedaf; border:4px solid #fffaf7; border-radius:6px; transform:rotate(-7deg); font:700 21px/1.25 Kalam,var(--body); text-align:center; }
.board-note { position:absolute; top:127px; inset-inline-start:27px; max-width:155px; font:700 20px/1.3 Kalam,var(--body); transform:rotate(-4deg); color:#8e405e; }
.board-arrow { position:absolute; width:110px; height:97px; inset-inline-start:123px; top:148px; color:#a24b6b; z-index:1; }
.board-heart { position:absolute; inset-inline-end:10px; top:12px; width:43px; height:43px; border-radius:50%; background:#fffaf7; color:#a34969; display:grid; place-items:center; transform:rotate(12deg); }
.board-heart svg { width:29px; height:29px; }
.board-spark { position:absolute; inset-inline-end:24px; bottom:23px; width:29px; height:29px; color:#b85872; }
.board-spark svg { width:100%; height:100%; }
.hero-art .release-note { margin-top:15px; font-size:10px; max-width:100%; }

.looks-section { padding-block: 72px 75px; border-top: 1px solid var(--line); }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 60px; margin-bottom: 35px; }
.section-intro h2 { max-width: 550px; margin-top: 17px; }
.section-intro > p { font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 300px; flex-shrink: 0; }
.looks-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; align-items:start; padding-bottom:7px; }
.look-tile { min-width:0; }
.look-tile:nth-child(2) { margin-top:40px; }
.look-tile:nth-child(3) { margin-top:15px; }
.look-photo { position:relative; background:#fff; padding:7px; border:1px solid #eee1e7; border-radius:20px; }
.look-photo>img { width:100%; aspect-ratio:4/4.7; object-fit:cover; object-position:center 58%; border-radius:13px; }
.look-tile figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-top:17px; padding-inline:5px; }
.look-heart { color:#9a496b; width:21px; height:21px; flex-shrink:0; }
.look-heart svg { width:100%; height:100%; }
.look-sticker { position:absolute; inset-inline-end:-12px; bottom:24px; max-width:78%; padding:10px 16px; background:#ffedb2; border:3px solid #fffaf7; border-radius:5px; color:var(--ink); font:700 18px/1.25 Kalam,var(--body); transform:rotate(-6deg); text-align:center; }
.image-note { margin-top: 22px; max-width: 780px; font-size: 10px; }

.colour-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:100px; align-items:center; padding:62px; background:#fae8ed; border-radius:28px; }
.feature-copy .eyebrow { margin-bottom: 19px; }
.feature-copy h2 { margin-bottom: 27px; }
.feature-copy > p:not(.eyebrow) { max-width: 430px; font-size: 15px; line-height: 1.85; }
.feature-copy .feature-note { margin-top: 18px; color: var(--muted); font-size: 12px !important; line-height: 1.8; }
.feature-copy .text-link { margin-top: 28px; }
.colour-art { min-width: 0; width: 100%; max-width: 455px; justify-self: end; }
.colour-photo > img { width:100%; aspect-ratio:4/4.4; object-fit:cover; object-position:center 58%; border-radius:17px; }
.colour-photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 15px; font-size: 12px; }
.colour-swatches { display: flex; gap: 6px; }
.colour-swatches i { width: 15px; height: 15px; border-radius: 50%; background: #342a22; }
.colour-swatches i:nth-child(2) { background: #63452f; }
.colour-swatches i:nth-child(3) { background: #a06e49; outline: 1px solid var(--ink); outline-offset: 2px; margin-inline: 3px; }
.colour-swatches i:nth-child(4) { background: #ba9c75; }
.colour-swatches i:nth-child(5) { background: #8a4d3d; }

.stylist-section { display: grid; grid-template-columns: 1.08fr .92fr; gap: 110px; align-items: center; padding-block: 75px 85px; border-top: 1px solid var(--line); }
.stylist-art { position:relative; min-width:0; background:#f6eddb; padding:26px 26px 20px; border-radius:20px; }
.stylist-art::before { content:''; position:absolute; width:85px; height:23px; top:-9px; inset-inline-start:41%; background:#ddcce8df; transform:rotate(-5deg); }
.stylist-card { width: 100%; border: 1px solid #dcdcd3; }
.media-caption { padding-top: 18px; text-align: center; font-size: 10px; }

.inside-section { background: var(--panel); }
.inside-layout { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 110px; padding-block: 82px; }
.inside-copy h2 { max-width: 450px; margin-block: 18px 24px; }
.inside-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; max-width: 390px; }
.inside-features { margin-top: 28px; max-width: 370px; }
.inside-features > div { display: flex; align-items: center; gap: 20px; padding-block: 12px; border-top: 1px solid #d8c9df; }
.inside-features span { font-size: 10px; color: var(--muted); }
.inside-features p { font-size: 12px; }
.phone-showcase { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 22px; max-width: 475px; width: 100%; justify-self: end; min-width: 0; }
.phone { min-width:0; }
.phone-collection { margin-top:28px; transform:rotate(3deg); }
.phone > img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border: 1px solid #c1c4b9; border-radius: 15px; }
.phone figcaption { font-size: 10px; padding-top: 14px; color: #73566b; text-align: center; line-height: 1.5; }

.faq-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 110px; padding-block: 85px 90px; }
.faq-heading h2 { margin-top: 18px; }
.privacy-copy { max-width: 300px; margin-top: 28px; }
.privacy-copy p { font-size: 12px; line-height: 1.9; color: var(--muted); }
.privacy-copy .text-link { margin-top: 18px; font-size: 11px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
summary { display: flex; gap: 28px; justify-content: space-between; align-items: center; padding-block: 22px; cursor: pointer; list-style: none; font-size: 14px; line-height: 1.5; }
summary::-webkit-details-marker { display: none; }
summary > span { font-size: 20px; font-weight: 400; }
details[open] summary > span { transform: rotate(45deg); }
.faq-answer { padding: 0 32px 23px 0; color: var(--muted); font-size: 13px; line-height: 1.85; }

.download-section { padding:38px 42px; background:#fff0c9; border-radius:25px; }
.download-layout { display: flex; justify-content: space-between; align-items: center; gap: 70px; }
.download-heading { display: flex; gap: 24px; align-items: center; min-width: 0; }
.download-heading > img { width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0; }
.download-heading .eyebrow { margin-bottom: 10px; }
.download-layout h2 { font-size: clamp(34px, 3vw, 44px); }
.download-actions { flex-shrink: 0; max-width: 285px; }
.download-actions > p { font-size: 10px; line-height: 1.7; color: var(--muted); margin-top: 15px; }
.site-footer { padding-block: 40px 24px; }
.footer-top { display: flex; align-items: center; gap: 36px; padding-bottom: 29px; }
.footer-top .brand { font-size: 24px; }
.footer-top .brand img { width: 29px; height: 29px; border-radius: 7px; }
.footer-top > p { font-size: 12px; color: var(--muted); max-width: 350px; line-height: 1.7; }
.footer-language { margin-inline-start: auto; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 21px; display: flex; align-items: center; gap: 25px; font-size: 10px; color: var(--muted); }
.footer-bottom nav { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 22px; }
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }
.to-top { margin-inline-start: 22px; font-size: 18px; }

.dialog-open { overflow: hidden; }
dialog { width: min(820px, calc(100% - 32px)); max-height: min(84vh, 820px); border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink); padding: 30px 35px; }
dialog::backdrop { background: #222b2275; }
.language-header { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.language-header h2 { font: 400 30px/1.2 var(--body); margin-top: 8px; letter-spacing: -.02em; }
.close-dialog { width: 36px; height: 36px; font-size: 30px; line-height: 1; }
.language-search { display: flex; gap: 12px; align-items: center; border: 1px solid #bfc4b9; padding: 10px 14px; margin-block: 23px; }
.language-search svg { width: 18px; height: 18px; }
.language-search input { width: 100%; background: none; border: 0; font-size: 16px; }
.language-search input:focus-visible { outline-offset: 3px; }
.language-options { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 17px; }
.language-option { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 10px; padding: 12px; border: 1px solid transparent; }
.language-option:hover, .language-option.current { background: #f7e3ed; border-color: #dec3d1; }
.language-option[hidden] { display: none; }
.language-option > span:first-child { grid-column: 1; font-size: 14px; line-height: 1.5; }
.language-option small { grid-column: 1; margin-top: 4px; color: var(--muted); font-size: 10px; }
.locale-code { grid-column: 2; grid-row: 1/3; font-size: 10px; color: var(--muted); direction: ltr; }

[dir=rtl] h1, [dir=rtl] h2 { font-family: var(--body); letter-spacing: 0; line-height: 1.3; }
[dir=rtl] h1 { font-size: clamp(52px, 5.5vw, 82px); }
[dir=rtl] h2 { font-size: clamp(34px, 3.5vw, 49px); }
[dir=rtl] .eyebrow { letter-spacing: 0; }
[dir=rtl] .faq-answer { padding: 0 0 23px 32px; }
:lang(zh) h1, :lang(ja) h1, :lang(ko) h1 { font-size: clamp(52px, 5.5vw, 80px); line-height: 1.25; letter-spacing: -.025em; }
:lang(zh) h2, :lang(ja) h2, :lang(ko) h2 { font-size: clamp(38px, 3.6vw, 51px); line-height: 1.35; letter-spacing: -.02em; }
:lang(ta) h1, :lang(ml) h1, :lang(kn) h1, :lang(te) h1, :lang(my) h1, :lang(km) h1 { font-family: var(--body); font-size: clamp(43px, 4.8vw, 68px); line-height: 1.35; letter-spacing: 0; }
:lang(ta) h2, :lang(ml) h2, :lang(kn) h2, :lang(te) h2, :lang(my) h2, :lang(km) h2 { font-family: var(--body); font-size: clamp(32px, 3.3vw, 46px); line-height: 1.4; letter-spacing: 0; }

@media (max-width: 1150px) {
  .section-shell { width: calc(100% - 72px); }
  .header-inner { width: calc(100% - 48px); gap: 20px; }
  .desktop-nav { gap: 20px; font-size: 11px; }
  .header-actions { gap: 20px; }
  .header-download { font-size: 11px; gap: 12px; }
  .hero { gap: 55px; min-height: 600px; padding-block: 55px; }
  .hero h1 { font-size: clamp(66px, 7.7vw, 90px); }
  .hero-description { font-size: 15px; }
  .hero-actions { gap: 22px; }
  .hero-art { gap: 0 12px; }
  .hero-portrait figcaption { font-size: 11px; gap: 8px; }
  .caption-index { font-size: 9px; }
  .colour-section, .stylist-section, .inside-layout, .faq-section { gap: 75px; }
  .feature-copy h2 { font-size: 48px; }
  .download-layout { gap: 40px; }
  .download-heading { gap: 18px; }
}
@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .hero { grid-template-columns: .9fr 1.1fr; gap: 35px; min-height: 560px; }
  .hero h1 { font-size: 68px; }
  .hero-actions .text-link { display: none; }
  .hero-art .release-note { font-size: 9px; }
  .hero-meta { margin-top: 25px; gap: 8px 15px; }
  .hero-meta span + span { padding-inline-start: 15px; }
  .section-intro { gap: 35px; }
  .section-intro > p { max-width: 230px; font-size: 13px; }
  .looks-grid { gap: 18px; }
  .colour-section, .stylist-section, .inside-layout, .faq-section { gap: 45px; }
  .inside-features { margin-top: 22px; }
  .phone-showcase { gap: 14px; }
  .download-actions { max-width: 250px; }
  .footer-top { flex-wrap: wrap; gap: 22px; }
  .footer-top > p { max-width: 300px; }
  .footer-bottom { flex-wrap: wrap; gap: 18px; }
  .footer-bottom nav { margin-inline-start: 0; }
  .to-top { margin-inline-start: auto; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 84px; }
  .section-shell { width: calc(100% - 40px); }
  .header-inner { width: calc(100% - 40px); min-height: 72px; }
  .brand { font-size: 25px; gap: 8px; }
  .brand img { width: 30px; height: 30px; border-radius: 7px; }
  .header-download { display: none; }
  .language-trigger { font-size: 10px; }
  .language-trigger svg { width: 15px; height: 15px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 35px 42px; min-height: 0; }
  .hero-copy h1 { margin-block: 18px 20px; font-size: clamp(64px, 16vw, 83px); line-height: 1; }
  .hero-description { max-width: 430px; font-size: 14px; line-height: 1.8; }
  .hero-actions { margin-top: 23px; gap: 23px; }
  .hero-actions .text-link { display: inline-flex; font-size: 11px; }
  .download-button { padding: 12px 16px; gap: 12px; }
  .download-button > span { font-size: 12px; }
  .download-button > svg:first-child { width: 20px; height: 22px; }
  .download-button > svg:last-child { width: 14px; height: 14px; margin-inline-start: 5px; }
  .hero-meta { margin-top: 24px; font-size: 9px; }
  .hero-art { gap: 0 12px; }
  .hero-portrait > img { aspect-ratio: 4/4.8; }
  .hero-portrait figcaption { font-size: 11px; padding-top: 10px; }
  .hero-art .release-note { margin-top: 17px; font-size: 9px; line-height: 1.7; }
  .eyebrow { font-size: 9px; }
  h2 { font-size: 40px; }
  .looks-section { padding-block: 47px 48px; }
  .section-intro { display: block; margin-bottom: 27px; }
  .section-intro h2 { margin-top: 15px; max-width: 410px; }
  .section-intro > p { margin-top: 19px; max-width: 100%; font-size: 13px; }
  .looks-grid { gap: 12px; }
  .look-photo > img { aspect-ratio: 3/4; }
  .look-tile figcaption { display: block; margin-top: 12px; }
  h3 { font-size: 12px; line-height: 1.5; }
  .look-tile .caption-index { display: block; margin-top: 5px; font-size: 9px; }
  .image-note { margin-top: 20px; font-size: 9px; }
  .colour-section { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 46px 49px; }
  .feature-copy .eyebrow { margin-bottom: 16px; }
  .feature-copy h2 { font-size: 40px; margin-bottom: 22px; max-width: 450px; }
  .feature-copy > p:not(.eyebrow) { max-width: 100%; font-size: 14px; line-height: 1.85; }
  .feature-copy .feature-note { font-size: 11px !important; margin-top: 14px; }
  .feature-copy .text-link { margin-top: 23px; font-size: 11px; }
  .colour-art { width: 100%; max-width: 410px; justify-self: center; }
  .colour-photo > img { aspect-ratio: 4/4.1; object-position: center 60%; }
  .colour-photo figcaption { padding-top: 13px; font-size: 11px; }
  .colour-swatches i { width: 13px; height: 13px; }
  .stylist-section { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 46px 49px; }
  .stylist-art { grid-row: 2; padding: 20px 20px 15px; max-width: 440px; width: 100%; justify-self: center; }
  .media-caption { padding-top: 15px; font-size: 9px; }
  .inside-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 48px; }
  .inside-copy h2 { margin-block: 15px 22px; font-size: 40px; max-width: 410px; }
  .inside-copy > p:not(.eyebrow) { font-size: 14px; max-width: 100%; }
  .inside-features { max-width: 100%; margin-top: 22px; }
  .inside-features > div { padding-block: 11px; }
  .inside-features p { font-size: 12px; }
  .phone-showcase { max-width: 430px; gap: 17px; justify-self: center; }
  .phone > img { border-radius: 12px; }
  .phone figcaption { font-size: 9px; padding-top: 12px; }
  .faq-section { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 48px 52px; }
  .faq-heading h2 { margin-top: 14px; font-size: 40px; }
  .privacy-copy { margin-top: 19px; max-width: 100%; }
  .privacy-copy p { font-size: 11px; line-height: 1.8; }
  .privacy-copy .text-link { margin-top: 12px; font-size: 10px; }
  summary { padding-block: 19px; font-size: 13px; gap: 20px; }
  .faq-answer { font-size: 12px; padding-bottom: 20px; padding-inline-end: 22px; }
  .download-section { padding-block: 31px; }
  .download-layout { display: block; }
  .download-heading { gap: 16px; align-items: start; }
  .download-heading > img { width: 39px; height: 39px; border-radius: 9px; }
  .download-layout h2 { font-size: 34px; max-width: 350px; }
  .download-heading .eyebrow { margin-bottom: 8px; font-size: 8px; }
  .download-actions { margin-top: 23px; margin-inline-start: 55px; max-width: 300px; }
  .download-actions > p { font-size: 9px; margin-top: 14px; }
  .site-footer { padding-block: 29px 20px; }
  .footer-top { display: grid; grid-template-columns: 1fr auto; gap: 17px 10px; padding-bottom: 24px; }
  .footer-top .brand { grid-column: 1; font-size: 23px; }
  .footer-top .brand img { width: 27px; height: 27px; }
  .footer-top > p { grid-column: 1/-1; grid-row: 2; max-width: 100%; font-size: 11px; }
  .footer-language { grid-column: 2; grid-row: 1; gap: 6px; font-size: 10px; }
  .footer-language svg { width: 14px; height: 14px; }
  .footer-bottom { gap: 15px; font-size: 9px; position: relative; padding-top: 19px; }
  .footer-bottom nav { width: 100%; order: -1; gap: 10px 17px; font-size: 10px; }
  .to-top { position: absolute; bottom: -4px; inset-inline-end: 0; }
  dialog { padding: 23px 20px; max-height: 88vh; }
  .language-header h2 { font-size: 25px; }
  .language-options { grid-template-columns: 1fr; }
  .language-option { padding: 11px; }
  .language-option small { font-size: 11px; }
  :lang(zh) .hero-copy h1, :lang(ja) .hero-copy h1, :lang(ko) .hero-copy h1 { font-size: clamp(45px, 11.5vw, 65px); line-height: 1.3; }
  [dir=rtl] .hero-copy h1 { font-size: 48px; line-height: 1.35; }
  :lang(ta) .hero-copy h1, :lang(ml) .hero-copy h1, :lang(kn) .hero-copy h1, :lang(te) .hero-copy h1, :lang(my) .hero-copy h1, :lang(km) .hero-copy h1 { font-size: 43px; line-height: 1.35; }
}
@media (max-width: 360px) {
  .section-shell, .header-inner { width: calc(100% - 32px); }
  .hero-copy h1 { font-size: 62px; }
  .hero-actions { gap: 18px; }
  .hero-description { font-size: 13px; }
  .hero-meta { gap: 7px 12px; }
  .hero-meta span + span { padding-inline-start: 12px; }
  .hero-portrait figcaption { font-size: 10px; gap: 5px; }
  .hero-portrait .caption-index { font-size: 8px; }
  h3 { font-size: 11px; }
  .download-actions { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .hero-actions, .download-section, .site-footer, dialog { display: none; }
  .section-shell { width: 100%; }
  .hero, .looks-section, .colour-section, .stylist-section, .inside-layout, .faq-section { padding-block: 25px; }
}
/* Small, tactile accents stay separate from the photographs and reading order. */
.look-heart { display:inline-block; }
.board-note { top:137px; }
.hero-sticker,.board-note,.look-sticker { overflow-wrap:anywhere; }
@media(max-width:1150px){
  .portrait-board{height:455px}
  .bob-portrait{width:min(61%,275px);inset-inline-end:20px;top:23px}
  .original-portrait{width:min(34%,164px);inset-inline-start:18px;bottom:24px}
  .hero-sticker{top:26px;inset-inline-start:21px;max-width:145px;font-size:18px;padding:12px 16px}
  .board-note{top:128px;inset-inline-start:22px;max-width:126px;font-size:18px}
  .board-arrow{inset-inline-start:104px;top:145px;width:90px;height:85px}
  .colour-section{padding:45px;gap:65px}
}
@media(max-width:900px){
  .portrait-board{height:405px}
  .hero-sticker{max-width:130px;font-size:17px;padding:11px 14px;inset-inline-start:15px;top:23px}
  .board-note{top:116px;inset-inline-start:19px;max-width:113px;font-size:17px}
  .board-arrow{inset-inline-start:76px;top:143px;width:74px;height:72px}
  .board-heart{width:37px;height:37px;inset-inline-end:9px;top:12px}
  .board-heart svg{width:25px;height:25px}
  .colour-section{padding:35px;gap:40px}
}
@media(max-width:700px){
  .hero{gap:31px;padding-block:35px 43px}
  .hero-art{max-width:440px;justify-self:center}
  .portrait-board{height:385px;border-radius:24px}
  .bob-portrait{width:61%;max-width:265px;top:20px;inset-inline-end:18px;padding:7px 7px 0;border-radius:11px}
  .bob-portrait>img{aspect-ratio:4/4.7;border-radius:6px}
  .original-portrait{width:35%;max-width:155px;bottom:25px;inset-inline-start:17px;padding:6px 6px 0;border-radius:7px}
  .original-portrait>img{aspect-ratio:4/4.8;border-radius:3px}
  .original-portrait figcaption{font-size:10px;padding:7px 3px;min-height:29px}
  .hero-portrait .caption-index{font-size:8px}
  .hero-sticker{top:24px;inset-inline-start:17px;max-width:131px;min-height:58px;padding:10px 14px;border-width:3px;font-size:18px}
  .board-note{top:117px;inset-inline-start:20px;max-width:116px;font-size:18px}
  .board-arrow{inset-inline-start:75px;top:140px;width:86px;height:82px}
  .board-spark{bottom:20px;inset-inline-end:22px;width:25px;height:25px}
  .board-heart{top:8px;inset-inline-end:8px;width:37px;height:37px}
  .hero-art .release-note{font-size:9px;margin-top:13px}
  .looks-grid{gap:12px;padding-bottom:0}
  .look-tile:nth-child(2){margin-top:24px}
  .look-tile:nth-child(3){margin-top:8px}
  .look-photo{padding:4px;border-radius:12px}
  .look-photo>img{aspect-ratio:3/4;border-radius:8px}
  .look-tile figcaption{margin-top:11px;padding-inline:1px}
  .look-tile .look-heart{width:16px;height:16px;margin-top:6px}
  .look-sticker{inset-inline-end:-6px;bottom:13px;max-width:98%;font-size:11px;padding:5px 7px;border-width:2px;border-radius:3px;line-height:1.3}
  .colour-section{padding:28px 24px 32px;border:0;border-radius:23px;gap:28px}
  .colour-photo>img{border-radius:13px}
  .stylist-art{border-radius:17px}
  .phone-collection{margin-top:20px;transform:rotate(2deg)}
  .download-section{padding:29px 25px;border:0;border-radius:22px}
  .download-actions{margin-inline-start:0}
}
@media(max-width:360px){
  .portrait-board{height:340px}
  .hero-sticker{max-width:112px;font-size:16px;padding:9px 10px}
  .board-note{font-size:16px;max-width:105px;top:106px}
  .board-arrow{width:68px;height:65px;inset-inline-start:64px;top:131px}
  .hero-portrait figcaption{font-size:10px;padding-inline:2px}
  .original-portrait figcaption{font-size:9px}
  .colour-section{padding:25px 20px 29px}
  .look-sticker{font-size:10px}
}
@media(max-width:700px){
  .bob-portrait{width:59%}
  .original-portrait{width:32%}
  .bob-portrait figcaption{justify-content:flex-end;padding-inline-start:27px;font-size:10px}
}
@media(max-width:360px){.bob-portrait figcaption{padding-inline-start:28px;font-size:9px}}
[dir=rtl] .board-arrow{transform:scaleX(-1)}
@media(max-width:700px){
  .bob-portrait figcaption{display:block;text-align:end;padding:8px 7px 8px 32px;min-height:43px}
  .bob-portrait figcaption>span{display:block;overflow-wrap:anywhere}
  .bob-portrait .caption-index{font-size:9px;margin-top:2px}
}
@media(max-width:700px){.board-spark{width:16px;height:16px;bottom:5px;inset-inline-end:18px}}
:lang(zh) .hero-copy h1,:lang(ja) .hero-copy h1,:lang(ko) .hero-copy h1{font-size:clamp(44px,5.1vw,74px);line-height:1.3;letter-spacing:-.025em}
@media(min-width:701px) and (max-width:900px){:lang(zh) .hero-copy h1,:lang(ja) .hero-copy h1,:lang(ko) .hero-copy h1{font-size:clamp(35px,4.5vw,44px)}}
@media(max-width:700px){
  :lang(zh) .hero-copy h1{font-size:clamp(42px,11.3vw,54px)}
  :lang(ja) .hero-copy h1,:lang(ko) .hero-copy h1{font-size:clamp(38px,10vw,45px)}
}