/* ==========================================================================
   AI AUTOMATION LANDING PAGE  (page-scoped: everything under .ai-lp)
   Brand values reused from style.css tokens. Zero new colors:
   --ink #161514, --panel #F8F6F2, #fff (already used for cards on home),
   --brand #E8521F, --brand-soft #FF6B3D, --bg #0E0E11, --line-light, etc.
   ========================================================================== */

/* ========================================================================== */
/* READABILITY STANDARD v1                                                      */
/* Page-scoped for now; lift site-wide once approved. The current site sets     */
/* body copy at ~15-17px in --muted-2 (light gray) which reads as hard. This    */
/* block fixes that: large, near-black body; capped line length; hierarchy by   */
/* size and weight, not color. NOTE: keep these as separate single-line         */
/* comments; a nested CSS comment here silently drops the .ai-lp rule.          */
/* ========================================================================== */
.ai-lp{
  background:var(--panel);
  color:var(--ink);
  font-family:var(--body);
}
/* 1. Body copy 18px min (target 19px), line-height 1.65-1.7 */
.ai-lp .ai-body,
.ai-lp .ai-lead,
.ai-lp .ai-pain li,
.ai-lp .ai-checklist li,
.ai-lp .ai-card__body,
.ai-lp .ai-step__body,
.ai-lp .ai-faq-a p{
  font-size:19px;
  line-height:1.68;
  color:var(--ink);           /* 3. near-black on light; passes WCAG AA */
}
/* 2. Cap reading blocks at ~42rem (about 65-72 chars). Never full width. */
.ai-lp .ai-narrow{max-width:42rem;margin-inline:auto}
.ai-lp .ai-body,
.ai-lp .ai-lead{max-width:42rem}
/* 5. Hierarchy by size + weight, not color. No hairline weights. */
.ai-lp .ai-h1{font-weight:700}
.ai-lp .ai-h2{font-weight:700}
.ai-lp .ai-h3,
.ai-lp .ai-card__title,
.ai-lp .ai-step__title{font-weight:600}
/* 6. ALL-CAPS only for small mono eyebrows/labels; headlines/body sentence case */
.ai-lp .ai-eyebrow{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--brand);margin-bottom:16px;
}
.ai-lp .ai-eyebrow--ondark{color:#FF6B3D}
/* secondary text differs by size/weight, never by a lighter gray */
.ai-lp .ai-trust{font-size:15px;line-height:1.6;color:var(--ink);margin-top:18px;opacity:.85}

/* ==========================================================================
   LAYOUT + SECTION RHYTHM
   4. ~100px desktop / ~64px mobile padding; generous head-to-body space.
   ========================================================================== */
.ai-lp .ai-wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.ai-lp .ai-section{padding-block:100px}
.ai-lp .ai-h1{
  font-family:var(--display);font-size:clamp(38px,5.4vw,64px);line-height:1.06;
  letter-spacing:.005em;margin-bottom:22px;
}
.ai-lp .ai-h2{
  font-family:var(--display);font-size:clamp(28px,3.4vw,42px);line-height:1.12;
  letter-spacing:.005em;margin-bottom:20px;max-width:24ch;
}
.ai-lp .ai-h3{font-family:var(--display)}
.ai-lp .ai-body + .ai-body{margin-top:18px}

/* ── 1. HERO (light, airy) ────────────────────────────────────────────── */
.ai-lp .ai-hero{
  padding:calc(var(--nav-h) + 72px) var(--gutter) 96px;
  background:
    radial-gradient(ellipse 70% 60% at 88% 6%,rgba(255,107,61,.10),transparent 60%),
    radial-gradient(ellipse 60% 50% at 4% 98%,rgba(232,82,31,.07),transparent 55%),
    var(--panel);
  text-align:left;
}
.ai-lp .ai-hero .ai-lead{font-size:clamp(19px,2vw,22px);margin-bottom:30px}
.ai-lp .ai-cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* ── 2. PROBLEM ───────────────────────────────────────────────────────── */
.ai-lp .ai-pain{list-style:none;margin-top:34px;display:grid;gap:14px}
.ai-lp .ai-pain li{
  position:relative;padding-left:34px;
}
.ai-lp .ai-pain li::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:12px;
  background:var(--brand);border-radius:2px;
}

