/* Rubik, the store app's own font (Open Font License), heavy for headings like the store. Hebrew and Latin halves. */
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/rubik-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/rubik-latin.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; }
/* Solefront's site, in the store's own colourful look (London Shoes' default "color" theme): cream paper, thick black
   edges, hard shadows like stickers, big blocks of red, blue, yellow, pink and green, and Rubik set heavy. Every page
   moves (asked for "100 times more animation"): shapes drift, words drop in, parts snap in as they scroll into view,
   cards lean towards the pointer, a ticker runs, a booking throws confetti. All of it is decoration on top of pages that
   work without it, and it stops when the device asks for less motion. Hebrew pages are right to left, so spacing uses
   logical properties (inline-start/end). Static tilts use `transform`; animations use the separate translate/rotate/scale
   properties, so the two never fight. */
:root {
  --ink: #111111; --ink-2: #2b2b2b; --ink-3: #555555; --paper: #fff8e7; --paper-2: #fdf0cf; --card: #ffffff;
  --red: #e2231a; --red-2: #c21a12; --blue: #1f4fff; --blue-2: #1739c9; --yellow: #ffd60a; --pink: #ff7ad1; --green: #2ee6a8;
  --orange: #ff8a3d; --violet: #7c5cff; --sky: #dfe7ff; --lemon: #fff3a8; --blush: #ffe0f1; --mint: #c9f7e6;
  --edge: 3px solid #111; --shadow: 5px 5px 0 #111; --shadow-lg: 8px 8px 0 #111;
  --radius: 22px; --radius-lg: 30px;
  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.2, .75, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --snap: cubic-bezier(.3, 1.9, .5, 1);
  --hero-bg: var(--yellow); --hero-ink: #111; --mark: var(--red); --mark-ink: #fff;
  --fwd: 1;
}
[dir='rtl'] { --fwd: -1; }
/* each page has its own colour, like the store's category tiles */
[data-page='platform'] { --hero-bg: var(--green); --mark: var(--blue); }
[data-page='how'] { --hero-bg: var(--pink); --mark: var(--yellow); --mark-ink: #111; }
[data-page='work'] { --hero-bg: var(--yellow); --mark: var(--red); }
[data-page='about'] { --hero-bg: var(--blue); --hero-ink: #fff; --mark: var(--yellow); --mark-ink: #111; }
[data-page='faq'] { --hero-bg: var(--pink); --mark: var(--blue); }
[data-page='book'] { --hero-bg: var(--yellow); --mark: var(--red); }
[data-page='contact'] { --hero-bg: var(--green); --mark: var(--red); }
:is([data-page='documents'], [data-page='terms'], [data-page='privacy'], [data-page='accessibility']) { --hero-bg: var(--lemon); --mark: var(--blue); }
[data-page='404'] { --hero-bg: var(--pink); --mark: var(--yellow); --mark-ink: #111; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.06rem/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font); font-weight: 900; line-height: 1.05; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 10px 16px; border: var(--edge); border-radius: 12px; background: var(--yellow); color: #111; font-weight: 800; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
::selection { background: var(--yellow); color: #111; }
[dir='rtl'] .flip { transform: scaleX(-1); }

/* the word or two in a heading that sits in a coloured box, like the store's "לכל" */
.grad-text { display: inline-block; padding: 0 .14em .08em; border: 4px solid #111; border-radius: 6px; background: var(--mark); color: var(--mark-ink); box-shadow: 6px 6px 0 #111; transform: rotate(-1.5deg); }

/* ---- the strip on top, and the scroll meter */
.announce { position: relative; z-index: 51; background: #111; color: var(--yellow); font-weight: 800; font-size: .92rem; text-align: center; padding: 9px var(--gutter); }
.announce a { color: #fff; text-underline-offset: 3px; }
.progress { position: fixed; inset-inline: 0; top: 0; z-index: 60; height: 5px; pointer-events: none; background: linear-gradient(90deg, var(--red), var(--yellow) 25%, var(--green) 50%, var(--blue) 75%, var(--pink)); transform-origin: var(--from, left); transform: scaleX(var(--p, 0)); }
[dir='rtl'] .progress { --from: right; }

/* ---- buttons */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: var(--edge); background: #fff; color: #111; font: 800 1.02rem/1 var(--font); text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 #111; transition: translate .18s var(--ease), box-shadow .18s var(--ease), background-color .18s; isolation: isolate; }
.btn svg { width: 20px; height: 20px; flex: none; transition: translate .25s var(--spring); }
.btn:hover { translate: -2px -2px; box-shadow: 6px 6px 0 #111; background: var(--yellow); }
.btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 #111; }
.btn:hover svg.flip, .btn:hover svg:last-child:not(:first-child) { translate: calc(4px * var(--fwd)) 0; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-2); }
.btn-primary::after { content: ''; position: absolute; inset: -2px auto -2px -60%; z-index: -1; width: 45%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent); transform: skewX(-20deg); animation: shine 4.5s var(--ease) 1.5s infinite; }
@keyframes shine { 0%, 70% { inset-inline-start: -60%; } 100% { inset-inline-start: 130%; } }
.btn-dark { background: #111; color: #fff; box-shadow: 4px 4px 0 var(--red); }
.btn-dark:hover { background: #111; box-shadow: 6px 6px 0 var(--red); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .96rem; box-shadow: 3px 3px 0 #111; }
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 1.12rem; }
.btn:disabled { opacity: .6; cursor: default; translate: none; box-shadow: 2px 2px 0 #111; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #111; text-decoration: none; padding: 2px 0; background: linear-gradient(var(--yellow), var(--yellow)) 0 100% / 100% 40% no-repeat; transition: background-size .25s var(--ease); }
.link:hover { background-size: 100% 100%; }
.link svg { width: 18px; height: 18px; transition: translate .25s var(--spring); }
.link:hover svg { translate: calc(4px * var(--fwd)) 0; }

/* ---- header */
.top { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: var(--edge); transition: box-shadow .3s; }
.top.scrolled { box-shadow: 0 5px 0 rgb(17 17 17 / .1); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #111; }
.brand-mark { width: 48px; height: 48px; flex: none; border: var(--edge); border-radius: 15px; box-shadow: 3px 3px 0 #111; overflow: hidden; background: #fff; transition: rotate .4s var(--snap); }
.brand-mark img { width: 100%; height: 100%; }
.brand:hover .brand-mark { rotate: -10deg; }
.brand-word { font-weight: 900; font-size: 1.55rem; letter-spacing: -.03em; line-height: 1; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) { padding: 8px 14px; border: 2.5px solid transparent; border-radius: 999px; color: #111; font-weight: 800; text-decoration: none; transition: border-color .15s, background-color .15s, rotate .3s var(--snap); }
.nav a:not(.btn):hover { border-color: #111; background: #fff; rotate: -3deg; }
.nav a[aria-current='page'] { background: var(--yellow); border-color: #111; box-shadow: 3px 3px 0 #111; }
.nav .btn { margin-inline-start: 8px; }
.burger { display: none; width: 50px; height: 50px; border: var(--edge); border-radius: 15px; background: var(--yellow); box-shadow: 3px 3px 0 #111; cursor: pointer; padding: 13px 12px; flex-direction: column; justify-content: space-between; }
.burger i { display: block; height: 3px; border-radius: 3px; background: #111; transition: transform .3s var(--spring), opacity .2s; }
.burger[aria-expanded='true'] i:nth-of-type(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded='true'] i:nth-of-type(2) { opacity: 0; }
.burger[aria-expanded='true'] i:nth-of-type(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; top: var(--menu-top, 76px); z-index: 49; padding: 18px var(--gutter) 32px; background: var(--paper); display: grid; align-content: start; gap: 22px; overflow-y: auto; }
.menu nav { display: grid; gap: 10px; }
.menu nav a { display: block; padding: 14px 18px; border: var(--edge); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 #111; font-size: 1.3rem; font-weight: 900; text-decoration: none; }
.menu nav a:nth-child(5n + 1) { background: var(--yellow); } .menu nav a:nth-child(5n + 2) { background: var(--green); } .menu nav a:nth-child(5n + 3) { background: var(--pink); }
.menu nav a:nth-child(5n + 4) { background: var(--sky); } .menu nav a:nth-child(5n + 5) { background: #fff; }
.menu nav a[aria-current='page'] { outline: 3px solid #111; outline-offset: 3px; }
@media (max-width: 1040px) { .nav { display: none; } .burger { display: flex; } }

/* ---- sections */
.section { position: relative; padding-block: clamp(64px, 9vw, 116px); }
.section-tint { background: var(--paper-2); border-block: var(--edge); }
.section-dark { background: #111; color: #fff; overflow: hidden; border-block: var(--edge); }
.section-dark .lead, .section-dark p { color: #f1f1f1; }
.section-dark .h2 { color: var(--yellow); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px; border: 2.5px solid #111; border-radius: 999px; background: #fff; color: #111; box-shadow: 3px 3px 0 #111; font-weight: 800; font-size: .92rem; transform: rotate(-2deg); transition: rotate .35s var(--snap); }
.eyebrow::before { content: ''; width: 11px; height: 11px; border: 2px solid #111; border-radius: 50%; background: var(--red); animation: blink 1.6s ease-in-out infinite; }
.eyebrow:hover { rotate: 4deg; }
@keyframes blink { 50% { background: var(--yellow); } }
.section-dark .eyebrow { background: var(--green); }
.head { display: grid; gap: 18px; justify-items: start; max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.head.center { text-align: center; justify-items: center; margin-inline: auto; }
.h2 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); letter-spacing: -.035em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.28rem); font-weight: 500; color: var(--ink-2); max-width: 680px; }

/* ---- the shapes that float around the heroes (they sit around the edges, never under the words) */
.fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; translate: 0 calc(var(--sy, 0) * .18px); }
.fx i { position: absolute; display: block; width: var(--s, 54px); aspect-ratio: 1; border: 3px solid #111; background: var(--c, var(--blue)); box-shadow: 4px 4px 0 #111; animation: drift var(--t, 9s) ease-in-out var(--dl, 0s) infinite; }
.fx i:nth-child(1) { --c: var(--blue); --s: 58px; border-radius: 12px; top: 10%; inset-inline-end: 4%; --t: 8s; }
.fx i:nth-child(2) { --c: var(--pink); --s: 44px; border-radius: 50%; top: 66%; inset-inline-end: 2%; --t: 10s; --dl: -3s; }
.fx i:nth-child(3) { --c: var(--red); --s: 72px; border: 0; box-shadow: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(4px 4px 0 #111); top: 6%; inset-inline-start: 40%; --t: 11s; --dl: -5s; }
.fx i:nth-child(4) { --c: #fff; --s: 40px; border-radius: 50%; border-width: 6px; background: transparent; box-shadow: 3px 3px 0 #111; bottom: 8%; inset-inline-start: 46%; --t: 7s; --dl: -2s; }
.fx i:nth-child(5) { --c: var(--green); --s: 34px; border-radius: 50%; top: 14%; inset-inline-start: 3%; --t: 9s; --dl: -6s; }
.fx i:nth-child(6) { --c: var(--yellow); --s: 64px; border: 0; box-shadow: none; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(3px 3px 0 #111); bottom: 10%; inset-inline-start: 4%; --t: 12s; --dl: -1s; }
.fx i:nth-child(7) { --c: var(--orange); width: 90px; aspect-ratio: auto; height: 26px; border-radius: 99px; top: 48%; inset-inline-start: 1%; --t: 10s; --dl: -4s; }
.fx i:nth-child(8) { --c: var(--violet); --s: 30px; border-radius: 8px; bottom: 6%; inset-inline-end: 30%; --t: 8s; --dl: -7s; }
@keyframes drift { 0%, 100% { translate: 0 0; rotate: 0deg; } 33% { translate: 14px -22px; rotate: 18deg; } 66% { translate: -10px 12px; rotate: -12deg; } }
.hero .fx i:nth-child(1) { top: 7%; inset-inline-end: 47%; }
.hero .fx i:nth-child(2) { top: auto; bottom: 7%; inset-inline-end: 52%; }
.hero .fx i:nth-child(3) { top: 3%; inset-inline-start: auto; inset-inline-end: 2%; }
.hero .fx i:nth-child(4) { bottom: 4%; inset-inline-start: 30%; }

/* ---- hero (home) */
.hero { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); border-bottom: var(--edge); padding-block: clamp(36px, 5vw, 64px) clamp(64px, 8vw, 100px); }
.hero > .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 5.1vw, 4.6rem); line-height: .98; letter-spacing: -.04em; margin-block: 22px 24px; }
.hero h1 .grad-text { margin-top: .12em; }
.hero .lead { margin-bottom: 30px; color: #111; font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; font-size: .95rem; font-weight: 700; }
.trust span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 14px; border: 2.5px solid #111; border-radius: 999px; background: #fff; color: #111; }
.trust svg { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--green); color: #111; stroke-width: 3; }

/* ---- phones */
.stage { position: relative; display: grid; place-items: center; min-height: 580px; }
.phone { position: relative; width: min(280px, 64vw); aspect-ratio: 9 / 19.5; border-radius: 44px; padding: 9px; background: #111; border: 3px solid #111; box-shadow: 10px 10px 0 var(--shadow-c, var(--blue)); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 35px; background: #fff; }
.phone::before { content: ''; position: absolute; top: 18px; left: 50%; width: 80px; height: 22px; margin-left: -40px; border-radius: 20px; background: #111; z-index: 1; }
.stage .phone:nth-child(1) { transform: rotate(-5deg) translateX(26%); z-index: 1; --shadow-c: #111; }
.stage .phone:nth-child(2) { position: absolute; transform: rotate(6deg) translate(-58%, 34px) scale(.9); --shadow-c: var(--red); }
[dir='rtl'] .stage .phone:nth-child(1) { transform: rotate(5deg) translateX(-26%); }
[dir='rtl'] .stage .phone:nth-child(2) { transform: rotate(-6deg) translate(58%, 34px) scale(.9); }
.float { animation: bob 6s ease-in-out infinite; }
.float.later { animation-delay: -3s; }
@keyframes bob { 50% { translate: 0 -14px; } }
.chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border: var(--edge); border-radius: 16px; background: #fff; color: #111; box-shadow: 4px 4px 0 #111; font-weight: 800; font-size: .92rem; white-space: nowrap; }
.chip i { width: 34px; height: 34px; border: 2.5px solid #111; border-radius: 11px; display: grid; place-items: center; flex: none; }
.chip svg { width: 18px; height: 18px; stroke-width: 2.4; }
.chip.c1 { top: 8%; inset-inline-start: -2%; transform: rotate(-3deg); } .chip.c1 i { background: var(--green); }
.chip.c2 { bottom: 17%; inset-inline-end: -4%; transform: rotate(2deg); } .chip.c2 i { background: var(--pink); }
.chip.c3 { bottom: 2%; inset-inline-start: 8%; transform: rotate(-2deg); } .chip.c3 i { background: var(--yellow); }
.sticker { position: absolute; z-index: 4; top: -5%; inset-inline-end: -4%; display: grid; place-content: center; text-align: center; width: 132px; aspect-ratio: 1; border: 4px solid #111; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 6px 6px 0 #111; font-weight: 900; font-size: 1.55rem; line-height: 1; transform: rotate(-12deg); }
.sticker small { display: block; margin-top: 4px; font-size: .82rem; font-weight: 800; }
.hero-note { position: absolute; bottom: -40px; inset-inline: 0; text-align: center; font-size: .82rem; font-weight: 600; color: #111; }

/* ---- the running ticker */
.marquee { position: relative; z-index: 2; overflow: hidden; background: var(--blue); color: var(--yellow); border-block: var(--edge); padding-block: 14px; font-weight: 900; font-size: clamp(1.15rem, 2.4vw, 1.6rem); white-space: nowrap; }
.marquee.alt { background: var(--pink); color: #111; }
.mq { display: flex; width: max-content; animation: mq 32s linear infinite; }
.marquee.alt .mq { animation-direction: reverse; animation-duration: 38s; }
.mq span { display: inline-flex; align-items: center; gap: .6em; padding-inline-end: .6em; }
.mq span::after { content: '✦'; color: #fff; }
.marquee.alt .mq span::after { color: var(--blue); }
@keyframes mq { to { translate: -50% 0; } }
[dir='rtl'] .mq { animation-name: mq-rtl; }
@keyframes mq-rtl { to { translate: 50% 0; } }
.marquee:hover .mq { animation-play-state: paused; }

/* ---- cards: coloured tiles, like the store's categories */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.card { --tile: var(--red); --tx: #fff; position: relative; padding: 28px; border: var(--edge); border-radius: var(--radius-lg); background: var(--tile); color: var(--tx); box-shadow: 7px 7px 0 #111; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: translate .25s var(--ease), box-shadow .25s var(--ease), transform .2s ease-out; }
.card:nth-child(6n + 1) { --tile: var(--red); --tx: #fff; } .card:nth-child(6n + 2) { --tile: var(--blue); --tx: #fff; } .card:nth-child(6n + 3) { --tile: var(--green); --tx: #111; }
.card:nth-child(6n + 4) { --tile: var(--pink); --tx: #111; } .card:nth-child(6n + 5) { --tile: var(--yellow); --tx: #111; } .card:nth-child(6n + 6) { --tile: var(--orange); --tx: #111; }
.card:hover { translate: -3px -3px; box-shadow: 11px 11px 0 #111; }
.card h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); margin-block: 20px 10px; }
.card p { color: inherit; font-weight: 500; }
.card .link { color: inherit; background-image: linear-gradient(rgb(255 255 255 / .35), rgb(255 255 255 / .35)); }
.ic { width: 58px; height: 58px; border: var(--edge); border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; box-shadow: 3px 3px 0 #111; transform: rotate(-6deg); transition: rotate .4s var(--snap), scale .4s var(--snap); }
.ic svg { width: 27px; height: 27px; stroke-width: 2.3; }
.card:hover .ic, .docs a:hover .ic { rotate: 18deg; scale: 1.12; }
.card.big { padding: clamp(28px, 4vw, 44px); }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.ticks li::before { content: ''; flex: none; width: 26px; height: 26px; margin-top: 1px; border: 2.5px solid #111; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat; }
.card .ticks li::before { background-color: #fff; }

/* ---- feature rows (text beside a picture) */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.row + .row { margin-top: clamp(72px, 10vw, 130px); }
.row.swap > :first-child { order: 2; }
.row .h2 { margin-block: 18px 16px; }
.shot { --bg: var(--yellow); position: relative; overflow: hidden; display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); border: var(--edge); border-radius: var(--radius-lg); background: radial-gradient(rgb(17 17 17 / .16) 1.6px, transparent 1.8px) 0 0 / 22px 22px, var(--bg); box-shadow: 8px 8px 0 #111; }
.shot.orange { --bg: var(--yellow); } .shot.violet { --bg: var(--pink); } .shot.teal { --bg: var(--green); }
.shot .phone { width: min(260px, 60vw); --shadow-c: #111; transition: rotate .5s var(--snap); }
.shot:hover .phone { rotate: -3deg; }
.shot .wide { border: var(--edge); border-radius: 16px; box-shadow: 7px 7px 0 #111; background: #fff; }
figure.shot, figure.look { margin: 0; }
.caption { margin-top: 18px; font-size: .88rem; font-weight: 600; color: var(--ink-3); text-align: center; }
.section-dark .caption { color: #cfcfcf; }

/* ---- steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { position: relative; padding: 28px; border: var(--edge); border-radius: var(--radius-lg); background: #fff; box-shadow: 6px 6px 0 #111; transition: translate .25s var(--ease), box-shadow .25s var(--ease), rotate .4s var(--snap); }
.step:nth-child(odd) { transform: rotate(-1.2deg); } .step:nth-child(even) { transform: rotate(1.2deg); }
.step:hover { translate: -3px -3px; box-shadow: 9px 9px 0 #111; rotate: 1.5deg; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 62px; height: 62px; border: var(--edge); border-radius: 50%; background: var(--n, var(--yellow)); color: #111; box-shadow: 3px 3px 0 #111; font: 900 1.8rem/1 var(--font); margin-bottom: 18px; transition: rotate .5s var(--snap); }
.step:nth-child(4n + 2)::before { --n: var(--pink); } .step:nth-child(4n + 3)::before { --n: var(--green); } .step:nth-child(4n + 4)::before { --n: var(--sky); }
.step:hover::before { rotate: 360deg; }
.step h3 { font-size: 1.35rem; margin-bottom: 8px; }
.step p { color: var(--ink-2); font-weight: 500; }

/* ---- the "we do it all" band */
.done { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.done-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.done-list div { --b: var(--green); display: flex; gap: 12px; align-items: center; padding: 15px 18px; border: var(--edge); border-radius: 18px; background: var(--b); color: #111; box-shadow: 4px 4px 0 #fff; font-weight: 800; transition: translate .2s var(--ease), box-shadow .2s var(--ease), rotate .35s var(--snap); }
.done-list div:nth-child(6n + 2) { --b: var(--pink); } .done-list div:nth-child(6n + 3) { --b: var(--yellow); } .done-list div:nth-child(6n + 4) { --b: var(--sky); }
.done-list div:nth-child(6n + 5) { --b: var(--orange); } .done-list div:nth-child(6n + 6) { --b: #fff; }
.done-list div:hover { translate: -2px -2px; box-shadow: 7px 7px 0 #fff; rotate: -2deg; }
.done-list svg { width: 26px; height: 26px; flex: none; padding: 4px; border: 2.5px solid #111; border-radius: 50%; background: #fff; stroke-width: 2.4; }
.glow { position: absolute; inset: 0; pointer-events: none; }
.glow::before, .glow::after { content: ''; position: absolute; border: 3px solid #fff; }
.glow::before { width: 120px; height: 120px; border-radius: 50%; background: var(--red); inset-inline-end: -30px; top: -30px; animation: drift 10s ease-in-out infinite; }
.glow::after { width: 70px; height: 70px; border-radius: 14px; background: var(--blue); inset-inline-start: 3%; bottom: 8%; animation: drift 8s ease-in-out -3s infinite; }

/* ---- the store we built */
.case { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 56px); border: var(--edge); border-radius: var(--radius-lg); background: var(--pink); box-shadow: 10px 10px 0 #111; overflow: hidden; }
.case .h2 { margin-block: 18px 14px; }
.case .lead { color: #111; }
.case .cta-row { margin-top: 26px; }
.case-shots { position: relative; display: grid; place-items: center; min-height: 450px; }
.case-shots .phone { width: min(230px, 54vw); --shadow-c: var(--yellow); }
.case-shots .phone:nth-child(2) { position: absolute; inset-inline-start: 0; bottom: 0; transform: scale(.78) rotate(-5deg); --shadow-c: var(--blue); }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px; border: 2.5px solid #111; border-radius: 999px; background: #fff; color: #111; box-shadow: 3px 3px 0 #111; font-size: .92rem; font-weight: 800; transform: rotate(-2deg); }
.pill .dot { position: relative; width: 11px; height: 11px; border: 2px solid #111; border-radius: 50%; background: var(--green); }
.pill .dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--green); animation: ring 1.8s var(--ease) infinite; }
@keyframes ring { from { scale: 1; opacity: .9; } to { scale: 2.8; opacity: 0; } }

/* ---- looks strip */
.looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.look { --c: var(--red); overflow: hidden; border: var(--edge); border-radius: 22px; background: #fff; box-shadow: 7px 7px 0 var(--c); transition: translate .25s var(--ease), rotate .4s var(--snap), box-shadow .25s; }
.look:nth-child(4n + 2) { --c: var(--blue); } .look:nth-child(4n + 3) { --c: var(--green); } .look:nth-child(4n + 4) { --c: var(--pink); }
.look:nth-child(odd):hover { rotate: -2.5deg; } .look:nth-child(even):hover { rotate: 2.5deg; }
.look:hover { translate: 0 -6px; box-shadow: 10px 12px 0 var(--c); }
.look img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; width: 100%; border-bottom: var(--edge); transition: scale .6s var(--ease); }
.look:hover img { scale: 1.04; }
.look span { display: block; padding: 12px 16px; font-weight: 900; font-size: 1.05rem; }

/* ---- page hero (inner pages) */
.page-hero { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); border-bottom: var(--edge); padding-block: clamp(52px, 7vw, 96px) clamp(44px, 6vw, 76px); }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.04em; margin-block: 22px 20px; max-width: 920px; }
.page-hero .lead { max-width: 720px; color: inherit; font-weight: 600; }
.page-hero .link { color: #111; }
[data-page='about'] .page-hero .lead { color: #fff; }

/* ---- FAQ */
.faq { display: grid; gap: 14px; max-width: 880px; }
.faq details { border: var(--edge); border-radius: 20px; background: #fff; box-shadow: 4px 4px 0 #111; transition: box-shadow .25s var(--ease), translate .25s var(--ease); }
.faq details:hover { translate: -2px -2px; box-shadow: 6px 6px 0 #111; }
.faq details[open] { box-shadow: 7px 7px 0 var(--blue); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; font-weight: 800; font-size: 1.12rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 38px; height: 38px; border: 2.5px solid #111; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); box-shadow: 2px 2px 0 #111; font: 900 1.4rem/1 var(--font); transition: rotate .4s var(--snap), background-color .2s; }
.faq details[open] summary::after { rotate: 135deg; background: var(--pink); }
.faq .a { padding: 0 24px 22px; color: var(--ink-2); font-weight: 500; }
.faq details[open] .a { animation: open .45s var(--ease); }
@keyframes open { from { opacity: 0; translate: 0 -8px; } }
.faq .a p + p { margin-top: 10px; }

/* ---- forms */
.book { display: grid; grid-template-columns: 1.35fr .65fr; gap: 30px; align-items: start; }
.form { display: grid; gap: 28px; padding: clamp(22px, 4vw, 40px); border: var(--edge); border-radius: var(--radius-lg); background: #fff; box-shadow: 9px 9px 0 #111; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.form legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 6px; font: 900 1.3rem/1.3 var(--font); }
.form legend .num { display: grid; place-items: center; width: 38px; height: 38px; border: 2.5px solid #111; border-radius: 50%; background: var(--yellow); box-shadow: 2px 2px 0 #111; font-size: 1.1rem; flex: none; }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.choice label { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: grid; gap: 4px; height: 100%; padding: 16px; border: var(--edge); border-radius: 18px; background: #fff; font-weight: 800; transition: background-color .15s, box-shadow .2s var(--ease), translate .2s var(--ease); }
.choice span svg { width: 28px; height: 28px; margin-bottom: 4px; stroke-width: 2.3; }
.choice small { font-weight: 500; color: var(--ink-3); font-size: .88rem; }
.choice label:hover span { background: var(--lemon); }
.choice input:checked + span { background: var(--yellow); box-shadow: 5px 5px 0 #111; translate: -2px -2px; }
.choice input:checked + span svg { animation: wig .5s var(--snap); }
.choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
@keyframes wig { 30% { rotate: -14deg; scale: 1.2; } 60% { rotate: 10deg; } }
.days, .times { display: flex; gap: 10px; overflow-x: auto; padding: 2px 6px 10px 2px; scrollbar-width: thin; }
.times { flex-wrap: wrap; overflow: visible; }
.days button, .times button { flex: none; border: 2.5px solid #111; background: #fff; border-radius: 16px; cursor: pointer; font: 800 1rem/1.2 var(--font); color: #111; transition: background-color .15s, translate .2s var(--ease), box-shadow .2s var(--ease); }
.days button { display: grid; gap: 2px; min-width: 80px; padding: 10px 12px; text-align: center; }
.days button small { font-weight: 500; color: var(--ink-3); font-size: .84rem; }
.times button { min-width: 84px; padding: 11px 14px; font-variant-numeric: tabular-nums; animation: pop-in .35s var(--snap) backwards; animation-delay: calc(var(--k, 0) * 25ms); }
.days button:hover, .times button:hover { background: var(--lemon); }
.days button[aria-checked='true'], .times button[aria-checked='true'] { background: #111; color: var(--yellow); box-shadow: 3px 3px 0 var(--red); translate: -1px -1px; }
.days button[aria-checked='true'] small { color: #fff; }
@keyframes pop-in { from { opacity: 0; scale: .6; } }
.hint { color: var(--ink-3); font-size: .94rem; font-weight: 500; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; font-weight: 800; font-size: .96rem; }
.field.wide { grid-column: 1 / -1; }
.field em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 2.5px solid #111; border-radius: 14px; background: #fff; font: 500 1rem/1.4 var(--font); color: #111; transition: box-shadow .2s var(--ease), background-color .2s; }
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fffdf3; box-shadow: 4px 4px 0 var(--blue); }
.field [aria-invalid='true'] { border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }
.consent { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: .96rem; font-weight: 500; }
.consent input { width: 24px; height: 24px; margin-top: 1px; accent-color: #111; flex: none; }
.form-err { padding: 12px 16px; border: var(--edge); border-radius: 14px; background: var(--red); color: #fff; font-weight: 800; animation: shake .45s var(--ease); }
@keyframes shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
.side { display: grid; gap: 20px; position: sticky; top: 100px; }
.side .card { padding: 24px; }
.side h2 { font-size: 1.35rem; margin-block: 16px 6px; }
.side p + p { margin-top: 10px; }
.done-card { text-align: center; justify-items: center; }
.book [data-done] { grid-column: 1 / -1; max-width: 680px; margin-inline: auto; width: 100%; }
.done-card .big-ic { width: 88px; height: 88px; border: 4px solid #111; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #111; box-shadow: 5px 5px 0 #111; margin-inline: auto; animation: stamp .7s var(--snap); }
.done-card .big-ic svg { width: 44px; height: 44px; stroke-width: 3; }
.done-card h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-block: 20px 8px; }
.done-card .when { display: inline-block; margin-block: 8px 16px; padding: 6px 16px; border: 2.5px solid #111; border-radius: 12px; background: var(--yellow); font-size: 1.15rem; font-weight: 900; transform: rotate(-1.5deg); }
@keyframes stamp { from { scale: 2.4; rotate: -40deg; opacity: 0; } 60% { scale: .9; } }
.skeleton { height: 58px; border: 2.5px solid #111; border-radius: 16px; background: repeating-linear-gradient(-45deg, #fff 0 14px, var(--lemon) 14px 28px); background-size: 40px 40px; animation: stripes .8s linear infinite; }
@keyframes stripes { to { background-position: 40px 0; } }

/* ---- documents */
.doc { max-width: 820px; }
.doc h2 { font-size: 1.6rem; margin-block: 40px 12px; }
.doc p, .doc li { color: var(--ink-2); font-weight: 500; }
.doc p + p { margin-top: 12px; }
.doc ul { padding-inline-start: 22px; display: grid; gap: 6px; }
.updated { display: inline-block; padding: 4px 12px; border: 2px solid #111; border-radius: 99px; background: #fff; color: #111; font-size: .92rem; font-weight: 700; }
.docs { display: grid; gap: 14px; max-width: 880px; }
.docs a { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border: var(--edge); border-radius: 22px; background: #fff; box-shadow: 5px 5px 0 #111; text-decoration: none; transition: translate .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.docs a:hover { translate: -3px -3px; box-shadow: 8px 8px 0 #111; background: var(--lemon); }
.docs a:nth-child(3n + 1) .ic { background: var(--pink); } .docs a:nth-child(3n + 2) .ic { background: var(--green); } .docs a:nth-child(3n + 3) .ic { background: var(--sky); }
.docs strong { display: block; font-size: 1.12rem; font-weight: 900; }
.docs span span { color: var(--ink-3); font-size: .96rem; font-weight: 500; }
.docs .go { margin-inline-start: auto; width: 24px; height: 24px; flex: none; stroke-width: 2.6; transition: translate .25s var(--spring); }
.docs a:hover .go { translate: calc(5px * var(--fwd)) 0; }
.docs .soon { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border: 3px dashed #111; border-radius: 22px; background: var(--paper-2); }
.docs .soon .ic { background: var(--yellow); }

/* ---- footer */
.foot { position: relative; overflow: hidden; background: var(--blue-2); color: #e7ecff; padding-block: 56px 28px; border-top: var(--edge); }
.foot-cta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: clamp(28px, 5vw, 48px); border: 4px solid #111; border-radius: var(--radius-lg); background: var(--red); color: #fff; box-shadow: 10px 10px 0 #111; }
.foot-cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.foot-cta p { color: #fff; margin-top: 8px; font-weight: 600; }
.foot-cta .btn { background: var(--yellow); color: #111; animation: nudge 3.2s var(--ease) 2s infinite; }
.foot-cta .btn::after { display: none; }
@keyframes nudge { 0%, 82%, 100% { rotate: 0deg; } 86% { rotate: -5deg; } 90% { rotate: 5deg; } 94% { rotate: -3deg; } }
.foot-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-block: 56px 40px; }
.foot .brand { color: #fff; }
.foot-brand p { margin-top: 16px; max-width: 360px; color: #e7ecff; font-weight: 500; }
.foot h2 { font-size: 1.1rem; color: var(--yellow); margin-bottom: 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot a { color: #e7ecff; text-decoration: none; font-weight: 600; }
.foot ul a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.foot-end { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 2px solid rgb(255 255 255 / .25); color: #cdd6ff; font-size: .94rem; font-weight: 500; }
.foot-fx { position: absolute; inset: 0; pointer-events: none; }
.foot-fx i { position: absolute; display: block; border: 3px solid #111; box-shadow: 4px 4px 0 #111; animation: drift 11s ease-in-out infinite; }
.foot-fx i:nth-child(1) { width: 60px; height: 60px; border-radius: 50%; background: var(--yellow); inset-inline-end: 3%; bottom: 18%; }
.foot-fx i:nth-child(2) { width: 40px; height: 40px; border-radius: 10px; background: var(--pink); inset-inline-start: 42%; bottom: 8%; animation-delay: -4s; }
.foot-fx i:nth-child(3) { width: 32px; height: 32px; border-radius: 50%; background: var(--green); inset-inline-start: 2%; top: 40%; animation-delay: -7s; }

/* ---- confetti (after a booking or a message) */
.confetti { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; left: var(--x); width: var(--w, 12px); height: var(--h, 18px); border: 2px solid #111; border-radius: var(--r, 3px); background: var(--c); animation: fall var(--t, 2.4s) cubic-bezier(.25, .6, .4, 1) var(--dl, 0s) forwards; }
@keyframes fall { to { translate: var(--dx, 0) 110vh; rotate: var(--rot, 540deg); } }

/* ---- motion: parts snap in like stickers as they come into view. Hidden from the first paint when scripts run (no
   flash); if the script never arrives, everything shows by itself after 3.5 s. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-rv]:not(.in) { opacity: 0; }
  html:not(.rv-ready) [data-rv]:not(.in) { animation: rv-show 0s 3.5s forwards; }
  [data-rv].in { animation: rv var(--rv-t, .8s) var(--snap) backwards; animation-delay: var(--d, 0s); }
  .card[data-rv].in, .step[data-rv].in, .look[data-rv].in, .done-list [data-rv].in { --rv-t: .7s; animation-name: rv-pop; }
  .faq [data-rv].in, .docs [data-rv].in { animation-name: rv-side; }
  .shot[data-rv].in, .case[data-rv].in, .form.in { animation-name: rv-tilt; }
}
@keyframes rv-show { to { opacity: 1; } }
@keyframes rv { from { opacity: 0; translate: 0 44px; scale: .94; } }
@keyframes rv-pop { from { opacity: 0; scale: .55; rotate: -8deg; translate: 0 30px; } }
@keyframes rv-side { from { opacity: 0; translate: calc(-50px * var(--fwd)) 0; } }
@keyframes rv-tilt { from { opacity: 0; translate: 0 60px; rotate: 3deg; scale: .92; } }
@media (prefers-reduced-motion: no-preference) {
  /* the hero plays in, word by word (site.js wraps the words) */
  :is(.hero, .page-hero) h1 .w { display: inline-block; animation: word .8s var(--snap) backwards; animation-delay: calc(.1s + var(--wi, 0) * .07s); }
  :is(.hero, .page-hero) h1 .grad-text.w { animation-name: word-box; }
  .stage .sticker { animation: sticker-in 1s var(--snap) 1s backwards, spin-float 7s ease-in-out 2s infinite; }
  .stage .chip { animation: chip-in .7s var(--snap) backwards, bob 5s ease-in-out infinite; }
  .stage .chip.c1 { animation-delay: 1.2s, 2s; } .stage .chip.c2 { animation-delay: 1.4s, 3s; } .stage .chip.c3 { animation-delay: 1.6s, 4s; }
  .stage .phone:nth-child(1) { animation: phone-in 1s var(--spring) .35s backwards, bob 6s ease-in-out 1.4s infinite; }
  .stage .phone:nth-child(2) { animation: phone-in 1s var(--spring) .55s backwards, bob 6s ease-in-out -1.6s infinite; }
  .fx { animation: fx-in 1.2s var(--snap) .2s backwards; }
}
@keyframes word { from { opacity: 0; translate: 0 .6em; rotate: 5deg; scale: .85; } }
@keyframes word-box { from { opacity: 0; scale: 0; rotate: -25deg; } 70% { scale: 1.08; } }
@keyframes sticker-in { from { opacity: 0; scale: 0; rotate: -200deg; } }
@keyframes spin-float { 50% { translate: 0 -12px; rotate: 10deg; } }
@keyframes chip-in { from { opacity: 0; scale: .3; translate: 0 30px; } }
@keyframes phone-in { from { opacity: 0; translate: 0 120px; } }
@keyframes fx-in { from { opacity: 0; scale: .6; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-rv] { opacity: 1 !important; }
  .fx, .foot-fx, .glow { display: none; }
  .card { transform: none !important; }
}

/* ---- narrow screens */
@media (max-width: 980px) {
  .hero-grid, .row, .done, .case, .book { grid-template-columns: 1fr; }
  .row.swap > :first-child { order: 0; }
  .g3, .g4, .steps, .looks { grid-template-columns: repeat(2, 1fr); }
  .stage { min-height: 540px; }
  .side { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  /* phones and tablets: the words fill the width, so only two small shapes stay, up in the top corner, clear of the text */
  :is(.hero, .page-hero) .fx i { display: none; }
  :is(.hero, .page-hero) .fx i:nth-child(1), :is(.hero, .page-hero) .fx i:nth-child(5) { display: block; --s: 26px; top: 14px; bottom: auto; inset-inline-start: auto; box-shadow: 3px 3px 0 #111; }
  :is(.hero, .page-hero) .fx i:nth-child(1) { inset-inline-end: 16px; }
  :is(.hero, .page-hero) .fx i:nth-child(5) { inset-inline-end: 54px; top: 22px; --c: var(--pink); }
}
@media (max-width: 620px) {
  .g2, .g3, .g4, .steps, .done-list, .fields, .choice { grid-template-columns: 1fr; }
  .looks { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .look span { padding: 10px 12px; font-size: .95rem; }
  .stage { min-height: 490px; }
  .stage .phone:nth-child(1) { transform: rotate(-5deg) translateX(14%); }
  [dir='rtl'] .stage .phone:nth-child(1) { transform: rotate(5deg) translateX(-14%); }
  .stage .phone:nth-child(2) { transform: rotate(6deg) translate(-44%, 40px) scale(.8); }
  [dir='rtl'] .stage .phone:nth-child(2) { transform: rotate(-6deg) translate(44%, 40px) scale(.8); }
  .chip { font-size: .82rem; padding: 7px 10px 7px 8px; }
  .chip i { width: 28px; height: 28px; }
  .chip.c1 { inset-inline-start: 0; } .chip.c2 { inset-inline-end: 0; }
  .sticker { width: 100px; font-size: 1.2rem; top: -4%; inset-inline-end: 0; }
  .sticker small { font-size: .7rem; }
  .case-shots { min-height: 400px; }
  .btn-lg { width: 100%; }
  .cta-row .btn { flex: 1 1 auto; }
  .brand-word { font-size: 1.35rem; }
  .brand-mark { width: 44px; height: 44px; }
  .announce { font-size: .82rem; }
  .step:nth-child(n) { transform: none; }
  .grad-text { box-shadow: 4px 4px 0 #111; border-width: 3px; }
}