/* =========================================================================
   Design System — Components
   Geteilte Button-Komponenten für ALLE Projekte in diesem Repo (siehe
   Root-CLAUDE.md). Varianten sind nach Farbe benannt (blue/green/teal/rose),
   nicht nach Bedeutung (primary/accent) — welche Farbe die Haupt-CTA-Farbe
   ist, entscheidet der Kontext des jeweiligen Projekts (siehe dessen
   CLAUDE.md), nicht der Klassenname hier.
   Baut ausschließlich auf den semantischen Tokens aus tokens.css auf.
   ========================================================================= */

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font:700 15px/1 var(--font-sans);
  text-decoration:none;cursor:pointer;
  border:none;border-radius:8px;
  padding:15px 26px;
  transition:background-color .15s ease,border-color .15s ease,opacity .15s ease,transform .15s ease;
}
.btn--sm{font:700 13px/1 var(--font-sans);padding:10px 16px;border-radius:6px}

/* ---- solide Varianten --------------------------------------------------- */
.btn--blue{background:var(--colors-blue-1);color:var(--colors-button)}
.btn--blue:hover{background:var(--colors-blue-2)}
.btn--green{background:var(--colors-green-1);color:var(--colors-button)}
.btn--green:hover{background:var(--colors-green-2)}
.btn--teal{background:var(--colors-teal-1);color:var(--colors-button)}
.btn--teal:hover{background:var(--colors-teal-2)}
.btn--rose{background:var(--colors-rose-1);color:var(--colors-button)}
.btn--rose:hover{background:var(--colors-rose-2)}

/* ---- Outline-Varianten --------------------------------------------------
   Basis ist für alle Farben identisch (transparent, Text-/Border-Farbe aus
   Theme-Token) — nur die Hover-Füllfarbe unterscheidet sich. Kein
   dark/light-Suffix: das übernimmt schon [data-theme] auf der Sektion. */
.btn--outline-blue,
.btn--outline-green,
.btn--outline-teal,
.btn--outline-rose{
  background:transparent;color:var(--colors-headline);border:1px solid var(--colors-border);
}
.btn--outline-blue:hover{background:var(--colors-blue-1);border-color:var(--colors-blue-1);color:var(--colors-button)}
.btn--outline-green:hover{background:var(--colors-green-1);border-color:var(--colors-green-1);color:var(--colors-button)}
.btn--outline-teal:hover{background:var(--colors-teal-1);border-color:var(--colors-teal-1);color:var(--colors-button)}
.btn--outline-rose:hover{background:var(--colors-rose-1);border-color:var(--colors-rose-1);color:var(--colors-button)}

/* =========================================================================
   Design System — Layout
   Geteilte Grid-Utilities für ALLE Projekte in diesem Repo (siehe
   Root-CLAUDE.md). Reine Spalten-/Gap-Utilities ohne Farb-/Typografie-Bezug —
   projektspezifische Grids (z.B. Footer-Layouts, Hero-Kompositionen) bleiben
   lokal im jeweiligen Projekt und bauen ggf. per zusätzlicher Klasse auf
   diesen Utilities auf (siehe `.grid-2 hero__grid` in report-generator.com).
   ========================================================================= */

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

