/* DeskKit design v2 — phase 5 (shell): DeskKit Automate.
   Loaded after css/theme-v2.css (tokens --v2-*, the dark header / footer
   / widgets). Spec: docs/design-v2-spec.md, part B, phase 5.

     v2-automate      automate.html — the public "coming soon" page: the
                      homepage's dark look with a dreamy "magic" sky
                      (drifting light, star dust, flowing waves) around
                      the word אוטומציות. Nothing on it pretends to work.
     v2-automate-app  automate/web/automate.html (served as
                      automate-app.html, cloudflare/web/build.sh) — the
                      existing app in the v2 dark shell: tabs, cards,
                      switches, tables, the set-up wizard and dialogs.
                      Same markup, same ids, same behaviour; its own
                      <style> keeps the layout, this file the colours.
                      (Its "magic" cards redesign comes later.)

   automate/web/q.html and optout.html are client-facing and load neither
   style.css nor this file: their own <style> carries a self-contained v2
   look (the quote document itself stays a light page).

   Sections: 1 public page · 2 public page motion · 3 app shell · 4 app
   cards + lists · 5 switches + pills · 6 tables + forms · 7 wizard +
   dialogs · 8 motion + accessibility modes. */

/* ===================================================== 1 public page */
html:not(.hv-light) body.v2-automate main.au-pub { position: relative; isolation: isolate; overflow: hidden; }
html:not(.hv-light) body.v2-automate .au-pub-hero {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 70px); min-height: calc(100svh - 70px); box-sizing: border-box;
  padding: clamp(56px, 9vw, 120px) 16px clamp(72px, 10vw, 140px);
  background: radial-gradient(70% 60% at 50% 40%, #071019, var(--v2-void) 70%);
  border-bottom: 1px solid rgba(var(--v2-fg-rgb), .05);
}
html:not(.hv-light) body.v2-automate .au-pub-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html:not(.hv-light) body.v2-automate .au-pub-sky::after { /* a soft pool of light under the word */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(34% 26% at 50% 36%, rgba(var(--v2-teal-rgb), .14), transparent 70%);
}
html:not(.hv-light) body.v2-automate .au-pub-field { position: absolute; border-radius: 50%; will-change: transform; }
html:not(.hv-light) body.v2-automate .au-pub-f1 { width: 120%; height: 70%; left: -34%; top: -16%; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--v2-teal-rgb), .17), transparent 70%); }
html:not(.hv-light) body.v2-automate .au-pub-f2 { width: 110%; height: 80%; right: -36%; bottom: -26%; background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, .2), rgba(var(--v2-site-rgb), .06) 45%, transparent 70%); }
html:not(.hv-light) body.v2-automate .au-pub-f3 { width: 70%; height: 60%; left: 20%; top: 30%; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--v2-site-rgb), .1), transparent 70%); }
html:not(.hv-light) body.v2-automate .au-pub-dust {
  position: absolute; inset: 0; opacity: .32;
  background-image: radial-gradient(rgba(var(--v2-fg-rgb), .75) 1px, transparent 1.4px), radial-gradient(rgba(var(--v2-teal-hi-rgb), .65) 1px, transparent 1.4px);
  background-size: 140px 140px, 220px 220px; background-position: 0 0, 70px 90px;
  -webkit-mask-image: radial-gradient(64% 64% at 50% 45%, #000, transparent); mask-image: radial-gradient(64% 64% at 50% 45%, #000, transparent);
}
html:not(.hv-light) body.v2-automate .au-pub-waves {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 38%; opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
html:not(.hv-light) body.v2-automate .au-pub-wave-base { fill: none; stroke: rgba(148, 210, 255, .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
html:not(.hv-light) body.v2-automate .au-pub-wave { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 420 1240; }
html:not(.hv-light) body.v2-automate .au-pub-wave.w1 { stroke: url(#auWaveA); }
html:not(.hv-light) body.v2-automate .au-pub-wave.w2 { stroke: url(#auWaveB); opacity: .8; }
html:not(.hv-light) body.v2-automate .au-pub-wave.w3 { stroke: url(#auWaveA); opacity: .55; }

html:not(.hv-light) body.v2-automate .au-pub-inner { position: relative; max-width: 820px; margin: 0 auto; padding: 0; text-align: center; color: var(--v2-text); }
html:not(.hv-light) body.v2-automate .au-pub-eyebrow { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 0; }
html:not(.hv-light) body.v2-automate .au-pub-brand { font: 600 14px/1.2 'Space Grotesk', 'Heebo', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-teal-hi); }
html:not(.hv-light) body.v2-automate .dk-pill {
  color: var(--v2-hi); background: linear-gradient(180deg, rgba(var(--v2-cv-rgb), .22), rgba(var(--v2-teal-rgb), .12));
  box-shadow: inset 0 0 0 1px rgba(196, 160, 255, .45), 0 0 22px -6px rgba(var(--v2-cv-rgb), calc(.7 * var(--v2-glow-k)));
}
html:not(.hv-light) body.v2-automate .au-pub-word {
  margin: 18px 0 0; font-weight: 800; line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; overflow-wrap: anywhere;
  /* the shared display size (css/theme-v2.css): 32px on phones, ~52px wide */
  font-size: var(--v2-fs-display);
  color: var(--v2-hi); /* fallback when background-clip text is unavailable */
  background: linear-gradient(100deg, #ffffff 0%, #c9fff5 18%, #5eead4 32%, #ffffff 46%, #c4a0ff 62%, #8ab6ff 76%, #ffffff 92%);
  background-size: 260% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 32px rgba(var(--v2-teal-rgb), calc(.28 * var(--v2-glow-k)))) drop-shadow(0 0 70px rgba(var(--v2-cv-rgb), calc(.18 * var(--v2-glow-k))));
}
html[lang="en"]:not(.hv-light) body.v2-automate .au-pub-word { font-family: 'Space Grotesk', 'Heebo', sans-serif; letter-spacing: -.045em; }
html:not(.hv-light) body.v2-automate .au-pub-lead { margin: 20px auto 0; max-width: 36em; color: var(--v2-dim); font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.75; }

html:not(.hv-light) body.v2-automate .dk-automate-example {
  position: relative; max-width: 620px; margin: 30px auto 0; padding: 18px 22px; box-sizing: border-box; text-align: start;
  border: 0; border-radius: var(--v2-r); color: var(--v2-text); font-size: 15.5px; line-height: 1.7;
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .05), rgba(var(--v2-lift-rgb), .015)), rgba(var(--v2-card-rgb), .7);
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .09), 0 30px 70px -40px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))), 0 0 60px -36px rgba(var(--v2-teal-rgb), calc(.7 * var(--v2-glow-k)));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html:not(.hv-light) body.v2-automate .dk-automate-example b { color: var(--v2-hi); font-weight: 600; }
html:not(.hv-light) body.v2-automate .au-pub-ex-lbl { color: var(--v2-teal-hi); font-weight: 700; margin-inline-end: 4px; }

/* "How it will work": five stages on a line of light (illustration only). */
html:not(.hv-light) body.v2-automate .au-pub-flow-lbl { margin: 44px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--v2-muted); }
html:not(.hv-light) body.v2-automate .dk-automate-flow {
  position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  max-width: 660px; margin: 16px auto 0; padding: 0; color: var(--v2-text); font-size: 14px; font-weight: 600;
}
html:not(.hv-light) body.v2-automate .dk-automate-flow::before { /* the line */
  content: ""; position: absolute; top: 9px; inset-inline: 10%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--v2-teal-rgb), .25), rgba(var(--v2-cv-rgb), .35), rgba(var(--v2-site-rgb), .25));
}
html:not(.hv-light) body.v2-automate .dk-automate-flow::after { /* a point of light travelling along it */
  content: ""; position: absolute; top: 6px; inset-inline-start: 10%; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 3px rgba(var(--v2-teal-hi-rgb), calc(.9 * var(--v2-glow-k))), 0 0 26px 8px rgba(var(--v2-cv-rgb), calc(.45 * var(--v2-glow-k)));
  opacity: 0;
}
html:not(.hv-light) body.v2-automate .dk-automate-flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 0; min-width: 0; }
html:not(.hv-light) body.v2-automate .dk-automate-flow li::before { /* the stage dot */
  content: ""; position: relative; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
  background: #071019; border: 2px solid var(--v2-teal-hi); box-shadow: 0 0 14px -2px var(--v2-teal);
}
html:not(.hv-light) body.v2-automate .dk-automate-flow li:nth-child(2)::before { border-color: #7fd9ff; box-shadow: 0 0 14px -2px var(--v2-deck); }
html:not(.hv-light) body.v2-automate .dk-automate-flow li:nth-child(3)::before { border-color: #8ab6ff; box-shadow: 0 0 14px -2px var(--v2-site); }
html:not(.hv-light) body.v2-automate .dk-automate-flow li:nth-child(4)::before { border-color: #c4a0ff; box-shadow: 0 0 14px -2px var(--v2-cv); }
html:not(.hv-light) body.v2-automate .dk-automate-flow li:nth-child(5)::before { border-color: #fff; background: radial-gradient(circle, #fff 30%, var(--v2-cv)); box-shadow: 0 0 18px 0 rgba(196, 160, 255, .9); }
html:not(.hv-light) body.v2-automate .dk-automate-flow li span { overflow-wrap: anywhere; }

html:not(.hv-light) body.v2-automate .au-pub-note { margin: 44px auto 0; max-width: 34em; font-size: 14.5px; line-height: 1.7; color: var(--v2-muted); }
html:not(.hv-light) body.v2-automate .au-pub-note a { color: var(--v2-teal-hi); font-weight: 700; text-underline-offset: 3px; }
html:not(.hv-light) body.v2-automate .au-pub-note a:hover { color: var(--v2-hi); }
html:not(.hv-light) body.v2-automate .au-pub-note a:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 560px) {
  html:not(.hv-light) body.v2-automate .dk-automate-flow { grid-template-columns: 1fr; gap: 14px; width: max-content; max-width: 100%; justify-items: start; }
  html:not(.hv-light) body.v2-automate .dk-automate-flow::before { top: 10px; bottom: 10px; inset-inline: 9px auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(var(--v2-teal-rgb), .3), rgba(var(--v2-cv-rgb), .4)); }
  html:not(.hv-light) body.v2-automate .dk-automate-flow::after { display: none; }
  html:not(.hv-light) body.v2-automate .dk-automate-flow li { flex-direction: row; }
  html:not(.hv-light) body.v2-automate .au-pub-flow-lbl + .dk-automate-flow { margin-top: 18px; }
}

/* ============================================ 2 public page motion
   Slow, subtle and cheap (transforms + background-position only). Off
   with reduced motion and with "stop animations" (html.dka-still, which
   also ends every animation at once). */
@keyframes auDrift { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(6%, 4%, 0) scale(1.12); } }
@keyframes auDust { to { background-position: 140px -280px, -150px -350px; } }
@keyframes auFlow { from { stroke-dashoffset: 1660; } to { stroke-dashoffset: 0; } }
@keyframes auShimmer { to { background-position: 260% 50%; } }
@keyframes auTravel { 0% { inset-inline-start: 10%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { inset-inline-start: 89%; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.hv-light):not(.dka-still) body.v2-automate .au-pub-field { animation: auDrift 22s ease-in-out infinite alternate; }
  html:not(.hv-light):not(.dka-still) body.v2-automate .au-pub-f2 { animation-duration: 28s; animation-direction: alternate-reverse; }
  html:not(.hv-light):not(.dka-still) body.v2-automate .au-pub-f3 { animation-duration: 34s; }
  html:not(.hv-light):not(.dka-still) body.v2-automate .au-pub-dust { animation: auDust 80s linear infinite; }
  html:not(.hv-light):not(.dka-still) body.v2-automate .au-pub-wave { animation: auFlow 9s linear infinite; }
  html:not(.hv-light):not(.dka-still) body.v2-automate .au-pub-wave.w2 { animation-duration: 12s; animation-delay: -4s; }
  html:not(.hv-light):not(.dka-still) body.v2-automate .au-pub-wave.w3 { animation-duration: 15s; animation-delay: -9s; }
  html:not(.hv-light):not(.dka-still) body.v2-automate .au-pub-word { animation: auShimmer 14s linear infinite; }
  html:not(.hv-light):not(.dka-still) body.v2-automate .dk-automate-flow::after { animation: auTravel 5.5s var(--v2-ease-io) infinite; }
}

/* ======================================================= 3 app shell */
html:not(.hv-light) body.theme-v2.v2-automate-app { --au-field: var(--v2-panel-2); }
html:not(.hv-light) body.v2-automate-app main.au-wrap { position: relative; isolation: isolate; }
html:not(.hv-light) body.v2-automate-app main.au-wrap::before { /* soft light behind the title */
  content: ""; position: absolute; inset: -40px 0 auto; height: 420px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 70% at 70% 0%, rgba(var(--v2-teal-rgb), .12), transparent 70%),
    radial-gradient(24% 60% at 40% 0%, rgba(var(--v2-cv-rgb), .07), transparent 72%);
}
html:not(.hv-light) body.v2-automate-app .au-head h1 { color: var(--v2-hi); letter-spacing: -.015em; }
html:not(.hv-light) body.v2-automate-app :is(.au-head p, .au-usage) { color: var(--v2-dim); }
html:not(.hv-light) body.v2-automate-app .au-usage b { color: var(--v2-hi); font-family: 'Space Grotesk', 'Heebo', sans-serif; }
html:not(.hv-light) body.v2-automate-app .au-gate { color: var(--v2-dim); }
html:not(.hv-light) body.v2-automate-app .au-gate h1 { color: var(--v2-hi); }
html:not(.hv-light) body.v2-automate-app .au-section-title { color: var(--v2-hi); }

/* Tabs: an underline strip in the light; a pill bar here. */
html:not(.hv-light) body.v2-automate-app .au-tabs {
  gap: 4px; padding: 4px; border: 0; border-radius: 999px; width: fit-content; max-width: 100%; box-sizing: border-box;
  background: rgba(var(--v2-fg-rgb), .03); box-shadow: inset 0 0 0 1px var(--v2-line);
}
html:not(.hv-light) body.v2-automate-app .au-tab {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; color: var(--v2-dim);
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.v2-automate-app .au-tab:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .05); }
html:not(.hv-light) body.v2-automate-app .au-tab.active {
  color: var(--v2-hi); border: 0; background: rgba(var(--v2-teal-rgb), .16);
  box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .55), 0 0 18px -8px var(--v2-teal);
}
html:not(.hv-light) body.v2-automate-app .au-tab:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
html:not(.hv-light) body.v2-automate-app .au-tab .au-count { background: #e5484d; box-shadow: 0 0 10px -2px #e5484d; }

/* ================================================ 4 app cards + lists */
html:not(.hv-light) body.v2-automate-app .au-card {
  border: 0; border-radius: 18px; color: var(--v2-text);
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .04), rgba(var(--v2-lift-rgb), .012)), var(--v2-card);
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08);
}
html:not(.hv-light) body.v2-automate-app .au-tpl { transition: box-shadow var(--v2-med) var(--v2-ease), transform var(--v2-med) var(--v2-ease); }
html:not(.hv-light) body.v2-automate-app .au-tpl:hover { box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .4), 0 24px 50px -32px rgba(var(--v2-teal-rgb), calc(.6 * var(--v2-glow-k))); }
html:not(.hv-light) body.v2-automate-app .au-tpl h3 { color: var(--v2-hi); }
html:not(.hv-light) body.v2-automate-app :is(.au-tpl p, .au-tpl .au-how) { color: var(--v2-dim); }
html:not(.hv-light) body.v2-automate-app .au-tpl summary { color: var(--v2-teal-hi) !important; }
html:not(.hv-light) body.v2-automate-app .au-tpl summary:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; border-radius: 4px; }
html:not(.hv-light) body.v2-automate-app .au-item-title { color: var(--v2-hi); }
html:not(.hv-light) body.v2-automate-app .au-item-sub { color: var(--v2-muted); }
html:not(.hv-light) body.v2-automate-app .au-empty { color: var(--v2-dim); }
html:not(.hv-light) body.v2-automate-app .au-card a { color: var(--v2-teal-hi); }
html:not(.hv-light) body.v2-automate-app .au-timeline li { color: var(--v2-dim); }
html:not(.hv-light) body.v2-automate-app .au-timeline .t { color: var(--v2-muted); }
/* The page writes a few warning colours inline (overdue, errors); lift
   them to the dark palette's readable red. */
