@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* Homepage (2026-11 "Alice" redesign). Scoped under .hm so it never touches
   the scraped Bricks header/footer. Editorial layout: warm off-white canvas,
   spacing + type separate sections, brand coral/cyan as restrained accents,
   a literary serif for the Carroll exchange, and one dark band (the Sparkle
   difference) as the page's bold moment. Defensive resets guard against
   Bricks' global h1–h5 / list styles. */
.hm{--coral:#FB4A2C;--coral-d:#c8321a;--cyan:#10B7EF;--cyan-d:#0a6f93;--ink:#0E1822;--cream:#FCF4DE;--canvas:#FBF8F1;--mut:#4f5d70;--line:#e6e0d2;
  font-family:'Poppins',sans-serif;color:var(--ink);line-height:1.6;background:var(--canvas)}
.hm *{box-sizing:border-box}
.hm p,.hm figure,.hm blockquote,.hm ol,.hm ul{margin:0;padding:0}
.hm ol,.hm ul{list-style:none}
.hm h1,.hm h2,.hm h3{font-family:inherit;color:var(--ink);margin:0}
.hm .in{max-width:1120px;margin:0 auto;padding:0 40px}
.hm .sec{padding:96px 0}
.hm .sec+.sec{border-top:1px solid var(--line)}
.hm .narrow>*{max-width:760px}

.hm .eye{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-d);margin:0 0 18px}
.hm .eye:before{content:"";width:26px;height:3px;border-radius:2px;background:var(--coral)}
.hm h2{text-wrap:balance;font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 22px}
.hm .body{font-size:clamp(16px,1.6vw,18px);color:var(--mut);line-height:1.7;max-width:680px}
.hm .body+.body{margin-top:16px}
.hm .say{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(22px,2.6vw,30px);line-height:1.35;color:var(--ink);margin-top:34px;padding-left:22px;border-left:3px solid var(--coral);max-width:680px}

