/* Artificial Conscience landing page.
   Geometry mirrors the Figma frames Desktop - 14 (524:4404, 1440x9963) and
   Mobile - Artificial Conscience Landing (698:910, 402x12469.68). */

:root {
  --purple: #402ec7;
  --gold: #efc04b;
  --gold-soft: #f1c75f;
  --muted: #8e8e93;
  --card-body: #626262;
  --ink: #000;
  --bg-grey: #f2f2f7;
  --pill-bg: #f0efff;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--ink);
  /* The canvas paints its section bands past its own 1440 / 402 design width so
     every coloured band runs edge to edge; the page itself must not scroll
     sideways because of them (same container/bleed split as public/index.html,
     where a full-width <section> carries the colour and .shell caps the
     content). `clip` rather than `hidden`: hidden would make the page a scroll
     container, and the bands' left overflow then shifts the scroll origin —
     `clip` trims the same pixels without that side effect. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-text);
  font-optical-sizing: none;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
button { font: inherit; margin: 0; }

.ac-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-optical-sizing: auto;
  letter-spacing: 0;
}
.ac-display-reg { font-weight: 400; }
.ac-purple { color: var(--purple); }
.ac-gold { color: var(--gold); }
.ac-red { color: #f41c1c; }

/* ------------------------------------------------------------------ canvas */

.ac-canvas {
  position: relative;
  margin: 0 auto;
}

.ac-desktop {
  /* The frame is drawn with the ChatGPT panel open (592 px section); with no
     provider open the section ends 80 px under the tab row (-497 px), and an
     open panel sets the shift to its own height (ac-site.js). */
  --d-shift: -497px;
  width: 1440px;
  /* 10810 from the frame + the 52 px the sections under the examples move down. */
  height: calc(10862px + var(--d-shift));
  transition: height 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* Joseph's 09/09 frame put the examples' call-to-action pair 6 px into the
   research band; everything from that band down sits 52 px lower so the band
   begins 46 px under the buttons — the same room the mobile frame leaves
   (Curcio, 09/09). */
.d-below-examples { position: absolute; left: 0; top: 52px; width: 1440px; height: 0; }
.d-flow {
  /* No height of its own, so it never sits over the hero for pointer events. */
  position: absolute; left: 0; top: 0; width: 1440px; height: 0;
  transform: translateY(var(--d-shift));
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ac-mobile { display: none; }

/* --ac-scale / --ac-scale-m are set by ac-site.js; without it the canvas keeps its
   design width and the page scrolls horizontally instead of clipping. */
@media (max-width: 1439px) {
  .ac-desktop { zoom: var(--ac-scale, 1); }
}

@media (max-width: 1023px) {
  .ac-desktop { display: none; }
  /* Stacked sections: the height follows the hero's open/closed setup panel. */
  .ac-mobile { display: block; width: 402px; height: auto; }
}

@media (max-width: 480px) {
  .ac-mobile { zoom: var(--ac-scale-m, 1); }
}

.abs { position: absolute; }

/* ------------------------------------------------------------- band colours */

/* Content stays on the 1440 canvas; the colour behind it bleeds to the viewport
   edges on any wider screen. */
.band { position: absolute; left: 50%; width: 6000px; margin-left: -3000px; background: var(--bg-grey); }
.band-hero     { top: 0;    height: calc(1392px + var(--d-shift)); transition: height 0.35s cubic-bezier(0.2, 0.7, 0.3, 1); }
.band-research { top: 2920px; height: 1200px; } /* runs flush into the OpenAI band at 4120 — no page-colour gap between the two (frame has none) */
.band-openai   { top: 4120px; height: 820px; background: #12111a; }
/* Joseph's 16/09 frame: the Stanford band is 706 px tall (827:1795) and the
   white Barna rect starts exactly where it ends (frame 5698), so the wrapper the
   rest of the page rides on is the band's own height. */
.band-moloch   { top: 4940px; height: 706px; background: #f8f6fd; z-index: 1; }
/* .band-barna / .band-scripture live inside .d-after-openai and .band-once /
   .band-church inside .d-after-research, so all four keep the tops the frame
   had before the bands above them were inserted. */
.band-barna    { top: 4940px; height: 510px; background: #fff; }
.band-scripture{ top: 5450px; height: 590px; background: #f2f1f8; }
.band-once     { top: 4596px; height: 628px; }
.band-church   { top: 6012px; height: 1231px; }

/* ------------------------------------------------------------------ buttons */

.ac-actions { position: absolute; display: flex; align-items: center; gap: 16px; height: 46px; }

.btn-try {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 149px; height: 44px; padding: 9px 24px;
  background: var(--gold); border-radius: 29px; border: 0;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.btn-try img { width: 26px; height: 25px; object-fit: cover; }
.btn-try span { font-family: var(--font-sf); font-weight: 700; font-size: 22px; line-height: normal; color: #fff; white-space: nowrap; }

.btn-login {
  display: flex; align-items: center; justify-content: center;
  width: 122px; height: 46px; padding: 9px 33px;
  border: 1px solid var(--muted); border-radius: 29px; background: transparent;
  cursor: pointer;
}
.btn-login span { font-family: var(--font-sf); font-weight: 400; font-size: 22px; line-height: normal; color: var(--purple); white-space: nowrap; }

/* --------------------------------------------------------------- nav + hero */

.d-brand { left: 150px; top: 40px; width: 187px; height: 52px; }
.d-nav-actions { left: 1063px; top: 41px; }

.d-hero-title { left: 189.868px; top: 214.5px; width: 764px; height: 150px; font-size: 61px; line-height: normal; }
.d-hero-lead  { left: 189.868px; top: 379.5px; width: 686px; height: 29px; font-size: 24px; font-weight: 700; line-height: normal; }
.d-hero-sub   { left: 189.868px; top: 423.5px; width: 686px; height: 29px; font-size: 22px; line-height: normal; color: var(--muted); }
.d-hero-claim { left: 189.868px; top: 467.5px; width: 654px; height: 64px; font-size: 24px; font-weight: 700; line-height: normal; }
.d-hero-actions { left: 191px; top: 556px; }

.d-hero-preview {
  left: 912.868px; top: 138px; width: 337px; height: 470px;
  border: 3.811px solid #fff; border-radius: 8.892px;
  box-shadow: 0 0 16.133px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.d-hero-preview img { position: absolute; left: -0.02%; top: -0.1%; width: 99.91%; height: 152.23%; max-width: none; }

.d-patent { left: 963px; top: 628px; width: 235px; height: 67.916px; }
.d-patent-badge { left: 0; top: 0; width: 68px; height: 67.916px; overflow: hidden; }
.d-patent-badge img { position: absolute; left: -9.5%; top: -9.63%; width: 119.18%; height: 119.33%; max-width: none; }
.d-patent-label { left: 74px; top: 20px; width: 161px; font-size: 22px; line-height: normal; color: var(--muted); }

/* ------------------------------------------------------------- setup module */

.d-setup { left: 340px; top: 720px; width: 760px; height: 592px; }
.d-setup-title { left: 0; top: 0; width: 760px; height: 31px; text-align: center; font-size: 22px; font-weight: 700; line-height: normal; }

.setup { position: absolute; left: 0; top: 55px; width: 760px; }
.setup-tabs {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
}
.setup-tab {
  width: 116px; height: 40px; border-radius: 30px; border: 0; background: #fff;
  box-shadow: 0 0 3.25px rgba(0, 0, 0, 0.25);
  color: #000; font-size: 16px; line-height: normal; text-align: center; cursor: pointer;
  font-family: var(--font-text);
}
.setup-tab[aria-selected="true"] { background: var(--purple); color: #fff; cursor: default; }

.setup-panel { position: absolute; left: 0; top: 73px; width: 760px; background: #fff; border-radius: 20px; box-shadow: 0 0 37px 0 rgba(0, 0, 0, 0.25); }
.setup-panel[hidden] { display: none; }
.setup-steps { position: absolute; left: 26px; top: 31px; width: 695px; }
.setup-row { position: relative; }
.setup-bullet { position: absolute; left: 0; top: 0; width: 48px; height: 48px; }
.setup-bullet img { width: 48px; height: 48px; }
.setup-num {
  position: absolute; left: 23.5px; top: 11px; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 400; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-optical-sizing: auto; font-size: 20px; line-height: normal; color: var(--purple); text-align: center; white-space: nowrap;
}
.setup-text { position: absolute; font-size: 20px; line-height: normal; color: #000; }
.setup-note { position: absolute; font-size: 14px; line-height: normal; color: var(--muted); }
.setup-pill { position: absolute; height: 48px; background: var(--pill-bg); border: 1px solid var(--purple); border-radius: 44px; }
.setup-pill-label { position: absolute; font-size: 20px; line-height: normal; color: var(--purple); text-align: center; white-space: nowrap; transform: translateX(-50%); }
.setup-value { position: absolute; font-size: 16px; line-height: normal; color: var(--purple); }
.setup-copy {
  position: absolute; display: flex; align-items: center; justify-content: center;
  padding: 5px 18px; background: var(--purple); border: 0; border-radius: 23px;
  font-size: 16px; line-height: normal; color: #fff; white-space: nowrap; cursor: pointer;
  font-family: var(--font-text);
}
.setup-field { position: absolute; height: 54px; background: var(--pill-bg); border: 1px solid var(--purple); border-radius: 44px; }
.setup-field-row { position: absolute; display: flex; align-items: center; gap: 6px; }
.setup-field-row > span { font-size: 16px; line-height: normal; color: var(--purple); }

/* ------------------------------------------------------------- examples */

.d-examples { left: 81px; top: 1486px; width: 1268px; height: 1487px; }
.d-ex-title { left: 147px; top: 0; width: 984px; height: 156px; font-size: 61px; line-height: normal; text-align: center; }
.d-ex-sub { left: 292px; top: 168px; width: 694px; height: 60px; font-size: 24px; line-height: normal; text-align: center; color: var(--muted); }

.d-ex-viewport { left: 0; top: 326px; width: 1268px; height: 1060px; overflow: hidden; }
.d-ex-strip { position: absolute; left: 0; top: 0; width: 4166px; height: 1060px; transition: transform 0.35s ease; }

.ex-card {
  position: absolute; top: 24px; width: 368px; height: 1000px;
  background: #fff; border-radius: 22px; box-shadow: 0 0 29.9px 0 rgba(0, 0, 0, 0.25);
}
.ex-icon { position: absolute; left: 18px; top: 36px; width: 52px; height: 52px; }
.ex-icon img { position: absolute; left: 0; top: 0; width: 52px; height: 52px; }
/* The glyph exports are not square (23.4x31.5 up to 31x25) and carry
   preserveAspectRatio="none", so the square box has to keep their ratio. */
.ex-icon img.glyph { left: 10px; top: 10px; width: 32px; height: 32px; object-fit: contain; }
.ex-title {
  position: absolute; left: 84px; top: 48px; height: 28px;
  font-family: var(--font-display); font-weight: 700; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-optical-sizing: auto; font-size: 24px; line-height: normal; color: #000; white-space: nowrap;
}
.ex-title .lc { text-transform: lowercase; }
.ex-title .semi { font-weight: 600; }
.ex-shot {
  position: absolute; left: 18px; top: 342px; width: 323px; height: 630px;
  border-radius: 22px; overflow: hidden;
  transition: top 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), height 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ex-shot img { position: absolute; left: 0; top: -0.19px; width: 323px; height: 700px; max-width: none; transition: opacity 0.26s ease; }
.ex-shot .ex-shot-on { top: -34.65px; opacity: 0; }
.ex-card.is-on .ex-shot { top: 320px; height: 660px; }
.ex-card.is-on .ex-shot .ex-shot-off { opacity: 0; }
.ex-card.is-on .ex-shot .ex-shot-on { opacity: 1; }
/* AC badge row inside every example card (Figma 518:2441 OFF / 518:2420 ON):
   chip at 18, toggle at 79 (= chip + 61), state label at toggle + 47 (OFF) or
   toggle + 18 (ON), all 14 px below the row top. The mark is grey while the
   switch is OFF and gold while it is ON, cross-fading with the rest of the
   card. */
.ex-chip { position: absolute; left: 18px; top: 112px; width: 44px; height: 43px; }
.ex-chip img { position: absolute; left: 0; top: 0; width: 44px; height: 43px; transition: opacity 0.26s ease; }
.ex-chip .ex-chip-on { opacity: 0; }
.ex-card.is-on .ex-chip .ex-chip-off { opacity: 0; }
.ex-card.is-on .ex-chip .ex-chip-on { opacity: 1; }
/* Joseph 16/09: a red X over the grey mark while AC is off (Figma 875:977 / 875:981). */
.ex-chip .ex-chip-x {
  position: absolute; left: 3px; top: -14px; width: 47px; height: 70px;
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 59px; line-height: normal;
  color: #c72e2e; opacity: 0.5; pointer-events: none; transition: opacity 0.26s ease;
}
.ex-card.is-on .ex-chip .ex-chip-x { opacity: 0; }

.ex-switch {
  position: absolute; left: 79px; top: 112px; width: 80px; height: 40px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ex-switch:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 99px; }

.ex-lbl {
  position: absolute; top: 14px; width: 22px; height: 16px;
  font-family: var(--font-text); font-size: 10px; font-weight: 700; line-height: normal;
  transition: opacity 0.2s ease;
}
.ex-lbl-off { left: 47px; color: #c72e2e; }
.ex-lbl-on { left: 18px; color: #fff; opacity: 0; }
.ex-card.is-on .ex-lbl-off { opacity: 0; }
.ex-card.is-on .ex-lbl-on { opacity: 1; }

.ex-quote {
  position: absolute; width: 332px; /* left/top/height per card and state (EXAMPLES) */
  font-size: 18px; font-weight: 700; font-style: italic; line-height: normal;
  /* Google's Inter runs ~1% wider than the canvas's Inter at this size (the
     line "consensual non-manogamy generally" is 335 px here vs the 332 px
     box), which broke the lines earlier than the frame; -0.25 px of tracking
     puts every line back where the frame breaks it. */
  letter-spacing: -0.25px;
  transition: opacity 0.26s ease;
}
.ex-quote-off { color: var(--purple); }
.ex-quote-on { color: #f8be25; opacity: 0; }
.ex-card.is-on .ex-quote-off { opacity: 0; }
.ex-card.is-on .ex-quote-on { opacity: 1; }

.toggle { display: block; position: relative; width: 80px; height: 40px; border-radius: 99px; }
.toggle .bg {
  position: absolute; left: 0; top: 0; width: 80px; height: 40px; border-radius: 99px;
  background: #eceded; box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.28s ease, box-shadow 0.28s ease;
}
.toggle .handle { position: absolute; left: 2px; top: 2px; width: 36px; height: 36px; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.28, 1); }
.toggle .handle img { width: 50px; height: 61px; max-width: none; margin: -1px 0 0 -7px; }
/* ON: Background/On from the Toggle component — #f8be25 with the same inner
   shadow plus its own gold drop shadow; handle travels 80 - 2 - 36 = 42 - 2. */
.ex-card.is-on .toggle .bg { background: #f8be25; box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(248, 190, 37, 0.25); }
.ex-card.is-on .toggle .handle { transform: translateX(40px); }

.d-ex-nav { left: 50%; top: 256px; transform: translateX(-50%); width: 155px; height: 70px; }
.d-ex-actions { left: 490px; top: 1394px; }
.ex-nav-btn { position: absolute; top: 0; width: 70px; height: 70px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.ex-nav-btn .ring { position: absolute; left: 0; top: 0; width: 70px; height: 70px; }
.ex-nav-btn .chev { position: absolute; left: 5px; top: 5px; width: 60px; height: 60px; }
.ex-nav-btn .chev img { position: absolute; left: 31.23%; top: 37.48%; right: 31.23%; bottom: 40.61%; width: 37.54%; height: 21.91%; }
.ex-nav-prev { left: 0; }
.ex-nav-prev .chev { transform: rotate(-90deg); }
.ex-nav-next { left: 85px; }
.ex-nav-next .chev { transform: rotate(90deg); }

/* ------------------------------------------------------------- research */

.d-research { left: 144px; top: 2964px; width: 1151.784px; height: 983px; }
.d-res-title { left: 0; top: -2px; width: 598px; height: 296px; font-size: 61px; line-height: normal; }
.d-res-lead { left: 0; top: 312px; width: 611px; height: 60px; font-size: 24px; line-height: normal; color: var(--muted); }
.rank { position: absolute; left: 0; width: 408px; height: 64px; border-radius: 12px;
        border-left: 5px solid var(--purple); background: linear-gradient(to right, #fff, #fefefe);
        box-shadow: 0 0 14.6px 0 rgba(0, 0, 0, 0.25); }
.rank-1 { top: 392px; } .rank-2 { top: 468px; } .rank-3 { top: 544px; }
.rank-num { position: absolute; left: 21px; top: 16px; transform: translateX(-50%);
            font-family: var(--font-display); font-weight: 400; font-variation-settings: "SOFT" 0, "WONK" 1;
            font-optical-sizing: auto; font-size: 26px; line-height: normal; color: var(--purple); text-align: center; white-space: nowrap; }
.rank-label { position: absolute; left: 38px; top: 18px; height: 32px; font-size: 24px; line-height: normal; color: #000; white-space: nowrap; }
.d-res-coding { left: 0; top: 628px; width: 651px; height: 29px; font-size: 24px; font-weight: 700; font-style: italic; line-height: normal; }
.d-res-quote { left: 0; top: 677px; width: 576px; height: 60px; font-size: 24px; line-height: normal; color: var(--muted); }
.d-res-quote b { font-weight: 700; color: var(--purple); font-style: normal; }
.d-res-body { left: 0; top: 757px; width: 611px; height: 148px; font-size: 24px; line-height: normal; color: var(--muted); }
.d-res-link { left: 578px; top: 875px; width: 611px; height: 60px; font-size: 16px; line-height: normal; color: var(--muted); text-align: center; text-decoration: underline; }
.d-res-actions { left: 0; top: 920px; }

.d-res-chart { left: 616px; top: 126px; width: 535.784px; height: 731px; }
.d-res-chart-img { left: 0; top: 0; width: 536px; height: 726px; border-radius: 13.792px; box-shadow: 0 0 22.704px 0 rgba(0, 0, 0, 0.25); overflow: hidden; }
.d-res-chart-img img { position: absolute; left: -15.24%; top: -21.48%; width: 134.39%; height: 122.17%; max-width: none; }
.d-res-chart-mask { left: 124.132px; top: 44.56px; width: 320.409px; height: 65.779px; background: #fff; }
.d-res-chart-cap { left: 125.19px; top: 50.93px; width: 285.398px; font-family: "Times New Roman", Times, serif; font-size: 12.731px; line-height: normal; color: #000; }
.d-res-chart-cap i { font-style: normal; color: var(--purple); }

/* ------------------------------ openai / barna / scripture (Figma 14/09) */

/* Three bands Joseph added between the Harvard research and Guard Your Gates
   (Desktop - 14: 691:910, 691:927, 691:938). They add 2048 px to the frame, so
   everything from Guard down rides .d-after-research. */
.d-after-research { position: absolute; left: 0; top: 2048px; width: 1440px; height: 0; }

/* The Stanford / Moloch's Bargain band Joseph added 15/09 (827:1795) sits
   between the OpenAI band and Barna Trust and adds its height (706 px since the
   16/09 frame) to the page, so everything from Barna down rides
   .d-after-openai — the same idiom, one more zero-height wrapper, no existing
   coordinate rewritten. */
.d-after-openai { position: absolute; left: 0; top: 706px; width: 1440px; height: 0; }

.d-openai    { left: 0; top: 4120px; width: 1440px; height: 820px; }
.d-moloch    { left: 0; top: 4940px; width: 1440px; height: 706px; z-index: 1; }
.d-barna     { left: 0; top: 4940px; width: 1440px; height: 510px; }
.d-scripture { left: 0; top: 5450px; width: 1440px; height: 590px; }

/* The three source lines share one role across the bands. */
.d-src-link { font-size: 14px; line-height: normal; color: #777783; text-align: center; text-decoration: underline; }

/* openai alignment (691:910) */
.d-oa-eyebrow { left: 150px; top: 78px; width: 1140px; font-size: 15px; font-weight: 600; line-height: normal; color: var(--gold); text-align: center; }
.d-oa-title   { left: 214px; top: 123px; width: 1081px; font-size: 58px; line-height: 66px; color: #fff; text-align: center; }
.d-oa-byline  { left: 390px; top: 212px; width: 660px; font-size: 20px; line-height: normal; color: #aaa9b5; text-align: center; }
.d-oa-rule    { left: 300px; width: 840px; height: 1px; background: #34323f; }
.d-oa-rule-1  { top: 270px; }
.d-oa-rule-2  { top: 660px; }
.d-oa-mark    { top: 314px; width: 60px; font-size: 64px; line-height: normal; color: #d94a4a; }
.d-oa-quote   { top: 374px; width: 330px; font-size: 27px; line-height: 37px; color: #fff; }
.d-oa-label   { top: 600px; width: 330px; font-size: 14px; font-weight: 600; line-height: normal; color: #aaa9b5; }
.d-oa-col-1   { left: 155px; }
.d-oa-col-2   { left: 555px; }
.d-oa-col-3   { left: 955px; }
.d-oa-kicker  { left: 260px; top: 700px; width: 920px; font-size: 28px; line-height: normal; color: #fff; text-align: center; }
.d-oa-sub     { left: 260px; top: 750px; width: 920px; font-size: 17px; line-height: normal; color: #aaa9b5; text-align: center; }
.d-oa-source  { left: 608px; top: 781px; width: 225px; white-space: nowrap; }

/* stanford moloch bargain (827:1795) */
.d-ml-title    { left: 150px; top: 80px; width: 1140px; font-size: 44px; line-height: 53px; color: #1a1426; }
.d-ml-body     { left: 150px; top: 226px; width: 608px; font-size: 18px; line-height: 29px; color: #2e2938; }
/* The frame separates the paragraphs with one empty line of the same leading. */
.d-ml-body p + p { margin-top: 29px; }
.d-ml-photo    { left: 831px; top: 226px; width: 444px; height: 380px; border-radius: 20px; overflow: hidden; }
.d-ml-photo img { width: 444px; height: 380px; object-fit: cover; }
.d-ml-source   { left: 831px; top: 622px; width: 444px; font-size: 13px; line-height: 20px; color: #777783; text-align: center; text-decoration: underline; }
.d-ml-mark     { left: 150px; top: 592px; width: 44px; height: 44px; }
.d-ml-wordmark { left: 210px; top: 594px; width: 370px; font-size: 30px; line-height: 40px; color: var(--gold); }
/* The frame's text nodes carry word-break: break-word, so a token longer than
   the column wraps inside it instead of running past the band. */
.d-ml-title, .d-ml-body, .d-ml-wordmark { overflow-wrap: break-word; }

/* barna trust (691:927) */
.d-ba-eyebrow { left: 150px; top: 70px; width: 1140px; font-size: 15px; font-weight: 600; line-height: normal; color: #4030c7; text-align: center; }
.d-ba-title   { left: 125px; top: 119px; width: 1190px; font-size: 49px; line-height: 58px; color: #111; text-align: center; }
.d-ba-card    { top: 230px; width: 520px; height: 185px; border-radius: 22px; background: #f7f6fb; }
.d-ba-card-a  { left: 165px; }
.d-ba-card-b  { left: 755px; }
.d-ba-num     { top: 250px; line-height: normal; color: #4030c7; }
.d-ba-num-a   { left: 205px; width: 170px; font-size: 72px; }
.d-ba-num-b   { left: 795px; width: 190px; font-size: 64px; }
.d-ba-body    { top: 264px; font-size: 22px; line-height: 31px; color: #111; }
.d-ba-body-a  { left: 390px; width: 245px; }
.d-ba-body-b  { left: 1000px; width: 225px; }
.d-ba-gen     { left: 755px; top: 432px; width: 520px; font-size: 17px; font-weight: 600; line-height: normal; color: #777783; text-align: center; white-space: pre-wrap; }
.d-ba-source  { left: 150px; top: 465px; width: 1140px; }

/* scripture accuracy (691:938) */
.d-sc-card    { left: 442px; top: 41px; width: 555px; height: 183px; border-radius: 22px; background: #fff; }
.d-sc-num     { left: 474px; top: 102px; width: 250px; font-size: 48px; line-height: normal; color: #4030c7; }
.d-sc-label   { left: 724px; top: 98px; width: 245px; font-size: 30px; line-height: 31px; color: #111; }
.d-sc-quote   { left: 260px; top: 250px; width: 920px; font-size: 34px; line-height: 44px; color: #111; text-align: center; }
.d-sc-attrib  { left: 300px; top: 408px; width: 840px; font-size: 16px; font-weight: 600; line-height: normal; color: #777783; text-align: center; }
.d-sc-rule    { left: 471px; top: 459px; width: 500px; height: 1px; background: #d9d7e6; }
.d-sc-close   { left: 260px; top: 477px; width: 920px; font-size: 20px; font-weight: 600; line-height: normal; color: #111; text-align: center; }
.d-sc-source  { left: 150px; top: 554px; width: 1140px; }

/* ------------------------------------------------------------- guard */

.d-guard-img { left: 144px; top: 4078px; width: 488px; height: 436px; border-radius: 10px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25); overflow: hidden; }
.d-guard-img img { width: 488px; height: 436px; object-fit: cover; }
.d-guard-title { left: 667px; top: 4062px; width: 608px; height: 75px; font-size: 61px; line-height: normal; }
.d-guard-lead { left: 667px; top: 4151px; width: 608px; height: 61px; font-size: 24px; font-weight: 500; line-height: normal; }
.d-guard-claim { left: 667px; top: 4226px; width: 608px; height: 36px; font-size: 24px; font-weight: 700; font-style: italic; line-height: normal; }
.d-guard-body { left: 667px; top: 4276px; width: 608px; height: 120px; font-size: 24px; line-height: normal; color: var(--muted); }
.d-guard-close { left: 667px; top: 4410px; width: 608px; height: 60px; font-size: 24px; font-weight: 700; font-style: italic; line-height: normal; }
.d-guard-actions { left: 667px; top: 4484px; }

/* ------------------------------------------------------------- set it once */

.d-once-title { left: 228px; top: 4636px; width: 984px; height: 75px; font-size: 61px; line-height: normal; text-align: center; }
.d-once-sub { left: 228px; top: 4726px; width: 984px; height: 60px; font-size: 24px; line-height: normal; text-align: center; color: var(--muted); }
.d-once-foot { left: 240px; top: 5158px; width: 960px; height: 36px; font-size: 24px; font-weight: 700; font-style: italic; line-height: normal; text-align: center; }

.once-card {
  position: absolute; top: 4820px; width: 270px; height: 304px;
  background: #fff; border-radius: 16px; border-top: 3px solid var(--purple);
  box-shadow: 0 0 11.4px rgba(0, 0, 0, 0.25);
}
.once-card .inset { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 10.4px 0 rgba(0, 0, 0, 0.25); pointer-events: none; }
.once-1 { left: 144px; } .once-2 { left: 438px; } .once-3 { left: 732px; } .once-4 { left: 1026px; }
.once-icon { position: absolute; width: 56px; height: 56px; }
.once-icon img.ring { position: absolute; left: 0; top: 0; width: 56px; height: 56px; }
.once-icon img.glyph { position: absolute; left: 7px; top: 7px; width: 42px; height: 42px; object-fit: contain; }
.once-title {
  position: absolute; font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1; font-optical-sizing: auto;
  font-size: 24px; line-height: normal; color: #000;
}
.once-body { position: absolute; font-size: 18px; line-height: normal; color: var(--card-body); }

/* ------------------------------------------------------------- dovely */

.d-dovely-art-l { left: 0; top: 5270px; width: 526px; height: 478px; opacity: 1; pointer-events: none; }
.d-dovely-art-r { left: 914px; top: 5464px; width: 526px; height: 478px; transform: rotate(180deg); pointer-events: none; }
.d-dovely-art-l img, .d-dovely-art-r img { width: 526px; height: auto; }
.d-dovely-title { left: 228px; top: 5364px; width: 984px; height: 162px; font-size: 61px; line-height: normal; text-align: center; }
.d-dovely-p1 { left: 228px; top: 5539px; width: 984px; height: 60px; font-size: 24px; line-height: normal; text-align: center; }
.d-dovely-p2 { left: 228px; top: 5623px; width: 984px; height: 60px; font-size: 24px; line-height: normal; text-align: center; }
.d-dovely-p3 { left: 228px; top: 5707px; width: 984px; height: 32px; font-size: 24px; line-height: normal; text-align: center; }
.d-dovely-p4 { left: 228px; top: 5763px; width: 984px; height: 32px; font-size: 24px; font-style: italic; line-height: normal; text-align: center; }
.d-dovely-actions { left: 576.5px; top: 5818px; }

/* ------------------------------------------------------------- church */

.d-church-title { left: 263px; top: 6044px; width: 914px; height: 160px; font-size: 61px; line-height: normal; text-align: center; }
.d-church-1 { left: 141px; top: 6221px; width: 1158px; height: 29px; font-size: 24px; line-height: normal; text-align: center; color: var(--muted); }
.d-church-2 { left: 141px; top: 6266px; width: 1158px; height: 87px; font-size: 24px; line-height: normal; text-align: center; color: var(--muted); }
.d-church-3 { left: 141px; top: 6369px; width: 1158px; height: 29px; font-size: 24px; font-style: italic; line-height: normal; text-align: center; color: var(--muted); }

.church-card { position: absolute; left: 475px; width: 490px; height: 187px; }
.church-card .plate { position: absolute; left: 0; top: 0; width: 490px; height: 187px; background: #fff;
                      border-top: 4px solid var(--purple); border-radius: 13px; box-shadow: 0 0 14.8px 0 rgba(0, 0, 0, 0.25); }
.church-card.is-purple .plate { background: var(--purple); border-top-color: #fff; }
.church-card .icon { position: absolute; left: 213px; top: 15px; width: 64px; height: 64px; }
.church-card .eyebrow { position: absolute; top: 94px; height: 18px; font-size: 16px; line-height: normal; text-align: center; color: var(--gold); }
.church-card .label { position: absolute; font-size: 24px; font-weight: 600; line-height: normal; text-align: center; color: #000; }
.church-a { top: 6439px; }
.church-b { top: 6686px; }
.church-c { top: 6933px; }
.church-arrow { position: absolute; left: 720px; width: 32px; transform: translate(-50%, -50%) rotate(90deg); }
.church-arrow img { width: 32px; height: auto; }
.church-arrow-1 { top: 6656px; }
.church-arrow-2 { top: 6903px; }
.d-church-actions { left: 576.5px; top: 7161px; }

/* ------------------------------------------------------------- closing */

.d-close-title { left: 142px; top: 7313px; width: 807px; height: 225px; font-size: 61px; line-height: normal; }
.d-close-lead { left: 142px; top: 7562px; width: 731px; height: 63px; font-size: 24px; font-weight: 600; line-height: normal; }
.d-close-claim { left: 142px; top: 7649px; width: 774px; height: 29px; font-size: 24px; font-weight: 700; font-style: italic; line-height: normal; }
.d-close-body { left: 142px; top: 7702px; width: 711px; height: 58px; font-size: 24px; line-height: normal; color: #141414; }
.d-close-actions { left: 142px; top: 7784px; }
.d-close-img { left: 935px; top: 7364px; width: 347px; height: 415px; border-radius: 10px; overflow: hidden; }
.d-close-img img { width: 347px; height: 415px; object-fit: cover; }

/* ------------------------------------------------------------------ a11y */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================== mobile (Figma 530:844) === */

.ac-mobile { width: 402px; }

/* Every section paints its band edge to edge whatever the viewport: the
   band is a 100vmax box-shadow in the section's own colour, clipped to the
   section's height, so it is part of the section's own paint and no
   stacking or ancestor background can hide it (Curcio, 09/09: "o bg da
   section é sempre side to side, não importa tamanho"). */
.m-sec {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 402px;
  box-shadow: 0 0 0 100vmax var(--band, transparent);
  clip-path: inset(0 -100vmax);
}

/* hero -------------------------------------------------------------------- */
/* 1119 px ends 31 px under the tab row; an open panel adds its height + the
   14 px tab gap (ac-site.js), which is the frame's 1573 px for ChatGPT. */
.m-hero { --m-panel: 0px; height: calc(1119px + var(--m-panel)); background: #f8f8fc; --band: #f8f8fc; display: block; transition: height 0.35s cubic-bezier(0.2, 0.7, 0.3, 1); }
.m-hero > * { position: absolute; }
.m-nav { left: 20px; top: 20px; display: flex; align-items: center; justify-content: space-between; width: 362px; height: 52px; }
.m-brand { width: 127.16px; height: 35.36px; }
.m-login-pill {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 40px; background: #fff; border: 1px solid #c7c2e5; border-radius: 20px;
  font-size: 14px; font-weight: 600; line-height: normal; color: #3021bd;
}
.m-hero-title { left: 20px; top: 128px; width: 362px; height: 147px; font-size: 36px; line-height: 42px; text-align: center; }
.m-hero-lead { left: 20px; top: 289px; width: 362px; height: 44px; font-size: 16px; font-weight: 700; line-height: normal; text-align: center; }
.m-hero-sub { left: 20px; top: 347px; width: 362px; height: 30px; font-size: 16px; line-height: normal; text-align: center; color: var(--muted); }
.m-hero-claim { left: 26px; top: 391px; width: 350px; height: 54px; font-size: 16px; font-weight: 700; line-height: 23px; text-align: center; }
.m-sec .m-actions { position: relative; left: auto; top: auto; }
/* Frame 79 sits at 459 with the buttons 7 px inside it (530:844). */
.m-hero .m-actions { position: absolute; left: 57.5px; top: 466px; }
.m-preview {
  left: 81px; top: 533px; width: 240px; height: 335px;
  border: 3.811px solid #fff; border-radius: 8.892px;
  box-shadow: 0 0 16.133px 0 rgba(0, 0, 0, 0.25); overflow: hidden;
}
.m-preview img { position: absolute; left: -0.02%; top: -0.1%; width: 99.91%; height: 152.23%; max-width: none; }
.m-patent { left: 83.5px; top: 882px; width: 235px; height: 67.916px; }
.m-patent-badge { position: absolute; left: 13.5px; top: 10px; width: 48px; height: 48px; overflow: hidden; }
.m-patent-badge img { position: absolute; left: -9.5%; top: -9.63%; width: 119.18%; height: 119.33%; max-width: none; }
.m-patent-label { position: absolute; left: 74px; top: 20px; width: 161px; font-size: 22px; line-height: normal; color: var(--muted); }
.m-setup-title { left: 21.5px; top: 996.92px; width: 359px; height: 33px; font-size: 20px; font-weight: 600; line-height: normal; text-align: center; }

.m-setup { left: 20px; top: 1043.92px; width: 362px; }
.m-tabs { display: flex; gap: 6px; align-items: flex-start; width: 362px; height: 44px; margin-bottom: 14px; }
.m-tab {
  width: 84px; height: 44px; border-radius: 22px; background: #fff; border: 1px solid #d6d6e0;
  color: #1f1f26; font-family: var(--font-text); font-size: 13px; line-height: normal; cursor: pointer;
}
.m-tab[aria-selected="true"] { background: #4029d1; border-color: #4029d1; color: #fff; cursor: default; }
.m-panel {
  width: 362px; background: #fff; border-radius: 16px; padding: 20px 16px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.12);
}
.m-panel[hidden] { display: none; }
.m-step { display: flex; gap: 12px; align-items: flex-start; width: 330px; }
.m-bullet {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 15px; background: #ebe5ff;
  font-family: var(--font-display); font-weight: 400; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-optical-sizing: auto; font-size: 17px; line-height: normal; color: #4029d1;
}
.m-step-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: 288px; }
.m-step-text { width: 288px; height: 56px; font-size: 15px; line-height: 21px; color: #000; }
.m-pill {
  display: flex; align-items: center; justify-content: center;
  width: 288px; height: 40px; padding: 0 14px; border-radius: 20px;
  background: #f9f7ff; border: 1.25px solid #4f2ed1;
  font-size: 13px; font-weight: 600; line-height: 18px; color: #4f2ed1; white-space: nowrap;
}
.m-note { font-size: 12px; line-height: normal; color: #858594; white-space: nowrap; }
.m-label { width: 288px; font-size: 13px; line-height: 18px; color: #1f1c2e; }
.m-field-label { width: 288px; font-size: 12px; font-weight: 600; line-height: 16px; color: #1f1c2e; }
.m-copy {
  display: flex; align-items: center; justify-content: space-between;
  width: 288px; padding: 6px 6px 6px 12px; border-radius: 18px;
  background: #f9f7ff; border: 1.25px solid #4f2ed1;
}
.m-copy p { width: 204px; font-size: 12px; font-weight: 500; line-height: 16px; color: #4f2ed1; }
.m-copy-btn {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 56px; height: 32px; border: 0; border-radius: 16px; background: #4f2ed1;
  font-family: var(--font-text); font-size: 12px; font-weight: 600; line-height: 16px; color: #fff; cursor: pointer;
}

/* examples ---------------------------------------------------------------- */
.m-examples { height: 1454px; background: #fff; --band: #fff; }
.m-ex-title { position: absolute; left: 20px; top: 44px; width: 362px; height: 112px; font-size: 30px; line-height: 35px; text-align: center; }
.m-ex-sub { position: absolute; left: 31px; top: 170px; width: 340px; height: 48px; font-size: 14px; line-height: normal; text-align: center; color: var(--muted); }
/* Clip only along the carousel axis: the card's shadow (30 px) shows above
   and below like the frame; sideways it ends at the canvas edge as in Figma. */
.m-ex-viewport { position: absolute; left: 0; top: 330px; width: 402px; height: 1000px; overflow-x: clip; overflow-y: visible; }
.m-ex-strip { position: absolute; left: 0; top: 0; height: 1000px; transition: transform 0.35s ease; }
.m-ex-strip .ex-card { top: 0; }
.m-ex-nav { position: absolute; left: 123.5px; top: 232px; width: 155px; height: 70px; }
.m-ex-actions { position: absolute; left: 57.5px; top: 1362.5px; }

/* research ---------------------------------------------------------------- */
.m-research { height: 1337.76px; background: #f8f8fc; --band: #f8f8fc; }
.m-res-title { position: absolute; left: 20px; top: 44px; width: 362px; height: 156px; font-size: 34px; line-height: 39px; }
.m-res-lead { position: absolute; left: 20px; top: 216px; width: 362px; height: 84px; font-size: 15px; line-height: 22px; color: var(--muted); }
.m-rank {
  position: absolute; left: 25.56px; width: 350.88px; height: 55.04px; border-radius: 10.32px;
  border-left: 4.3px solid var(--purple); background: linear-gradient(to right, #fff, #fefefe);
  box-shadow: 0 0 12.556px 0 rgba(0, 0, 0, 0.25);
}
.m-rank-1 { top: 316px; } .m-rank-2 { top: 381.36px; } .m-rank-3 { top: 446.72px; }
.m-rank-num {
  position: absolute; left: 17.9px; top: 13.76px; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 400; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-optical-sizing: auto; font-size: 22.36px; line-height: normal; color: var(--purple); text-align: center; white-space: nowrap;
}
.m-rank-label { position: absolute; left: 32.68px; top: 15.48px; height: 27.52px; font-size: 20.64px; line-height: normal; color: #000; white-space: nowrap; }
.m-res-coding { position: absolute; left: 20px; top: 517.76px; width: 362px; height: 30px; font-size: 16px; font-weight: 700; font-style: italic; line-height: 23px; }
.m-res-quote { position: absolute; left: 20px; top: 563.76px; width: 362px; height: 76px; font-size: 15px; line-height: 22px; color: var(--muted); }
.m-res-quote b { font-weight: 700; color: var(--purple); }
.m-res-body { position: absolute; left: 20px; top: 655.76px; width: 362px; height: 176px; font-size: 15px; line-height: 22px; color: var(--muted); }
.m-res-chart { position: absolute; left: 51px; top: 847.76px; width: 300px; height: 406px; border-radius: 13.792px; box-shadow: 0 0 22.704px 0 rgba(0, 0, 0, 0.25); overflow: hidden; }
.m-res-chart img { position: absolute; left: -15.24%; top: -21.48%; width: 134.39%; height: 122.17%; max-width: none; }
.m-res-link { position: absolute; left: 31px; top: 1269.76px; width: 340px; height: 24px; font-size: 14px; line-height: 20px; text-align: center; color: var(--muted); text-decoration: underline; }

/* openai / barna / scripture (Figma 698:1032, 698:1048, 698:1059) ---------- */
.m-openai { height: 1367px; background: #12111a; --band: #12111a; }
.m-moloch { height: 1131px; background: #f8f6fd; --band: #f8f6fd; }
.m-barna { height: 796px; background: #fff; --band: #fff; }
.m-scripture { height: 843px; background: #f2f2f8; --band: #f2f2f8; }
.m-openai > *, .m-moloch > *, .m-barna > *, .m-scripture > * { position: absolute; }

.m-src-link { font-size: 13px; line-height: 18px; text-decoration: underline; }

.m-oa-eyebrow { left: 28px; top: 72px; width: 346px; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--gold); }
.m-oa-title { left: 28px; top: 134px; width: 346px; font-size: 42px; line-height: 48px; color: #fff; }
.m-oa-byline { left: 28px; top: 295.24px; width: 346px; font-size: 15px; line-height: 22px; color: #adadbd; }
.m-oa-mark { left: 28px; width: 40px; font-size: 46px; line-height: 46px; color: #d94a4a; }
.m-oa-quote { left: 62px; width: 312px; font-size: 23px; line-height: 32px; color: #fff; }
.m-oa-label { left: 62px; width: 312px; font-size: 11px; font-weight: 600; line-height: 16px; color: #adadbd; }
.m-oa-mark-1 { top: 352px; } .m-oa-quote-1 { top: 360px; } .m-oa-label-1 { top: 540.24px; }
.m-oa-mark-2 { top: 598.24px; } .m-oa-quote-2 { top: 606.24px; } .m-oa-label-2 { top: 758.24px; }
.m-oa-mark-3 { top: 824.24px; } .m-oa-quote-3 { top: 832.24px; } .m-oa-label-3 { top: 1046.24px; }
.m-oa-kicker { left: 28px; top: 1104.24px; width: 346px; font-size: 28px; line-height: 36px; color: #fff; }
.m-oa-sub { left: 28px; top: 1199.24px; width: 346px; font-size: 16px; line-height: 24px; color: #adadbd; }
.m-oa-source { left: 28px; top: 1274.24px; width: 346px; color: #adadbd; }

/* stanford moloch bargain (822:1501) */
.m-ml-title    { left: 28px; top: 56px; width: 346px; font-size: 28px; line-height: 39px; color: #1a1426; }
.m-ml-photo    { left: 28px; top: 197px; width: 346px; height: 300px; border-radius: 18px; overflow: hidden; }
.m-ml-photo img { width: 346px; height: 300px; object-fit: cover; }
.m-ml-source   { left: 28px; top: 521px; width: 346px; font-size: 12px; line-height: 18px; color: #777783; text-decoration: underline; }
.m-ml-body     { left: 28px; top: 563px; width: 346px; font-size: 17px; line-height: 29px; color: #2e2938; }
.m-ml-body p + p { margin-top: 29px; }
.m-ml-mark     { left: 28px; top: 1053px; width: 36px; height: 36px; }
.m-ml-wordmark { left: 76px; top: 1051px; width: 298px; font-size: 26px; line-height: 32px; color: var(--gold); }
.m-ml-title, .m-ml-body, .m-ml-wordmark { overflow-wrap: break-word; }

.m-ba-eyebrow { left: 28px; top: 64px; width: 346px; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--purple); }
.m-ba-title { left: 28px; top: 118px; width: 346px; font-size: 37px; line-height: 44px; color: #12111a; }
.m-ba-card { border-radius: 22px; background: #f6f6fa; overflow: hidden; }
.m-ba-card-a { left: 28px; top: 300.24px; width: 342px; height: 142px; }
.m-ba-card-b { left: 26px; top: 474.24px; width: 346px; height: 139px; }
.m-ba-card > * { position: absolute; }
.m-ba-num { line-height: normal; color: var(--purple); }
.m-ba-card-a .m-ba-num { left: 22px; top: 20px; width: 110px; font-size: 52px; line-height: 58px; }
.m-ba-card-b .m-ba-num { left: 22px; top: 24px; width: 115px; font-size: 40px; line-height: 48px; }
.m-ba-body { font-size: 16px; line-height: 23px; color: #12111a; }
.m-ba-card-a .m-ba-body { left: 135px; top: 26px; width: 185px; }
.m-ba-card-b .m-ba-body { left: 142px; top: 27px; width: 178px; }
.m-ba-gen { left: 28px; top: 657.24px; width: 346px; font-size: 15px; font-weight: 600; line-height: 22px; color: #12111a; white-space: pre-wrap; }
.m-ba-source { left: 28px; top: 722.24px; width: 346px; color: #6b6b7a; }

.m-sc-card { left: 28px; top: 44.24px; width: 341px; height: 152px; border-radius: 22px; background: #fff; }
.m-sc-num { left: 54px; top: 100.24px; width: 153px; font-size: 29px; line-height: normal; color: #4030c7; }
.m-sc-label { left: 207px; top: 86.24px; width: 151px; font-size: 18px; line-height: 31px; color: #111; }
.m-sc-quote { left: 28px; top: 238.24px; width: 346px; font-size: 30px; line-height: 39px; color: #12111a; }
.m-sc-attrib { left: 28px; top: 504.24px; width: 346px; font-size: 14px; font-weight: 600; line-height: 21px; color: #59596b; }
.m-sc-close { left: 28px; top: 578.24px; width: 346px; font-size: 20px; font-weight: 600; line-height: normal; color: #111; }
.m-sc-source { left: 28px; top: 777.24px; width: 346px; color: #6b6b7a; }

/* guard ------------------------------------------------------------------- */
.m-guard { height: 920px; background: #fff; --band: #fff; padding: 44px 20px; gap: 14px; }
.m-guard-img { width: 340px; height: 304px; border-radius: 10px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25); overflow: hidden; }
.m-guard-img img { width: 340px; height: 304px; object-fit: cover; }
.m-guard-title { width: 362px; height: 52px; font-size: 34px; line-height: 40px; }
.m-guard-lead { width: 362px; height: 88px; font-size: 15px; font-weight: 500; line-height: 22px; }
.m-guard-claim { width: 362px; height: 52px; font-size: 16px; font-weight: 700; font-style: italic; line-height: 23px; }
.m-guard-body { width: 362px; height: 146px; font-size: 15px; line-height: 22px; color: var(--muted); }
.m-guard-close { width: 362px; height: 60px; font-size: 16px; font-weight: 700; font-style: italic; line-height: 23px; }

/* set it once ------------------------------------------------------------- */
.m-once { height: 1620px; background: #f8f8fc; --band: #f8f8fc; padding: 44px 20px; gap: 18px; }
.m-once-title { width: 362px; height: 84px; font-size: 32px; line-height: 38px; text-align: center; }
.m-once-sub { width: 350px; height: 70px; font-size: 15px; line-height: 22px; text-align: center; color: var(--muted); }
.m-once-card { position: relative; top: auto; left: auto; flex: 0 0 auto; }
.m-once-foot { width: 350px; height: 54px; font-size: 15px; font-weight: 700; font-style: italic; line-height: 22px; text-align: center; }

/* dovely ------------------------------------------------------------------ */
.m-dovely { height: 614px; background: #fff; --band: #fff; padding: 44px 20px; gap: 16px; }
.m-dov-title { width: 362px; height: 126px; font-size: 34px; line-height: 40px; text-align: center; }
.m-dov-p1 { width: 362px; height: 76px; font-size: 15px; line-height: 22px; text-align: center; }
.m-dov-p2 { width: 362px; height: 94px; font-size: 15px; line-height: 22px; text-align: center; }
.m-dov-p3 { width: 362px; height: 52px; font-size: 16px; line-height: 23px; text-align: center; }
.m-dov-p4 { width: 362px; height: 52px; font-size: 16px; font-style: italic; line-height: 23px; text-align: center; }

/* church ------------------------------------------------------------------ */
.m-church { height: 1013.92px; background: #f8f8fc; --band: #f8f8fc; padding: 44px 20px; gap: 16px; }
.m-ch-title { width: 362px; height: 152px; font-size: 32px; line-height: 38px; text-align: center; }
.m-ch-p1 { width: 362px; height: 58px; font-size: 17px; line-height: 24px; text-align: center; color: var(--muted); }
.m-ch-p2 { width: 362px; height: 124px; font-size: 15px; line-height: 22px; text-align: center; color: var(--muted); }
.m-ch-p3 { width: 362px; height: 30px; font-size: 17px; font-style: italic; line-height: 24px; text-align: center; color: var(--muted); }
.m-ch-step { position: relative; flex: 0 0 auto; width: 352.8px; height: 134.64px; }
.m-ch-step .plate {
  position: absolute; left: 0; top: 0; width: 352.8px; height: 134.64px; background: #fff;
  border-top: 2.88px solid var(--purple); border-radius: 9.36px; box-shadow: 0 0 10.656px 0 rgba(0, 0, 0, 0.25);
}
.m-ch-step.is-purple .plate { background: var(--purple); border-top-color: #fff; }
.m-ch-step .icon { position: absolute; left: 153.36px; top: 10.8px; width: 46.08px; height: 46.08px; }
.m-ch-step .eyebrow { position: absolute; top: 67.68px; height: 12.96px; font-size: 11.52px; line-height: normal; text-align: center; color: var(--gold); }
.m-ch-step .label { position: absolute; font-size: 17.28px; font-weight: 600; line-height: normal; text-align: center; color: #000; }

/* closing ----------------------------------------------------------------- */
.m-closing { height: 931px; background: #fff; --band: #fff; padding: 48px 20px 56px; gap: 16px; }
.m-cl-title { width: 362px; height: 164px; font-size: 34px; line-height: 40px; }
.m-cl-lead { width: 362px; height: 76px; font-size: 16px; font-weight: 600; line-height: 23px; }
.m-cl-img { width: 300px; height: 359px; border-radius: 10px; overflow: hidden; }
.m-cl-img img { width: 300px; height: 359px; object-fit: cover; }
.m-cl-claim { width: 362px; height: 30px; font-size: 18px; font-weight: 700; font-style: italic; line-height: 25px; }
.m-cl-body { width: 362px; height: 72px; font-size: 15px; line-height: 22px; color: #141414; }

/* ================================================== interaction & motion === */
/* Resting geometry comes from Figma; the shared 90% press state was requested
   by Curcio. Reduced motion keeps a color cue without scaling or transitions. */

/* --- connector links in the setup panels ---------------------------------- */
.setup-pill-link { display: block; cursor: pointer; }
.setup-pill-label { pointer-events: none; }
.setup-pill-link .setup-pill-label { left: 50%; top: 11px; }
.setup-inline-link { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.m-pill-link { cursor: pointer; text-decoration: none; }

/* --- buttons -------------------------------------------------------------- */
.btn-try, .btn-login, .m-login-pill, .setup-tab, .m-tab, .m-copy-btn, .m-pill-link, .ac-connected-close { position: relative; }
.ac-pressable {
  --press-duration: 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--press-duration) ease-out, background-color 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.ac-pressable img { -webkit-user-drag: none; }
.ac-pressable:focus-visible, .setup-inline-link:focus-visible {
  outline: 2px solid var(--purple); outline-offset: 4px;
}
/* Inverse scaling keeps the transparent hit region at its original size
   through both halves of the animation, including release near an edge. */
.ac-pressable:not(.ex-nav-btn)::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  transform: scale(1); transition: transform var(--press-duration) ease-out;
}
.ac-pressable.is-pressed:not(:disabled) { --press-duration: 0.07s; transform: scale(0.9); }
.ac-pressable.is-pressed:not(:disabled)::after { transform: scale(1.111112); }
.ex-nav-btn { border-radius: 50%; }
.ex-nav-btn:disabled { cursor: default; opacity: 0.35; }
.ex-nav-btn .ring, .ex-nav-btn .chev {
  pointer-events: none; transition: transform var(--press-duration) ease-out;
}
/* Arrows keep a fixed 70px button; only the ring and glyph move. */
.ex-nav-btn.is-pressed:not(:disabled) { transform: none; }
.ex-nav-btn.is-pressed:not(:disabled) .ring { transform: scale(0.9); }
.ex-nav-prev.is-pressed:not(:disabled) .chev { transform: rotate(-90deg) scale(0.9); }
.ex-nav-next.is-pressed:not(:disabled) .chev { transform: rotate(90deg) scale(0.9); }

@media (hover: hover) and (pointer: fine) {
  .setup-pill-link:hover { background: #e7e4ff; box-shadow: 0 2px 10px rgba(64, 46, 199, 0.18); }
  .m-pill-link:hover { background: #efeaff; box-shadow: 0 2px 8px rgba(79, 46, 209, 0.18); }
  .btn-try:hover { box-shadow: 0 6px 6px rgba(0, 0, 0, 0.28); }
  .btn-login:hover { background: rgba(64, 46, 199, 0.06); border-color: var(--purple); }
  .m-login-pill:hover { background: #f4f2ff; border-color: #4029d1; }
  .setup-copy:hover, .m-copy-btn:hover { background: #3324a8; }
  .ex-nav-btn:hover:not(:disabled) { background: rgba(64, 46, 199, 0.06); }
  .setup-tab:hover[aria-selected="false"] { background: #f2f0ff; }
  .m-tab:hover[aria-selected="false"] { background: #f4f2ff; }
  .ac-connected-close:hover { color: var(--ink); }
}

/* --- setup tabs: nothing is open until a tab is picked -------------------- */
.setup-tab[aria-selected="true"], .m-tab[aria-selected="true"] { cursor: pointer; }

.setup-panel, .m-panel {
  opacity: 0;
  transform: translateY(-8px) scaleY(0.97);
  transform-origin: top center;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.setup-panel.is-open, .m-panel.is-open { opacity: 1; transform: none; }

/* --- carousels ------------------------------------------------------------ */
.d-ex-strip, .m-ex-strip { transition: transform 0.42s cubic-bezier(0.22, 0.72, 0.24, 1); will-change: transform; }
.d-ex-viewport, .m-ex-viewport { touch-action: pan-y pinch-zoom; cursor: grab; }
.d-ex-viewport.is-grabbing, .m-ex-viewport.is-grabbing { cursor: grabbing; }
.d-ex-strip.is-dragging, .m-ex-strip.is-dragging { transition: none; }
.d-ex-viewport.is-dragging a, .m-ex-viewport.is-dragging a { pointer-events: none; }

/* --- section reveal on scroll -------------------------------------------- */
.ac-reveal { opacity: 0; transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1); }
/* Only elements that carry no transform of their own get the rise, and only
   those may have their transform reset — resetting it on every revealed element
   would wipe out positioning transforms (the rotated church arrows). */
.ac-reveal-shift { transform: translateY(8px); }
.ac-reveal.is-revealed { opacity: 1; }
.ac-reveal-shift.is-revealed { transform: none; }

/* --- OAuth return state --------------------------------------------------- */
.ac-connected {
  position: fixed; left: 50%; top: 16px; z-index: 40; transform: translateX(-50%) translateY(-12px);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px; border-radius: 999px;
  background: #fff; border: 1px solid #e2ddff;
  box-shadow: 0 8px 24px rgba(38, 27, 70, 0.16);
  font-family: var(--font-text); font-size: 15px; font-weight: 600; color: var(--purple);
  opacity: 0; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ac-connected.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }
.ac-connected[hidden] { display: none; }
.ac-connected img { width: 22px; height: 21px; }
.ac-connected-close {
  border: 0; background: transparent; padding: 0 4px; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .toggle .bg, .toggle .handle,
  .ex-lbl, .ex-quote, .ex-shot, .ex-shot img, .ex-chip img, .ex-chip .ex-chip-x,
  .setup-panel, .m-panel, .d-ex-strip, .m-ex-strip, .ac-desktop, .d-flow, .band-hero, .m-hero,
  .btn-try, .btn-login, .m-login-pill, .setup-copy, .m-copy-btn,
  .ac-pressable, .ac-pressable::after, .ex-nav-btn .ring, .ex-nav-btn .chev, .setup-tab, .m-tab,
  .setup-pill-link, .m-pill-link, .ac-reveal, .ac-connected {
    transition: none !important;
  }
  .ac-reveal { opacity: 1; }
  .ac-reveal-shift { transform: none; }
  .ac-pressable.is-pressed:not(:disabled) { transform: none; opacity: 0.7; }
  .ac-pressable.is-pressed:not(:disabled)::after,
  .ex-nav-btn.is-pressed:not(:disabled) .ring { transform: none; }
  .ex-nav-prev.is-pressed:not(:disabled) .chev { transform: rotate(-90deg); }
  .ex-nav-next.is-pressed:not(:disabled) .chev { transform: rotate(90deg); }
}