html:not(.hv-light) body.v2-automate-app [style*="#B42318"] { color: var(--v2-danger) !important; }
html:not(.hv-light) body.v2-automate-app [style*="color:var(--ink-dark)"] { color: var(--v2-hi) !important; }
/* The "leads saved in this browser" import notice. */
html:not(.hv-light) body.v2-automate-app .au-card[style*="FFFBF2"] { background: rgba(var(--v2-warn-rgb), .07) !important; box-shadow: inset 0 0 0 1px rgba(var(--v2-warn-rgb), .35); }
/* The "what will happen" box in an automation's settings. */
html:not(.hv-light) body.v2-automate-app .au-card[style*="F6F8F7"] { background: rgba(var(--v2-fg-rgb), .035) !important; }

html:not(.hv-light) body.v2-automate-app .au-banner {
  position: relative; overflow: hidden; color: var(--v2-hi); border-radius: 22px;
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(var(--v2-cv-rgb), .3), transparent 60%),
    radial-gradient(70% 120% at 0% 100%, rgba(var(--v2-teal-rgb), .3), transparent 60%),
    #0b1220;
  box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .35), 0 0 60px -30px var(--v2-teal);
}
html:not(.hv-light) body.v2-automate-app .au-banner p { color: var(--v2-dim); opacity: 1; }
html:not(.hv-light) body.v2-automate-app .au-banner .au-btn { color: var(--v2-on-teal); background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal)); border: 0; }