.hm .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hm a.pill{display:inline-block;border-radius:999px;font-weight:600;padding:14px 28px;font-size:15px;line-height:1.3;text-decoration:none;transition:transform .15s,filter .15s,background .15s}
.hm a.pill:hover{transform:translateY(-2px);filter:brightness(1.05)}
.hm .p-coral{background:var(--coral-d);color:#fff} /* deeper coral: white text passes AA at button size */
.hm .p-out{background:transparent;color:var(--ink);border:1.5px solid #c9c2b2}
.hm .p-out:hover{background:#fff}
.hm a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.hm .more{align-self:flex-start;display:inline-block;margin-top:18px;font-weight:600;font-size:15px;color:var(--coral-d);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.hm .more:hover{color:var(--ink)}

/* 1 — Hero */
.hm-hero{padding:72px 0 88px}
.hm-hero .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"head scene" "copy scene";column-gap:56px;align-items:start}
.hm-hero .head{grid-area:head;align-self:end}
.hm-hero .scene{grid-area:scene;position:relative;max-width:600px;width:100%;justify-self:end}
.hm-hero .copy{grid-area:copy}
.hm h1{text-wrap:balance;font-size:clamp(34px,4.4vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:0 0 6px}
.hm h1 .hl{color:var(--coral-d)}
.hm-hero .art img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* Carroll's text sits in the engraving's open lower-right corner, where it
   wrapped around the picture on the original printed page (real text, not
   part of the image). */
.hm-hero .credit{margin-top:14px;font-size:12px;line-height:1.5;color:#5c6777}
.hm-hero .credit a{color:inherit}
.hm-hero .talk{position:absolute;left:47%;right:0;top:44.5%}
.hm .talk blockquote{border:0;padding:0;margin:0;quotes:none;font-family:Georgia,'Times New Roman',serif;font-size:clamp(13.5px,1.18vw,16px);line-height:1.42;color:#283444}
.hm .talk blockquote p+p{margin-top:.55em}
.hm .talk .who{display:block;font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-d);margin-bottom:1px}
.hm .talk .who.cat{color:var(--coral-d)}
.hm-hero .copy{margin-top:26px}
.hm-hero .brand{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5c6777}

/* 2 — The question */
.hm .lead-yes{font-size:clamp(24px,2.8vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--coral-d);margin:0 0 24px}

/* 4 — Human insight + AI loop */
.hm .loop{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;padding-bottom:30px;counter-reset:lp}
/* dashed return path under the four steps: the cycle repeats */
.hm .loop:after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:22px;border:2px dashed #c9c2b2;border-top:0;border-radius:0 0 14px 14px}
.hm .loop li{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px 22px;counter-increment:lp}
.hm .loop li:before{content:counter(lp,decimal-leading-zero);display:block;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--cyan-d);margin-bottom:10px}
.hm .loop li:not(:last-child):after{content:"";position:absolute;top:30px;right:-16px;width:9px;height:9px;border-top:2px solid #b9b2a2;border-right:2px solid #b9b2a2;transform:rotate(45deg)}
.hm .loop h3{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin:0 0 6px}
.hm .loop p{font-size:14.5px;line-height:1.55;color:var(--mut)}
.hm .loopnote{display:flex;gap:10px;align-items:flex-start;margin-top:22px;font-size:14px;color:var(--mut);max-width:760px}
.hm .loopnote span{font-size:18px;line-height:1.2;color:var(--cyan-d)}

/* 5 — The Sparkle difference (dark band) */
.hm .dark{background:var(--ink);border-top:0!important}
.hm .dark+.sec{border-top:0}
.hm .dark h2,.hm .dark h3{color:#fff}
.hm .dark .eye{color:var(--cyan)}.hm .dark .eye:before{background:var(--cyan)}
.hm .dark .body{color:#b5c4d6}
.hm .dark .kicker{font-size:clamp(19px,2vw,23px);font-weight:600;color:#fff;line-height:1.4;margin:0 0 18px;max-width:700px}
.hm .stages{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:50px;counter-reset:st}
.hm .stages li{position:relative;padding:0 26px 0 0;counter-increment:st}
.hm .stages li:before{content:counter(st,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:2px solid #4a6078;font-size:15px;font-weight:800;color:#fff;background:var(--ink);position:relative;z-index:1;margin-bottom:18px}
.hm .stages li:not(:last-child):after{content:"";position:absolute;top:22px;left:46px;right:0;height:2px;background:linear-gradient(90deg,#3d5064,#6c7f95)}
.hm .stages li:nth-child(3):after{background:linear-gradient(90deg,#6c7f95,var(--coral))}
.hm .stages h3{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin:0 0 8px}
.hm .stages p{font-size:14.5px;line-height:1.6;color:#a9b9cc}
.hm .stages li.act:before{background:var(--coral);border-color:var(--coral);box-shadow:0 0 0 8px rgba(251,74,44,.16)}
.hm .stages li.act h3{color:#fff;font-size:23px}
.hm .stages li.act p{color:#dfe8f1}
.hm .dark .entry{margin-top:46px;padding-top:28px;border-top:1px solid #23344a;display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hm .dark .entry p{font-size:16px;line-height:1.65;color:#c9d6e4;max-width:640px}
.hm .dark .p-out{color:#fff;border-color:#4a6078}
.hm .dark .p-out:hover{background:#17283a}

/* 6 — Proof */
.hm .cases{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.hm .case{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 30px 28px;display:flex;flex-direction:column}
.hm .case .cat{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-d);margin-bottom:12px}
.hm .case h3{font-size:clamp(20px,2vw,23px);font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:0 0 6px}
.hm .case .cl{font-size:14px;font-weight:600;color:#5c6777;margin-bottom:14px}
.hm .case p.txt{font-size:15.5px;line-height:1.65;color:var(--mut);flex:1}

/* 7 — Closing CTA */
.hm .final{background:var(--cream);text-align:center;border-top:0!important}
.hm .final h2{max-width:820px;margin:0 auto 18px}
.hm .final .body{margin:0 auto}
.hm .final .btns{justify-content:center}

/* Latest insights strip (scraped Bricks feed) keeps its own styles; give it the canvas */
.hm+#brxe-vvygwm{background:var(--canvas);border-top:1px solid var(--line);padding-top:72px}
.hm+#brxe-vvygwm #brxe-rkmjky{max-width:1120px;padding-left:40px;padding-right:40px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.hm a.pill,.hm a.pill:hover{text-decoration:none}

@media(max-width:960px){
  .hm .loop{grid-template-columns:1fr 1fr}
  .hm .loop li:nth-child(2):after{display:none}
  .hm .stages{grid-template-columns:1fr 1fr;row-gap:40px}
  .hm .stages li:nth-child(2):after{display:none}
}
@media(max-width:1000px){
  .hm-hero .grid{grid-template-columns:1fr;grid-template-areas:"head" "scene" "copy"}
  .hm h1{margin-bottom:26px}
  .hm-hero .scene{justify-self:start;max-width:560px}
  .hm-hero .talk{position:static;margin-top:26px;max-width:560px}
  .hm .talk blockquote{font-size:16px}
}
@media(max-width:820px){
  .hm .cases{grid-template-columns:1fr}
}
@media(max-width:600px){
  .hm .in{padding:0 20px}
  .hm .sec{padding:64px 0}
  .hm-hero{padding:44px 0 60px}
  .hm .loop{grid-template-columns:1fr}
  .hm .loop:after{display:none}
  .hm+#brxe-vvygwm #brxe-rkmjky{padding-left:20px;padding-right:20px}
  .hm .loop li:after{display:none!important}
  .hm .stages{grid-template-columns:1fr;row-gap:0}
  .hm .stages li{display:grid;grid-template-columns:46px 1fr;column-gap:18px;padding:0 0 30px}
  .hm .stages li:before{grid-row:span 2;margin:0}
  .hm .stages li:not(:last-child):after{display:block!important;top:46px;left:22px;right:auto;bottom:0;width:2px;height:auto;background:#3d5064}
  .hm .stages li:nth-child(3):after{background:linear-gradient(180deg,#6c7f95,var(--coral))}
  .hm .case{padding:26px 22px}
}
@media(prefers-reduced-motion:reduce){.hm a.pill{transition:none}.hm a.pill:hover{transform:none}}
.hm .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}