@media(max-width:960px){
  .grid-2{grid-template-columns:1fr!important;gap:40px!important}
  .grid-3{grid-template-columns:repeat(2,1fr)!important}
  .grid-4{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:600px){
  .grid-3,.grid-4{grid-template-columns:1fr!important}
}

/* List & Label — Report Generator landing page
   Layout, type and component styles. All color values reference tokens
   defined in tokens.css — see color-mix() calls for translucent variants. */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2-variations');
  font-variation-settings:"opsz" 14;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Cascadia Mono','SF Mono',Menlo,monospace;
  --font-serif:'PT Serif',Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{
  margin:0;
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
[data-theme]{
  background:var(--colors-background);
  color:var(--colors-body);
}
h1,h2,h3,h4,p,figure{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.page{width:100%;overflow-x:hidden}
.skip-link{
  position:absolute;top:-100%;left:12px;z-index:1000;
  padding:10px 16px;border-radius:8px;
  background:var(--colors-green-1);color:var(--colors-button);
  font:600 14px/1 var(--font-sans);text-decoration:none;
}
.skip-link:focus{top:12px}

/* ---------------------------------------------------------------- */
/* layout utilities                                                   */
/* ---------------------------------------------------------------- */
.container{max-width:1440px;margin:0 auto;padding-left:40px;padding-right:40px}
.container--narrow{max-width:900px}
.container--copy{max-width:820px}
.container--topics{max-width:1080px}

.section{padding:92px 0}
.section--tight{padding:76px 0}

.eyebrow{
  display:block;
  font:600 11px/1 var(--font-sans);
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.eyebrow--dark{color:var(--colors-muted)}
.eyebrow--muted{color:var(--colors-muted)}
.eyebrow--teal{color:var(--colors-teal-1)}

.section-heading{
  font:600 39px/1.16 var(--font-sans);
  letter-spacing:-.4px;
  color:var(--colors-headline);
  margin:12px 0 44px;
}
.section-heading--tight{margin-bottom:0}

/* ---------------------------------------------------------------- */
/* buttons & links                                                    */
/* ---------------------------------------------------------------- */
/* .btn-Komponenten (Basis + Farbvarianten) kommen aus der repo-weiten
   ../design-system/components.css — hier NICHT erneut definieren. */

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font:600 15px/1 var(--font-sans);
  color:var(--colors-blue-1);
  text-decoration:none;
}
.link-arrow:hover{color:var(--colors-blue-2)}
.link-arrow--sm{font:600 14px/1 var(--font-sans);gap:7px}

.text-link{color:var(--colors-blue-1);text-decoration:none;font-weight:600}
.text-link:hover{color:var(--colors-blue-2)}

/* ---------------------------------------------------------------- */
/* nav / header                                                       */
/* ---------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--colors-background) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--colors-border-subtle);
}
.nav{
  max-width:1440px;margin:0 auto;height:66px;
  display:flex;align-items:center;gap:28px;padding:0 40px;
  position:relative;
}
.nav__logo{display:inline-flex;align-items:center;text-decoration:none}
.nav__links{display:flex;gap:4px;margin-left:14px}
.nav__link{
  font:500 14px/1 var(--font-sans);color:var(--colors-body);
  text-decoration:none;padding:9px 12px;border-radius:6px;
  transition:background-color .15s ease,color .15s ease;
}
.nav__link:hover{color:var(--colors-headline);background:color-mix(in srgb, var(--colors-foreground) 6%, transparent)}
.nav__actions{margin-left:auto;display:flex;gap:12px;align-items:center}
.nav__trial{
  display:inline-flex;align-items:center;gap:6px;
  font:600 14px/1 var(--font-sans);color:var(--colors-button);background:var(--colors-green-1);
  text-decoration:none;padding:10px 16px;border-radius:6px;
  transition:background-color .15s ease;
}
.nav__trial:hover{background:var(--colors-green-2)}
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;color:var(--colors-headline);
  padding:8px;align-items:center;justify-content:center;
}
.mobile-menu{
  position:absolute;top:100%;left:0;right:0;
  background:var(--colors-surface);
  border-bottom:1px solid var(--colors-border-subtle);
  padding:12px 20px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 20px 30px -12px color-mix(in srgb, var(--colors-shadow) 50%, transparent);
}
.mobile-menu[hidden]{display:none}
.mobile-menu__link{
  font:600 15px/1 var(--font-sans);color:var(--colors-body);text-decoration:none;
  padding:12px 10px;border-radius:6px;
}
.mobile-menu__trial{
  font:700 15px/1 var(--font-sans);color:var(--colors-button);background:var(--colors-green-1);
  text-decoration:none;padding:14px 10px;border-radius:6px;text-align:center;margin-top:6px;
}

/* ---------------------------------------------------------------- */
/* hero                                                                */
/* ---------------------------------------------------------------- */
.hero{
  position:relative;z-index:0;
  background:var(--colors-background);
  padding:76px 0 92px;
  overflow:hidden;
}
.grid-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}

.hero__grid{position:relative;align-items:center;gap:60px;grid-template-columns:1.02fr 1fr}
.hero__title{
  margin:22px 0 18px;font:700 56px/1.08 var(--font-sans);letter-spacing:-1.3px;color:var(--colors-headline);
}
.hero__title em{font-style:normal;color:var(--colors-blue-1)}
.hero__title strong{font-weight:700;color:var(--colors-green-1)}
.hero__lead{font:400 19px/1.55 var(--font-sans);color:var(--colors-body);max-width:520px;margin:0 0 14px}
.hero__sub{font:400 16px/1.6 var(--font-sans);color:var(--colors-muted);max-width:520px;margin:0 0 28px}

.hero__actions{display:flex;gap:14px;margin-top:32px;align-items:center;flex-wrap:wrap}
.hero__note{font:400 13px/1.4 var(--font-sans);color:var(--colors-muted);margin:16px 0 0}
.hero__trust{font:400 12px/1.4 var(--font-sans);color:var(--colors-muted);margin:12px 0 0}

.video-frame{
  position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:1px solid color-mix(in srgb, var(--colors-deep-slate-400) 18%, transparent);
  box-shadow:0 40px 80px -30px color-mix(in srgb, var(--colors-shadow) 70%, transparent);
  background:var(--colors-surface);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-scrim{
  position:absolute;inset:0;
  background:color-mix(in srgb, var(--colors-deep-slate-900) 42%, transparent);
  display:flex;align-items:center;justify-content:center;
}
.video-play{
  width:74px;height:74px;border-radius:50%;background:var(--colors-blue-1);border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 12px 30px -6px color-mix(in srgb, var(--colors-blue-1) 60%, transparent);
  transition:background-color .15s ease;
}
.video-play:hover{background:var(--colors-blue-2)}
.video-play svg{margin-left:4px}
.video-caption{
  position:absolute;left:14px;bottom:12px;font:500 11px/1 var(--font-sans);color:var(--colors-white);
  background:color-mix(in srgb, var(--colors-deep-slate-900) 70%, transparent);
  padding:5px 9px;border-radius:5px;
}
.video-tag{
  position:absolute;user-select:none;top:-12px;right:16px;
  font:500 10px/1 var(--font-sans);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--colors-gray-500);background:var(--colors-surface);padding:4px 8px;border-radius:5px;
  border:1px solid color-mix(in srgb, var(--colors-deep-slate-400) 18%, transparent);
}
.video-wrap[hidden]{display:none}

/* ---------------------------------------------------------------- */
/* trust bar                                                          */
/* ---------------------------------------------------------------- */
.trust-bar{
  background:var(--colors-well-1);
  border-top:1px solid var(--colors-border-subtle);
  border-bottom:1px solid var(--colors-border-subtle);
  padding:52px 0;
}
.trust-bar__label{
  text-align:center;font:500 11px/1 var(--font-sans);letter-spacing:1.6px;text-transform:uppercase;
  color:var(--colors-muted);margin-bottom:30px;
}
.trust-bar__row{
  display:grid;grid-template-columns:repeat(4,auto);justify-content:center;
  column-gap:52px;row-gap:28px;align-items:center;
}
.trust-item{
  display:flex;align-items:center;gap:16px;position:relative;
}
.trust-item:not(:nth-child(4n+1))::before{
  content:"";position:absolute;left:-26px;top:8%;bottom:8%;width:1px;background:var(--colors-border-subtle);
}
.trust-item img{display:block}
.trust-item__text{display:flex;flex-direction:column;gap:3px;text-align:left;max-width:210px}
.trust-item__text strong{font:700 18px/1 var(--font-sans);color:var(--colors-headline)}
.trust-item__text span{font:400 14px/1.4 var(--font-sans);color:var(--colors-muted)}

/* ---------------------------------------------------------------- */
/* what is                                                             */
/* ---------------------------------------------------------------- */
.what__title{font:600 39px/1.18 var(--font-sans);letter-spacing:-.4px;color:var(--colors-headline);margin:0 0 22px;text-wrap:balance;max-width:760px}
.rd-left .what__title{font-size:30px;margin:14px 0 20px}
.what__copy{font:400 17px/1.62 var(--font-sans);color:var(--colors-body);margin:0 0 16px;max-width:640px}
.what__copy:last-child{margin-bottom:28px}
.rd-left .what__copy{font-size:14px;line-height:1.6;margin-bottom:13px;max-width:560px}
.rd-left .what__copy:last-child{margin-bottom:30px}
.what__copy strong{color:var(--colors-headline)}

/* ---- Report Designer: interactive prototype ------------------------ */
/* Fixed light "device chrome" component (like a screenshot) — deliberately
   uses literal design-system values rather than the flippable section
   tokens, consistent with other embedded-app illustrations on this page. */
.report-designer__grid{display:grid;grid-template-columns:minmax(340px,46%) minmax(300px,54%);gap:28px;align-items:stretch;margin-top:20px}

/* -- left: copy + control panel, single column -- */
.rd-left{min-width:0}
.rd-panel{
  background:var(--colors-slate-50);border:1px solid var(--colors-slate-200);
  border-radius:12px;box-shadow:0 1px 3px color-mix(in srgb, var(--colors-shadow) 8%, transparent);overflow:hidden;
}
.rd-panel__header{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--colors-slate-150);background:var(--colors-white);
  font:600 13px/1 var(--font-sans);color:var(--colors-slate-950);
}
.rd-panel__body{padding:14px;display:flex;flex-direction:column;gap:12px}
.rd-field__label{font:500 10px/1 var(--font-sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--colors-slate-600);margin-bottom:5px}

.rd-radio-group{display:flex;flex-direction:column;gap:5px}
.rd-radio{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 10px;border-radius:7px;
  cursor:pointer;font:500 13px/1 var(--font-sans);
  background:var(--colors-white);color:var(--colors-slate-600);border:1px solid var(--colors-slate-200);
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
.rd-radio:hover:not(.is-active){border-color:var(--colors-slate-300)}
.rd-radio.is-active{background:var(--colors-ll-blue-50);color:var(--colors-ll-blue-800);border-color:var(--colors-ll-blue-200)}
.rd-radio__dot{
  width:14px;height:14px;border-radius:50%;flex:none;border:2px solid var(--colors-slate-300);background:transparent;
  transition:border-color .12s ease,background .12s ease;
}
.rd-radio.is-active .rd-radio__dot{
  border-color:var(--colors-ll-blue-600);
  background:radial-gradient(circle,var(--colors-ll-blue-600) 0 40%,transparent 45%);
}

/* -- right: window preview, stretches to match left column's natural height -- */
.rd-window{
  min-height:0;border-radius:12px;border:1px solid var(--colors-slate-200);
  box-shadow:0 10px 15px -3px color-mix(in srgb, var(--colors-shadow) 10%, transparent);
  overflow:hidden;background:var(--colors-white);display:flex;flex-direction:column;
}
.rd-window__titlebar{
  flex:none;display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--colors-slate-100);border-bottom:1px solid var(--colors-slate-200);
}
.rd-window__title{font:500 12px/1 var(--font-sans);color:var(--colors-slate-600)}
.rd-window__body{
  position:relative;flex:1 1 0;min-height:0;overflow-y:auto;background:var(--colors-slate-200);
  padding:18px;display:flex;justify-content:safe center;align-items:flex-start;
}
/* Sizing set per-document via JS (page is authored in real mm, scaled down
   to fit --rd-frame-w; see main.js DOCS table for each doc's natural size
   and page count). */
.rd-window__frame-wrap{width:100%;max-width:560px;flex:none;overflow:hidden}
.rd-window__frame{border:0;display:block;transform-origin:top left}

@media (max-width:860px){
  .report-designer__grid{grid-template-columns:1fr}
  .rd-window{min-height:560px}
}

.what__caption{text-align:left;font:400 12px/1.5 var(--font-sans);color:var(--colors-muted);margin:14px 0 0;max-width:560px}
.what__caption strong{color:var(--colors-headline)}

/* ---------------------------------------------------------------- */
/* why developers / feature cards                                     */
/* ---------------------------------------------------------------- */
.why{position:relative;z-index:0;overflow:hidden}
.topics{position:relative;z-index:0;overflow:hidden}
.builtfor{position:relative;z-index:0;overflow:hidden}
.why .section-heading{max-width:760px}
.why .container{position:relative}
.feature-card{
  background:var(--colors-card);
  border:1px solid var(--colors-border-subtle);
  border-radius:12px;padding:26px;
  transition:border-color .15s ease;
}
.feature-card:hover{border-color:color-mix(in srgb, var(--colors-blue-1) 50%, transparent)}
.feature-card__icon{width:46px;height:46px;margin-bottom:16px}
.feature-card__title{font:600 18px/1.3 var(--font-sans);color:var(--colors-headline);margin:0 0 8px}
.feature-card__body{font:400 14px/1.6 var(--font-sans);color:var(--colors-body);margin:0}

/* ---------------------------------------------------------------- */
/* testimonial bands                                                   */
/* ---------------------------------------------------------------- */
.testimonial{
  background:var(--colors-well-1);
  border-top:1px solid var(--colors-border-subtle);
  border-bottom:1px solid var(--colors-border-subtle);
  padding:76px 0;position:relative;overflow:hidden;color:var(--colors-headline);
}
.testimonial--sm{padding:70px 0}
.testimonial__inner{position:relative;text-align:center}
.testimonial__quote-mark{margin-bottom:18px}
.testimonial__quote{font:400 32px/1.32 var(--font-sans);letter-spacing:-.5px;color:var(--colors-headline);margin:0 0 22px;text-wrap:balance}
.testimonial__quote--sm{font:400 28px/1.36 var(--font-sans);letter-spacing:-.4px;margin-bottom:20px}
.testimonial__name{font:600 15px/1.3 var(--font-sans);color:var(--colors-teal-1)}
.testimonial__org{font:400 13px/1.3 var(--font-sans);color:var(--colors-muted);margin-top:3px}
.testimonial__story-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:22px;
  font:600 13px/1 var(--font-sans);color:var(--colors-blue-1);text-decoration:none;
  transition:color .15s ease;
}
.testimonial__story-link:hover{color:var(--colors-blue-2)}

