/* LuxStay sales site, fourth version.
   The palette is the product's teal and coral turned up: the night sea, the lagoon and the light coming on.
   Typefaces are the product's own. Every product picture is drawn in code from the demo build's sample data. */

@font-face {
  font-family: "Albert Sans";
  src: url("/assets/fonts/albert-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --night: #0A2222;
  --stage: #0D2626;
  --teal: #194D4D;
  --lagoon: #17BFB0;
  --aqua: #BFEDE6;
  --gold: #FFC857;
  --mint: #8FE3C9;

  /* The accent is the light: lamplight amber, used only where light would be (the lit words, the
     button, the logo's bulb, one tile). */
  --accent: #E9A23B;
  --accent-hi: #F4B95C;
  --accent-shadow: rgba(233, 162, 59, 0.6);
  --accent-soft: #FBE3B5;
  --accent-soft-ink: #5B3A00;
  --light: #FFC76A;                       /* the logo's light */
  --warm: 233, 162, 59;                   /* the same light, for glows */
  --lit: linear-gradient(100deg, #E9A23B 0%, #F6BF63 50%, #FFD98A 100%);
  --tile-a: linear-gradient(140deg, #E9A23B 0%, #F6C877 100%);
  --tile-c: linear-gradient(160deg, #EDE3D2 0%, #F6F0E5 100%);
  --sand: #F4EEE4;
  --paper: #F9F8F6;
  --white: #FFFFFF;
  --ink: #0F2B2B;
  --soft: #3D4F4F;
  --muted: #5C7676;
  --muted-dark: #9DB5B2;
  --line: #DCE3E0;
  --display: "Albert Sans", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 5vw, 48px);
  --edge: clamp(8px, 1vw, 14px);          /* how far the big rounded panels sit in from the window */
  --round: clamp(26px, 3.4vw, 48px);      /* their corner */
  --sea:
    radial-gradient(60% 55% at 88% 24%, rgba(var(--warm), 0.26) 0%, rgba(var(--warm), 0) 70%),
    radial-gradient(55% 60% at 6% 96%, rgba(23, 191, 176, 0.4) 0%, rgba(23, 191, 176, 0) 70%),
    radial-gradient(120% 90% at 50% 20%, #164646 0%, #0E2E2E 55%, #0A2222 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { text-wrap: balance; }
.line { display: block; }
p, dd, li { text-wrap: pretty; }

h2 {
  font: 800 clamp(2.125rem, 1.15rem + 3.9vw, 4.25rem)/1 var(--display);
  letter-spacing: -0.04em;
}

.wrap {
  width: 100%;
  max-width: calc(1180px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.center { margin-inline: auto; text-align: center; }
h2.center { max-width: 15em; }
.sub { max-width: 34em; margin-top: 18px; font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem); color: var(--soft); }
.panel--night .sub { color: #D5E4E1; }

/* Words that light up: the brand's coral light, as type. */
.lit {
  background: var(--lit);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 30;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 12px 26px -14px var(--accent-shadow);
  color: var(--ink);
  font: 700 1.0625rem/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.2s var(--ease);
}
.button:hover { border-color: var(--accent-hi); background: var(--accent-hi); transform: translateY(-2px); }
.button:active { transform: none; }
.button[disabled] { opacity: 0.6; cursor: default; }

.button--ghost { border-color: rgba(249, 248, 246, 0.36); background: rgba(249, 248, 246, 0.06); box-shadow: none; color: var(--paper); }
.button--ghost:hover { border-color: var(--paper); background: rgba(249, 248, 246, 0.14); }
.button__aside { margin-left: 10px; font-weight: 500; opacity: 0.7; }

.button--small { min-height: 42px; padding: 0 20px; font-size: 0.9375rem; box-shadow: none; }

/* ---------- the mark: a light under a roof ---------- */

.mark { width: 32px; height: 32px; flex: none; }
.mark__tile { fill: #1F5C5C; }
.mark__roof, .mark__floor { fill: none; stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round; }
.mark__roof { stroke-width: 13; }
.mark__floor { stroke-width: 9; }
.mark__light { fill: var(--light); }

/* ---------- floating bar ---------- */

.nav {
  position: fixed;
  inset: 22px 0 auto;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding-inline: calc(var(--gutter) + var(--edge));
  pointer-events: none;
}

.nav__pill {
  display: flex;
  align-items: center;
  gap: 30px;
  width: min(1080px, 100%);
  padding: 8px 8px 8px 16px;
  border: 1px solid rgba(249, 248, 246, 0.16);
  border-radius: 999px;
  background: rgba(10, 34, 34, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.7);
  color: var(--paper);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: inherit;
  font: 700 1.3125rem/1 var(--display);
  letter-spacing: -0.025em;
  text-decoration: none;
}

.nav__links { display: flex; gap: clamp(16px, 2.2vw, 28px); font-size: 0.9375rem; font-weight: 600; }
.nav__links a { color: #C9D8D5; text-decoration: none; white-space: nowrap; transition: color 0.15s ease; }
.nav__links a:hover { color: var(--paper); }

.nav__toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(249, 248, 246, 0.22);
  border-radius: 50%;
  background: rgba(249, 248, 246, 0.08);
  color: var(--paper);
  cursor: pointer;
}
.nav__bars, .nav__bars::before, .nav__bars::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s var(--ease), opacity 0.2s ease; }
.nav__bars { position: relative; }
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -5px; }
.nav__bars::after { top: 5px; }
.nav[data-open="true"] .nav__bars { background: transparent; }
.nav[data-open="true"] .nav__bars::before { transform: translateY(5px) rotate(45deg); }
.nav[data-open="true"] .nav__bars::after { transform: translateY(-5px) rotate(-45deg); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Too narrow for the links in a row: they move into a sheet under the bar, opened by the menu button. */
@media (max-width: 819px) {
  .nav__pill { position: relative; gap: 10px; }
  .js .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    border: 1px solid rgba(249, 248, 246, 0.16);
    border-radius: 26px;
    background: #0C2828;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.75);
    font-size: 1.0625rem;
  }
  .nav[data-open="true"] .nav__links { display: flex; }
  .nav__links a { padding: 15px 16px; border-radius: 18px; color: var(--paper); }
  .nav__links a + a { border-top: 1px solid rgba(249, 248, 246, 0.08); }
  .nav__links a:hover { background: rgba(249, 248, 246, 0.08); }
}

@media (max-width: 1000px) {
  .nav__pill { gap: 18px; }
}

@media (max-width: 420px) {
  .nav__pill { padding-left: 12px; gap: 8px; }
  .brand { gap: 8px; font-size: 1.1875rem; }
  .mark { width: 28px; height: 28px; }
  .button--small { padding: 0 14px; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  margin: var(--edge);
  padding-top: clamp(118px, 12vw, 168px);
  border-radius: var(--round);
  background: var(--sea);
  color: var(--paper);
  overflow: hidden;
}

.hero__grid { display: grid; gap: 44px; align-items: center; padding-bottom: clamp(40px, 6vw, 76px); }

.chip {
  display: inline-flex;
  padding: 7px 14px;
  border: 1px solid rgba(249, 248, 246, 0.22);
  border-radius: 999px;
  background: rgba(249, 248, 246, 0.08);
  font-size: 0.875rem;
  font-weight: 600;
  color: #DCEBE8;
}

.hero h1 {
  margin-top: 22px;
  font: 800 clamp(3rem, 1.2rem + 6.9vw, 6.25rem)/0.95 var(--display);
  letter-spacing: -0.05em;
}
.hero h1 .lit { display: block; padding-bottom: 0.08em; }

.lead {
  max-width: 32em;
  margin-top: 26px;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: #D5E4E1;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__note { margin-top: 18px; font-size: 0.9375rem; color: var(--muted-dark); }

@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: 56px; }
}

/* The owner texts; the manager answers from memory; the portal answers from the record.
   Drawn like a phone: the owner's bubbles on the right, the manager's on the left, a compose bar below. */
.hero__demo {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px clamp(16px, 2vw, 26px) 18px;
  border: 1px solid rgba(249, 248, 246, 0.16);
  border-radius: 32px;
  background: rgba(249, 248, 246, 0.07);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 44px 80px -44px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.thread__head { display: flex; align-items: center; gap: 10px; padding: 10px 4px 12px; border-bottom: 1px solid rgba(249, 248, 246, 0.1); }
.thread__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(249, 248, 246, 0.14); font: 700 0.8125rem/1 var(--display); }
.thread__name { font: 700 1rem/1 var(--display); letter-spacing: -0.01em; }
.thread__sub { font-size: 0.75rem; color: var(--muted-dark); }

.thread { padding-top: 12px; }
.scene { display: flex; flex-direction: column; gap: 6px; }

.stamp { align-self: center; font-size: 0.75rem; font-weight: 600; color: var(--muted-dark); }
.stamp--late { margin-top: 6px; }

.turn { position: relative; display: flex; flex-direction: column; max-width: 86%; }
.turn--you { align-self: flex-end; align-items: flex-end; }
.turn--them { align-self: flex-start; align-items: flex-start; }

.msg { padding: 11px 15px 12px; border-radius: 20px; line-height: 1.4; }
.turn--you .msg {
  border-bottom-right-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 700 clamp(1.0625rem, 1rem + 0.4vw, 1.25rem)/1.3 var(--display);
  letter-spacing: -0.015em;
}
.turn--them .msg { border-bottom-left-radius: 6px; background: rgba(249, 248, 246, 0.13); color: var(--paper); font-size: 0.9375rem; transition: opacity 0.7s ease; }
.turn--them .msg.is-dim { opacity: 0.5; }

/* "Delivered", then "Read": the two sit in the same spot, so the line never changes width */
.msg__meta { position: relative; height: 1.1em; margin-top: 5px; font-size: 0.6875rem; font-weight: 600; color: var(--muted-dark); }
.turn--you .msg__meta { width: 100%; }
.turn--you .msg__meta span { position: absolute; right: 4px; top: 0; white-space: nowrap; }
.turn--them .msg__meta { padding-left: 6px; color: var(--light); }

/* the manager is typing: three dots in a bubble, sitting exactly where the reply will land */
.typing {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 42px;
  padding: 0 16px;
  border-radius: 20px 20px 20px 6px;
  background: rgba(249, 248, 246, 0.13);
}
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-dark); }

/* the record answers */
.chat__to {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--light);
}
.chat__to::after { content: ""; flex: 1; height: 1px; background: rgba(var(--warm), 0.4); transform-origin: left; }

.chat__answers { display: grid; gap: 6px; margin-top: 4px; }

/* a portal row: the tag down the left, the figure and its note beside it */
.ans {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 10px 14px 11px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.55);
  color: var(--ink);
}
.ans strong { grid-column: 2; font: 700 1rem/1.25 var(--display); letter-spacing: -0.01em; }
.ans__meta { grid-column: 2; margin-top: 1px; font-size: 0.8125rem; color: var(--muted); }
.ans__tag { grid-row: 1 / 3; grid-column: 1; justify-self: start; padding: 3px 9px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; background: #E4EFEC; color: #1C4A47; }
.ans__tag--lit { background: var(--accent-soft); color: var(--accent-soft-ink); }
@media (max-width: 479px) {
  .ans { grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding: 11px 14px 12px; }
  .ans__tag { grid-row: auto; margin-bottom: 1px; }
  .ans strong, .ans__meta { grid-column: 1; }
}

/* the compose bar: the owner's question is typed here, then sent */
.compose { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(249, 248, 246, 0.1); }
.compose__field {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(249, 248, 246, 0.2);
  border-radius: 999px;
  background: rgba(10, 34, 34, 0.35);
  color: var(--paper);
  font-size: 0.9375rem;
  overflow: hidden;
}
/* The typed line sits out of flow, so a long question can never widen the card around it;
   the script scrolls this line to keep the end of the question in view, as a real field does. */
.compose__line { position: absolute; inset: 0 16px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.compose__text { flex: none; }
.compose__hint { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted-dark); transition: opacity 0.2s ease; }
.compose.is-typing .compose__hint { opacity: 0; }
.compose__caret { flex: none; width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--light); opacity: 0; }
.compose__send { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(249, 248, 246, 0.14); transition: background 0.2s ease, transform 0.18s var(--ease); }
.compose__send::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border: solid var(--paper); border-width: 2px 2px 0 0; transform: translate(-50%, -30%) rotate(-45deg); }
.compose.is-typing .compose__send { background: var(--accent); }
.compose.is-typing .compose__send::after { border-color: var(--ink); }
.compose.is-sent .compose__send { transform: scale(0.86); }

.hero__side { min-width: 0; }
.chat__sample { margin: 12px 18px 0; font-size: 0.8125rem; color: var(--muted-dark); }

/* ---------- what an owner stops hearing ---------- */

.marquee {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px var(--gutter) 22px;
  border-top: 1px solid rgba(249, 248, 246, 0.12);
}

.marquee__label {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
}

.marquee__window {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track { display: flex; gap: 44px; width: max-content; padding-right: 44px; }
.marquee__track span {
  font: 600 1.125rem/1.3 var(--display);
  color: #DCE8E5;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .marquee { flex-direction: column; align-items: flex-start; gap: 12px; }
  .marquee__window { flex: none; width: 100%; }
}

/* ---------- bands and panels ---------- */

.band { padding-block: clamp(72px, 10vw, 136px); }

.panel {
  margin: var(--edge);
  padding-block: clamp(64px, 9vw, 124px);
  border-radius: var(--round);
}
.panel--aqua { background: linear-gradient(180deg, #A5E5DC 0%, #D3F2ED 55%, #EDFAF8 100%); }
.panel--sand { background: linear-gradient(180deg, #F8E4C4 0%, #F8EEDD 60%, #FAF5EC 100%); }
.panel--night { background: var(--sea); color: var(--paper); }

/* ---------- the story ---------- */

.story__grid { display: grid; gap: 20px; margin-top: clamp(40px, 5vw, 68px); }

.story__col { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 40px); border-radius: 34px; }
.story__col--before { background: #ECE7DE; }
.story__col--after { background: linear-gradient(160deg, #A5E5DC 0%, #D3F2ED 60%, #EDFAF8 100%); }

.story__title { font: 800 clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem)/1.08 var(--display); letter-spacing: -0.03em; }

.beats { flex: 1; display: grid; grid-auto-rows: 1fr; gap: 12px; margin-top: 22px; }
.beats li { display: flex; flex-direction: column; justify-content: center; padding: 16px 18px 17px; border-radius: 20px 20px 20px 6px; background: var(--white); }
.beat__when { font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.beat__what { margin-top: 4px; }

.beats .beat--sting { background: var(--night); }
.beats .beat--sting .beat__when { color: var(--accent); }
.beats .beat--sting .beat__what { color: var(--paper); font-weight: 600; }

.beats .beat--win { background: var(--teal); }
.beats .beat--win .beat__when { color: var(--aqua); }
.beats .beat--win .beat__what { color: var(--paper); font: 800 clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem)/1.1 var(--display); letter-spacing: -0.03em; }

@media (min-width: 900px) {
  .story__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px -22px rgba(13, 38, 38, 0.6);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 700px) {
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; }
}

.tab {
  position: relative;
  flex: none;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: 600 1rem/1 var(--body);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tab:hover { background: rgba(15, 43, 43, 0.07); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.tabpanel { display: grid; gap: 20px; margin-top: 26px; }

.tabpanel__words {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 46px);
  border-radius: 34px;
  background: var(--white);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.4);
}
.tabpanel__words h3 { font: 800 clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem)/1.02 var(--display); letter-spacing: -0.035em; }
.tabpanel__words p { margin-top: 14px; color: var(--soft); }

.checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.checks li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}
.checks li::before {
  content: "";
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border: solid var(--lagoon);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.fineprint { margin-top: 24px; font-size: 0.875rem; color: #2B5A55; }

@media (min-width: 980px) {
  .tabpanel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 26px; }
}

/* ---------- product vignettes, drawn from the demo build's sample data ---------- */

.vig {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 400px;
  padding: clamp(20px, 2.6vw, 38px);
  border-radius: 34px;
  background: linear-gradient(160deg, #103636 0%, #0A2424 100%);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.4), 0 44px 70px -44px rgba(13, 38, 38, 0.7);
  color: var(--paper);
  overflow: hidden;
}

.vig__head { font-size: 0.9375rem; color: var(--muted-dark); }
.vig__head strong { margin-right: 8px; font: 700 1.375rem/1 var(--display); letter-spacing: -0.02em; color: var(--paper); }

/* the day */
.tl { position: relative; display: grid; gap: 8px; padding: 14px; border-radius: 20px; background: var(--white); color: var(--ink); }
.tl__hours { display: grid; grid-template-columns: repeat(7, 1fr); margin-left: 96px; font-size: 0.6875rem; font-weight: 600; color: var(--muted); }
.tl__row { display: grid; grid-template-columns: 96px 1fr; align-items: center; }
.tl__label { font-size: 0.8125rem; font-weight: 600; color: var(--teal); }
.tl__track { position: relative; height: 28px; border-radius: 9px; background: #F0F5F3; }

.pill {
  position: absolute;
  top: 4px;
  max-width: 64%;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  font: 600 0.6875rem/20px var(--body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the hour axis runs 9am to 3pm in seven columns */
.at-11 { left: 28.6%; }
.at-1 { left: 57.1%; max-width: 42%; }
.at-2 { left: 71.4%; max-width: 28%; }
.pill--grey { background: #8C99A8; color: var(--white); }
.pill--lagoon { background: var(--lagoon); color: #04302C; }
.pill--mint { background: #8FE3C9; color: #0B4A3A; }
.pill--gold { background: var(--gold); color: #4A3300; }

.tl__now {
  position: absolute;
  top: 34px;
  bottom: 12px;
  left: calc(110px + (100% - 124px) * 0.34);
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.tl__now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

@media (max-width: 560px) {
  .tl__hours { margin-left: 86px; }
  .tl__hours span:nth-child(even) { visibility: hidden; }
  .tl__row { grid-template-columns: 86px 1fr; }
  .tl__now { left: calc(100px + (100% - 114px) * 0.34); }
  .pill { max-width: 56%; }
  .at-1 { max-width: 41%; }
  .at-2 { max-width: 27%; }
}

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tiles p {
  padding: 13px 14px;
  border: 1px solid rgba(249, 248, 246, 0.12);
  border-radius: 16px;
  background: rgba(249, 248, 246, 0.07);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #CFE0DD;
}
.tiles strong { display: block; margin-bottom: 4px; font: 800 1.875rem/1 var(--display); color: var(--paper); }

/* requests and repairs: one job, and where it stands */
.prop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(249, 248, 246, 0.14);
  border-radius: 18px;
  background: rgba(249, 248, 246, 0.07);
}
.prop__kind { font-size: 0.75rem; font-weight: 600; color: var(--muted-dark); }
.prop__title { font: 700 1.0625rem/1.25 var(--display); letter-spacing: -0.01em; }
.prop__state { flex: none; padding: 9px 16px; border-radius: 999px; background: rgba(23, 191, 176, 0.2); color: var(--aqua); font-size: 0.875rem; font-weight: 700; }

.steps { display: grid; gap: 14px; padding: 4px 4px 0; }
.done { display: flex; align-items: center; gap: 10px; font: 700 1.125rem/1.2 var(--display); color: var(--aqua); }
.tick { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--lagoon); }
.tick::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* the step still to come: the light, not yet a tick */
.done--next { color: var(--paper); }
.tick--next { border: 2.5px solid var(--accent); background: none; }
.tick--next::after { content: none; }

/* the money */
.tag { margin-left: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(23, 191, 176, 0.2); font-size: 0.75rem; font-weight: 700; color: var(--aqua); }

.lines { margin: 0; padding: 6px 18px; border-radius: 20px; background: var(--white); color: var(--ink); }
.lines div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #EBF0EE; font-size: 0.9375rem; }
.lines div:last-child { border-bottom: 0; }
.lines dd { font-weight: 700; font-variant-numeric: tabular-nums; }

.payout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--lit);
  color: var(--ink);
}
.payout span { font-weight: 700; }
.payout strong { font: 800 clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem)/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }

/* bookings */
.cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--muted-dark); text-align: center; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 6px; padding: 14px; border-radius: 20px; background: var(--white); }

.stay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--ink);
  font: 600 0.8125rem/1.2 var(--body);
  white-space: nowrap;
  overflow: hidden;
}
.stay i { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); font-size: 0.6875rem; font-style: normal; font-weight: 700; }
.stay--airbnb { background: #CFE0FF; }
.stay--vrbo { background: #E2E6EA; }
.stay--direct { background: #C6F1D7; }
.days-1-5 { grid-column: 1 / 6; }
.days-1-2 { grid-column: 1 / 3; }
.days-6-7 { grid-column: 6 / 8; }
.cal__foot { font-size: 0.875rem; color: var(--muted-dark); }

/* guests */
.vig--guest { align-items: center; }
.phone {
  display: grid;
  gap: 10px;
  width: min(290px, 100%);
  padding: 24px 18px;
  border: 8px solid #071A1A;
  border-radius: 38px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(249, 248, 246, 0.25);
  color: var(--ink);
}
.phone__hi { font: 800 1.4375rem/1.08 var(--display); letter-spacing: -0.03em; }
.phone__sub { font-size: 0.875rem; color: var(--muted); }
.phone__card { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: #F0F5F3; font-size: 0.875rem; }
.phone__card strong { font-weight: 700; }
.phone__card--lagoon { background: var(--aqua); }

/* ---------- Lexi ---------- */

/* Who she is, then two bands: what she does today (lit), and the routine automation that is not
   Lexi at all. */

.meet__grid { display: grid; gap: 26px; align-items: center; }
.meet h2 { font-size: clamp(2.5rem, 1.3rem + 4.8vw, 4.75rem); line-height: 0.98; letter-spacing: -0.045em; margin-top: 20px; }
.meet h2 .lit { display: block; padding-bottom: 0.08em; }
.meet h3 { font: 800 clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem)/1.05 var(--display); letter-spacing: -0.03em; }
.meet__lead { max-width: 32em; font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.5; color: #D5E4E1; }
.meet__rule { max-width: 30em; margin-top: 20px; padding: 18px 20px; border: 1px solid rgba(var(--warm), 0.4); border-radius: 20px; background: rgba(var(--warm), 0.08); color: #E6EFEC; }
.meet__rule strong { display: block; margin-bottom: 4px; font: 700 1.1875rem/1.25 var(--display); letter-spacing: -0.015em; color: var(--paper); }

/* Three plain points under the heading: stacked, then one row from 900px. */
.meet__points { display: grid; gap: 22px 32px; margin-top: clamp(28px, 4.5vw, 48px); }
.meet__points li { padding-top: 16px; border-top: 1px solid rgba(249, 248, 246, 0.14); }
.meet__points p { max-width: 32em; color: #D5E4E1; line-height: 1.5; }
.meet__points strong { display: block; margin-bottom: 6px; font: 700 1.0625rem/1.4 var(--display); letter-spacing: -0.015em; color: var(--paper); }
@media (min-width: 900px) {
  .meet__points { grid-template-columns: repeat(3, 1fr); }
}

/* a band's heading */
.does { margin-top: clamp(40px, 5.5vw, 72px); }
.does__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

.talks { display: grid; gap: 14px; margin-top: 24px; }
.talk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(249, 248, 246, 0.14);
  border-radius: 26px;
  background: rgba(249, 248, 246, 0.06);
}
.talk__does { margin: 0; font: 700 1.1875rem/1.2 var(--display); letter-spacing: -0.02em; color: var(--paper); }
.talk__sub { margin: -4px 0 6px; font-size: 0.8125rem; line-height: 1.45; color: #B4C9C6; }
.talk__who { font-size: 0.8125rem; font-weight: 700; color: var(--muted-dark); text-align: right; }
.talk__earlier { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 600; color: var(--muted-dark); }
.talk__earlier::before, .talk__earlier::after { content: ""; flex: 1; height: 1px; background: rgba(249, 248, 246, 0.16); }
.talk__ask { align-self: flex-end; max-width: 92%; padding: 11px 15px; border-radius: 18px 18px 6px 18px; background: var(--paper); color: var(--ink); font-weight: 600; line-height: 1.35; }
.talk__say { align-self: flex-start; max-width: 96%; padding: 12px 15px 13px; border-radius: 18px 18px 18px 6px; background: rgba(249, 248, 246, 0.13); box-shadow: inset 2px 0 0 var(--light); color: var(--paper); font-size: 0.9375rem; line-height: 1.45; }
.talk__lexi { display: inline-block; margin-bottom: 5px; padding: 2px 10px; border-radius: 999px; background: var(--lagoon); color: #04302C; font-size: 0.75rem; font-weight: 700; }
/* a drafted job: the write-up itself, not a sentence about it */
.talk__say--draft { min-width: 76%; }
.talk__kind { font-size: 0.75rem; font-weight: 600; color: var(--muted-dark); }
.talk__title { font: 700 1.0625rem/1.25 var(--display); letter-spacing: -0.01em; }
.talk__chip { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-ink); font-size: 0.8125rem; font-weight: 700; }
/* where her drafts wait for a person */
.queue {
  display: grid;
  gap: 18px;
  align-items: center;
  margin-top: 12px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(249, 248, 246, 0.14);
  border-radius: 26px;
  background: rgba(249, 248, 246, 0.06);
}
.queue h4 { margin: 0; font: 700 1.375rem/1.15 var(--display); letter-spacing: -0.025em; }
.queue__words p { max-width: 30em; margin-top: 8px; color: #C9DAD7; }
.queue__list { display: grid; gap: 10px; }
.queue__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 16px;
  border: 1px solid rgba(249, 248, 246, 0.14);
  border-radius: 18px;
  background: rgba(249, 248, 246, 0.07);
}
.queue__kind { font-size: 0.75rem; font-weight: 600; color: var(--muted-dark); }
.queue__title { font: 700 1.0625rem/1.25 var(--display); letter-spacing: -0.01em; }
.queue__btns { display: flex; gap: 8px; }
.queue__yes, .queue__no { padding: 9px 16px; border: 1.5px solid transparent; border-radius: 999px; font-size: 0.875rem; font-weight: 700; line-height: 1; }
.queue__yes { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.queue__no { border-color: rgba(249, 248, 246, 0.36); color: var(--paper); }

.routines { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid rgba(249, 248, 246, 0.14); }
.routines ul { display: grid; gap: 12px 24px; margin-top: 16px; }
.routines li { position: relative; padding-left: 34px; color: #C9DAD7; }
.routines li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--lagoon); }
.routines li::after { content: ""; position: absolute; left: 8px; top: 6px; width: 5px; height: 10px; border: solid #04302C; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.routines strong { display: block; color: var(--paper); font-weight: 700; }
.fineprint--night { max-width: 56em; color: var(--muted-dark); }

@media (min-width: 700px) {
  .talks { grid-template-columns: 1fr 1fr; }
  .routines ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .queue { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; }
}
@media (min-width: 1040px) {
  .meet__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; }
  .talks { grid-template-columns: repeat(3, 1fr); }
  .routines ul { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- the film ---------- */

.film { margin-top: clamp(32px, 5vw, 60px); }
.film figcaption { margin-top: 14px; font-size: 0.875rem; color: var(--muted-dark); text-align: center; }
.film video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: clamp(16px, 2.4vw, 30px);
  background: var(--night);
  box-shadow: 0 0 0 1px rgba(249, 248, 246, 0.14), 0 50px 100px -50px #000;
}

/* ---------- what changes ---------- */

.bento { display: grid; gap: 14px; margin-top: clamp(32px, 5vw, 60px); }

.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
  min-height: 260px;
  padding: clamp(24px, 3vw, 42px);
  border-radius: 34px;
  transition: transform 0.35s var(--ease);
}
.tile:hover { transform: translateY(-6px); }
.tile__big { font: 800 clamp(1.875rem, 1.2rem + 2.5vw, 3.25rem)/1 var(--display); letter-spacing: -0.04em; }
.tile__small { max-width: 25em; font-weight: 500; }

.stick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.stick b, .stick span { padding: 9px 15px; border-radius: 999px; font: 600 0.9375rem/1 var(--body); white-space: nowrap; }
.stick b { background: var(--ink); color: var(--paper); }
.stick span { background: rgba(255, 255, 255, 0.72); color: var(--ink); }
.tile:has(.stick) { gap: 22px; }
.tile:has(.stick) .tile__big { margin-bottom: 22px; }

.tile--coral { background: var(--tile-a); }
.tile--gold { background: var(--tile-c); }
.tile--lagoon { background: linear-gradient(140deg, #17BFB0 0%, #86E2D6 100%); }
.tile--night { background: var(--sea); color: var(--paper); }

@media (min-width: 600px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile--wide { grid-column: span 2; }
}
@media (min-width: 860px) {
  .bento { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

/* ---------- tailored to how your villa runs: four numbered steps, plainly a process ----------
   Not the coloured tiles of "What changes for you". A big number, its title, and its sentence;
   a hairline rule between steps. Scoped to #tailored because .steps is already the name of the
   job checklist inside the requests-and-repairs vignette. */

#tailored .steps { display: block; gap: 0; margin-top: clamp(36px, 5vw, 64px); padding: 0; }

#tailored .steps__item {
  display: grid;
  grid-template-areas: "num" "title" "text";
  gap: 8px;
  padding-block: clamp(26px, 3.6vw, 48px);
  border-top: 1px solid var(--line);
}

#tailored .steps__num {
  grid-area: num;
  font: 800 clamp(2.25rem, 1.65rem + 2.4vw, 3.75rem)/1 var(--display);
  letter-spacing: -0.045em;
  background: var(--lit);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#tailored .steps__title {
  grid-area: title;
  font: 700 clamp(1.3125rem, 1.2rem + 0.6vw, 1.625rem)/1.2 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
}

#tailored .steps__text { grid-area: text; color: var(--soft); }

@media (min-width: 760px) {
  #tailored .steps__item {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas: "num text" "title text";
    row-gap: 6px;
    column-gap: clamp(28px, 4vw, 64px);
    align-content: start;
  }
}

/* ---------- the season ---------- */

.season { max-width: 860px; margin: clamp(36px, 5vw, 64px) auto 0; padding: clamp(20px, 3vw, 40px); border-radius: 34px; background: rgba(255, 255, 255, 0.72); }

.season__months { display: grid; grid-template-columns: repeat(9, 1fr); font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.season__months li { padding: 0 0 8px 6px; border-left: 1px solid rgba(15, 43, 43, 0.14); }

.season__steps > li { display: grid; gap: 14px; padding-block: 18px 22px; border-top: 1px solid rgba(15, 43, 43, 0.1); }

.season__track {
  display: grid;
  grid-template-columns: repeat(18, 1fr);  /* half months, October to June */
  height: 14px;
  border-radius: 7px;
  background: rgba(15, 43, 43, 0.07);
}

.season__bar { border-radius: 7px; background: var(--teal); }
.season__bar--agree { grid-column: 1 / 6; background: var(--accent); }
.season__bar--light { grid-column: 4 / 6; background: var(--mint); }
.season__bar--season {
  grid-column: 6 / 15;
  background: repeating-linear-gradient(135deg, rgba(15, 43, 43, 0.32) 0 5px, rgba(15, 43, 43, 0.1) 5px 10px);
}
.season__bar--full { grid-column: 15 / 19; background: var(--lagoon); }

.season h3 { font: 700 1.1875rem/1.3 var(--display); letter-spacing: -0.015em; }
.season p { margin-top: 4px; color: var(--soft); font-size: 1rem; }

/* ---------- questions ---------- */

.qa { display: grid; gap: 14px; max-width: 980px; margin: clamp(32px, 5vw, 60px) auto 0; }
.qa > div { padding: 26px 30px; border: 1px solid var(--line); border-radius: 26px; background: var(--white); }
.qa dt { font: 700 1.25rem/1.25 var(--display); letter-spacing: -0.02em; }
.qa dd { margin-top: 8px; color: var(--soft); }

@media (min-width: 760px) {
  .qa { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* ---------- book a demo ---------- */

.demo__grid { display: grid; gap: 40px; align-items: start; }
.demo h2 { font-size: clamp(2.75rem, 1.4rem + 5.4vw, 5.5rem); line-height: 0.95; letter-spacing: -0.05em; }
.demo h2 .lit { display: block; padding-bottom: 0.08em; }
.demo__words p { max-width: 29em; margin-top: 22px; font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.5; color: #D5E4E1; }
.demo .demo__terms { font-size: 1rem; color: var(--muted-dark); }

@media (min-width: 980px) {
  .demo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); column-gap: 72px; align-items: center; }
}

.form {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 32px;
  background: var(--paper);
  box-shadow: 0 0 0 8px rgba(249, 248, 246, 0.14), 0 50px 90px -50px #000;
  color: var(--ink);
}

.field label { display: block; margin-bottom: 6px; font-size: 0.9375rem; font-weight: 700; }
.optional { margin-left: 6px; font-weight: 500; color: var(--muted); }
/* The link label's tag: the page's amber, said as encouragement, not a requirement. */
.recommended { margin-left: 6px; font-weight: 600; color: var(--accent); }

.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #C5D0CC;
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font: 400 1rem/1.4 var(--body);
}
.field textarea { resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 3px solid rgba(23, 191, 176, 0.4); outline-offset: 0; border-color: var(--lagoon); }
.field input[aria-invalid="true"] { border-color: #B53A1B; }
.field__error { margin-top: 6px; font-size: 0.9375rem; color: #B53A1B; }
.field__hint { margin: -2px 0 8px; font-size: 0.875rem; color: var(--muted); }
/* The one-time link nudge: the hint's size, dark enough to read on the card, a quiet amber rule at its side. */
.field__nudge {
  margin-top: 8px;
  padding: 3px 0 3px 12px;
  border-left: 3px solid var(--accent);
  font-size: 0.875rem;
  color: var(--soft);
}
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form .button { width: 100%; }
.form__note { font-size: 0.875rem; color: var(--muted); }
.form__status { font-weight: 700; color: var(--teal); }
.form__status:empty { display: none; }
.form__status[data-state="error"] { color: #B53A1B; }

/* ---------- foot ---------- */

.foot {
  margin: 0 var(--edge) var(--edge);
  padding-top: 34px;
  border-radius: var(--round);
  background: var(--night);
  font-size: 0.9375rem;
  color: var(--muted-dark);
  overflow: hidden;
}
.foot a { color: var(--paper); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot__word {
  margin: 8px 0 -0.13em;
  background: var(--lit);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 800 clamp(5rem, 25.5vw, 24rem)/1 var(--display);
  letter-spacing: -0.06em;
  text-align: center;
  white-space: nowrap;
}

/* ---------- not found ---------- */

.lost { display: grid; place-items: center; min-height: 90vh; text-align: center; }
.lost h1 { font: 800 2rem/1.1 var(--display); letter-spacing: -0.03em; color: var(--teal); }
.lost p { margin-top: 12px; }

/* ---------- reels: sequences that play by themselves ----------
   A reel's frames share one grid cell, so the box is as tall as its tallest frame and nothing
   moves when they change. Inside a frame every element is laid out from the start and only made
   visible at its moment, so nothing below it shifts. Without the script, the first frame is shown
   complete; the compose bars, typing dots and progress bars are not there at all. */

.js .thread, .js .story__sets, .js .takes, .js .shot { display: grid; }
.js [data-frame] { grid-area: 1 / 1; min-width: 0; transition: opacity 0.45s ease, transform 0.45s var(--ease), visibility 0s linear 0.45s; }
.js [data-frame]:not([data-on="true"]) { visibility: hidden; opacity: 0; }
.js [data-frame][data-on="false"] { transform: translateY(-10px); }
.js [data-frame][data-on="true"] { transition: opacity 0.4s ease, visibility 0s; }
html:not(.js) [data-frame]:not([data-on="true"]), html:not(.js) [data-off], html:not(.js) .compose, html:not(.js) .reel__bar, html:not(.js) .think { display: none; }

/* the progress line: one segment per frame, the live one filling as its frame plays */
.reel__bar { display: flex; gap: 5px; }
.reel__bar i { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(249, 248, 246, 0.22); overflow: hidden; }
.reel__bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--light); transform: scaleX(0); transform-origin: left; }
.reel__bar i.is-done::after { transform: none; }
.reel__bar i.is-live::after { transform: scaleX(var(--p, 0)); }
.reel__bar--ink i { background: rgba(15, 43, 43, 0.12); }
.reel__bar--ink i::after { background: var(--teal); }
.hero__demo > .reel__bar { margin: 0 4px; }

/* the weeks: the heading over them changes with each one and never changes height */
.story h2 { display: grid; align-content: end; min-height: 2.05em; }
/* every week's title is laid in the same spot: one fades out as the next fades in, never blank */
.swap > span { grid-area: 1 / 1; opacity: 0; transition: opacity 0.22s ease; }
.swap > span.is-on { opacity: 1; }
.story__deck { margin-top: clamp(28px, 4vw, 44px); }
.story__deck > .reel__bar { max-width: 320px; margin: 0 auto; }
.story__deck .story__grid { margin-top: 24px; }

/* One pair of panels for all four weeks. Every week's two columns are laid in the same two cells, so
   they are the same size, and between weeks nothing changes but the cards and the headings' words. */
.js .story__sets { gap: 20px; margin-top: 24px; }
.js .story__set, .js .story__set > .story__grid { display: contents; }
.js .story__col { min-width: 0; }
.js .story__col--before { grid-area: 1 / 1; }
.js .story__col--after { grid-area: 2 / 1; }
@media (min-width: 900px) {
  .js .story__sets { grid-template-columns: 1fr 1fr; gap: 24px; }
  .js .story__col--after { grid-area: 1 / 2; }
}

/* a Lexi card: three exchanges in the same space, typed into its own compose bar */
.take { display: flex; flex-direction: column; gap: 10px; }
.reply { position: relative; display: flex; align-self: flex-start; max-width: 96%; }
.reply .talk__say { max-width: none; }
.reply .talk__say--draft { min-width: 0; }
.typing--lexi { height: 40px; }
.compose--card { margin-top: auto; padding-top: 12px; }
.compose--card .compose__field { min-height: 38px; font-size: 0.875rem; }
.compose--card .compose__send { width: 30px; height: 30px; }
.compose--card .compose__send::after { width: 8px; height: 8px; }

/* ---------- more out of the same villa: the upside, then the leaks ---------- */

.more .sub { max-width: 40em; }

.ups { display: grid; gap: 18px; margin-top: clamp(36px, 5vw, 64px); }
.up {
  display: grid;
  gap: 24px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 34px;
  background: var(--white);
}
.up__tag { justify-self: start; padding: 4px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-ink); font-size: 0.75rem; font-weight: 700; }
.up h3 { margin-top: 14px; font: 800 clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem)/1.05 var(--display); letter-spacing: -0.03em; }
.up__words > p:not(.up__tag) { margin-top: 14px; color: var(--soft); }

/* a product picture, dark like the vignettes above, looping by itself */
.shot {
  position: relative;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 28px;
  background: linear-gradient(160deg, #103636 0%, #0A2424 100%);
  box-shadow: 0 30px 60px -40px rgba(13, 38, 38, 0.7);
  color: var(--paper);
  overflow: hidden;
}
.frame { display: flex; flex-direction: column; gap: 12px; }
.shot__head { font-size: 0.875rem; color: var(--muted-dark); }
.shot__head strong { margin-right: 8px; font: 700 1.25rem/1 var(--display); letter-spacing: -0.02em; color: var(--paper); }
.shot__foot { font-size: 0.8125rem; color: var(--muted-dark); }

/* pricing: one button, a moment's reading, three suggestions */
.press { display: flex; }
.press__btn { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: var(--ink); font: 700 0.9375rem/1 var(--body); transition: transform 0.18s var(--ease), background 0.18s ease; }
.press.is-pressed .press__btn { transform: scale(0.96); background: var(--accent-hi); }
.press.is-pressed .press__btn::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid rgba(var(--warm), 0.6); }
.think { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--muted-dark); }
.think i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-dark); }
.think i:nth-of-type(3) { margin-right: 6px; }

.recs { display: grid; gap: 10px; }
.rec { display: grid; gap: 5px; padding: 14px 16px 15px; border-radius: 18px; background: var(--white); color: var(--ink); }
.rec__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rec__row strong { font: 700 1rem/1.25 var(--display); letter-spacing: -0.01em; }
.rec__pri { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; }
.rec__pri--high { background: var(--accent-soft); color: var(--accent-soft-ink); }
.rec__pri--mid { background: #E4EFEC; color: #1C4A47; }
.rec__pri--low { background: #EEF0F0; color: #4B5B5B; }
.rec__why { font-size: 0.875rem; color: var(--soft); }
.rec__act { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.8125rem; font-weight: 700; }
.rec__act span { font-weight: 600; color: var(--muted); }

/* analytics: four figures, the split, the pace ahead */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { position: relative; display: grid; gap: 2px; padding: 12px 14px 14px; border: 1px solid rgba(249, 248, 246, 0.12); border-radius: 16px; background: rgba(249, 248, 246, 0.07); overflow: hidden; }
.kpi span { font-size: 0.75rem; color: var(--muted-dark); }
.kpi strong { font: 800 clamp(1.25rem, 1rem + 0.9vw, 1.5rem)/1.1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w, 0%); background: var(--lagoon); transform-origin: left; }
.kpi__bar--78 { --w: 78%; }
.streams { padding: 10px 14px 12px; border: 1px solid rgba(249, 248, 246, 0.12); border-radius: 16px; background: rgba(249, 248, 246, 0.07); }
.streams__label { margin-bottom: 4px; font-size: 0.75rem; color: var(--muted-dark); }
.streams dl { display: grid; gap: 5px; }
.streams div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; color: #CFE0DD; }
.streams dd { font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; }
.ahead { display: grid; gap: 3px; padding: 12px 14px 13px; border-radius: 16px; background: var(--white); color: var(--ink); }
.ahead__tag { justify-self: start; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-ink); font-size: 0.6875rem; font-weight: 700; }
.ahead strong { font: 700 1rem/1.25 var(--display); letter-spacing: -0.01em; }
.ahead__meta { font-size: 0.8125rem; color: var(--muted); }

/* maintenance: two flags, one of them scheduled in a click */
.flags { display: grid; gap: 10px; }
.flag { display: grid; gap: 6px; padding: 14px 16px 15px; border-radius: 18px; background: var(--white); color: var(--ink); transition: background 0.5s ease; }
.flag.is-done { background: #EAF7F4; }
.flag__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.flag__row strong { font: 700 1rem/1.25 var(--display); letter-spacing: -0.01em; }
.flag__villa { font-size: 0.875rem; color: var(--soft); }
/* the Schedule button, the small form it opens, and the scheduled line share one spot */
.flag__act { display: grid; align-items: center; min-height: 34px; margin-top: 4px; }
.flag__act > * { grid-area: 1 / 1; }
.flag__btn { justify-self: start; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--teal); color: var(--paper); font-size: 0.8125rem; font-weight: 700; transition: transform 0.18s var(--ease), opacity 0.3s ease; }
.flag.is-pressed .flag__btn { opacity: 0; transform: scale(0.9); }
.flag__form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flag__form span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.flag__form .flag__save { border: 0; border-radius: 999px; background: var(--teal); color: var(--paper); font-weight: 700; transition: transform 0.18s var(--ease); }
.flag__form.is-pressed .flag__save { transform: scale(0.92); }
.js .reel .flag.is-done .flag__form.is-on { opacity: 0; }
.flag__done { display: inline-flex; align-items: center; gap: 9px; font-size: 0.8125rem; font-weight: 700; color: #0F6F66; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.5s var(--ease); }
.flag__done::before { content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid var(--lagoon); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.flag.is-done .flag__done { opacity: 1; transform: none; }
html:not(.js) .flag__form, html:not(.js) .flag__done { display: none; }

@media (min-width: 900px) {
  .up { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: 40px; }
  .up:nth-child(even) .up__words { order: 2; }
}

/* the leaks */
.leaks__title { margin-top: clamp(52px, 7vw, 92px); font: 800 clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem)/1.05 var(--display); letter-spacing: -0.03em; }
.leaks__grid { display: grid; gap: 14px; margin-top: clamp(22px, 3vw, 36px); }
.leak {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--white);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.leak:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -36px rgba(10, 34, 34, 0.45); }
.leak__tag { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-ink); font-size: 0.75rem; font-weight: 700; }
.leak h4 { margin: 0; font: 800 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.12 var(--display); letter-spacing: -0.025em; }
.leak__what { color: var(--soft); font-size: 0.9375rem; line-height: 1.5; }
.leak__see { margin-top: auto; padding: 14px 16px 15px; border-radius: 16px 16px 16px 6px; background: #EAF7F4; box-shadow: inset 2px 0 0 var(--lagoon); color: var(--soft); font-size: 0.9375rem; line-height: 1.5; }
.leak__see span { display: block; margin-bottom: 4px; font-size: 0.75rem; font-weight: 700; color: #0F6F66; }
.leaks__close { max-width: 30em; margin-top: clamp(32px, 5vw, 56px); font: 800 clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem)/1.2 var(--display); letter-spacing: -0.025em; }
.leaks__more { max-width: 40em; margin-top: 14px; color: var(--soft); font-size: 1.0625rem; line-height: 1.6; }
.fineprint--plain { max-width: 44em; margin-top: 14px; color: var(--muted); }

/* The mistake and how-to-check text is long, so four across would be cramped: two columns
   from tablet width up, phone to desktop. */
@media (min-width: 720px) { .leaks__grid { grid-template-columns: 1fr 1fr; gap: 18px; } }

/* ---------- ask Lexi: one chat window, in the page, and above it from the floating button ----------
   A small messenger: a header with Lexi's mark, a message pane, the suggested questions as quick
   replies, an input bar with a round send, and the settled small print at its foot. */

.ask { max-width: 720px; margin: clamp(28px, 4vw, 44px) auto 0; }
.ask__title { text-align: center; font: 800 clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem)/1.15 var(--display); letter-spacing: -0.025em; }

/* A slim bar to type into. Nothing above it until something has been said; then the conversation
   opens above the bar, inside the same rounded frame. */
.ask__window {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  border: 1.5px solid var(--line);
  border-radius: 31px;
  background: var(--white);
  box-shadow: 0 18px 40px -30px rgba(10, 34, 34, 0.5);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ask__window:focus-within { border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(23, 191, 176, 0.25), 0 18px 40px -30px rgba(10, 34, 34, 0.5); }
.ask__log { display: none; }
.ask__window[data-talking="true"] { border-radius: 26px; }
.ask__window[data-talking="true"] .ask__log { display: flex; flex-direction: column; gap: 8px; max-height: 320px; padding: 16px 14px 12px; border-bottom: 1px solid var(--line); background: #F0F5F3; overflow-y: auto; overscroll-behavior: contain; }
.ask__msg { max-width: 86%; padding: 10px 14px 11px; border-radius: 18px; font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.ask__msg--lexi { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(10, 34, 34, 0.08); }
.ask__msg--you { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--teal); color: var(--paper); font-weight: 600; }
.ask__link { display: inline-flex; align-items: center; min-height: 34px; margin-top: 8px; padding: 0 14px; border-radius: 999px; background: var(--accent); color: #1B1200; font-size: 0.875rem; font-weight: 700; text-decoration: none; }
.ask__link:hover { background: var(--accent-hi); }

/* three dots while she answers */
.ask__typing { display: inline-flex; gap: 5px; padding: 4px 0; }
.ask__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }

.ask__bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; }
.ask__avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--night); color: var(--light); }
.ask__bar input { flex: 1; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; }
.ask__bar input::placeholder { color: var(--muted); }
.ask__send { position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; transition: background 0.15s ease, transform 0.18s var(--ease); }
.ask__send::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: solid var(--ink); border-width: 2.5px 2.5px 0 0; transform: translate(-50%, -30%) rotate(-45deg); }
.ask__send:hover { background: var(--accent-hi); }
.ask__send:active { transform: scale(0.92); }
.ask__send[disabled] { opacity: 0.5; cursor: default; }

.ask__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.ask__chip { min-height: 32px; padding: 0 11px; border: 1.5px solid rgba(15, 43, 43, 0.18); border-radius: 999px; background: transparent; color: var(--teal); font: 600 0.78125rem/1.2 var(--body); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.ask__chip:hover { border-color: var(--teal); background: var(--teal); color: var(--paper); }
.ask__note { max-width: 560px; margin: 10px auto 0; text-align: center; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
.ask__note a { color: var(--teal); }

/* the floating button: a link to the one chat */
.ask-launch {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 24;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px 0 14px;
  border: 1px solid rgba(249, 248, 246, 0.12);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 700 0.9375rem/1 var(--body);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.65);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s var(--ease);
}
.ask-launch svg { color: var(--light); }
.ask-launch:hover { background: var(--teal); transform: translateY(-2px); }

.ask { scroll-margin-top: 96px; }

/* ---------- motion. Everything above is the finished state; this only plays for those who want it. ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* the hero arrives, then its second line lights up */
  .hero .chip, .hero h1, .lead, .actions, .hero__note { animation: rise 0.9s var(--ease) both; }
  .hero h1 { animation-delay: 0.08s; }
  .lead { animation-delay: 0.2s; }
  .actions { animation-delay: 0.3s; }
  .hero__note { animation-delay: 0.38s; }
  .hero h1 .lit { animation: light-on 1.3s ease 0.75s both; }
  .mark__light { animation: bulb-on 1.4s ease 0.6s both; }
  .hero__demo { animation: rise 1s var(--ease) 0.25s both; }

  /* reels: each element waits, laid out but unseen, until its moment, then arrives in its own way */
  .js .reel [data-at] { visibility: hidden; opacity: 0; transition: opacity 0.4s var(--ease), transform 0.55s var(--ease), visibility 0s linear 0.4s; }
  .js .reel [data-at].is-on { visibility: visible; opacity: 1; transform: none; transition: opacity 0.35s var(--ease), transform 0.6s var(--ease), visibility 0s; }
  .js .reel .turn:not(.is-on), .js .reel .talk__ask:not(.is-on) { transform: translateY(12px) scale(0.94); transform-origin: right bottom; }
  .js .reel .msg[data-at]:not(.is-on), .js .reel .talk__say:not(.is-on) { transform: translateY(10px) scale(0.94); transform-origin: left bottom; }
  .js .reel .typing:not(.is-on) { transform: scale(0.8); transform-origin: left bottom; transition-duration: 0.25s, 0.3s, 0s; transition-delay: 0s, 0s, 0.25s; }
  .js .reel .stamp:not(.is-on), .js .reel .talk__who:not(.is-on), .js .reel .talk__earlier:not(.is-on) { transform: translateY(6px); }
  .js .reel .ans:not(.is-on), .js .reel .rec:not(.is-on), .js .reel .flag:not(.is-on), .js .reel .kpi:not(.is-on), .js .reel .ahead:not(.is-on) { transform: translateY(16px); }
  .js .reel .beats li:not(.is-on) { transform: translateY(18px); }
  .js .reel .beats li.is-on { transition: opacity 0.26s var(--ease), transform 0.4s var(--ease), visibility 0s; }
  .js .reel :is(.story__title, .stamp, .talk__who, .talk__earlier), .js .reel :is(.story__title, .stamp, .talk__who, .talk__earlier).is-on { transition-duration: 0.22s, 0.22s, 0s; }
  .js .reel .story__title:not(.is-on) { transform: translateY(10px); }
  .js .reel .talk__chip:not(.is-on) { transform: translateY(8px) scale(0.96); transform-origin: left; }
  .js .reel .chat__to::after { transform: scaleX(0); transition: transform 0.8s var(--ease) 0.15s; }
  .js .reel .chat__to.is-on::after { transform: none; }
  .js .reel .kpi:not(.is-on) .kpi__bar { width: 0; }
  .js .reel .kpi.is-on .kpi__bar { transition: width 1.1s var(--ease) 0.2s; }
  .js .reel .streams:not(.is-on) { transform: translateY(12px); }
  .js .reel .press.is-pressed .press__btn::after { animation: ring 0.7s var(--ease) both; }
  .js .reel .beat--win.is-on { animation: glow 1.4s ease 0.35s both; }

  /* When one example gives way to the next, its frame stays where it is: the panels, the card and
     the phone do not move or blink. Only what was said leaves: the bubbles, the cards, the result
     rows. A frame's own furniture (a heading, a date, who is speaking, the button) stays, and hands
     over in place to the next frame's. */
  .js .reel [data-frame], .js .reel [data-frame][data-on] { visibility: visible; opacity: 1; transform: none; transition: none; }
  .js .reel [data-frame]:not([data-on="true"]) { pointer-events: none; }
  .js .reel [data-frame][data-on="false"] [data-at].is-on:not(.story__title, .stamp, .talk__who, .talk__earlier, .press) { opacity: 0; transition: opacity 0.2s ease; }
  .js .reel :is(.story__title, .stamp, .talk__who, .talk__earlier):not(.is-on) { transform: none; }
  .js .story__set:not(:first-child) .story__col { background: none; }
  .ask-launch:not([hidden]) { animation: pop 0.4s var(--ease) both; }
  .compose.is-typing .compose__caret { opacity: 1; animation: blink 1s steps(1) infinite; }

  /* someone is typing: the dots breathe, and rest when the reel rests */
  .typing i, .think i { animation: typing 1s ease-in-out infinite; }
  .typing i:nth-child(2), .think i:nth-child(2) { animation-delay: 0.15s; }
  .typing i:nth-child(3), .think i:nth-child(3) { animation-delay: 0.3s; }
  [data-paused="true"] .typing i, [data-paused="true"] .think i, [data-paused="true"] .compose__caret { animation-play-state: paused; }

  /* the chat: each message arrives, and the dots bounce while she answers */
  .ask__msg { animation: pop 0.4s var(--ease) both; }
  .ask__typing i { animation: typing 1s ease-in-out infinite; }
  .ask__typing i:nth-child(2) { animation-delay: 0.15s; }
  .ask__typing i:nth-child(3) { animation-delay: 0.3s; }

  .marquee__track { animation: slide 46s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }

  /* things arrive as they scroll into view */
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* each tab's picture plays when its tab opens */
  .tabs[data-auto="on"] .tab[aria-selected="true"]::after { animation: tab-time 7s linear both; }
  .tabpanel__words { animation: rise 0.6s var(--ease) both; }
  .vig { animation: rise 0.7s var(--ease) 0.05s both; }
  .tl__now { animation: now 7s linear infinite; }
  .vig--day .pill { animation: pop 0.5s var(--ease) both; }
  .vig--day .tl__row:nth-child(3) .pill { animation-delay: 0.25s; }
  .vig--day .tl__row:nth-child(4) .pill { animation-delay: 0.4s; }
  .vig--day .tl__row:nth-child(5) .pill { animation-delay: 0.55s; }
  .prop { animation: pop 0.55s var(--ease) 0.2s both; }
  .done { animation: pop 0.55s var(--ease) 0.75s both; }
  .done:nth-child(2) { animation-delay: 1.15s; }
  .done:nth-child(3) { animation-delay: 1.55s; }
  .lines div { animation: pop 0.45s var(--ease) both; }
  .lines div:nth-child(1) { animation-delay: 0.2s; }
  .lines div:nth-child(2) { animation-delay: 0.32s; }
  .lines div:nth-child(3) { animation-delay: 0.44s; }
  .lines div:nth-child(4) { animation-delay: 0.56s; }
  .lines div:nth-child(5) { animation-delay: 0.68s; }
  .payout { animation: pop 0.6s var(--ease) 1s both; }
  .stay { animation: grow 0.7s var(--ease) both; transform-origin: left; }
  .stay:nth-child(2) { animation-delay: 0.2s; }
  .stay:nth-child(3) { animation-delay: 0.4s; }
  .phone { animation: pop 0.7s var(--ease) 0.15s both; }
}

@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes grow { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: none; } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes tab-time { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ring { from { opacity: 1; transform: scale(0.92); } to { opacity: 0; transform: scale(1.18); } }
@keyframes glow { from { box-shadow: 0 0 0 0 rgba(var(--warm), 0.55); } to { box-shadow: 0 0 0 18px rgba(var(--warm), 0); } }
@keyframes now { from { left: calc(110px + (100% - 124px) * 0.04); } to { left: calc(110px + (100% - 124px) * 0.96); } }
@keyframes light-on { 0% { filter: brightness(0.5) saturate(0.2); } 55% { filter: brightness(1.3) saturate(1.15) drop-shadow(0 0 34px rgba(var(--warm), 0.7)); } 100% { filter: drop-shadow(0 0 26px rgba(var(--warm), 0.3)); } }
@keyframes bulb-on { 0%, 35% { fill: #2B6666; } 60% { fill: #FFF6DE; } 100% { fill: var(--light); } }

/* Less motion: a still page that still makes sense. Every reel shows its first frame, complete; the
   compose bars, typing dots, "Delivered" and progress lines, which only mean something in motion, are gone. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__window { overflow-x: auto; }
  .compose, .typing, .think, .reel__bar, .reel [data-off] { display: none; }
}