/* Beginning — built on the Saltilo (Zenovault) layout system, re-themed for dawn. */
.brand-film-section { padding-top: 20px; }
.brand-film-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:end; margin-bottom:30px; }
.brand-film-heading h2 { margin-top:16px; }
.brand-film-heading p { max-width:420px; font-size:17px; }
.brand-film-frame { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:28px; background:#1b1525; box-shadow:0 24px 70px -34px rgba(75,37,64,.45); }
.brand-film-play, .brand-film-play picture, .brand-film-play img, .brand-film-frame video { display:block; width:100%; height:100%; }
.brand-film-play img { object-fit:cover; }
.brand-film-frame video { position:absolute; inset:0; border:0; object-fit:contain; }
.brand-film-play::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 45%,rgba(15,12,20,.8)); }
.brand-film-invite { position:absolute; z-index:1; left:36px; bottom:32px; display:flex; align-items:center; gap:18px; color:white; font-size:22px; font-weight:600; }
.brand-film-invite small { display:block; font-size:14px; font-weight:400; margin-top:4px; }
.brand-film-icon { display:grid; place-items:center; width:66px; height:66px; padding-left:4px; border:1px solid #ffffffa0; border-radius:50%; background:#ffffff20; }
.brand-film-play:hover .brand-film-icon { background:#ffffff40; }
.brand-film-icon svg { display:block; flex-shrink:0; }
.film-dialog { box-sizing:border-box; position:fixed; inset:0; width:100vw; height:100vh; width:100dvw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; color:#fff; background:#080b0d; overflow:hidden; }
.film-dialog[open] { display:grid; grid-template-rows:minmax(0,1fr); gap:0; }
.film-dialog::backdrop { background:rgba(3,7,9,.96); }
.film-dialog-close { position:absolute; z-index:3; top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); display:grid; place-items:center; flex:none; width:52px; height:52px; padding:0; border:1px solid #fff9; border-radius:50%; color:#fff; background:#111b; box-shadow:0 2px 18px #0008; cursor:pointer; touch-action:manipulation; }
.film-dialog-close:hover { background:#ffffff2b; border-color:#e6c57f; }
.film-dialog-close:focus-visible { outline:3px solid #e6c57f; outline-offset:3px; }
.film-dialog .brand-film-frame { box-sizing:border-box; width:100%; height:100%; min-width:0; min-height:0; aspect-ratio:auto; max-height:none; margin:0; border:0; border-radius:0; background:#000; }
.film-dialog .brand-film-play img { object-fit:cover; }
.film-dialog .brand-film-frame video { object-fit:cover; }
body:has(.film-dialog[open]) { overflow:hidden; }
@media (max-width:600px) { .film-dialog-close { top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); width:46px; height:46px; } }
.brand-film-play:focus-visible { outline-offset:-6px; }
.brand-film-next { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:26px; }
.brand-film-next p { color:var(--ink); font-weight:600; }
.brand-film-next p span { display:block; color:var(--muted); font-size:14px; font-weight:400; margin-top:4px; }
.acquisition-paths { text-align:center; margin-top:24px; }
.acquisition-paths a, .acquisition-evidence-note a { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.acquisition-business { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding-top:28px; }
.acquisition-business h3 { font-size:20px; margin-bottom:8px; }
.acquisition-business .more-link { flex-shrink:0; }
.acquisition-evidence-note { margin-top:20px; max-width:850px; }
@media(max-width:600px) {
  .acquisition-business { flex-direction:column; align-items:flex-start; }
  .brand-film-heading { grid-template-columns:1fr; gap:18px; }
  .brand-film-frame { aspect-ratio:9/16; border-radius:22px; max-width:380px; margin-inline:auto; }
  .brand-film-invite { left:20px; bottom:24px; gap:12px; font-size:20px; }
  .brand-film-icon { width:54px; height:54px; }
  .brand-film-next { align-items:stretch; flex-direction:column; }
  .brand-film-next .btn { text-align:center; }
}
:root {
  --ink: #1b1525;
  --ink-2: #3a3142;
  --muted: #6b636d;
  --line: #efe8df;
  --paper: #fffcf7;
  --card: #ffffff;
  --cream: #fbf4e8;
  --peach: #ffd6c0;
  --lav: #fff1dc;
  --sun: #ffc94a;
  --gold: #e9a23b;
  --coral: #f46f4c;
  --violet: #c2502f; /* focus + form accent (deep coral); the old violet is retired */
  --plum: #4b2540;
  --afterglow: #d9604f;
  --green: #23915f;
  --green-deep: #17694a;
  --amber-ink: #8a4e0b;
  --sky: #23915f;
  --mint: #9fd8bc;
  --dawn: linear-gradient(90deg, #4b2540 0%, #f46f4c 50%, #ffc94a 100%);
  --dawn-soft: linear-gradient(160deg, #ffe6d6 0%, #fff1dc 50%, #fff4d6 100%);
  --frame: linear-gradient(180deg, #f46f4c 0%, #ffc94a 55%, #ffd6c0 100%);
  --radius: 24px;
  --radius-lg: 40px;
  --shadow: 0 1px 2px rgba(27, 21, 37, .04), 0 12px 32px -12px rgba(27, 21, 37, .12);
  --shadow-lg: 0 30px 80px -30px rgba(75, 37, 64, .32);
  --container: 1120px;
  --display: "Switzer", "Inter", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --body: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--muted);
  font: 400 16px/1.6 var(--body);
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); font-weight: 500; margin: 0; }
h1 { font-size: clamp(42px, 6.4vw, 76px); line-height: 1.04; letter-spacing: -0.045em; }
h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.12; letter-spacing: -0.03em; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; }
p { margin: 0; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.grad-text { background: linear-gradient(90deg, #5a2a4a 0%, #f46f4c 52%, #e9a23b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }

.container { width: min(var(--container), 100% - 40px); margin-inline: auto; }
.section { padding: 120px 0; position: relative; }
.section-tight { padding: 80px 0; }
.center { text-align: center; }
.lede { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 560px; }
.center .lede { margin-inline: auto; }
.head { display: grid; gap: 18px; margin-bottom: 56px; }
.head.center { justify-items: center; }
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 30px; }
.skip:focus { top: 12px; }

/* ---------- Top line + nav ---------- */
.top-line { height: 5px; background: var(--dawn); position: fixed; inset: 0 0 auto; z-index: 60; }
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 252, 247, .78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
  padding-top: 5px;
}
.nav.is-stuck { border-color: var(--line); box-shadow: 0 8px 30px -20px rgba(27, 21, 37, .25); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: grid; gap: 4px; }
.brand-name { font: 400 23px/1 "Abril Fatface", Georgia, "Times New Roman", serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.brand-tag { font: 600 8.5px/1 var(--display); letter-spacing: .42em; text-transform: uppercase; color: #b8861c; padding-left: 2px; }
.menu { display: flex; gap: 32px; }
@media (max-width: 1279px) and (min-width: 992px) { .menu { gap: 20px; } .menu a { font-size: 14.5px; } }
@media (max-width: 1239px) and (min-width: 992px) { .nav-inner { gap: 16px; } .menu { gap: 16px; } .menu a { font-size: 14px; } .nav .brand-text { display: none; } }
.menu a { color: var(--muted); font-size: 15.5px; white-space: nowrap; transition: color .2s; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; place-items: center; }
.menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 4px auto; transition: transform .3s, opacity .3s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 30px; border: 0; cursor: pointer;
  font: 500 16px/1 var(--body); letter-spacing: .1px; white-space: nowrap;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -10px rgba(27, 21, 37, .6); }
.btn-dark:hover { box-shadow: 0 16px 30px -12px rgba(244, 111, 76, .6); }
.btn-sun { background: linear-gradient(135deg, #ffd25b, #ff9a3d); color: var(--ink); box-shadow: 0 12px 28px -12px rgba(255, 122, 61, .8); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-sm { height: 44px; padding: 0 20px; font-size: 15px; }
.btn .arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(3px); }
.fine { font-size: 13.5px; color: var(--muted); }
.fine strong { color: var(--ink-2); font-weight: 600; }

/* ---------- Tag pill (Saltilo "Next-gen" tag) ---------- */
.tag { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; color: var(--ink-2); }
.tag b { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; font-weight: 500; padding: 5px 12px; border-radius: 30px; }
.eyebrow { font: 600 12.5px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 40px; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--dawn-soft); }
.hero-bg::before, .hero-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; }
.hero-bg::before { width: 620px; height: 620px; left: -160px; top: 120px; background: radial-gradient(circle, var(--glow-a, #ffc9ae), transparent 70%); animation: drift 18s ease-in-out infinite alternate; }
.hero-bg::after { width: 720px; height: 720px; right: -200px; top: -120px; background: radial-gradient(circle, var(--glow-b, #ffd59a), transparent 70%); animation: drift 22s ease-in-out infinite alternate-reverse; }
.hero-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(244, 111, 76, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 111, 76, .06) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); }
.sun { position: absolute; left: 50%; top: 58%; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%; background: radial-gradient(circle, #fff6d8 0%, #ffd77a 35%, rgba(255, 170, 90, 0) 70%); z-index: -1; animation: rise 2.4s cubic-bezier(.2, .8, .2, 1) both, breathe 7s ease-in-out 2.4s infinite; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.08); } }
@keyframes rise { from { transform: translateY(160px) scale(.8); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.06); } }

.hero-copy { display: grid; justify-items: center; text-align: center; gap: 24px; }
.hero-copy h1 { max-width: 900px; }
.hero-copy .lede { font-size: 19px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.hero-proof { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.avatars { display: flex; }
.avatars span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; background: var(--dawn); }
.avatars span:first-child { margin-left: 0; background: linear-gradient(135deg, #ffd25b, #ff8a3d); }
.avatars span:nth-child(2) { background: linear-gradient(135deg, #d9604f, #4b2540); }
.avatars span:nth-child(3) { background: linear-gradient(135deg, #9fd8bc, #23915f); }
.avatars span:nth-child(4) { background: linear-gradient(135deg, #ffb3a1, #ff7a3d); }

/* 3D tilted stage that flattens on scroll (Saltilo hero dashboard) */
.stage-wrap { perspective: 1600px; margin-top: 64px; }
.stage {
  --tilt: 1;
  position: relative; border-radius: 28px; padding: 14px; background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-lg);
  transform: rotateX(calc(var(--tilt) * 24deg)) scale(calc(1 - var(--tilt) * .06)) translateY(calc(var(--tilt) * -20px));
  transform-origin: 50% 0; will-change: transform;
}
.stage-inner { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 7.4; background: #2a1a30; }
.stage-inner > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.stage-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 21, 37, 0) 40%, rgba(27, 21, 37, .45)); }
.stage-phone { position: absolute; bottom: -2%; width: 17%; border-radius: 22px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .5); z-index: 2; aspect-ratio: 9 / 16.6; }
.stage-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage-phone.p1 { left: 6%; transform: rotate(-6deg) translateY(8%); }
.stage-phone.p2 { right: 6%; transform: rotate(6deg) translateY(8%); }
.chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 13.5px; color: var(--ink-2); animation: float 6s ease-in-out infinite; }
.chip strong { display: block; color: var(--ink); font: 600 15px/1.2 var(--display); }
.chip .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; }
.chip.c1 { left: 27%; top: 12%; }
.chip.c2 { right: 26%; top: 22%; animation-delay: -2s; }
.chip.c3 { left: 40%; bottom: 10%; animation-delay: -4s; }
@keyframes float { 50% { transform: translateY(-8px); } }

.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; margin-top: 56px; color: var(--ink-2); font-size: 14.5px; }
.logos span { display: inline-flex; align-items: center; gap: 8px; opacity: .85; }
.logos span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dawn); }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(27, 21, 37, .04), 0 24px 50px -20px rgba(75, 37, 64, .24); }
.card h3 { margin: 22px 0 8px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.widget { border-radius: 18px; background: var(--cream); padding: 20px; min-height: 220px; position: relative; overflow: hidden; }

/* Widget: sleep timer */
.w-sleep { background: linear-gradient(160deg, #1b1525, #4b2540 58%, #a2504c); color: #fff; display: grid; place-items: center; }
.ring { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--sun) calc(var(--p, 62) * 1%), rgba(255, 255, 255, .12) 0); display: grid; place-items: center; animation: ringfill 3s cubic-bezier(.2, .8, .2, 1) both; }
.ring > div { width: 126px; height: 126px; border-radius: 50%; background: #2a1a30; display: grid; place-items: center; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .7); }
.ring b { display: block; font: 600 26px/1 var(--display); color: #fff; margin-bottom: 4px; }
.stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .7; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .15; } }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes ringfill { from { --p: 0; } }

/* Widget: stress bars */
.w-bars { display: flex; flex-direction: column; }
.w-bars .w-title { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.w-bars .w-title b { color: var(--ink); font: 600 15px var(--display); }
.bars { height: 140px; display: flex; align-items: end; gap: 12px; margin-top: 16px; }
.bars div { flex: 1; border-radius: 10px; background: #f3ebde; height: 100%; position: relative; display: flex; align-items: end; }
.bars div span { width: 100%; border-radius: 10px; height: var(--h); background: linear-gradient(180deg, #ffb07a, #ff7a3d); display: grid; place-items: start center; padding-top: 6px; font-size: 11px; color: #fff; font-weight: 600; transition: height 1.2s cubic-bezier(.2, .8, .2, 1); }
.bars div:nth-child(n+3) span { background: linear-gradient(180deg, #ffd27a, #e9a23b); }
.bars div:last-child span { background: linear-gradient(180deg, #7fcfa7, #23915f); }
.bars-x { display: flex; gap: 12px; font-size: 11px; color: var(--muted); margin-top: 8px; }
.bars-x span { flex: 1; text-align: center; }

/* Widget: nature orbit (Saltilo integrations) */
.w-orbit { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #fff 0, #fff6e6 70%); }
.orbit { position: relative; width: 200px; height: 200px; }
.orbit::before, .orbit::after { content: ""; position: absolute; inset: 0; border: 1px dashed #e6d9c6; border-radius: 50%; }
.orbit::after { inset: 44px; }
.orbit .core { position: absolute; inset: 72px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 10px rgba(255, 201, 74, .25); animation: pulse 3s ease-in-out infinite; }
.orbit .spin { position: absolute; inset: 0; animation: spin 30s linear infinite; }
.orbit .node { position: absolute; width: 38px; height: 38px; margin: -19px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; font-size: 18px; animation: spin 30s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 18px rgba(255, 201, 74, .12); } }

/* ---------- Bento (Saltilo "Powerful features") ---------- */
.bento { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; }
.bento .card { padding: 32px; display: grid; gap: 14px; align-content: start; overflow: hidden; position: relative; }
.bento .wide { grid-column: span 1; }
.bento .rule { height: 1px; background: var(--line); width: 70%; margin: 6px 0; }
.bento .row2 { grid-template-columns: 1.4fr 1fr; }
.bento-2 { grid-template-columns: 1.4fr 1fr; }
.bento .card:has(> .bento-2) { align-content: center; }
.frame { border-radius: 20px; padding: 2px; background: var(--frame); }
.frame > div { border-radius: 18px; background: #fff; padding: 20px; height: 100%; }
.waves { position: relative; height: 170px; display: grid; place-items: center; }
.waves .head-ic { width: 70px; height: 70px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 28px; z-index: 2; }
.waves i { position: absolute; width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(244, 111, 76, .45); animation: wave 3.2s cubic-bezier(.2, .6, .3, 1) infinite; }
.waves i:nth-child(2) { animation-delay: -1.06s; border-color: rgba(255, 170, 60, .5); }
.waves i:nth-child(3) { animation-delay: -2.13s; border-color: rgba(255, 122, 61, .45); }
@keyframes wave { from { transform: scale(1); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
.steps-mini { display: grid; gap: 10px; }
.steps-mini div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--cream); color: var(--ink-2); font-size: 14.5px; }
.steps-mini b { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 12.5px; color: var(--ink); box-shadow: var(--shadow); }
.big-stat { font: 500 64px/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.spark { width: 100%; height: 120px; }
.spark path.line { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2s cubic-bezier(.2, .8, .2, 1); }
.is-in .spark path.line { stroke-dashoffset: 0; }
.list-journeys { display: grid; gap: 8px; }
@media (min-width: 992px) { .bento.row2 .bento-2 { grid-template-columns: 1fr 1fr; } }
.list-journeys b { white-space: nowrap; }
.list-journeys div { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; transition: background .2s; }
.list-journeys div:hover, .list-journeys div.on { background: var(--cream); }
.list-journeys img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; object-position: center 30%; }
.list-journeys b { display: block; color: var(--ink); font: 500 15px/1.2 var(--display); }
.list-journeys small { display: block; font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.list-journeys div > span:not(.play) { min-width: 0; }
.list-journeys .play { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 10px; }

/* ---------- Split (Saltilo "Organize work") ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.icon-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: 36px; }
.icon-list div { display: flex; align-items: center; gap: 14px; color: var(--ink); font: 500 17px/1.3 var(--display); }
.icon-list .ic { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 22px; }
.stat-card { position: relative; padding: 36px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.stat-card::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; opacity: .6; mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); }
.stat-card .frame { position: relative; }
.stat-top { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.pill-up { background: #eafaf2; color: #23915f; padding: 4px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }

/* ---------- Big panel (Saltilo "advanced automation") ---------- */
.panel { border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 96px 56px 72px; position: relative; overflow: hidden; }
.panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, #fff4dc 0%, transparent 60%); }
.panel > * { position: relative; }
.panel-arrow { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; margin: 32px auto 48px; font-size: 22px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.flow { display: grid; grid-template-columns: 1fr 1.1fr .5fr; gap: 32px; align-items: center; }
.flow-steps { display: grid; gap: 14px; }
.flow-steps button { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; cursor: pointer; color: var(--muted); font: 500 17px/1.3 var(--display); transition: color .3s, transform .3s, box-shadow .3s; }
.flow-steps button .ic { font-size: 20px; width: 28px; text-align: center; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
.flow-steps button[aria-pressed="true"] { color: var(--ink); transform: translateX(8px); box-shadow: 0 16px 34px -18px rgba(244, 111, 76, .55); }
.flow-steps button[aria-pressed="true"] .ic { filter: none; opacity: 1; }
.player { position: relative; }
.player .frame > div { padding: 0; overflow: hidden; }
.player-art { aspect-ratio: 4 / 3; overflow: hidden; }
.player-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: opacity .5s; }
.player-ui { padding: 16px 20px 20px; }
.player-ui .t { display: flex; justify-content: space-between; color: var(--ink); font: 500 16px var(--display); }
.player-ui .t small { color: var(--muted); font: 400 13px var(--body); }
.progress { height: 6px; border-radius: 6px; background: #f1ebe2; margin: 14px 0; overflow: hidden; }
.progress span { display: block; height: 100%; width: var(--w, 30%); background: var(--dawn); border-radius: 6px; transition: width .6s; }
.controls { display: flex; justify-content: center; gap: 22px; align-items: center; color: var(--ink); }
.controls .pp { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; border: 0; cursor: pointer; }
.sparkle { width: 76px; height: 76px; border-radius: 50%; background: var(--ink); color: var(--sun); display: grid; place-items: center; font-size: 30px; margin: auto; box-shadow: 0 0 0 14px #fbf4e8, 0 0 0 28px rgba(251, 244, 232, .5); animation: pulse 3s ease-in-out infinite; }
.flow-note { text-align: center; margin-top: 48px; font-size: 15px; }

/* ---------- Slider (Saltilo carousel) ---------- */
.slider { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 10px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 24px; }
.slider::-webkit-scrollbar { display: none; }
.slide { scroll-snap-align: start; display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; padding: 22px; }
.slide .ph { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream); }
.slide .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.slide:hover .ph img { transform: scale(1.06); }
.slide h3 { margin: 10px 0 8px; font-size: 24px; }
.slide .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.slide .meta span { font-size: 12.5px; padding: 4px 10px; border-radius: 20px; background: var(--cream); color: var(--ink-2); }
.arrows { display: flex; gap: 12px; }
.arrows button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 20px; box-shadow: var(--shadow); transition: background .2s, color .2s; }
.arrows button:hover { background: var(--ink); color: #fff; }

/* ---------- Pricing split ---------- */
.price-card { position: relative; border-radius: 28px; padding: 2px; background: var(--frame); box-shadow: var(--shadow-lg); }
.price-card > div { border-radius: 26px; background: #fff; padding: 36px; }
.price-badge { display: inline-flex; gap: 8px; align-items: center; background: linear-gradient(135deg, #fff3d0, #ffe2cf); color: #9a5a10; font-weight: 600; font-size: 13.5px; padding: 6px 14px; border-radius: 30px; }
.price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 4px; color: var(--ink); }
.price b { font: 500 64px/1 var(--display); letter-spacing: -.04em; }
.price span { font-size: 17px; }
.checks { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; color: var(--ink-2); }
.checks li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #eafaf2; color: #23915f; font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 2px; }
.price-card .btn { width: 100%; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }
.timeline div { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.timeline b { display: block; color: var(--ink); font: 500 16px/1.3 var(--display); margin-bottom: 4px; }
.timeline small { font-size: 13.5px; line-height: 1.45; display: block; }

/* ---------- Masonry moments (Saltilo testimonials) ---------- */
.masonry { columns: 3; column-gap: 20px; position: relative; }
.masonry::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.moment { break-inside: avoid; margin-bottom: 20px; padding: 24px; }
.moment-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.moment-top .ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--cream); }
.moment-top b { display: block; color: var(--ink); font: 500 17px/1.2 var(--display); }
.moment-top small { font-size: 13.5px; }
.moment p { color: var(--ink-2); }
.moment .tagline { margin-top: 14px; font-size: 13px; color: var(--gold); font-weight: 600; letter-spacing: .04em; }

/* ---------- Science band ---------- */
.science { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
.science .card { padding: 40px; }
.science .big-stat { font-size: clamp(72px, 9vw, 120px); background: var(--dawn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cite { font-size: 13px; margin-top: 18px; }
.cite a { text-decoration: underline; text-underline-offset: 3px; }
.stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.stats-row .card b { display: block; font: 500 44px/1 var(--display); color: var(--ink); letter-spacing: -.03em; margin-bottom: 8px; }

/* ---------- Partners band ---------- */
.partners-band { border-radius: var(--radius-lg); padding: 64px; background: linear-gradient(120deg, #1b1525 0%, #4b2540 40%, #b8504a 76%, #e9a23b 100%); color: rgba(255, 255, 255, .8); display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.partners-band h2 { color: #fff; }
.partners-band .eyebrow { color: #ffd25b; }
.partners-band::after { content: ""; position: absolute; right: -80px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 120, .7), transparent 65%); }
.p-tiles { display: grid; gap: 12px; position: relative; z-index: 1; }
.p-tiles a { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px); transition: background .25s, transform .25s; }
.p-tiles a:hover { background: rgba(255, 255, 255, .18); transform: translateX(4px); }
.p-tiles .ic { font-size: 26px; }
.p-tiles b { display: block; font: 500 18px/1.2 var(--display); }
.p-tiles small { color: rgba(255, 255, 255, .7); font-size: 13.5px; }
.p-tiles .go { margin-left: auto; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 24px; box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 36px 22px 0; position: relative; color: var(--ink); font: 500 18px/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-size: 20px; transition: transform .3s, background .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--sun); }
.faq details p { padding: 0 0 22px; }

/* ---------- Final CTA ---------- */
.final { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 520px; display: grid; place-items: center; text-align: center; padding: 80px 24px; isolation: isolate; color: rgba(255, 255, 255, .85); }
.final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(27, 21, 37, .2), rgba(43, 22, 40, .72)); }
.final h2 { color: #fff; font-size: clamp(38px, 5.4vw, 68px); max-width: 820px; margin: 0 auto 18px; }
.final .lede { color: rgba(255, 255, 255, .85); margin: 0 auto 32px; }
.final .fine { color: rgba(255, 255, 255, .75); margin-top: 16px; }

/* ---------- Footer (Saltilo rounded footer) ---------- */
.footer { margin-top: 120px; background: #f6f1ea; border-radius: 56px 56px 0 0; padding: 0 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.1fr; gap: 32px; padding-top: 88px; }
.footer-grid > div:first-child { padding-right: 32px; border-right: 1px solid #e7ded2; }
.footer h4 { font-size: 19px; margin-bottom: 18px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer a:hover { color: var(--ink); }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); font-size: 13px; font-weight: 700; color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #e7ded2; margin-top: 64px; padding-top: 24px; font-size: 14px; }

/* ---------- Partners page ---------- */
.seg { display: inline-flex; padding: 5px; border-radius: 40px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.seg button { border: 0; background: transparent; padding: 10px 22px; border-radius: 30px; cursor: pointer; color: var(--muted); font-weight: 500; transition: background .3s, color .3s; }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.who .card { border-top: 0; position: relative; }
.who .card::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 3px; border-radius: 3px; background: var(--dawn); }
.who .ic { font-size: 30px; }
.qr-wrap { margin: 0; display: grid; justify-items: center; gap: 18px; }
.qr-wrap figcaption { max-width: 300px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }
.qr-card { width: 280px; max-width: 100%; border-radius: 24px; background: linear-gradient(180deg, #fffaf0, #fff3e2); border: 1px solid #f0e2c8; box-shadow: var(--shadow-lg); padding: 24px 24px 22px; text-align: center; transform: rotate(-3deg); transition: transform .5s; position: relative; overflow: hidden; }
.qr-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--dawn); }
.qr-card:hover { transform: rotate(0); }
.qr-brand { display: flex; justify-content: center; align-items: center; gap: 8px; font: 600 12px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.qr-brand svg { width: 24px; height: 24px; }
.qr-card .eyebrow { font-size: 10.5px; }
.qr-card h3 { font-size: 22px; margin: 8px 0 16px; text-wrap: balance; }
.qr { width: 156px; margin: 0 auto 14px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #f0e2c8, 0 6px 18px rgba(27, 21, 37, .08); }
.qr svg { display: block; width: 100%; height: auto; }
.qr-cta { margin: 0 0 4px; font: 600 15px/1.3 var(--display); color: var(--ink); }
.qr-card small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.qr-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed #ead8b8; font-size: 12px; color: var(--muted); }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.calc .card { padding: 36px; }
.calc label { display: flex; justify-content: space-between; color: var(--ink); font: 500 16px var(--display); margin-bottom: 10px; }
.calc output { font-variant-numeric: tabular-nums; }
.calc input[type=range] { width: 100%; accent-color: var(--coral); margin-bottom: 26px; height: 28px; }
.calc .result { background: linear-gradient(150deg, #1b1525, #4b2540 58%, #a2504c); color: rgba(255, 255, 255, .8); border: 0; display: grid; align-content: center; gap: 10px; }
.calc .result b { font: 500 clamp(52px, 6vw, 76px)/1 var(--display); color: #fff; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.calc .result .eyebrow { color: var(--sun); }
.calc table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.calc td { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .15); }
.calc td:last-child { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.quote { font: 400 clamp(26px, 3vw, 36px)/1.3 var(--serif); font-style: italic; color: var(--ink); max-width: 860px; margin: 0 auto; text-align: center; }
.notes { font-size: 12.5px; line-height: 1.6; display: grid; gap: 6px; max-width: 900px; }

/* ---------- Reveal animation ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .card.reveal.is-in { transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; transition-delay: 0s; }
.js .card.reveal.is-in:hover { transform: translateY(-4px); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .menu { position: fixed; inset: 81px 0 auto; flex-direction: column; gap: 0; background: var(--paper); padding: 8px 20px 24px; border-bottom: 1px solid var(--line); box-shadow: 0 30px 40px -30px rgba(27, 21, 37, .3); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: .3s; max-height: calc(100dvh - 81px); overflow-y: auto; }
  .menu a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; color: var(--ink); }
  .menu-open .menu { transform: none; opacity: 1; visibility: visible; }
  .menu-btn { display: grid; }
  .cards-3, .who { grid-template-columns: 1fr; }
  .bento, .bento-2, .bento .row2, .split, .science, .partners-band, .calc { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .sparkle { display: none; }
  .slider { grid-auto-columns: 86%; }
  .masonry { columns: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; border: 0; padding: 0; }
  .chip.c2 { display: none; }
}
@media (max-width: 640px) {
  .section { padding: 80px 0; }
  .nav-cta .btn { height: 42px; padding: 0 12px; font-size: 13px; }
  .nav-cta .btn-ghost { display: inline-flex; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 19px; }
  .brand-tag { font-size: 7.5px; letter-spacing: .36em; }
  .hero { padding-top: 48px; }
  .stage-inner { aspect-ratio: 4 / 4.2; }
  .stage-phone { width: 34%; }
  .stage-phone.p1 { left: 4%; }
  .stage-phone.p2 { right: 4%; }
  .chip.c1 { left: 8%; top: 8%; }
  .chip.c3 { display: none; }
  .head-row { flex-direction: column; align-items: start; }
  .slide { grid-template-columns: 1fr; }
  .slide .ph { aspect-ratio: 4 / 3; }
  .icon-list { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .panel { padding: 64px 20px 48px; border-radius: 28px; }
  .partners-band { padding: 40px 24px; border-radius: 28px; }
  .final { border-radius: 28px; min-height: 460px; }
  .footer { border-radius: 32px 32px 0 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .stage { --tilt: 0 !important; }
}

/* Listen: real 4-minute demo player */
.sample-experience { display:grid; grid-template-columns:1.35fr 1fr; gap:20px; padding:20px; align-items:stretch; border:1px solid rgba(215,173,93,.28); border-radius:32px; background:linear-gradient(135deg,#17212a,#29251f); box-shadow:0 24px 70px -34px rgba(31,24,17,.4); }
.sample-film { position:relative; overflow:hidden; border-radius:20px; background:#10151b; min-width:0; }
.sample-film video { display:block; width:100%; height:100%; min-height:320px; object-fit:contain; }
.sample-movie-playing .sample-film { box-shadow:0 0 24px rgba(231,185,97,.08); }
.sample-experience .listen { align-self:center; }
.sample-experience .listen .frame { background:linear-gradient(150deg,rgba(242,202,132,.75),rgba(242,202,132,.12)); }
.sample-experience .listen .frame > div { background:#fffbf3; }
@media (max-width:991.98px) {
  .sample-experience { grid-template-columns:1fr; padding:14px; gap:14px; border-radius:26px; }
  .sample-film video { height:auto; min-height:0; aspect-ratio:944/528; }
  .sample-experience .listen-art { aspect-ratio:21/9; }
}
.listen .frame > div { padding: 0; overflow: hidden; }
.listen-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; max-width: 100%; }
.listen-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease-out; }
.listen.is-playing .listen-art img { transform: scale(1.06); }
.listen-eq { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; align-items: flex-end; gap: 5px; height: 46px; }
.listen-eq i { width: 5px; height: 20%; border-radius: 4px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 12px rgba(255, 210, 91, .6); transition: height .4s; }
.listen.is-playing .listen-eq i { animation: eq 1.1s ease-in-out infinite alternate; }
.listen-eq i:nth-child(3n) { animation-delay: -.3s !important; }
.listen-eq i:nth-child(3n+1) { animation-delay: -.7s !important; }
.listen-eq i:nth-child(4n) { animation-duration: 1.5s !important; }
@keyframes eq { from { height: 15%; } to { height: 100%; } }
.listen-ui { display: flex; align-items: center; gap: 18px; padding: 20px 22px 18px; }
.listen-track { flex: 1; min-width: 0; }
.listen-track .t { display: flex; justify-content: space-between; gap: 12px; color: var(--ink); font: 500 16px var(--display); }
.listen-track .t small { color: var(--muted); font: 400 13px var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.listen-bar { cursor: pointer; margin: 12px 0 2px; }
.listen-bar span { transition: width .25s linear; }
.listen-bar:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.listen-btn { flex: none; width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgba(244, 111, 76, .35), 0 0 0 0 rgba(255, 201, 74, .5); transition: transform .3s, box-shadow .3s; }
.listen-btn:hover { transform: scale(1.06); }
.listen-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.listen:not(.is-playing) .listen-btn { animation: callout 2.6s ease-out infinite; }
@keyframes callout { 0% { box-shadow: 0 10px 30px rgba(244, 111, 76, .35), 0 0 0 0 rgba(255, 201, 74, .55); } 70%, 100% { box-shadow: 0 10px 30px rgba(244, 111, 76, .35), 0 0 0 16px rgba(255, 201, 74, 0); } }
.i-play { width: 0; height: 0; border-left: 18px solid currentColor; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.i-pause { display: flex; gap: 6px; }
.i-pause i { width: 6px; height: 22px; border-radius: 2px; background: currentColor; }
.listen-note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.listen-inline { max-width: 760px; margin: 0 auto; }

/* Real reviews */
.review { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.review .stars-row { color: var(--gold); letter-spacing: 3px; font-size: 15px; }
.review .r-title { color: var(--ink); font: 500 18px/1.25 var(--display); }
.review blockquote { margin: 0; color: var(--muted); line-height: 1.6; }
.review figcaption { color: var(--ink); font-size: 14px; font-weight: 500; opacity: .8; }

@media (max-width: 640px) {
  .listen-ui { gap: 14px; padding: 16px; }
  .listen-btn { width: 54px; height: 54px; }
  .listen-track .t { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .listen-btn, .listen.is-playing .listen-eq i { animation: none !important; }
  .listen.is-playing .listen-art img { transform: none; }
}
section[id] { scroll-margin-top: 84px; }

/* Case studies */
.case { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; overflow: hidden; padding: 0; }
.case-img { position: relative; min-height: 320px; max-width: 100%; }
.case-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-img-calm { background: #081c22; }
.case-img-calm img { object-position: 50% 42%; }
@media (max-width: 640px) { #science .case-img-calm { min-height:340px; } .case-img-calm img { object-position:50% 43%; } }
.case-img .case-tag { position: absolute; left: 18px; top: 18px; background: rgba(255, 255, 255, .92); color: var(--ink); border-radius: 30px; padding: 7px 14px; font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.case-body { padding: 40px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.case-body h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.case-rows { display: grid; gap: 14px; }
.case-rows div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.case-rows b { color: var(--ink); font: 600 12px/1.5 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.case-rows p { margin: 0; }
.case-result { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.case-result strong { font: 500 clamp(48px, 6vw, 72px)/1 var(--display); letter-spacing: -.04em; background: linear-gradient(90deg, #4b2540, #d9481c); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .1em .06em 0; margin-right: -.1em; }
.case-result span { color: var(--ink); font: 500 16px/1.4 var(--display); max-width: 260px; }
.case-src { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.case-src a { text-decoration: underline; text-underline-offset: 3px; }

/* Evidence cards */
.evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.evidence .card { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.evidence .ev-kicker { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.evidence .ev-num { font: 500 44px/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.evidence h3 { font-size: 19px; line-height: 1.3; }
.evidence p { margin: 0; }
.evidence .case-src { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }

/* Problem band */
.problem { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; overflow: hidden; padding: 0; }
.problem .case-img { min-height: 360px; }
.problem-body { padding: 44px; display: flex; flex-direction: column; gap: 22px; justify-content: center; min-width: 0; }
.problem-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.problem-stats b { display: block; font: 500 48px/1 var(--display); letter-spacing: -.03em; color: var(--ink); margin-bottom: 8px; }
.problem-stats p { margin: 0; font-size: 15px; }

.case-list { display: grid; gap: 20px; }
.mini-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

@media (max-width: 991.98px) {
  .case, .problem, .evidence, .mini-cases { grid-template-columns: 1fr; }
  .case-img, .problem .case-img { min-height: 240px; }
}
@media (max-width: 640px) {
  .case-body, .problem-body { padding: 24px; }
  .case-rows div { grid-template-columns: 1fr; gap: 4px; }
  .problem-stats { grid-template-columns: 1fr; }
}
.mini { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.mini .ev-kicker { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.mini h3 { font-size: 22px; line-height: 1.25; text-wrap: balance; }
.mini p { margin: 0; }
.mini .case-src { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.mini-dark { background: var(--ink); border-color: var(--ink); }
.mini-dark h3 { color: #fff; }
.mini-dark p, .mini-dark .case-src { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .15); }
.mini-dark a { color: var(--sun); }
.mini-dark .ev-kicker { color: var(--sun); }
.stats-4 { margin-top: 20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991.98px) { .stats-4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Secondary pages: science, contact, gift card, legal ---------- */
.page-hero { padding: 96px 0 64px; background: var(--dawn-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin-bottom: 96px; }
.page-hero .head { margin-bottom: 0; text-align: center; }
.page-hero h1 { font-size: clamp(38px, 5.6vw, 64px); text-wrap: balance; max-width: 860px; }
.page-hero .lede { margin-inline: auto; max-width: 640px; }
.container.narrow { width: min(860px, 100% - 40px); }
.ev-kicker { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.ev-num { display: block; font: 500 44px/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.science-note { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.sci-cards .card h3, .contact-side .card h3 { margin: 14px 0 8px; font-size: 21px; }
.clarity-levels ol { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; counter-reset: lvl; }
.clarity-levels li { counter-increment: lvl; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--cream); }
.clarity-levels li::before { content: counter(lvl); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--display); color: #fff; background: var(--plum); }
.clarity-levels li:nth-child(n+3)::before { background: var(--gold); }
.clarity-levels li:nth-child(n+5)::before { background: #23915f; }
.clarity-levels b { font: 500 17px/1 var(--display); color: var(--ink); }
.honest { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; padding: 44px; }
.checks.no li::before { content: "✕"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #ffe2d6; color: #c2410c; }
.refs { display: grid; gap: 12px; }
.ref-lead { padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink-2); }
.ref-group { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 24px; }
.ref-group summary { cursor: pointer; padding: 18px 0; font: 500 17px/1.3 var(--display); color: var(--ink); list-style: none; display: flex; justify-content: space-between; }
.ref-group summary::-webkit-details-marker { display: none; }
.ref-group summary small { font: 500 13px/1 var(--body); color: var(--muted); background: var(--cream); padding: 6px 10px; border-radius: 99px; }
.ref-group ol { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.ref-group a, .ref-lead a, .legal a, .contact-side a, .center-note a, .science-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ref-pdf { text-align: center; margin-top: 12px; }
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.contact-card { padding: 36px; }
.contact-side { display: grid; gap: 20px; }
/* Match the business enquiry form to the full contact stack on desktop. */
@media (min-width: 992px) {
  .b2b #talk .contact-grid { align-items: stretch; }
  .b2b #talk .contact-card { display: flex; flex-direction: column; }
  .b2b #employerForm { flex: 1; display: flex; flex-direction: column; }
  .b2b #employerForm > .field:has(textarea) { flex: 1; grid-template-rows: auto 1fr; }
  .b2b #employerForm .btn { align-self: flex-start; }
}
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field > span { font: 500 14.5px/1.2 var(--display); color: var(--ink); }
.field small { color: var(--muted); font-weight: 400; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.field input, .field select, .field textarea { width: 100%; font: 400 16px/1.4 var(--body); color: var(--ink); background: var(--paper); border: 1px solid #e6dccd; border-radius: 14px; padding: 13px 16px; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(244, 111, 76, .14); }
.form .btn { justify-self: start; }
.form-error { margin: 0; padding: 12px 16px; border-radius: 12px; background: #fff0ea; color: #9a3412; font-size: 14.5px; }
.form-success { text-align: center; padding: 40px 12px; }
.form-success .ic { font-size: 40px; }
.form-success h3 { margin: 14px 0 8px; }
.gift-visual { display: grid; place-items: center; }
.gift-card-art { width: min(400px, 100%); aspect-ratio: 1.6; border-radius: 26px; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #3a1d33 0%, #4b2540 22%, #b8504a 55%, #e9a23b 84%, #ffc94a 100%); box-shadow: var(--shadow-lg); transform: rotate(-4deg); transition: transform .5s; }
.gift-card-art:hover { transform: rotate(0); }
.gift-card-art .qr-brand { position: absolute; top: 26px; left: 30px; margin: 0; color: #fff; justify-content: flex-start; }
.gift-card-art .eyebrow { color: #ffd25b; }
.gift-card-art h3 { color: #fff; font-size: 28px; }
.gift-card-art p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.cards-3 .card .ev-num + h3 { margin-top: 14px; }
.center-note { text-align: center; margin-top: 28px; color: var(--muted); }
.legal-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.legal-toc { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow: auto; font-size: 14px; }
.legal-toc b { display: block; font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.legal-toc a { color: var(--muted); }
.legal-toc a:hover { color: var(--ink); }
.legal { padding: 48px; min-width: 0; }
.legal:hover { transform: none; }
.legal h2 { font-size: 24px; letter-spacing: -.015em; margin: 40px 0 12px; scroll-margin-top: 100px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 18px; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
.legal ul, .legal ol { padding-left: 22px; }
@media (max-width: 991.98px) {
  .contact-grid, .honest, .legal-wrap { grid-template-columns: 1fr; }
  .legal-toc { position: static; max-height: none; }
  .legal-toc ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .page-hero { padding: 64px 0 44px; margin-bottom: 64px; }
  .field-row, .legal-toc ol { grid-template-columns: minmax(0, 1fr); }
  .contact-card, .legal, .honest { padding: 24px; }
  .gift-card-art { padding: 22px; }
  .gift-card-art .qr-brand { top: 20px; left: 22px; }
}
@media (max-width: 480px) {
  .nav-inner { gap: 12px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 0 14px; font-size: 13.5px; }
  .brand { gap: 8px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-name { font-size: 17px; letter-spacing: .06em; }
  .brand-tag { font-size: 6.5px; letter-spacing: .3em; }
  .gift-card-art { transform: none; }
}
@media (max-width: 460px) { .nav .brand-text { display: none; } }
.split > *, .partners-band > *, .p-tiles a > span:not(.ic):not(.go) { min-width: 0; }
@media (max-width: 480px) {
  .price-card > div { padding: 26px 22px; }
  .price-card .btn { white-space: normal; text-align: center; line-height: 1.3; height: auto; min-height: 52px; padding-block: 12px; }
  .p-tiles small { white-space: normal; }
}

/* ---------- Topic pages: sleep, stress, mindfulness ---------- */
.topic-hero { position: relative; padding: 72px 0 88px; background: var(--dawn-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
/* Keep topic introductions and offers visible; let small screens scroll naturally. */
.topic-hero--compact .reveal { opacity: 1; transform: none; }
@media (min-width: 992px) {
  .topic-hero.topic-hero--compact { padding: 64px 0 36px; }
  .topic-hero--compact .topic-art { height: clamp(300px, calc(100svh - 200px), 480px); min-height: 0; }
  .topic-hero--compact .topic-art img { height: 100%; aspect-ratio: auto; }
  .topic-hero--compact .topic-copy h1 { font-size: clamp(40px, 4.4vw, 60px); }
  .topic-hero--compact .hero-actions { margin-top: 22px; }
}
.topic-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.topic-copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.topic-copy h1 { font-size: clamp(40px, 5.4vw, 66px); text-wrap: balance; }
.topic-copy .hero-actions { justify-content: flex-start; }
.topic-art { position: relative; min-width: 0; }
.topic-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 32px; box-shadow: var(--shadow-lg); }
.topic-chip { position: absolute; left: -18px; bottom: 32px; animation: none; }
.stat-stack { display: grid; gap: 16px; }
.stat-stack .card b { display: block; font: 500 44px/1 var(--display); letter-spacing: -.03em; color: var(--ink); margin-bottom: 10px; }
.stat-stack .card p { color: var(--ink-2); }
.stat-stack .card small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.app-card { display: flex; flex-direction: column; gap: 8px; }
.app-card .app-shot { height: 220px; border-radius: 18px; overflow: hidden; background: var(--dawn-soft); display: grid; place-items: end center; margin-bottom: 10px; }
.app-card .app-shot img { width: 62%; height: 100%; object-fit: cover; object-position: top; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(27, 21, 37, .14); margin-top: 24px; }
.app-card h3 { margin: 4px 0 2px; font-size: 21px; }
.research-note { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; border-left: 4px solid var(--coral); }
.research-note p { color: var(--ink-2); }
.research-note a, .before-after + div a, .stress-src a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.reviews-3 .moment { margin: 0; }
.before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.ba { border-radius: 26px; padding: 30px 24px; text-align: center; display: grid; gap: 8px; box-shadow: var(--shadow); }
.ba small { font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.ba b { font: 500 clamp(52px, 6vw, 76px)/1 var(--display); letter-spacing: -.04em; }
.ba span { font-size: 14.5px; }
.ba-before { background: linear-gradient(180deg, #ffe7d6, #ffd2b8); color: #9a3412; }
.ba-before b { color: #c2410c; }
.ba-after { background: linear-gradient(180deg, #e3f7ee, #c9efdc); color: #17694a; }
.ba-after b { color: #17694a; }
.ba-arrow { font-size: 28px; color: var(--muted); }
.water-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 32px; box-shadow: var(--shadow-lg); }
.no-technique { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; padding: 44px; background: linear-gradient(135deg, #fff 0%, #fbf4e8 100%); }
.no-technique:hover { transform: none; }
.topic-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.topic-links a { display: flex; align-items: center; gap: 14px; padding: 20px 22px; color: var(--ink); }
.topic-links .ic { font-size: 24px; }
.topic-links b { display: block; font: 500 17px/1.2 var(--display); }
.topic-links small { color: var(--muted); font-size: 13.5px; }
.topic-links .go { margin-left: auto; color: var(--muted); }
@media (max-width: 991.98px) {
  .topic-grid, .no-technique { grid-template-columns: 1fr; }
  .topic-art img { aspect-ratio: 16 / 11; }
  .topic-chip { left: 16px; bottom: 16px; }
  .topic-links { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topic-hero { padding: 48px 0 56px; }
  .before-after { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
  .no-technique { padding: 24px; }
}
.water-art { overflow: hidden; border-radius: 32px; box-shadow: var(--shadow-lg); }
.water-art img { box-shadow: none; border-radius: 0; transform: scale(1.1); transform-origin: 35% 35%; }
.more-link { display: inline-block; margin-top: 14px; font: 500 14.5px/1.3 var(--display); color: var(--ink); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.more-link:hover { text-decoration-color: var(--coral); }
.stats-row > * { min-width: 0; }
@media (max-width: 480px) { .stats-row .card { padding: 22px 18px; } .stats-row .card b { font-size: 34px; } }
.grad-text, .science .big-stat { padding-inline: .12em; margin-inline: -.12em; }
/* Gradient-filled text only paints inside its own box: give glyphs room so nothing is shaved */
.case-result strong, .big-stat, .science .big-stat { padding: .12em .12em .14em 0; margin: -.12em -.12em -.14em 0; }
.grad-text { padding-block: .1em .2em; margin-block: -.1em -.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Three-moment cards: same picture height, links pinned to one baseline */
.cards-3 > .card { display: flex; flex-direction: column; }
.cards-3 .widget { height: 248px; min-height: 0; flex: none; }
.cards-3 .w-bars .bars { flex: 1; height: auto; min-height: 0; }
.cards-3 > .card .more-link { margin-top: auto; padding-top: 14px; align-self: flex-start; }
.cards-3 > .card p:has(+ .more-link) { margin-bottom: 0; }

/* Employers page */
.emp-gets { align-items: stretch; gap: 20px; }
.emp-gets .icon-list { grid-template-columns: 1fr; gap: 14px; }
.emp-gets .icon-list div { font-size: 16px; }
.emp-gets .icon-list .ic { width: 44px; height: 44px; font-size: 19px; }
@media (min-width: 992px) { .emp-cases { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 641px) and (max-width: 991.98px) { .emp-cases { grid-template-columns: repeat(2, 1fr); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   Rise & Shine: brand colour system (31 Oct 2026)
   B2C: Rise (morning) + Shine (golden hour). The homepage sky follows the
   visitor's own clock. B2B pages (body.b2b) use "Daybreak": evergreen-led,
   amber as the single thread back to the consumer brand.
   ===================================================================== */

/* ---- Living sky: every page's first hero. A canvas paints the brand's day (night, first light,
   sunrise, morning, golden hour, dusk) from the visitor's clock; the sun rises, arcs and sets.
   Hero layout and content are untouched; only the background and text tone respond. ---- */
.has-sky { position: relative; isolation: isolate; overflow: hidden; }
.has-sky > .hero-bg, .has-sky > .sun { display: none; }
.sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.has-sky.page-hero, .has-sky.topic-hero { background: var(--paper); }
[data-sky-tone="dark"] > .hero-grid { opacity: .25; }
[data-sky-tone="dark"] :is(.hero-copy, .head, .topic-copy) h1 { color: #fffcf7; }
[data-sky-tone="dark"] :is(.hero-copy, .head, .topic-copy) :is(.lede, p) { color: rgba(255, 252, 247, .8); }
[data-sky-tone="dark"] :is(.hero-copy, .head, .topic-copy) .fine { color: rgba(255, 252, 247, .68); }
[data-sky-tone="dark"] :is(.hero-copy, .head, .topic-copy) .fine strong { color: #fffcf7; }
[data-sky-tone="dark"] :is(.hero-copy, .head, .topic-copy) .eyebrow { color: #ffc94a; }
[data-sky-tone="dark"] :is(.hero-copy, .head, .topic-copy) .grad-text { background-image: linear-gradient(90deg, #ff9b7a 0%, #ffc94a 100%); }
[data-sky-tone="dark"] :is(.hero-copy, .head, .topic-copy) .serif:not(.grad-text) { color: #ffc94a; }
[data-sky-tone="dark"] .hero-actions .btn-dark { background: linear-gradient(135deg, #ffd25b, #f46f4c); color: #1b1525; box-shadow: 0 14px 34px -12px rgba(244, 111, 76, .8); }
[data-sky-tone="dark"] .hero-actions .btn-ghost { background: rgba(255, 255, 255, .1); color: #fffcf7; border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(8px); }
[data-sky-tone="dark"] .hero-copy .tag { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: rgba(255, 252, 247, .85); box-shadow: none; backdrop-filter: blur(8px); }
[data-sky-tone="dark"] .hero-copy .tag b { background: #fffcf7; color: #1b1525; }
[data-sky-tone="dark"] .hero-copy .hero-proof { color: rgba(255, 252, 247, .8); }
body.b2b [data-sky-tone="dark"] .hero-actions .btn-dark { background: linear-gradient(135deg, #ffd25b, #e9a23b); color: #1e2a26; }
body.b2b [data-sky-tone="dark"] :is(.hero-copy, .head) .grad-text { background-image: linear-gradient(90deg, #9fd8bc 0%, #ffc94a 100%); }
[data-sky="golden"] :is(.hero-copy, .head, .topic-copy) :is(.lede, .fine) { color: #4f3b3a; }
[data-sky="golden"] :is(.hero-copy, .head, .topic-copy) .grad-text { background-image: linear-gradient(90deg, #4b2540 0%, #b8402a 100%); }
body.b2b [data-sky="golden"] :is(.hero-copy, .head) .grad-text { background-image: linear-gradient(90deg, #0e3b2c 0%, #7a5410 100%); }
.sky-hello { margin: -8px 0 0; font: italic 400 clamp(19px, 2.2vw, 24px)/1.3 var(--serif); color: var(--amber-ink); letter-spacing: -.005em; text-wrap: balance; max-width: 640px; }
.sky-hello[hidden] { display: none; }
[data-sky="golden"] .sky-hello { color: #7a2e22; }
[data-sky-tone="dark"] .sky-hello { color: #ffc94a !important; }
.top-line { transition: background .8s; }

/* The small "drag the day" dial, top-right of each sky hero */
.sky-dial { position: absolute; z-index: 4; top: 14px; right: max(14px, env(safe-area-inset-right, 0px)); display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(27, 21, 37, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 500 12px/1 var(--body); color: var(--ink-2); box-shadow: 0 6px 20px -12px rgba(27, 21, 37, .35); }
.sky-dial .sd-sun { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 40% 35%, #fff4c8, #ffc94a 60%, #f46f4c); box-shadow: 0 0 12px rgba(255, 201, 74, .8); }
.sky-dial output { min-width: 112px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sky-dial input { width: 120px; accent-color: #e9a23b; margin: 0; cursor: grab; }
.sky-dial input:active { cursor: grabbing; }
.sky-dial button { all: unset; cursor: pointer; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; min-height: 24px; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: 6px; color: var(--amber-ink); }
.sky-dial button[hidden] { display: none; }
.sky-dial :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
[data-sky-tone="dark"] .sky-dial { background: rgba(18, 13, 24, .35); border-color: rgba(255, 255, 255, .18); color: rgba(255, 252, 247, .88); }
[data-sky-tone="dark"] .sky-dial .sd-sun { background: radial-gradient(circle at 40% 35%, #fffbe8, #e8e2f0 60%, #b9b0c4); box-shadow: 0 0 12px rgba(255, 255, 255, .5); }
[data-sky-tone="dark"] .sky-dial button { color: #ffc94a; }
@media (max-width: 640px) { .sky-dial { top: 10px; padding: 5px 10px 5px 6px; gap: 8px; } .sky-dial output { min-width: 0; } .sky-dial .sd-name { display: none; } .sky-dial input { width: 96px; } }

/* ---- Shine: golden-hour gift card with an embossed sun ---- */
.gift-card-art::before { content: ""; position: absolute; width: 190px; height: 190px; right: -46px; top: -56px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 200, .95) 0%, rgba(255, 201, 74, .65) 34%, rgba(255, 201, 74, 0) 70%); pointer-events: none; }
.gift-card-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -40px 60px -30px rgba(27, 21, 37, .35); pointer-events: none; }
.gift-card-art > * { position: relative; z-index: 1; }
.gift-card-art .qr-brand { position: absolute; }

/* ---- B2B "Daybreak" look: employers, venues, partners ---- */
body.b2b {
  --ink: #1e2a26; --ink-2: #34433d; --muted: #5e6b65; --line: #e2e6dd;
  --paper: #f6f3ec; --cream: #edf1ea; --peach: #fbeed6; --lav: #e3ede6;
  --gold: #a46a12; --violet: #17694a; --coral: #23915f;
  --dawn: linear-gradient(90deg, #0e3b2c 0%, #23915f 55%, #e9a23b 100%);
  --dawn-soft: linear-gradient(160deg, #e3ede6 0%, #f1f2ea 55%, #fbf0da 100%);
  --frame: linear-gradient(180deg, #23915f 0%, #e9a23b 70%, #fbf0da 100%);
  --shadow: 0 1px 2px rgba(14, 59, 44, .05), 0 12px 32px -12px rgba(14, 59, 44, .14);
  --shadow-lg: 0 30px 80px -30px rgba(14, 59, 44, .38);
  --glow-a: #cfe6d8; --glow-b: #ffe0a0;
}
body.b2b .grad-text { background-image: linear-gradient(90deg, #0e3b2c 0%, #23915f 55%, #c98a1e 100%); }
body.b2b .hero-grid { background-image: linear-gradient(rgba(14, 59, 44, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 59, 44, .06) 1px, transparent 1px); }
body.b2b .sun { background: radial-gradient(circle, #fff6d8 0%, #ffe08a 35%, rgba(233, 162, 59, 0) 70%); }
body.b2b .btn-dark { background: #0e3b2c; }
body.b2b .btn-dark:hover { box-shadow: 0 16px 30px -12px rgba(35, 145, 95, .55); }
body.b2b .btn-sun { background: linear-gradient(135deg, #ffd25b, #e9a23b); color: #1e2a26; box-shadow: 0 12px 28px -12px rgba(233, 162, 59, .8); }
body.b2b .partners-band { background: linear-gradient(120deg, #0a2e22 0%, #0e3b2c 42%, #1f6b4e 78%, #c99a3e 100%); }
body.b2b .partners-band .eyebrow { color: #f2c46a; }
body.b2b .mini-dark { background: #0e3b2c; border-color: #0e3b2c; }
body.b2b .calc .result, body.b2b .w-sleep { background: linear-gradient(150deg, #0a2e22, #0e3b2c 58%, #1f6b4e); }
body.b2b .ring > div { background: #0c3326; }
body.b2b .final::before { background: linear-gradient(180deg, rgba(10, 46, 34, .25), rgba(10, 46, 34, .75)); }
body.b2b .footer { background: #ecefe7; }
body.b2b .footer-grid > div:first-child, body.b2b .footer-bottom { border-color: #dbe0d6; }
body.b2b .price-badge { background: linear-gradient(135deg, #fbf0da, #e3ede6); color: #7a5410; }
body.b2b .bars div span { background: linear-gradient(180deg, #7fcfa7, #23915f); }
body.b2b .bars div:nth-child(n+3) span { background: linear-gradient(180deg, #ffd27a, #e9a23b); }
body.b2b .field input, body.b2b .field select, body.b2b .field textarea { background: #fbfaf6; border-color: #d9ded3; }
body.b2b .field input:focus, body.b2b .field select:focus, body.b2b .field textarea:focus { box-shadow: 0 0 0 4px rgba(35, 145, 95, .16); }
body.b2b .waves i { border-color: rgba(35, 145, 95, .45); }
body.b2b .flow-steps button[aria-pressed="true"] { box-shadow: 0 16px 34px -18px rgba(14, 59, 44, .5); }

@media (prefers-reduced-motion: reduce) {
  .top-line { transition: none; }
}
/* Seamless tone changes while the sun moves */
.has-sky :is(h1, .lede, .fine, .eyebrow, .tag, .sky-hello, .hero-proof) { transition: color .6s ease, background-color .6s ease, border-color .6s ease; }
.has-sky .sky-dial { transition: background .6s ease, color .6s ease, border-color .6s ease; }
.has-sky.sky-grab { cursor: grab; }
.has-sky.sky-dragging, .has-sky.sky-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
[data-sky="golden"] :is(.hero-copy, .head, .topic-copy) .eyebrow { color: #7a2e22; }
body.b2b [data-sky="golden"] :is(.hero-copy, .head) .eyebrow { color: #5c3d0c; }
/* Ambient sky behind all content: tints only the page background with the current sky, a light that
   follows the sun (a moon at night) and stars. Cards, text, buttons and the greens never change colour. */
.sky-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky-ambient > div { position: absolute; inset: 0; }
.sky-wash { opacity: 0; }
.sky-stars { opacity: 0; }
.sky-stars::before, .sky-stars::after { content: ""; position: absolute; inset: 0; }
.sky-stars::before { background: radial-gradient(1.5px 1.5px at 75.6% 45.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.1px 2.1px at 4.7% 67.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 38.4% 51.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.5px 2.5px at 5.3% 53.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 38.3% 6.7%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.0px 2.0px at 58.9% 93.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.5px 2.5px at 9.2% 65.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.0px 2.0px at 91.0% 76.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 73.6% 32.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 99.1% 36.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 72.3% 75.3%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 63.2% 88.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 76.6% 47.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 35.9% 16.7%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.1px 2.1px at 90.9% 6.1%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.6px 2.6px at 51.6% 31.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.7px 2.7px at 26.6% 9.1%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.6px 2.6px at 50.1% 38.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 53.0% 46.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.6px 2.6px at 76.2% 77.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.5px 2.5px at 1.6% 68.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.5px 2.5px at 73.6% 72.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.7px 2.7px at 23.3% 30.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.9px 1.9px at 59.1% 84.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.0px 2.0px at 26.9% 41.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.1px 2.1px at 28.7% 17.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 80.2% 3.3%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.1px 2.1px at 95.5% 74.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.2px 2.2px at 62.5% 84.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 71.5% 13.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.6px 1.6px at 0.3% 41.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.5px 1.5px at 93.8% 24.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 88.7% 65.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 38.6% 38.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.1px 2.1px at 58.7% 84.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.2px 2.2px at 55.6% 14.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.7px 2.7px at 14.2% 56.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 46.4% 96.1%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 31.9% 62.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 62.2% 80.3%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 38.9% 20.3%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.5px 1.5px at 42.6% 14.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.6px 2.6px at 13.1% 88.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.6px 1.6px at 7.1% 36.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 78.3% 45.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.9px 1.9px at 80.9% 93.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 68.0% 90.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 47.1% 50.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.2px 2.2px at 75.6% 46.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.6px 2.6px at 43.9% 82.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 98.7% 95.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.5px 2.5px at 53.7% 51.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.6px 1.6px at 57.7% 87.7%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.0px 2.0px at 86.9% 71.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.5px 2.5px at 74.2% 1.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.6px 2.6px at 46.3% 6.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.4px 2.4px at 66.8% 68.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 86.6% 89.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.2px 2.2px at 45.0% 98.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 31.6% 51.5%, rgba(214,140,40,.85) 45%, transparent 60%); animation: skytw 6s ease-in-out infinite; }
.sky-stars::after { background: radial-gradient(2.6px 2.6px at 46.8% 80.7%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.9px 1.9px at 99.9% 15.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 0.1% 0.1%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.4px 2.4px at 31.9% 41.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 20.5% 83.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.4px 2.4px at 9.5% 8.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.4px 2.4px at 21.4% 21.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.6px 1.6px at 95.2% 94.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.0px 2.0px at 69.2% 28.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.4px 2.4px at 42.2% 28.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 19.2% 98.3%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 13.6% 39.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.2px 2.2px at 82.8% 15.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.7px 2.7px at 23.4% 10.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 69.6% 79.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 67.0% 63.3%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.6px 1.6px at 22.7% 31.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 76.3% 52.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.2px 2.2px at 33.0% 70.3%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 48.5% 86.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.5px 2.5px at 73.9% 31.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 31.1% 58.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.1px 2.1px at 25.9% 37.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.0px 2.0px at 47.6% 38.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 37.0% 25.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 51.4% 72.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.4px 2.4px at 46.1% 94.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.9px 1.9px at 51.7% 66.1%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.0px 2.0px at 98.7% 15.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 54.2% 52.3%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.5px 2.5px at 27.4% 64.3%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.2px 2.2px at 26.7% 97.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.8px 1.8px at 69.4% 45.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.5px 2.5px at 16.1% 70.7%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 58.2% 75.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.7px 2.7px at 28.0% 75.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 49.6% 8.0%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.7px 1.7px at 78.3% 74.7%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.0px 2.0px at 58.5% 51.8%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.6px 1.6px at 39.0% 21.6%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.0px 2.0px at 65.9% 70.9%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.1px 2.1px at 81.6% 37.2%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.3px 2.3px at 0.9% 10.4%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(2.1px 2.1px at 22.1% 5.5%, rgba(214,140,40,.85) 45%, transparent 60%),radial-gradient(1.6px 1.6px at 72.4% 29.7%, rgba(214,140,40,.85) 45%, transparent 60%); animation: skytw 8s ease-in-out -3s infinite; }
@keyframes skytw { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sky-stars::before, .sky-stars::after { animation: none; } }
/* Greeting crossfades as the sky changes; nav glass takes on the sky's light (B2C only) */
.sky-hello { transition: opacity .22s ease, color .6s ease; }
.sky-hello.swap { opacity: 0; }
body:not(.b2b) .nav { background: var(--nav-tint, rgba(255, 252, 247, .78)); transition: background .5s ease, border-color .3s, box-shadow .3s; }
/* Sun light over photos: screen blend adds light only; sits above images, below chips, text and the dial */
.sky-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.has-sky .chip, .has-sky .sky-dial { z-index: 4; }
/* One-time "drag the sun" hint, placed under the sun by main.js */
.sky-hint { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 12px/1 var(--body); letter-spacing: .04em; color: var(--ink); white-space: nowrap; box-shadow: 0 6px 18px -10px rgba(27, 21, 37, .4); will-change: transform, opacity; }
.sky-hint[hidden] { display: none; }
[data-sky-tone="dark"] .sky-hint { background: rgba(18, 13, 24, .55); color: #fffcf7; }
[data-sky-tone="dark"] .sky-dial :focus-visible { outline-color: #ffc94a; }

/* Business page (business.html): built from the existing components; only these pieces are new */
h1.h1-long { font-size: clamp(36px, 5.2vw, 66px); text-wrap: balance; }
.hero-note { margin: 0; font-size: 14px; color: var(--muted); letter-spacing: .01em; }
.trust-row { list-style: none; margin: 76px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; font: 500 14px/1.3 var(--display); color: var(--ink-2); letter-spacing: .02em; }
.trust-row li { display: inline-flex; align-items: center; gap: 10px; }
.trust-row li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(214, 162, 46, .16); }
.center-lede { margin: -18px auto 40px; text-align: center; max-width: 640px; }
.seg-3 { flex-wrap: wrap; justify-content: center; }
.offers .offer { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 12px; padding: 32px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.offers .offer .ic { font-size: 30px; line-height: 1; }
.offers .offer h3 { margin: 2px 0 0; }
.offers .offer p { flex: 1; margin: 0; }
.offers .offer .more-link { align-self: flex-start; margin-top: 6px; }
.offers .offer:hover { transform: translateY(-4px); border-color: var(--green, #23915f); box-shadow: 0 22px 44px -26px rgba(14, 59, 44, .45); }
.offers .offer:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.p-rows > div { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.p-rows small { display: block; margin-top: 4px; line-height: 1.5; }
.ev-figures { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 28px; }
.ev-figures b { display: block; font: 500 34px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.ev-figures span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); max-width: 200px; }
.case-study { padding: 40px; display: grid; gap: 22px; }
.case-study h3 { margin: 0; }
.business-calm-image { display:block; width:100%; height:300px; object-fit:cover; object-position:50% 42%; border-radius:16px; background:#081c22; }
.pss { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; padding: 6px 0 4px; }
.pss small { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.pss b { font: 500 clamp(52px, 6vw, 72px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.pss .grad-num { background: linear-gradient(90deg, #0e3b2c, #23915f 55%, #c98a1e); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .1em .1em .1em 0; margin: -.1em -.1em -.1em 0; }
.pss-arrow { font-size: 30px; color: var(--muted); padding-bottom: 12px; }
.case-study .fine { border-top: 1px solid var(--line); padding-top: 18px; margin: 0; }
.btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .85); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); }
#sizeField[hidden] { display: none; }
@media (max-width: 640px) { .trust-row { gap: 8px 20px; font-size: 13px; margin-top: 44px; } .seg-3 button { padding: 9px 14px; font-size: 14px; } .case-study { padding: 28px; } .offers .offer { padding: 26px; } }
/* Business hero: keep the whole message (badge to "no IT project") on screen, with the photo starting below */
@media (min-width: 641px) {
  .hero-biz { padding-top: 62px; }
  .hero-biz .hero-copy { gap: 20px; }
  .hero-biz .hero-copy .lede { font-size: 18px; }
  .hero-biz .stage-wrap { margin-top: 44px; }
}
@media (min-width: 641px) and (max-height: 820px) {
  .hero-biz { padding-top: 62px; }
  .hero-biz .hero-copy { gap: 16px; }
  .hero-biz h1.h1-long { font-size: clamp(34px, 4.4vw, 56px); }
  .hero-biz .hero-copy .lede { font-size: 17px; line-height: 1.55; }
  .hero-biz .stage-wrap { margin-top: 32px; }
}
@media (max-width: 640px) {
  .hero-biz { padding-top: 60px; }
  .hero-biz .tag-more { display: none; }
  .hero-biz .hero-copy { gap: 14px; }
  .hero-biz h1.h1-long { font-size: clamp(30px, 8.4vw, 36px); letter-spacing: -.035em; }
  .hero-biz .hero-copy .lede { font-size: 16px; line-height: 1.5; }
  .hero-biz .hero-note { font-size: 13px; }
}

@media (max-width: 420px) {
  .seg-3 { display: grid; grid-template-columns: repeat(3, auto); width: 100%; max-width: 360px; }
  .seg-3 button { padding: 9px 10px; font-size: 13px; }
  .seg-3 .seg-ic { display: none; }
  .pss { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
  .pss b { font-size: 44px; }
  .pss-arrow { font-size: 22px; padding-bottom: 8px; }
}
/* Wide screens: the centred badge never meets the sun bar, so the hero can sit higher; keep a clear gap above the tilted photo */
@media (min-width: 1100px) { .hero-biz { padding-top: 44px; } }
@media (min-width: 641px) { .hero-biz .stage-wrap { margin-top: 68px; } }
@media (min-width: 641px) and (max-height: 820px) { .hero-biz .stage-wrap { margin-top: 64px; } }

/* ==== Hero proportions (homepage, Portuguese homepage, business page) ====
   One type scale for every window: headline, paragraph, buttons and spacing grow and shrink together,
   following the window width AND height. Nothing is squeezed below comfortable reading sizes; on very
   short windows the small print may sit just under the fold instead of the text getting cramped. */
@media (min-width: 641px) {
  :is(.hero-fit, .hero-biz) { padding-top: 64px; } /* clears the sun bar wherever the centred badge could meet it */
  :is(.hero-fit, .hero-biz) .hero-copy { gap: clamp(16px, 2.6vh, 26px); }
  .hero-fit .hero-copy h1 { font-size: clamp(38px, min(6.2vw, 9.8vh), 78px); }
  .hero-biz .hero-copy h1.h1-long { font-size: clamp(34px, min(5vw, 8.4vh), 66px); }
  .hero-fit .sky-hello { font-size: clamp(18px, min(2.2vw, 3vh), 24px); margin-top: -6px; }
  :is(.hero-fit, .hero-biz) .hero-copy .lede { font-size: clamp(16.5px, 2.2vh, 19px); line-height: 1.6; }
  :is(.hero-fit, .hero-biz) .hero-copy .fine, .hero-biz .hero-note { font-size: clamp(13px, 1.8vh, 14px); }
  :is(.hero-fit, .hero-biz) .stage-wrap { margin-top: clamp(64px, 10vh, 88px); } /* tilted photo clears the text */
}
@media (min-width: 900px) { .hero-fit .hero-copy .lede { max-width: 660px; } }
/* Wide windows: the badge sits well left of the sun bar, so the hero can start higher on short screens */
@media (min-width: 1200px) { :is(.hero-fit, .hero-biz) { padding-top: clamp(40px, 6vh, 72px); } }
/* Landscape phones and very short windows: same layout, one step smaller; only the greeting steps aside */
@media (min-width: 641px) and (max-height: 500px) {
  :is(.hero-fit, .hero-biz) { padding-top: 36px; }
  :is(.hero-fit, .hero-biz) .tag-more, .hero-fit .sky-hello { display: none; }
  :is(.hero-fit, .hero-biz) .hero-copy { gap: 12px; }
  :is(.hero-fit, .hero-biz) .hero-copy .lede { max-width: 720px !important; }
  .sky-dial { top: 10px; padding: 5px 10px 5px 6px; gap: 8px; } /* compact sun bar, as on phones */
  .sky-dial output { min-width: 0; }
  .sky-dial .sd-name { display: none; }
  .sky-dial input { width: 96px; }
  .hero-fit .hero-copy h1 { font-size: clamp(32px, 9vh, 40px); }
  .hero-biz .hero-copy h1.h1-long { font-size: clamp(29px, 8vh, 36px); }
  :is(.hero-fit, .hero-biz) .hero-copy .lede { font-size: 15.5px; line-height: 1.55; }
  :is(.hero-fit, .hero-biz) .hero-copy .hero-actions .btn { height: auto; min-height: 46px; padding: 8px 20px; font-size: 15px; }
}
/* Phones (portrait) */
@media (max-width: 640px) {
  :is(.hero-fit, .hero-biz) { padding-top: 64px; }
  :is(.hero-fit, .hero-biz) .tag-more { display: none; }
  :is(.hero-fit, .hero-biz) .hero-copy { gap: 16px; }
  .hero-fit .hero-copy h1 { font-size: clamp(34px, 9.6vw, 42px); }
  .hero-biz .hero-copy h1.h1-long { font-size: clamp(31px, 8.6vw, 38px); letter-spacing: -.035em; }
  .hero-fit .sky-hello { font-size: 17px; margin-top: -6px; }
  :is(.hero-fit, .hero-biz) .hero-copy .lede { font-size: 16px; line-height: 1.55; }
  :is(.hero-fit, .hero-biz) .hero-copy .fine, .hero-biz .hero-note { font-size: 13px; }
}
/* Short phones: a little less air, same sizes; the greeting line (it repeats the sample button) steps aside */
@media (max-width: 640px) and (max-height: 700px) {
  :is(.hero-fit, .hero-biz) { padding-top: 58px; }
  :is(.hero-fit, .hero-biz) .hero-copy { gap: 14px; }
  .hero-fit .sky-hello { display: none; }
}

/* ---- Bulletproof sizing: every window from 320px phones to large monitors ---- */
/* Nav: fluid spacing so longer labels (Portuguese) never push the bar past the window */
@media (min-width: 992px) {
  .nav-inner { gap: clamp(12px, 1.6vw, 24px); }
  .menu { gap: clamp(14px, 1.9vw, 32px); }
}
@media (min-width: 992px) and (max-width: 1360px) { .menu a { font-size: 14.5px; } .nav-cta .btn-sm { padding: 0 16px; } }
/* Small phones: logo, button and menu fit side by side */
@media (max-width: 380px) {
  .nav-inner { gap: 8px; }
  .nav .brand-text { display: none; }
  .brand { gap: 7px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 18px; letter-spacing: .05em; }
  .brand-tag { font-size: 7.5px; letter-spacing: .3em; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn-sm { height: 40px; padding: 0 9px; font-size: 12.5px; }
  .menu-btn { width: 40px; height: 40px; }
  .card { padding: 22px; }
  .contact-card { padding: 22px; }
}
/* Smallest phones (320–350px): the sun mark alone carries the brand in the top bar */
@media (max-width: 350px) {
  .nav .brand-text { display: none; }
  .brand-mark { width: 34px; height: 34px; }
}
/* Form fields and grid cells may shrink below their built-in minimum width */
.contact-grid > *, .field-row > *, .field, .field input, .field select, .field textarea { min-width: 0; }
/* Narrow phones: long button labels wrap instead of pushing the page sideways */
@media (max-width: 400px) {
  .hero-actions .btn { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 50px; padding-block: 10px; line-height: 1.25; }
}
/* Business hero: its two short button labels sit side by side on narrow phones */
@media (max-width: 400px) {
  .hero-biz .hero-copy .hero-actions { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .hero-biz .hero-copy .hero-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; font-size: 15px; }
}

/* Compact topic hero sizing follows the same breakpoint as the topic grid. */
@media (min-width: 992px) and (max-height: 720px) {
 .topic-hero.topic-hero--compact { padding-top: 56px; padding-bottom: 28px; }
 .topic-hero--compact .topic-copy { gap: 16px; }
 .topic-hero--compact .topic-copy h1 { font-size: clamp(36px, 4vw, 50px); }
 .topic-hero--compact .lede { font-size: 17px; line-height: 1.55; }
 .topic-hero--compact .hero-actions { margin-top: 10px; }
}
@media (max-width: 991.98px) {
 .topic-hero.topic-hero--compact { padding-top: 64px; }
 .topic-hero--compact .topic-grid { gap: 32px; }
 .topic-hero--compact .topic-copy { gap: 16px; }
 .topic-hero--compact .hero-actions { margin-top: 8px; flex-wrap: wrap; }
}
@media (max-width: 480px) {
 .topic-hero--compact .topic-copy h1 { font-size: clamp(34px, 9vw, 42px); }
 .topic-hero--compact .lede { font-size: 16px; line-height: 1.55; }
 .topic-hero--compact .hero-actions { width: 100%; }
 .topic-hero--compact .hero-actions .btn { width: 100%; white-space: normal; height: auto; min-height: 48px; }
}
/* One shared day/night control: both celestial icons occupy the same space. */
.sky-dial .sd-body { position: relative; display: block; width: 24px; height: 24px; flex: none; }
.sky-dial .sd-body .sd-sun, .sky-dial .sd-moon { position: absolute; inset: 1px; width: 22px; height: 22px; border-radius: 50%; }
.sky-dial .sd-body .sd-sun { opacity: var(--day-alpha, 1); background: radial-gradient(circle at 40% 35%, #fff4c8, #ffc94a 60%, #f46f4c); box-shadow: 0 0 12px rgba(255,201,74,.8); }
.sky-dial .sd-moon { opacity: var(--moon-alpha, 0); background: radial-gradient(circle at 65% 60%, rgba(115,137,174,.35) 0 12%, transparent 15%), radial-gradient(circle at 32% 35%, rgba(115,137,174,.24) 0 9%, transparent 13%), radial-gradient(circle at 35% 25%, #fffdf4, #e9eff9 58%, #9dacc9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 0 14px rgba(191,215,255,.65); }
.sky-dial input { accent-color: var(--dial-accent, #e9a23b); }
/* Moon phase is painted, with no full-disc CSS background behind crescents. */
.sky-dial canvas.sd-moon { background: none; box-shadow: 0 0 12px rgba(191,215,255,.3); }
.sky-dial .sd-locate { font-size: 20px; line-height: 1; padding: 0; min-width: 24px; min-height: 24px; color: inherit; }
.sky-dial .sd-locate:disabled { opacity: .5; cursor: wait; }
@media (max-width: 360px) { .sky-dial { gap: 6px; } .sky-dial input { width: 70px; } .sky-dial button { padding-inline: 4px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sky-dial input { min-height: 32px; }
.sky-dial .sd-locate, .sky-dial button { min-height: 32px; }
.sky-dial .sd-locate { min-width: 32px; }
@media (prefers-reduced-motion: reduce) {
 .has-sky .sky-dial, .has-sky :is(h1, .lede, .fine, .eyebrow, .tag, .sky-hello, .hero-proof) { transition: none; }
}
/* Hero copy and offer disclosures must never wait for intersection animations. */
.has-sky .reveal { opacity: 1; transform: none; transition-property: color, background-color, border-color; transition-delay: 0s; }
/* Foreground contrast must match the painted sky immediately, including slider jumps. */
.has-sky :is(h1, .lede, .fine, .eyebrow, .tag, .hero-proof), .has-sky .sky-dial { transition: none; }

/* Hero: centred headline in the live sky, then the sunrise photo runs edge to
   edge and melts up into that sky, so the page and the picture are one scene.
   App messages float on the photo as glass cards; the two phones rest on the
   water. Proportion over fitting the fold. */
.hero.hero-integrated { padding-top:clamp(64px,9vh,104px); padding-bottom:40px; }
.hero-integrated .hero-composition { display:flex; flex-direction:column; }
.hero-integrated .hero-copy { gap:20px; position:relative; z-index:4; }
.hero-integrated .hero-copy > .tag { display:none; }
.hero-integrated .hero-copy h1 { font-size:clamp(46px,6vw,92px); line-height:1.02; }
.hero-integrated .sky-hello { margin:-4px 0 0; font-size:clamp(17px,1.4vw,21px); }
.hero-integrated .hero-actions { position:relative; z-index:5; gap:12px; margin-top:10px; }
.hero-integrated .hero-copy .fine { margin:0; font-size:13.5px; }
.hero-integrated .stage-wrap { position:relative; width:100vw; margin:clamp(-56px,-4vh,-24px) calc(50% - 50vw) 0; perspective:none; }
.hero-integrated .stage { transform:none; will-change:auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.hero-integrated .stage-inner { aspect-ratio:auto; height:clamp(440px,74vh,860px); border-radius:0; background:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 9%,#000 24%,#000 90%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 9%,#000 24%,#000 90%,transparent 100%); }
.hero-integrated .stage-inner > img { object-position:50% 62%; }
.hero-integrated .stage-inner::after { display:none; }
.hero-integrated .stage-phone { bottom:12%; width:clamp(118px,11vw,190px); max-height:none; border-width:4px; border-radius:24px; }
.hero-integrated .stage-phone.p1 { left:max(4%,calc(50% - 590px)); transform:rotate(-6deg); }
.hero-integrated .stage-phone.p2 { right:max(4%,calc(50% - 590px)); transform:rotate(6deg); }
.hero-integrated .hero-status { position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero-integrated .hero-status .chip { position:absolute; display:flex; gap:12px; padding:12px 18px 12px 12px; border-radius:18px; font-size:13px; line-height:1.4; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.7); box-shadow:0 18px 40px -14px rgba(27,21,37,.5), 0 2px 6px rgba(27,21,37,.08); white-space:nowrap; }
.hero-integrated .hero-status .chip strong { font-size:15px; line-height:1.3; }
.hero-integrated .hero-status .chip .ic { flex-shrink:0; width:38px; height:38px; border-radius:12px; font-size:18px; }
.hero-integrated .hero-status .c1 { left:calc(50% - min(30vw,430px)); top:20%; }
.hero-integrated .hero-status .c2 { right:calc(50% - min(30vw,430px)); top:29%; animation-delay:-2s; }
.hero-integrated .hero-status .c3 { left:calc(50% - min(20vw,280px)); bottom:11%; animation-delay:-4s; }
.hero-integrated .logos { margin-top:20px; gap:12px 28px; font-size:13.5px; position:relative; z-index:4; }
@media (max-width:900px) {
 .hero-integrated .stage-inner { height:clamp(420px,62vh,640px); }
 .hero-integrated .hero-status .chip { gap:9px; padding:9px 14px 9px 9px; font-size:11.5px; border-radius:15px; }
 .hero-integrated .hero-status .chip strong { font-size:13px; }
 .hero-integrated .hero-status .chip .ic { width:30px; height:30px; font-size:15px; border-radius:10px; }
 .hero-integrated .hero-status .c1 { left:6%; top:17%; }
 .hero-integrated .hero-status .c2 { right:6%; top:29%; }
 .hero-integrated .hero-status .c3 { display:none; }
}
@media (max-width:640px) {
 .hero.hero-integrated { padding-top:72px; padding-bottom:28px; }
 .hero-integrated .hero-copy { gap:16px; }
 .hero-integrated .hero-copy h1 { font-size:clamp(40px,11vw,52px); }
 .hero-integrated .hero-copy .hero-actions { width:100%; gap:10px; }
 .hero-integrated .hero-copy .hero-actions .btn { width:100%; min-height:50px; }
 .hero-integrated .stage-wrap { margin-top:-12px; }
 .hero-integrated .stage-inner { height:clamp(440px,118vw,560px); }
 .hero-integrated .stage-inner > img { object-position:50% 60%; }
 .hero-integrated .stage-phone { width:26%; bottom:9%; border-width:3px; border-radius:14px; }
 .hero-integrated .stage-phone.p1 { left:5%; }
 .hero-integrated .stage-phone.p2 { right:5%; }
 .hero-integrated .hero-status .chip { gap:8px; padding:8px 12px 8px 8px; font-size:11px; border-radius:14px; }
 .hero-integrated .hero-status .chip strong { font-size:12.5px; }
 .hero-integrated .hero-status .chip .ic { width:28px; height:28px; font-size:14px; border-radius:9px; }
 .hero-integrated .hero-status .c1 { left:5%; top:13%; }
 .hero-integrated .hero-status .c2 { right:5%; top:27%; }
}
@media (prefers-reduced-motion: reduce) { .hero-integrated .hero-status .chip { animation:none; } }
.has-sky .sky-hello { transition: opacity .22s ease; }
.has-sky[data-sky-tone="dark"] h1 { text-shadow: 0 1px 3px rgba(18,13,24,.9), 0 0 8px rgba(18,13,24,.45); }
.has-sky h1 .grad-text { text-shadow: none; }
/* Business hero shares the homepage's seamless lake composition. */
.hero.hero-biz.hero-integrated { padding-top:clamp(32px,4vh,48px); }
.hero-biz.hero-integrated > .hero-grid { display:none; }
.hero-integrated .sky-hint { display:none; }
.hero.hero-golden { padding:clamp(24px,4svh,40px) 0 clamp(32px,4svh,48px); }
.hero-golden > .hero-grid { display:none; }
.hero-golden > .sky-canvas { -webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent 100%); mask-image:linear-gradient(to bottom,#000 65%,transparent 100%); }
.hero-golden .hero-composition { max-width:1440px; }
.hero-golden .hero-copy { gap:clamp(18px,2.5svh,28px); min-width:0; }
.hero-golden .hero-copy h1.golden-art { position:relative; width:min(100%,1280px,136vh); max-width:none; margin:0; line-height:0; }
.golden-art img { display:block; width:100%; height:auto; filter:drop-shadow(0 0 22px rgba(224,165,52,.13)); }
.heart-orb { position:absolute; left:50%; top:56.4%; width:5.8%; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; isolation:isolate; }
.heart-orb::before { content:""; position:absolute; inset:-65%; border-radius:50%; background:radial-gradient(circle,rgba(16,30,43,.96) 0 21%,rgba(46,76,104,.75) 32%,rgba(160,206,255,.28) 48%,transparent 70%); opacity:var(--sky-night,0); }
.heart-sun { position:absolute; inset:3%; border-radius:50%; background:radial-gradient(circle at 40% 35%,#fffef1 0%,#fff5b9 28%,#ffd568 66%,#eb9c24 94%); box-shadow:0 0 8px #fff3bc,0 0 24px #ffcc5c,0 0 50px rgba(240,174,45,.6); opacity:calc(1 - var(--sky-night,0)); }
.heart-sun::after { content:""; position:absolute; inset:-32%; border-radius:50%; background:repeating-conic-gradient(from 0deg,transparent 0deg 12deg,rgba(255,232,155,.5) 13deg 14deg,transparent 15deg 24deg); mask-image:radial-gradient(circle,transparent 43%,#000 48%,transparent 71%); }
.heart-moon { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:var(--sky-night,0); filter:drop-shadow(0 0 6px rgba(210,231,255,.9)) drop-shadow(0 0 18px rgba(142,187,246,.6)); }
.hero-golden .hero-copy h1.heavenly-art { width:min(100%,1180px,max(240px,calc((100svh - 300px)*1.5))); }
.heavenly-art .heart-orb { top:49%; width:5%; }
.heavenly-art::after { content:""; position:absolute; inset:0; pointer-events:none; background:url('assets/beginning-heavenly-headphones-hero.png') center/100% 100% no-repeat; clip-path:inset(73% 0 0); filter:brightness(3.5); opacity:var(--sky-night,0); }
.hero-golden .hero-actions { margin:0; width:100%; gap:16px; padding:6px; }
.hero-golden .hero-actions > .btn { min-height:62px; height:auto; padding:14px 26px; }
.hero-golden .hero-actions > .btn-dark { border:1px solid #dfb65e; box-shadow:inset 0 0 0 1px rgba(255,227,160,.12),0 0 0 3px rgba(222,174,72,.08),0 8px 24px -8px rgba(124,82,18,.35); }
.hero-golden .hero-actions > .btn-dark:hover, .hero-golden .hero-actions > .btn-dark:focus-visible { border-color:#f3d28c; box-shadow:inset 0 0 0 1px rgba(255,227,160,.18),0 0 0 4px rgba(222,174,72,.12),0 8px 30px -6px rgba(212,160,54,.38); }
.hero-golden [data-sample-toggle] { position:relative; isolation:isolate; max-width:100%; min-width:0; height:auto; min-height:52px; padding-block:14px; white-space:normal; line-height:1.3; text-align:center; border-color:rgba(206,158,64,.55); box-shadow:0 3px 18px rgba(174,117,23,.12); }
.hero-golden [data-sample-label] { min-width:0; }
.hero-golden [data-sample-toggle][data-playing="true"] { min-height:62px; font-size:17px; border-color:#e4b54f; background:linear-gradient(135deg,#fffaf0,#fff1cf); color:#49330f; box-shadow:0 0 0 3px rgba(232,182,66,.13),0 8px 30px rgba(184,124,22,.2); }
.hero-golden [data-sample-icon] svg { display:block; width:32px; height:32px; overflow:visible; }
.sample-pause-glyph, .sample-heart-glyph { opacity:0; transform-origin:16px 16px; }
[data-playing="true"] .sample-play-glyph { opacity:0; }
[data-playing="true"] .sample-pause-glyph { animation:sample-pause-morph 3.2s ease-in-out infinite; }
[data-playing="true"] .sample-heart-glyph { animation:sample-golden-heart 3.2s ease-in-out infinite; filter:drop-shadow(0 0 4px rgba(239,183,56,.75)); }
@keyframes sample-pause-morph { 0%,38%,100% { opacity:1; transform:scale(1); } 9%,26% { opacity:0; transform:scale(.65); } 17% { opacity:.7; transform:scale(.9); } }
@keyframes sample-golden-heart { 0%,38%,100% { opacity:0; transform:scale(.55); } 9% { opacity:1; transform:scale(1.2); } 17% { opacity:.3; transform:scale(.85); } 26% { opacity:1; transform:scale(1.12); } }
@media (prefers-reduced-motion:reduce) { [data-playing="true"] .sample-pause-glyph { animation:none; opacity:1; } [data-playing="true"] .sample-heart-glyph { animation:none; opacity:0; } }
.hero-golden [data-sample-toggle]::before, .hero-golden [data-sample-toggle]::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; }
.hero-golden [data-sample-toggle]::before { border:1px solid rgba(224,170,66,.65); animation:sample-heart-ring 3.2s ease-out infinite; }
.hero-golden [data-sample-toggle]::after { box-shadow:0 0 0 2px rgba(237,189,85,.14),0 0 24px rgba(224,166,48,.25); animation:sample-heart-glow 3.2s ease-in-out infinite; }
.hero-golden [data-sample-icon] { display:inline-block; flex-shrink:0; transform-origin:center; animation:sample-heart-icon 3.2s ease-in-out infinite; }
.hero-golden [data-sample-toggle]:hover::after, .hero-golden [data-sample-toggle]:focus-visible::after { box-shadow:0 0 0 3px rgba(237,189,85,.22),0 0 30px rgba(224,166,48,.4); }
@keyframes sample-heart-icon { 0%,38%,100% { transform:scale(1); } 9% { transform:scale(1.2); } 17% { transform:scale(1); } 26% { transform:scale(1.13); } }
@keyframes sample-heart-glow { 0%,40%,100% { opacity:.35; } 9%,26% { opacity:1; } 17% { opacity:.5; } }
@keyframes sample-heart-ring { 0%,18% { transform:scale(1); opacity:0; } 26% { opacity:.65; } 65%,100% { transform:scale(1.055,1.23); opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  .hero-golden [data-sample-toggle]::before { animation:none; opacity:0; }
  .hero-golden [data-sample-toggle]::after, .hero-golden [data-sample-icon] { animation:none; }
}
.hero-golden .sky-hello { font-size:16px; line-height:1.5; max-width:42ch; margin:0; text-wrap:balance; }
@media (max-width:640px) {
  .hero.hero-golden { padding:24px 0 36px; }
  .hero-golden .hero-copy h1.heavenly-art { width:min(100%,max(240px,calc((100svh - 380px)*1.5))); }
  .golden-art img { height:auto; }
  .hero-golden .hero-copy { gap:20px; }
  .hero-golden .hero-copy .hero-actions { width:min(100%,400px); gap:14px; }
  .hero-golden .hero-copy .hero-actions > .btn { width:100%; min-height:62px; padding:14px 20px; }
  .hero-golden .sky-hello { display:block; font-size:15px; }
}
@media (min-width:641px) and (max-height:540px) {
  .hero.hero-golden { padding:18px 0 24px; }
  .hero-golden .hero-copy { grid-template-columns:minmax(0,1fr) minmax(240px,340px); grid-template-rows:auto auto; column-gap:28px; row-gap:16px; align-items:center; }
  .hero-golden .hero-copy h1.heavenly-art { grid-column:1; grid-row:1 / 3; width:min(100%,calc((100svh - 130px)*1.5)); }
  .hero-golden .sky-hello { display:block; grid-column:2; grid-row:1; align-self:end; font-size:15px; }
  .hero-golden .hero-copy .hero-actions { grid-column:2; grid-row:2; align-self:start; gap:12px; }
  .hero-golden .hero-copy .hero-actions > .btn { width:100%; min-height:54px; padding:10px 18px; }
}
.hero-integrated .stage-inner > img { filter:brightness(calc(1 - var(--sky-night,0) * .68)) saturate(calc(1 - var(--sky-night,0) * .7)); }
.hero-biz.hero-integrated .hero-copy { gap:24px; }
.hero-biz.hero-integrated .hero-copy > .tag { display:inline-flex; }
.hero-biz.hero-integrated .hero-copy h1.h1-long { max-width:1100px; font-size:clamp(40px,5.1vw,76px); line-height:1.07; text-wrap:balance; }
.hero-biz.hero-integrated h1 .serif { margin-inline-end:.08em; }
.hero-biz.hero-integrated .hero-actions { margin-top:4px; }
.hero-biz.hero-integrated .stage-wrap { margin-top:12px; }
.hero-biz.hero-integrated .trust-row { position:relative; z-index:3; margin-top:12px; }
.business-hero-film { position:relative; z-index:2; width:100%; margin:48px auto 20px; text-align:left; }
.business-hero-film .brand-film-heading { gap:32px; padding:24px; border-radius:22px; background:rgba(255,252,245,.94); color:#202b27; }
.business-hero-film .brand-film-heading p { color:#5b6761; }
.business-hero-film .brand-film-heading .eyebrow { color:#9b6c1a; }
.business-hero-film .brand-film-heading h2 { font-size:clamp(32px,4vw,48px); }
.business-hero-film .brand-film-frame { border:1px solid rgba(214,162,46,.45); box-shadow:0 0 0 5px rgba(214,162,46,.05),0 24px 60px -30px rgba(75,37,64,.35); }
@media (max-width:600px) { .business-hero-film { margin-top:32px; } .business-hero-film .brand-film-heading { grid-template-columns:1fr; gap:14px; } .business-hero-film .brand-film-heading p { font-size:16px; } .business-hero-film .brand-film-frame { width:100%; } }
@media (max-width:640px) {
  .hero.hero-biz.hero-integrated { padding-top:32px; }
  .hero-biz.hero-integrated .hero-copy { gap:20px; }
  .hero-biz.hero-integrated .hero-copy h1.h1-long { font-size:clamp(32px,8.4vw,48px); }
  .hero-biz.hero-integrated .stage-wrap { margin-top:8px; }
  .hero-biz.hero-integrated .hero-actions { flex-wrap:wrap; }
  .hero-biz.hero-integrated .hero-actions .btn { flex:1 1 140px; width:auto; }
}

/* ==== Homepage hero film (full-bleed video fills the whole hero) ==== */
.hero.hero-golden.hero-film { position:relative; display:flex; align-items:flex-end; min-height:calc(100svh - 81px); padding:0 0 clamp(24px,5svh,56px); background:#2a2018; overflow:hidden; isolation:isolate; }
.hero-film > .sky-canvas, .hero-film > .sky-fx, .hero-film > .sky-hint, .hero-film > .sun { display:none !important; }
.hero-film-video { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:44% 40%; pointer-events:none; }
.hero-audio-controls { position:absolute; z-index:6; top:94px; right:max(20px,env(safe-area-inset-right)); }
.hero-audio-controls summary { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #fff9; border-radius:50%; background:#17131b66; color:#fff; cursor:pointer; list-style:none; }
.hero-audio-controls summary::-webkit-details-marker { display:none; }
.hero-audio-controls summary:focus-visible { outline:3px solid #f2d28a; outline-offset:4px; }
.hero-audio-panel { position:absolute; top:56px; right:0; width:min(340px,calc(100vw - 40px)); padding:16px; border:1px solid #e9dfcc; border-radius:20px; background:#fffcf7; color:#1b1525; box-shadow:0 12px 40px #0003; }
.hero-audio-panel > span { display:block; margin-bottom:10px; font-size:13px; font-weight:600; }
.hero-sample-player { display:block; width:100%; height:44px; border-radius:24px; color-scheme:light; }
.hero-film-scrim { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom,rgba(20,14,8,0) 55%,rgba(20,14,8,.42) 100%); }
.hero-film .hero-composition { position:relative; z-index:2; width:100%; }
.hero-film .hero-copy { gap:0; }
.hero.hero-golden.hero-film .hero-actions { width:auto; margin:0 auto; padding:0; gap:8px; flex-wrap:wrap; justify-content:center; }
.hero.hero-golden.hero-film .hero-actions > .btn { width:auto; height:auto; min-height:34px; padding:6px 14px; font-size:13px; line-height:1.2; gap:6px; letter-spacing:.01em; }
.hero.hero-golden.hero-film .hero-actions > .btn-ghost { background:rgba(255,252,245,.88); color:#2a2018; border-color:rgba(214,162,46,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hero.hero-golden.hero-film [data-sample-toggle][data-playing="true"] { min-height:34px; font-size:13px; }
.hero.hero-golden.hero-film [data-sample-icon] svg { width:15px; height:15px; }
@media (max-width:900px) {
  .hero.hero-golden.hero-film { min-height:clamp(480px,128vw,calc(100svh - 81px)); }
}
@media (max-width:640px) {
  .hero.hero-golden.hero-film { padding-bottom:20px; }
  .hero.hero-golden.hero-film .hero-copy .hero-actions { width:auto; gap:8px; }
  .hero.hero-golden.hero-film .hero-copy .hero-actions > .btn { width:auto; min-height:32px; padding:6px 12px; font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce) { .hero-film-video { display:none; } .hero.hero-golden.hero-film { background:#2a2018 url('assets/hero-film-poster.webp') 44% 40%/cover no-repeat; } }
.hero-film .sky-hello { margin:0 auto 12px; text-align:center; text-shadow:0 1px 2px rgba(30,18,6,.55),0 0 18px rgba(30,18,6,.45); }
/* Hero afterglow: live ribbons over the final frame once the film ends */
.hero-film-glow { position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; opacity:0; pointer-events:none; transform-origin:40% 30%; transition:opacity .2s linear; }
.hero-film-ended .hero-film-glow { opacity:1; }
@media (prefers-reduced-motion:reduce) { .hero-film-glow { display:none; } }
/* Homepage: no colour bar; the nav floats seamlessly over the full-height hero film, solid again once scrolled */
body.home-film .top-line { display:none; }
body.home-film .nav { position:fixed; left:0; right:0; top:0; padding-top:0; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; box-shadow:none; transition:background .35s, box-shadow .35s, border-color .35s; }
body.home-film .nav::before { content:""; position:absolute; inset:0 0 -40px; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(26,17,9,.5), rgba(26,17,9,.22) 55%, rgba(26,17,9,0)); transition:opacity .35s; }
body.home-film .nav:not(.is-stuck) .brand-name { color:#fff; text-shadow:0 1px 10px rgba(20,12,4,.35); }
body.home-film .nav:not(.is-stuck) .brand-tag { color:#f3cf7e; }
body.home-film .nav:not(.is-stuck) .btn-ghost { background:rgba(255,252,245,.16); color:#fff; border-color:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
body.home-film .nav:not(.is-stuck) .btn-ghost:hover { background:rgba(255,252,245,.28); }
body.home-film .nav:not(.is-stuck) .btn-dark { background:rgba(255,252,245,.95); color:#1b1525; }
@media (min-width:992px) {
  body.home-film .nav:not(.is-stuck) .menu a { color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(20,12,4,.45); }
  body.home-film .nav:not(.is-stuck) .menu a:hover { color:#fff; }
}
body.home-film .nav.is-stuck, body.home-film.menu-open .nav { background:rgba(255,252,247,.86); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); border-bottom-color:var(--line); box-shadow:0 8px 30px -20px rgba(27,21,37,.25); }
body.home-film .nav.is-stuck::before, body.home-film.menu-open .nav::before { opacity:0; }
body.home-film.menu-open .nav .brand-name { color:var(--ink); text-shadow:none; }
body.home-film.menu-open .nav .brand-tag { color:#b8861c; }
body.home-film .hero.hero-golden.hero-film { min-height:100svh; }
@media (max-width:900px) { body.home-film .hero.hero-golden.hero-film { min-height:clamp(560px,150vw,100svh); } }
@media (max-width:991.98px) { body.home-film .menu { inset:76px 0 auto; } }
body.home-film:not(.menu-open) .nav:not(.is-stuck) { background-color:transparent !important; } /* beats the sky-tint inline colour while over the film */

/* Business hero actions: keep the two primary choices compact and balanced. */
body.b2b .hero.hero-biz.hero-integrated .hero-copy .hero-actions > .btn {
  height: 44px;
  min-height: 44px;
  padding: 0 19px;
  gap: 8px;
  font-size: 14px;
  line-height: 1;
}
@media (max-width: 640px) {
  body.b2b .hero.hero-biz.hero-integrated .hero-copy .hero-actions > .btn {
    flex: 0 1 auto;
    width: auto;
    min-height: 44px;
    padding: 0 17px;
    font-size: 13.5px;
  }
}

/* Full-bleed business campaign hero, matched to the homepage film treatment. */
body.business-film-page .top-line { display:none; }
body.business-film-page .nav {
  position:fixed; inset:0 0 auto; padding-top:0; background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent;
  box-shadow:none; transition:background .35s, box-shadow .35s, border-color .35s;
}
body.business-film-page .nav::before {
  content:""; position:absolute; inset:0 0 -40px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,rgba(16,27,26,.62),rgba(16,27,26,.22) 58%,transparent);
  transition:opacity .35s;
}
body.business-film-page .nav:not(.is-stuck) .brand-name { color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.32); }
body.business-film-page .nav:not(.is-stuck) .brand-tag { color:#f3cf7e; }
body.business-film-page .nav:not(.is-stuck) .menu a { color:rgba(255,255,255,.94); text-shadow:0 1px 8px rgba(0,0,0,.35); }
body.business-film-page .nav:not(.is-stuck) .menu a:hover { color:#fff; }
body.business-film-page .nav:not(.is-stuck) .btn-ghost { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.58); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
body.business-film-page .nav:not(.is-stuck) .btn-dark { background:rgba(255,252,245,.96); color:#1b1525; }
body.business-film-page .nav.is-stuck, body.business-film-page.menu-open .nav { background:rgba(255,252,247,.94); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); border-bottom-color:var(--line); box-shadow:0 8px 30px -20px rgba(27,21,37,.25); }
body.business-film-page .nav.is-stuck::before, body.business-film-page.menu-open .nav::before { opacity:0; }
body.business-film-page .nav.is-stuck .brand-name, body.business-film-page.menu-open .nav .brand-name { color:var(--ink); text-shadow:none; }
body.business-film-page .nav.is-stuck .brand-tag, body.business-film-page.menu-open .nav .brand-tag { color:#b8861c; }
body.business-film-page .nav.is-stuck .menu a, body.business-film-page.menu-open .nav .menu a { color:var(--muted); text-shadow:none; }
body.business-film-page .nav.is-stuck .menu a:hover, body.business-film-page.menu-open .nav .menu a:hover { color:var(--ink); }
body.business-film-page .nav.is-stuck .btn-ghost, body.business-film-page.menu-open .nav .btn-ghost { background:#fff; color:var(--ink); border-color:var(--line); }
body.business-film-page .nav.is-stuck .btn-dark, body.business-film-page.menu-open .nav .btn-dark { background:#0e3b2c; color:#fff; }

.hero.business-campaign-hero {
  position:relative; display:flex; align-items:flex-end; min-height:100svh;
  padding:96px 0 34px; overflow:hidden; isolation:isolate; background:#17131b;
}
.business-campaign-video { object-position:center 48%; }
.business-campaign-poster { position:absolute; inset:0; z-index:1; display:block; overflow:hidden; pointer-events:none; background:#17131b; opacity:1; transition:opacity .24s ease; }
.business-campaign-poster img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.business-campaign-poster.is-dissolved { opacity:0; }
.business-campaign-scrim {
  background:linear-gradient(180deg,rgba(9,18,17,.18) 0%,rgba(9,18,17,.02) 34%,rgba(9,18,17,.32) 58%,rgba(9,18,17,.76) 100%);
}
.business-campaign-hero .hero-composition {
  position:relative; z-index:2; width:min(var(--container),calc(100% - 40px)); min-height:calc(100svh - 130px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
.business-campaign-hero .hero-copy { width:min(100%,1060px); align-items:center; text-align:center; gap:0; }
.business-campaign-hero .hero-copy h1 {
  max-width:100%; color:#fff; font-size:clamp(42px,5.2vw,76px); line-height:1.04;
  text-shadow:0 3px 22px rgba(0,0,0,.34); text-wrap:balance;
}
.business-campaign-hero .hero-copy h1 .grad-text { color:#f2d28a; background:none; -webkit-text-fill-color:currentColor; }
.business-campaign-hero .hero-actions { margin-top:0; justify-content:center; }
.business-campaign-hero .hero-actions .btn-dark { background:#f7f3ea; color:#1b302b; box-shadow:0 8px 26px rgba(0,0,0,.2); }
.business-campaign-hero .hero-actions .btn-ghost { background:rgba(255,252,245,.16); color:#fff; border-color:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.business-campaign-hero .trust-row { margin:22px auto 0; color:rgba(255,255,255,.94); text-shadow:0 1px 8px rgba(0,0,0,.4); gap:8px 24px; font-size:13px; }
.business-campaign-hero .trust-row li::before { background:#f2d28a; box-shadow:0 0 0 4px rgba(242,210,138,.2); }
.business-campaign-sound {
  position:absolute; z-index:4; top:94px; right:max(20px,calc((100vw - 1440px)/2));
  display:grid; place-items:center; width:42px; height:42px; padding:0;
  border:1px solid rgba(255,255,255,.72); border-radius:50%; color:#fff;
  background:rgba(15,30,28,.38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  cursor:pointer; transition:background .2s,transform .2s,border-color .2s;
}
.business-campaign-sound:hover { transform:scale(1.05); background:rgba(15,30,28,.7); border-color:#f2d28a; }
.business-campaign-sound:focus-visible { outline:3px solid #f2d28a; outline-offset:3px; }
.business-campaign-pause {
  position:absolute; z-index:4; top:94px;
  right:max(74px,calc((100vw - 1440px)/2 + 54px));
  min-height:44px; padding:8px 16px; border:1px solid rgba(255,255,255,.72);
  border-radius:24px; background:rgba(15,30,28,.72); color:#fff;
  font-size:13px; cursor:pointer;
}
.business-campaign-sound { width:44px; height:44px; }
/* Keep conversion controls visible even if reveal animation initialization fails. */
.js .business-campaign-hero .reveal { opacity:1; transform:none; }
.business-film-page .seg { max-width:100%; flex-wrap:wrap; justify-content:center; }
.business-film-page .seg button { min-height:44px; }
.business-film-page .contact-card a { overflow-wrap:anywhere; }
@media (max-width:640px) {
  .hero.hero-biz.hero-integrated.business-campaign-hero { padding:100px 0 max(24px,env(safe-area-inset-bottom)); }
  .business-campaign-hero .hero-composition { min-height:calc(100svh - 130px); }
  .hero.hero-biz.hero-integrated.business-campaign-hero .hero-copy h1.h1-long { font-size:clamp(36px,9.4vw,52px); }
  .business-campaign-hero .hero-actions { margin-top:0; }
  .business-campaign-hero .trust-row { margin-top:18px; gap:8px 15px; font-size:11.5px; }
  .business-campaign-hero .trust-row li { flex:0 0 calc(50% - 8px); justify-content:center; }
  .business-campaign-sound { top:88px; right:max(16px,env(safe-area-inset-right)); width:44px; height:44px; }
  .business-campaign-pause { top:88px; right:max(72px,calc(env(safe-area-inset-right) + 56px)); }
  .business-campaign-hero .trust-row { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .business-campaign-hero .trust-row li { display:block; min-width:0; text-align:center; line-height:1.4; }
  .business-campaign-hero .trust-row li::before { display:inline-block; margin-right:8px; vertical-align:middle; }
  body.b2b .hero.hero-biz.hero-integrated.business-campaign-hero .hero-copy .hero-actions > .btn { min-height:48px; }
  .business-film-page .nav-cta .btn { min-height:44px; }
  .business-film-page .menu-btn { width:44px; height:44px; }
}
@media (max-width:460px) {
  .business-film-page .nav .brand-text { display:grid; }
  .business-film-page .nav-cta .btn-ghost { display:none; }
}
@media (max-width:380px) {
  .business-film-page .seg { border-radius:24px; }
  .business-film-page .seg button { padding-inline:12px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .business-campaign-video { display:none; }
  .hero.business-campaign-hero { background:#17131b url('assets/business-hero-poster.jpg') center 48%/cover no-repeat; }
  .business-campaign-poster { display:none; }
  .business-campaign-sound { display:none; }
  .business-campaign-pause { display:none; }
}
@media (prefers-reduced-motion:reduce) and (max-width:640px) and (orientation:portrait) {
  .hero.business-campaign-hero { background-image:url('assets/business-hero-poster-mobile.jpg'); }
}