/* ---------------------------------------------------------------- */
/* use cases                                                           */
/* ---------------------------------------------------------------- */
.usecases .section-heading{max-width:620px}
.usecase-card{
  background:var(--colors-card);border:1px solid var(--colors-border-subtle);border-radius:12px;padding:24px;
  box-shadow:0 1px 3px color-mix(in srgb, var(--colors-shadow) 6%, transparent);
}
.usecase-card__icon{
  width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.usecase-card__icon--blue{background:color-mix(in srgb, var(--colors-blue-1) 10%, transparent);color:var(--colors-blue-1)}
.usecase-card__icon--teal{background:color-mix(in srgb, var(--colors-teal-1) 12%, transparent);color:var(--colors-teal-1)}
.usecase-card__icon--green{background:color-mix(in srgb, var(--colors-green-1) 14%, transparent);color:var(--colors-green-1)}
.usecase-card__title{font:600 17px/1.3 var(--font-sans);color:var(--colors-headline);margin:0 0 7px}
.usecase-card__body{font:400 14px/1.55 var(--font-sans);color:var(--colors-body);margin:0}

/* ---------------------------------------------------------------- */
/* topic explorer                                                     */
/* ---------------------------------------------------------------- */
.topics__intro{text-align:center;margin-bottom:40px}
.topics__intro .section-heading{margin:12px 0 0}

.topic-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:28px}
.topic-tab{
  cursor:pointer;font:600 14px/1 var(--font-sans);padding:11px 16px;border-radius:8px;
  transition:all .15s ease;background:var(--colors-background);color:var(--colors-body);
  border:1px solid var(--colors-border-subtle);
}
.topic-tab:hover:not(.is-active){background:var(--colors-card)}
.topic-tab.is-active{background:var(--colors-blue-1);color:var(--colors-button);border-color:var(--colors-blue-1)}

