/* Shared look of the 2026-11 site drafts: the approved German landing page (site/entwurf/) and the pages built on it. */
:root {
  --ink: #2b2621; --soft: #574d43; --bone: #faf8f4; --line: #e6dfd4;
  --dot: #b97b4a; --dark: #2b2621; --on-dark: #fbf7f0; --on-dark-soft: #cfc3b3;
  --space: radial-gradient(ellipse at 50% 42%, #fff8ea 0%, #f7f0e4 36%, #eadfcf 100%);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.18, .75, .2, 1);
  --wide: min(100% - 48px, 1160px);
  --hairline: #ece7df; --plane: #fffdf9; --muted: #756d63; --stone: #f2efe9; --charcoal: #4c4136; --success: #277060; --accent: #79583e; --radius-lg: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bone); color: var(--ink); font: 400 18px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
h1, h2 { font-weight: 600; letter-spacing: -.038em; text-wrap: balance; margin: 0; }

/* Header: the brand and the way in, sitting on the hero's light. */
.top { position: absolute; inset: 0 0 auto; z-index: 2; }
.top-inner { display: flex; align-items: center; justify-content: space-between; width: var(--wide); margin: 0 auto; padding: 24px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.12rem; letter-spacing: -.02em; }
.brand strong { font-weight: 650; }
.brand span { color: var(--soft); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px; background: var(--dark); color: var(--on-dark); text-decoration: none; font-weight: 500; font-size: 1rem; transition: transform .4s var(--ease), background .3s; }
.button:hover { transform: translateY(-1px); background: #000; }
.top .button { min-height: 42px; padding: 0 20px; font-size: .92rem; }
.link { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
:focus-visible { outline: 2px solid var(--dot); outline-offset: 4px; }

/* Amy as she stands in the Space: her portrait in a ring of drifting dots. */
.amy { position: relative; display: grid; place-items: center; width: var(--size, 260px); height: var(--size, 260px); margin: 0 auto; }
.amy svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--dot); animation: turn 80s linear infinite; }
.amy img { width: 70%; height: 70%; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #fff; }
@keyframes turn { to { rotate: 360deg; } }

/* The hero and the close wear the Space's own light, so the page opens and ends where Amy lives. */
.room { position: relative; isolation: isolate; background: var(--space); text-align: center; }
.room::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 45%, #3a2a1a10 100%); }
.hero { display: grid; align-content: center; min-height: min(92vh, 900px); padding: 120px 0 90px; text-align: left; }
.hero-inner { width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hero { overflow: hidden; }
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1.03; margin: 0; }
/* Amy as she was on the first home page: large, cut out, saying hello. The example stands in front of her. */
.hero-stage { position: relative; display: grid; justify-items: end; align-items: start; }
.hero-stage > * { grid-area: 1 / 1; }
.hero-amy { width: clamp(400px, 40vw, 520px); max-width: none; height: auto; margin: -24px -48px 0 0; mask-image: linear-gradient(to right, transparent, #000 15%, #000 74%, transparent 94%), linear-gradient(to bottom, transparent, #000 9%, #000 62%, transparent 92%); mask-composite: intersect; -webkit-mask-composite: source-in; }
.hero-hello { z-index: 1; justify-self: start; margin: 170px 0 0; padding: 12px 18px; border: 1px solid var(--hairline); border-radius: 14px 14px 2px 14px; background: var(--plane); font-size: .95rem; font-weight: 600; rotate: -4deg; box-shadow: 0 12px 32px #2b26211c; }
.hero-hello span { display: block; margin-top: 2px; font-size: .88rem; font-weight: 400; color: var(--soft); }
.js .hero-hello[data-in] { transition-delay: .5s; }
.hero-stage .purchase-demo { z-index: 2; width: 100%; max-width: 440px; margin-top: clamp(230px, 22vw, 290px); box-shadow: 0 18px 50px #2b262116; }
.hero .say { margin: 26px 0 0; max-width: 46ch; font-size: clamp(1.05rem, 1.45vw, 1.2rem); line-height: 1.65; }
.hero-trust { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .95rem; }
.hero-trust li { display: flex; align-items: center; gap: 10px; }
.hero-trust li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.hero .actions { justify-content: flex-start; }
/* The full purchase example, carried over from the current home page. */
.purchase-demo { min-width: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--plane); box-shadow: 0 12px 36px #302c2709; }
.purchase-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 24px 16px; border-bottom: 1px solid var(--hairline); }
.purchase-top h2 { font-size: .92rem; letter-spacing: -.015em; line-height: 1.35; margin: 0; }
.purchase-top > span { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.purchase-tabs { display: flex; padding: 0 16px; gap: 4px; border-bottom: 1px solid var(--hairline); }
.purchase-tabs[hidden], .purchase-demo [hidden] { display: none; }
.purchase-tabs button { min-height: 44px; padding: 12px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: .8rem; cursor: pointer; }
.purchase-tabs [aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.purchase-panel { padding: 22px 24px; }
.purchase-panel h3 { font-size: .95rem; margin: 0 0 16px; }
.purchase-title { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 22px; font-size: .88rem; }
.purchase-title > span { color: var(--muted); font-variant-numeric: tabular-nums; }
.purchase-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.purchase-steps li { display: flex; gap: 12px; position: relative; }
.purchase-steps li:not(:last-child)::after { content: ''; position: absolute; left: 12px; top: 30px; bottom: -12px; border-left: 1px solid var(--hairline); }
.purchase-number { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--hairline); border-radius: 50%; font-size: .75rem; background: var(--stone); color: var(--muted); }
.purchase-steps li:nth-child(3) .purchase-number { background: var(--charcoal); border-color: var(--charcoal); color: var(--on-dark); }
.purchase-demo[data-approved="true"] .purchase-steps li:nth-child(n+3) .purchase-number { background: var(--success); border-color: var(--success); color: white; }
.purchase-steps strong { font-size: .85rem; font-weight: 550; }
.purchase-steps p { color: var(--muted); font-size: .76rem; line-height: 1.5; margin: 3px 0 0; }
.purchase-actions { display: flex; align-items: center; gap: 16px; margin: 22px 0 0; }
.purchase-actions .button { font-size: .92rem; min-height: 44px; padding: 0 22px; border: 0; font-family: inherit; cursor: pointer; }
.text-button { border: 0; background: transparent; color: var(--muted); font-size: .8rem; padding: 10px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.purchase-note { color: var(--muted); font-size: .73rem; line-height: 1.5; margin: 14px 0 0; }
.purchase-facts { margin: 0; }
.purchase-facts div { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.purchase-facts div:first-child { padding-top: 0; }
.purchase-facts div:last-child { border: 0; }
.purchase-facts dt { color: var(--muted); font-size: .75rem; }
.purchase-facts dd { margin: 4px 0 0; font-size: .85rem; }
.purchase-history { list-style: none; padding: 0; margin: 0; }
.purchase-history li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: .85rem; }
.purchase-history time { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.purchase-history small { display: block; color: var(--muted); font-size: .75rem; margin-top: 2px; }
.say { font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.55; color: var(--soft); max-width: 34ch; margin: 22px auto 0; text-wrap: balance; }
.actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 40px; }

/* One thought per screen: the headline and its sentence side by side, then the film. */
.chapter { width: var(--wide); margin: 0 auto; padding: 150px 0 0; }
.chapter-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.chapter h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; }
.chapter .say { margin: 0 0 6px; max-width: 40ch; }
.chapter-head .link { display: inline-block; margin-top: 18px; font-size: 1rem; }
.film { position: relative; margin: 56px 0 0; border-radius: 22px; overflow: hidden; background: #ece4d8; }
.film video { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; cursor: pointer; }
.film video::cue { font-family: var(--font); font-size: 1.05rem; line-height: 1.4; background: #2b2621cc; color: #fff; }
.sound { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 13px; border: 1px solid #dcd3c5; border-radius: 999px; background: #fffdf9e6; color: var(--ink); font: 500 .9rem var(--font); cursor: pointer; backdrop-filter: blur(12px); transition: background .3s; }
.sound:hover { background: #fffdf9; }
.sound svg { width: 18px; height: 18px; }
.sound [data-on] { display: none; }
.film[data-sound] .sound [data-on] { display: block; }
.film[data-sound] .sound [data-off] { display: none; }

/* The usual worries, answered plainly. */
.trust { width: var(--wide); margin: 0 auto; padding: 150px 0 0; }
.trust h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; }
.trust .say { margin: 18px 0 0; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); }
.trust-grid h3 { margin: 0 0 12px; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 550; letter-spacing: -.02em; line-height: 1.25; }
.trust-grid h3::before { content: ""; display: block; width: 9px; height: 9px; margin-bottom: 22px; border-radius: 50%; background: var(--dot); }
.trust-grid p { margin: 0; color: var(--soft); font-size: 1.02rem; line-height: 1.6; }

/* The frame you set: a dark band, three plain statements. */
.frame { margin-top: 150px; background: var(--dark); color: var(--on-dark); }
.frame-inner { width: var(--wide); margin: 0 auto; padding: 130px 0 140px; }
.frame h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; }
.frame .say { color: var(--on-dark-soft); margin: 18px 0 0; }
.rules { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; border-top: 1px solid #ffffff1f; }
.rules > div { padding: 34px 32px 0 0; }
.rules > div + div { padding-left: 32px; border-left: 1px solid #ffffff1f; }
.rules h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.22; }
.rules h3::before { content: ""; display: block; width: 9px; height: 9px; margin-bottom: 22px; border-radius: 50%; background: var(--dot); }
.rules p { margin: 14px 0 0; color: var(--on-dark-soft); font-size: 1.02rem; line-height: 1.6; }

.close { padding: 140px 24px 150px; }
.close h2 { font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.05; margin-top: 30px; }
.ask { display: flex; align-items: center; gap: 14px; width: min(100%, 560px); min-height: 60px; margin: 44px auto 0; padding: 4px 6px 4px 22px; border: 1px solid #dcd3c5; border-radius: 999px; background: #fffdf9e6; text-decoration: none; text-align: left; font-size: 1.05rem; color: var(--soft); transition: border-color .3s, transform .4s var(--ease); }
.ask:hover { border-color: var(--dot); transform: translateY(-1px); }
.ask span { flex: 1; }
.ask i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--dark); color: var(--on-dark); font-style: normal; }
.close .say { margin: 20px auto 0; max-width: 40ch; }
.close .link { display: inline-block; margin-top: 28px; font-size: 1rem; }

footer { background: var(--bone); }
.foot { width: var(--wide); margin: 0 auto; padding: 30px 0 44px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; font-size: .92rem; color: var(--soft); }
.foot nav { display: flex; flex-wrap: wrap; gap: 26px; }
.foot a { text-decoration: none; }

/* The only other motion: each thought arrives once as it comes into view. */
.js [data-in] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-in].is-in { opacity: 1; transform: none; }
.js .hero [data-in]:nth-child(2) { transition-delay: .12s; }
.js .hero [data-in]:nth-child(3) { transition-delay: .24s; }
.js .hero [data-in]:nth-child(4) { transition-delay: .36s; }

@media (min-width: 821px) and (max-width: 1100px) {
  .rules { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .rules > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 820px) {
  body { font-size: 17px; }
  .amy { --size: 200px; }
  .hero { min-height: auto; padding: 110px 0 72px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-stage { justify-items: center; }
  .hero-amy { width: min(360px, 92vw); margin: -16px 0 0; }
  .hero-hello { display: none; }
  .hero-stage .purchase-demo { max-width: 480px; margin-top: 250px; }
  .hero .actions { align-items: flex-start; }
  .chapter { padding-top: 100px; }
  .chapter-head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .film { margin-top: 32px; border-radius: 16px; }
  .sound { right: 12px; bottom: 12px; min-height: 38px; }
  .trust { padding-top: 100px; }
  .trust-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; padding-top: 28px; }
  .frame { margin-top: 100px; }
  .frame-inner { padding: 90px 0 96px; }
  .rules { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .rules > div, .rules > div + div { padding: 26px 0; border-left: 0; border-bottom: 1px solid #ffffff1f; }
  .rules h3::before { margin-bottom: 16px; }
  .close { padding: 100px 20px 110px; }
  .actions { flex-direction: column; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .amy svg { animation: none; }
  .js [data-in] { opacity: 1; transform: none; transition: none; }
}

/* ── Building blocks of the pillar pages (Prozessmodellierung, Prozessautomatisierung, Für Entwickler). ── */
:root { --line-strong: #b9a58f; --sun-wash: #efe5d9; --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; }
.top nav a[aria-current="page"] { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.hero .film { margin: 0; }

/* Text and its picture side by side. */
.side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.chapter .side .say { margin: 22px 0 0; max-width: 42ch; }
.side .actions { justify-content: flex-start; margin-top: 32px; }

/* A live view of the product, embedded. */
.embed { margin: 56px 0 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--plane); }
.embed iframe { display: block; width: 100%; height: 680px; border: 0; background: var(--plane); }
.embed p { margin: 0; padding: 16px 24px; border-top: 1px solid var(--line); font-size: .98rem; color: var(--soft); }
.embed p a { margin-left: 6px; }

/* A product picture. */
.shot { margin: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 18px 50px #2b262110; }
.shot img { width: 100%; height: auto; }

/* Amy asks: her questions, one per line. */
.asks { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.asks .amy { margin: 0; }
.questions { list-style: none; margin: 0; padding: 0; }
.questions li { padding: 20px 0; border-top: 1px solid var(--line); font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.questions li:last-child { border-bottom: 1px solid var(--line); }

/* Four points in a row; links inside points. */
.trust-grid.four { grid-template-columns: repeat(4, 1fr); gap: 40px; }
.trust-grid .link { display: inline-block; margin-top: 14px; color: var(--ink); }

/* Code a developer copies. */
.code { position: relative; margin: 0; border-radius: 18px; background: var(--dark); color: var(--on-dark); padding: 28px 30px; }
.code pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 400 .9rem/1.7 var(--mono); }
.code .dim { color: var(--on-dark-soft); }
.code .copy { position: absolute; top: 14px; right: 14px; min-height: 34px; padding: 0 14px; border: 1px solid #ffffff33; border-radius: 999px; background: transparent; color: var(--on-dark); font: 500 .82rem var(--font); cursor: pointer; }
.code .copy:hover { border-color: #ffffff80; }
.code:has(> .copy) > pre:first-child { padding-right: 92px; }
.code + .code { margin-top: 20px; }
.code h3 { margin: 0 0 14px; font: 600 1rem var(--font); letter-spacing: -.01em; color: var(--on-dark); }
.tools { margin: 32px 0 0; }
.tools div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; padding: 13px 0; border-top: 1px solid var(--line); }
.tools dt { font: 500 .92rem var(--mono); }
.tools dd { margin: 0; color: var(--soft); font-size: 1rem; }
.note { margin: 26px 0 0; font-size: 1rem; color: var(--soft); max-width: 60ch; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }

/* The running case from the automation page, inside the new look. */
.chapter .case-run { margin-top: 56px; border-color: var(--line); border-radius: 22px; }
.case-run h3, .case-run h4, .case-run p { margin: 0; }
.case-run .case-sub { margin-top: 6px; color: var(--soft); }

@media (min-width: 821px) and (max-width: 1100px) {
  .trust-grid.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .side, .pair { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .asks { grid-template-columns: minmax(0, 1fr); }
  .embed { margin-top: 32px; border-radius: 16px; }
  .embed iframe { height: 560px; }
  .trust-grid.four { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tools div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .code { padding: 24px 20px; }
  .code .copy { position: static; margin-top: 16px; }
  .code:has(> .copy) > pre:first-child { padding-right: 0; }
}

/* ── Pricing. ── */
.hero.compact { min-height: auto; padding: 140px 0 110px; }
.hero-inner.single { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero-inner.single .say { max-width: 60ch; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 64px; text-align: left; }
.plan { display: flex; flex-direction: column; padding: 30px 26px 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--plane); }
.plan h3 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.plan-for { margin: 10px 0 0; min-height: 3.2em; font-size: .98rem; line-height: 1.55; color: var(--soft); }
.plan-price { margin: 26px 0 0; font-size: 2.6rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.plan-price small { font-size: .95rem; font-weight: 400; letter-spacing: 0; color: var(--soft); }
.plan .button { margin-top: 24px; min-height: 46px; }
.plan ul { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: .96rem; line-height: 1.45; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--dot); }
.plan.featured { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.plan.featured .plan-for, .plan.featured .plan-price small { color: var(--on-dark-soft); }
/* The one thing a plan is chosen for, said above its list (the own database on Pro). Flat, a wash. */
.plan-key { margin: 22px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--sun-wash); color: var(--soft); font-size: .9rem; line-height: 1.45; }
.plan-key strong { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
.plan-key svg { flex: none; width: 17px; height: 17px; color: var(--accent); }
/* The EU, shown as the EU: the flag on the line that says it, line icons beside the data points. */
.plan li.eu::before { width: 15px; height: 10px; margin-top: .42em; border-radius: 2px; background: url(/assets/eu-flag.svg) center / cover; }
.proofs { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.proof { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--plane); color: var(--ink); font-size: .95rem; font-weight: 550; }
.proof img { width: 21px; height: 14px; border-radius: 2px; }
.proof svg { width: 20px; height: 20px; color: var(--accent); }
.trust-grid.icons h3::before { content: none; }
.trust-grid.icons .mark { display: block; margin-bottom: 18px; }
.trust-grid.icons img.mark { width: 30px; height: 20px; border-radius: 3px; }
.trust-grid.icons .mark svg { width: 26px; height: 26px; color: var(--accent); }
.plan.featured .button { background: var(--on-dark); color: var(--dark); }
.plan.featured ul { border-top-color: #ffffff26; }
.plans-note { margin: 22px 0 0; font-size: .95rem; color: var(--soft); text-align: left; }
.faq { margin: 56px 0 0; }
.faq div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 40px; padding: 24px 0; border-top: 1px solid var(--line); }
.faq div:last-child { border-bottom: 1px solid var(--line); }
.faq dt { font-size: 1.15rem; font-weight: 550; letter-spacing: -.015em; line-height: 1.35; }
.faq dd { margin: 0; color: var(--soft); font-size: 1.02rem; line-height: 1.6; }
@media (min-width: 821px) and (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .hero.compact { padding: 110px 0 72px; }
  .plans { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .plan-for { min-height: 0; }
  .faq div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ── About AIM: the eleven facets. ── */
.faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 64px; }
.faces > div { padding: 28px 0; border-top: 1px solid var(--line); }
.faces code { font: 500 .9rem var(--mono); color: var(--dot); }
.faces h3 { margin: 10px 0 8px; font-size: 1.2rem; font-weight: 550; letter-spacing: -.015em; line-height: 1.3; }
.faces p { margin: 0; color: var(--soft); font-size: .98rem; line-height: 1.55; }
@media (min-width: 821px) and (max-width: 1100px) { .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .faces { grid-template-columns: minmax(0, 1fr); margin-top: 32px; } }

/* ── Professional frame: header with language and contact, phone menu, footer, logos. ── */
.top-inner { gap: 24px; }
.top-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; font-size: .93rem; }
.top-nav a { text-decoration: none; }
.top-nav .nav-extra { display: none; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--soft); margin-right: 4px; }
.lang a { text-decoration: none; }
.lang a[aria-current] { color: var(--ink); font-weight: 600; }
.button.ghost { background: transparent; color: var(--ink); border: 1px solid #cfc4b5; }
.button.ghost:hover { background: #fffdf9; }
.menu { display: none; min-height: 42px; padding: 0 16px; border: 1px solid #cfc4b5; border-radius: 999px; background: transparent; color: var(--ink); font: 500 .92rem var(--font); cursor: pointer; }
.top-actions .login { text-decoration: none; font-size: .93rem; padding: 0 4px; }
.top-actions .login:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The header may run a little wider than the content, so all of its links fit on one line. */
.top-inner { width: min(100% - 48px, 1280px); }
.top-nav a, .top-actions a { white-space: nowrap; }
@media (max-width: 1360px) { .top-actions .button.ghost { display: none; } }
@media (max-width: 560px) { .top-actions .login { display: none; } }
@media (max-width: 1080px) {
  .menu { display: inline-flex; align-items: center; }
  .top-nav { display: none; }
  .top-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 78px; left: 24px; right: 24px; z-index: 5; padding: 10px 22px; background: var(--plane); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px #2b262118; font-size: 1.05rem; }
  .top-nav.is-open a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .top-nav.is-open a:last-child { border-bottom: 0; }
  .top-nav.is-open .nav-extra { display: block; }
  .top-nav a[aria-current="page"] { border-bottom-color: var(--line); font-weight: 600; }
}
@media (max-width: 560px) { .top-actions > .button { display: none; } .lang { margin-right: 0; } }

.site-foot { background: var(--bone); border-top: 1px solid var(--line); }
.foot-grid { width: var(--wide); margin: 0 auto; padding: 64px 0 48px; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 40px; }
.foot-brand p { margin: 14px 0 0; max-width: 34ch; font-size: .95rem; line-height: 1.55; color: var(--soft); }
.foot-brand p:first-of-type { margin-top: 18px; color: var(--ink); font-weight: 500; }
.site-foot nav { display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.site-foot nav h2 { margin: 6px 0 6px; font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.site-foot a { text-decoration: none; }
.site-foot nav a { color: var(--soft); }
.site-foot nav a:hover, .foot-brand a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { width: var(--wide); margin: 0 auto; padding: 22px 0 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; font-size: .9rem; color: var(--soft); }
@media (min-width: 821px) and (max-width: 1100px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 820px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 48px; gap: 32px 24px; } .foot-brand { grid-column: 1 / -1; } }

/* Customers: one quiet row of logos, all in one tone. */
.customers { width: var(--wide); margin: 0 auto; padding: 56px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.customers[hidden] { display: none; }
.customers h2 { flex: none; font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--soft); }
.customers ul { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 44px; }
.customers li { display: flex; align-items: center; height: 44px; }
.customers img { height: 30px; width: auto; filter: grayscale(1) brightness(0); opacity: .55; }
.customers img.tall { height: 50px; }
.customers img.wide { height: 40px; }
.customers .wordmark { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: #000; opacity: .5; }
@media (max-width: 820px) { .customers { padding-top: 40px; } .customers ul { justify-content: flex-start; gap: 20px 32px; } .customers img { height: 24px; } .customers img.tall { height: 36px; } .customers .wordmark { font-size: 1.15rem; } }

/* Works with: the technology a customer's IT recognises. */
.works { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 36px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.works p { margin: 0; font-size: .95rem; color: var(--soft); }
.works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.works li { font-size: 1.12rem; font-weight: 650; letter-spacing: -.02em; color: #7a6e62; }

.close-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin: 28px 0 0; }
.close .close-links .link { margin-top: 0; }

/* ── Page types beyond the marketing pages: gallery, example reader, legal texts, 404. ── */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Example gallery. */
.examples-page { display: block; width: var(--wide); margin: 0 auto; padding: 150px 0 120px; }
.examples-intro { max-width: 900px; padding-bottom: 48px; }
.examples-intro h1 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); line-height: 1.04; }
.examples-intro .lead { margin: 22px 0 0; max-width: 60ch; font-size: clamp(1.05rem, 1.45vw, 1.2rem); line-height: 1.65; color: var(--soft); }
.examples-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin-top: 16px; }
.example-card { display: flex; flex-direction: column; align-items: flex-start; padding: 34px 0 48px; border-top: 1px solid var(--line); }
.example-card h2 { margin: 0 0 12px; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 550; letter-spacing: -.02em; line-height: 1.25; }
.example-card h2::before { content: ""; display: block; width: 9px; height: 9px; margin-bottom: 22px; border-radius: 50%; background: var(--dot); }
.example-description { margin: 0 0 22px; color: var(--soft); font-size: 1.02rem; line-height: 1.6; }
.example-card .link { margin-top: auto; color: var(--ink); }
.examples-after { margin-top: 24px; }
@media (min-width: 821px) and (max-width: 1100px) { .examples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .examples-page { padding: 110px 0 80px; } .examples-grid { grid-template-columns: minmax(0, 1fr); } }

/* One example: the header stays above the reader, which fills the rest of the window. */
body[data-example] { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
body[data-example] .top { position: static; flex: none; border-bottom: 1px solid var(--line); background: var(--bone); }
body[data-example] .top-inner { padding: 14px 0; }
body[data-example] .site-foot { display: none; }
.example-page { display: flex; flex: 1; min-height: 0; width: 100%; margin: 0; }
.example-workbench { display: flex; flex: 1; min-height: 0; overflow: hidden; background: var(--plane); }
.example-frame { display: block; flex: 1; width: 100%; height: 100%; border: 0; background: var(--plane); }
.examples-note { padding: 24px; color: var(--soft); }

/* Legal texts: readable column, the review notice kept visible. */
body[data-page="legal"] { background: var(--bone); }
.legal-document { display: block; width: min(100% - 48px, 860px); margin: 0 auto; padding: 140px 0 110px; }
.legal-document .page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.05; margin: 10px 0 0; }
.legal-document .eyebrow { margin: 0; font-size: .95rem; color: var(--soft); }
.legal-document .lead { margin: 16px 0 0; font-size: 1.1rem; color: var(--soft); }
.legal-document .quiet-panel { margin: 36px 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--plane); }
.legal-document .quiet-panel p { margin: 10px 0 0; color: var(--soft); }
.legal-document nav ol { margin: 0 0 12px; padding-left: 1.3em; display: grid; gap: 6px; color: var(--soft); }
.legal-document section { margin: 44px 0; scroll-margin-top: 24px; }
.legal-document h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.2; margin: 0 0 12px; }
.legal-document p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.legal-document a { text-underline-offset: 3px; }
.legal-document code { font: .9em var(--mono); }

/* 404: Amy looks around. */
.not-found .hero-inner { align-items: center; }
.not-found h1 { font-size: clamp(2.5rem, 5.2vw, 4.2rem); }
.not-found-log { margin: 30px 0 0; padding: 0; list-style: none; max-width: 46ch; border-top: 1px solid var(--line); font-size: .98rem; }
.not-found-log li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--soft); }
.not-found-log li::before { content: "✓"; flex: none; width: 1em; color: var(--success); font-weight: 600; }
.not-found-log li.missing { color: var(--ink); }
.not-found-log li.missing::before { content: "✗"; color: #9a3b2f; }
.not-found-log .path { font-family: var(--mono); font-size: .9em; overflow-wrap: anywhere; }
.not-found-amy .amy { --size: min(300px, 70vw); }
@media (max-width: 820px) { .not-found-amy { order: -1; } .not-found-amy .amy { --size: 180px; margin: 0; } }

/* The three steps of modeling, as on the first home page: explain, uncover, own. */
.model-path { list-style: none; margin: 56px 0 0; padding: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; border-radius: 22px; background: #efe8de; }
.model-path li { min-width: 0; }
.model-symbol { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 12px; background: #e5dacb; color: var(--ink); }
.model-path h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.model-path p { margin: 0; color: var(--soft); font-size: 1rem; line-height: 1.65; }
@media (max-width: 820px) { .model-path { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; padding: 28px 22px; } }

/* About AIM, "runnable": text beside the live purchase example. */
.side.runnable .purchase-demo { justify-self: end; width: 100%; max-width: 460px; }
.runnable .hero-trust { flex-direction: column; gap: 10px; margin-top: 26px; }
.runnable-link { margin: 26px 0 0; }
@media (max-width: 820px) { .side.runnable .purchase-demo { justify-self: stretch; max-width: none; } }
.chapter .purchase-top h2 { font-size: .92rem; letter-spacing: -.015em; line-height: 1.35; max-width: none; }

/* The price calculator on the pricing page: two numbers in, each plan's price and requests out. */
.calc-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 760px; margin-top: 44px; }
.calc-inputs label { display: grid; gap: 8px; color: var(--soft); font-size: .98rem; }
.calc-inputs input { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--plane); color: var(--ink); font: inherit; font-size: 1.4rem; font-weight: 550; }
.calc-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.calc-examples button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--soft); font: inherit; font-size: .9rem; cursor: pointer; }
.calc-examples button:hover { color: var(--ink); border-color: var(--line-strong); }
.calc-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.calc-plans > div { padding: 24px 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--plane); }
.calc-plans > div.best { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.calc-plans h3 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.calc-price { margin: 10px 0 0; font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; }
.calc-price small { color: var(--soft); font-size: .95rem; font-weight: 450; }
.calc-detail { margin: 12px 0 0; color: var(--soft); font-size: .95rem; line-height: 1.6; white-space: pre-line; }
@media (max-width: 760px) { .calc-inputs, .calc-plans { grid-template-columns: minmax(0, 1fr); } }