/* styletwin.app home, S1 "Four verbs" (design/home-steps). Kept out of the page because the site's CSP allows no inline
   CSS. Laid out in design units like the poster before it: --u is one pixel of the 1440 x 900 desktop board (or the
   390-wide phone board below 1000 px), so the words, the phone and the controls keep their places at any size. The
   phone uses the app's points: --a is one point of the 440 x 956 screen. The hero and the footer fill at least the
   window: in a window taller than the board the hero grows, the board sits in its middle and the header stays on top. */

/* Anton by Vernon Adams, SIL Open Font License 1.1. Latin subset, self-hosted because the CSP allows only this site. */
@font-face {
  font-family: Anton;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/home/anton-latin.woff2) format("woff2");
}

:root {
  --cw: 100vw; /* the page's width; 100cqw below where supported, so the scrollbar doesn't count */
  --u: min(calc(var(--cw) / 1440), calc(100vh / 900), 1.25px);
  --night: #1A1917;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --anton: Anton, Impact, "Arial Narrow", sans-serif;
  --lh: .86; /* the big words' line height; taller scripts set more below */
  --ease: cubic-bezier(.2, .9, .2, 1);
}

@supports (width: 1cqw) {
  body { container-type: inline-size; }
  :root { --cw: 100cqw; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); } /* the page's own ground: no white under the footer or in an overscroll */
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--night); color: #F4F1EA; font: 17px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- The hero: one ground per step, named by its recording (home-s1.js swaps the g- class): Try on chocolate, Snap
   olive (the default), Mix taupe, Plan pink, Wear burgundy ---- */
