/* ------------------------------------------------------------------
   Homepage hero: a business owner reading her customers' messages,
   and one question answered the moment it arrives (illustrative)
   ------------------------------------------------------------------ */
.hero--product {
  height: auto; min-height: 0; isolation: isolate;
  background:
    radial-gradient(55% 60% at 78% 42%, color-mix(in srgb, var(--lettuce) 26%, transparent), transparent 70%),
    radial-gradient(40% 50% at 8% 95%, color-mix(in srgb, var(--evergreen) 70%, transparent), transparent 70%),
    linear-gradient(160deg, var(--coach) 0%, #022a20 55%, var(--midnight) 100%);
}
/* Film grain over the whole hero */
.hero--product::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero--product .site-header { z-index: 6; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-block: 120px 96px; }
.hero--product .hero__copy { margin: 0; padding: 0; max-width: none; }
/* One flowing headline, no rule in the middle of the sentence */
.hero--product .hero__copy .h1 { font-size: 60px; line-height: 1.02; letter-spacing: -1.2px; max-width: 640px; }
.hero--product .hero__copy .h1 span, .hero--product .hero__copy .h1 .tail-line { display: inline; }
.hero--product .hero__copy .h1 .tail-line::after { display: none; }
.hero--product .hero__lead { max-width: 470px; font-size: 18px; }
.hero-note { margin: 14px 0 0; font-size: 14px; color: var(--on-dark-soft); }
.kicker { margin: 0 0 18px; font-size: 15px; font-weight: 500; color: var(--lettuce); }

/* The composition: one photo, one chat card over the desk in the photo */
.hero-art { --ease-out: cubic-bezier(.16, 1, .3, 1); --ha-r: 30px; position: relative; width: 100%; max-width: 580px; height: 600px; margin-inline: auto; }
.ha-photo { position: absolute; inset-block: 0 48px; inset-inline: 72px 0; overflow: hidden; border-radius: var(--ha-r); background: var(--evergreen); }
.ha-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }

.ha-chat { position: absolute; z-index: 3; inset-inline-start: 0; bottom: 0; width: 300px; padding: 12px; border-radius: 20px; background: #efeae2; color: #1b2a25; box-shadow: 0 30px 60px rgb(0 0 0 / .35); }
.ha-chat__head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; }
.ha-chat__head i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--coach); }
.ha-chat__head .wa-icon { width: 16px; height: 16px; color: #fff; }
.ha-chat__head b { font-size: 14px; }
.ha-chat__head small { margin-inline-start: auto; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: #6f7c77; }
.ha-msg { margin: 0; max-width: 86%; padding: 9px 12px 6px; border-radius: 14px; font-size: 14.5px; line-height: 1.38; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.ha-msg time { display: block; margin-top: 2px; text-align: end; font-size: 10.5px; color: #6f7c77; }
.ha-msg--in { justify-self: start; background: #fff; border-start-start-radius: 4px; transform-origin: 0 100%; }
/* The reply and its typing dots share one cell, so the card never changes height */
.ha-slot { display: grid; margin-top: 8px; }
.ha-slot > * { grid-area: 1 / 1; }
.ha-msg--out { justify-self: end; background: #d9fdd3; border-start-end-radius: 4px; transform-origin: 100% 100%; }
.ha-typing { justify-self: end; align-self: start; display: inline-flex; gap: 4px; padding: 13px 14px; border-radius: 14px; border-start-end-radius: 4px; background: #d9fdd3; opacity: 0; }
.ha-typing i { width: 6px; height: 6px; border-radius: 50%; background: #5d7a6c; }

/* The photo opens, the question lands, the reply is typed, then sent (about 3 s, once).
   It starts when the page adds .go, right away or on cue from the homepage opening. */
@media (prefers-reduced-motion: no-preference) {
  .go .ha-photo { animation: ha-open 1.2s var(--ease-out) .1s both; }
  .go .ha-photo img { animation: ha-settle 1.8s var(--ease-out) .1s both; }
  .go .ha-chat { animation: ha-rise .7s var(--ease-out) .7s both; }
  .go .ha-msg--in { animation: ha-pop .5s var(--ease-out) 1.15s both; }
  .go .ha-typing { animation: ha-typing 1.2s ease 1.65s both; }
  .go .ha-typing i { animation: ha-dot .6s ease-in-out 1.65s 3; }
  .go .ha-typing i:nth-child(2) { animation-delay: 1.8s; }
  .go .ha-typing i:nth-child(3) { animation-delay: 1.95s; }
  .go .ha-msg--out { animation: ha-pop .5s var(--ease-out) 2.85s both; }
}
@keyframes ha-open { from { clip-path: inset(9% 7% 13% 11% round var(--ha-r)); } to { clip-path: inset(0 round var(--ha-r)); } }
@keyframes ha-settle { from { transform: scale(1.16); } to { transform: none; } }
@keyframes ha-rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes ha-pop { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes ha-typing { 0% { opacity: 0; transform: translateY(8px); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ha-dot { 0%, 100% { opacity: .4; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero--product .hero__copy .h1 { font-size: 52px; }
}
@media (max-width: 860px) {
  .hero-grid { padding-block: 104px 70px; }
}
@media (max-width: 640px) {
  .hero--product .hero__copy .h1 { font-size: 38px; letter-spacing: -.6px; }
  .hero--product .hero__lead { font-size: 16.5px; }
  .kicker { font-size: 14px; }
  .hero-art { --ha-r: 24px; height: auto; display: grid; padding-bottom: 10px; }
  .ha-photo { position: relative; inset: auto; aspect-ratio: 5 / 5.6; }
  .ha-chat { position: relative; inset: auto; width: min(300px, 90%); margin: -96px 0 0 12px; }
  .ha-msg { font-size: 14px; }
}

/* ------------------------------------------------------------------
   Cream hero (homepage): the Parallel-style opening.
   "/ Your Business. Simplified. /" sits above a serif headline, the header
   is a white pill, buttons are forest green and lime is kept for the ribbon
   and the phone chat bar.
   ------------------------------------------------------------------ */
.hero--cream { margin-block: 0; background: transparent; color: var(--body); overflow: visible; isolation: auto; }
.hero--cream::after { display: none; }
.hero--cream .hero-grid { padding-block: 150px 110px; }

.hero--cream .site-header { padding-top: 14px; }
.hero--cream .site-header .container { height: 66px; padding-inline: 24px 9px; border-radius: 100px; background: #fff; box-shadow: 0 10px 30px rgb(5 25 20 / .07), 0 0 0 1px var(--line); }
.hero--cream .site-header.is-stuck { z-index: 60; padding-block: 10px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero--cream .site-header.is-stuck .container { box-shadow: 0 14px 34px rgb(5 25 20 / .14), 0 0 0 1px var(--line); }
.hero--cream .nav a { color: var(--coach); }
.hero--cream .nav a:hover { text-decoration-color: var(--evergreen); }
.hero--cream .header-actions .btn--lettuce, .hero--cream .sub-ctas .btn--lettuce { background: var(--evergreen); color: var(--cream); }
.hero--cream .header-actions .btn--lettuce:hover, .hero--cream .sub-ctas .btn-pair:hover .btn { background: var(--coach); }
.hero--cream .header-actions .wa-icon { color: #fff; }
.hero--cream .circle--lettuce { background: var(--coach); color: var(--cream); }
.hero--cream .sub-ctas .circle--lettuce { background: var(--evergreen); }

/* The brand line: slashes in the sans, words in the serif */
.slogan { display: flex; align-items: baseline; gap: .32em; width: fit-content; margin: 0 0 22px; font: 400 26px/1.1 "Instrument Serif", "IBM Plex Sans Arabic", Georgia, serif; color: var(--coach); white-space: nowrap; transform-origin: 50% 50%; }
.slogan > span { display: inline-block; }
.slogan__mark { font: 500 .82em/1 var(--font); color: var(--evergreen); }
.slogan__your { font-style: italic; color: color-mix(in srgb, var(--coach) 66%, var(--cream)); }
.slogan > span:not(.slogan__mark):not(.slogan__your) { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; }

.hero--cream .hero__copy .h1 { max-width: 700px; font: 400 86px/.98 "Instrument Serif", "IBM Plex Sans Arabic", Georgia, serif; letter-spacing: -.02em; color: var(--coach); text-wrap: balance; }
.hero--cream .hero__lead { max-width: 500px; margin-top: 26px; color: var(--body); }
.hero--cream .sub-ctas { margin-top: 34px; }
.hero--cream .sub-ctas .btn-pair { margin-top: 0; }
.hero--cream .sub-ctas .wa { color: var(--coach); }
.hero--cream .sub-ctas .wa-icon { color: var(--coach); }
.hero--cream .hero-note { color: var(--muted); }
.hero--cream .ha-chat { box-shadow: 0 24px 50px rgb(5 25 20 / .16), 0 0 0 1px var(--line); }

/* While the opening plays: everything waits, then settles in (a fallback reveals it after 5 s) */
.intro:not(.intro-done) :is(.hero--cream .site-header, [data-intro], .slogan > span, .askbar) { opacity: 0; animation: intro-reveal 0s 5s forwards; }
.intro .hero-art:not(.go) { opacity: 0; animation: intro-reveal 0s 5s forwards; }
@keyframes intro-reveal { to { opacity: 1; } }

@media (max-width: 1100px) {
  .hero--cream .hero__copy .h1 { font-size: 72px; }
}
@media (max-width: 860px) {
  .hero--cream .hero-grid { padding-block: 128px 80px; }
}
@media (max-width: 640px) {
  .hero--cream .site-header { padding-top: 10px; }
  .hero--cream .site-header .container { height: 58px; padding-inline: 18px 7px; }
  .hero--cream .logo img { height: 26px; }
  .hero--cream .hero-grid { padding-block: 100px 64px; gap: 22px; }
  .slogan { margin: 0 auto 24px; font-size: 22px; }
  .hero--cream .hero__copy .h1 { font-size: 46px; line-height: 1; letter-spacing: -.015em; }
  .hero--cream .hero__lead { margin-top: 18px; }
  .hero--cream .sub-ctas { margin-top: 26px; }
  /* Phones get the chat card on its own, as in the approved demo */
  .hero--cream .ha-photo { display: none; }
  .hero--cream .ha-chat { width: 100%; margin: 0; }
  .hero--cream .ha-chat__head { display: none; }
  .hero--cream .hero-art { padding-bottom: 0; }
}