html:not(.hv-light) body.v2-automate-app .au-alert { color: var(--v2-text); }
html:not(.hv-light) body.v2-automate-app .au-alert.warning { background: rgba(var(--v2-warn-rgb), .08); border-color: rgba(var(--v2-warn-rgb), .35); }
html:not(.hv-light) body.v2-automate-app .au-alert.error { background: var(--v2-danger-bg); border-color: rgba(var(--v2-danger-rgb), .4); }
html:not(.hv-light) body.v2-automate-app .au-alert.info { background: rgba(var(--v2-teal-rgb), .08); border-color: rgba(var(--v2-teal-hi-rgb), .35); }

/* Buttons */
html:not(.hv-light) body.v2-automate-app .au-btn {
  min-height: 38px; border-radius: 999px; padding: 0 15px; color: var(--v2-text);
  background: rgba(var(--v2-fg-rgb), .04); border: 1px solid var(--v2-line-2);
  transition: background-color var(--v2-fast) ease, border-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease, color var(--v2-fast) ease;
}
html:not(.hv-light) body.v2-automate-app .au-btn:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .08); border-color: rgba(var(--v2-fg-rgb), .32); }
html:not(.hv-light) body.v2-automate-app .au-btn.primary {
  color: var(--v2-on-teal); border-color: transparent; background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px -14px rgba(var(--v2-teal-rgb), calc(.8 * var(--v2-glow-k)));
}
html:not(.hv-light) body.v2-automate-app .au-btn.primary:hover { background: linear-gradient(180deg, var(--v2-teal-top-hover), var(--v2-teal-bottom-hover)); color: var(--v2-on-teal); }
html:not(.hv-light) body.v2-automate-app .au-btn.danger { color: var(--v2-danger); border-color: rgba(var(--v2-danger-rgb), .4); background: var(--v2-danger-bg); }
html:not(.hv-light) body.v2-automate-app .au-btn.danger:hover { background: rgba(var(--v2-danger-2-rgb), .18); border-color: var(--v2-danger); }
html:not(.hv-light) body.v2-automate-app .au-btn:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
html:not(.hv-light) body.v2-automate-app .au-btn[disabled] { opacity: .45; }
html:not(.hv-light) body.v2-automate-app .au-btn[hidden] { display: none; } /* e.g. the staging-only "simulate an enquiry" */