.hero { flex: 1 0 auto; display: flex; flex-direction: column; --ground: #545139; --ink: #F6EFE2; --cta-bg: #F6EFE2; --cta-fg: #1A1917; position: relative; overflow: hidden; background: var(--ground); color: var(--ink); transition: background-color .45s cubic-bezier(.4, 0, .2, 1), color .45s; }
.hero.g-tryon { --ground: #3D271D; --ink: #EFD9A6; --cta-bg: #EFD9A6; --cta-fg: #3D271D; }
.hero.g-mix { --ground: #73685A; }
.hero.g-plan { --ground: #E4A3AE; --ink: #5E2024; --cta-bg: #5E2024; --cta-fg: #F6EFE2; }
.hero.g-wear { --ground: #5E2024; --ink: #E4A3AE; --cta-bg: #E4A3AE; --cta-fg: #5E2024; }
.stage { position: relative; flex: none; width: calc(1440 * var(--u)); height: calc(900 * var(--u)); margin: auto; }

.top { position: absolute; left: 0; right: 0; top: 0; z-index: 10; width: calc(1440 * var(--u)); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: calc(28 * var(--u)) calc(56 * var(--u)); }
.brand { display: flex; align-items: center; gap: calc(10 * var(--u)); text-decoration: none; }
.brand img { width: max(26px, calc(32 * var(--u))); height: max(26px, calc(32 * var(--u))); border-radius: 22%; }
.brand span { font-size: max(18px, calc(21 * var(--u))); font-weight: 700; letter-spacing: -.02em; }
.top nav { display: flex; align-items: center; gap: max(18px, calc(26 * var(--u))); font-size: max(14px, calc(15 * var(--u))); font-weight: 500; }
.top nav .nl { text-decoration: none; padding: 10px 0; }
.top nav .nl:hover { text-decoration: underline; text-underline-offset: 4px; }
.getpill { display: inline-flex; align-items: center; gap: 7px; height: max(36px, calc(40 * var(--u))); padding: 0 max(14px, calc(16 * var(--u))) 0 max(12px, calc(13 * var(--u))); border-radius: 999px; background: var(--cta-bg); color: var(--cta-fg); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .45s, color .45s; }
.getpill svg { width: 15px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- The words. A step's word slides up into place; the last one slides on up and out. They are 188 design pixels
   tall, scaled down by --fit (home-s1.js) when a language's longest word would overrun its column, and the two rows
   end just above the caption whatever their size. ---- */
.bw, .pl { position: absolute; z-index: 1; font-family: var(--anton); font-weight: 400; font-synthesis: none; text-transform: uppercase; line-height: var(--lh); white-space: nowrap; pointer-events: none; }
.bw { --fs: calc(188 * var(--u) * var(--fit, 1)); top: calc(523 * var(--u) - 2 * var(--lh) * var(--fs)); font-size: var(--fs); }
.bw.left { left: 0; width: calc(500 * var(--u)); text-align: right; }
.bw.right { left: calc(940 * var(--u)); width: calc(470 * var(--u)); }
.slot { position: relative; display: block; height: calc(var(--lh) * 1em); }
.w { position: absolute; left: 0; right: 0; top: 0; transition: transform .5s var(--ease), opacity .3s ease; }
.w.now { transform: none; opacity: 1; transition-delay: 60ms; }
.w.gone { transform: translateY(-38%); opacity: 0; }
.w.next { transform: translateY(38%); opacity: 0; }
.o { color: transparent; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); }
.pl { display: none; }
/* What home-s1.js measures the words with: their font at 100 px, out of sight. */
.probe { position: absolute; left: 0; top: 0; visibility: hidden; font-size: 100px; font-synthesis: none; line-height: 1; text-transform: uppercase; white-space: nowrap; pointer-events: none; }

/* ---- The step's sentence: under the words on a desktop, in a white card on a phone ---- */
.caps { position: absolute; left: calc(120 * var(--u)); top: calc(556 * var(--u)); z-index: 5; width: calc(380 * var(--u)); height: calc(130 * var(--u)); text-align: right; }
.cap .k { display: block; font-size: max(11px, calc(13 * var(--u))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.cap p { margin: calc(8 * var(--u)) 0 0; font-size: max(15px, calc(19 * var(--u))); line-height: 1.42; font-weight: 500; }

/* ---- The phone: bezel, edge, side buttons; the recordings carry the app's own status bar. It is 464 x 980 points
   with the bezel, centred on the board, and ends clear of the hero's bottom edge. ---- */
.iph { --a: calc(.77 * var(--u)); position: absolute; left: calc(720 * var(--u) - 232 * var(--a)); top: calc(96 * var(--u)); z-index: 2; padding: calc(12 * var(--a)); border-radius: calc(74 * var(--a)); background: #0B0B0D; box-shadow: inset 0 0 0 calc(3 * var(--a)) #5B5A5F, inset 0 0 0 calc(4.5 * var(--a)) #2A2A2D, 0 calc(50 * var(--u)) calc(90 * var(--u)) calc(-40 * var(--u)) rgba(0, 0, 0, .6), 0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-20 * var(--u)) rgba(0, 0, 0, .35); }
.iph::before, .iph::after { content: ""; position: absolute; width: calc(4 * var(--a)); border-radius: 2px; background: #3E3D42; }
.iph::before { left: calc(-3 * var(--a)); top: calc(205 * var(--a)); height: calc(68 * var(--a)); box-shadow: 0 calc(90 * var(--a)) 0 #3E3D42; }
.iph::after { right: calc(-3 * var(--a)); top: calc(250 * var(--a)); height: calc(110 * var(--a)); }
.screen { position: relative; width: calc(440 * var(--a)); height: calc(956 * var(--a)); border-radius: calc(62 * var(--a)); overflow: hidden; background: #F2F2F4; transform: translateZ(0); }
.island { position: absolute; left: 50%; top: calc(11 * var(--a)); z-index: 20; width: calc(126 * var(--a)); height: calc(37 * var(--a)); margin-left: calc(-63 * var(--a)); border-radius: 99px; background: #000; }

/* Between steps the screen pushes like iOS navigation: the next recording slides in from the right while the last one
   eases left and dims; the others wait off to the right. */
.clip { position: absolute; inset: 0; overflow: hidden; background: #F2F2F4; transform: translateX(100%); }
.clip.now { transform: none; z-index: 3; transition: transform .55s var(--ease); }
.clip.gone { transform: translateX(-30%); z-index: 2; filter: brightness(.8); transition: transform .55s var(--ease), filter .55s; }
.clip.wait { z-index: 1; }
.clip video, .clip img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* The first frame covers the recording until it draws (home-s1.js marks the clip .live), so it never shows blank. */
.clip.live .first { visibility: hidden; }
.clip .still { display: none; }

/* ---- Apple's "Download on the App Store" badge (black, Apple's proportions), the QR for desktop visitors ---- */
.act { position: absolute; left: calc(56 * var(--u)); bottom: calc(44 * var(--u)); z-index: 9; display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); }
.asb { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); height: max(44px, calc(56 * var(--u))); padding: 0 max(15px, calc(20 * var(--u))) 0 max(12px, calc(15 * var(--u))); border-radius: max(10px, calc(13 * var(--u))); background: #000; color: #FFF; box-shadow: inset 0 0 0 1px #A6A6A6; text-decoration: none; white-space: nowrap; }
.asb svg { width: max(20px, calc(26 * var(--u))); height: max(24px, calc(31 * var(--u))); fill: #FFF; flex: none; margin-top: -3px; }
.asb span { display: flex; flex-direction: column; }
.asb small { font-size: max(9.5px, calc(12 * var(--u))); line-height: 1; letter-spacing: .01em; }
.asb b { font-size: max(19.5px, calc(25 * var(--u))); line-height: 1.02; font-weight: 600; letter-spacing: -.025em; }
.free { font-size: max(14px, calc(15 * var(--u))); font-weight: 500; }
/* App Store and Google Play side by side. The Play mark keeps its own four colours. */
.stores { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.asb.gpb svg { width: max(19px, calc(24 * var(--u))); height: max(20px, calc(25 * var(--u))); margin-top: 0; }
.qrrow { position: absolute; right: calc(56 * var(--u)); bottom: calc(112 * var(--u)); z-index: 9; display: flex; align-items: center; gap: calc(14 * var(--u)); text-align: right; }
.qr { width: max(72px, calc(84 * var(--u))); height: max(72px, calc(84 * var(--u))); padding: calc(7 * var(--u)); border-radius: calc(14 * var(--u)); background: #FFF; flex: none; }
.qr img { width: 100%; height: 100%; }
.qrrow p { margin: 0; font-size: max(13px, calc(14 * var(--u))); line-height: 1.35; font-weight: 600; }
.qrrow p span { display: block; font-weight: 400; opacity: .78; }

/* ---- The step tabs double as progress: the active bar fills over its recording, then the next step comes in ---- */
.tabs { position: absolute; right: calc(56 * var(--u)); bottom: calc(30 * var(--u)); z-index: 9; display: flex; align-items: flex-end; gap: calc(14 * var(--u)); }
.tab { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: max(58px, calc(88 * var(--u))); min-height: 44px; padding: 12px 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: max(10px, calc(12 * var(--u))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: left; cursor: pointer; }
/* Five steps (Try on first) need narrower tabs to stay clear of the phone. */
.hero.n5 .tabs { gap: calc(12 * var(--u)); }
.hero.n5 .tab { width: max(54px, calc(74 * var(--u))); }
.tab i { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, currentColor 28%, transparent); }
.tab b { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left; }
.tab.done b { transform: scaleX(1); }
.tab.on b { animation: fill 8.6s linear forwards; }
.hero.hold .tab.on b, .hero.paused .tab.on b, .hero.loading .tab.on b { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.pause { display: grid; place-items: center; width: 40px; height: 44px; margin-left: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.pause svg { width: 18px; height: 18px; fill: currentColor; }
.pause .play, .hero.paused .pause .stop { display: none; }
.hero.paused .pause .play { display: block; }
.asb:focus-visible, .getpill:focus-visible, .tab:focus-visible, .pause:focus-visible, .top a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- Footer: the More links over a hairline, then the facts line, the legal links and the language menu ---- */
footer { position: relative; z-index: 11; flex: none; padding: 0 clamp(16px, 4vw, 56px); font-size: 13px; line-height: 1.5; color: rgba(244, 241, 234, .62); }
footer a { text-decoration: none; }
footer a:hover { color: #F4F1EA; text-decoration: underline; text-underline-offset: 3px; }
.more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; padding: 10px 0; border-bottom: 1px solid rgba(244, 241, 234, .1); font-size: 15px; }
.more a { padding: 8px 0; color: rgba(244, 241, 234, .86); }
.base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; padding: 14px 0 max(18px, env(safe-area-inset-bottom)); }
.base p { flex-basis: 100%; margin: 0; }
.legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
.legal a, .legal span { padding: 6px 0; }
.lang { position: relative; }
.lang summary { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .2); color: rgba(244, 241, 234, .86); list-style: none; cursor: pointer; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: rgba(244, 241, 234, .08); color: #F4F1EA; }
.lang summary:focus-visible { outline: 2px solid #F4F1EA; outline-offset: 2px; }
.lang svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lang .chev { width: 11px; height: 11px; stroke-width: 1.8; transition: transform .2s; }
.lang[open] .chev { transform: rotate(180deg); }
.lang .langs { position: absolute; inset-inline-end: 0; bottom: calc(100% + 8px); display: grid; grid-template-columns: repeat(3, max-content); gap: 2px; padding: 8px; border-radius: 14px; background: #2A2824; box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .1), 0 24px 60px -16px rgba(0, 0, 0, .7); }
.lang .langs a { padding: 7px 12px; border-radius: 8px; color: rgba(244, 241, 234, .8); white-space: nowrap; }
.lang .langs a:hover { background: rgba(244, 241, 234, .08); color: #F4F1EA; text-decoration: none; }
.lang .langs a[aria-current] { color: #F4F1EA; font-weight: 600; }

/* ---- Other languages ---- */
/* Anton (Latin subset) draws the Western European languages. Other scripts get the system's boldest sans (Impact
   has no bold, and font-synthesis keeps it from a smeared fake one), sized by home-s1.js's fit; scripts with marks
   above or below the letters get taller lines. */
html:lang(pl) .bw, html:lang(tr) .bw, html:lang(vi) .bw, html:lang(ru) .bw, html:lang(uk) .bw,
html:lang(pl) .pl, html:lang(tr) .pl, html:lang(vi) .pl, html:lang(ru) .pl, html:lang(uk) .pl { font-family: Impact, "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-weight: 700; }
html:lang(ja) .bw, html:lang(ja) .pl { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-weight: 800; }
html:lang(ko) .bw, html:lang(ko) .pl { font-family: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-weight: 800; }
html:lang(zh-Hans) .bw, html:lang(zh-Hans) .pl { font-family: "PingFang SC", "Noto Sans SC", sans-serif; font-weight: 600; }
html:lang(zh-Hant) .bw, html:lang(zh-Hant) .pl { font-family: "PingFang TC", "Noto Sans TC", sans-serif; font-weight: 600; }
html:lang(ar) .bw, html:lang(ar) .pl { font-family: "SF Arabic", "Geeza Pro", "Noto Kufi Arabic", sans-serif; font-weight: 800; }
html:lang(hi) .bw, html:lang(hi) .pl { font-family: "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif; font-weight: 700; }
html:lang(th) .bw, html:lang(th) .pl { font-family: Thonburi, "Noto Sans Thai", sans-serif; font-weight: 700; }
html:lang(vi), html:lang(ja), html:lang(ko), html:lang(zh-Hans), html:lang(zh-Hant) { --lh: 1; }
html:lang(hi) { --lh: 1.1; }
html:lang(ar), html:lang(th) { --lh: 1.15; }

/* Right to left: the board mirrors. The first words stand right of the phone, the caption under them; the badge goes
   right, the QR and the tabs left, and a tab's bar fills from the right. Letter spacing would break Arabic joining. */
[dir="rtl"] .bw.left { left: calc(940 * var(--u)); width: calc(500 * var(--u)); text-align: left; }
[dir="rtl"] .bw.right { left: 0; width: calc(500 * var(--u)); text-align: right; }
[dir="rtl"] .caps { left: calc(940 * var(--u)); text-align: left; }
[dir="rtl"] .act { left: auto; right: calc(56 * var(--u)); align-items: flex-end; }
[dir="rtl"] .qrrow { left: calc(56 * var(--u)); right: auto; text-align: left; }
[dir="rtl"] .tabs { left: calc(56 * var(--u)); right: auto; }
[dir="rtl"] .tab, [dir="rtl"] .cap .k { letter-spacing: 0; text-align: right; }
[dir="rtl"] .tab b { transform-origin: right; }

/* ---- Phone and narrow windows: the 390-wide board. The page scrolls: the whole phone, then the step's card, the tabs
   and the badge under it. ---- */
@media (max-width: 999px) {
  :root { --u: min(calc(var(--cw) / 390), 1.4px); }
  .stage { width: calc(390 * var(--u)); height: calc(1082 * var(--u)); }
  .top { width: calc(390 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); }
  .top nav .nl { display: none; }
  .getpill { height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(12 * var(--u)); font-size: calc(14 * var(--u)); }

  .bw { display: none; }
  /* Two lines, 80 design pixels tall (scaled by --pfit), the second ending just above the phone. */
  .pl { --fs: calc(80 * var(--u) * var(--pfit, 1)); display: block; left: 0; right: 0; height: calc(var(--lh) * var(--fs)); font-size: var(--fs); text-align: center; }
  .pl1 { top: calc(216 * var(--u) - 2 * var(--lh) * var(--fs)); }
  .pl2 { top: calc(219 * var(--u) - var(--lh) * var(--fs)); z-index: 3; }
  .o { -webkit-text-stroke-width: calc(1.5 * var(--u)); }

  .iph { --a: calc(.6 * var(--u)); left: calc(195 * var(--u) - 232 * var(--a)); top: calc(228 * var(--u)); }

  .caps { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: auto; bottom: calc(150 * var(--u)); z-index: 8; width: auto; height: max(calc(92 * var(--u)), var(--caph, 0px)); border-radius: calc(22 * var(--u)); background: #FFF; color: #131317; text-align: left; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .45); }
  .cap { left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(12 * var(--u)); }
  .cap .k { font-size: max(10px, calc(11 * var(--u))); opacity: 1; color: rgba(19, 19, 23, .62); }
  .cap p { margin-top: calc(5 * var(--u)); font-size: max(13px, calc(15 * var(--u))); line-height: 1.38; }
  [dir="rtl"] .caps { left: calc(20 * var(--u)); text-align: right; }
  [dir="rtl"] .act { left: 0; right: 0; align-items: center; }
  [dir="rtl"] .tabs { left: calc(20 * var(--u)); right: calc(20 * var(--u)); }

  .tabs { left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(104 * var(--u)); gap: calc(10 * var(--u)); }
  .tab { flex: 1 1 0; width: auto; min-width: 0; min-height: 40px; padding: 8px 0; gap: 6px; font-size: max(10px, calc(11 * var(--u))); letter-spacing: .02em; white-space: nowrap; }
  .pause { flex: 0 0 auto; width: 40px; height: 40px; margin: 0; }
  /* Five tabs share the row: no tracking, so "1 Try on" fits its 50 px. */
  .hero.n5 .tabs { gap: calc(8 * var(--u)); }
  .hero.n5 .tab { letter-spacing: 0; }

  .act { left: 0; right: 0; bottom: calc(16 * var(--u)); align-items: center; gap: calc(8 * var(--u)); }
  .asb { height: calc(44 * var(--u)); gap: calc(7 * var(--u)); padding: 0 calc(15 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); }
  .asb svg { width: calc(20 * var(--u)); height: calc(24 * var(--u)); }
  .stores { justify-content: center; gap: calc(8 * var(--u)); }
  .asb.gpb svg { width: calc(19 * var(--u)); height: calc(20 * var(--u)); }
  .asb small { font-size: calc(9.5 * var(--u)); }
  .asb b { font-size: calc(19.5 * var(--u)); }
  .free { font-size: calc(14 * var(--u)); }
  .qrrow { display: none; }

  .more { gap: 0 16px; font-size: 14px; }
  .more a { padding: 6px 0; }
  .base { flex-direction: column; gap: 6px; text-align: center; }
  .legal { justify-content: center; }
  .lang .langs { inset-inline-end: auto; left: 50%; transform: translateX(-50%); grid-template-columns: repeat(2, max-content); }
}

/* Reduced motion: no slides or pushes, no autoplay; each step shows its telling frame, and steps change when picked. */
@media (prefers-reduced-motion: reduce) {
  .hero, .w, .clip, .getpill, .lang .chev { transition: none !important; }
  .tab.on b { animation: none; transform: scaleX(1); }
  .pause { display: none; }
  .clip video { display: none; }
  .clip .still { display: block; }
}