/* Complete expandable Extras preview — shared brand, real working demos. */
.expandable-extras { text-align: left; }
.ee-intro { padding: 10rem var(--gutter) 4rem; background: var(--ivory); }
.ee-intro .display { font-size: clamp(1.8rem, 4.7vw, 4.5rem); }
.ee-intro > .wrap > p:not(.section-head) { margin-top: 1.8rem; max-width: 44rem; }
.ee-intro .ee-price-note { font-size: .8rem; line-height: 1.8; color: var(--graphite); }
.ee-collection { padding: 0 var(--gutter) 5rem; background: var(--ivory); }
.ee-feature { max-width: 84rem; margin: auto; border-top: 1px solid #0a0a0a45; }
.ee-feature:last-child { border-bottom: 1px solid #0a0a0a45; }
.ee-feature summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 11rem 1fr 4rem; gap: 2rem; align-items: center; padding: 2.8rem 0; }
.ee-feature summary::-webkit-details-marker { display: none; }
.ee-number { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); align-self: start; padding-top: .6rem; }
.ee-invitation { display: grid; }
.ee-title-bold, .ee-title-light { display: block; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); line-height: 1.2; }
.ee-title-bold { font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 3.2rem); }
.ee-title-light { font-weight: 300; font-size: clamp(1.3rem, 2.6vw, 2.6rem); margin-top: .15rem; }
.ee-description { max-width: 42rem; margin-top: 1.2rem; font-size: 1rem; line-height: 1.8; }
.ee-toggle { display: grid; place-items: center; gap: 1rem; }
.ee-toggle i { width: 30px; height: 30px; position: relative; }
.ee-toggle i::before,.ee-toggle i::after { content: ''; position: absolute; top: 50%; width: 100%; height: 1px; background: var(--accent); }
.ee-toggle i::after { transform: rotate(90deg); transition: transform .25s; }
.ee-feature[open] .ee-toggle i::after { transform: rotate(0); }
.ee-toggle small { font-size: .5rem; letter-spacing: .15em; }
.ee-feature[open] > summary { color: var(--accent); }
.ee-demo { padding-bottom: 2rem; }
.ee-demo > .section { padding: 2rem; background: white; }
.ee-demo > .section > .wrap > .section-head { display: none; }
.ee-demo .ex-text > .display,.ee-demo .ex-text > .ex-body { display: none; }
.ee-demo .ex-text { grid-column: 1 / -1; }
.ee-demo .ex-panel { grid-column: 1 / -1; width: 100%; }
.ee-demo .ex-grid { gap: 1.5rem; }
.ee-demo > .mo { background: var(--ink); }
.ee-demo .ex-more > .wrap > .display { display: none; }
.ee-demo .ex-more-list { margin-top: 0; }
.ee-feature[open] .ee-demo { animation: ee-open .3s ease; }
@keyframes ee-open { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 800px) {
 .ee-feature summary { grid-template-columns: 1fr 2rem; gap: 1rem; padding: 2rem 0; }
 .ee-number { grid-column: 1 / -1; }
 .ee-toggle small { display: none; }
 .ee-toggle i { width: 23px; height: 23px; }
 .ee-demo > .section { padding: 1.2rem; }
 .ee-intro { padding-top: 8rem; }
}
@media (prefers-reduced-motion: reduce) { .ee-feature[open] .ee-demo { animation: none; } }

/* Alternating brand colours give each invitation its own chapter. */
.ee-collection {
  padding-inline: 0;
  padding-bottom: 0;
}
.ee-feature {
  --ee-background: var(--ivory);
  --ee-foreground: var(--ink);
  --ee-muted: var(--graphite);
  --ee-detail: var(--accent);
  max-width: none;
  padding-inline: max(var(--gutter), calc((100vw - 84rem) / 2));
  background: var(--ee-background);
  color: var(--ee-foreground);
  border: 0;
}
.ee-feature:nth-child(4n + 1) {
  --ee-background: var(--accent);
  --ee-foreground: var(--paper);
  --ee-muted: #eadbdc;
  --ee-detail: #eadbdc;
}
.ee-feature:nth-child(4n + 2) {
  --ee-background: var(--graphite);
  --ee-foreground: var(--paper);
  --ee-muted: #efebe6;
  --ee-detail: #eadbdc;
}
.ee-feature:nth-child(4n + 3) {
  --ee-background: var(--ivory);
}
.ee-feature:nth-child(4n + 4) {
  --ee-background: var(--paper);
}
.ee-feature:last-child { border-bottom: 0; }
.ee-feature > summary {
  padding-block: clamp(2.8rem, 5vw, 4rem);
}
.ee-feature .ee-title-bold,
.ee-feature .ee-title-light {
  color: var(--ee-foreground);
}
.ee-feature .ee-description {
  color: var(--ee-muted);
}
.ee-feature .ee-number,
.ee-feature .ee-toggle,
.ee-feature[open] > summary {
  color: var(--ee-detail);
}
.ee-feature .ee-toggle i::before,
.ee-feature .ee-toggle i::after {
  background: var(--ee-detail);
}
.ee-feature summary:focus-visible {
  outline-color: var(--ee-detail);
  outline-offset: -6px;
}
/* Demos retain their original surfaces and contrast inside the coloured chapter. */
.ee-demo {
  color: var(--graphite);
  padding-bottom: 2.5rem;
}
.ee-demo .section-paper,
.ee-demo .section-ivory {
  color: var(--graphite);
}
.ee-demo .mo {
  color: var(--paper);
}