/* ============================================ 5 switches + pills */
html:not(.hv-light) body.v2-automate-app .au-sw span { background: rgba(var(--v2-fg-rgb), .1); box-shadow: inset 0 0 0 1px var(--v2-line-2); transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease; }
html:not(.hv-light) body.v2-automate-app .au-sw span::after { background: var(--v2-knob); box-shadow: 0 1px 3px rgba(var(--v2-shade-rgb), calc(.5 * var(--v2-shade-k))); }
html:not(.hv-light) body.v2-automate-app .au-sw input:checked + span { background: color-mix(in srgb, var(--v2-teal) 55%, var(--v2-panel)); box-shadow: inset 0 0 0 1px var(--v2-teal), 0 0 16px -4px var(--v2-teal); }
html:not(.hv-light) body.v2-automate-app .au-sw input:checked + span::after { background: #fff; }
html:not(.hv-light) body.v2-automate-app .au-sw input:focus-visible + span { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }

html:not(.hv-light) body.v2-automate-app .au-pill { box-shadow: inset 0 0 0 1px currentColor; }
html:not(.hv-light) body.v2-automate-app .au-pill.on { color: var(--v2-ok); background: rgba(var(--v2-ok-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--v2-ok-rgb), .35); }
html:not(.hv-light) body.v2-automate-app .au-pill.off { color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .06); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
html:not(.hv-light) body.v2-automate-app .au-pill.warn { color: var(--v2-warn); background: rgba(var(--v2-warn-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--v2-warn-rgb), .35); }
html:not(.hv-light) body.v2-automate-app .au-pill.bad { color: var(--v2-danger); background: var(--v2-danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--v2-danger-rgb), .35); }
html:not(.hv-light) body.v2-automate-app .au-pill.info { color: var(--v2-teal-hi); background: rgba(var(--v2-teal-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .35); }

/* ============================================ 6 tables + forms */
html:not(.hv-light) body.v2-automate-app .au-table { color: var(--v2-text); }
html:not(.hv-light) body.v2-automate-app .au-table :is(th, td) { border-bottom-color: var(--v2-line); }
html:not(.hv-light) body.v2-automate-app .au-table th { color: var(--v2-muted); }
html:not(.hv-light) body.v2-automate-app .au-table tbody tr:hover { background: rgba(var(--v2-fg-rgb), .025); }
html:not(.hv-light) body.v2-automate-app .au-table a { color: var(--v2-teal-hi); }
html:not(.hv-light) body.v2-automate-app .au-field label { color: var(--v2-text); }
html:not(.hv-light) body.v2-automate-app .au-field .au-help { color: var(--v2-muted); }
html:not(.hv-light) body.v2-automate-app :is(.au-input, .au-field select, .au-field textarea) {
  color: var(--v2-text); background-color: var(--au-field); border-color: var(--v2-line-2); border-radius: 12px;
  caret-color: var(--v2-teal-hi); color-scheme: dark;
  transition: border-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.v2-automate-app :is(.au-input, .au-field select, .au-field textarea)::placeholder { color: var(--v2-faint); }
html:not(.hv-light) body.v2-automate-app :is(.au-input, .au-field select, .au-field textarea):hover { border-color: var(--v2-line-3); }
html:not(.hv-light) body.v2-automate-app :is(.au-input, .au-field select, .au-field textarea):focus { outline: none; border-color: rgba(var(--v2-teal-rgb), .75); box-shadow: 0 0 0 4px rgba(var(--v2-teal-rgb), .16); }
html:not(.hv-light) body.v2-automate-app :is(select.au-input, .au-field select) option { background: var(--v2-panel-2); color: var(--v2-text); }
html:not(.hv-light) body.v2-automate-app :is(.au-check, .au-field) input[type="checkbox"] { accent-color: var(--v2-teal); width: 17px; height: 17px; }
html:not(.hv-light) body.v2-automate-app .au-check { color: var(--v2-text); }

/* ============================================ 7 wizard + dialogs */
html:not(.hv-light) body.v2-automate-app .au-modal { background: rgba(var(--v2-scrim-rgb), calc(.72 * var(--v2-scrim-k))); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(.hv-light) body.v2-automate-app .au-dialog {
  color: var(--v2-text); border-radius: 24px;
  background: radial-gradient(120% 70% at 100% 0%, rgba(var(--v2-teal-rgb), .08), transparent 55%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel));
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 100px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 80px -40px rgba(var(--v2-teal-rgb), calc(.45 * var(--v2-glow-k)));
}
html[dir="ltr"]:not(.hv-light) body.v2-automate-app .au-dialog { background: radial-gradient(120% 70% at 0% 0%, rgba(var(--v2-teal-rgb), .08), transparent 55%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel)); }
html:not(.hv-light) body.v2-automate-app .au-dialog h2 { color: var(--v2-hi); }
html:not(.hv-light) body.v2-automate-app .au-dialog p { color: var(--v2-dim); }
html:not(.hv-light) body.v2-automate-app .au-dialog iframe { border-color: var(--v2-line-2) !important; background: #fff; } /* an email preview: a light page */
/* Wizard step 1: business types */
html:not(.hv-light) body.v2-automate-app .au-pack {
  color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .03); border: 0; border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--v2-line-2);
  transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.v2-automate-app .au-pack:hover { background: rgba(var(--v2-teal-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .45); }
html:not(.hv-light) body.v2-automate-app .au-pack.selected { background: rgba(var(--v2-teal-rgb), .12); box-shadow: inset 0 0 0 1.5px var(--v2-teal), 0 0 24px -10px var(--v2-teal); }
html:not(.hv-light) body.v2-automate-app .au-pack:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
html:not(.hv-light) body.v2-automate-app .au-pack b { color: var(--v2-hi); }

html:not(.hv-light) body.v2-automate-app .au-toast {
  color: var(--v2-text); background: rgba(var(--v2-panel-2-rgb), .96); border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 20px 50px -16px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
  border-inline-start: 3px solid var(--v2-teal);
}

/* ============================== 8 motion + accessibility modes */
@media (prefers-reduced-motion: reduce) {
  body.v2-automate-app :is(.au-tab, .au-btn, .au-tpl, .au-pack, .au-sw span, .au-sw span::after) { transition-duration: .01ms !important; }
}
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-pub-sky { display: none; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .dk-automate-flow::after { display: none; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .dk-automate-flow li::before { box-shadow: none; border-color: currentColor; background: transparent; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-pub-word { filter: none; -webkit-text-fill-color: currentColor; animation: none; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-automate-app main.au-wrap::before { display: none; }
html.dka-contrast-light:has(body.v2-automate) { color-scheme: light; }

/* ============================================ 9 light theme ("מצב בהיר")
   Tokens: css/theme-v2.css (html.dk-light). The public hero becomes a
   daylight sky with pastel fields; the word keeps its moving gradient,
   in deep teal / violet / blue ink. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-pub-hero { background: radial-gradient(70% 60% at 50% 40%, #ffffff, #eef2f8 70%); border-bottom-color: rgba(11, 16, 32, .06); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-pub-sky::after { background: radial-gradient(34% 26% at 50% 36%, rgba(13, 148, 136, .1), transparent 70%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-pub-f1 { background: radial-gradient(50% 50% at 50% 50%, rgba(45, 212, 191, .2), transparent 70%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-pub-f2 { background: radial-gradient(50% 50% at 50% 50%, rgba(167, 139, 250, .22), rgba(96, 165, 250, .07) 45%, transparent 70%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-pub-f3 { background: radial-gradient(50% 50% at 50% 50%, rgba(96, 165, 250, .1), transparent 70%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-pub-dust { opacity: .3; background-image: radial-gradient(rgba(13, 148, 136, .5) 1px, transparent 1.4px), radial-gradient(rgba(124, 58, 237, .35) 1px, transparent 1.4px); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-pub-wave-base { stroke: rgba(26, 102, 216, .1); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-pub-word {
  background-image: linear-gradient(100deg, #0b1020 0%, #0f5f59 18%, #0f766e 32%, #0b1020 46%, #6d28d9 62%, #1a56c4 76%, #0b1020 92%);
  filter: drop-shadow(0 10px 30px rgba(13, 148, 136, .14));
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .dk-pill { color: #4c1d95; background: linear-gradient(180deg, rgba(124, 58, 237, .12), rgba(13, 148, 136, .08)); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .dk-automate-example { background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-2); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .dk-automate-flow li::before { background: #fff; box-shadow: 0 2px 6px -1px rgba(15, 23, 42, .2); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .dk-automate-flow li:nth-child(2)::before { border-color: var(--v2-deck); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .dk-automate-flow li:nth-child(3)::before { border-color: var(--v2-site); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .dk-automate-flow li:nth-child(4)::before { border-color: var(--v2-cv); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .dk-automate-flow li:nth-child(5)::before { border-color: var(--v2-cv); background: radial-gradient(circle, #fff 30%, var(--v2-cv)); box-shadow: 0 4px 12px -2px rgba(124, 58, 237, .55); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .dk-automate-flow::after { background: var(--v2-teal); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate-app .au-banner {
  background: radial-gradient(80% 140% at 100% 0%, rgba(124, 58, 237, .12), transparent 60%), radial-gradient(70% 120% at 0% 100%, rgba(13, 148, 136, .12), transparent 60%), #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .25), var(--v2-lift-2);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate-app :is(.au-card, .au-dialog) { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-1); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate-app .au-tab .au-count { box-shadow: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate-app .au-sw span::after { box-shadow: 0 1px 3px rgba(15, 23, 42, .25); }

/* Safe areas: the header grows by the status-bar strip in the installed
   app (--dk-safe-top, css/style.css), so the first screen subtracts it. */
html:not(.hv-light) body.v2-automate .au-pub-hero { min-height: calc(100vh - 70px - var(--dk-safe-top)); min-height: calc(100svh - 70px - var(--dk-safe-top)); }

/* ===================================== 10 public page: landing sections
   automate.html below the hero: CTAs, the three steps, the five sales
   automations, the CRM, pricing, FAQ, the guide link and the last CTA.
   Every colour is a --v2-* token, so the light theme (html.dk-light)
   re-points it; section 9 above carries the few light-only touches. */
html:not(.hv-light) body.v2-automate .au-pub-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 30px auto 0; }
html:not(.hv-light) body.v2-automate .au-pub-ctas .v2-btn { white-space: normal; text-align: center; }
html:not(.hv-light) body.v2-automate .au-pub-hero { scroll-margin-top: 80px; }

html:not(.hv-light) body.v2-automate .au-sec { position: relative; padding: clamp(56px, 7vw, 96px) 16px; color: var(--v2-text); scroll-margin-top: 70px; }
html:not(.hv-light) body.v2-automate .au-sec + .au-sec { border-top: 1px solid var(--v2-line); }
html:not(.hv-light) body.v2-automate .au-sec-inner { max-width: 1080px; margin: 0 auto; }
html:not(.hv-light) body.v2-automate .au-narrow { max-width: 760px; }
html:not(.hv-light) body.v2-automate .au-h2 { margin: 0; text-align: center; color: var(--v2-hi); font-size: var(--v2-fs-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
html:not(.hv-light) body.v2-automate .au-sub { margin: 12px auto 0; max-width: 36em; text-align: center; color: var(--v2-dim); font-size: clamp(1rem, .96rem + .2vw, 1.1rem); line-height: 1.7; }
html:not(.hv-light) body.v2-automate .au-sec h3 { margin: 0; color: var(--v2-hi); font-size: var(--v2-fs-h4); font-weight: 700; line-height: 1.35; }
html:not(.hv-light) body.v2-automate .au-sec :is(.au-step, .au-auto, .au-crm-item, .au-plan) p { margin: 8px 0 0; color: var(--v2-dim); font-size: 15.5px; line-height: 1.7; }

/* One card surface for steps, automations, CRM features and plans. */
html:not(.hv-light) body.v2-automate :is(.au-step, .au-auto, .au-crm-item, .au-plan, .au-faq-item, .au-guide) {
  box-sizing: border-box; min-width: 0; border-radius: var(--v2-r);
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .04), rgba(var(--v2-lift-rgb), .012)), var(--v2-card);
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08);
}
html:not(.hv-light) body.v2-automate :is(.au-steps, .au-autos, .au-crm) { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; }

/* 1 · 2 · 3 */
html:not(.hv-light) body.v2-automate .au-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html:not(.hv-light) body.v2-automate .au-step { padding: 26px 24px; }
html:not(.hv-light) body.v2-automate .au-step-n {
  display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 50%;
  font: 700 17px/1 'Space Grotesk', 'Heebo', sans-serif; color: var(--v2-teal-hi);
  background: rgba(var(--v2-teal-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .45), 0 0 18px -6px rgba(var(--v2-teal-rgb), calc(.8 * var(--v2-glow-k)));
}

/* The five sales automations */
html:not(.hv-light) body.v2-automate .au-autos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
html:not(.hv-light) body.v2-automate .au-auto { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; }
html:not(.hv-light) body.v2-automate .au-auto-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 21px; line-height: 1; background: rgba(var(--v2-fg-rgb), .05); box-shadow: inset 0 0 0 1px var(--v2-line); }

/* CRM */
html:not(.hv-light) body.v2-automate .au-crm { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html:not(.hv-light) body.v2-automate .au-crm > .au-crm-item { grid-column: span 2; }
html:not(.hv-light) body.v2-automate .au-crm > .au-crm-item:nth-child(-n+2) { grid-column: span 3; }
html:not(.hv-light) body.v2-automate .au-crm-item { padding: 22px; border-top: 2px solid rgba(var(--v2-teal-hi-rgb), .55); }

/* Pricing */
html:not(.hv-light) body.v2-automate .au-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; align-items: stretch; }
html:not(.hv-light) body.v2-automate .au-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; }
html:not(.hv-light) body.v2-automate .au-plan-hot {
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--v2-teal-rgb), .12), transparent 65%), linear-gradient(180deg, rgba(var(--v2-lift-rgb), .05), rgba(var(--v2-lift-rgb), .015)), var(--v2-card);
  box-shadow: inset 0 0 0 1.5px rgba(var(--v2-teal-hi-rgb), .7), 0 0 50px -24px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k)));
}
html:not(.hv-light) body.v2-automate .au-plan-tag {
  position: absolute; top: 0; inset-inline-start: 50%; transform: translate(50%, -50%); margin: 0 !important; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 13px !important; font-weight: 700; color: var(--v2-on-teal) !important; background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal));
}
html[dir="ltr"]:not(.hv-light) body.v2-automate .au-plan-tag { transform: translate(-50%, -50%); }
html:not(.hv-light) body.v2-automate .au-plan h3 { font-size: var(--v2-fs-h3); }
html:not(.hv-light) body.v2-automate .au-plan .au-plan-price { margin: 10px 0 0; color: var(--v2-dim); font-size: 15px; }
html:not(.hv-light) body.v2-automate .au-plan-price b { color: var(--v2-hi); font: 700 clamp(2rem, 1.7rem + 1vw, 2.6rem)/1.1 'Space Grotesk', 'Heebo', sans-serif; letter-spacing: -.02em; }
html:not(.hv-light) body.v2-automate .au-plan-list { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
html:not(.hv-light) body.v2-automate .au-plan-list li { position: relative; padding-inline-start: 26px; color: var(--v2-text); font-size: 15px; line-height: 1.55; }
html:not(.hv-light) body.v2-automate .au-plan-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; color: var(--v2-teal-hi); font-weight: 700; }
html:not(.hv-light) body.v2-automate .au-plan-list li.au-plan-no { color: var(--v2-muted); }
html:not(.hv-light) body.v2-automate .au-plan-list li.au-plan-no::before { content: "–"; color: var(--v2-muted); }
html:not(.hv-light) body.v2-automate .au-plan .v2-btn { white-space: normal; }
html:not(.hv-light) body.v2-automate .au-plans-note { margin: 22px auto 0; text-align: center; color: var(--v2-muted); font-size: 14.5px; line-height: 1.7; }