.topic-panel[hidden]{display:none}
.topic-panel{
  background:var(--colors-card);
  border:1px solid var(--colors-border-subtle);
  border-radius:14px;padding:36px;
  grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;
}
.topic-panel__title{font:600 26px/1.2 var(--font-sans);color:var(--colors-headline);margin:0 0 14px}
.topic-panel__body{font:400 16px/1.6 var(--font-sans);color:var(--colors-body);margin:0 0 20px}
.topic-panel__bullets{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:11px}
.topic-panel__bullets li{display:flex;gap:11px;align-items:flex-start;font:400 15px/1.5 var(--font-sans);color:var(--colors-body)}
.topic-panel__bullets svg{flex:none;margin-top:2px}

.topic-visual{
  position:relative;min-height:260px;background:var(--colors-surface);
  border:1px solid var(--colors-border-subtle);
  border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:22px;
}
.topic-mockup{width:100%}
.designer-shot{margin:0;width:100%;display:flex;align-items:center;justify-content:center}
.designer-shot img{width:100%;height:auto;border-radius:8px;filter:drop-shadow(0 20px 38px color-mix(in srgb, var(--colors-shadow) 40%, transparent))}
.designer-shot--wrd img{filter:drop-shadow(0 24px 40px color-mix(in srgb, var(--colors-shadow) 45%, transparent))}
.topic-mockup[hidden]{display:none}

