/* AgendaChévere — saturated chapters and a continuous photographic scroll scene. */
:root {
  --ink:#171811;
  --paper:#fffef6;
  --yellow:#fff237;
  --coral:#ff896d;
  --lavender:#dfd2ff;
  --blue:#284bda;
  --sky:#d7eaff;
  --mint:#ddf7cc;
  --muted:#53564a;
  --line:#d8d9cb;
  --header-height:92px;
  --offer-height:0px;
  font-family:Manrope,system-ui,sans-serif;
  font-synthesis:none;
  color:var(--ink);
  background:var(--paper)
}
* {
  box-sizing:border-box;
  margin:0
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + var(--offer-height) + 28px);
  scrollbar-color:auto
}
body {
  line-height:1.6;
  overflow-x:clip
}
body:has(dialog[open]) {
  overflow:hidden
}
a {
  color:inherit;
  text-underline-offset:5px
}
button,input,select {
  font:inherit
}
button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
button,summary {
  cursor:pointer
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:4px;
  box-shadow:0 0 0 6px white
}
::selection {
  background:var(--blue);
  color:white
}
[hidden] {
  display:none!important
}
.wrap {
  width:min(1360px,calc(100% - 96px));
  margin-inline:auto
}
h1,h2,h3 {
  font-family:'Archivo Black',Manrope,sans-serif;
  font-weight:900;
  line-height:1;
  letter-spacing:-.035em;
  text-wrap:balance
}
h2 {
  font-size:clamp(2.6rem,4.8vw,5rem)
}
h3 {
  font-size:clamp(2rem,3.6vw,3.7rem)
}
em {
  font-style:normal
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:54px;
  padding:17px 28px;
  border:0;
  border-radius:100px;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  text-decoration:none;
  transition:none; box-shadow:none;}
.btn:hover {
  transform:none}
.btn:active {
  transform:none}
