/* D4: Modern Clarity plus Sparkle. Scoped to opted-in public/auth surfaces.
   Keep Marketing's .sh-* / .sm-* and existing app styles outside this scope. */
.fai-d4-surface {
  --brand-ink: #012553;
  --brand-muted: #59697d;
  --brand-action: #7142ed;
  --brand-cyan: #51d6e1;
  --brand-paper: #fff;
  --brand-soft: #f6f5ff;
  --brand-line: #e2e5ee;
  color: var(--brand-ink);
  background: var(--brand-paper);
  min-height: 100vh;
  font: 16px/1.55 Arial, sans-serif;
}
.fai-d4-surface :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--brand-action);
  outline-offset: 4px;
}
.fai-d4-surface :where(h1, h2, h3) { font-family: Arial, sans-serif; }
.fai-d4-surface :where(button:disabled) { cursor: not-allowed; }
.fai-d4-header { min-height:98px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px max(22px, calc((100% - 1240px)/2)); background:#fff; }
.fai-d4-brand { display:inline-flex; align-items:center; gap:15px; font-size:35px; font-weight:700; letter-spacing:-1.3px; line-height:1; color:var(--brand-ink); flex-shrink:0; }
.fai-d4-brand img, .fai-d4-brand svg { width:48px; height:48px; }
.fai-d4-brand b { color:var(--brand-action); }
.fai-d4-nav { display:flex; align-items:center; gap:35px; font-size:15px; }
.fai-d4-nav a:hover, .fai-d4-footer a:hover { text-decoration:underline; text-underline-offset:4px; }
.fai-d4-login { border:1px solid #b8c2d4; border-radius:7px; padding:10px 22px; }
.fai-d4-gradient { background:radial-gradient(ellipse at 10% 0%,#efe7ff 0,transparent 57%),radial-gradient(ellipse at 90% 0%,#dcfafa 0,transparent 55%); }
.fai-d4-main { max-width:1284px; padding:64px 22px 70px; margin:auto; }
.fai-d4-eyebrow { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--brand-action); font-weight:700; margin-bottom:18px; }
.fai-d4-heading { font-size:58px; line-height:1.08; letter-spacing:-1.8px; font-weight:700; margin:0 auto 22px; max-width:850px; }
.fai-d4-intro { font-size:20px; line-height:1.6; color:var(--brand-muted); max-width:720px; margin:0 auto 20px; }
.fai-d4-lead { text-align:center; }
.fai-d4-button { display:inline-flex; justify-content:center; align-items:center; gap:10px; padding:14px 24px; border:1px solid transparent; border-radius:7px; background:var(--brand-action); color:#fff; font-size:15px; font-weight:700; min-height:50px; }
.fai-d4-button:hover { background:#6033d3; }
.fai-d4-secondary { background:transparent; color:var(--brand-ink); border-color:#aab7cc; }
.fai-d4-secondary:hover { background:var(--brand-soft); }
.fai-d4-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:28px; }
.fai-d4-homeHero { max-width:850px; }
.fai-d4-homeHero h1 { font-size:61px; line-height:1.08; letter-spacing:-1.8px; font-weight:700; margin:0 0 22px; }
.fai-d4-homeHero p:not(.fai-d4-eyebrow) { font-size:19px; color:var(--brand-muted); line-height:1.6; }
.fai-d4-proof { background:#fff; border:1px solid #dce1ec; border-radius:14px; padding:10px; box-shadow:0 15px 60px #7041ee12; }
.fai-d4-proof img { display:block; width:100%; height:auto; max-height:410px; object-fit:contain; object-position:top; }
.fai-d4-proof figcaption { font-size:11px; color:#657184; padding:10px 8px 4px; line-height:1.4; }
.fai-d4-suite { display:grid; grid-template-columns:repeat(4,1fr); margin-top:52px; }
.fai-d4-app { padding:24px 26px; border-left:1px solid var(--brand-line); }
.fai-d4-app:first-child { border:0; padding-left:0; }
.fai-d4-number { width:34px; height:34px; border-radius:50%; background:#eee8ff; color:var(--brand-action); display:inline-flex; align-items:center; justify-content:center; margin-bottom:15px; font-size:12px; font-weight:700; }
.fai-d4-appIcon { display:flex; margin-bottom:15px; }
.fai-d4-nameWithIcon { display:flex; align-items:center; gap:10px; min-width:0; }
.fai-d4-appName { font-size:14px; font-weight:700; margin-bottom:12px; }
.fai-d4-app h2 { font-size:25px; font-weight:700; letter-spacing:-.5px; line-height:1.08; margin-bottom:22px; }
.fai-d4-app p { font-size:14px; color:var(--brand-muted); margin-bottom:20px; }
.fai-d4-textLink { color:var(--brand-action); font-weight:700; font-size:14px; text-underline-offset:4px; }
.fai-d4-textLink:hover { text-decoration:underline; }
.fai-d4-badge { display:inline-block; font-size:12px; color:#6632d1; background:#eee6ff; border-radius:20px; padding:4px 12px; font-weight:600; }
.fai-d4-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:42px; }
.fai-d4-plan { border:1px solid var(--brand-line); border-radius:12px; padding:28px; background:#fff; display:flex; flex-direction:column; gap:20px; }
.fai-d4-plan h2 { font-size:24px; line-height:1.2; font-weight:700; letter-spacing:-.5px; }
.fai-d4-plan p, .fai-d4-plan ul { color:var(--brand-muted); font-size:14px; }
.fai-d4-plan li { padding:7px 0; border-bottom:1px solid #eff1f5; }
.fai-d4-plan li:last-child { border:0; }
.fai-d4-plan .fai-d4-button { margin-top:auto; }
.fai-d4-plan .fai-d4-price { color:var(--brand-ink); font-size:42px; line-height:1.2; font-weight:700; letter-spacing:-1.5px; }
.fai-d4-price small, .fai-d4-price > span { margin-left:4px; font-size:14px; font-weight:400; color:var(--brand-muted); letter-spacing:0; }
.fai-d4-coming { margin-top:24px; display:flex; justify-content:space-between; align-items:center; gap:20px; border:1px solid var(--brand-line); border-radius:8px; padding:20px 25px; }
.fai-d4-coming strong { display:flex; align-items:center; gap:10px; min-width:0; }
.fai-d4-coming strong::before { content:""; flex:none; width:32px; height:32px; background:url(/brand/apps/marketing.svg) center / contain no-repeat; }
.fai-d4-coming p { color:var(--brand-muted); font-size:14px; }
.fai-d4-footer { padding:25px max(22px,calc((100% - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--brand-line); background:#fff; font-size:12px; color:#59697d; }
.fai-d4-footer nav { display:flex; gap:24px; }
.fai-d4-authWrap { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; min-height:764px; padding:64px 92px; }
.fai-d4-authStory { position:relative; }
.fai-d4-authStory > img { margin-bottom:25px; }
.fai-d4-authStory h2 { font-size:49px; font-weight:700; line-height:1.08; letter-spacing:-1.8px; margin-bottom:24px; }
.fai-d4-authStory > p:last-of-type { font-size:18px; color:var(--brand-muted); }
.fai-d4-sparkle { position:absolute; right:20px; top:-25px; font-size:70px; color:#beabfa; }
.fai-d4-authCard { max-width:430px; width:100%; background:#fff; border:1px solid var(--brand-line); border-radius:13px; padding:38px; }
.fai-d4-authCard h1 { font-size:31px; line-height:1.08; font-weight:700; letter-spacing:-.7px; margin-bottom:22px; }
.fai-d4-authCard form { border:0; padding:0; background:transparent; }
.fai-d4-authCard input { min-height:48px; }
.fai-d4-authCard form > button[type=submit] { min-height:50px; font-weight:700; background:var(--brand-action); }
.fai-d4-authCard form > button[type=submit]:hover:not(:disabled) { background:#6033d3; }
.fai-d4-authCard > p { margin-top:20px; }
.fai-d4-supportGrid { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:45px; }
.fai-d4-supportItem { padding:25px 0; border-bottom:1px solid var(--brand-line); }
.fai-d4-supportItem:first-child { padding-top:0; }
.fai-d4-supportItem h3 { font-size:19px; font-weight:700; line-height:1.3; margin-bottom:10px; }
.fai-d4-supportItem p { font-size:15px; color:var(--brand-muted); }
.fai-d4-contact { padding:35px; border-radius:12px; background:var(--brand-soft); height:fit-content; }
.fai-d4-contact h2 { font-size:30px; font-weight:700; line-height:1.1; margin-bottom:22px; }
.fai-d4-contact p { color:var(--brand-muted); margin-bottom:20px; }
.fai-d4-legal { max-width:844px; }
.fai-d4-legal h1 { font-size:47px; line-height:1.1; letter-spacing:-1.5px; }
.fai-d4-legal h2 { font-size:23px; line-height:1.3; letter-spacing:-.4px; }
.fai-d4-selectorTitle { font-size:58px; line-height:1.08; letter-spacing:-1.8px; max-width:800px; margin-bottom:22px; font-weight:700; }
.fai-d4-selectorGrid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:38px; }
.fai-d4-selectorCard { border:1px solid var(--brand-line); border-radius:14px; padding:28px 30px; background:#fff; display:flex; flex-direction:column; gap:16px; }
.fai-d4-selectorCard h2 { font-size:27px; line-height:1.15; letter-spacing:-.6px; font-weight:700; }
.fai-d4-selectorCard > p { color:var(--brand-muted); font-size:16px; }
.fai-d4-selectorCard > a:last-child { align-self:flex-start; }
.fai-d4-selectorCard .fai-d4-button { align-self:flex-start; min-height:44px; padding:10px 20px; font-size:13px; }
@media(max-width:767px) {
  .fai-d4-header { min-height:0; padding:8px 22px; gap:4px; flex-wrap:wrap; }
  .fai-d4-brand { font-size:26px; gap:10px; }
  .fai-d4-brand img, .fai-d4-brand svg { width:30px; height:30px; }
  .fai-d4-nav { gap:14px; font-size:13px; }
  .fai-d4-desktopNav { display:none; }
  .fai-d4-login { padding:10px 11px; }
  .fai-d4-main { padding:35px 22px 38px; }
  .fai-d4-eyebrow { font-size:10px; letter-spacing:1.5px; }
  .fai-d4-heading { font-size:38px; letter-spacing:-1.3px; }
  .fai-d4-lead { text-align:left; }
  .fai-d4-intro { font-size:16px; }
  .fai-d4-homeHero { display:block; }
  .fai-d4-homeHero h1 { font-size:42px; letter-spacing:-1.3px; }
  .fai-d4-homeHero p:not(.fai-d4-eyebrow) { font-size:16px; }
  .fai-d4-actions { gap:10px; margin:22px 0; }
  .fai-d4-actions .fai-d4-button { font-size:12px; padding:12px 14px; min-height:44px; }
  .fai-d4-proof { padding:6px; border-radius:8px; margin-top:28px; }
  .fai-d4-proof img { max-height:220px; }
  .fai-d4-proof figcaption { font-size:9px; }
  .fai-d4-suite { grid-template-columns:1fr 1fr; margin-top:28px; gap:20px 0; }
  .fai-d4-app { padding:10px 16px; }
  .fai-d4-app:nth-child(odd) { padding-left:0; border-left:0; }
  .fai-d4-app h2 { font-size:20px; }
  .fai-d4-app p, .fai-d4-textLink { font-size:12px; }
  .fai-d4-number { display:none; }
  .fai-d4-appName { font-size:13px; }
  .fai-d4-plans { grid-template-columns:1fr; margin-top:28px; gap:18px; }
  .fai-d4-plan { padding:24px; }
  .fai-d4-coming { align-items:flex-start; flex-direction:column; }
  .fai-d4-footer { display:block; padding:24px 22px; font-size:11px; }
  .fai-d4-footer nav { margin-top:12px; gap:20px; }
  .fai-d4-footer a { padding:8px 0; }
  .fai-d4-authWrap { display:block; min-height:0; }
  .fai-d4-authStory { display:none; }
  .fai-d4-authCard { padding:28px 0; border:0; background:transparent; max-width:none; }
  .fai-d4-authCard h1 { font-size:32px; }
  .fai-d4-supportGrid { display:block; }
  .fai-d4-contact { margin-top:30px; padding:25px; }
  .fai-d4-legal h1 { font-size:36px; }
  .fai-d4-selectorTitle { font-size:28px; line-height:1.12; margin-bottom:16px; letter-spacing:-1px; }
  .fai-d4-selectorGrid { grid-template-columns:1fr; gap:10px; margin-top:20px; }
  .fai-d4-selectorCard { padding:14px 16px; gap:10px; }
  .fai-d4-selectorCard h2 { font-size:21px; }
  .fai-d4-selectorCard > p { font-size:13px; line-height:1.4; }
}

.fai-d4-mobileMenu { display:none; position:relative; }
.fai-d4-mobileMenu summary { cursor:pointer; padding:12px 0; }
.fai-d4-mobileMenu > div { position:absolute; z-index:60; top:100%; right:0; min-width:180px; padding:8px; border:1px solid var(--brand-line); border-radius:10px; background:#fff; box-shadow:0 12px 32px #01255318; }
.fai-d4-mobileMenu > div a { display:block; padding:12px; }
@media(max-width:767px) { .fai-d4-mobileMenu { display:block; } }

.fai-d4-app p { max-width:240px; }
.fai-d4-app h2.fai-d4-appName { font-size:14px; letter-spacing:0; margin-bottom:12px; line-height:1.5; }
@media(max-width:767px) { .fai-d4-app h2.fai-d4-appName { font-size:13px; } }

.fai-d4-trialNote { margin-top:30px; padding-top:24px; border-top:1px solid var(--brand-line); font-size:12px; color:var(--brand-muted); }
.fai-d4-trialNote nav { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:12px; }
.fai-d4-trialNote a { color:var(--brand-action); text-decoration:underline; text-underline-offset:3px; padding:8px 0; }

.fai-d4-workflow { margin-top:32px; padding:28px; background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:12px; }
.fai-d4-workflow h2 { font-size:24px; line-height:1.25; font-weight:700; margin-bottom:12px; }
.fai-d4-workflow p { font-size:15px; color:var(--brand-muted); max-width:1000px; }
@media(max-width:767px) { .fai-d4-workflow { padding:22px; } .fai-d4-workflow h2 { font-size:22px; } }

/* Preserve legacy public navigation access at every viewport. */
.fai-d4-header { position:sticky; top:0; z-index:50; }
.fai-d4-nav { flex-wrap:wrap; justify-content:flex-end; gap:clamp(8px,1.5vw,24px); }
.fai-d4-footer nav { flex-wrap:wrap; }
@media(max-width:1023px) {
  .fai-d4-desktopNav { display:none; }
  .fai-d4-mobileMenu { display:block; }
}
@media(max-width:767px) {
  .fai-d4-nav { width:100%; justify-content:space-between; }
  .fai-d4-mobileMenu > div { left:0; right:auto; max-width:calc(100vw - 44px); }
  .fai-d4-nav > .fai-d4-button { min-height:40px; padding:10px 12px; font-size:12px; }
}

/* Keep pricing-client markup stable while restoring a distinct hover. */
.fai-d4-surface [class~="bg-[#7142ed]"][class~="hover:bg-[#7142ed]"]:hover:not(:disabled) { background-color:#6033d3; }

/* Selected app identities; only the app-picker heading changes. */
.fai-d4-selectorIdentity { display:flex; align-items:center; gap:12px; }