/* mockup: cross-platform */
.mockup-platforms{display:flex;flex-direction:column;gap:9px}
.mockup-platforms__label{font:600 9px/1 var(--font-sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--colors-muted);margin-bottom:2px}
.mockup-platform-row{
  display:flex;align-items:center;gap:10px;background:var(--colors-surface);
  border:1px solid var(--colors-border-subtle);border-radius:8px;padding:9px 11px;
}
.mockup-platform-row__icon{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.mockup-platform-row__icon--blue{background:color-mix(in srgb, var(--colors-blue-1) 16%, transparent);color:var(--colors-blue-1)}
.mockup-platform-row__icon--teal{background:color-mix(in srgb, var(--colors-teal-1) 16%, transparent);color:var(--colors-teal-1)}
.mockup-platform-row__icon--green{background:color-mix(in srgb, var(--colors-green-1) 16%, transparent);color:var(--colors-green-1)}
.mockup-platform-row__name{font:600 12px/1 var(--font-sans);color:var(--colors-headline);width:56px}
.mockup-platform-row__bars{flex:1;display:flex;gap:3px;align-items:flex-end;height:22px}
.mockup-platform-row__bars span{width:5px;border-radius:1px}
.mockup-platform-row__bars span:nth-child(odd){background:var(--colors-blue-2)}
.mockup-platform-row__bars span:nth-child(even){background:var(--colors-teal-1)}
.mockup-platform-row__check{color:var(--colors-green-1)}

/* mockup: export flow */
.mockup-flow{display:flex;flex-direction:column;align-items:center;gap:9px}
.mockup-flow__pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pill-tag{
  font:600 10px/1 var(--font-mono);border-radius:5px;padding:5px 10px;border:1px solid transparent;
}
.pill-tag--blue{color:var(--colors-blue-1);background:color-mix(in srgb, var(--colors-blue-1) 12%, transparent);border-color:color-mix(in srgb, var(--colors-blue-1) 30%, transparent)}
.pill-tag--rose{color:var(--colors-rose-1);background:color-mix(in srgb, var(--colors-rose-1) 12%, transparent);border-color:color-mix(in srgb, var(--colors-rose-1) 30%, transparent)}
.pill-tag--green{color:var(--colors-green-1);background:color-mix(in srgb, var(--colors-green-1) 12%, transparent);border-color:color-mix(in srgb, var(--colors-green-1) 30%, transparent)}
.pill-tag--gray{color:var(--colors-gray-300);background:color-mix(in srgb, var(--colors-deep-slate-400) 12%, transparent);border-color:color-mix(in srgb, var(--colors-deep-slate-400) 30%, transparent)}
.mockup-flow__arrow{color:var(--colors-gray-500)}
.mockup-flow__engine{
  display:flex;align-items:center;gap:9px;background:var(--colors-surface);
  border:1px solid color-mix(in srgb, var(--colors-blue-1) 35%, transparent);border-radius:9px;padding:11px 16px;
  box-shadow:0 4px 14px -6px color-mix(in srgb, var(--colors-blue-1) 40%, transparent);
}
.mockup-flow__engine span{font:600 13px/1 var(--font-sans);color:var(--colors-white)}

/* mockup: code editor */
.mockup-code{width:100%;border:1px solid color-mix(in srgb, var(--colors-deep-slate-400) 18%, transparent);border-radius:9px;overflow:hidden;background:var(--colors-well-1)}
.mockup-code__titlebar{display:flex;align-items:center;gap:6px;padding:8px 11px;background:var(--colors-well-2);border-bottom:1px solid color-mix(in srgb, var(--colors-deep-slate-400) 14%, transparent)}
.mockup-code__filename{font:500 10px/1 var(--font-mono);color:var(--colors-gray-400)}
.mockup-code__body{padding:16px 18px;font:500 11px/1.95 var(--font-mono)}
.mockup-code__body div{white-space:pre}
.tok-cmd{color:var(--colors-ll-green-400)}
.tok-kw{color:var(--colors-ll-teal-400)}
.tok-txt{color:var(--colors-gray-300)}
.tok-type{color:var(--colors-ll-blue-300)}
.tok-str{color:var(--colors-ll-green-400)}

/* accordion topic variant (kept for completeness / progressive layout option) */
.topic-accordion{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.topic-accordion__item{background:var(--colors-card);border:1px solid var(--colors-border-subtle);border-radius:12px;overflow:hidden}
.topic-accordion__trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px;
  background:transparent;border:none;cursor:pointer;text-align:left;font:600 18px/1.3 var(--font-sans);color:var(--colors-headline);
}
.topic-accordion__label{display:flex;align-items:center;gap:14px}
.topic-accordion__icon{width:30px;height:30px;flex:none}
.topic-accordion__chev{color:var(--colors-muted);transition:transform .2s ease}
.topic-accordion__item[open] .topic-accordion__chev{transform:rotate(180deg)}
.topic-accordion__panel{padding:0 24px 24px 68px}
.topic-accordion__body{font:400 15px/1.6 var(--font-sans);color:var(--colors-body);margin:0 0 16px}

/* ---------------------------------------------------------------- */
/* trial CTA band                                                      */
/* ---------------------------------------------------------------- */
.trial-cta{
  background:var(--colors-well-1);
  border-top:1px solid var(--colors-border-subtle);
  border-bottom:1px solid var(--colors-border-subtle);
  padding:74px 0;position:relative;overflow:hidden;
}
.trial-cta__inner{position:relative;text-align:center}
.trial-cta__title{font:700 40px/1.14 var(--font-sans);letter-spacing:-.6px;color:var(--colors-headline);margin:0 0 14px}
.trial-cta__body{font:400 18px/1.55 var(--font-sans);color:var(--colors-body);margin:0 0 30px;max-width:600px;margin-left:auto;margin-right:auto}
.trial-cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.trial-cta .btn--green{box-shadow:0 12px 28px -8px color-mix(in srgb, var(--colors-shadow) 40%, transparent)}

/* ---------------------------------------------------------------- */
/* who uses                                                            */
/* ---------------------------------------------------------------- */
.who-card{border-top:3px solid var(--colors-blue-1);padding-top:20px}
.who-card--teal{border-top-color:var(--colors-teal-1)}
.who-card--green{border-top-color:var(--colors-green-1)}
.who-card__title{font:600 20px/1.3 var(--font-sans);color:var(--colors-headline);margin:0 0 10px}
.who-card__body{font:400 15px/1.6 var(--font-sans);color:var(--colors-body);margin:0}

/* ---------------------------------------------------------------- */
/* built for developers                                               */
/* ---------------------------------------------------------------- */
.builtfor__grid{align-items:center}
.builtfor__title{font:600 34px/1.18 var(--font-sans);letter-spacing:-.4px;color:var(--colors-headline);margin:12px 0 18px}
.builtfor__copy{font:400 16px/1.62 var(--font-sans);color:var(--colors-body);margin:0 0 16px}
.builtfor__copy:last-child{margin-bottom:0}
.code-card{
  background:var(--colors-surface);border:1px solid var(--colors-border-subtle);
  border-radius:12px;padding:20px;box-shadow:0 30px 60px -25px color-mix(in srgb, var(--colors-shadow) 60%, transparent);
}
.code-card__head{display:flex;gap:6px;align-items:center;margin-bottom:14px}
.code-card__filename{font:500 11px/1 var(--font-mono);color:var(--colors-muted)}
.code-card pre{margin:0;font:400 13px/1.75 var(--font-mono);color:var(--colors-body);white-space:pre-wrap}

/* ---------------------------------------------------------------- */
/* ready to get started                                               */
/* ---------------------------------------------------------------- */
.ready__title{font:600 39px/1.16 var(--font-sans);letter-spacing:-.4px;color:var(--colors-headline);margin:0 auto 16px;max-width:640px}
.ready__body{font:400 17px/1.6 var(--font-sans);color:var(--colors-body);margin:0 auto 30px;max-width:640px}
.ready__trial-embed{
  max-width:1080px;margin:0 auto;border-radius:12px;overflow:hidden;
  border:1px solid var(--colors-border-subtle);background:var(--colors-card);
  box-shadow:0 20px 44px -24px color-mix(in srgb, var(--colors-shadow) 40%, transparent);
}
.ready__trial-embed iframe{display:block;width:100%;height:640px;min-height:400px;border:0}
.ready__footnote{font:400 14px/1.5 var(--font-sans);color:var(--colors-muted);margin:26px auto 0;max-width:640px}

/* ---------------------------------------------------------------- */
/* FAQ                                                                 */
/* ---------------------------------------------------------------- */
.faq{background:var(--colors-background);position:relative;z-index:0;overflow:hidden}
.faq__intro{text-align:center;margin-bottom:48px}
.faq__intro .section-heading{margin:0}
.faq-group{margin-bottom:36px}
.faq-group:last-child{margin-bottom:0}
.faq-group__title{font:600 13px/1 var(--font-sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--colors-teal-1);margin:0 0 14px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--colors-card);border:1px solid var(--colors-border-subtle);border-radius:10px;padding:0 20px}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;font:600 16px/1.4 var(--font-sans);color:var(--colors-headline)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item__chev{flex:none;transition:transform .2s ease;color:var(--colors-muted)}
.faq-item[open] .faq-item__chev{transform:rotate(180deg)}
.faq-item__answer{font:400 15px/1.62 var(--font-sans);color:var(--colors-body);margin:0;padding:0 0 20px}

