/* AI automation page (21 Oct 2026, v2): the loyalty page's language with live screens.
   Phones are Oscar's photographed iPhone (images/ai/iphone-frame.webp) laid over live HTML.
   Phone UI is sized in iPhone points: --pt is 1/393 of the screen width. Sample data throughout. */

/* ---------- the phone */
.ai-phone { position: relative; width: 100%; max-width: 360px; aspect-ratio: 620 / 1287; margin: 0 auto; filter: drop-shadow(0 40px 50px rgba(10,31,68,.32)); }
.ai-screen { position: absolute; left: 6.7742%; top: 2.9526%; width: 86.4516%; height: 94.0948%; overflow: hidden; border-radius: 9.33% / 4.13%;
  background: #0b1b3a; container-type: size; --pt: calc(100cqw / 393); color: #111;
  font-family: -apple-system, "SF Pro Text", var(--font-sans); -webkit-font-smoothing: antialiased; }
.ai-frame { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.ai-island { position: absolute; z-index: 6; top: calc(11 * var(--pt)); left: 50%; width: calc(122 * var(--pt)); height: calc(36 * var(--pt)); transform: translateX(-50%); border-radius: 999px; background: #000; }
.ai-status { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: calc(54 * var(--pt)); display: flex; align-items: center; justify-content: space-between;
  padding: calc(3 * var(--pt)) calc(30 * var(--pt)) 0 calc(42 * var(--pt)); color: #fff; font: 600 calc(16 * var(--pt))/1 -apple-system, "SF Pro Text", var(--font-sans); }
.ai-status--dark { color: #111; }
.ai-status-r { display: flex; align-items: center; gap: calc(6 * var(--pt)); }
.ai-status i { display: block; background: currentColor; }
.ai-sig { width: calc(17 * var(--pt)); height: calc(11 * var(--pt)); -webkit-mask: linear-gradient(90deg, #000 0 18%, transparent 18% 27%, #000 27% 45%, transparent 45% 54%, #000 54% 72%, transparent 72% 81%, #000 81%) , linear-gradient(0deg, #000 0 100%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, #000 0 18%, transparent 18% 27%, #000 27% 45%, transparent 45% 54%, #000 54% 72%, transparent 72% 81%, #000 81%); clip-path: polygon(0 70%, 27% 50%, 54% 28%, 81% 0, 100% 0, 100% 100%, 0 100%); }
.ai-wifi { width: calc(15 * var(--pt)); height: calc(11 * var(--pt)); clip-path: polygon(50% 100%, 0 30%, 15% 12%, 50% 0, 85% 12%, 100% 30%); border-radius: 2px; }
.ai-batt { position: relative; width: calc(25 * var(--pt)); height: calc(12 * var(--pt)); border-radius: calc(3.5 * var(--pt)); background: none !important; box-shadow: inset 0 0 0 calc(1.2 * var(--pt)) currentColor; opacity: .95; }
.ai-batt::before { content: ""; position: absolute; inset: calc(2 * var(--pt)); right: calc(5 * var(--pt)); border-radius: calc(1.5 * var(--pt)); background: currentColor; }

/* ---------- hero: the lock screen, starlings at dusk */
.ai .lp-hero-in { align-items: center; padding-top: 44px; padding-bottom: 56px; }
.ai .lp-hero-text { padding-bottom: 0; }
/* the whole phone always fits on screen under the header */
.ai-phone--hero { width: min(380px, calc((100svh - 190px) * 620 / 1287)); min-width: 250px; max-width: none; margin: 0 auto; align-self: center; filter: drop-shadow(0 40px 50px rgba(0,0,0,.5)); }
.ai-phone--hero .ai-screen { background: linear-gradient(180deg, #4d4585 0%, #7d6aa8 26%, #b38bb4 52%, #dca7b2 74%, #f4c6a9 100%); }
.ai-flock { position: absolute; inset: 0; width: 100%; height: 100%; }
.ai-lock-date, .ai-lock-time { position: absolute; z-index: 2; left: 0; right: 0; margin: 0; text-align: center; color: #fff; }
.ai-lock-date { top: calc(70 * var(--pt)); font: 600 calc(20 * var(--pt))/1 -apple-system, "SF Pro Text", var(--font-sans); opacity: .9; }
.ai-lock-time { top: calc(94 * var(--pt)); font: 700 calc(96 * var(--pt))/1 -apple-system, "SF Pro Display", var(--font-sans); letter-spacing: calc(-2 * var(--pt)); opacity: .96; font-variant-numeric: tabular-nums; }
.ai-notes { position: absolute; z-index: 4; left: calc(12 * var(--pt)); right: calc(12 * var(--pt)); bottom: calc(118 * var(--pt)); display: flex; flex-direction: column; gap: calc(8 * var(--pt)); }
.ai-note, .ai-push { display: flex; gap: calc(11 * var(--pt)); align-items: center; padding: calc(12 * var(--pt)) calc(13 * var(--pt)); border-radius: calc(21 * var(--pt));
  background: rgba(246,246,250,.64); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); color: #111; }
.ai-note { display: none; }
.ai-note.is-in { display: flex; animation: ai-note-in .6s cubic-bezier(.16,1,.3,1); }
.ai-note.is-out { display: flex; animation: ai-note-out .45s ease forwards; }
@keyframes ai-note-in { from { opacity: 0; transform: translateY(calc(-14 * var(--pt))) scale(.96); } }
@keyframes ai-note-out { to { opacity: 0; transform: scale(.94); } }
.ai-note-ic { flex: none; display: grid; place-items: center; width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: calc(9 * var(--pt)); color: #fff; }
.ai-note-ic svg { width: 60%; height: 60%; }
.ai-note div, .ai-push div { flex: 1; min-width: 0; }
.ai-note b, .ai-push b { display: flex; justify-content: space-between; gap: 8px; font-size: calc(15 * var(--pt)); font-weight: 600; line-height: 1.2; }
.ai-note b small, .ai-push b small { font-size: calc(13 * var(--pt)); font-weight: 400; color: rgba(0,0,0,.5); }
.ai-note p, .ai-push p { margin: calc(2 * var(--pt)) 0 0; font-size: calc(14.5 * var(--pt)); line-height: 1.3; }
.ai-live { display: flex; align-items: center; gap: 10px; margin: 30px 0 0; font: 500 14px/1.4 var(--font-sans); color: #c7d2ea; }
.ai-live i { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: ai-pulse 2s infinite; }
@keyframes ai-pulse { 70% { box-shadow: 0 0 0 10px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

/* ---------- running right now: one job at a time, on its own screen */
.ai-show { padding-top: 120px; }
.ai-showcase { margin-top: 56px; }
.ai-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ai-rail-btn { position: relative; padding: 18px 0 4px; border: 0; border-top: 2px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--muted); font-family: var(--font-sans); }
.ai-rail-btn b { display: block; margin-bottom: 6px; font: 400 clamp(22px, 2.2vw, 30px)/1 var(--font-sans); letter-spacing: -.03em; color: inherit; transition: color .3s; }
.ai-rail-btn span { font: 500 12px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.ai-rail-btn i { position: absolute; top: -2px; left: 0; height: 2px; width: 0; background: var(--ink); }
.ai-rail-btn:hover, .ai-rail-btn.is-on { color: var(--ink); }
.ai-rail-btn.is-on i { animation: ai-fill var(--ai-dur, 8s) linear forwards; }
.ai-showcase.is-paused .ai-rail-btn.is-on i, .ai-showcase.is-still .ai-rail-btn.is-on i { animation-play-state: paused; }
.ai-showcase.is-still .ai-rail-btn.is-on i { width: 100%; animation: none; }
@keyframes ai-fill { to { width: 100%; } }
.ai-rail-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: 4px; }
.ai-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; margin-top: 56px; }
.ai-scene { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1), visibility 0s .6s; }
.ai-scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .1s, transform .7s cubic-bezier(.16,1,.3,1) .1s, visibility 0s; }
.ai-when { margin: 0 0 18px; font: 500 12px/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.ai-scene-copy h3 { margin: 0 0 16px; font: 400 clamp(30px, 3vw, 44px)/1.06 var(--font-sans); letter-spacing: -.035em; color: var(--ink); }
.ai-scene-copy p { margin: 0; max-width: 42ch; font: 400 17px/1.6 var(--font-sans); color: var(--muted); }
.ai-scene-copy a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.ai-scene-copy .ai-instead { margin-top: 22px; padding-left: 14px; border-left: 2px solid var(--line); font-size: 15px; }
.ai-scene-vis--phone .ai-phone { max-width: 330px; }

/* windows: a clean app window, like the loyalty owner page */
.ai-win { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(10,31,68,.08), 0 40px 70px -28px rgba(10,31,68,.42); font-family: var(--font-sans); color: var(--ink); }
.ai-win-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #F4F1EA; border-bottom: 1px solid rgba(10,31,68,.06); }
.ai-win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #D9D3C7; }
.ai-win-bar span { margin-left: 10px; font: 500 12px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ai-mail, .ai-capw, .ai-spam { padding: 28px 30px 30px; }
.ai-mail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ai-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; }
.ai-av svg { width: 22px; height: 22px; }
.ai-mail-head b { display: block; font: 500 16px/1.2 var(--font-sans); }
.ai-mail-head small { font: 400 13px/1.3 var(--font-sans); color: var(--muted); }
.ai-mail h4, .ai-capw h4, .ai-spam h4 { margin: 0 0 8px; font: 400 24px/1.15 var(--font-sans); letter-spacing: -.02em; }
.ai-mail > p { margin: 0 0 18px; font: 400 15px/1.55 var(--font-sans); color: var(--muted); }
.ai-attach { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 10px 16px 10px 10px; border: 1px solid var(--line); border-radius: 12px; }
.ai-xls { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 6px; background: #1F7A4D; color: #fff; font: 700 10px/1 var(--font-sans); letter-spacing: .04em; }
.ai-attach b { display: block; font: 500 14px/1.3 var(--font-sans); }
.ai-attach small { font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.ai-table { width: 100%; border-collapse: collapse; font: 400 13.5px/1.35 var(--font-sans); }
.ai-table th { padding: 8px 10px 8px 0; text-align: left; font: 500 11px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.ai-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid #F0ECE4; vertical-align: top; }
.ai-table td small { display: block; color: var(--muted); font-size: 12px; }
.ai-table tbody tr { opacity: 0; }
.ai-scene.is-on .ai-table tbody tr { animation: ai-row .5s ease forwards; }
.ai-scene.is-on .ai-table tbody tr:nth-child(2) { animation-delay: .12s; } .ai-scene.is-on .ai-table tbody tr:nth-child(3) { animation-delay: .24s; }
.ai-scene.is-on .ai-table tbody tr:nth-child(4) { animation-delay: .36s; } .ai-scene.is-on .ai-table tbody tr:nth-child(5) { animation-delay: .48s; }
@keyframes ai-row { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.ai-none { color: #1F7A4D; font-weight: 500; }
.ai-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 600 11.5px/1.2 var(--font-sans); }
.ai-tag--hot { background: #E3F4EA; color: #1F7A4D; }
.ai-tag--mid { background: #FFF1D6; color: #8A5A00; }
.ai-sample { margin: 16px 0 0; font: 400 12px/1.3 var(--font-sans); color: var(--muted); opacity: .8; }

/* phone apps (light screens) */
.ai-phone--light .ai-screen { background: #F7F5F0; }
.ai-app { position: absolute; inset: calc(54 * var(--pt)) 0 0; padding: calc(16 * var(--pt)) calc(18 * var(--pt)); overflow: hidden; font-size: calc(15 * var(--pt)); }
.ai-app-kicker { margin: 0 0 calc(6 * var(--pt)); font-size: calc(11 * var(--pt)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a8f99; }
.ai-app-h { margin: 0 0 calc(16 * var(--pt)); font-size: calc(26 * var(--pt)); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: #111; }
.ai-posts { display: flex; flex-direction: column; gap: calc(10 * var(--pt)); }
.ai-post { display: flex; gap: calc(12 * var(--pt)); align-items: center; padding: calc(8 * var(--pt)); border-radius: calc(16 * var(--pt)); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.ai-post img { flex: none; width: calc(78 * var(--pt)); height: calc(97 * var(--pt)); border-radius: calc(10 * var(--pt)); object-fit: cover; }
.ai-post b { display: block; font-size: calc(12 * var(--pt)); font-weight: 600; color: #8a8f99; letter-spacing: .02em; }
.ai-post p { margin: calc(3 * var(--pt)) 0 calc(7 * var(--pt)); font-size: calc(14 * var(--pt)); line-height: 1.3; color: #111; }
.ai-pill { display: inline-block; padding: calc(4 * var(--pt)) calc(9 * var(--pt)); border-radius: 999px; background: #ECEFF5; color: #4A5872; font-size: calc(11 * var(--pt)); font-weight: 600; }
.ai-win .ai-pill, .ai-mini-draft .ai-pill { padding: 4px 10px; font: 600 11.5px/1.2 var(--font-sans); }
.ai-pill--ok { background: #E3F4EA; color: #1F7A4D; }
.ai-post.is-done { outline: calc(1.5 * var(--pt)) solid #CDEBD8; }
.ai-push { position: absolute; z-index: 4; top: calc(4 * var(--pt)); left: calc(8 * var(--pt)); right: calc(8 * var(--pt)); background: rgba(255,255,255,.92); box-shadow: 0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgba(0,0,0,.14); transform: translateY(-160%); }
.ai-scene.is-on .ai-push { animation: ai-push 6s cubic-bezier(.16,1,.3,1) 1.4s forwards; }
@keyframes ai-push { 0% { transform: translateY(-160%); } 12%, 70% { transform: translateY(0); } 100% { transform: translateY(0); } }
.ai-booking { display: flex; gap: calc(14 * var(--pt)); align-items: center; padding: calc(16 * var(--pt)); border-radius: calc(18 * var(--pt)); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.ai-cal { flex: none; display: flex; flex-direction: column; align-items: center; width: calc(58 * var(--pt)); padding: calc(6 * var(--pt)) 0 calc(8 * var(--pt)); border-radius: calc(12 * var(--pt)); background: #EEF2FF; color: #2B4FB3; }
.ai-cal small { font-size: calc(11 * var(--pt)); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ai-cal b { font-size: calc(26 * var(--pt)); line-height: 1; }
.ai-booking b { font-size: calc(16 * var(--pt)); }
.ai-booking p { margin: calc(2 * var(--pt)) 0 0; font-size: calc(13.5 * var(--pt)); color: #555; }
.ai-mail-p { margin: calc(16 * var(--pt)) 0; font-size: calc(14.5 * var(--pt)); line-height: 1.4; color: #333; }
.ai-btns { display: flex; gap: calc(8 * var(--pt)); }
.ai-btn { flex: 1; display: grid; place-items: center; padding: calc(12 * var(--pt)) calc(10 * var(--pt)); border: 0; border-radius: calc(14 * var(--pt)); background: #E9E7E1; color: #111; font: 600 calc(15 * var(--pt))/1.2 -apple-system, "SF Pro Text", var(--font-sans); cursor: default; }
.ai-btn--blue { background: #4F7FFF; color: #fff; }
button.ai-btn { cursor: pointer; transition: transform .15s, background .2s; }
button.ai-btn:hover { transform: translateY(-1px); }
button.ai-btn:focus-visible { outline: 2px solid #4F7FFF; outline-offset: 2px; }
.ai-app .ai-sample { font-size: calc(11 * var(--pt)); }

/* caption writer */
.ai-capw-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.ai-capw-head small { font: 400 13px/1.3 var(--font-sans); color: var(--muted); }
.ai-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #F1EEE7; font: 500 12px/1 var(--font-sans); white-space: nowrap; }
.ai-seg b, .ai-seg span { padding: 7px 12px; border-radius: 999px; font-weight: 500; color: var(--muted); }
.ai-seg b { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ai-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ai-cap { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 14px; transition: border-color .3s, box-shadow .3s; }
.ai-cap p { flex: 1; margin: 0 0 14px; font: 400 14px/1.5 var(--font-sans); color: var(--ink); }
.ai-meter span { display: block; height: 5px; border-radius: 999px; background: #EEEAE2; overflow: hidden; }
.ai-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: #2FA36B; transition: width 1.1s cubic-bezier(.16,1,.3,1) .3s; }
.ai-scene.is-on .ai-meter i { width: var(--w); }
.ai-meter small { display: block; margin-top: 7px; font: 500 12px/1.3 var(--font-sans); color: #1F7A4D; }
.ai-cap.is-flag { background: #FFF8F6; }
.ai-cap.is-flag p { color: var(--muted); }
.ai-cap.is-flag .ai-meter i { background: #E0614A; }
.ai-cap.is-flag .ai-meter small { color: #C0392B; }
.ai-cap-btn { align-self: flex-start; margin-top: 14px; padding: 7px 12px; border-radius: 999px; background: #F1EEE7; font: 500 12px/1 var(--font-sans); color: var(--ink); }
.ai-cap.is-pick { border-color: var(--brand); box-shadow: 0 10px 26px -12px rgba(79,127,255,.5); }
.ai-cap.is-pick .ai-cap-btn { background: var(--brand); color: #fff; }

/* spam filter */
.ai-spam-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.ai-spam ul { margin: 0; padding: 0; list-style: none; }
.ai-spam li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 4px; border-bottom: 1px solid #F0ECE4; font: 400 14px/1.35 var(--font-sans); }
.ai-spam li b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-spam li span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-spam li em { font: 600 11.5px/1 var(--font-sans); font-style: normal; padding: 5px 10px; border-radius: 999px; opacity: 0; }
.ai-spam li.is-spam em { background: #FDE7E4; color: #C0392B; }
.ai-spam li.is-real em { background: #E3F4EA; color: #1F7A4D; }
.ai-spam li.is-real { margin: 2px -10px; padding: 13px 14px; border-radius: 12px; background: #F2FAF5; border-bottom-color: transparent; }
.ai-scene.is-on .ai-spam li em { animation: ai-tag .4s ease forwards; animation-delay: calc(.6s + var(--d)); }
.ai-scene.is-on .ai-spam li.is-spam b, .ai-scene.is-on .ai-spam li.is-spam span { animation: ai-strike .4s ease forwards; animation-delay: calc(.6s + var(--d)); }
@keyframes ai-tag { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ai-strike { to { opacity: .38; text-decoration: line-through; } }

/* ---------- where we draw the line: dark band, approve on the phone */
.ai-line { padding-top: 110px; padding-bottom: 120px; }
.ai-line-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; }
.ai-line .lp-h2, .ai-line .lp-sub { text-align: left; margin-left: 0; }
.ai-line .lp-sub { color: #aab7d3; max-width: 44ch; }
.ai-line .lp-vs { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.ai-line .lp-vs span { color: #aab7d3; }
.ai-line .lp-vs b { color: #fff; text-decoration: none; }
.ai-line .lp-vs--win { background: #fff; border-color: #fff; }
.ai-line .lp-vs--win span { color: var(--brand); }
.ai-line .lp-vs--win b { color: var(--ink); }
.ai-line .ai-phone { max-width: 340px; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
.ai-quote { margin-bottom: calc(12 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(16 * var(--pt)); background: #E9E7E1; }
.ai-quote b { font-size: calc(12 * var(--pt)); color: #6b6f78; }
.ai-quote p, .ai-draft p { margin: calc(4 * var(--pt)) 0 0; font-size: calc(14.5 * var(--pt)); line-height: 1.38; }
.ai-draft { margin-bottom: calc(14 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(16 * var(--pt)); background: #fff; box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) #C9D6FF; transition: box-shadow .3s; }
.ai-draft p[contenteditable="true"] { outline: none; }
.ai-approve.is-editing .ai-draft { box-shadow: inset 0 0 0 calc(2 * var(--pt)) #4F7FFF; }
.ai-sent { min-height: calc(20 * var(--pt)); margin: calc(12 * var(--pt)) 0 0; font-size: calc(13.5 * var(--pt)); font-weight: 600; color: #1F7A4D; }
.ai-approve.is-sent .ai-draft { box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) #A6DDBE; }
.ai-approve.is-sent .ai-draft .ai-pill { background: #E3F4EA; color: #1F7A4D; }
.ai-approve.is-sent [data-send] { background: #2FA36B; }

/* ---------- how it starts */
.ai-how .lp-sub { margin-bottom: 0; }
.ai-how-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.ai-how-step > b { display: block; margin: 26px 0 8px; font: 400 26px/1.15 var(--font-sans); letter-spacing: -.02em; color: var(--ink); }
.ai-how-step > p { margin: 0; font: 400 15.5px/1.55 var(--font-sans); color: var(--muted); }
.ai-week, .ai-mini-draft, .ai-toggle-card { min-height: 200px; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(10,31,68,.05), 0 30px 50px -30px rgba(10,31,68,.35); font-family: var(--font-sans); }
.ai-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ai-week div { display: flex; flex-direction: column; gap: 7px; }
.ai-week small { margin-bottom: 4px; text-align: center; font: 500 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ai-week i { height: 26px; border-radius: 7px; background: #F1EEE7; }
.ai-week i.r { background: var(--brand); animation: ai-breathe 3.2s ease-in-out infinite; }
.ai-week div:nth-child(2) i.r { animation-delay: .4s; } .ai-week div:nth-child(3) i.r { animation-delay: .8s; } .ai-week div:nth-child(4) i.r { animation-delay: 1.2s; } .ai-week div:nth-child(5) i.r { animation-delay: 1.6s; }
@keyframes ai-breathe { 50% { opacity: .55; } }
.ai-mini-draft { display: flex; flex-direction: column; align-items: flex-start; }
.ai-mini-draft b { margin: 16px 0 6px; font: 500 18px/1.25 var(--font-sans); color: var(--ink); }
.ai-mini-draft p { margin: 0; font: 400 15px/1.5 var(--font-sans); color: var(--muted); }
.ai-mini-draft small { margin-top: auto; padding-top: 18px; font: 500 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.ai-toggle-card { display: flex; flex-direction: column; justify-content: space-between; }
.ai-toggle-card div { display: flex; justify-content: space-between; align-items: center; }
.ai-toggle-card b { font: 500 18px/1.25 var(--font-sans); color: var(--ink); }
.ai-toggle { position: relative; width: 52px; height: 32px; border-radius: 999px; background: #DAD6CE; }
.ai-toggle i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .3s; }
.ai-toggle.is-on { background: #2FA36B; }
.ai-toggle.is-on i { transform: translateX(20px); }
.ai-toggle-card p { margin: 0; font: 400 15px/1.5 var(--font-sans); color: var(--muted); }
.ai-toggle-card em { font-style: normal; color: #1F7A4D; font-weight: 500; }

/* ---------- smaller screens */
@media (max-width: 1100px) {
  .ai-caps { grid-template-columns: 1fr; }
  .ai-cap.is-flag { display: none; }
}
@media (max-width: 900px) {
  .ai .lp-hero-in { padding-bottom: 48px; }
  .ai-phone--hero { width: min(290px, 78vw); }
  .ai-show { padding-top: 80px; }
  .ai-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--side)); padding: 0 var(--side); }
  .ai-rail::-webkit-scrollbar { display: none; }
  .ai-scene { grid-template-columns: 1fr; gap: 36px; }
  .ai-line-in { grid-template-columns: 1fr; gap: 48px; }
  .ai-how-row { grid-template-columns: 1fr; gap: 44px; }
  .ai-mail, .ai-capw, .ai-spam { padding: 22px 20px; }
  .ai-table th:nth-child(1), .ai-table td:nth-child(1) { display: none; }
  .ai-spam li { grid-template-columns: minmax(0, 1fr) auto; }
  .ai-spam li span { display: none; }
  .ai-capw-head { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-note.is-in, .ai-note.is-out, .ai-live i, .ai-week i.r { animation: none; }
  .ai-scene, .ai-scene.is-on { transition: none; transform: none; }
  .ai-scene.is-on .ai-table tbody tr, .ai-table tbody tr { animation: none; opacity: 1; }
  .ai-scene.is-on .ai-push { animation: none; transform: none; }
  .ai-scene.is-on .ai-spam li em, .ai-scene.is-on .ai-spam li.is-spam b, .ai-scene.is-on .ai-spam li.is-spam span { animation: none; }
  .ai-spam li em { opacity: 1; }
  .ai-spam li.is-spam b, .ai-spam li.is-spam span { opacity: .38; text-decoration: line-through; }
  .ai-meter i { transition: none; }
}

/* booking confirmation screen */
.ai-ok { display: grid; place-items: center; width: calc(58 * var(--pt)); height: calc(58 * var(--pt)); margin: calc(14 * var(--pt)) auto calc(14 * var(--pt)); border-radius: 50%; background: #2FA36B; color: #fff; box-shadow: 0 calc(8 * var(--pt)) calc(20 * var(--pt)) rgba(47,163,107,.35); }
.ai-ok svg { width: 55%; height: 55%; }
.ai-scene.is-on .ai-ok { animation: ai-pop .7s cubic-bezier(.34,1.56,.64,1) .2s both; }
@keyframes ai-pop { from { transform: scale(.4); opacity: 0; } }
.ai-c { text-align: center; }
.ai-next { margin: calc(18 * var(--pt)) 0 calc(18 * var(--pt)); padding: 0 calc(4 * var(--pt)); list-style: none; }
.ai-next li { position: relative; display: flex; gap: calc(12 * var(--pt)); padding-bottom: calc(13 * var(--pt)); }
.ai-next li:not(:last-child)::after { content: ""; position: absolute; left: calc(6 * var(--pt)); top: calc(16 * var(--pt)); bottom: calc(-1 * var(--pt)); width: calc(1.5 * var(--pt)); background: #DDD9D0; }
.ai-next i { flex: none; width: calc(13.5 * var(--pt)); height: calc(13.5 * var(--pt)); margin-top: calc(2 * var(--pt)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) #C9C4B9; background: #F7F5F0; }
.ai-next li.is-done i { background: #2FA36B; box-shadow: none; }
.ai-next b { display: block; font-size: calc(14.5 * var(--pt)); font-weight: 600; line-height: 1.25; }
.ai-next small { display: block; margin-top: calc(1 * var(--pt)); font-size: calc(12.5 * var(--pt)); color: #777; }
@keyframes ai-push { 0% { transform: translateY(-160%); } 10%, 62% { transform: translateY(0); } 74%, 100% { transform: translateY(-160%); } }

/* approve phone: what ran without anyone today */
.ai-today-h { margin-top: calc(22 * var(--pt)); }
.ai-today { margin: 0; padding: 0; list-style: none; border-radius: calc(16 * var(--pt)); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.ai-today li { display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(11 * var(--pt)) calc(14 * var(--pt)); font-size: calc(14 * var(--pt)); }
.ai-today li + li { border-top: 1px solid #F0ECE4; }
.ai-today b { min-width: calc(26 * var(--pt)); font-size: calc(17 * var(--pt)); font-weight: 700; color: #2FA36B; font-variant-numeric: tabular-nums; }