/* Junto product page: cream + deep green + lime. Light by default; [data-theme="dark"] via the moon/sun toggle. */
:root {
  --ink: #12231b;
  --muted: #5e6e66;
  --green: #29b769;
  --green-bright: #b9f66f;
  --mint: #e4f5e9;
  --cream: #f7f4ec;
  --line: rgba(18, 35, 27, .12);
  --white: #fff;
  --radius-lg: 34px;
  --radius-md: 22px;
  --shadow: 0 28px 80px rgba(20, 53, 37, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
button, select { font: 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; }
.section-shell { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }

.site-header { height: 84px; width: min(1240px, calc(100% - 32px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; }
.brand { display: inline-flex; gap: 11px; align-items: center; font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: var(--ink); border-radius: 10px; transform: rotate(-6deg); font-size: 17px; letter-spacing: -2px; }
nav { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 600; }
nav a { opacity: .72; transition: .2s ease; }
nav a:hover { opacity: 1; }
.language-picker select { appearance: none; border: 1px solid var(--line); background: rgba(255,255,255,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%2312231b' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center; border-radius: 999px; padding: 9px 32px 9px 13px; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }

.hero { min-height: 720px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 40px; padding: 42px 0 86px; }
.eyebrow, .kicker { margin: 0 0 18px; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.46); }
.status-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 5px rgba(41,183,105,.12); }
h1, h2 { font-family: "Manrope", sans-serif; letter-spacing: -.055em; line-height: .99; }
h1 { margin: 0; max-width: 690px; font-size: clamp(58px, 7vw, 92px); }
.hero-lede { max-width: 590px; margin: 28px 0 32px; color: var(--muted); font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 23px; font-size: 14px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(18,35,27,.18); }
.button-ghost { border: 1px solid var(--line); background: rgba(255,255,255,.5); }
.hero-note { display: flex; gap: 34px; margin-top: 46px; }
.hero-note div { display: flex; flex-direction: column; gap: 3px; }
.hero-note strong { font-family: "Manrope"; font-size: 23px; }
.hero-note span { color: var(--muted); font-size: 12px; }

.phone-stage { min-height: 590px; display: grid; place-items: center; position: relative; overflow: hidden; background: var(--mint); border-radius: 48% 48% 42% 42% / 42% 42% 48% 48%; }
.phone-stage::after { content: ""; position: absolute; inset: 14%; background: radial-gradient(circle, rgba(185,246,111,.65), transparent 70%); filter: blur(28px); }
.orbit { position: absolute; border: 1px solid rgba(18,35,27,.12); border-radius: 50%; z-index: 1; }
.orbit-one { width: 470px; height: 470px; }
.orbit-two { width: 650px; height: 650px; }
.phone, .owner-phone, .dashboard-card { color: #12231b; }
.phone { width: 294px; height: 590px; border: 8px solid #101713; background: #eef1ec; border-radius: 43px; overflow: hidden; box-shadow: 0 40px 80px rgba(23,65,44,.28); position: relative; z-index: 2; transform: rotate(2.5deg); }
.phone-top { height: 34px; padding: 8px 17px 0; display: flex; justify-content: space-between; align-items: flex-start; background: #fff; font-size: 9px; font-weight: 700; }
.dynamic-island { width: 76px; height: 20px; border-radius: 20px; background: #111; margin-top: -3px; }
.chat-head { height: 65px; padding: 10px 14px; background: #fff; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e8ebe7; }
.chat-avatar { width: 38px; height: 38px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 50%; font-weight: 800; }
.business-avatar { font-size: 9px; letter-spacing: -.03em; }
.chat-head strong, .chat-head small { display: block; }
.chat-head strong { font-size: 13px; }
.chat-head small { color: #759080; font-size: 9px; margin-top: 2px; }
.chat-menu { margin-left: auto; color: #788279; }
.chat-body { height: 438px; padding: 16px 12px; background-color: #ecebe6; background-image: radial-gradient(rgba(18,35,27,.055) 1px, transparent 1px); background-size: 13px 13px; }
.day-pill { width: max-content; margin: 0 auto 14px; padding: 5px 10px; background: rgba(255,255,255,.8); border-radius: 8px; color: #687168; font-size: 8px; text-transform: uppercase; }
.bubble { max-width: 82%; margin-bottom: 9px; padding: 10px 11px; font-size: 10px; line-height: 1.45; box-shadow: 0 2px 5px rgba(0,0,0,.05); }
.incoming { background: #fff; border-radius: 5px 13px 13px 13px; }
.outgoing { margin-left: auto; background: #d9ffc8; border-radius: 13px 5px 13px 13px; }
.short { max-width: 50%; }
.booking-card { display: flex; gap: 10px; align-items: center; margin: 15px 2px; padding: 12px; background: #fff; border-radius: 12px; border-left: 4px solid var(--green); box-shadow: 0 6px 18px rgba(18,35,27,.08); }
.booking-icon { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--green); font-size: 11px; }
.booking-card small, .booking-card strong, .booking-card span { display: block; }
.booking-card small { color: var(--green); text-transform: uppercase; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.booking-card strong { font-size: 9px; margin: 3px 0; }
.booking-card div > span { color: #758077; font-size: 8px; }
.chat-input { height: 45px; padding: 7px 10px; display: flex; justify-content: space-between; align-items: center; background: #fff; color: #8a958e; font-size: 9px; }
.chat-input b { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; }

.trust-strip { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-strip div { padding: 24px 30px; display: flex; align-items: center; justify-content: center; gap: 12px; border-right: 1px solid var(--line); }
.trust-strip div:last-child { border: 0; }
.trust-strip span { color: var(--green); font-size: 10px; font-weight: 800; }
.trust-strip strong { font-size: 13px; }

.feature-section, .how-section, .connect-section { padding: 130px 0; }
.connect-section { padding-bottom: 40px; }
.connect-heading { max-width: 850px; }
.connection-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 15px; align-items: stretch; }
.connection-card { min-height: 390px; padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.58); box-shadow: 0 18px 55px rgba(20,53,37,.07); }
.connection-live { background: var(--ink); color: #fff; }
.connection-top { display: flex; align-items: center; justify-content: space-between; }
.connection-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--mint); color: var(--ink); font-weight: 800; }
.connection-live .connection-icon { background: var(--green-bright); }
.status-label { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.status-label.live { background: rgba(185,246,111,.15); color: var(--green-bright); }
.status-label.planned { background: #ecefe9; color: #65736a; }
.connection-step { margin: 42px 0 8px; color: var(--green); font-size: 11px; font-weight: 800; }
.connection-card h3 { margin: 0 0 12px; font: 750 23px/1.14 "Manrope"; letter-spacing: -.04em; }
.connection-card > p:not(.connection-step) { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.connection-live > p:not(.connection-step) { color: #aebcb4; }
.partner-chips { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 7px; }
.partner-chips span { padding: 7px 10px; border: 1px solid var(--line); background: rgba(255,255,255,.7); border-radius: 999px; color: var(--ink); font-size: 9px; font-weight: 800; }
.connection-live .partner-chips span { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #fff; }
.partner-chips-many span { padding-inline: 8px; }
.connection-arrow { align-self: center; color: var(--green); font-size: 24px; }
.section-heading { max-width: 770px; margin-bottom: 58px; }
.section-heading.compact { max-width: 650px; }
.kicker { color: var(--green); }
.kicker.light { color: var(--green-bright); }
h2 { margin: 0; font-size: clamp(43px, 5vw, 66px); }
.section-heading > p:last-child, .soon-heading > p, .module-copy > p { color: var(--muted); font-size: 17px; line-height: 1.65; }
.section-heading > p:last-child { max-width: 660px; margin: 24px 0 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card { min-height: 282px; padding: 28px; border: 1px solid var(--line); background: rgba(255,255,255,.58); border-radius: var(--radius-md); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(21,57,39,.1); }
.feature-icon { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 15px; background: var(--mint); color: var(--ink); font-size: 20px; }
.feature-card h3 { min-height: 51px; margin: 45px 0 10px; font: 700 21px/1.2 "Manrope"; letter-spacing: -.03em; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
.feature-icon svg { width: 22px; height: 22px; stroke: currentColor; }

.module-section { padding: 110px 0; background: var(--ink); color: #fff; overflow: hidden; }
.module-inner { display: grid; grid-template-columns: .88fr 1.12fr; gap: 80px; align-items: center; }
.module-copy > p { color: #a9b8b0; }
.module-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.module-tab { border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; border-radius: 999px; padding: 10px 14px; font-size: 12px; cursor: pointer; }
.module-tab.active { color: var(--ink); background: var(--green-bright); border-color: var(--green-bright); }
.dashboard-card { border: 1px solid rgba(255,255,255,.14); background: #f7f9f6; color: var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 36px 90px rgba(0,0,0,.27); transform: rotate(1deg); }
.dash-top { height: 64px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #e6eae5; }
.dash-top > div { display: flex; align-items: center; gap: 8px; }
.mini-logo { width: 27px; height: 27px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 8px; font-size: 11px; }
.pilot-badge { padding: 6px 9px; border-radius: 999px; background: var(--mint); color: #158849; font-size: 9px; text-transform: uppercase; font-weight: 800; letter-spacing: .1em; }
.dash-body { display: grid; grid-template-columns: 56px 1fr; min-height: 400px; }
.dash-body aside { padding-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; border-right: 1px solid #e4e9e4; background: #fff; }
.dash-body aside span { width: 30px; height: 30px; display: grid; place-items: center; color: #7b887f; border-radius: 9px; font-size: 12px; }
.dash-body aside .active { background: var(--mint); color: #128648; }
.dash-content { padding: 26px; }
.dash-title { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.dash-title small { color: #849087; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.dash-title h3 { margin: 4px 0 0; font: 800 22px "Manrope"; }
.dash-title button { border: 0; width: 31px; height: 31px; background: var(--ink); color: #fff; border-radius: 9px; }
.demo-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid #e2e7e1; }
.demo-time { color: #64736a; font-size: 10px; font-weight: 700; }
.demo-row strong, .demo-row small { display: block; }
.demo-row strong { font-size: 11px; }
.demo-row small { margin-top: 3px; color: #879188; font-size: 9px; }
.demo-state { padding: 6px 8px; background: #e0f6e7; color: #14834a; border-radius: 999px; font-size: 8px; font-weight: 800; }

.how-section { padding-top: 105px; padding-bottom: 105px; }
.how-section .section-heading { margin-bottom: 36px; }
.how-layout { display: grid; grid-template-columns: minmax(0,1fr) 382px; gap: 48px; align-items: start; }
.flow { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; counter-reset: flow; }
.flow-card { min-height: 190px; padding: 21px; border-top: 1px solid var(--ink); counter-increment: flow; }
.flow-card::before { content: "0" counter(flow); color: var(--green); font-size: 11px; font-weight: 800; }
.flow-card h3 { margin: 44px 0 8px; font: 700 19px "Manrope"; }
.flow-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.owner-chat-showcase { min-width: 0; margin-top: -270px; padding: 0 0 18px; }
.owner-view-label { width: max-content; margin: 0 auto 22px; padding: 11px 18px; display: flex; align-items: center; gap: 8px; background: #263746; color: #fff; border-radius: 999px; box-shadow: inset 0 0 0 5px #35485a; font-size: 12px; font-weight: 800; }
.owner-phone { position: relative; width: 340px; max-width: 100%; margin: auto; padding: 12px; border-radius: 42px; background: linear-gradient(160deg,#141821,#323847 60%,#0f1116); box-shadow: 0 28px 70px rgba(18,35,27,.28), 18px 18px 0 rgba(18,35,27,.08); }
.owner-phone::before { content: ""; position: absolute; left: -4px; top: 88px; width: 4px; height: 40px; border-radius: 4px 0 0 4px; background: #434958; box-shadow: 0 58px 0 #434958, 0 116px 0 #434958; }
.owner-phone::after { content: ""; position: absolute; right: -4px; top: 126px; width: 4px; height: 82px; border-radius: 0 4px 4px 0; background: #434958; }
.owner-screen { position: relative; width: 100%; height: 665px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 33px; background: #efeae2; }
.owner-island { position: absolute; z-index: 8; top: 8px; left: 50%; width: 106px; height: 27px; transform: translateX(-50%); border-radius: 20px; background: #0e1014; }
.owner-chat-head { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 86px; padding: 0 15px 8px; display: flex; align-items: flex-end; color: #fff; background: #168c70; }
.owner-chat-head::before { content: "9:41"; position: absolute; top: 12px; left: 20px; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.owner-back { margin-right: 8px; font-size: 21px; line-height: 36px; }
.owner-avatar { width: 37px; height: 37px; margin-right: 10px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #d5f4ea; color: #0f7c63; font: 800 14px "Manrope"; letter-spacing: -1px; }
.owner-identity { min-width: 0; }
.owner-chat-head strong, .owner-chat-head small { display: block; }
.owner-chat-head strong { font: 800 14px "Manrope"; line-height: 1.1; }
.owner-chat-head small { margin-top: 2px; font-size: 9px; opacity: .88; }
.owner-chat-icons { margin-left: auto; padding-bottom: 8px; font-size: 16px; }
.owner-status { position: absolute; top: 12px; right: 17px; display: flex; align-items: center; gap: 6px; }
.owner-wifi { position: relative; width: 18px; height: 11px; border-top: 2px solid #fff; border-radius: 50%; }
.owner-wifi::before { content: ""; position: absolute; top: 3px; left: 4px; width: 8px; height: 5px; border-top: 2px solid #fff; border-radius: 50%; }
.owner-battery { width: 23px; height: 11px; border-radius: 3px; background: #fff; }
.owner-chat-body { position: absolute; top: 86px; right: 0; bottom: 66px; left: 0; padding: 18px 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c6c2ba transparent; background-color: #efeae2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23d6d0c7' stroke-width='1.4' opacity='.42'%3E%3Cpath d='M29 26c8 0 8 10 16 10s8-10 16-10 8 10 16 10 8-10 16-10'/%3E%3Ccircle cx='107' cy='58' r='8'/%3E%3Cpath d='M88 116c7 0 7 8 14 8s7-8 14-8 7 8 14 8'/%3E%3Crect x='34' y='110' width='14' height='14' rx='3'/%3E%3Cpath d='M116 24l9 9m0-9l-9 9'/%3E%3C/g%3E%3C/svg%3E"); background-size: 160px 160px; }
.owner-day { width: max-content; margin: 0 auto 14px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.86); color: #66737c; box-shadow: 0 1px 2px rgba(0,0,0,.07); font-size: 10px; }
.owner-message { position: relative; max-width: 87%; margin-bottom: 8px; padding: 8px 10px 7px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: 11.5px; line-height: 1.32; }
.owner-message p { margin: 0; padding-right: 35px; color: #26343c; }
.owner-time { position: absolute; right: 8px; bottom: 5px; color: #667781; font-size: 9px; line-height: 1; }
.owner-command { margin-left: auto; border-top-right-radius: 0; background: #d9fdd3; }
.owner-command::after { content: ""; position: absolute; top: 0; right: -6px; border-top: 7px solid #d9fdd3; border-right: 6px solid transparent; }
.junto-reply { margin-right: auto; border-top-left-radius: 0; background: #fff; }
.junto-reply::before { content: ""; position: absolute; top: 0; left: -6px; border-top: 7px solid #fff; border-left: 6px solid transparent; }
.owner-chat-input { position: absolute; right: 0; bottom: 0; left: 0; height: 66px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border-top: 1px solid rgba(0,0,0,.05); background: #f0f2f5; color: #6b757b; }
.owner-add, .owner-clip { font-size: 18px; }
.owner-field { flex: 1; padding: 10px 14px; border-radius: 22px; background: #fff; color: #95a1a9; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); font-size: 12px; }
.owner-chat-input b { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #25d366; color: #fff; font-size: 13px; }
.owner-chat-caption { margin: 25px auto 0; max-width: 330px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.5; }

.soon-section { padding: 120px 0; background: #1a3025; color: #fff; }
.soon-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; margin-bottom: 62px; }
.soon-heading > p { margin: 0 0 5px; color: #aebcb4; }
.roadmap-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.roadmap-card { min-height: 216px; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 19px; background: rgba(255,255,255,.035); }
.roadmap-card .tag { display: inline-block; padding: 5px 8px; background: rgba(185,246,111,.12); color: var(--green-bright); border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.roadmap-card h3 { margin: 38px 0 9px; font: 700 18px "Manrope"; }
.roadmap-card p { margin: 0; color: #aebcb4; font-size: 13px; line-height: 1.55; }

.pilot-cta { margin-top: 28px; margin-bottom: 28px; min-height: 390px; padding: 58px; display: grid; grid-template-columns: auto 1fr auto; gap: 42px; align-items: center; border-radius: var(--radius-lg); background: var(--green-bright); }
.cta-mark { width: 96px; height: 96px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 27px; transform: rotate(-7deg); font: 800 41px "Manrope"; letter-spacing: -5px; }
.pilot-cta h2 { max-width: 780px; font-size: clamp(38px, 4.5vw, 60px); }
.pilot-cta p:last-child { max-width: 700px; line-height: 1.6; color: rgba(18,35,27,.72); }
.button-dark { background: var(--ink); color: #fff; white-space: nowrap; }

footer { width: min(1180px, calc(100% - 44px)); margin: 0 auto; min-height: 130px; display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.footer-brand { color: var(--ink); margin-right: auto; }
.reveal { transform: translateY(14px); transition: transform .7s ease; }
.reveal.visible { transform: none; }

@media (max-width: 940px) {
  nav { display: none; }
  .hero, .module-inner { grid-template-columns: 1fr; }
  .hero { padding-top: 50px; }
  .hero-copy { text-align: center; }
  .hero-copy h1, .hero-lede { margin-inline: auto; }
  .hero-actions, .hero-note { justify-content: center; }
  .phone-stage { width: min(600px,100%); margin: 20px auto 0; }
  .feature-grid, .roadmap-grid { grid-template-columns: repeat(2,1fr); }
  .connection-flow { grid-template-columns: 1fr; }
  .connection-card { min-height: 320px; }
  .connection-arrow { transform: rotate(90deg); justify-self: center; }
  .trust-strip { grid-template-columns: repeat(2,1fr); }
  .trust-strip div:nth-child(2) { border-right: 0; }
  .module-copy { text-align: center; }
  .module-tabs { justify-content: center; }
  .how-layout { grid-template-columns: 1fr; gap: 30px; }
  .owner-chat-showcase { width: min(100%, 430px); margin: 4px auto 0; }
  .soon-heading { grid-template-columns: 1fr; gap: 22px; }
  .pilot-cta { grid-template-columns: auto 1fr; }
  .pilot-cta .pilot-contact { grid-column: 2; justify-self: start; }
}

@media (max-width: 620px) {
  .section-shell { width: min(100% - 28px, 1180px); }
  .site-header { height: 70px; }
  .brand { font-size: 17px; }
  .brand-mark { width: 31px; height: 31px; }
  h1 { font-size: 51px; }
  h2 { font-size: 40px; }
  .hero { min-height: auto; padding-bottom: 64px; }
  .hero-lede { font-size: 16px; }
  .hero-note { gap: 20px; }
  .phone-stage { min-height: 540px; border-radius: 32px; }
  .phone { transform: scale(.88) rotate(2.5deg); }
  .trust-strip, .feature-grid, .roadmap-grid, .flow { grid-template-columns: 1fr; }
  .trust-strip div { justify-content: flex-start; padding-left: 28px; border-right: 0; border-bottom: 1px solid var(--line); }
  .feature-section, .how-section, .module-section, .soon-section, .connect-section { padding: 84px 0; }
  .connect-section { padding-bottom: 26px; }
  .feature-card { min-height: 235px; }
  .module-inner { gap: 50px; }
  .dash-content { padding: 18px; }
  .dash-body { grid-template-columns: 44px 1fr; }
  .demo-row { grid-template-columns: 40px 1fr; }
  .demo-state { display: none; }
  .how-section { padding: 70px 0; }
  .how-section .section-heading { margin-bottom: 28px; }
  .flow-card { min-height: 165px; }
  .flow-card h3 { margin-top: 30px; }
  .owner-chat-showcase { padding-inline: 0; }
  .owner-phone { width: min(338px, calc(100vw - 56px)); }
  .pilot-cta { padding: 36px 28px; grid-template-columns: 1fr; text-align: left; }
  .cta-mark { width: 72px; height: 72px; }
  .pilot-cta .pilot-contact { grid-column: 1; justify-self: stretch; }
  .pilot-cta .pilot-contact .button { width: 100%; }
  footer { flex-wrap: wrap; padding: 32px 0; gap: 12px; }
  footer p { width: 100%; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- additions ---------- */
.header-tools { display: flex; align-items: center; gap: 10px; }
.header-login { font-size: 13px; font-weight: 700; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.5); }
.theme-toggle { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.5); color: var(--ink); cursor: pointer; padding: 0; }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.module-tab[aria-selected="true"] { color: var(--ink); background: var(--green-bright); border-color: var(--green-bright); }
.dash-business { display: block; margin-top: 4px; color: #6c7a71; font-size: 11px; font-weight: 600; }
.demo-row { grid-template-columns: 58px minmax(0, 1fr) auto; }
.demo-row small b { color: #12231b; font-weight: 700; }
.demo-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.demo-note { color: #6c7a71; font-size: 9px; font-weight: 600; white-space: nowrap; }
.seats { width: 74px; height: 6px; border-radius: 99px; background: #e2e8e2; overflow: hidden; }
.seats i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.demo-state.wait { background: #fdf1d8; color: #8a5a12; }
.demo-state.info { background: #e6edf7; color: #2b4d7e; }
.dash-summary { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #eef5ef; color: #2c4a3a; font-size: 10px; font-weight: 600; }
.pilot-contact { display: grid; gap: 10px; justify-items: start; }
.pilot-contact .email { font-size: 13px; font-weight: 700; user-select: all; }
footer nav { display: flex; gap: 16px; font-size: 12px; font-weight: 600; }
footer nav a { opacity: .75; }
footer nav a:hover { opacity: 1; }
@media (max-width: 940px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } .demo-note { display: none; } }
@media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } .header-login { display: none; } .demo-meta .seats { display: none; } footer nav { flex-wrap: wrap; } }

/* ---------- dark theme (moon/sun toggle) ---------- */
:root[data-theme="dark"] { --ink: #e6efe9; --muted: #9db0a5; --cream: #0e1612; --mint: #1b3127; --line: rgba(230, 239, 233, .13); color-scheme: dark; }
:root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .button-ghost, :root[data-theme="dark"] .language-picker select,
:root[data-theme="dark"] .theme-toggle, :root[data-theme="dark"] .header-login { background-color: rgba(255,255,255,.05); }
:root[data-theme="dark"] .language-picker select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23e6efe9' stroke-linecap='round'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .language-picker option { background: #0e1612; }
:root[data-theme="dark"] .button-primary, :root[data-theme="dark"] .button-dark { background: var(--green-bright); color: #12231b; box-shadow: none; }
:root[data-theme="dark"] .brand-mark, :root[data-theme="dark"] .cta-mark { background: var(--green-bright); color: #12231b; }
:root[data-theme="dark"] .phone-stage { background: #15261d; }
:root[data-theme="dark"] .connection-card, :root[data-theme="dark"] .feature-card { background: rgba(255,255,255,.04); box-shadow: none; }
:root[data-theme="dark"] .connection-live { background: #1b3127; }
:root[data-theme="dark"] .status-label.planned { background: rgba(255,255,255,.08); color: #b9c8bf; }
:root[data-theme="dark"] .feature-icon, :root[data-theme="dark"] .connection-icon { color: #e6efe9; }
:root[data-theme="dark"] .connection-live .connection-icon { color: #12231b; }
:root[data-theme="dark"] .module-section { background: #08100c; }
:root[data-theme="dark"] .soon-section { background: #12221a; }
:root[data-theme="dark"] .pilot-cta { color: #12231b; }
:root[data-theme="dark"] .pilot-cta .kicker { color: #1a6b3f; }
:root[data-theme="dark"] .owner-view-label { background: #1b3127; box-shadow: inset 0 0 0 5px #24402f; }

/* FAQ */
.faq-section { padding: 110px 0 60px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq-heading { position: sticky; top: 32px; }
.faq-heading h2 { font-size: clamp(40px, 4.4vw, 58px); }
.faq-list { display: grid; gap: 10px; }
@media (max-width: 940px) { .faq-section { grid-template-columns: minmax(0, 1fr); gap: 26px; } .faq-heading { position: static; } }
.faq-item { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.58); padding: 0 22px; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 700 17px/1.3 "Manrope", sans-serif; letter-spacing: -.02em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--ink); font-size: 18px; font-weight: 600; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 72ch; }
:root[data-theme="dark"] .faq-item { background: rgba(255,255,255,.04); }
@media (max-width: 620px) { .faq-section { padding: 70px 0 40px; } .faq-item summary { font-size: 15px; } }

/* an odd number of coming-soon cards: the last one spans the full row */
.roadmap-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }

/* language switch: four buttons in a row */
.lang-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.5); }
.lang-switch button { border: 0; background: transparent; color: var(--muted); font: 700 12px "DM Sans", sans-serif; padding: 6px 9px; border-radius: 999px; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"]:hover { color: var(--cream); }
:root[data-theme="dark"] .lang-switch { background: rgba(255,255,255,.05); }
@media (max-width: 620px) { .lang-switch button { padding: 6px 7px; font-size: 11px; } }

/* WhatsApp + Instagram badges orbiting the phone on the inner ring */
.orbit-icons { position: absolute; width: 470px; height: 470px; z-index: 1; animation: orbit-spin 22s linear infinite; }
.orbit-badge { position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; border-radius: 50%; color: #fff; box-shadow: 0 12px 26px rgba(18,35,27,.22); animation: orbit-spin 22s linear infinite reverse; }
.orbit-badge svg { width: 28px; height: 28px; }
.orbit-badge.wa { left: 0; top: 50%; background: #25d366; }
.orbit-badge.ig { left: 100%; top: 50%; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) { .orbit-icons { width: 400px; height: 400px; } .orbit-badge { width: 46px; height: 46px; margin: -23px 0 0 -23px; } .orbit-badge svg { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .orbit-icons, .orbit-badge { animation: none; } }

/* Hero phone alternates between a WhatsApp chat and an Instagram DM */
.phone .screen { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.phone .screen.is-on { opacity: 1; pointer-events: auto; }
.ig-body { background: #fff; background-image: none; }
.ig-head { border-bottom-color: #efefef; }
.ig-avatar { padding: 2px; background: linear-gradient(45deg, #fdbb2d, #fd5949 45%, #d6249f 70%, #285aeb); }
.ig-avatar span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: var(--ink); border: 2px solid #fff; font-size: 9px; }
.ig-body .bubble { box-shadow: none; border-radius: 18px; }
.ig-body .incoming { background: #efefef; }
.ig-body .outgoing { color: #fff; background: linear-gradient(135deg, #a033ff, #5b51f7 60%, #3d8bfd); }
.ig-body .booking-card { border-left-color: #d6249f; }
.ig-body .booking-card small { color: #d6249f; }
.ig-body .booking-icon { background: linear-gradient(45deg, #fd5949, #d6249f); }
.ig-reel { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0 0 6px auto; color: #8e8e8e; font-size: 8px; }
.ig-reel-thumb { width: 54px; height: 86px; border-radius: 10px; background: linear-gradient(160deg, #c79a6b, #6b3f2a 55%, #2b1a14); }
.ig-input { margin: 0 8px; border: 1px solid #dbdbdb; border-radius: 22px; height: 38px; }
.ig-input b { background: linear-gradient(135deg, #a033ff, #3d8bfd); }
.orbit-badge { transition: transform .4s ease, box-shadow .4s ease; }
.orbit-badge:not(.active) { opacity: .75; }
.orbit-badge.active { box-shadow: 0 0 0 6px rgba(255,255,255,.7), 0 14px 30px rgba(18,35,27,.28); }
@media (prefers-reduced-motion: reduce) { .phone .screen { transition: none; } }

.booking-icon svg { width: 14px; height: 14px; display: block; }
.bubble.short { width: fit-content; max-width: 70%; }

/* Hero backdrop: a rounded card tall enough for the tilted phone at every width (the oval clipped its corners) */
.phone-stage { min-height: 680px; border-radius: 44px; }
@media (max-width: 1100px) and (min-width: 941px) { .phone-stage .phone { transform: scale(.9) rotate(2.5deg); } }
@media (max-width: 620px) { .phone-stage { min-height: 600px; border-radius: 32px; } }
.orbit-icons, .orbit-icons[class] { width: min(470px, calc(100% - 64px)); height: auto; aspect-ratio: 1; }
@media (max-width: 620px) { .orbit-icons { z-index: 3; } }

/* Hero backdrop: just a mint circle the size of the inner ring, phone standing in front of it */
.phone-stage, .phone-stage[class] { background: none; border-radius: 0; overflow-x: clip; overflow-y: visible; min-height: 640px; }
.phone-stage::before { content: ""; position: absolute; z-index: 0; width: min(470px, calc(100% - 64px)); aspect-ratio: 1; border-radius: 50%; background: var(--mint); }
.phone-stage::after { inset: auto; width: min(360px, calc(100% - 120px)); aspect-ratio: 1; z-index: 0; }
.orbit-two { display: none; }
@media (max-width: 620px) { .phone-stage, .phone-stage[class] { min-height: 560px; } }

/* Keep the message bar clear of the phone's rounded bottom corners */
.phone .screen { display: flex; flex-direction: column; }
.phone .screen .chat-body { flex: 1; height: auto; min-height: 0; overflow: hidden; }
.phone .screen .chat-input { flex: none; height: 40px; margin: 0; padding: 6px 16px 6px 18px; box-sizing: content-box; padding-bottom: 14px; }
.phone .screen .ig-input { margin: 6px 12px 16px; padding: 4px 6px 4px 14px; height: 32px; box-sizing: content-box; }

/* WhatsApp-style message bar: grey bar, +, white pill, paperclip, green send */
.phone .screen .wa-input { display: flex; align-items: center; gap: 8px; height: 34px; padding: 7px 14px 16px; background: #f0f2f5; color: #54656f; }
.wa-input .wa-plus { width: 16px; height: 16px; flex: none; }
.wa-input .wa-field { flex: 1; height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: #fff; color: #8a958e; font-size: 9px; }
.wa-input .wa-clip { width: 16px; height: 16px; flex: none; color: #8696a0; }
.wa-input b { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: #fff; background: #25d366; border-radius: 50%; font-size: 11px; }

/* WhatsApp screen styled like the real app */
.status-icons { display: inline-flex; gap: 4px; align-items: center; }
.status-icons svg:first-child { width: 12px; height: 12px; }
.status-icons svg:last-child { width: 20px; height: 10px; }
.phone .phone-top { position: relative; z-index: 3; background: #008069; color: #fff; transition: background .6s ease, color .6s ease; }
.phone.on-ig .phone-top { background: #fff; color: #12231b; }
.wa-head { background: #008069; color: #fff; border-bottom: 0; gap: 8px; padding: 8px 12px 10px 6px; height: 56px; }
.wa-head .wa-back { width: 16px; height: 16px; flex: none; }
.wa-head .chat-avatar { width: 34px; height: 34px; background: #dff3ea; color: #0b5d45; }
.wa-head .wa-title { flex: 1; min-width: 0; }
.wa-head strong { color: #fff; }
.wa-head small { color: rgba(255,255,255,.8); }
.wa-icons { display: inline-flex; gap: 14px; }
.wa-icons svg { width: 17px; height: 17px; }
.wa-body { background-color: #efeae2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='none' stroke='%23d9d1c5' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M6 10l6 6M12 10l-6 6M40 8c3 0 5 2 5 5M24 34l5-3 5 3-5 3zM50 40c0 3-2 5-5 5s-5-2-5-5M8 48h10M13 43v10M30 54c2-2 5-2 7 0'/%3E%3C/svg%3E"); background-size: 64px 64px; padding: 12px 10px; }
.wa-body .day-pill { background: #fff; color: #54656f; text-transform: none; font-size: 9px; border-radius: 7px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-body .bubble { position: relative; padding: 6px 8px 5px 9px; font-size: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.1); border-radius: 8px; margin-bottom: 6px; }
.wa-body .outgoing { background: #d9fdd3; border-top-right-radius: 0; }
.wa-body .incoming { background: #fff; border-top-left-radius: 0; }
.wa-body .outgoing::after, .wa-body .incoming::after { content: ""; position: absolute; top: 0; width: 8px; height: 10px; }
.wa-body .outgoing::after { right: -7px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-body .incoming::after { left: -7px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-body .bubble + .outgoing::after, .wa-body .bubble + .incoming::after { display: block; }
.wa-body .meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -2px 10px; color: #667781; font-size: 7.5px; line-height: 1; }
.wa-body .ticks { width: 12px; height: 8px; color: #53bdeb; }
.phone-top { align-items: center; padding-top: 0; font-size: 10px; }
.phone-top .dynamic-island { margin-top: 0; }
.status-icons .signal { width: 14px; height: 9px; }
.status-icons .wifi { width: 12px; height: 12px; }
.status-icons svg:last-child { width: 21px; height: 10px; }

/* Instagram DM styled like the real app */
.ig-head { background: #fff; color: #000; border-bottom: 0; gap: 8px; padding: 8px 12px 8px 6px; height: 54px; }
.ig-head .ig-back { width: 16px; height: 16px; flex: none; }
.ig-head .ig-avatar { width: 32px; height: 32px; }
.ig-head .ig-title { flex: 1; min-width: 0; }
.ig-head .ig-title small { color: #737373; }
.ig-icons { display: inline-flex; gap: 14px; }
.ig-icons svg { width: 17px; height: 17px; }
.ig-body { padding: 6px 10px 10px; display: flex; flex-direction: column; }
.ig-stamp { align-self: center; color: #737373; font-size: 8px; margin: 2px 0 8px; }
.ig-reel { align-items: flex-end; margin: 0 0 4px auto; color: #737373; font-size: 7.5px; }
.ig-reel-thumb { width: 50px; height: 80px; border-radius: 12px; }
.ig-body .bubble { padding: 8px 11px; border-radius: 18px; font-size: 10px; margin-bottom: 5px; max-width: 76%; }
.ig-body .outgoing { margin-left: auto; color: #fff; background: #7c3aed; background: linear-gradient(180deg, #8b3dff, #6f2bf2); }
.ig-body .incoming { background: #efefef; color: #000; }
.ig-row { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 5px; }
.ig-row .bubble { margin-bottom: 0; }
.ig-mini { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 6px; font-weight: 800; }
.ig-composer { flex: none; display: flex; align-items: center; gap: 9px; margin: 4px 10px 16px; padding: 4px 12px 4px 4px; height: 34px; border-radius: 999px; background: #efefef; color: #000; }
.ig-composer > svg { width: 15px; height: 15px; flex: none; }
.ig-cam { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #7c3aed; }
.ig-cam svg { width: 15px; height: 15px; }
.ig-field { flex: 1; color: #737373; font-size: 9px; }
.ig-composer { gap: 0; padding: 4px 14px 4px 4px; height: 36px; background: #f0f0f0; }
.ig-composer .ig-field { margin-left: 9px; }
.ig-composer > svg { width: 18px; height: 18px; margin-left: 13px; color: #262626; }
.phone .screen-ig { background: #fff; }
.phone .screen-wa { background: #f0f2f5; }

/* WhatsApp composer: white pill (emoji, text, clip, camera) + green mic */
.phone .screen .wa-input { gap: 6px; padding: 6px 8px 16px; background: #efeae2; }
.wa-input .wa-pill { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border-radius: 999px; background: #fff; color: #8696a0; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-input .wa-pill svg { width: 16px; height: 16px; flex: none; }
.wa-input .wa-field { flex: 1; height: auto; padding: 0; background: none; color: #8696a0; font-size: 9.5px; border-radius: 0; }
.wa-input b { width: 32px; height: 32px; background: #00a884; }
.wa-input b svg { width: 15px; height: 15px; }
.wa-icons svg:last-child { width: 15px; margin-left: -4px; }

/* Owner chat: same real-WhatsApp details as the hero */
.owner-chat-head { background: #008069; }
.owner-chat-head::before { top: 13px; }
.owner-back { width: 18px; height: 18px; margin: 0 6px 9px -4px; flex: none; }
.owner-chat-icons { display: inline-flex; gap: 16px; align-items: center; }
.owner-chat-icons svg { width: 19px; height: 19px; }
.owner-chat-icons svg.dots { width: 16px; margin-left: -6px; }
.owner-status { top: 13px; right: 20px; }
.owner-status .status-icons .signal { width: 16px; height: 10px; }
.owner-status .status-icons .wifi { width: 14px; height: 14px; }
.owner-status .status-icons svg:last-child { width: 24px; height: 12px; }
.owner-chat-input.wa-input { height: auto; padding: 8px 10px 16px; gap: 7px; border-top: 0; background: #efeae2; }
.owner-chat-input .wa-pill { height: 40px; padding: 0 13px; gap: 11px; }
.owner-chat-input .wa-pill svg { width: 20px; height: 20px; }
.owner-chat-input .wa-field { font-size: 12px; box-shadow: none; }
.owner-chat-input.wa-input b { width: 40px; height: 40px; background: #00a884; }
.owner-chat-input.wa-input b svg { width: 18px; height: 18px; }