/* Homepage "Not a chatbot" board: fixed frame, cells of different shapes, progressive moves. */
.fable-board.work-examples {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  min-height: 0;
  overflow-anchor: none;
}
.fable-board .work-example {
  position: absolute;
  margin: 0;
  overflow: hidden;
  min-height: 0;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--paper-2);
  will-change: left, top, width, height;
  transition: border-color 0.35s, background 0.35s, box-shadow 0.35s;
}
.fable-board-live .work-example {
  transition:
    left 0.95s cubic-bezier(0.22, 0.68, 0, 1),
    top 0.95s cubic-bezier(0.22, 0.68, 0, 1),
    width 0.95s cubic-bezier(0.22, 0.68, 0, 1),
    height 0.95s cubic-bezier(0.22, 0.68, 0, 1),
    border-color 0.35s, background 0.35s, box-shadow 0.35s;
}
.fable-board .work-example.is-active {
  border-color: var(--accent);
  background: #0f1b19;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 100, 47, 0.25) inset;
  z-index: 2;
}
.fable-board .work-example summary {
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.fable-board .work-example summary::-webkit-details-marker { display: none; }
.fable-board .work-example summary .tag { margin-bottom: 8px; font-size: 10.5px; padding-right: 26px; }
.fable-board .work-example h3 {
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 0;
  padding-right: 24px;
  transition: font-size 0.5s cubic-bezier(0.22, 0.68, 0, 1);
}
.fable-board .example-summary {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.45s 0.25s, max-height 0.6s cubic-bezier(0.22, 0.68, 0, 1);
}
.fable-board .work-example[data-size="wide"] .example-summary,
.fable-board .work-example[data-size="tall"] .example-summary,
.fable-board .work-example[data-size="big"] .example-summary,
.fable-board .work-example[data-size="expanded"] .example-summary { opacity: 1; max-height: 5em; }
.fable-board .work-example[data-size="wide"] h3 { font-size: 19px; }
.fable-board .work-example[data-size="tall"] h3, .fable-board .work-example[data-size="big"] h3 { font-size: 20px; }
.fable-board .work-example[data-size="expanded"] h3 { font-size: 24px; letter-spacing: -0.03em; }
.fable-board .work-example[data-size="expanded"] summary { padding: 20px 22px 6px; }
.fable-board .work-example[data-size="expanded"] .example-summary { font-size: 15.5px; margin-top: 10px; }
/* roomy cells (tall viewports) let even the small cards keep their one-line summary */
.fable-board[data-roomy="true"] .work-example[data-size="small"] .example-summary { opacity: 1; max-height: 5em; }
.fable-board .example-toggle {
  position: absolute; right: 16px; top: 14px; font-size: 20px; line-height: 1; color: var(--accent);
  transition: transform 0.5s cubic-bezier(0.22, 0.68, 0, 1);
}
.fable-board .work-example.is-active .example-toggle { transform: rotate(45deg); }
.fable-board .example-detail {
  margin: 0 22px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  animation: fable-detail-in 0.7s 0.35s cubic-bezier(0.22, 0.68, 0, 1) both;
}
.fable-board .example-detail p { margin: 0; }
.fable-board .example-evidence { display: block; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
@keyframes fable-detail-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* measurement pass: no transitions, summaries fully open */
.fable-board-measuring .work-example, .fable-board-measuring .example-summary, .fable-board-measuring h3 { transition: none !important; }
.fable-board-measuring .example-summary { max-height: none !important; opacity: 1 !important; }
.fable-board-measuring .example-detail { animation: none !important; }
/* dense variants keep long stories inside three rows on shorter laptops */
.fable-board .work-example[data-dense] .example-detail { font-size: 14.5px; line-height: 1.5; padding: 10px 0 12px; }
.fable-board .work-example[data-dense][data-size="expanded"] h3 { font-size: 21px; }
.fable-board .work-example[data-dense][data-size="expanded"] summary { padding: 16px 20px 4px; }
.fable-board .work-example[data-dense="2"] .example-detail { font-size: 13.5px; line-height: 1.45; }
.fable-board .work-example[data-dense="2"][data-size="expanded"] .example-summary { display: none; }
.fable-board .work-example[data-dense="2"] .example-evidence { margin-top: 8px; font-size: 11.5px; }
/* a soft directional glow hints where the active card grew from */
.fable-board .work-example.is-active::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.9;
  background: radial-gradient(60% 70% at var(--gx, 0%) var(--gy, 0%), rgba(255, 100, 47, 0.14), transparent 70%);
}
.fable-board .work-example[data-grow="right-down"]::after { --gx: 0%; --gy: 0%; }
.fable-board .work-example[data-grow="left-down"]::after { --gx: 100%; --gy: 0%; }
.fable-board .work-example[data-grow="right-up"]::after { --gx: 0%; --gy: 100%; }
.fable-board .work-example[data-grow="left-up"]::after { --gx: 100%; --gy: 100%; }
@media (max-width: 1150px) {
  /* narrow columns: single-row wide cards keep only their title */
  .fable-board .work-example[data-size="wide"] .example-summary { opacity: 0; max-height: 0; }
  .fable-board .work-example summary { padding: 14px 16px; }
  .fable-board .work-example h3 { font-size: 16.5px; }
  .fable-board .work-example[data-size="expanded"] h3 { font-size: 20px; }
  .fable-board .example-detail { margin: 0 16px; font-size: 14px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .fable-board-live .work-example, .fable-board .example-summary, .fable-board .example-toggle, .fable-board .work-example h3 { transition: none !important; }
  .fable-board .example-detail { animation: none !important; }
}

/* ---------- extras: heading word-rise, staggered cards, parallax ---------- */
.rise-ready .w-rise { display: inline-block; opacity: 0; transform: translateY(0.55em); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.rise-in .w-rise { opacity: 1; transform: none; }
.rise-card { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.rise-card-in { opacity: 1; transform: none; }
.hero .stage { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.gateway-art .portal-scene { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- EU AI Act: six uniform cards ---------- */
.eu-act-six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.eu-act-six .eu-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 28px 26px 24px; border: 1px solid var(--forest-line); border-radius: 16px; background: var(--paper-2);
  opacity: 1; transform: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s, box-shadow 0.35s;
}
.eu-act-six .eu-card.eu-ready { opacity: 0; transform: translateY(22px); }
.eu-act-six .eu-card.eu-ready:not(.eu-in) { transition: none; }
.eu-act-six .eu-card.eu-in { opacity: 1; transform: none; }
.eu-act-six .eu-card:hover { border-color: rgba(255, 100, 47, 0.55); box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.9); }
.eu-act-six .eu-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s; border-radius: inherit;
  background: radial-gradient(260px 180px at var(--mx, 50%) var(--my, 50%), rgba(255, 100, 47, 0.14), transparent 60%);
}
.eu-act-six .eu-card:hover::before { opacity: 1; }
.eu-card-line { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), rgba(255, 100, 47, 0)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.eu-card.eu-in .eu-card-line { transform: scaleX(1); }
.eu-card-index { position: absolute; right: 18px; top: 8px; font: italic 400 64px/1 var(--serif); color: rgba(255, 100, 47, 0.12); letter-spacing: -0.04em; transition: color 0.4s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.eu-card:hover .eu-card-index { color: rgba(255, 100, 47, 0.3); transform: translateY(-4px); }
.eu-act-six .eu-act-number { position: relative; z-index: 1; }
.eu-act-six h3 { position: relative; z-index: 1; font-size: 21px; line-height: 1.22; margin: 16px 0 10px; letter-spacing: -0.02em; color: var(--ink); }
.eu-act-six p { position: relative; z-index: 1; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.eu-act-six .eu-act-benefit { position: relative; z-index: 1; margin-top: auto; display: inline-block; color: var(--mint); border-top: 1px solid var(--forest-line); padding-top: 12px; font: 500 11px var(--mono); }
@media (max-width: 1100px) { .eu-act-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eu-act-six { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .eu-act-six .eu-card { opacity: 1; transform: none; transition: none; } .eu-card-line { transform: none; transition: none; } }

/* ---------- pricing → compare page ---------- */
.compare-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; justify-content: center; margin-top: 40px; color: var(--muted); font-size: 14.5px; }

/* Phone disclosures keep their natural reading order and animate on entry/tap. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .work-examples:not(.fable-board) .work-example[open] .example-detail {
    animation: fable-detail-in .4s var(--ease) both;
  }
  .work-examples:not(.fable-board) .work-example .example-toggle {
    transition: transform .3s var(--ease);
  }
  .work-examples:not(.fable-board) .work-example[open] .example-toggle { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rise-ready .w-rise, .rise-card { opacity: 1; transform: none; transition: none; }
}

.fable-board .rise-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .eu-act-six .eu-card.eu-ready { opacity: 1; transform: none; } }