/* FAQ */
html:not(.hv-light) body.v2-automate .au-faq { display: grid; gap: 12px; margin-top: 32px; }
html:not(.hv-light) body.v2-automate .au-faq-item { padding: 0 22px; }
html:not(.hv-light) body.v2-automate .au-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 16px 0; cursor: pointer; list-style: none;
  color: var(--v2-hi); font-size: clamp(1rem, .96rem + .2vw, 1.08rem); font-weight: 600; line-height: 1.45; border-radius: 8px;
}
html:not(.hv-light) body.v2-automate .au-faq-item summary::-webkit-details-marker { display: none; }
html:not(.hv-light) body.v2-automate .au-faq-item summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--v2-dim); box-shadow: inset 0 0 0 1px var(--v2-line-2); font-size: 18px; line-height: 1; transition: transform var(--v2-fast) ease; }
html:not(.hv-light) body.v2-automate .au-faq-item[open] summary::after { transform: rotate(45deg); color: var(--v2-teal-hi); }
html:not(.hv-light) body.v2-automate .au-faq-item summary:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 4px; }
html:not(.hv-light) body.v2-automate .au-faq-item p { margin: 0 0 18px; color: var(--v2-dim); font-size: 15.5px; line-height: 1.75; }

/* The guide link */
html:not(.hv-light) body.v2-automate .au-guide { display: grid; gap: 6px; margin-top: 28px; padding: 20px 22px; text-decoration: none; color: var(--v2-text); transition: box-shadow var(--v2-fast) ease; }
html:not(.hv-light) body.v2-automate .au-guide:hover { box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .5); }
html:not(.hv-light) body.v2-automate .au-guides-more { margin: 14px 0 0; font-size: 14.5px; line-height: 1.9; color: var(--v2-text-2); }
html:not(.hv-light) body.v2-automate .au-guides-more a { color: var(--v2-teal-hi); text-underline-offset: 3px; }
html:not(.hv-light) body.v2-automate .au-guide:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
html:not(.hv-light) body.v2-automate .au-guide-k { color: var(--v2-muted); font-size: 13px; font-weight: 600; }
html:not(.hv-light) body.v2-automate .au-guide-t { color: var(--v2-hi); font-size: var(--v2-fs-h4); font-weight: 700; line-height: 1.4; }
html:not(.hv-light) body.v2-automate .au-guide-cta { color: var(--v2-teal-hi); font-weight: 700; font-size: 15px; }

