/* The landing page sections built from the prototype (static/proto/build.py), 2026-10-04. */

.landing-body .hero.pg { background: linear-gradient(180deg, #ffffff 0%, #f6f4ff 100%); text-align: center; }
.landing-body .hero.pg::before, .landing-body .hero.pg::after { display: none; }
/* The posts hang past the hero's bottom edge and fly off as the page scrolls, so the hero
   stays short. Sideways is still clipped (no horizontal scroll); downwards is not. */
.landing-body .hero.pg { overflow-x: clip; overflow-y: visible; z-index: 1; }
/* Desktop: exactly one screen tall (under the 61px menu bar). The posts stay right under the
   buttons and their area stretches to the bottom, so taller screens show more of each post. */
@media (min-width: 901px) {
  .landing-body .hero.pg { min-height: calc(100svh - 61px); display: flex; flex-direction: column; }
  .pg-wrap { flex: 1; width: 100%; display: flex; flex-direction: column; }
  .landing-body .hero.pg .pg-fan { flex: 1 0 280px; }
}
/* The section after the hero sits above it, so a post that still hangs down slides under it. */
.landing-body .hero.pg + * { position: relative; z-index: 2; }
.landing-body .hero.pg + *::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 90px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(246,244,255,0), #f6f4ff); }
.pg-wrap { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 76px 24px 0; }
.pg-title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(2.7rem, 5.6vw, 4.75rem); line-height: 1.03; letter-spacing: -0.035em; color: #0f172a; margin: 0; }
.landing-body .hero.pg .pg-title span { background: linear-gradient(100deg, #7c3aed 0%, #2563eb 22%, #06b6d4 44%, #8b5cf6 66%, #2563eb 84%, #7c3aed 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: pg-flow 7s ease-in-out infinite alternate; }
@keyframes pg-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .landing-body .hero.pg .pg-title span { animation: none; } }
.pg-lead { margin: 22px auto 0; max-width: 640px; font-size: 1.35rem; line-height: 1.4; font-weight: 600; color: #0f172a; }
.pg-sub { margin: 14px auto 0; max-width: 620px; font-size: 1.05rem; line-height: 1.6; color: #475569; }
.pg-actions { margin-top: 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.pg-trial { display: inline-flex; align-items: center; gap: 10px; height: 68px; padding: 0 40px; border-radius: 18px; background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); color: #fff; font-weight: 800; font-size: 1.3rem; text-decoration: none; box-shadow: 0 16px 36px rgba(124,58,237,.38), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s ease, box-shadow .2s ease; }
.pg-trial:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(124,58,237,.48), inset 0 1px 0 rgba(255,255,255,.25); }
.pg-how { display: inline-flex; align-items: center; height: 68px; padding: 0 26px; border-radius: 18px; border: 2px solid #cbd5e1; background: #fff; color: #0f172a; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.pg-how:hover { border-color: #0f172a; }
.pg-note { margin: 18px 0 0; font-size: .95rem; color: #64748b; }
.pg-short { display: none; }
/* The fan: every card shown whole; the row fades into the next section instead of being cut off. */
.pg-fan { --open: 1; position: relative; height: 280px; margin: 28px calc(50% - 50vw) 0; }
/* The deck reaches well above and below the fan. Tossed posts fly over the whole hero and off
   the top of the screen; the toss is quick, so they only cross the button for a moment. */
.pg-deck { position: absolute; left: 0; right: 0; top: -300px; bottom: -560px; pointer-events: none; z-index: 4; }
/* The pointer follows each card as drawn, except the hovered one keeps its resting spot too,
   so lifting it never slides it out from under the pointer. */
.pg-deck .pg-in, .pg-deck .pg-card.is-up { pointer-events: auto; }
.pg-fan.is-launched .pg-card, .pg-fan.is-launched .pg-in { pointer-events: none; }
/* The outer card only holds the fan position and catches the pointer; it never moves on hover,
   so the pointer can't slip off it mid-motion (which made cards jump back and forth). */
.pg-card { position: absolute; left: 50%; top: 396px; width: 300px; margin-left: -150px; transform-origin: 50% 120%; text-align: left; --s: 1;
  transform: translateX(calc(var(--tx) * var(--open))) translateY(calc(var(--ty) * var(--open))) rotate(calc(var(--rot) * var(--open))) scale(var(--s));
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.pg-in { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,42,.16), 0 0 0 1px rgba(15,23,42,.06);
  transform: translateY(0); transition: transform var(--sd, .45s) cubic-bezier(.22,1,.36,1) var(--sdl, 0s), box-shadow .45s ease; }
.pg-fan.is-waiting .pg-card { opacity: 0; }
.pg-fan .pg-card { opacity: 1; }
.pg-card.is-center { --s: 1.06; top: 384px; }
.pg-card.is-center .pg-in { box-shadow: 0 34px 80px rgba(15,23,42,.24), 0 0 0 1px rgba(15,23,42,.06); }
.pg-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; }
.pg-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 36px; overflow: hidden; }
.pg-avatar svg { width: 18px; height: 18px; }
.pg-avatar img { display: block; width: 36px; height: 36px; max-width: none; object-fit: cover; }
.av-mono { font-family: 'Sora', sans-serif; font-weight: 800; font-size: .8rem; letter-spacing: -0.03em; }
.pg-meta { min-width: 0; line-height: 1.25; }
.pg-meta strong { display: block; font-size: .88rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-meta small { display: block; font-size: .74rem; color: #64748b; }
.pg-who { position: relative; flex: 0 0 36px; }
.pg-fb { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff; display: grid; place-items: center; }
.pg-fb svg { display: block; width: 16px; height: 16px; }
.pg-caption { margin: 0 14px 10px; font-size: .84rem; line-height: 1.45; color: #0f172a; }
.pg-in > img { display: block; width: 100%; height: auto; }
.pg-foot { display: flex; justify-content: space-around; padding: 8px 10px; border-top: 1px solid #e2e8f0; font-size: .78rem; font-weight: 600; color: #64748b; }
.pg-foot span { display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; }
/* Desktop: the card under the pointer straightens, rises and comes forward; the rest step back. */
@media (hover: hover) and (pointer: fine) {
  /* No restacking: the post under the pointer lifts in place and the others settle down,
     each by its own amount, tilt and timing (set by the script), so it never looks mechanical. */
  .pg-card:hover .pg-foot span:first-child { color: #1877f2; }
}
/* On load the cards hop up one after another, left to right and back, to draw the eye down;
   after that they float gently. These use the separate `translate` property, so they never
   fight the fan position (outer transform) or the hover lift (inner transform). */
.pg-fan.is-intro .pg-card { animation: pg-hop .75s cubic-bezier(.3,.7,.4,1) var(--d1) both, pg-hop2 .75s cubic-bezier(.3,.7,.4,1) var(--d2) both; }
/* Every other replay runs the wave the other way: right to left, then back. */
.pg-fan.is-intro.is-rev .pg-card { animation-delay: var(--e1), var(--e2); }
@keyframes pg-hop { 0% { translate: 0 0; } 40% { translate: 0 -30px; } 72% { translate: 0 5px; } 100% { translate: 0 0; } }
@keyframes pg-hop2 { 0% { translate: 0 0; } 40% { translate: 0 -22px; } 72% { translate: 0 4px; } 100% { translate: 0 0; } }
.pg-in { animation: pg-float var(--ft, 6s) ease-in-out var(--fd, 0s) infinite; }
@keyframes pg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.pg-card.is-up .pg-in { animation-play-state: paused; }
/* The raised post (hovered with a mouse, tapped on a phone): the script sets how far (enough to
   show most of the picture, fully inside the window), a straightened angle and a small sideways
   offset, all fresh each time. The others make room. */
/* Straighten first, then move: so the lift is straight up the screen, not along the post's tilt. */
.pg-fan .pg-card.is-up .pg-in { transform: rotate(var(--unrot, 0deg)) translate(var(--hx, 0px), var(--lift, -34px)); box-shadow: 0 40px 80px rgba(15,23,42,.26), 0 0 0 1px rgba(15,23,42,.10); }
.pg-fan.is-hovering .pg-card:not(.is-up) .pg-in { transform: translate(var(--shove, 0px), var(--sink, 0px)) rotate(var(--tilt, 0deg)); }
@media (prefers-reduced-motion: reduce) { .pg-card, .pg-in { transition: none; animation: none !important; }
  .landing-body .hero.pg { overflow: hidden; }
  .pg-fan { height: 700px; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); } }
@media (max-width: 900px) {
  /* Phones: the title, one line on what it does, the trial button and a peek of the posts all
     fit the first screen; spacing follows the screen height. The long paragraph and the second
     button go (scrolling down glides to the demo anyway). */
  /* One screen tall: the next section starts below the fold, so it never cuts the posts off. */
  .landing-body .hero.pg { min-height: calc(100svh - 61px); }
  .pg-wrap { width: 100%; padding-top: clamp(18px, 4svh, 44px); }
  .pg-title { font-size: clamp(2.2rem, 10.5vw, 2.9rem); }
  .pg-lead { margin-top: clamp(10px, 2svh, 18px); font-size: 1.08rem; }
  .pg-sub, .pg-how, .pg-long { display: none; }
  .pg-short { display: inline; }
  .pg-actions { flex-direction: column; margin-top: clamp(16px, 3svh, 28px); }
  .pg-trial { width: 100%; max-width: 360px; height: 58px; font-size: 1.15rem; justify-content: center; }
  .pg-note { margin-top: 10px; font-size: .84rem; }
  .pg-fan { height: 220px; margin-top: clamp(4px, 2svh, 24px); }
  .pg-card { width: 230px; margin-left: -115px; }
  .pg-card.pg-wide { display: none; }
  .pg-caption { display: none; }
}

.hw { background: #fff; padding: 56px 24px 88px; border-top: 1px solid #eef0f4; scroll-margin-top: 60px; }

.hw-wrap { max-width: 1060px; margin: 0 auto; }
.hw-head { text-align: center; max-width: 1060px; margin: 0 auto 26px; }
.hw-kicker { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7c3aed; margin-bottom: 10px; }
.hw-head h2 span { color: #7c3aed; }
.hw-head h2 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.3rem); line-height: 1.12; letter-spacing: -0.03em; color: #0f172a; margin: 0; }
/* The post's width follows the screen height (its design scales with it), so from the title to
   the bottom of the post fits on a laptop screen; tall screens get the full 420px. */
.hw-scene { --cw: clamp(300px, calc(100vh - 506px), 420px); display: grid; grid-template-columns: var(--cw); justify-content: center; }
.hw-side { margin: 4px 0 0; max-width: 240px; font-size: .88rem; color: #64748b; line-height: 1.5; }
.hw-cardwrap { position: relative; }
.hw-next { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 16px auto 0; width: max-content; max-width: 100%; text-align: center;
  font-weight: 700; font-size: .98rem; color: #6d28d9; text-decoration: none; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .6s ease, transform .6s ease; }
.hw-next.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hw-next i { display: grid; place-items: center; width: 28px; height: 28px; color: #7c3aed; }
.hw-next.is-on i { animation: hw-nudge 1.6s ease-in-out infinite; }
@keyframes hw-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.hw-next:hover span { text-decoration: underline; text-underline-offset: 3px; }
.hw-cardwrap .hw-card { z-index: 1; }
/* the one post */
.hw-card { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(15,23,42,.14), 0 0 0 1px rgba(15,23,42,.06); overflow: hidden; transition: transform .8s cubic-bezier(.22,1,.36,1), box-shadow .8s ease; }
.hw-card.is-lift { transform: translateY(-6px); box-shadow: 0 40px 90px rgba(15,23,42,.20), 0 0 0 1px rgba(15,23,42,.06); }
.hw-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.hw-h > span:not(.logo):not(.hw-av) { flex: 1; min-width: 0; }
/* The step in progress, under the status: a small bar and "Step 2 of 5". Its row keeps its
   height when hidden, so the post never jumps. */
.hw-prog { display: flex; align-items: center; gap: 8px; height: 12px; margin-top: 5px; transition: opacity .4s ease; }
.hw-prog.is-off { opacity: 0; }
.hw-prog i { flex: 0 1 120px; height: 4px; border-radius: 4px; background: #eef0f4; overflow: hidden; }
.hw-prog em { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #a78bfa, #7c3aed); transition-property: width; transition-timing-function: linear; }
.hw-prog small { font-size: .68rem; font-weight: 600; color: #94a3b8; white-space: nowrap; min-height: 0; }
.hw-h .hw-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; display: grid; place-items: center; }
.hw-h b { display: block; font-size: .92rem; color: #050505; }
.hw-h small { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: #65676b; min-height: 1em; }
.hw-h .logo { margin-left: auto; display: grid; }
.hw-h .logo > * { grid-area: 1 / 1; transition: opacity .5s ease, transform .5s ease; }
.hw-when { display: flex !important; align-items: center; gap: 6px; max-width: 100%; transition: color .3s ease; }
.hw-when .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-when.is-live { color: #6d28d9 !important; font-weight: 600; }
.hw-when .sp { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #ddd6fe; border-top-color: #7c3aed; animation: hw-rot .8s linear infinite; flex: 0 0 auto; }
.hw-when .lbl { opacity: 1; transition: opacity .18s ease; }
.hw-when .lbl.is-fade { opacity: 0; }
.hw-text { position: relative; padding: 0 14px 12px; }
.hw-sk[data-lines="1"] i:nth-child(n+2), .hw-sk[data-lines="2"] i:nth-child(n+3) { display: none; }
.hw-sk[data-lines="2"] i:nth-child(2) { width: 62%; }
.hw-idea { height: 26px; max-height: 26px; overflow: hidden; margin-bottom: 8px; opacity: 0; transition: opacity .4s ease, max-height .6s ease, margin .6s ease; }
.hw-idea.is-gone { max-height: 0; margin-bottom: 0; opacity: 0; }
.hw-idea.is-on { opacity: 1; }
.hw-idea-list { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.hw-idea-list div { height: 26px; display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #6d28d9; }
.hw-idea-list div::before { content: "Idea"; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: #ede9fe; }
.hw-idea.is-final .hw-idea-list div { color: #15803d; } .hw-idea.is-final .hw-idea-list div::before { background: #dcfce7; content: "Picked"; }
.hw-sk { position: absolute; left: 14px; right: 14px; top: 2px; display: flex; flex-direction: column; gap: 8px; transition: opacity .4s ease; }
.hw-sk i { height: 11px; border-radius: 6px; background: #eef0f4; }
.hw-sk i:nth-child(2) { width: 88%; } .hw-sk i:nth-child(3) { width: 62%; }
.hw-sk.is-shimmer i { background: linear-gradient(90deg, #eef0f4 0%, #f8f7ff 40%, #eef0f4 80%); background-size: 200% 100%; animation: hw-shim 1.2s linear infinite; }
@keyframes hw-shim { to { background-position: -200% 0; } }
.hw-caption { font-size: .92rem; line-height: 1.45; color: #050505; }
/* An invisible copy of the full caption holds its space, so the box always fits the finished
   text at any width or font, and the typed text (laid over it) can never spill under the photo. */
.hw-caption.hw-ghost { visibility: hidden; }
#hw-caption { position: absolute; left: 14px; right: 14px; top: 0; }
/* The cursor takes no width, so it can't push a word onto a new line. */
.hw-caption.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; margin-right: -4px; vertical-align: -2px; background: #7c3aed; animation: hw-blink 1s steps(1) infinite; }
@keyframes hw-blink { 50% { opacity: 0; } }
.hw-media { position: relative; aspect-ratio: 1; background: #f1f3f6; overflow: hidden; }
.hw-media .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #cbd5e1; transition: opacity .5s ease; }
.hw-media .ph svg { width: 54px; height: 54px; }
.hw-media.is-making::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); background-size: 220% 100%; animation: hw-shim 1.2s linear infinite; }
.hw-media .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity .45s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.hw-media .layer.is-on { opacity: 1; transform: none; }
.hw-media .layer.is-tpl { filter: none; transform: scale(1.02); transition: opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.hw-media .layer.is-tpl.is-on { transform: none; }
.hw-tag { position: absolute; top: 12px; left: 12px; transition: opacity .4s ease, left .5s ease, right .5s ease; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: .72rem; font-weight: 700; color: #6d28d9; opacity: 0; transition: opacity .4s ease; z-index: 3; display: inline-flex; align-items: center; gap: 6px; }
.hw-tag.is-on { opacity: 1; }
.hw-tag.is-right { left: auto; right: 12px; }
.hw-tag i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ddd6fe; border-top-color: #7c3aed; animation: hw-rot .8s linear infinite; }
@keyframes hw-rot { to { transform: rotate(360deg); } }
.hw-r { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: .78rem; color: #65676b; min-height: 34px; }
.hw-r .lk { display: inline-flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .5s ease; }
.hw-r .lk.is-on { opacity: 1; }
.hw-pend { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #b0b3b8; transition: opacity .4s ease; }
.hw-pend.is-gone { opacity: 0; }
.hw-r { position: relative; }
.hw-r .lk span { display: inline-block; transition: transform .25s ease; }
.hw-r .lk span.is-pop { transform: scale(1.18); color: #050505; font-weight: 700; }
.hw-burst { position: absolute; left: 22px; bottom: 18px; width: 0; height: 0; pointer-events: none; z-index: 6; }
.hw-burst i { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  animation: hw-float var(--t, 1.4s) cubic-bezier(.2,.6,.3,1) forwards; box-shadow: 0 4px 10px rgba(15,23,42,.18); }
.hw-burst i.dot { width: 7px; height: 7px; box-shadow: none; }
@keyframes hw-float { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 15% { opacity: 1; transform: translate(calc(var(--x) * .2), -14px) scale(1); }
  100% { transform: translate(var(--x), var(--y)) scale(.8) rotate(var(--r)); opacity: 0; } }
.hw-r .views { display: inline-flex; align-items: center; gap: 6px; transition: transform .25s ease; }
.hw-r .views.is-pop { transform: scale(1.12); color: #050505; font-weight: 700; }
.hw-r .lk i { width: 18px; height: 18px; border-radius: 50%; background: #1877f2; display: grid; place-items: center; }
.hw-a { position: relative; display: flex; justify-content: space-around; padding: 7px 4px; border-top: 1px solid #e4e6eb; font-size: .82rem; font-weight: 600; color: #65676b; }
.hw-a > span { display: inline-flex; align-items: center; gap: 6px; }
.hw-pub { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; z-index: 4; }
.hw-pub i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7c3aed, #06b6d4); }
.hw-pub.is-on i { width: 100%; transition: width 1.6s cubic-bezier(.4,0,.2,1); }
.hw-done { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); padding: 12px 18px; border-radius: 999px; background: #0f172a; color: #fff; font-size: .9rem; font-weight: 700; display: inline-flex; gap: 10px; align-items: center; opacity: 0; transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); z-index: 5; white-space: nowrap; box-shadow: 0 16px 40px rgba(15,23,42,.35); }
.hw-done.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: hw-pop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes hw-pop { 0% { transform: translate(-50%, -50%) scale(.6); } 60% { transform: translate(-50%, -50%) scale(1.08); } 100% { transform: translate(-50%, -50%) scale(1); } }
.hw-done { padding: 14px 22px !important; font-size: 1.05rem !important; box-shadow: 0 0 0 6px rgba(34,197,94,.25), 0 20px 50px rgba(15,23,42,.4) !important; }
.hw-done b { display: block; font-size: 1.2rem; line-height: 1.1; }
.hw-done small { display: block; font-size: .78rem; font-weight: 600; color: #cbd5e1; }
.hw-done .ok { width: 30px !important; height: 30px !important; }
/* confetti: flat pieces and curly streamers fly out past the card, then drift down */
.hw-confetti { position: absolute; left: 50%; top: 52%; width: 0; height: 0; z-index: 8; pointer-events: none; }
.hw-confetti > * { position: absolute; left: 0; top: 0; opacity: 0;
  animation: hw-conf var(--t) var(--dl) both, hw-sway var(--sw) ease-in-out var(--dl) infinite alternate, hw-spin var(--t) linear var(--dl) both; }
.hw-confetti .pc { width: var(--w); height: var(--h); border-radius: 2px; background: var(--c); }
.hw-confetti svg { overflow: visible; }
@keyframes hw-conf {
  0% { opacity: 1; translate: 0 0; scale: .4; animation-timing-function: cubic-bezier(.12,.8,.3,1); }
  20% { opacity: 1; translate: var(--x) var(--y); scale: 1; animation-timing-function: cubic-bezier(.4,0,.8,.7); }
  70% { opacity: 1; }
  100% { opacity: 0; translate: calc(var(--x) * 1.3) calc(var(--y) + var(--fall)); scale: .85; } }
@keyframes hw-sway { from { transform: translateX(calc(var(--sx) * -1)) rotateX(0deg); } to { transform: translateX(var(--sx)) rotateX(160deg); } }
@keyframes hw-spin { from { rotate: 0deg; } to { rotate: var(--r); } }
.hw-done .ok { width: 22px; height: 22px; border-radius: 50%; background: #22c55e; display: grid; place-items: center; }

@keyframes hw-ripple { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
/* the design, built live so every piece can move between layouts */
.hw-d { position: absolute; inset: 0; container-type: inline-size; background: #000; opacity: 0; z-index: 2; transition: background-color .6s ease; font-family: 'Outfit', sans-serif; }
.hw-d.is-on { opacity: 1; }
.hw-d > * { position: absolute; transition: left .6s cubic-bezier(.65,0,.35,1), top .6s cubic-bezier(.65,0,.35,1), width .6s cubic-bezier(.65,0,.35,1), height .6s cubic-bezier(.65,0,.35,1),
  border-radius .6s ease, opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1), filter .5s ease, color .6s ease, background-color .6s ease, font-size .6s cubic-bezier(.65,0,.35,1), letter-spacing .6s ease, border-color .6s ease, padding .6s ease, box-shadow .6s ease; }
.d-photo { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.d-shade { left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.82)); opacity: 0; }
.d-b1 { left: 100%; top: 0; width: 50%; height: 45%; background-color: #166534; opacity: 0; }
.d-b2 { left: 0; top: 100%; width: 100%; height: 27%; background-color: #b91c1c; opacity: 0; }
.d-b3 { left: 0; top: 100%; width: 50%; height: 28%; background-color: #f5efe6; opacity: 0; }
.d-brand { left: 5%; top: 5%; width: auto; font-size: 2.6cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; opacity: 0; padding: .8cqw 2cqw; border-radius: 99px; background-color: transparent; white-space: nowrap; }
.hw-d .d-h, .hw-d .d-sub, .hw-d .d-cta, .hw-d .d-brand { --dy: 0px; transform: translateY(var(--dy)); }
.hw-d.is-moving .d-h, .hw-d.is-moving .d-sub, .hw-d.is-moving .d-cta, .hw-d.is-moving .d-brand { opacity: 0 !important; --dy: 6px; filter: blur(3px); transition-duration: .2s !important; }
.d-h { left: 6%; top: 70%; width: 88%; font-size: 7.4cqw; font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; color: #fff; opacity: 0; text-align: left; }
.d-sub { left: 6%; top: 86%; width: 88%; font-size: 3.2cqw; color: #e2e8f0; opacity: 0; text-align: left; }
.d-cta { left: 6%; top: 92%; width: auto; font-size: 2.8cqw; font-weight: 700; color: #fff; background-color: #b91c1c; border: 2px solid #b91c1c; padding: 1cqw 3cqw; border-radius: 99px; opacity: 0; white-space: nowrap; }
/* full bleed */
.hw-d[data-s="full"] .d-shade { opacity: 1; }
.hw-d[data-s="full"] .d-brand { opacity: 1; background-color: rgba(255,255,255,.92); color: #111; }
.hw-d[data-s="full"] .d-h { opacity: 1; top: 56%; width: 80%; font-size: 8.4cqw; }
.hw-d[data-s="full"] .d-sub { opacity: 1; top: 77%; }
.hw-d[data-s="full"] .d-cta { opacity: 1; top: 85%; }
/* arch */
.hw-d[data-s="arch"] { background-color: #f6efe4; }
.hw-d[data-s="arch"] .d-photo { left: 22%; top: 13%; width: 56%; height: 48%; border-radius: 50cqw 50cqw 2cqw 2cqw; }
.hw-d[data-s="arch"] .d-brand { opacity: 1; left: 32%; top: 4%; color: #57534e; }
.hw-d[data-s="arch"] .d-h { opacity: 1; top: 65%; left: 8%; width: 84%; text-align: center; color: #b91c1c; font-size: 6.6cqw; }
.hw-d[data-s="arch"] .d-sub { opacity: 1; top: 81%; left: 8%; width: 84%; text-align: center; color: #57534e; }
.hw-d[data-s="arch"] .d-cta { opacity: 1; top: 88%; left: 39%; }
/* colour blocks */
.hw-d[data-s="blocks"] { background-color: #111; }
.hw-d[data-s="blocks"] .d-photo { width: 50%; height: 45%; }
.hw-d[data-s="blocks"] .d-b1 { left: 50%; opacity: 1; }
.hw-d[data-s="blocks"] .d-b2 { top: 45%; opacity: 1; }
.hw-d[data-s="blocks"] .d-b3 { top: 72%; opacity: 1; }
.hw-d[data-s="blocks"] .d-h { opacity: 1; top: 50%; left: 5%; width: 90%; font-size: 6.6cqw; }
.hw-d[data-s="blocks"] .d-sub { opacity: 1; top: 79%; left: 4%; width: 42%; color: #1c1917; font-weight: 600; }
.hw-d[data-s="blocks"] .d-brand { opacity: 1; left: 53%; top: 76%; font-size: 2.2cqw; color: #a8a29e; padding: 0; }
.hw-d[data-s="blocks"] .d-cta { opacity: 1; left: 53%; top: 88%; background-color: transparent; border-color: transparent; padding: 0; }
/* split */
.hw-d[data-s="split"] { background-color: #fff; }
.hw-d[data-s="split"] .d-photo { width: 48%; height: 100%; }
.hw-d[data-s="split"] .d-brand { opacity: 1; left: 52%; top: 9%; color: #b91c1c; padding: 0; }
.hw-d[data-s="split"] .d-h { opacity: 1; left: 53%; top: 26%; width: 42%; color: #111; font-size: 6.4cqw; }
.hw-d[data-s="split"] .d-sub { opacity: 1; left: 53%; top: 62%; width: 42%; color: #57534e; }
.hw-d[data-s="split"] .d-cta { opacity: 1; left: 53%; top: 78%; }
/* cinematic (the pick) */
.hw-d[data-s="cinema"] { background-color: #000; }
.hw-d[data-s="cinema"] .d-photo { top: 14%; height: 52%; }
.hw-d[data-s="cinema"] .d-brand { opacity: 1; left: 34%; top: 5%; letter-spacing: .3em; }
.hw-d[data-s="cinema"] .d-h { opacity: 1; top: 70%; text-align: center; font-size: 6.6cqw; }
.hw-d[data-s="cinema"] .d-sub { opacity: 1; top: 85%; text-align: center; color: #cbd5e1; }
.hw-d[data-s="cinema"] .d-cta { opacity: 1; top: 91%; left: 40%; background-color: transparent; border-color: #fff; }

@media (max-width: 900px) {
  /* Phones: just the title and the post, sized so both fit one screen under the menu bar.
     The post's own header shows each step. */
  .hw { padding: 16px 16px 56px; }
  .hw-head { margin-bottom: 12px; }
  .hw-kicker { margin-bottom: 6px; }
  .hw-head h2 { font-size: 1.62rem; }
  .hw-scene { grid-template-columns: 1fr; --cw: clamp(260px, calc(100svh - 478px), 420px); }
  .hw-cardwrap { width: min(var(--cw), 100%); margin: 0 auto; }
}
@media (max-width: 900px) and (max-height: 760px) {
  .hw-kicker { display: none; }
  .hw-scene { --cw: clamp(260px, calc(100svh - 422px), 420px); }
  .hw-foot { display: flex; align-items: center; border-top: 1px solid #e4e6eb; }
  .hw-foot .hw-r { flex: 1; min-width: 0; padding-right: 4px; white-space: nowrap; }
  .hw-foot .hw-a { flex: 0 0 auto; gap: 14px; padding: 0 12px 0 0; border-top: 0; }
  .hw-foot .hw-a > span { font-size: 0; gap: 0; }
  .hw-foot #hw-cm { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hw-next.is-on i { animation: none; } .hw-media .layer, .hw-card, .hw-done { transition: none; } .hw-sk.is-shimmer i, .hw-media.is-making::before { animation: none; } }

.su { position: relative; z-index: 2; padding: 64px 20px 72px; scroll-margin-top: 60px; overflow: hidden; }
.su-wrap { max-width: 1060px; margin: 0 auto; }
.su-head { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.su-kicker { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7c3aed; margin-bottom: 10px; }
.su-head h2 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.3rem); line-height: 1.12; letter-spacing: -0.03em; color: #0f172a; margin: 0; }
.su-head p { margin: 12px auto 0; max-width: 600px; color: #475569; font-size: 1.02rem; line-height: 1.55; }
.su-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fce7f3; box-shadow: inset 0 0 0 1.5px #db2777; flex: 0 0 auto; }
.su-av svg { width: 19px; height: 19px; stroke: #db2777; }
@media (max-width: 900px) {
  .su { padding: 28px 14px 48px; }
  .su-head { margin-bottom: 16px; }
  .su-head h2 { font-size: 1.5rem; }
  .su-head p { display: none; }
}
.su-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
.su-cta span { font-size: .88rem; color: #64748b; }
.su-btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 34px; border-radius: 16px; background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff; font-weight: 800; font-size: 1.12rem; text-decoration: none; box-shadow: 0 14px 32px rgba(124,58,237,.34), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s ease, box-shadow .2s ease; }
/* once the setup has played, the button asks for the click: a bounce, a glow ring and a light sweep */
.su-btn { position: relative; overflow: hidden; }
.su-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); opacity: 0; }
.su-btn.is-ready { animation: su-nudge 3.2s ease-in-out .2s infinite; }
.su-btn.is-ready::before { animation: su-shine 3.2s ease-in-out .2s infinite; }
@keyframes su-nudge {
  0%, 30%, 100% { transform: none; box-shadow: 0 14px 32px rgba(124,58,237,.34), 0 0 0 0 rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.25); }
  8% { transform: translateY(-4px) scale(1.04); }
  16% { transform: translateY(0) scale(.99); }
  22% { transform: none; box-shadow: 0 14px 32px rgba(124,58,237,.34), 0 0 0 14px rgba(124,58,237,0), inset 0 1px 0 rgba(255,255,255,.25); } }
@keyframes su-shine { 0%, 12% { left: -60%; opacity: 0; } 14% { opacity: 1; } 34% { left: 130%; opacity: 1; } 35%, 100% { left: 130%; opacity: 0; } }
.su-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(124,58,237,.44), inset 0 1px 0 rgba(255,255,255,.25); }
@media (max-width: 900px) { .su-cta { margin-top: 14px; } .su-btn { width: 100%; max-width: 360px; height: 52px; font-size: 1.05rem; } }
@media (max-width: 900px) and (max-height: 760px) { .su-a .su-kicker, .su-cta span { display: none; } .sa-body { --bh: clamp(300px, calc(100svh - 280px), 500px); } }
@media (prefers-reduced-motion: reduce) { .su *, .su *::before, .su *::after { transition: none !important; animation: none !important; } }

.su-a { background: linear-gradient(180deg, #faf7ff 0%, #ffffff 100%); padding: 30px 20px 40px; }
/* everything from the title to the trial button fits one screen: the window takes what's left */
.su-a .su-head { max-width: 900px; margin-bottom: 18px; }
.su-a .su-head p { display: none; }
.su-a .su-kicker { margin-bottom: 6px; }
.sa-win { --w: min(620px, 100%); width: var(--w); margin: 0 auto; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(15,23,42,.14), 0 0 0 1px rgba(15,23,42,.06); overflow: hidden; }
.sa-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #eef0f4; background: #fbfbfd; }
.sa-dots { display: flex; gap: 6px; } .sa-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e2e8f0; }
.sa-steps { display: flex; gap: 6px; margin-left: 6px; flex: 1; min-width: 0; }
.sa-steps span { flex: 1; height: 5px; border-radius: 4px; background: #eef0f4; overflow: hidden; }
.sa-steps span em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a78bfa, #7c3aed); transition: width .5s ease; }
.sa-count { font-size: .74rem; font-weight: 700; color: #6d28d9; background: #f3efff; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sa-body { --bh: clamp(300px, calc(100svh - 351px), 470px); position: relative; height: var(--bh); }
.sa-screen { position: absolute; inset: 0; padding: 20px 24px 18px; display: flex; flex-direction: column; opacity: 0; transform: translateX(24px); transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.sa-screen.is-on { opacity: 1; transform: none; transition-delay: .25s; }
.sa-screen.is-past { opacity: 0; transform: translateX(-24px); }
.sa-h { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; color: #0f172a; margin: 0 0 4px; }
.sa-p { color: #64748b; font-size: .9rem; margin: 0 0 12px; }
/* where we learn about the business: three sources, the website picked */
.sa-src { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sa-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px 12px; border-radius: 14px; border: 2px solid #eef0f4; text-align: center; font-size: .8rem; font-weight: 700; color: #334155; line-height: 1.2; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease, transform .3s ease; }
.sa-opt .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.sa-opt.is-hint { border-color: #c4b5fd; box-shadow: 0 0 0 4px rgba(167,139,250,.18); transform: translateY(-2px); }
.sa-opt.is-on { border-color: #7c3aed; background: #faf7ff; box-shadow: 0 8px 20px rgba(124,58,237,.16); }
.sa-urlrow { margin-top: 14px; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.sa-urlrow.is-on { opacity: 1; transform: none; }
.sa-field { display: flex; align-items: center; height: 50px; padding: 0 14px; border-radius: 12px; border: 2px solid #c4b5fd; background: #fff; font-size: 1rem; color: #0f172a; }
.sa-field::before { content: "https://"; color: #94a3b8; }
.sa-field.is-typing b::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; margin-right: -3px; vertical-align: -3px; background: #7c3aed; animation: sa-blink 1s steps(1) infinite; }
.sa-field b { font-weight: 500; }
@keyframes sa-blink { 50% { opacity: 0; } }
.sa-btn { margin-top: 12px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; font-weight: 800; font-size: 1rem; display: grid; place-items: center; transition: transform .15s ease, filter .3s ease; }
.sa-btn.is-press { transform: scale(.96); filter: brightness(1.1); }
/* what we found */
.sa-found { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #faf7ff; }
.sa-found b { display: block; font-size: 1rem; color: #0f172a; } .sa-found small { color: #64748b; font-size: .82rem; }
.sa-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .84rem; font-weight: 600; color: #475569; }
.sa-row > span:first-child { width: 64px; flex: 0 0 auto; }
.sa-sw { width: 30px; height: 30px; border-radius: 9px; transform: scale(0); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.sa-ph { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; transform: scale(0); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.sa-pop { transform: scale(1) !important; }
.sa-ok { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: all .35s ease; flex: 0 0 auto; }
.sa-ok.sa-pop { opacity: 1; }
/* connect */
.sa-fb { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 12px; background: #1877f2; color: #fff; font-weight: 800; font-size: 1.02rem; transition: transform .15s ease, background .4s ease; }
.sa-fb.is-press { transform: scale(.96); }
.sa-fb.is-done { background: #ecfdf5; color: #15803d; box-shadow: inset 0 0 0 2px #86efac; }
.sa-fb .sp { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: sa-rot .8s linear infinite; display: none; }
.sa-fb.is-wait .sp { display: block; }
@keyframes sa-rot { to { transform: rotate(360deg); } }
/* the calendar fills itself */
.sa-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, calc(2 * (var(--bh) - 196px))); margin: 0 auto; }
.sa-day { position: relative; border-radius: 10px; overflow: hidden; background: #f4f5f8; box-shadow: inset 0 0 0 1px #eef0f4; aspect-ratio: 1; }
.sa-day .d { position: absolute; z-index: 2; top: 5px; left: 5px; font-size: .58rem; font-weight: 800; letter-spacing: .05em; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.94); color: #0f172a; }
.sa-day .t { position: absolute; z-index: 2; bottom: 5px; right: 5px; font-size: .56rem; font-weight: 700; padding: 2px 5px; border-radius: 5px; background: rgba(15,23,42,.72); color: #fff; opacity: 0; transition: opacity .3s ease .2s; }
.sa-day { transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.sa-day img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(.4); transition: opacity .18s ease, transform .42s cubic-bezier(.34,1.7,.64,1); }
/* each post pops in with a little overshoot and lands slightly tilted, like it was dropped on the calendar */
.sa-day.is-in { transform: rotate(var(--tilt, 0deg)); box-shadow: 0 6px 16px rgba(15,23,42,.16); z-index: 1; }
.sa-day.is-in img { opacity: 1; transform: none; }
.sa-day.is-pop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px #a78bfa; animation: sa-ring .5s ease-out forwards; pointer-events: none; }
@keyframes sa-ring { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
.sa-day.is-in .t { opacity: 1; }
.sa-day.is-next { background: linear-gradient(90deg, #f4f5f8 0%, #faf7ff 40%, #f4f5f8 80%); background-size: 200% 100%; animation: sa-shim 1.3s linear infinite; display: grid; place-items: center; text-align: center; font-size: .66rem; font-weight: 700; color: #7c3aed; padding: 8px; }
@keyframes sa-shim { to { background-position: -200% 0; } }
.sa-auto { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f8fafc; box-shadow: inset 0 0 0 1px #eef0f4; transition: background .5s ease, box-shadow .5s ease; }
.sa-auto > span:last-child { min-width: 0; }
.sa-auto b { display: block; font-size: .92rem; color: #0f172a; }
/* one line, always: the row never changes height when it switches on */
.sa-auto small { display: block; font-size: .78rem; color: #64748b; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-sw2 { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 99px; background: #cbd5e1; transition: background .4s ease; }
.sa-sw2::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.25); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.sa-auto.is-on { background: #f5f3ff; box-shadow: inset 0 0 0 1.5px #c4b5fd; }
.sa-auto.is-on .sa-sw2 { background: #7c3aed; } .sa-auto.is-on .sa-sw2::after { transform: translateX(18px); }
@media (max-width: 900px) {
  .su-a { padding: 20px 14px 28px; }
  .su-a .su-head { margin-bottom: 12px; }
  .sa-body { --bh: clamp(300px, calc(100svh - 340px), 430px); }
  .sa-screen { padding: 18px 16px 16px; }
  .sa-cal { gap: 6px; }
  .sa-opt { font-size: .72rem; padding: 12px 4px 10px; }
}

.ex { padding: 72px 0 80px; background: #f7f8fa; border-top: 1px solid #eef0f4; }
.ex-head { text-align: center; max-width: 720px; margin: 0 auto 28px; padding: 0 20px; }
.ex-kicker { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7c3aed; margin-bottom: 10px; }
.ex-head h2 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.3rem); line-height: 1.12; letter-spacing: -0.03em; color: #0f172a; margin: 0; }
.ex-head p { margin: 12px auto 0; color: #475569; font-size: 1.02rem; line-height: 1.55; }
.ex-rail { position: relative; }
/* a sideways row that snaps card by card; the edges fade so it reads as "more this way" */
.ex-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 calc(50vw - 600px); padding: 6px calc(50vw - 600px) 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ex-track::-webkit-scrollbar { display: none; }
.ex-post { flex: 0 0 330px; scroll-snap-align: start; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 12px 32px rgba(15,23,42,.08); overflow: hidden; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.ex-h { display: flex; align-items: center; gap: 9px; padding: 11px 12px 8px; }
.ex-av { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px; overflow: hidden; display: grid; place-items: center; font-family: 'Sora', sans-serif; font-weight: 800; font-size: .76rem; letter-spacing: -0.02em; }
.ex-av img { width: 100%; height: 100%; object-fit: cover; }
.ex-who { min-width: 0; line-height: 1.25; }
.ex-who b { display: block; font-size: .9rem; color: #050505; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-who small { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: #65676b; }
.ex-dots { margin-left: auto; color: #65676b; font-weight: 700; letter-spacing: 1px; }
.ex-cap { margin: 0 12px 10px; font-size: .9rem; line-height: 1.38; color: #050505; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-cap b { color: #65676b; font-weight: 600; }
.ex-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #eef0f4; }
.ex-r { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: .8rem; color: #65676b; }
.ex-r > span:first-child { display: inline-flex; align-items: center; }
.ex-rx { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.ex-rx + .ex-rx { margin-left: -4px; }
.ex-r em { font-style: normal; margin-left: 6px; }
.ex-a { display: flex; justify-content: space-around; margin: 0 8px; padding: 4px 0 6px; border-top: 1px solid #e4e6eb; }
.ex-a span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 6px; font-size: .86rem; font-weight: 600; color: #65676b; }
.ex-a svg { width: 18px; height: 18px; }
.ex-nav { position: absolute; top: 42%; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #0f172a; box-shadow: 0 6px 18px rgba(15,23,42,.16); display: grid; place-items: center; cursor: pointer; transition: opacity .3s ease, transform .2s ease; }
.ex-nav:hover { transform: scale(1.06); }
.ex-nav[disabled] { opacity: 0; pointer-events: none; }
.ex-prev { left: max(12px, calc(50vw - 640px)); } .ex-next { right: max(12px, calc(50vw - 640px)); }
.ex-note { text-align: center; margin: 6px 20px 0; color: #64748b; font-size: .9rem; }
@media (max-width: 1240px) { .ex-track { scroll-padding: 0 24px; padding-left: 24px; padding-right: 24px; } }
@media (max-width: 900px) {
  .ex { padding: 48px 0 56px; }
  .ex-head { margin-bottom: 18px; } .ex-head p { font-size: .95rem; }
  .ex-head h2 { font-size: 1.5rem; }
  .ex-track { gap: 12px; scroll-padding: 0 16px; padding: 4px 16px 18px; }
  .ex-post { flex-basis: min(300px, 80vw); }
  .ex-nav { display: none; }
}

#features .sol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin: 0 auto; }
.sol-card h3 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; color: #0f172a; margin: 0 0 8px; }
.sol-card p { margin: 0; color: #475569; font-size: .96rem; line-height: 1.55; }
@media (max-width: 900px) { #features .sol-grid { grid-template-columns: 1fr; gap: 14px; } }

.sol-c .sol-card { padding: 22px 24px 24px; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg, 16px); }
.sol-c .peek { height: 100px; margin: 0 0 18px; border-radius: 12px; background: #faf7ff; display: grid; place-items: center; overflow: hidden; }
.pk-row { display: flex; gap: 8px; }
.pk-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 10px 7px; border-radius: 11px; border: 1.5px solid #eef0f4; background: #fff; font-size: .68rem; font-weight: 700; color: #334155; }
.pk-tile i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #fff; }
.pk-tile.on { border-color: #7c3aed; box-shadow: 0 6px 14px rgba(124,58,237,.16); }
.pk-days { display: flex; gap: 6px; }
.pk-days span { position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(15,23,42,.1); }
.pk-ctl { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(15,23,42,.06); }
.pk-ctl img { width: 56px; height: 56px; border-radius: 9px; object-fit: cover; }
.pk-ctl b { display: block; font-size: .8rem; color: #0f172a; }
.pk-ctl em { display: flex; gap: 6px; margin-top: 6px; font-style: normal; }
.pk-ctl u { text-decoration: none; font-size: .7rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: #f1f5f9; color: #334155; }
.pk-ctl u.ed { background: #7c3aed; color: #fff; }
.pk-days img { width: 100%; height: 100%; object-fit: cover; }
.pk-days b { position: absolute; left: 3px; top: 3px; font-size: .5rem; padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.94); color: #0f172a; }
.pk-step { width: 78%; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 16px rgba(15,23,42,.06); }
.pk-step small { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: #6d28d9; }
.pk-step small::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #ddd6fe; border-top-color: #7c3aed; }
.pk-step div { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.pk-step i { flex: 1; height: 4px; border-radius: 4px; background: #eef0f4; overflow: hidden; }
.pk-step i em { display: block; width: 58%; height: 100%; background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.pk-step span { font-size: .64rem; font-weight: 600; color: #94a3b8; }
.pk-auto { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px #c4b5fd; }
.pk-auto .sw { position: relative; width: 38px; height: 22px; border-radius: 99px; background: #7c3aed; }
.pk-auto .sw::after { content: ""; position: absolute; top: 3px; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.pk-auto b { display: block; font-size: .82rem; color: #0f172a; } .pk-auto small { font-size: .68rem; color: #64748b; }

.tm { padding: 72px 0 80px; background: #fff; border-top: 1px solid #eef0f4; overflow: hidden; }
.tm-head { text-align: center; max-width: 720px; margin: 0 auto 32px; padding: 0 20px; }
.tm-kicker { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7c3aed; margin-bottom: 10px; }
.tm-head h2 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.3rem); line-height: 1.12; letter-spacing: -0.03em; color: #0f172a; margin: 0; }
/* two rows drifting in opposite directions; each row holds its cards twice so the loop is seamless */
.tm-rows { display: flex; flex-direction: column; gap: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tm-row { display: flex; align-items: flex-start; gap: 18px; width: max-content; animation: tm-left var(--dur, 80s) linear infinite; }
.tm-row.is-right { animation-name: tm-right; }
/* room for a lifted card's shadow: the edge fade (a mask) clips anything outside this box */
.tm-rows { padding: 16px 0 46px; margin-bottom: -32px; }
/* the rows never stop; the card under the pointer lifts out a little instead */
.tm-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; }
@media (hover: hover) { .tm-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 40px rgba(15,23,42,.14); border-color: #ddd6fe; position: relative; z-index: 1; } }
@keyframes tm-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tm-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.tm-card { flex: 0 0 410px; margin: 0; padding: 22px 22px 20px; border-radius: 16px; background: #fff; border: 1px solid #e5e7eb; display: flex; flex-direction: column; }
.tm-stars { display: flex; gap: 2px; margin-bottom: 12px; }
.tm-q { margin: 0 0 14px; font-size: .98rem; line-height: 1.55; color: #0f172a; }
.tm-who { padding-top: 12px; border-top: 1px solid #f1f5f9; }
.tm-who b { font-size: .9rem; color: #334155; font-weight: 700; }
@media (max-width: 900px) {
  .tm { padding: 48px 0 56px; } .tm-head { margin-bottom: 22px; } .tm-head h2 { font-size: 1.5rem; }
  .tm-rows { gap: 12px; } .tm-row { gap: 12px; } .tm-card { flex-basis: 296px; padding: 18px 18px 16px; } .tm-q { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .tm-row { animation: none; } .tm-rows { overflow-x: auto; } }

.why { padding: 76px 20px 84px; background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%); border-top: 1px solid #eef0f4; }
.why-wrap { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; }
.why-kicker { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7c3aed; margin-bottom: 10px; }
.why h2 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.03em; color: #0f172a; margin: 0; }
.why-lead { margin: 14px 0 26px; color: #475569; font-size: 1.04rem; line-height: 1.6; max-width: 520px; }
.why-stats { display: grid; gap: 14px; }
.why-stat { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #e5e7eb; }
.why-stat b { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2.5rem; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(100deg, #7c3aed, #2563eb 60%, #06b6d4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.why-stat span { color: #334155; font-size: .98rem; line-height: 1.45; }
.why-src { margin: 14px 0 0; font-size: .78rem; color: #94a3b8; }
.why-src a { color: #64748b; }
/* the phone: Facebook's app, a search for a local plumber */
.why-phone { position: relative; width: 100%; max-width: 360px; margin: 0 auto; border-radius: 44px; background: #0f172a; padding: 10px; box-shadow: 0 40px 90px rgba(15,23,42,.24); }
.wp-screen { position: relative; border-radius: 35px; overflow: hidden; background: #f0f2f5; height: 680px; display: flex; flex-direction: column;
  font-family: -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #050505; }
.wp-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 6px; background: #fff; font-size: .82rem; font-weight: 600; }
.wp-status i { display: inline-flex; gap: 5px; align-items: center; }
.wp-island { position: absolute; left: 50%; top: 9px; width: 96px; height: 26px; margin-left: -48px; border-radius: 99px; background: #000; }
.wp-top { display: flex; align-items: center; gap: 10px; padding: 6px 12px 8px; background: #fff; }
.wp-bar { flex: 1; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; background: #f0f2f5; font-size: .92rem; }
.wp-q.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: #1877f2; animation: wp-blink 1s steps(1) infinite; }
@keyframes wp-blink { 50% { opacity: 0; } }
.wp-tabs { display: flex; gap: 8px; padding: 2px 12px 10px; background: #fff; border-bottom: 1px solid #e4e6eb; overflow: hidden; }
.wp-tabs span { padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #050505; background: #e4e6eb; white-space: nowrap; }
.wp-tabs span.on { color: #0064d1; background: #e7f0fd; }
.wp-feed { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.wp-res { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; gap: 8px; }
.wp-res.is-on { opacity: 1; transform: none; }
.wp-res.is-on.is-down { transform: translateY(var(--down, -240px)); transition: transform 1.1s cubic-bezier(.45,0,.2,1); }
.wp-ai { background: #fff; padding: 11px 12px 12px; }
.wp-ai-h { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: #65676b; margin-bottom: 6px; }
.wp-ai-h i { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 200deg, #0064e0, #a855f7, #ec4899, #0ea5e9, #0064e0); position: relative; }
.wp-ai-h i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.wp-ai p { margin: 0; font-size: .86rem; line-height: 1.4; }
.wp-post { background: #fff; }
.wp-ph { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.wp-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .86rem; flex: 0 0 38px; }
.wp-ph b { display: block; font-size: .88rem; } .wp-ph small { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: #65676b; }
.wp-dots { margin-left: auto; color: #65676b; font-weight: 700; letter-spacing: 1px; }
.wp-cap { padding: 0 12px 8px; font-size: .86rem; line-height: 1.38; }
.wp-post img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.wp-rx { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; font-size: .74rem; color: #65676b; }
.wp-rx > span { display: inline-flex; align-items: center; gap: 5px; }
.wp-rx i { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; box-shadow: 0 0 0 1.5px #fff; }
.wp-rx i + i { margin-left: -6px; }
.wp-act { display: flex; justify-content: space-around; margin: 0 10px; padding: 5px 0 7px; border-top: 1px solid #e4e6eb; font-size: .8rem; font-weight: 600; color: #65676b; }
.wp-act span { display: inline-flex; align-items: center; gap: 6px; }
.wp-quiet { opacity: .6; }
.wp-quiet .wp-cap { color: #65676b; font-style: italic; }
.wp-nav { display: flex; justify-content: space-around; align-items: center; padding: 8px 6px 18px; background: #fff; border-top: 1px solid #e4e6eb; color: #65676b; }
.wp-nav .on { color: #0866ff; }
.why-ill { margin-top: 12px; text-align: center; font-size: .72rem; color: #94a3b8; }
@media (max-width: 900px) {
  .why { padding: 52px 16px 60px; }
  .why-wrap { grid-template-columns: 1fr; gap: 30px; }
  .why-phone { max-width: 330px; } .wp-screen { height: 620px; }
  .why-stat { grid-template-columns: 84px 1fr; } .why-stat b { font-size: 2rem; }
  .why-lead { margin-bottom: 18px; }
}