/* Cream follows the Oxblood opening. */
.ee-feature:first-child {
  --ee-background: var(--ivory);
  --ee-foreground: var(--ink);
  --ee-muted: var(--graphite);
  --ee-detail: var(--accent);
}

/* Match the FAQ hero's shared rule, heading scale and paragraph spacing.
   The comparisons sit independently on the right, so they cannot move the title. */
.ee-ai-hero > .wrap {
  position: relative;
}
.ee-ai-hero .display {
  font-size: clamp(1.5rem, min(3.4vw, 6.2vh), 3rem);
}
.ee-ai-hero .display .line-light {
  margin-top: .22em;
}
.ee-ai-layout {
  margin-top: clamp(1rem, 3vh, 2.25rem);
}
.ee-ai-copy {
  width: 48%;
  max-width: 36rem;
}
.ee-ai-copy .lead {
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  line-height: 1.45;
}
.ee-ai-copy > p + p {
  margin-top: 1rem;
  font-size: .85rem;
  line-height: 1.7;
}
.ee-ai-comparisons {
  position: absolute;
  top: 6.5rem;
  right: 0;
  width: 43%;
}
.ee-ai-comparisons .ex-bars { margin-top: 0; }
.ee-ai-comparisons .ex-bars li {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem 1rem;
  padding-block: .7rem;
}
.ee-ai-comparisons .xb-track { grid-column: 1 / -1; grid-row: 2; }
.ee-ai-comparisons .xb-name { font-size: .6rem; letter-spacing: .12em; }
.ee-ai-comparisons .xb-figs { font-size: .8rem; }
.ee-ai-comparisons .ex-bars-note { font-size: .65rem; line-height: 1.7; margin-top: .8rem; }
.ee-hero-invitation { margin-top: 1.2rem; font-size: .7rem; opacity: .8; }
.ee-hero-invitation > span { margin-left: 1rem; }
@media (max-width: 900px) {
  .ee-ai-hero { justify-content: flex-start; }
  .ee-ai-copy { width: 100%; }
  .ee-ai-comparisons { position: static; width: 100%; margin-top: 2rem; }
}

/* Measure the existing FAQ layout independently of Extras content length. */
.ee-alignment-reference {
  position: fixed;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}
@media (min-width: 901px) {
  .ee-ai-hero {
    justify-content: flex-start;
    padding-top: var(--ee-rule-top, 32svh);
  }
}

/* Fit the copy beneath the fixed hero anchors without moving the top rule. */
@media (min-width: 901px) {
  .ee-ai-copy .lead {
    font-size: clamp(.95rem, 1.85svh, 1.15rem);
    line-height: 1.65;
  }
  .ee-ai-copy > p + p {
    margin-top: .85rem;
    font-size: clamp(.75rem, 1.55svh, .9rem);
    line-height: 1.65;
  }
  .ee-ai-comparisons .ex-bars li {
    padding-block: clamp(.35rem, 1.1svh, .7rem);
  }
  .ee-hero-invitation {
    margin-top: .85rem;
    font-size: .7rem;
  }
}

/* Reset instantly before each ten-second comparison replay. */
.ex-bars.is-resetting .xb-now {
  transition: none;
}

/* Match the shared main intro paragraph typography. */
.ee-ai-copy .lead {
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  font-weight: 400;
  line-height: 1.35;
}

/* A lighter opening: short copy and a balanced comparison graphic. */
.ee-ai-hero.fit-screen {
  height: auto;
  min-height: 100svh;
  padding-top: 7rem;
  padding-bottom: 3rem;
  justify-content: center;
}
.ee-ai-hero > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  row-gap: 1.5rem;
  align-items: start;
}
.ee-ai-hero .section-head { grid-column: 1 / -1; margin-bottom: 1rem; }
.ee-ai-hero .display { grid-column: 1; grid-row: 2; }
.ee-ai-layout { display: contents; }
.ee-ai-copy { grid-column: 1; grid-row: 3; width: 100%; max-width: 29rem; }
.ee-ai-copy .lead { font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.5; }
.ee-ai-copy .ee-hero-price { margin-top: 1.25rem; font-size: .85rem; line-height: 1.5; }
.ee-ai-copy .ee-hero-link { margin-top: 1.25rem; }
.ee-ai-comparisons { position: static; grid-column: 2; grid-row: 2 / 4; width: 100%; margin: 0; align-self: center; }
.ex-scope-note .features-scope { max-width: none; margin: 0; }
@media (max-width: 900px) {
  .ee-ai-hero > .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .ee-ai-copy { grid-row: 3; max-width: 34rem; }
  .ee-ai-comparisons { grid-column: 1; grid-row: 4; margin-top: .5rem; }
  .ee-ai-hero.fit-screen { min-height: 100svh; padding-top: 6rem; padding-bottom: 2rem; }
}

/* Explain the purpose of optional features before the demonstrations. */
.features-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
.features-intro .section-head { margin-bottom: 2rem; }
.features-intro .display { font-size: clamp(1.7rem, 3.2vw, 3rem); }
.features-intro-copy { padding-top: .5rem; }
.features-intro-copy .lead { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.55; }
.features-intro-copy > p + p { margin-top: 1.25rem; }
.features-intro-copy > p { line-height: 1.7; }
.features-intro-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; font-size: .9rem; }
.features-intro-links a { text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 760px) { .features-intro-grid { grid-template-columns: minmax(0, 1fr); } }