/* ---------------------------------------------------------------- */
/* footer                                                              */
/* ---------------------------------------------------------------- */
.site-footer{background:var(--colors-well-2);color:var(--colors-body);padding:60px 0 30px}
.footer-grid{grid-template-columns:1.5fr repeat(3,1fr);gap:48px}
.footer-about p{font:400 13px/1.6 var(--font-sans);color:var(--colors-muted);margin:16px 0 0;max-width:300px}
.footer-about__social{display:flex;gap:14px;margin-top:18px}
.footer-about__newsletter{margin-top:20px}
.footer-about__social a{display:inline-flex;color:var(--colors-muted);transition:color .15s ease}
.footer-about__social a:hover{color:var(--colors-headline)}
.footer-col-title{font:600 11px/1 var(--font-sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--colors-headline);margin-bottom:14px}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.footer-links a{font:400 13px/1.4 var(--font-sans);color:var(--colors-body);text-decoration:none;transition:color .15s ease}
.footer-links a[target="_blank"]::after,
.footer-bottom__links a[target="_blank"]::after{
  content:"↗";display:inline-block;margin-left:4px;font-size:.8em;opacity:.55;transform:translateY(-1px);
}
.footer-links a:hover{color:var(--colors-headline)}
.footer-bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--colors-border-subtle);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:400 12px/1 var(--font-sans);color:var(--colors-muted);
}
.footer-bottom__left{display:flex;gap:16px;flex-wrap:wrap}
.footer-bottom__links{display:flex;gap:20px;flex-wrap:wrap}
.footer-bottom__links a{color:var(--colors-muted);text-decoration:none;transition:color .15s ease}
.footer-bottom__links a:hover{color:var(--colors-headline)}