/* The last call to action */
html:not(.hv-light) body.v2-automate .au-final { background: radial-gradient(60% 80% at 50% 100%, rgba(var(--v2-teal-rgb), .1), transparent 70%); }

@media (max-width: 900px) {
  html:not(.hv-light) body.v2-automate .au-crm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:not(.hv-light) body.v2-automate .au-crm > .au-crm-item, html:not(.hv-light) body.v2-automate .au-crm > .au-crm-item:nth-child(-n+2) { grid-column: auto; }
  html:not(.hv-light) body.v2-automate .au-crm > .au-crm-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html:not(.hv-light) body.v2-automate :is(.au-steps, .au-plans) { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  html:not(.hv-light) body.v2-automate .au-plans { gap: 26px; }
}
@media (max-width: 560px) {
  html:not(.hv-light) body.v2-automate .au-crm { grid-template-columns: 1fr; }
  html:not(.hv-light) body.v2-automate .au-crm > .au-crm-item:last-child:nth-child(odd) { grid-column: auto; }
  html:not(.hv-light) body.v2-automate .au-pub-ctas { flex-direction: column; align-items: stretch; max-width: 340px; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.hv-light):not(.dka-still) { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  body.v2-automate :is(.au-faq-item summary::after, .au-guide) { transition: none; }
}

/* Light theme touches: soft elevation in place of the inner glow. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate :is(.au-step, .au-auto, .au-crm-item, .au-plan, .au-faq-item, .au-guide) { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-1); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-plan-hot { box-shadow: inset 0 0 0 1.5px var(--v2-teal), var(--v2-lift-2); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-step-n { box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .4); }

/* High contrast: plain outlined boxes, no washes. */
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-automate :is(.au-step, .au-auto, .au-crm-item, .au-plan, .au-faq-item, .au-guide, .au-final) { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-automate .au-final { box-shadow: none; }