/* ── 3. WHAT WE DO + cards ────────────────────────────────────────────── */
.ai-lp .ai-do__head{max-width:42rem;margin-bottom:52px}
.ai-lp .ai-cards{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.ai-lp .ai-card{
  background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);
  padding:30px 28px;transition:transform .3s,border-color .3s,box-shadow .3s;
}
.ai-lp .ai-card:hover{
  transform:translateY(-5px);border-color:var(--brand);
  box-shadow:0 18px 40px -24px rgba(232,82,31,.5);
}
/* Cards: explicit near-black text on #fff (do not rely on inheritance). */
.ai-lp .ai-card{color:#161514}
.ai-lp .ai-card__title{
  font-family:var(--display);font-size:21px;line-height:1.2;margin-bottom:12px;color:#161514;
}
.ai-lp .ai-card__body{font-size:17px;line-height:1.6;color:#161514}

/* ── 4. HOW IT WORKS (dark) + pixel motif ─────────────────────────────── */
/* EXPLICIT HEX on the dark sections. Never rely on a var here, and scope to
   the bare .ai-h2/.ai-body so this beats any global heading color. */
.ai-lp .ai-how,
.ai-lp .ai-final{background:#161619;color:#EDECE8}
.ai-lp .ai-how .ai-h2,
.ai-lp .ai-how .ai-h2--ondark,
.ai-lp .ai-final .ai-h2,
.ai-lp .ai-final .ai-h2--ondark{color:#FFFFFF}
.ai-lp .ai-how .ai-body,
.ai-lp .ai-how .ai-body--ondark,
.ai-lp .ai-final .ai-body,
.ai-lp .ai-final .ai-body--ondark{color:#EDECE8}
.ai-lp .ai-steps{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px;
}
.ai-lp .ai-step{
  border:1px solid #2E2E36;border-radius:var(--radius);padding:28px 26px;background:#1F1F24;
}
.ai-lp .ai-px{
  display:grid;grid-template-columns:repeat(8,6px);gap:3px;margin-bottom:22px;
}
.ai-lp .ai-px i{width:6px;height:6px;border-radius:1px;background:rgba(246,244,241,.10)}
.ai-lp .ai-px i.on{background:#FF6B3D}
.ai-lp .ai-step__num{
  display:block;font-family:var(--display);font-weight:700;font-size:15px;
  color:#FF6B3D;letter-spacing:.08em;margin-bottom:8px;
}
.ai-lp .ai-step__title{
  font-family:var(--display);font-size:23px;color:#FFFFFF;margin-bottom:8px;
}
.ai-lp .ai-step__lead{font-size:17px;font-weight:600;color:#FFFFFF;margin-bottom:8px}
.ai-lp .ai-step__body{color:#EDECE8}

/* ── 5. WHY + credibility strip ───────────────────────────────────────── */
.ai-lp .ai-why .ai-cred{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;
}
.ai-lp .ai-cred li{
  background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);
  padding:26px 22px;text-align:center;
}
.ai-lp .ai-cred__k{
  display:block;font-family:var(--display);font-weight:700;font-size:26px;
  color:#E8521F;margin-bottom:4px;line-height:1.1;
}
.ai-lp .ai-cred__v{display:block;font-size:14px;color:#161514}

/* ── 6. WHO THIS IS FOR ───────────────────────────────────────────────── */
.ai-lp .ai-checklist{list-style:none;margin-top:30px;display:grid;gap:16px}
.ai-lp .ai-checklist li{position:relative;padding-left:36px}
.ai-lp .ai-checklist li::before{
  content:"";position:absolute;left:0;top:.5em;width:16px;height:16px;border-radius:3px;
  background:var(--brand);
}

/* ── 7. FAQ accordion (keyboard native, one-open via JS, no layout shift) ─ */
.ai-lp .ai-faq-list{margin-top:34px;border-top:1px solid var(--line-light)}
.ai-lp .ai-faq-item{border-bottom:1px solid var(--line-light)}
.ai-lp .ai-faq-q{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:22px 2px;font-family:var(--display);
  font-weight:600;font-size:21px;line-height:1.3;color:var(--ink);
}
.ai-lp .ai-faq-q::-webkit-details-marker{display:none}
.ai-lp .ai-faq-q::before{
  content:"+";order:2;flex:0 0 auto;font-family:var(--body);font-weight:400;
  font-size:28px;line-height:1;color:var(--brand);transition:transform .2s;
}
.ai-lp .ai-faq-item[open] .ai-faq-q::before{transform:rotate(45deg)} /* + becomes x */
.ai-lp .ai-faq-a{padding:0 2px 24px}
.ai-lp .ai-faq-a p{max-width:42rem}

/* ── 8. FINAL CTA (dark) ──────────────────────────────────────────────── */
/* Explicit hex (matches the section-4 dark rule); keep text-align only here. */
.ai-lp .ai-final{background:#161619;color:#EDECE8;text-align:left}

/* ── 9. LEAD FORM ─────────────────────────────────────────────────────── */
.ai-lp .ai-formsec{background:var(--panel)}
.ai-lp .ai-form{margin-top:34px;max-width:42rem}
.ai-lp .ai-form label,
.ai-lp .ai-form .gfield_label{
  display:block;font-size:21px;font-weight:600;color:var(--ink);margin-bottom:10px;
}
.ai-lp .ai-form input[type=text],
.ai-lp .ai-form input[type=email],
.ai-lp .ai-form input[type=url],
.ai-lp .ai-form textarea{
  width:100%;font-family:var(--body);font-size:19px;line-height:1.5;color:var(--ink);
  background:#fff;border:1px solid var(--line-light);border-radius:8px;padding:14px 16px;
}
.ai-lp .ai-form .gfield{margin-bottom:22px}
.ai-lp .ai-form textarea{min-height:130px;resize:vertical}
.ai-lp .ai-form .gform_required_legend{display:none}
/* Space the required marker away from the label and scale it with the larger
   label so it stays balanced, not oversized. */
.ai-lp .ai-form .gfield_required{color:var(--brand);margin-left:8px;font-size:.78em}
.ai-lp .ai-form .gform_footer input[type=submit],
.ai-lp .ai-form .gform_footer button{
  background:var(--brand);color:#fff;font-family:var(--body);font-weight:700;font-size:16px;
  border:0;border-radius:8px;padding:15px 30px;cursor:pointer;transition:background .25s,transform .25s;
}
.ai-lp .ai-form .gform_footer input[type=submit]:hover,
.ai-lp .ai-form .gform_footer button:hover{background:var(--brand-soft);transform:translateY(-2px)}
.ai-lp .ai-form .gform_confirmation_message{font-size:19px;line-height:1.68;color:var(--ink)}
/* Select (dropdown): native arrow removed and replaced with our own chevron so
   the closed state is clean and the value ("Prefer not to say") is vertically
   centered with proper height, never clipped. Matches the inputs; tokens only. */
.ai-lp .ai-form .ginput_container_select{position:relative}
.ai-lp .ai-form select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:100%;font-family:var(--body);font-size:19px;line-height:1.5;color:var(--ink);
  background:#fff;border:1px solid var(--line-light);border-radius:8px;
  min-height:56px;padding:15px 46px 15px 16px;
}
.ai-lp .ai-form .ginput_container_select::after{
  content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;opacity:.7;
}
.ai-lp .ai-form .gfield_description{font-size:17px;line-height:1.55;color:var(--ink);opacity:.8;margin-top:6px}
/* Checkboxes: auto-fit so the 8-way interests grid wraps neatly while a single
   consent checkbox spans full width on its own row. */
.ai-lp .ai-form .gfield_checkbox{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 22px}
.ai-lp .ai-form .gfield_checkbox .gchoice{display:flex;align-items:flex-start;gap:10px}
.ai-lp .ai-form .gfield_checkbox input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--brand);flex:0 0 auto}
.ai-lp .ai-form .gfield_checkbox label{font-size:19px;font-weight:500;line-height:1.45;margin:0}
/* Marketing consent: single prechecked checkbox; hide its redundant field label
   (the choice text carries the message). Field gets cssClass "snap-consent". */
.ai-lp .ai-form .snap-consent > .gfield_label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
.ai-lp .ai-form .snap-consent .gfield_checkbox label{font-weight:400}
/* Quiet privacy line under the form fields. */
.ai-lp .ai-form .snap-privacy{font-size:16px;line-height:1.55;color:var(--ink);opacity:.7;margin:0}
/* Quiet footer line: keeps the page's outbound internal links without competing
   with the submit button. Muted ink (token-derived); links underlined. */
.ai-lp .ai-snap-foot{
  font-size:14px;line-height:1.6;text-align:center;max-width:42rem;margin:0 auto;padding:0 0 72px;
  color:var(--ink);color:color-mix(in srgb,var(--ink) 62%,var(--panel));
}
.ai-lp .ai-snap-foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ai-lp .ai-snap-foot a:hover{color:var(--brand)}

/* ── Sticky mobile CTA bar (revealed after hero scrolls out) ───────────── */
.ai-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--panel);border-top:1px solid var(--line-light);
  box-shadow:0 -8px 24px -16px rgba(0,0,0,.4);
}
.ai-sticky .btn-primary{display:block;text-align:center;width:100%}
.ai-sticky.is-visible{display:block}

/* ── Visible keyboard focus everywhere on the page ────────────────────── */
.ai-lp a:focus-visible,
.ai-lp button:focus-visible,
.ai-lp summary:focus-visible,
.ai-lp input:focus-visible,
.ai-lp textarea:focus-visible,
.ai-sticky a:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;border-radius:6px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:980px){
  .ai-lp .ai-cards{grid-template-columns:repeat(2,1fr)}
  .ai-lp .ai-steps{grid-template-columns:1fr}
  .ai-lp .ai-why .ai-cred{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .ai-lp .ai-section{padding-block:64px}
  .ai-lp .ai-hero{padding:calc(var(--nav-h) + 40px) 22px 64px}
  .ai-lp .ai-wrap{padding-inline:22px}
  .ai-lp .ai-cards{grid-template-columns:1fr}
  .ai-lp .ai-sticky{display:none}      /* base hidden; JS toggles .is-visible */
}
/* sticky bar is mobile-only */
@media (min-width:861px){
  .ai-sticky,.ai-sticky.is-visible{display:none}
}
@media (max-width:860px){
  .ai-sticky.is-visible{display:block}
}

@media (prefers-reduced-motion:reduce){
  .ai-lp .ai-card,
  .ai-lp .ai-form .gform_footer input[type=submit]{transition:none}
  .ai-lp .ai-card:hover{transform:none}
}