/* WorkBoots: layout and type follow the measured Muse reference (ai.meta.com/muse).
   Breakpoints match Muse's authored rules: <=767 mobile, 768-1024 tablet, >=1025 desktop.
   The full desktop nav appears at 1272px, where Muse's nav switches. */

:root {
  --font: "Readex Pro", Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
  --ink: #0a1317;
  --muted: #5d6c7b;
  --blue: #0457cb;
  --blue-bright: #0171e3;
  --blue-light: #4ba9fe;
  --safety: #f5b301;
  --line: rgba(10, 19, 23, 0.12);
  --line-strong: rgba(10, 19, 23, 0.45);
  --card: #f8f9fb;
  --band: #f6f6f6;
  --control: rgba(43, 61, 70, 0.68);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: 32px;
  --nav-h: 64px;
  /* Readex Pro draws heavier than Muse's Optimistic; 450 matches its 500 visually. */
  --w-medium: 450;
}
@media (max-width: 1024px) {
  :root { --gutter: 16px; --nav-h: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: 1504px; margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 50%; top: -44px; transform: translateX(-50%);
  z-index: 100; padding: 10px 22px; border-radius: 100px;
  background: var(--blue); color: #fff; font-size: 14px; line-height: 20px; font-weight: 700;
  opacity: 0;
}
.skip:focus { top: 8px; opacity: 1; }

/* ---------- Type scale (desktop / tablet / mobile, measured) ---------- */
.eyebrow { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.14px; color: var(--blue); }
.t-section { font-size: 36px; line-height: 46px; font-weight: var(--w-medium); }
.t-large { font-size: 48px; line-height: 56px; font-weight: var(--w-medium); }
.t-card { font-size: 28px; line-height: 34px; font-weight: var(--w-medium); }
.t-lede { font-size: 18px; line-height: 26px; font-weight: 400; color: var(--muted); }
.t-sub { font-size: 24px; line-height: 30px; font-weight: 300; color: var(--muted); }
.t-body { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.16px; }
@media (max-width: 1024px) {
  .t-section { font-size: 32px; line-height: 38px; }
  .t-large { font-size: 40px; line-height: 48px; }
}
@media (max-width: 767px) {
  .t-section { font-size: 28px; line-height: 34px; }
  .t-large { font-size: 32px; line-height: 36px; }
  .t-card { font-size: 24px; line-height: 34px; }
  .t-sub { font-size: 20px; line-height: 28px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border: 2px solid transparent; border-radius: 100px;
  background: var(--blue); color: #fff;
  font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap;
  transition: background-color 0.2s;
}
.btn:hover { background: #0348a8; }
.btn--sm { padding: 10px 22px; }
.btn--nav { padding: 8px 24px; background: var(--blue-bright); }
.btn--nav:hover { background: #0165cc; }
.btn--bright { background: var(--blue-bright); }
.btn svg { width: 24px; height: 24px; }

.more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--blue); }
.more__ring {
  width: 32px; height: 32px; border-radius: 100px; border: 1px solid var(--line-strong);
  display: grid; place-items: center;
}
.more__ring svg { width: 24px; height: 24px; }
.more span:last-child { padding: 4px 0; }
.more--light { color: var(--blue-light); }
.more--light .more__ring { border-color: rgba(241, 244, 247, 0.4); }

.store-badge { display: inline-block; height: 40px; }
.store-badge img { height: 40px; width: auto; }

/* ---------- Placeholder media ---------- */
.ph {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #3a3f44 0%, #1f2327 100%);
  color: rgba(255, 255, 255, 0.72);
}
.ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 14px);
}
.ph__label {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; text-align: center;
  z-index: 1;
}
.ph__label b { display: block; font-weight: 600; letter-spacing: 1.5px; }
.ph--plumb { background: radial-gradient(120% 90% at 30% 20%, #6b5a45 0%, #2d2620 55%, #15120f 100%); }
.ph--hvac { background: radial-gradient(120% 90% at 70% 25%, #4d6272 0%, #22303a 55%, #10171c 100%); }
.ph--elec { background: radial-gradient(120% 90% at 50% 30%, #7a6431 0%, #2f2a1c 55%, #141209 100%); }
.ph--open { background: radial-gradient(120% 90% at 50% 35%, #5c6a4a 0%, #262c1f 55%, #12150e 100%); }
.ph--steel { background: linear-gradient(160deg, #56626c 0%, #2a3239 60%, #171c20 100%); }

/* ---------- Mobile app banner (<768 only) ---------- */
.app-banner { display: none; }
@media (max-width: 767px) {
  .app-banner {
    display: flex; align-items: center; gap: 0; height: 96px; padding: 12px 16px;
    position: relative; z-index: 3;
    background: #2b3d46; color: #fff;
  }
  .app-banner[hidden] { display: none; }
  .app-banner__icon { width: 72px; height: 72px; margin-left: 2px; flex: none; }
  .app-banner__text { flex: 1; min-width: 0; }
  .app-banner__name { display: block; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -0.16px; }
  .app-banner__sub { display: block; font-size: 14px; line-height: 20px; letter-spacing: -0.14px; }
  .app-banner__cta { font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -0.16px; color: var(--blue-light); padding-inline: 16px 1px; }
  .app-banner__close { width: 40px; height: 40px; border-radius: 100px; display: grid; place-items: center; }
  .app-banner__close svg { width: 16px; height: 16px; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; height: 0; z-index: 20; }
.nav { position: relative; height: var(--nav-h); }
.nav__bg {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; transition: opacity 0.15s ease-out;
}
.nav__inner { height: 100%; display: flex; align-items: center; }
.logo { display: flex; align-items: center; height: 100%; color: #fff; transition: color 0.2s; }
.logo__word { font-size: 17px; line-height: 20px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; }
.logo__word b { color: var(--safety); font-weight: 700; }
.nav__links { display: flex; align-items: center; gap: 12px; margin-left: 28px; }
.nav__links a {
  padding: 6px 12px; border-radius: 24px;
  font-size: 14px; line-height: 20px; letter-spacing: -0.14px; color: #fff;
  transition: color 0.2s, background-color 0.2s;
}
.nav__links a:hover { background: rgba(255, 255, 255, 0.14); }
.nav__cta { margin-left: auto; }
.nav__burger { display: none; width: 24px; height: 24px; color: #fff; margin-right: 20px; transition: color 0.2s; }
.nav__burger svg { width: 24px; height: 24px; }

.site-header.is-solid .nav__bg { opacity: 1; }
.site-header.is-solid .logo, .site-header.is-solid .nav__links a, .site-header.is-solid .nav__burger { color: var(--ink); }
.site-header.is-solid .nav__links a:hover { background: rgba(10, 19, 23, 0.06); }

@media (max-width: 1271px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav .wrap { padding-left: 20px; }
}

/* Mobile/tablet drawer menu */
.drawer {
  position: fixed; inset: 0 16px 0 0; z-index: 50;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  color: #fff; display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform 0.5s var(--ease-out), visibility 0s 0.5s;
  visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform 0.5s var(--ease-out); }
.drawer__scrim { position: fixed; inset: 0; z-index: 49; background: transparent; display: none; }
.drawer.is-open + .drawer__scrim { display: block; }
.drawer__head { height: 67px; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.drawer__head .logo__word { font-size: 16px; }
.drawer__close { position: absolute; right: 20px; top: 22px; width: 24px; height: 24px; }
.drawer__list { flex: 1; overflow-y: auto; padding: 16px 0; }
.drawer__item > a, .drawer__item > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 16px; font-size: 20px; line-height: 28px; font-weight: 300; text-align: left;
}
.drawer__item svg { width: 24px; height: 24px; transition: transform 0.3s; }
.drawer__item.is-open > button svg { transform: rotate(90deg); }
.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease-out); }
.drawer__item.is-open .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub > div { overflow: hidden; }
.drawer__group { padding: 8px 24px 8px 40px; font-size: 14px; line-height: 20px; font-weight: 700; color: #96a6b4; }
.drawer__sub a { display: block; padding: 8px 16px 8px 48px; font-size: 18px; line-height: 25.2px; font-weight: 300; }
.drawer__foot { margin: 0 16px; border-top: 1px solid rgba(255, 255, 255, 0.15); padding: 28px 0 28px; }
.drawer__foot a { display: flex; justify-content: space-between; align-items: center; font-size: 20px; line-height: 28px; font-weight: 300; }
.drawer__foot svg { width: 24px; height: 24px; }
body.menu-open { overflow: hidden; }

/* ---------- S01 Hero ---------- */
.hero { position: relative; height: 100vh; background: #000; overflow: hidden; clip-path: inset(0); color: #fff; }
.hero__shade { position: absolute; inset: 0 0 auto 0; height: 120px; z-index: 3; background: linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 60%); pointer-events: none; }
.hero__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s linear; }
.hero__layer.is-active { opacity: 1; }
.hero__media { position: fixed; inset: 0 0 auto 0; height: 100vh; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Hero footage: video on tablet/desktop, a still on phones (as Muse does). */
.hero__media--video::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 55%, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.14) 100%); }
.hero__media--video .hs { display: none; }
/* For now phones also play the desktop clips, cropped tall around the subject (vertical versions to come). */
@media (max-width: 767px) { .hero__media--video .hv { object-position: var(--mx, 50%) 50%; } .hero__media--video .hv[data-vposter] { object-position: 50% 50%; } }
/* Stand-in photos: darken the center so white type reads. */
.hero__media--photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 55%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 100%); }
@media (max-width: 1024px) { .hero__media--photo img { object-position: var(--pos-x, 50%) 50%; } }
.hero__media .ph__label { bottom: 28px; }

.hero__open {
  position: absolute; left: 0; right: 0; top: 35%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__icon { width: 147px; height: 147px; }
.hero__kicker { margin-top: 4px; font-size: 18px; line-height: 26px; font-weight: 400; text-transform: uppercase; }
.hero__title { margin-top: 7px; font-size: 64px; line-height: 74px; font-weight: var(--w-medium); }
.hero__badges { margin-top: 28px; display: flex; gap: 12px; justify-content: center; }
.hero__badges .store-badge, .hero__badges .store-badge img { height: 35px; }

.hero__scene {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; text-align: center; padding-inline: 16px;
  font-size: 48px; line-height: 56px; font-weight: var(--w-medium);
}
.hero__line { display: block; }
.hero .boots { color: var(--safety); }
/* Wordmark rule: WorkBoots with the yellow Boots is always bold 700, like the header logo */
.hero .wmk { font-weight: 700; letter-spacing: -0.02em; }
.hero__phrases { display: grid; justify-items: center; }
.hero__phrase {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.33em; white-space: nowrap;
  opacity: 0; transform: translateY(0.75em);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.hero__phrase svg { width: 1em; height: 1em; flex: none; }
.hero__phrase.is-in { opacity: 1; transform: none; }
.hero__phrase.is-out { opacity: 0; transform: translateY(-0.75em); }

@media (max-width: 1024px) {
  .hero { height: 90vh; height: 90svh; }
  .hero__open { top: 25.6%; }
  .hero__title { font-size: 48px; line-height: 56px; }
  .hero__scene { font-size: 40px; line-height: 48px; gap: 4px; }
}
@media (max-width: 767px) {
  .hero__media { position: absolute; height: 100%; }
  .hero__title { font-size: 36px; line-height: 46px; }
  .hero__scene { font-size: 32px; line-height: 36px; gap: 3px; }
}

/* ---------- S02 Features + S03 Control (one section, as on Muse) ---------- */
.sec { padding-block: 80px; border-bottom: 1px solid var(--line); }
@media (max-width: 767px) { .sec { padding-block: 48px; } }

.sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.sec-head--center { align-items: center; }
.sec-head__text { max-width: 1000px; }
.sec-head .t-section { margin-top: 8px; }
.sec-head .t-lede { margin-top: 9px; max-width: 816px; }
.sec-head .t-sub { margin-top: 8px; max-width: 750px; }
.sec-head .btn { flex: none; }
@media (max-width: 1024px) {
  .sec-head .t-lede { max-width: 820px; }
}
@media (max-width: 767px) {
  .sec-head { flex-direction: column; gap: 28px; align-items: flex-start; }
  .sec-head .t-section { max-width: 300px; }
  .sec-head .t-lede { max-width: 330px; }
}

.features { margin-top: 46px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.acc { border-bottom: 1px solid var(--line); }
.acc__item { border-top: 1px solid var(--line); transition: border-color 0.3s; }
.acc__item.is-open { border-top-color: var(--line-strong); }
.acc__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 32px 0; text-align: left;
  font-size: 24px; line-height: 30px; font-weight: 300;
}
.acc__btn svg { width: 24px; height: 24px; flex: none; }
.acc__btn .i-minus, .acc__item.is-open .acc__btn .i-plus { display: none; }
.acc__item.is-open .acc__btn .i-minus { display: block; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease-out); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 6px 0 58px; max-width: 530px; color: var(--muted); }
.acc__item.is-open .acc__btn { padding-bottom: 32px; }

/* Voicemail vs WorkBoots comparison, under the accordion */
.stats { margin-top: 40px; }
.stats__h { margin-top: 10px; font-size: 24px; line-height: 30px; font-weight: 300; max-width: 600px; text-wrap: balance; }
.stats__big { display: block; font-size: 64px; line-height: 68px; font-weight: var(--w-medium); letter-spacing: -0.03em; color: #c4252c; }
.vs { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs__col { border-radius: 24px; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.vs__col--old { background: var(--card); color: var(--muted); }
.vs__col--new { background: #fff8e1; box-shadow: inset 0 0 0 2px var(--safety); color: var(--ink); }
.vs__label { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -0.14px; }
.vs__label svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vs__label img { width: 24px; height: 24px; }
.vs__steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: vs; }
.vs__steps li { position: relative; padding-left: 30px; font-size: 16px; line-height: 22px; letter-spacing: -0.16px; counter-increment: vs; }
.vs__steps li::before { content: counter(vs); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(10, 19, 23, 0.08); }
.vs__col--new .vs__steps li::before { background: rgba(245, 179, 1, 0.35); }
.vs__end { font-weight: 600; }
.vs__end--bad { color: #c4252c; }
.vs__end--bad::before { content: "✕" !important; background: #fdecec !important; color: #c4252c; }
.vs__end--good::before { content: "✓" !important; background: var(--safety) !important; color: var(--ink); }
.stats__stat { text-wrap: balance; margin-top: 18px; font-size: 20px; line-height: 28px; font-weight: var(--w-medium); max-width: 560px; }
.stats__h sup, .stats__stat sup, .stats__note sup { font-size: 10px; line-height: 0; }
.stats__note { margin-top: 6px; font-size: 11px; line-height: 15px; color: var(--muted); opacity: 0.8; }
.stats--mob { display: none; }
@media (max-width: 767px) {
  .stats--mob { display: block; margin-top: 48px; }
  .stats__h { font-size: 20px; line-height: 28px; }
  .stats__big { font-size: 52px; line-height: 58px; }
  .vs { gap: 10px; }
  .vs__col { padding: 16px; border-radius: 20px; }
  .vs__steps li { font-size: 14px; line-height: 20px; padding-left: 28px; }
}
.feature-art { position: relative; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: var(--card); }
.feature-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s; }
.feature-art img.is-active { opacity: 1; }

.carousel { display: none; }
@media (max-width: 767px) {
  .features { display: none; }
  .carousel { display: block; margin-top: 48px; }
  .carousel__track {
    display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: 0;
  }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel__card { flex: 0 0 100%; scroll-snap-align: start; padding: 8px 8px 0; }
  .carousel__title { font-size: 20px; line-height: 28px; font-weight: 300; }
  .carousel__card img { margin-top: 24px; width: 100%; aspect-ratio: 1; border-radius: 24px; background: var(--card); }
  .carousel__card p { margin-top: 58px; color: var(--muted); max-width: 330px; }
  .carousel__nav { display: flex; gap: 8px; padding: 40px 8px 0; }
}
.round-btn {
  width: 32px; height: 32px; border-radius: 100px; display: grid; place-items: center;
  background: rgba(241, 244, 247, 0.7); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink);
}
.round-btn svg { width: 16px; height: 16px; }
.round-btn:disabled { opacity: 0.4; cursor: default; }

.control { margin-top: 85px; }
.control__grid { margin-top: 23px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ccard { background: var(--card); border-radius: 32px; padding: 24px; }
.ccard__head { display: flex; align-items: flex-start; gap: 16px; padding: 24px 0 64px; }
.ccard__icon { width: 36px; height: 36px; flex: none; }
.ccard p { color: var(--ink); }
.ccard p b { font-weight: 600; }
@media (max-width: 1024px) {
  .control__grid { gap: 16px; }
  .ccard__head .t-card { max-width: 260px; }
}
@media (max-width: 767px) {
  .control { margin-top: 76px; }
  .control__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- S04 Walkthrough ---------- */
.film { position: relative; margin-top: 40px; border-radius: 32px; overflow: hidden; aspect-ratio: 16 / 9; background: #1f2327; }
.film > video, .film > .ph, .film__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-tag { position: absolute; left: 20px; top: 20px; z-index: 2; padding: 4px 10px; border-radius: 100px; background: rgba(10, 19, 23, 0.55); color: #fff; font-size: 11px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.media-ctrls { position: absolute; right: 32px; bottom: 32px; display: flex; gap: 8px; z-index: 2; }
.media-ctrls button {
  width: 32px; height: 32px; border-radius: 100px; display: grid; place-items: center;
  background: var(--control); border: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(40px) saturate(3) brightness(1.2); backdrop-filter: blur(40px) saturate(3) brightness(1.2);
  color: #fff;
}
.media-ctrls svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .film { margin-top: 32px; aspect-ratio: 358 / 636; }
}

/* ---------- S05 Trade stories ---------- */
.stories { background: var(--band); padding-block: 80px; overflow: hidden; }
.stories__grid { display: flex; align-items: center; gap: 40px; }
.stories__intro { flex: 0 0 336px; }
.stories__intro .t-large { margin-top: 7px; }
.stories__intro p { margin-top: 9px; font-size: 18px; line-height: 26px; color: var(--ink); }
.stories__intro .btn { margin-top: 26px; }
.rail { display: flex; gap: 48px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter) - 50vw); padding-right: 50vw; }
.rail::-webkit-scrollbar { display: none; }
.story { flex: 0 0 367px; scroll-snap-align: start; }
.story__media { position: relative; aspect-ratio: 9 / 16; border-radius: 32px; overflow: hidden; }
.story__media .ph, .story__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__media .media-ctrls { right: 32px; bottom: 32px; }
.story p { margin-top: 11px; color: var(--muted); padding-right: 24px; }
.story p b { font-weight: 600; }
@media (max-width: 1024px) {
  .stories__intro { flex-basis: 172px; }
}
@media (max-width: 767px) {
  .stories { padding-block: 40px; }
  .stories__grid { flex-direction: column; align-items: stretch; gap: 40px; }
  .stories__intro { flex-basis: auto; }
  .rail { gap: 32px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .story { flex-basis: 300px; }
}

/* ---------- S06 Lead on your phone (hidden on mobile, as Muse hides its Mac block) ---------- */
.lead { padding-top: 56px; }
.lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.lead__art { border-radius: 32px; overflow: hidden; aspect-ratio: 4 / 3; }
.lead__art img { width: 100%; height: 100%; object-fit: cover; }
.lead__text { padding-left: 24px; max-width: 464px; }
.lead__text .t-lede { margin-top: 18px; }
.lead__ctas { margin-top: 25px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
@media (max-width: 1024px) {
  .lead__grid { grid-template-columns: 297px 1fr; gap: 40px; }
  .lead__text { padding-left: 0; }
}
@media (max-width: 767px) { .lead { display: none; } }

/* ---------- S07 Conversion panel + S08 FAQ ---------- */
.sec--convert { padding-bottom: 56px; }
.panel { position: relative; border-radius: 40px; overflow: hidden; aspect-ratio: 2751 / 968; display: grid; place-items: center; text-align: center; }
.panel__art { position: absolute; inset: 0; background: #fbeec2; }
.panel__art picture { display: block; width: 100%; height: 100%; }
.panel__art img { width: 100%; height: 100%; object-fit: cover; }
.panel__art .tool { position: absolute; width: 64px; height: 64px; color: #0457cb; opacity: 0.85; }
.panel__content { position: relative; display: flex; flex-direction: column; align-items: center; }
.panel__icon { width: 100px; height: 100px; }
.panel__kicker { margin-top: 24px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -0.14px; text-transform: uppercase; }
.panel .t-section { margin-top: 8px; }
.panel .btn { margin-top: 16px; }
.panel .store-badge { display: none; margin-top: 24px; }
.panel .store-badge--always { display: inline-block; margin-top: 20px; }
.panel .store-badge--always img { height: 44px; width: auto; }
@media (max-width: 1024px) { .panel { aspect-ratio: 1934 / 856; } .panel .t-section { max-width: 400px; } }
@media (max-width: 767px) {
  .panel { aspect-ratio: 700 / 1080; align-items: start; padding-top: 24px; }
  .panel .t-section { max-width: 330px; text-wrap: balance; }
  .panel .btn { display: none; }
  .panel .store-badge { display: inline-block; }
}

.faq { margin-top: 64px; }
.faq__label { display: flex; align-items: center; gap: 8px; }
.faq__label svg { width: 16px; height: 16px; color: var(--blue); }
.faq__list { margin-top: 24px; border-bottom: 1px solid var(--line); margin-bottom: 25px; }
.faq__item { border-top: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; text-align: left; }
.faq__q svg { width: 24px; height: 24px; flex: none; }
.faq__q .i-minus, .faq__item.is-open .faq__q .i-plus { display: none; }
.faq__item.is-open .faq__q .i-minus { display: block; }
.faq__a { height: 0; overflow: hidden; transition: height 0.25s; }
.faq__a > div { padding: 16px 0 40px; max-width: 688px; }
.faq__a p + p { margin-top: 12px; }
.faq__a a { color: var(--blue); text-decoration: underline; }
@media (max-width: 767px) {
  .faq__q svg { width: 16px; height: 16px; }
  .faq__list { margin-bottom: 18px; }
}

/* ---------- S09 Related ---------- */
.related .t-large { max-width: 1000px; }
.related__grid { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.rcard { position: relative; border-radius: 32px; overflow: hidden; aspect-ratio: 1260 / 940; color: #fff; }
.rcard__media { position: absolute; inset: 0; }
.rcard__media img { width: 100%; height: 100%; object-fit: cover; }
.rcard__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0) 60%); }
.rcard__body { position: absolute; left: 24px; right: 24px; bottom: 40px; }
.rcard__cat { font-size: 16px; line-height: 24px; letter-spacing: -0.16px; }
.rcard .t-card { margin-top: 16px; max-width: 500px; }
.rcard__ctas { margin-top: 24px; display: flex; align-items: center; gap: 24px; }
.rcard__ctas .btn { background: var(--blue-bright); }
@media (max-width: 1024px) {
  .related__grid { gap: 16px; }
  .rcard { aspect-ratio: auto; border-radius: 0; overflow: visible; color: var(--ink); }
  .rcard__media { position: relative; aspect-ratio: 1376 / 824; border-radius: 32px; overflow: hidden; }
  .rcard__shade { display: none; }
  .rcard__body { position: static; margin-top: 16px; }
  .rcard .more--light { color: var(--blue); }
  .rcard .more--light .more__ring { border-color: var(--line-strong); }
  .rcard__ctas .btn { background: var(--blue); }
}
@media (max-width: 767px) {
  .related .t-large { max-width: 350px; }
  .related__grid { margin-top: 32px; grid-template-columns: 1fr; gap: 64px; }
  .rcard .t-card { font-size: 24px; line-height: 34px; }
}

/* ---------- S10 Footer ---------- */
.footer { padding: 48px 0 160px; }
.footer__grid { display: grid; grid-template-columns: 1fr minmax(0, 907px); gap: 32px; }
.footer__brand .logo { color: var(--ink); height: auto; }
.footer__brand .logo__word { font-size: 22px; line-height: 20px; }
.socials { margin-top: 54px; display: flex; gap: 32px; }
.socials a { width: 20px; height: 20px; color: #3b4a55; }
.socials svg { width: 20px; height: 20px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; row-gap: 48px; }
.fcol__title { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -0.14px; }
.fcol__title svg { display: none; }
.fcol ul { margin-top: 4px; }
.fcol li a { display: inline-block; font-size: 14px; line-height: 24px; letter-spacing: -0.14px; color: var(--muted); }
.fcol li a:hover { color: var(--ink); }
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { display: flex; justify-content: space-between; align-items: center; }
  .socials { margin-top: 0; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .footer { padding: 48px 0 128px; }
  .footer__brand { display: block; }
  .socials { margin-top: 38px; }
  .footer__cols { display: block; margin-inline: calc(-1 * var(--gutter)); margin-top: 21px; }
  .fcol { border-bottom: 1px solid var(--line); }
  .fcol__title {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 16px var(--gutter); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.16px; color: var(--muted);
  }
  .fcol__title svg { display: block; width: 24px; height: 24px; transition: transform 0.25s; }
  .fcol.is-open .fcol__title svg { transform: rotate(180deg); }
  .fcol ul { display: none; margin: 0; padding: 8px var(--gutter) 32px; }
  .fcol.is-open ul { display: block; }
  .fcol li a { display: block; padding: 8px 0; font-size: 16px; line-height: 24px; font-weight: var(--w-medium); letter-spacing: -0.16px; color: var(--ink); }
}
@media (min-width: 768px) { .fcol__title { pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* ---------- Walkthrough film (motion graphics, js/film.js) ----------
   A fixed 1920×1080 stage (1080×1920 on phones) scaled to fit the film box. */
.film.has-wbf .film__poster, .film.has-wbf > .media-tag { display: none; }
.wbf {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden;
  font-family: var(--font); color: var(--ink); font-weight: 400;
  background: #fff;
}
.wbf .glow { position: absolute; inset: 0; background: radial-gradient(90% 90% at var(--gx, 80%) var(--gy, 95%), var(--g1, #c9d8f2) 0%, var(--g2, #eaf0fa) 38%, #ffffff 72%); }
.wbf .sc { position: absolute; inset: 0; display: grid; place-items: center; }
.wbf .cam { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; transform-origin: 50% 50%; }
.wbf .cam.col { gap: 28px; }
.wbf .big { font-size: 150px; line-height: 1.06; font-weight: var(--w-medium); letter-spacing: -0.02em; text-align: center; }
.wbf .ln { display: flex; align-items: center; justify-content: center; gap: 0.2em; white-space: nowrap; }
.wbf .w { display: inline-block; }
.wbf .ob { height: 0.95em; width: auto; filter: drop-shadow(0 18px 22px rgba(20, 30, 40, 0.2)); }
.wbf .ob.round { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff8e1, #fbe3a0); }
.wbf .ob.wide { height: 0.62em; }
.wbf .ob.tall { height: 1.5em; margin: -0.25em 0; }
.wbf .waver { display: inline-block; width: 1.125em; }
.wbf .waver svg, .wbf .waver img { width: 100%; height: 100%; display: block; overflow: visible; }
.wbf .check { width: 0.85em; height: 0.85em; }
.wbf .check circle { fill: none; stroke: var(--safety); stroke-width: 8; stroke-dasharray: 280; }
.wbf .check path { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; }
/* rotating middle line ("Alex … for you") */
.wbf .rot .mid { display: grid; justify-items: center; font-size: 0.6em; line-height: 1.3; margin: 0.12em 0; }
.wbf .ph-i { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.wbf .ph-i img { height: 1.1em; width: auto; filter: drop-shadow(0 8px 10px rgba(20, 30, 40, 0.18)); }
.wbf .appicon { width: 1.2em; height: 1.2em; }
/* chat pieces */
.wbf .bub { max-width: 1180px; padding: 30px 46px; border-radius: 52px; font-size: 54px; line-height: 1.25; letter-spacing: -0.01em; box-shadow: 0 14px 40px rgba(20, 30, 40, 0.08); }
.wbf .bub.alex { align-self: center; background: #eceef1; margin-right: 180px; }
.wbf .bub.you { align-self: center; background: #d7e9ff; margin-left: 180px; }
.wbf .who { display: flex; flex-direction: column; align-items: center; }
.wbf .who img { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff8e1, #fbe3a0); border: 6px solid #fff; box-shadow: 0 16px 36px rgba(20, 30, 40, 0.14); }
.wbf .who.small img { width: 110px; height: 110px; }
.wbf .pill { margin-top: -14px; display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 28px; padding: 10px 26px; font-size: 26px; line-height: 1.3; color: var(--muted); box-shadow: 0 10px 26px rgba(20, 30, 40, 0.1); }
.wbf .pill b { color: var(--ink); font-weight: 500; font-size: 30px; }
.wbf .pill .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--safety); margin-right: 8px; vertical-align: 2px; }
.wbf .pill em { font-style: normal; }
.wbf .card { background: #fff; border-radius: 44px; box-shadow: 0 24px 70px rgba(20, 30, 40, 0.14); }
.wbf .missed { display: flex; align-items: center; gap: 24px; padding: 22px 40px 22px 22px; font-size: 32px; line-height: 1.3; color: var(--muted); }
.wbf .missed b { display: block; color: var(--ink); font-weight: 500; font-size: 36px; }
.wbf .ic { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; overflow: hidden; }
.wbf .ic img { width: 100%; height: 100%; }
.wbf .timer { display: flex; align-items: baseline; gap: 16px; font-size: 32px; color: var(--muted); }
.wbf .timer b { font-size: 44px; font-weight: 500; color: var(--ink); background: #fff3c4; border-radius: 16px; padding: 4px 18px; }
.wbf .composer { width: 1400px; height: 150px; border-radius: 75px; background: #fff; box-shadow: 0 24px 60px rgba(20, 30, 40, 0.14); display: flex; align-items: center; gap: 28px; padding: 0 22px 0 52px; font-size: 54px; }
.wbf .composer .plus { font-size: 70px; font-weight: 300; }
.wbf .composer .caret { width: 4px; height: 64px; background: var(--ink); margin-left: -22px; animation: wbf-blink 1s steps(1) infinite; }
.wbf .composer .send { margin-left: auto; width: 106px; height: 106px; border-radius: 50%; background: var(--safety) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' stroke='%231d2125' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 52px no-repeat; }
@keyframes wbf-blink { 50% { opacity: 0; } }
/* lead card */
.wbf .wlead { width: 1100px; padding: 50px 60px; }
.wbf .lead-h { display: flex; align-items: center; justify-content: space-between; font-size: 52px; font-weight: 500; margin-bottom: 20px; }
.wbf .chip { display: inline-block; border-radius: 100px; padding: 8px 26px; font-size: 30px; font-weight: 500; }
.wbf .chip.urgent { background: #fdecec; color: #c4252c; }
.wbf .row { display: grid; grid-template-columns: 56px 190px 1fr; align-items: center; padding: 20px 0; border-top: 2px solid #eef0f2; font-size: 40px; }
.wbf .row .k { color: var(--muted); font-size: 30px; letter-spacing: 0.06em; text-transform: uppercase; }
.wbf .ck { width: 40px; height: 40px; border-radius: 50%; display: inline-block; background: var(--safety) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' stroke='%231d2125' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat; }
/* phone */
.wbf .phone { width: 620px; height: 1000px; border-radius: 90px; background: linear-gradient(180deg, #2b3139, #15191d); box-shadow: 0 40px 90px rgba(20, 30, 40, 0.3); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 70px 34px; margin-top: 120px; }
.wbf .clock { font-size: 150px; font-weight: 300; line-height: 1; }
.wbf .date { font-size: 32px; opacity: 0.75; margin-top: 10px; }
.wbf .notif { width: 100%; margin-top: 60px; background: rgba(255, 255, 255, 0.95); color: var(--ink); border-radius: 40px; padding: 30px 34px; font-size: 30px; line-height: 1.35; }
.wbf .notif .nh { display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 14px; }
.wbf .notif .nh img { width: 48px; height: 48px; border-radius: 50%; background: #fdf1cc; }
.wbf .notif .nh span { margin-left: auto; font-weight: 400; letter-spacing: 0; }
.wbf .notif b { font-size: 38px; font-weight: 600; }
.wbf .notif p { margin: 10px 0 0; }
.wbf .callbtn { margin-top: auto; width: 100%; height: 120px; border-radius: 60px; background: var(--safety); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 40px; font-weight: 600; }
.wbf .callbtn .ph { width: 40px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 3.5h-3a1.5 1.5 0 00-1.5 1.5c0 8.3 6.7 15 15 15a1.5 1.5 0 001.5-1.5v-3l-4-2-2 2c-2.5-1-4.5-3-5.5-5.5l2-2z' fill='%231d2125'/%3E%3C/svg%3E") center / contain no-repeat; }
/* night */
.wbf .bigclock { font-size: 170px; font-weight: 300; line-height: 1; }
.wbf .bigclock small { font-size: 60px; margin-left: 16px; opacity: 0.7; }
.wbf .night-chat { display: flex; flex-direction: column; gap: 24px; }
.wbf .bigclock { color: #3b4f6b; }
.wbf .night-chat .bub { font-size: 44px; }
.wbf .big-chip { font-size: 38px; padding: 12px 36px; }
/* morning */
.wbf .small-lead { width: 1000px; padding: 44px 54px; }
.wbf .small-lead .lp { font-size: 38px; color: var(--muted); margin: 0 0 30px; }
.wbf .small-lead .callbtn { height: 110px; }
.wbf .calling { position: absolute; width: 800px; padding: 60px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 44px; }
.wbf .calling .av { width: 170px; height: 170px; border-radius: 50%; background: #e7ebef; display: grid; place-items: center; font-size: 60px; font-weight: 500; color: var(--muted); }
.wbf .calling b { font-weight: 500; font-size: 56px; }
.wbf .calling .tm { color: var(--muted); font-size: 36px; }
.wbf .calling em { font-style: normal; font-variant-numeric: tabular-nums; }
.wbf .sched { position: absolute; display: flex; align-items: center; gap: 40px; padding: 44px 60px; font-size: 40px; }
.wbf .sched .sd { width: 150px; height: 150px; border-radius: 30px; background: var(--safety); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.wbf .sched .sd b { font-size: 34px; }
.wbf .sched .sd span { font-size: 70px; font-weight: 500; }
.wbf .sched div + div b { display: block; font-weight: 500; font-size: 48px; }
.wbf .sched div + div span { color: var(--muted); font-size: 36px; }
/* confetti */
.wbf .confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wbf .confetti i { position: absolute; top: 0; border-radius: 3px; }
/* recap */
.wbf #f-recap .cam { flex-direction: row; flex-wrap: wrap; align-content: center; gap: 30px 50px; padding: 0 160px; }
.wbf #f-recap .who, .wbf #f-recap .bub { flex-basis: 100%; }
.wbf #f-recap .who { align-items: center; }
.wbf #f-recap .bub { flex-basis: auto; margin: 0 auto 10px; }
.wbf #f-recap .cam > .bub { order: 0; }
.wbf .recap { width: 700px; padding: 30px 50px; }
.wbf .rr { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; font-size: 36px; border-top: 2px solid #eef0f2; }
.wbf .rr:first-child { border-top: 0; }
.wbf .rr b { font-size: 60px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wbf .rr b.red { color: #c4252c; } .wbf .rr b.gold { color: #b87e00; }
.wbf .week { width: 520px; padding: 36px 44px; align-self: stretch; display: flex; flex-direction: column; }
.wbf .wk-h { font-size: 34px; color: var(--muted); }
.wbf .bars { flex: 1; display: flex; align-items: flex-end; gap: 22px; margin-top: 20px; min-height: 200px; }
.wbf .bars i { flex: 1; height: calc(var(--h) * 100%); background: var(--safety); border-radius: 14px; }
.wbf .days { display: flex; gap: 22px; margin-top: 12px; }
.wbf .days span { flex: 1; text-align: center; font-size: 28px; color: var(--muted); }
/* keep your number */
.wbf .num { padding: 60px 90px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 38px; color: var(--muted); }
.wbf .num .lbl { font-size: 28px; letter-spacing: 0.08em; text-transform: uppercase; }
.wbf .num b { font-size: 110px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.wbf .tick { position: absolute; display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 60px; padding: 20px 36px 20px 22px; font-size: 36px; box-shadow: 0 16px 40px rgba(20, 30, 40, 0.12); }
.wbf .tick.t1 { left: 8%; top: 18%; } .wbf .tick.t2 { right: 8%; top: 30%; } .wbf .tick.t3 { left: 16%; bottom: 16%; }
/* object field */
.wbf .field { position: absolute; inset: 0; }
.wbf .fo { position: absolute; width: 140px; height: auto; margin: -70px 0 0 -70px; rotate: var(--r, 0deg); filter: drop-shadow(0 14px 18px rgba(20, 30, 40, 0.2)); }
.wbf .fo.round { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff8e1, #fbe3a0); }
.wbf #f-trades .big { background: rgba(255, 255, 255, 0.82); border-radius: 60px; padding: 20px 70px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* end card */
.wbf .end { color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.wbf .end .appicon { width: 230px; height: 230px; }
.wbf .end b { font-size: 70px; font-weight: 700; letter-spacing: -0.01em; margin-top: -20px; }
.wbf .end b span { color: var(--safety); }
.wbf .end .appicon { filter: drop-shadow(0 18px 30px rgba(20,30,40,.18)); }
.wbf .endline { font-size: 38px; color: var(--muted); }
.wbf .end .badge { height: 84px; width: auto; margin-top: 18px; }
/* portrait (phones): same scenes, narrower stage */
.wbf.portrait .big { font-size: 128px; }
.wbf.portrait .rot .mid { font-size: 0.5em; }
.wbf.portrait .missed { font-size: 38px; } .wbf.portrait .missed b { font-size: 44px; }
.wbf.portrait .who img { width: 190px; height: 190px; }
.wbf.portrait .timer { font-size: 38px; } .wbf.portrait .timer b { font-size: 52px; }
.wbf.portrait .bub { font-size: 56px; }
.wbf.portrait .night-chat .bub { font-size: 50px; }
.wbf.portrait .rr { font-size: 42px; } .wbf.portrait .rr b { font-size: 70px; }
.wbf.portrait .tick { font-size: 40px; }
.wbf.portrait .end .appicon { width: 300px; height: 300px; } .wbf.portrait .end b { font-size: 90px; } .wbf.portrait .endline { font-size: 46px; } .wbf.portrait .end .badge { height: 110px; }
.wbf.portrait .ln { flex-wrap: wrap; white-space: normal; }
.wbf.portrait .bub { max-width: 900px; }
.wbf.portrait .bub.alex { margin-right: 80px; } .wbf.portrait .bub.you { margin-left: 80px; }
.wbf.portrait .composer { width: 960px; font-size: 40px; height: 130px; }
.wbf.portrait .wlead { width: 960px; } .wbf.portrait .row { grid-template-columns: 56px 150px 1fr; font-size: 34px; }
.wbf.portrait .small-lead { width: 920px; } .wbf.portrait .calling { width: 760px; }
.wbf.portrait .sched { width: 940px; }
.wbf.portrait #f-recap .cam { padding: 0 70px; } .wbf.portrait .recap, .wbf.portrait .week { width: 940px; } .wbf.portrait .week { min-height: 380px; }
.wbf.portrait .num b { font-size: 90px; } .wbf.portrait .num { padding: 50px 60px; }
.wbf.portrait .tick.t1 { left: 6%; top: 14%; } .wbf.portrait .tick.t2 { right: 6%; top: 24%; } .wbf.portrait .tick.t3 { left: 10%; bottom: 14%; }
.wbf.portrait .fo { width: 130px; }
.wbf.portrait #f-trades .big { font-size: 84px; padding: 20px 40px; }
.wbf.portrait .phone { transform: scale(1.2); margin-top: 0; }

/* Alex at work (lead scene) */
.wbf .worker { display: flex; flex-direction: column; align-items: center; }
.wbf .wk-av { width: 250px; height: 250px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff8e1, #fbe3a0); border: 6px solid #fff; box-shadow: 0 16px 36px rgba(20, 30, 40, 0.14); }
.wbf .wk-av svg, .wbf .wk-av img { width: 100%; height: 100%; display: block; }
.wbf .worker .pill { min-width: 330px; }
.wbf .st-wrap { display: flex; align-items: center; overflow: hidden; height: 36px; }
.wbf .st { display: inline-block; font-style: normal; }
.wbf.portrait .wk-av { width: 300px; height: 300px; }
.wbf .wm { white-space: nowrap; font-weight: 700; letter-spacing: -0.03em; }
.wbf .boots { color: var(--safety); }
.wbf .ic.grey { background: #eceef1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 3.5h-3a1.5 1.5 0 00-1.5 1.5c0 8.3 6.7 15 15 15a1.5 1.5 0 001.5-1.5v-3l-4-2-2 2c-2.5-1-4.5-3-5.5-5.5l2-2z' fill='%235d6c7b'/%3E%3C/svg%3E") center / 44px no-repeat; }
.wbf .appwho img { background: none; border: 0; box-shadow: none; border-radius: 26px; }
.wbf .bub.apph { background: none; box-shadow: none; padding: 0; font-size: 46px; font-weight: var(--w-medium); letter-spacing: -0.02em; }

/* "Android · Coming soon" badge: sized to match Apple's badge, not a link */
.soon-badge { display: inline-flex; align-items: center; gap: 7px; height: 35px; padding: 0 12px 0 9px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.92); background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: default; white-space: nowrap; }
.soon-badge svg { width: 18px; height: 18px; flex: none; }
.soon-badge > span { display: flex; flex-direction: column; font-size: 14px; line-height: 15px; font-weight: 600; letter-spacing: -0.2px; text-align: left; }
.soon-badge small { font-size: 8.5px; line-height: 10px; font-weight: 400; letter-spacing: 0.3px; text-transform: uppercase; opacity: 0.85; }
.soon-badge--dark { height: 44px; padding: 0 14px 0 11px; border-color: rgba(10, 19, 23, 0.35); color: var(--ink); background: rgba(255, 255, 255, 0.6); }
.soon-badge--dark svg { width: 20px; height: 20px; }
.soon-badge--dark > span { font-size: 16px; line-height: 17px; }
.soon-badge--dark small { font-size: 9.5px; line-height: 11px; }
.panel__badges { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.panel__badges .store-badge--always { margin-top: 0; }
.panel__badges-soon { display: inline-flex; }
.rcard__media picture { display: block; width: 100%; height: 100%; }
.panel__note { margin-top: 12px; max-width: 420px; text-align: center; font-size: 16px; line-height: 24px; color: var(--muted); text-wrap: balance; }
.panel__note a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* Phones only: mirror a clip whose cropped framing reads better flipped (its poster flips with it). */
@media (max-width: 767px) { .hero__media--video .hv--flip-m { transform: scaleX(-1); } }