/* =========================================================
   PRACTISI — AI AT PRACTISI
   Page-only styles.
   Relies on existing main.css and header-footer.css for the
   brand tokens, site shell, typography, buttons and controls.
   No shared selectors or shared files are changed.
========================================================= */

.ai-page {
  background: var(--bg, #FFFFFF);
  color: var(--text, #171717);
}

.ai-page,
.ai-page * { box-sizing: border-box; }

.ai-page > section {
  scroll-margin-top: calc(var(--header-h, 74px) + 24px);
}

.ai-page h1,
.ai-page h2:not(.final-cta h2),
.ai-page h3 {
  margin: 0;
  color: inherit;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.ai-page p {
  margin: 0;
  font-family: var(--font, "Hanken Grotesk", Arial, sans-serif);
  font-weight: 400;
  text-wrap: pretty;
}

.ai-section {
  padding-block: clamp(108px, 12vw, 190px);
}

/* =========================================================
   HERO — one headline and one introduction.
   Uses About's scale, subtle palette and quiet composition.
   No eyebrow, ornamental line, media object, or hero CTA.
========================================================= */

.ai-hero {
  display: flex;
  align-items: center;
  min-height: clamp(600px, calc(100svh - var(--header-h, 74px)), 810px);
  padding-block: clamp(130px, 14vw, 184px);
  background:
    radial-gradient(ellipse at 12% 78%, #F5F0E7 0, transparent 56%),
    radial-gradient(ellipse at 88% 60%, #EEF6F0 0, transparent 60%),
    #F5F8F4;
  text-align: center;
}

.ai-hero-inner {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.ai-hero h1 {
  max-width: 1050px;
  font-size: clamp(46px, 4.7vw, 76px);
  font-weight: 700;
  line-height: 1.05;
}

.ai-hero p {
  max-width: 680px;
  margin-top: clamp(26px, 3vw, 39px);
  color: #343431;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.7;
  letter-spacing: -0.008em;
}

/* =========================================================
   EDITORIAL PROSE — same typography and measures as About.
========================================================= */

.ai-two-column {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  column-gap: clamp(46px, 8vw, 136px);
  align-items: start;
}

.ai-heading-column h2,
.ai-role h2,
.ai-responsibility h2 {
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.08;
}

.ai-prose { max-width: 59ch; }
.ai-prose p {
  margin: 0 0 1.24em;
  color: #333530;
  font-size: clamp(16px, 1.14vw, 18px);
  line-height: 1.78;
  letter-spacing: -0.008em;
}
.ai-prose p:last-child { margin-bottom: 0; }

.ai-intro,
.ai-responsibility { background: #FFFFFF; }

/* =========================================================
   THREE ROLES — one quiet diagram-like editorial spread.
   No card boxes, ruling lines, borders or fake interfaces.
========================================================= */

.ai-overview { background: var(--surface, #F7F7F5); }

.ai-overview-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  column-gap: clamp(36px, 6vw, 100px);
}

.ai-overview-head h2 {
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1.08;
}

.ai-overview-head > p {
  max-width: 37ch;
  padding-bottom: .25em;
  color: #454841;
  font-size: clamp(16px, 1.13vw, 18px);
  line-height: 1.7;
}

.ai-overview-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 68px);
  margin: clamp(74px, 9vw, 136px) 0 0;
  padding: 0;
  list-style: none;
}

.ai-overview-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.ai-overview-number {
  margin-bottom: 28px;
  color: var(--green, #20663E);
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(45px, 5vw, 76px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.045em;
}

.ai-overview-stage {
  margin-bottom: 6px;
  color: #454841;
  font-family: var(--font, "Hanken Grotesk", Arial, sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.ai-overview-step strong {
  color: var(--text, #171717);
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(31px, 3vw, 45px);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -0.015em;
}

.ai-overview-desc {
  max-width: 27ch;
  margin-top: 15px;
  color: #53564F;
  font-family: var(--font, "Hanken Grotesk", Arial, sans-serif);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.68;
}

/* =========================================================
   ROLE CHAPTERS — intentional alternating editorial rhythm.
   The only in-page action is Clare's existing button styling.
========================================================= */

.ai-role--ask,
.ai-role--evaluator { background: #FFFFFF; }
.ai-role--clare { background: #F5F8F4; }

.ai-role-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(56px, 8.8vw, 152px);
  align-items: start;
}

.ai-role-grid--reverse .ai-role-heading { grid-column: 2; grid-row: 1; }
.ai-role-grid--reverse .ai-role-copy { grid-column: 1; grid-row: 1; }

.ai-role-heading { max-width: 560px; }

.ai-role-index {
  display: block;
  margin-bottom: clamp(23px, 2.8vw, 38px);
  color: var(--green, #20663E);
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(38px, 3.6vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}

.ai-role-heading h2 { max-width: 560px; }

.ai-role-statement {
  max-width: 450px;
  margin-top: clamp(18px, 2.5vw, 35px) !important;
  color: #435246;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.18;
  font-style: italic;
  letter-spacing: -0.015em;
}

.ai-role-copy { padding-top: clamp(47px, 6vw, 90px); }

.ai-page .ai-clare-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(27px, 3vw, 42px);
  min-height: 44px;
  text-decoration: none;
}

/* =========================================================
   GREEN STATEMENT — only one deep-green brand band.
========================================================= */

.ai-belief {
  padding-block: clamp(120px, 13vw, 205px);
  background: var(--green, #20663E);
  color: #FFFFFF;
}

.ai-belief-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  column-gap: clamp(58px, 8.2vw, 145px);
  align-items: end;
}

.ai-belief h2 {
  max-width: 830px;
  font-size: clamp(46px, 5.5vw, 82px);
  line-height: 1.06;
}

.ai-belief p {
  max-width: 46ch;
  padding-bottom: .2em;
  color: #EEF5EF;
  font-size: clamp(16px, 1.14vw, 18px);
  line-height: 1.8;
}



/* =========================================================
   OPTIONAL PROGRESSIVE ENHANCEMENT
   Never hide text while waiting for animation or JS.
========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .ai-page.ai-enhanced .ai-observed.ai-in-view {
    animation: ai-arrive 550ms cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes ai-arrive {
    from { transform: translateY(9px); opacity: .83; }
    to { transform: translateY(0); opacity: 1; }
  }
}

/* =========================================================
   RESPONSIVE — columns become natural vertical chapters.
========================================================= */

@media (max-width: 980px) {
  .ai-two-column,
  .ai-role-grid,
  .ai-overview-head,
  .ai-belief-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4.5vw, 54px);
  }

  .ai-role-grid--reverse .ai-role-heading,
  .ai-role-grid--reverse .ai-role-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .ai-role-grid--reverse .ai-role-heading { grid-row: 1; }
  .ai-role-grid--reverse .ai-role-copy { grid-row: 2; }

  .ai-role-copy { padding-top: 0; }
  .ai-heading-column h2 br,
  .ai-responsibility h2 br { display: none; }

  .ai-prose { max-width: 65ch; }
  .ai-overview-head > p { max-width: 55ch; }
  .ai-belief p { max-width: 63ch; }
}

@media (max-width: 700px) {
  .ai-section { padding-block: 92px; }
  .ai-hero {
    min-height: 560px;
    padding-block: 115px 105px;
  }
  .ai-hero h1 {
    font-size: clamp(40px, 8.5vw, 56px);
  }
  .ai-hero h1 br { display: none; }
  .ai-hero p { max-width: 39ch; margin-top: 28px; font-size: 16px; line-height: 1.72; }
  .ai-heading-column h2,
  .ai-role h2,
  .ai-responsibility h2 { font-size: clamp(36px, 8.7vw, 51px); }
  .ai-two-column,
  .ai-role-grid { gap: 29px; }
  .ai-prose p { font-size: 16px; line-height: 1.72; }
  .ai-overview-head h2 { font-size: clamp(39px, 9vw, 56px); }
  .ai-overview-head h2 br { display: none; }
  .ai-overview-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 61px;
  }
  .ai-overview-number { margin-bottom: 13px; font-size: 53px; }
  .ai-overview-step strong { font-size: 38px; }
  .ai-overview-desc { max-width: 35ch; margin-top: 9px; }
  .ai-role-index { margin-bottom: 15px; font-size: 45px; }
  .ai-role-statement { margin-top: 17px !important; font-size: 31px; }
  .ai-belief { padding-block: 101px; }
  .ai-belief h2 { font-size: clamp(43px, 10.2vw, 61px); }
  .ai-belief h2 br { display: none; }
  .ai-belief p { font-size: 16px; line-height: 1.74; }
}

@media (max-width: 380px) {
  .ai-hero h1 { font-size: 39px; }
  .ai-overview-head h2 { font-size: 38px; }
  .ai-role-heading h2 { font-size: 41px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-page *, .ai-page *::before, .ai-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Center the reading compositions while retaining a left reading edge. */
.ai-intro .ai-two-column,
.ai-responsibility .ai-two-column {
 width:min(var(--shell),760px); margin-inline:auto;
 display:flex; flex-direction:column; gap:32px; align-items:stretch; text-align:left;
}
.ai-intro .ai-prose,.ai-responsibility .ai-prose { max-width:none; }
.ai-page #aiIntroTitle { text-wrap:initial; }
.ai-intro-line { white-space:nowrap; }

.ai-page #aiIntroTitle br { display:block; }

/* A widening stack, joined by a single precise central spine. */
.ai-overview-head { display:block; text-align:center; max-width:760px; margin-inline:auto; }
.ai-overview-head > p { max-width:52ch; margin:22px auto 0; }
.ai-model-stack { display:flex; flex-direction:column; align-items:center; gap:40px; max-width:1040px; margin:56px auto 0; }
.ai-model-stack .ai-overview-step {
 position:relative; width:var(--layer-width); display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); column-gap:32px;
 padding:28px 32px; border:1px solid var(--line); border-radius:4px; background:var(--bg);
}
.ai-model-stack .ai-overview-step::before {
 content:""; position:absolute; height:40px; width:1px; left:50%; top:-41px; background:var(--sage);
}
.ai-model-stack .ai-overview-step:first-child::before { height:56px; top:-57px; }
.ai-model-stack .ai-overview-stage { grid-column:1; grid-row:1; margin-bottom:6px; }
.ai-model-stack strong { grid-column:1; grid-row:2; font-size:clamp(28px,2.7vw,40px); }
.ai-model-stack .ai-overview-desc { grid-column:2; grid-row:1/span 2; align-self:center; max-width:none; margin:0; }

.ai-role--ask .ai-role-grid { display:block; width:min(var(--shell),760px); margin-inline:auto; }
.ai-role--ask .ai-role-heading { max-width:none; }
.ai-ask-logo { display:block; width:136px; height:136px; object-fit:contain; margin:24px 0 28px; }
.ai-role--ask .ai-role-copy { padding-top:0; max-width:none; }

.ai-role--clare .ai-role-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:24px 64px; align-items:center; }
.ai-role--clare .ai-role-heading { grid-column:1; grid-row:1; }
.ai-role--clare .ai-role-copy { grid-column:1; grid-row:2; padding-top:0; }
.ai-role--clare .ai-role-statement { margin-top:36px!important; }
.ai-clare-portrait { grid-column:2; grid-row:1/span 2; margin:0; display:flex; justify-content:center; }
.ai-clare-portrait img { width:min(100%,420px); height:auto; object-fit:contain; }

@media(max-width:900px) {
 .ai-model-stack .ai-overview-step { width:var(--layer-width); grid-template-columns:minmax(0,1fr); padding:24px; }
 .ai-model-stack .ai-overview-desc { grid-column:1; grid-row:3; margin-top:12px; }
 .ai-role--clare .ai-role-grid { column-gap:32px; }
}
@media(max-width:700px) {
 .ai-model-stack .ai-overview-step { width:100%; }
 .ai-role--clare .ai-role-grid { grid-template-columns:minmax(0,1fr); }
 .ai-role--clare .ai-role-heading { grid-column:1; grid-row:1; }
 .ai-role--clare .ai-role-copy { grid-column:1; grid-row:2; }
 .ai-clare-portrait { grid-column:1; grid-row:3; margin-top:20px; }
 .ai-clare-portrait img { max-width:300px; }
 .ai-intro .ai-two-column,.ai-responsibility .ai-two-column { gap:26px; }
 .ai-ask-logo { width:112px; height:112px; }
}

.ai-role--clare .ai-role-copy .ai-role-statement {
 font-size:clamp(28px,3vw,42px); line-height:1.18; color:#435246;
}
@media(max-width:700px) {
 .ai-site .header-actions { gap:8px; }
 .ai-site .header-actions .button,.ai-site .header-actions .login-button { padding-inline:10px; font-size:12px; }
 .ai-site .site-header .brand img { max-width:112px; }
}

/* Refined, borderless pyramid and restored Ask Practisi editorial arrangement. */
.ai-page #aiIntroTitle { white-space:nowrap; }
.ai-overview-head h2 { font-size:clamp(36px,4vw,60px); }
.ai-model-stack { gap:18px; }
.ai-model-stack .ai-overview-step {
 border:0; border-radius:0; padding:30px 12%;
 clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);
 grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center;
}
.ai-model-stack .ai-overview-step::before { display:none; }
.ai-model-stack .ai-overview-stage { grid-column:1; grid-row:1; }
.ai-model-stack strong { grid-column:1; grid-row:2; }
.ai-model-stack .ai-overview-desc { grid-column:1; grid-row:3; margin-top:12px; max-width:42ch; }
.ai-role--ask .ai-role-grid {
 display:grid; width:var(--shell); grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.ai-role--ask .ai-role-copy { padding-top:clamp(47px,6vw,90px); max-width:59ch; }
@media(max-width:1100px) {
 .ai-role--ask .ai-role-grid { grid-template-columns:minmax(0,1fr); }
 .ai-role--ask .ai-role-copy { padding-top:0; }
}
@media(max-width:700px) {
 .ai-model-stack .ai-overview-step { width:100%; padding:26px 10%; }
 .ai-page #aiIntroTitle { font-size:clamp(30px,8.3vw,42px); }
}

/* Compact proportions for the role diagram and illustrative artwork. */
.ai-model-stack { max-width:740px; margin-top:42px; gap:12px; }
.ai-model-stack .ai-overview-step { padding:22px 11%; }
.ai-model-stack strong { grid-row:1; font-size:clamp(26px,2.3vw,34px); }
.ai-model-stack .ai-overview-desc { grid-row:2; margin-top:10px; font-size:15px; line-height:1.6; }
.ai-clare-portrait img { width:min(100%,350px); }
.ai-belief h2 { font-size:clamp(36px,4vw,60px); line-height:1.08; }
.ai-role--evaluator .ai-role-heading { max-width:none; }
.ai-score-demo { margin:64px 40px 0 auto; width:180px; }
@media(max-width:1100px) {
 .ai-score-demo { margin:32px 0 0 20px; }
}
.ai-score-ring { position:relative; display:grid; place-items:center; width:180px; height:180px; }
.ai-score-ring svg { display:block; width:100%; height:100%; overflow:visible; }
.ai-score-ring circle { fill:none; stroke-width:4; }
.ai-score-track { stroke:var(--line); }
.ai-score-progress { stroke:var(--green); stroke-linecap:round; transform:rotate(-90deg); transform-origin:90px 90px; }
.ai-score-value { position:absolute; color:var(--text); font-family:var(--font); font-size:44px; font-weight:500; font-variant-numeric:tabular-nums; }
@media(max-width:700px) {
 .ai-model-stack .ai-overview-step { padding:22px 10%; }
 .ai-clare-portrait img { max-width:260px; }
 .ai-belief h2 { font-size:clamp(36px,8.7vw,51px); }
 .ai-ask-logo { width:124px; height:124px; }
}

/* A compact interactive pyramid beside the opening reading column. */
.ai-intro .ai-two-column {
 width:var(--shell); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
 gap:clamp(40px,5vw,80px); align-items:center;
}
.ai-page #aiIntroTitle { white-space:normal; font-size:clamp(36px,4vw,60px); line-height:1.08; margin-bottom:30px; }
.ai-intro-copy .ai-prose { max-width:59ch; }
.ai-pyramid { width:min(100%,450px); justify-self:end; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ai-pyramid-cap {
 width:28%; aspect-ratio:36/35; background:var(--surface);
 clip-path:polygon(50% 0,100% 100%,0 100%);
 display:flex; justify-content:center; align-items:flex-end; padding-bottom:10px;
}
.ai-pyramid-cap img { width:60px; height:60px; object-fit:contain; }
.ai-pyramid .ai-model-stack { width:100%; max-width:none; margin:0; padding:0; list-style:none; gap:6px; }
.ai-pyramid .ai-overview-step {
 width:var(--layer-width); padding:0; display:block; background:var(--surface);
 clip-path:polygon(var(--top-inset) 0,calc(100% - var(--top-inset)) 0,100% 100%,0 100%);
 transition:background-color 220ms ease;
}
.ai-pyramid-link {
 min-height:105px; width:100%; padding:14px 0; display:flex; flex-direction:column;
 align-items:center; justify-content:center; text-align:center; text-decoration:none;
}
.ai-pyramid .ai-model-stack strong { font-size:22px; line-height:1.15; color:var(--text); transition:color 220ms ease; }
.ai-pyramid .ai-overview-desc { max-width:70%; font-size:12px; line-height:1.4; margin-top:6px; }
.ai-pyramid .ai-overview-step:hover,.ai-pyramid .ai-overview-step:focus-within { background:var(--green-soft); }
.ai-pyramid-link:hover strong,.ai-pyramid-link:focus-visible strong { color:var(--green); }
.ai-pyramid-link:focus-visible { outline:0; }
.ai-pyramid-link:focus-visible strong { text-decoration:underline; text-underline-offset:4px; }
.ai-role--ask .ai-ask-logo { width:164px; height:164px; margin:64px 40px 28px auto; }
html:has(.ai-site) { scroll-behavior:smooth; }
.ai-page h2[id] { scroll-margin-top:calc(var(--header-h) + 32px); }
@media(max-width:900px) {
 .ai-intro .ai-two-column { grid-template-columns:minmax(0,1fr); gap:44px; }
 .ai-pyramid { justify-self:center; width:min(100%,400px); }
}
@media(max-width:700px) {
 .ai-role--ask .ai-ask-logo { width:148px; height:148px; margin:32px 0 28px 20px; }
}
@media(min-width:701px) and (max-width:1100px) {
 .ai-role--ask .ai-ask-logo { margin:32px 0 28px 28px; }
}
@media(prefers-reduced-motion:reduce) {
 html:has(.ai-site) { scroll-behavior:auto; }
 .ai-pyramid .ai-overview-step,.ai-pyramid strong { transition:none; }
}

.ai-pyramid-cap { text-decoration:none; transition:background-color 220ms ease; }
.ai-pyramid-cap:hover,.ai-pyramid-cap:focus-visible { background:var(--green-soft); }
.ai-pyramid-cap:focus-visible { outline:0; }
.ai-pyramid-cap:focus-visible .ai-pyramid-cap-label { outline:2px solid var(--green); outline-offset:3px; border-radius:4px; }
@media(prefers-reduced-motion:reduce) { .ai-pyramid-cap { transition:none; } }

.ai-pyramid-cap-label { display:block; margin-bottom:12px; color:var(--text); font-family:var(--font); font-size:19px; font-weight:500; letter-spacing:.025em; transition:color 220ms ease; }
.ai-pyramid-cap:hover .ai-pyramid-cap-label,.ai-pyramid-cap:focus-visible .ai-pyramid-cap-label { color:var(--green); }
@media(prefers-reduced-motion:reduce) { .ai-pyramid-cap-label { transition:none; } }

.ai-hero .ai-hero-description { max-width:min(100%,860px); }
.ai-hero-description-line { display:block; }
@media(min-width:901px) { .ai-hero-description-line { white-space:nowrap; } }
@media(max-width:900px) { .ai-hero-description-line { display:inline; } }

/* Hover descriptions reveal within fixed layers, keeping the pyramid still. */
.ai-pyramid,.ai-pyramid strong,.ai-pyramid .ai-overview-desc { font-family:var(--font); }
.ai-pyramid-link { position:relative; height:116px; min-height:116px; }
.ai-pyramid .ai-model-stack strong {
 font-family:var(--font); font-size:18px; font-weight:500; line-height:1.2;
 transform:translateY(0); transition:color 220ms ease,transform 220ms ease;
}
.ai-pyramid .ai-overview-desc {
 position:absolute; top:calc(50% - 1px); left:15%; width:70%; max-width:none;
 margin:0; opacity:0; transform:translateY(4px); pointer-events:none;
 transition:opacity 220ms ease,transform 220ms ease;
}
.ai-pyramid .ai-overview-step:hover strong,
.ai-pyramid .ai-overview-step:focus-within strong { transform:translateY(-22px); }
.ai-pyramid .ai-overview-step:hover .ai-overview-desc,
.ai-pyramid .ai-overview-step:focus-within .ai-overview-desc { opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce) {
 .ai-pyramid strong,.ai-pyramid .ai-overview-desc { transition:none; }
}

.ai-pyramid-cap { transform:translateY(calc(var(--pyramid-spread,0) * -36px)); }
.ai-pyramid .ai-overview-step:nth-child(1) { transform:translateY(calc(var(--pyramid-spread,0) * -12px)); }
.ai-pyramid .ai-overview-step:nth-child(2) { transform:translateY(calc(var(--pyramid-spread,0) * 12px)); }
.ai-pyramid .ai-overview-step:nth-child(3) { transform:translateY(calc(var(--pyramid-spread,0) * 36px)); }
@media(prefers-reduced-motion:reduce) {
 .ai-pyramid-cap,.ai-pyramid .ai-overview-step { transform:none; }
}

/* Final CTA — align dead center */
.ai-page .final-cta-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

.ai-page .final-cta h2 {
  margin-inline: auto !important;
  text-align: center !important;
  max-width: 920px;
}

.ai-page .final-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
}

/* =========================================================
   SMALL SCREENS REFINEMENTS
========================================================= */
@media (max-width: 760px) {
  /* 1. Pyramid - smaller and more elegant */
  .ai-pyramid {
    width: min(100%, 300px) !important;
    margin-inline: auto !important;
  }
  .ai-pyramid-link {
    height: 84px !important;
    min-height: 84px !important;
    padding: 8px 0 !important;
  }
  .ai-pyramid .ai-model-stack strong {
    font-size: 15.5px !important;
  }
  .ai-pyramid-cap {
    width: 25% !important;
  }
  .ai-pyramid-cap-label {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  /* 2. Ask Practisi - sparkle image further right */
  .ai-role--ask .ai-ask-logo {
    display: block !important;
    width: 116px !important;
    height: 116px !important;
    margin: 20px 16px 24px auto !important;
  }

  /* 3. Clare - slightly smaller */
  .ai-clare-portrait img {
    max-width: 210px !important;
  }

  /* 4. The Evaluator - circle further right and slightly smaller */
  .ai-score-demo {
    margin: 20px 16px 20px auto !important;
    width: 140px !important;
  }
  .ai-score-ring {
    width: 140px !important;
    height: 140px !important;
  }
  .ai-score-ring svg {
    width: 140px !important;
    height: 140px !important;
  }
  .ai-score-value {
    font-size: 34px !important;
  }

  /* 5. A world shaped by AI - center aligned */
  .ai-belief {
    text-align: center !important;
  }
  .ai-belief-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 22px !important;
    margin-inline: auto !important;
  }
  .ai-belief h2 {
    text-align: center !important;
    margin-inline: auto !important;
    max-width: 700px !important;
  }
  .ai-belief h2 br {
    display: block !important;
  }
  .ai-belief p {
    text-align: center !important;
    margin-inline: auto !important;
    max-width: 48ch !important;
  }
}