.btn-light {
  background:#000;
  color:#fff}
.btn-light:hover {
  background:#000; color:#fff;}
.btn-dark {
  background:#000;
  color:#fff}
.btn-dark:hover {
  background:#000; color:#fff;}
.text-link {
  display:inline-block;
  padding-block:10px;
  font-weight:600;
  text-decoration:none
}
.text-link:hover {
  text-decoration:underline
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  padding:12px;
  background:var(--yellow);
  z-index:200
}
.skip-link:focus {
  top:10px
}
/* Floating navigation stays legible above every color and photograph. */
.sticky-header {
  position:sticky;
  top:0;
  z-index:60;
  pointer-events:none
}
.offer-bar {
  min-height:38px;
  padding:7px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  background:var(--blue);
  color:white;
  font-size:12px;
  pointer-events:auto
}
.offer-bar a {
  font-weight:600
}
.nav {
  margin:12px 24px 0;
  color:var(--ink);
  background:#fffef6e8;
  border-radius:14px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  pointer-events:auto;
  transition:background-color 200ms
}
.past-hero .nav {
  background:#fffef6f5
}
.nav-inner {
  width:calc(100% - 48px);
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.logo {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:22px;
  letter-spacing:-.04em;
  font-weight:800;
  text-decoration:none
}
.logo-ant {
  width:34px;
  height:34px
}
.nav-links,.account-links {
  display:flex;
  align-items:center;
  gap:28px
}
.nav-links a,.login-link {
  font-size:13px;
  text-decoration:none
}
.nav-links a:hover,.login-link:hover {
  text-decoration:underline
}
.account-links .btn {
  min-height:46px;
  padding:13px 23px;
  background:#000;
  color:#fff;
  font-size:13px
}
.account-links .btn:hover {
  background:#000; color:#fff;}
.mobile-menu {
  display:none;
  position:relative
}
.mobile-menu summary {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:8px;
  list-style:none;
  font-size:13px
}
.mobile-menu summary::-webkit-details-marker {
  display:none
}
.mobile-menu-panel {
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:220px;
  padding:8px;
  background:var(--paper);
  border-radius:12px;
  box-shadow:0 14px 36px #17181126
}
.mobile-menu-panel a {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 12px;
  font-size:14px;
  text-decoration:none;
  border-radius:7px
}
.mobile-menu-panel a:hover {
  background:var(--lavender)
}
/* Readable normal flow is the default, including when JavaScript is unavailable. */
.scroll-story {
  margin-top:0
}
.story-stage {
  position:relative
}
.campaign-hero {
  position:relative;
  margin-top:calc(-1 * var(--header-height));
  isolation:isolate;
  display:flex;
  align-items:flex-start;
  min-height:max(780px,calc(100svh - var(--offer-height)));
  color:white;
  background:var(--ink)
}
.hero-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 48%;
  z-index:-2
}
.campaign-hero::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#0009,#0005 43%,#0000 78%),linear-gradient(0deg,#0007,transparent 32%)
}
.hero-content {
  width:calc(100% - 96px);
  margin-inline:48px;
  padding:170px 0 165px
}
.hero-content h1 {
  max-width:14ch;
  font-size:clamp(3.7rem,6.5vw,6rem);
  line-height:.97;
  text-wrap:initial
}
.hero-content>p {
  max-width:42ch;
  margin-top:28px;
  color:white;
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.55
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top:32px
}
.hero-content .hero-for {
  display:none
}
.hero-conversation {
  position:absolute;
  right:17%;
  bottom:104px;
  width:380px;
  display:grid;
  gap:8px;
  font-size:15px;
  line-height:1.4
}
.hero-message {
  position:relative;
  padding:16px 20px;
  border-radius:24px;
  box-shadow:0 7px 25px #0002
}
.hero-message.incoming {
  justify-self:start;
  margin-left:34px;
  max-width:calc(100% - 54px);
  background:#30302f;
  color:white
}
.hero-message.outgoing {
  margin-left:58px;
  background:#8035ce;
  color:white
}
.hero-chat-thread {
  display:grid;
  gap:10px;
  min-height:224px;
  align-content:end;
  list-style:none;
  padding:0
}
.message-avatar {
  position:absolute;
  left:-34px;
  bottom:6px;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#f3e3ce;
  color:#41352a
}
.message-avatar svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6
}
.hero-chat-footer {
  margin-left:34px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0 12px;
  color:white;
  font-size:12px;
  text-shadow:0 1px 5px black
}
.hero-chat-footer button {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:7px;
  background:none;
  border:0;
  color:inherit;
  padding:6px 0;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:4px;
  text-shadow:inherit
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.hero-channels {
  position:absolute;
  bottom:32px;
  left:48px;
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap
}
.hero-channels>span {
  max-width:16ch;
  font-size:12px;
  line-height:1.35
}
.hero-channels strong {
  font-family:'Inter Tight',sans-serif;
  font-size:20px;
  font-weight:800
}
/* The unobstructed channel track follows the static hero. */
.channels-scene {
  position:relative;
  background:var(--yellow);
  padding:76px 0 30px;
  overflow:clip
}
.channels-heading {
  padding-inline:24px;
  text-align:center
}
.channels-heading h2 {
  font-size:clamp(2.8rem,5.9vw,6rem);
  line-height:.98
}
.channels-heading>p {
  margin-top:20px;
  font-size:16px
}
.channels-viewport {
  margin-top:40px;
  padding:0 48px;
  overflow-x:auto;
  scrollbar-width:thin;
  scroll-snap-type:x mandatory
}
.channels-track {
  display:flex;
  gap:22px;
  width:max-content;
  padding-bottom:8px
}
.channel-card {
  width:clamp(340px,31vw,480px);
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  min-height:336px;
  padding:28px;
  border-radius:16px;
  scroll-snap-align:center
}
.channel-whatsapp {
  background:var(--mint)
}
.channel-instagram {
  background:var(--lavender)
}
.channel-messenger {
  background:var(--sky)
}
.channel-agenda {
  background:var(--coral)
}
.channel-name {
  display:flex;
  gap:13px;
  align-items:center
}
.channel-name>svg {
  width:30px;
  height:30px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.channel-name h3 {
  font-size:clamp(28px,2.5vw,40px);
  font-weight:800;
  letter-spacing:-.03em
}
.channel-card>p {
  margin-top:17px;
  max-width:34ch;
  font-size:14px;
  line-height:1.6
}
.channel-preview {
  margin-block:24px;
  min-height:94px;
  font-size:12px
}
.chat-preview {
  display:flex;
  flex-direction:column;
  gap:9px
}
.chat-preview>span {
  padding:10px 13px;
  background:white;
  border-radius:12px 12px 12px 3px;
  align-self:flex-start
}
.chat-preview>span:last-child {
  align-self:flex-end;
  background:var(--ink);
  color:white;
  border-radius:12px 12px 3px 12px
}
.chat-preview svg {
  display:inline-block;
  vertical-align:middle;
  margin-left:8px;
  width:18px;
  height:18px;
  fill:none;
  stroke:var(--mint);
  stroke-width:1.7
}
.social-preview {
  display:flex;
  align-items:center;
  gap:16px
}
.social-avatar {
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 54px;
  height:64px;
  background:var(--coral);
  font-family:'Inter Tight',sans-serif;
  font-size:42px;
  font-weight:900;
  border-radius:26px
}
.social-avatar>span {
  display:grid;
  place-items:center;
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:25px;
  height:25px;
  border-radius:50%;
  background:var(--blue);
  color:white;
  font-size:20px;
  font-weight:500
}
.social-preview>div:last-child {
  display:grid;
  gap:5px
}
.social-preview strong {
  font-size:13px
}
.social-preview small {
  max-width:26ch;
  font-size:12px;
  line-height:1.5
}
.messenger-preview {
  display:flex;
  flex-direction:column;
  gap:9px;
  align-items:flex-start
}
.messenger-preview>span {
  border-radius:13px;
  padding:10px 14px;
  background:white
}
.messenger-preview>span:last-child {
  align-self:flex-end;
  display:flex;
  align-items:center;
  gap:5px;
  background:var(--blue);
  color:white
}
.messenger-preview i {
  display:block;
  width:4px;
  height:4px;
  background:white;
  border-radius:50%
}
.messenger-preview i:first-child {
  margin-left:9px
}
.agenda-preview>div {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  text-align:center;
  gap:7px
}
.agenda-preview b {
  padding-block:3px;
  font-size:15px
}
.selected-day {
  background:var(--ink);
  color:white;
  border-radius:7px
}
.agenda-preview p {
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px
}
.agenda-preview svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2
}
.channel-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid #17181130;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  min-height:44px
}
.channel-link:hover {
  text-decoration:underline
}
.channel-link>span {
  font-size:20px
}
.channels-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  width:calc(100% - 96px);
  margin:22px auto 0
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px
}
.scroll-cue svg,.channel-controls svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.desktop-cue {
  display:none
}
.channel-controls {
  display:flex;
  align-items:center;
  gap:16px
}
.channel-controls button {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid var(--ink);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  transition:background-color 180ms,color 180ms
}
.channel-controls button:hover:not(:disabled) {
  background:var(--ink);
  color:var(--yellow)
}
.channel-controls button:disabled {
  opacity:.32;
  cursor:default
}
#channel-position {
  font-size:12px;
  font-variant-numeric:tabular-nums
}
.story-skip {
  padding-block:12px;
  font-size:12px
}
.channels-disclaimer {
  margin-top:16px;
  font-size:12px;
  text-align:center
}
.motion-ready .scroll-story {
  height:var(--story-height);
  background:var(--yellow)
}
.motion-ready .story-stage {
  position:sticky;
  top:var(--offer-height);
  height:calc(100vh - var(--offer-height));
  height:calc(100svh - var(--offer-height))
}
.motion-ready .channels-scene {
  height:100%;
  padding-top:calc(var(--header-height) + 32px);
  display:flex;
  flex-direction:column;
  justify-content:center
}
.motion-ready .channels-viewport {
  overflow:hidden;
  flex-shrink:0;
  scroll-snap-type:none;
  touch-action:pan-y pinch-zoom
}
.motion-ready .channels-bottom {
  flex-shrink:0
}
.motion-ready .desktop-cue {
  display:inline
}
.motion-ready .touch-cue {
  display:none
}
.story-active .channels-track {
  will-change:transform
}
/* Color defines the chapters;
supporting motion follows the same scroll. */
.manifesto {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:100px;
  align-items:center;
  padding-block:115px
}
.manifesto h2 {
  max-width:18ch
}
.manifesto p {
  max-width:48ch;
  color:var(--muted);
  margin-bottom:22px;
  font-size:17px
}
.manifesto .text-link {
  color:var(--blue)
}
.before-after {
  background:var(--coral);
  padding-block:96px;
  overflow:clip
}
.before-after h2 {
  margin:0 auto 55px;
  text-align:center
}
.comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:1120px;
  margin-inline:auto
}
.comparison article {
  min-width:0;
  padding:42px;
  border-radius:16px
}
.before {
  background:#ffbb9f
}
.after {
  background:var(--yellow)
}
.comparison-label {
  font-size:13px;
  font-weight:600
}
.comparison h3 {
  margin:28px 0 36px;
  font-size:clamp(2.5rem,4vw,4rem)
}
.comparison ul {
  list-style:none;
  padding:0
}
.comparison li {
  padding:16px 0;
  border-top:1px solid #17181130;
  font-size:14px
}
.comparison .btn {
  margin-top:24px
}
.examples {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
  padding-block:110px
}
.example-copy h2 {
  font-size:clamp(2.7rem,4.6vw,4.8rem)
}
.example-copy p {
  max-width:43ch;
  margin-top:24px;
  color:var(--muted);
  font-size:16px
}
.example-copy .btn {
  margin-top:30px
}
.demo-actions {
  display:grid;
  margin-top:28px;
  max-width:430px
}
.demo-actions button {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:19px 16px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font-size:15px;
  text-align:left;
  transition:background-color 160ms,color 160ms
}
.demo-actions button:hover {
  background:var(--lavender);
  color:var(--ink)
}
.demo-actions button[aria-pressed=true] {
  background:var(--blue);
  color:white;
  border-color:var(--blue);
  border-radius:9px
}
.example-copy .demo-hint {
  font-size:12px
}
.conversation {
  max-width:470px;
  width:100%;
  margin-inline:auto;
  overflow:hidden;
  border-radius:16px;
  background:#ece5fa;
  box-shadow:0 25px 65px -30px #40227159
}
.conversation-head {
  display:flex;
  align-items:center;
  gap:15px;
  padding:22px 25px;
  background:var(--blue);
  color:white
}
.conversation-head svg {
  width:30px;
  flex-shrink:0
}
.conversation-head strong {
  font-size:14px
}
.conversation-head small {
  display:block;
  font-size:12px
}
.conversation-body {
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:28px 24px;
  min-height:395px
}
.bubble {
  max-width:88%;
  padding:14px 18px;
  background:white;
  border-radius:12px;
  font-size:13px;
  line-height:1.55
}
.bubble-client {
  align-self:flex-end;
  background:var(--lavender)
}
.bubble small {
  display:block;
  margin-bottom:5px;
  font-size:12px;
  font-weight:600
}
.booking-result {
  min-height:62px;
  padding-top:15px;
  border-top:1px solid #69577955;
  font-size:12px
}
.booking-result strong {
  display:block;
  font-size:14px
}
.conversation figcaption {
  padding:16px 24px;
  background:white;
  color:var(--muted);
  font-size:12px
}
.conversation select {
  display:block;
  width:100%;
  min-height:44px;
  padding:8px;
  margin:6px 0 12px;
  border:1px solid #888078;
  border-radius:7px;
  background:white;
  color:var(--ink)
}
.product-section {
  padding-block:100px;
  background:var(--lavender);
  overflow:clip
}
.product-section h2 {
  max-width:22ch;
  margin:0 auto 65px;
  text-align:center
}
.feature {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  gap:80px;
  padding-block:35px 75px
}
.feature+.feature {
  padding-top:70px;
  border-top:1px solid #69577944
}
.feature h3 {
  margin-bottom:24px;
  font-size:clamp(2rem,3.5vw,3.5rem)
}
.feature p {
  max-width:40ch;
  color:#433850;
  font-size:16px
}
.feature a {
  margin-top:20px;
  color:#243ba2
}
.feature figure {
  min-width:0
}
.feature img {
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 24px 45px -24px #43266366
}
.feature figcaption {
  margin-top:16px;
  font-size:12px;
  color:#433850
}
.reverse {
  grid-template-columns:1.15fr .85fr
}
.reverse>div {
  order:2
}
.calculator {
  padding-block:100px;
  background:var(--sky)
}
.calculator-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.calculator h2 {
  font-size:clamp(2.4rem,4vw,4rem)
}
.calculator p {
  margin-top:22px;
  color:#35485b
}
.calculator-fields {
  display:grid;
  gap:24px;
  margin-top:28px
}
.calculator label {
  font-size:14px
}
.calculator label span {
  display:flex;
  justify-content:space-between;
  gap:15px
}
.calculator label b {
  font-variant-numeric:tabular-nums
}
.calculator input {
  width:100%;
  min-height:36px;
  margin-top:10px;
  accent-color:var(--blue)
}
.calc-result {
  align-self:center;
  border-top:1px solid #35485b55;
  padding-top:25px
}
.calc-money {
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(4.5rem,8vw,7rem);
  font-weight:900;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  color:var(--blue)
}
.calculator p.calc-context {
  font-size:20px;
  margin-top:4px;
  color:var(--ink)
}
.calc-formula,.calc-disclaimer {
  font-size:12px
}
.calculator .btn {
  margin-top:28px;
  background:#000;
  color:#fff}
.calculator .btn:hover {
  background:#000; color:#fff;}
.setup-section {
  text-align:center;
  padding-block:110px
}
.setup-list {
  list-style:none;
  padding:0;
  margin:60px auto 40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  text-align:left;
  gap:50px
}
.setup-list li {
  border-top:1px solid var(--line);
  padding-top:22px
}
.setup-list li>span {
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--yellow);
  font-size:13px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}
.setup-list li:nth-child(2)>span {
  background:var(--lavender)
}
.setup-list li:nth-child(3)>span {
  background:var(--coral)
}
.setup-list h3 {
  font-size:25px;
  font-weight:800;
  letter-spacing:-.025em;
  margin:22px 0 13px
}
.setup-list p {
  font-size:14px;
  color:var(--muted);
  max-width:33ch
}
.start-section {
  width:100%;
  background:var(--paper);
  text-align:center;
  padding:100px 24px;
  overflow:clip; color:#000;}
.start-section h2 {
  font-size:clamp(2.8rem,6vw,6rem)
}
.start-actions {
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin:35px 0 22px
}
.start-actions .btn-light {
  background:#000;
  color:#fff}
.start-actions .btn-light:hover {
  background:#000; color:#fff;}
.start-section>p {
  font-size:13px
}
.faq-sec {
  padding-block:95px;
  background:var(--paper)
}
.faq-sec h2 {
  text-align:center;
  margin:0 auto 55px;
  font-size:clamp(2.5rem,4vw,4rem);
  max-width:23ch
}
.eyebrow {
  display:none
}
.faq-list {
  max-width:820px;
  margin-inline:auto
}
.faq-item {
  border-bottom:1px solid var(--line);
  padding-block:12px
}
.faq-item summary {
  padding-block:14px;
  font-size:15px;
  font-weight:600
}
.faq-item[open] summary {
  color:#243ba2
}
.faq-item p {
  padding:12px 0;
  color:var(--muted);
  max-width:75ch;
  font-size:14px
}
footer {
  background:var(--blue);
  color:white;
  padding:65px 0 35px;
  font-size:12px
}
.footer-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px
}
.footer-grid .logo {
  font-size:30px;
  margin-bottom:14px
}
.footer-grid h4 {
  margin-bottom:14px;
  font-size:12px
}
.footer-sol-title {
  margin-top:28px
}
.footer-sol {
  list-style:none;
  padding:0;
  display:grid;
  gap:8px
}
.footer-sol a {
  text-decoration:none
}
.footer-sol a:hover {
  text-decoration:underline
}
.footer-legal p {
  margin-block:9px
}
.footer-bottom {
  border-top:1px solid #ffffff55;
  margin-top:35px;
  padding-top:25px;
  display:flex;
  gap:14px 25px;
  flex-wrap:wrap
}
.footer-bottom p:last-child {
  width:100%
}
/* Welcome offer: retain its stored dismissal and native dialog focus management. */
.welcome-offer {
  width:min(440px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  padding:0;
  border:0;
  border-radius:16px;
  background:var(--lavender);
  color:var(--ink);
  box-shadow:0 28px 100px #0008;
  margin:auto;
  overflow:auto;
  overscroll-behavior:contain
}
.welcome-offer::backdrop {
  background:#171811a8;
  backdrop-filter:blur(5px)
}
.offer-close {
  position:absolute;
  right:12px;
  top:12px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid #ffffff66;
  border-radius:50%;
  background:#171811cc;
  color:white;
  font-size:26px;
  line-height:1;
  z-index:1
}
.offer-image {
  height:190px;
  overflow:hidden
}
.offer-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:72% 38%
}
.offer-image>span {
  display:none
}
.offer-body {
  padding:26px 32px;
  text-align:center
}
.offer-body h2 {
  font-size:35px;
  font-weight:800;
  line-height:1.04
}
.offer-body>p {
  font-size:13px;
  margin-top:16px
}
.offer-body>p a {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px
}
.offer-body .btn {
  margin-top:22px;
  width:100%;
  background:#000;
  color:#fff}
.offer-body .btn:hover {
  background:#000; color:#fff;}
.offer-later {
  margin-top:10px;
  min-height:44px;
  padding:8px;
  background:none;
  border:0;
  color:var(--ink);
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:4px
}
@media(min-width:1700px) {
  .hero-content {
    padding-top:190px
  }
  .hero-conversation {
    right:24%;
    bottom:110px
  }
}
@media(max-height:820px) and (min-width:761px) {
  .hero-content {
    padding-top:142px
  }
  .hero-content h1 {
    font-size:clamp(3.3rem,5.7vw,5.4rem)
  }
  .hero-content>p {
    margin-top:22px;
    font-size:16px
  }
  .hero-actions {
    margin-top:24px
  }
  .motion-ready .channels-heading h2 {
    font-size:clamp(2.8rem,5vw,4.6rem)
  }
  .motion-ready .channels-heading>p {
    margin-top:12px;
    font-size:14px
  }
  .motion-ready .channels-viewport {
    margin-top:24px
  }
  .motion-ready .channel-card {
    min-height:280px;
    padding:22px
  }
  .motion-ready .channel-preview {
    margin-block:15px;
    min-height:74px
  }
  .motion-ready .channels-bottom {
    margin-top:14px
  }
  .motion-ready .channels-disclaimer {
    margin-top:8px
  }
}
@media(max-width:1100px) {
  .nav-links {
    display:none
  }
  .mobile-menu {
    display:block;
    margin-left:auto
  }
  .manifesto,.examples,.feature,.calculator-layout {
    gap:45px
  }
  .hero-conversation {
    right:35px
  }
  .hero-content h1 {
    font-size:clamp(3.2rem,6.4vw,5rem)
  }
}
@media(max-width:760px) {
  :root {
    --header-height:112px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  h2 {
    font-size:clamp(2.35rem,7.8vw,3.7rem)
  }
  .nav {
    margin:10px 12px 0;
    border-radius:12px
  }
  .nav-inner {
    min-height:102px;
    width:calc(100% - 28px);
    padding-block:8px;
    flex-wrap:wrap;
    gap:0 12px
  }
  .logo {
    font-size:18px;
    gap:6px
  }
  .logo-ant {
    width:26px;
    height:26px
  }
  .mobile-menu summary {
    font-size:12px
  }
  .account-links {
    width:100%;
    justify-content:space-between;
    gap:14px
  }
  .account-links .btn {
    font-size:12px;
    min-height:44px;
    padding:12px 18px
  }
  .login-link {
    font-size:12px;
    padding:10px 0
  }
  .offer-bar {
    gap:2px;
    flex-direction:column;
    font-size:12px;
    padding:6px 12px
  }
  .campaign-hero {
    min-height:1000px
  }
  .hero-photo {
    height:61%;
    top:auto;
    bottom:0;
    object-position:70% center
  }
  .campaign-hero::after {
    background:linear-gradient(#171811 27%,#171811eb 39%,#17181100 67%,#0007)
  }
  .hero-content {
    width:calc(100% - 40px);
    margin:0 20px;
    padding:151px 0 400px
  }
  .hero-content h1 {
    font-size:clamp(2.8rem,8.4vw,4.3rem);
    max-width:15ch;
    line-height:1
  }
  .hero-content>p {
    font-size:15px;
    max-width:36ch;
    margin-top:22px
  }
  .hero-actions {
    gap:20px;
    margin-top:25px
  }
  .hero-actions .btn {
    padding:15px 24px;
    font-size:13px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .hero-conversation {
    width:min(380px,calc(100% - 40px));
    right:20px;
    bottom:100px;
    font-size:14px
  }
  .hero-message {
    padding:14px 16px
  }
  .hero-channels {
    bottom:25px;
    left:20px;
    gap:12px 20px
  }
  .hero-channels>span {
    width:100%;
    max-width:none;
    font-size:12px
  }
  .hero-channels strong {
    font-size:18px
  }
  .channels-scene {
    padding-block:64px 28px
  }
  .channels-heading {
    padding-inline:20px;
    text-align:left
  }
  .channels-heading h2 {
    font-size:clamp(2.5rem,8.5vw,4rem)
  }
  .channels-heading>p {
    max-width:28ch;
    font-size:14px;
    margin-top:18px
  }
  .channels-viewport {
    margin-top:30px;
    padding-inline:20px
  }
  .channels-track {
    gap:16px
  }
  .channel-card {
    width:min(82vw,380px);
    padding:24px;
    min-height:346px
  }
  .channel-name h3 {
    font-size:30px
  }
  .channel-card>p {
    font-size:14px
  }
  .channels-bottom {
    width:calc(100% - 40px);
    flex-wrap:wrap;
    gap:12px
  }
  .channel-controls {
    gap:12px
  }
  .scroll-cue {
    font-size:12px;
    gap:6px
  }
  .scroll-cue svg {
    transform:rotate(-90deg)
  }
  .story-skip {
    display:none
  }
  .channels-disclaimer {
    font-size:12px
  }
  .manifesto,.examples,.feature,.calculator-layout,.comparison,.footer-grid {
    grid-template-columns:1fr;
    gap:32px
  }
  .manifesto,.examples,.product-section,.calculator,.setup-section {
    padding-block:70px
  }
  .manifesto p {
    font-size:15px
  }
  .before-after {
    padding-block:65px
  }
  .before-after h2 {
    margin-bottom:35px
  }
  .comparison {
    gap:18px
  }
  .comparison article {
    padding:30px
  }
  .comparison h3 {
    margin-bottom:30px
  }
  .example-copy h2 {
    font-size:clamp(2.6rem,8vw,3.6rem)
  }
  .demo-actions {
    max-width:none
  }
  .conversation-body {
    min-height:385px
  }
  .feature+.feature {
    padding-top:45px
  }
  .feature {
    padding-bottom:40px
  }
  .reverse>div {
    order:0
  }
  .product-section h2 {
    margin-bottom:40px
  }
  .setup-list {
    grid-template-columns:1fr;
    gap:30px;
    margin-block:38px
  }
  .setup-list h3 {
    margin-top:14px
  }
  .setup-list p {
    max-width:45ch
  }
  .start-section {
    padding-block:70px
  }
  .start-section>p {
    max-width:36ch;
    margin:auto
  }
  .start-actions {
    gap:18px
  }
  .faq-sec {
    padding-block:70px
  }
  .faq-sec h2 {
    margin-bottom:35px
  }
  .offer-image {
    height:145px
  }
  .offer-body {
    padding:22px 24px
  }
  .offer-body h2 {
    font-size:31px
  }
}
@media(max-width:390px) {
  .hero-content h1 {
    font-size:2.65rem
  }
  .hero-actions {
    gap:13px
  }
  .hero-actions .btn {
    padding-inline:19px
  }
  .channel-card {
    width:86vw;
    padding:22px
  }
  .comparison article {
    padding:24px
  }
  .comparison h3 {
    font-size:2.45rem
  }
  .conversation-body {
    padding:22px 18px
  }
  .bubble {
    max-width:94%
  }
  .offer-image {
    height:125px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .channels-viewport {
    scroll-snap-type:none
  }
}
@media(prefers-reduced-transparency:reduce) {
  .nav {
    background:var(--paper);
    backdrop-filter:none
  }
  .welcome-offer::backdrop {
    backdrop-filter:none;
    background:#171811eb
  }
}
@media(prefers-contrast:more) {
  .nav {
    background:var(--paper)
  }
  .campaign-hero::after {
    background:linear-gradient(90deg,#000e,#0006)
  }
}
@media(min-width:761px) and (max-width:1400px) {
  .account-links {
    gap:20px
  }
}
@media(max-width:760px) {
  .account-links .btn {
    margin-left:auto
  }
  .account-links {
    gap:18px
  }
}
@media(max-height:820px) and (min-width:761px) {
  .motion-ready .channels-scene {
    padding-top:calc(var(--header-height) + 18px);
    padding-bottom:16px
  }
  .motion-ready .channels-heading h2 {
    font-size:clamp(2.7rem,4.6vw,4rem)
  }
  .motion-ready .channels-viewport {
    margin-top:18px
  }
  .motion-ready .channel-card {
    min-height:260px;
    padding:20px
  }
  .motion-ready .channel-preview {
    margin-block:12px;
    min-height:66px
  }
  .motion-ready .channel-card>p {
    margin-top:12px;
    font-size:13px
  }
  .motion-ready .channel-name h3 {
    font-size:29px
  }
  .motion-ready .channel-link {
    padding-top:10px
  }
  .motion-ready .channels-bottom {
    margin-top:8px
  }
  .motion-ready .channels-disclaimer {
    margin-top:6px
  }
}
/* Contain the scaled photograph without changing the sticky ancestor's scroll container. */
.campaign-hero {
  overflow:clip
}
.channels-viewport {
  scrollbar-width:none
}
.channels-viewport::-webkit-scrollbar {
  display:none
}

/* Shared decorative UI icon geometry; action labels remain real text. */
.ui-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: -.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-avatar .ui-icon { width: 14px; height: 14px; }
.offer-close .ui-icon { width: 22px; height: 22px; }

/* Only the bubbles animate. Reserved space keeps the hero layout stationary. */
.hero-chat-thread.chat-ready {
  position: relative;
  display: block;
  min-height: var(--chat-stack-height, 240px);
  height: var(--chat-stack-height, 240px);
  overflow: clip;
  overflow-clip-margin: 0px;
}
.chat-ready .hero-message {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}
.chat-ready .hero-message.is-active { opacity: 1; }
/* Compact pinned layouts preserve the complete card and controls on phones. */
.motion-ready .channels-heading, .motion-ready .channels-disclaimer { flex-shrink:0; }
.motion-ready .scroll-cue svg { transform:none; }
@media(max-height:850px) {
  .motion-ready .channels-scene { padding-top:calc(var(--header-height) + 12px); padding-bottom:12px; }
  .motion-ready .channels-heading h2 { font-size:clamp(32px,4vw,46px); line-height:1.02; }
  .motion-ready .channels-heading>p { margin-top:10px; font-size:13px; line-height:1.5; }
  .motion-ready .channels-viewport { margin-top:16px; }
  .motion-ready .channel-card { padding:18px; min-height:270px; }
  .motion-ready .channel-name h3 { font-size:28px; }
  .motion-ready .channel-card>p { margin-top:12px; font-size:13px; line-height:1.45; }
  .motion-ready .channel-preview { min-height:68px; margin-block:14px; }
  .motion-ready .chat-preview>span, .motion-ready .messenger-preview>span { padding:8px 11px; }
  .motion-ready .channel-link { padding-top:10px; }
  .motion-ready .channels-bottom { margin-top:10px; }
  .motion-ready .channels-disclaimer { margin-top:6px; font-size:11px; line-height:1.5; }
}
@media(max-width:760px) {
  .motion-ready .channels-scene { padding-top:calc(var(--header-height) + 12px); padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .motion-ready .channels-heading { text-align:left; }
  .motion-ready .channels-heading h2 { font-size:clamp(24px,6vw,34px); line-height:1.04; }
  .motion-ready .channels-heading>p { margin-top:9px; max-width:none; font-size:12px; line-height:1.5; }
  .motion-ready .channels-viewport { margin-top:14px; }
  .motion-ready .channel-card { width:min(82vw,380px); padding:18px; min-height:280px; }
  .motion-ready .channel-preview { margin-block:14px; min-height:74px; }
  .motion-ready .channels-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:10px; }
  .motion-ready .scroll-cue { font-size:11px; line-height:1.4; }
  .motion-ready .scroll-cue svg { width:18px; flex-shrink:0; }
  .motion-ready .channel-controls { gap:10px; }
  .motion-ready .channel-controls button { width:44px; height:44px; }
  .motion-ready .channels-disclaimer { margin-top:6px; font-size:10px; line-height:1.5; }
}
@media(max-height:640px) {
  .motion-ready .channels-scene { padding-top:calc(var(--header-height) + 4px); padding-bottom:8px; }
  .motion-ready .channels-viewport { margin-top:10px; }
  .motion-ready .channels-heading h2 { font-size:clamp(24px,4vw,36px); }
  .motion-ready .channel-preview { display:none; }
  .motion-ready .channel-card { min-height:200px; }
}