/* ---------------------------------------------------------------- */
/* responsive                                                          */
/* ---------------------------------------------------------------- */
@media(max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr!important}
  .nav__links{display:none!important}
  .nav-toggle{display:inline-flex!important}
  .trust-bar__row{grid-template-columns:repeat(2,auto);column-gap:36px;row-gap:24px}
  .trust-item{gap:14px}
  .trust-item:not(:nth-child(4n+1))::before{content:none}
  .trust-item:not(:nth-child(2n+1))::before{content:"";position:absolute;left:-18px;top:8%;bottom:8%;width:1px;background:var(--colors-border-subtle)}
  .trust-item--award img{height:64px;width:auto}
  .trust-item:not(.trust-item--award) img{width:168px;height:auto}
  .trust-item__text{max-width:170px}
  .trust-item__text strong{font-size:15px}
  .trust-item__text span{font-size:12px}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr!important}
  .hero__title{font-size:40px!important;letter-spacing:-.8px!important}
  .section,.site-header,.site-footer,.trust-bar,.testimonial,.trial-cta{padding-left:0}
  .container{padding-left:20px!important;padding-right:20px!important}
  .trust-bar__row{grid-template-columns:1fr;justify-items:center;row-gap:20px}
  .trust-item{gap:12px}
  .trust-item--award{flex-direction:column;text-align:center}
  .trust-item--award .trust-item__text{align-items:center;text-align:center}
  .trust-item::before{content:none!important}
  .trust-item--award img{height:52px;width:auto}
  .trust-item:not(.trust-item--award) img{width:150px;height:auto}
  .trust-item__text strong{font-size:13px}
  .trust-item__text span{font-size:11px}
}