/* Startseite: Problem, Produktdemo, Vertiefung.

   .poster   Der Hero. Links das Problem und das Angebot, rechts eine kleine
             Produktdemo: die Illustration mit vier Situationen, darunter vier
             Chips und das Handy des Kindes, das ins Bild ragt. Symbol,
             Sprechblase und Chip waehlen dieselbe Situation.
   .stage    "Freiraum unterscheidet": dieselben Situationen als Liste, rechts
             Problem, Loesung und Funktion, dazwischen ein Pfeil.

   Ziel: Problem in 3 Sekunden, Produkt in 8, Vertrauen in 15 -- ohne Scrollen.
   -------------------------------------------------------------------------- */

/* --- Hero: Raster ----------------------------------------------------------
   Schmal: Headline, Demo, dann Text und Angebot -- so steht auf dem Handy die
   Demo noch im ersten Bildschirm, der Button kommt danach (die Leiste unten
   fuehrt ohnehin zur Anfrage). Breit: Text links, Demo rechts ueber zwei Zeilen.
   -------------------------------------------------------------------------- */
.poster{
  display:grid;
  grid-template-areas:"copy" "demo" "aside";
  gap:1.5rem;
  padding-block:1.4rem 2.6rem;
}
.poster__pitch{display:contents}
.poster__copy{grid-area:copy}
.poster__aside{grid-area:aside}
.poster__demo{grid-area:demo}

.poster__eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);margin:0 0 .9rem}
.poster h1{font-family:var(--sans);font-size:clamp(2.35rem,9vw,3.6rem);font-weight:700;letter-spacing:-.06em;line-height:1;margin:0;text-wrap:balance}
/* Die erste Zeile ist ein Zitat des Kindes und sieht deshalb aus wie die
   Sprechblasen im Bild: Serif, kursiv, in Anfuehrungszeichen. */
.poster__ruf{display:block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.025em}
.poster h1 em{font-family:var(--serif);font-weight:400;color:#a44f2b}
.poster h1>span{font-size:.6em;letter-spacing:-.045em;display:block;margin-top:.32em;color:var(--forest)}
.poster__keeps{max-width:38rem;margin:1.25rem 0 0;padding-left:1rem;border-left:2px solid var(--sage-line);font-size:.93rem;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.poster__keeps strong{color:var(--forest);font-weight:700}
.poster__intro{font-size:1.02rem;line-height:1.6;max-width:34rem;margin:0 0 1.2rem;color:var(--ink-2);text-wrap:pretty}
.poster__intro b{color:var(--ink);font-weight:600}
.poster__actions{display:flex;flex-direction:column;align-items:stretch;gap:.65rem}
.poster__actions .btn{gap:1rem;white-space:normal;text-align:center}

/* Vier kurze Zusagen: einzeln lesbar, ohne Punktgewitter. */
.poster__trust{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1rem}
.poster__trust li{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;line-height:1.3;color:var(--ink-2)}
.poster__trust li::before{content:"";width:.95rem;height:.95rem;flex:none;border-radius:50%;
  background:var(--sage-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.2 4.9-5' fill='none' stroke='%23294437' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* --- Hero: die Demo ---------------------------------------------------------
   Container: Alles in der Demo misst sich an ihrer eigenen Breite (cqw), nicht
   am Fenster. Oben das Bild, darunter die Ueberschrift ueber die volle Breite
   und darunter links die Chips, rechts das Handy. Das Handy beginnt auf jeder
   Breite an derselben Kante wie die Ueberschrift und ragt nicht ins Bild.
   -------------------------------------------------------------------------- */
.poster__demo{
  container-type:inline-size;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"art art" "label label" "try phone";
  column-gap:4cqw;
  min-width:0;
}
.poster__art{grid-area:art;margin:0;position:relative;min-width:0}
.poster__art img,.agreement__figure img{
  width:100%;height:auto;display:block;aspect-ratio:1.7768;object-fit:cover;
  background:#f8ecdc;border-radius:1.2rem;
  box-shadow:0 1.6rem 3rem -1.6rem rgba(41,68,55,.35),0 0 0 1px rgba(41,68,55,.06);
}

/* --- Symbole und Sprechblasen -----------------------------------------------
   Die Symbole der Quelldatei liegen bei 27,9 / 70,9 / 72,5 Prozent der Breite
   und 21,1 / 25,8 / 42,0 / 46,1 Prozent der Hoehe (--ix/--iy inline). Das Bild
   ist hier nie beschnitten, die Prozente gelten also direkt.

   Der Ring liegt genau auf dem Symbol. Die Blase sitzt schraeg daneben, ihre
   spitze Ecke zeigt zum Symbol; sie ist nie breiter als der Platz bis zum
   Bildrand (--platz). Beide waehlen die Situation aus.
   -------------------------------------------------------------------------- */
.poster__spots,.poster__bubbles{position:absolute;inset:0;pointer-events:none}
.poster__spot,.poster__bubble{--sx:calc(var(--ix) * 1%);--sy:calc(var(--iy) * 1%);pointer-events:auto;cursor:pointer}
.poster__spot[data-uses-pin=feeds],.poster__spot[data-uses-pin=games],.poster__spot[data-uses-pin=stream],
.poster__bubble[data-uses-bubble=feeds],.poster__bubble[data-uses-bubble=games],
.poster__bubble[data-uses-bubble=stream]{--tone:#a44f2b}
.poster__spot[data-uses-pin=social],.poster__bubble[data-uses-bubble=social]{--tone:#75623d}

.poster__spot{
  position:absolute;left:calc(var(--sx) + var(--ring-x,0%));top:var(--sy);
  width:8.4%;aspect-ratio:1;min-width:2.2rem;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.95);
  background:color-mix(in srgb,var(--tone,var(--forest)) 10%,transparent);
  box-shadow:0 0 0 .28rem color-mix(in srgb,var(--tone,var(--forest)) 20%,transparent),0 .4rem 1rem rgba(41,68,55,.14);
  transition:transform .3s cubic-bezier(.34,1.28,.5,1),background .2s ease,box-shadow .2s ease;
}
/* Alle vier Bildsymbole bestehen aus Haupticon plus Pausezeichen und haben
   in der Quelldatei dieselbe Kreisflaeche. Der Ring folgt diesem echten
   Durchmesser; das kleinere Minimum verhindert auf sehr schmalen Displays
   einen zu grossen Kreis. */
.poster__spot{width:11.6%;min-width:1.8rem;--ring-x:.55%}
.poster__spot:hover,.poster__spot[data-on]{
  transform:translate(-50%,-50%) scale(1.1);
  background:color-mix(in srgb,var(--tone,var(--forest)) 22%,transparent);
  box-shadow:0 0 0 .42rem color-mix(in srgb,var(--tone,var(--forest)) 30%,transparent),0 .5rem 1.2rem rgba(41,68,55,.18);
}
.poster__spot:hover,.poster__spot[data-on]{transform:translate(-50%,-50%)}

.poster__bubble{
  position:absolute;
  width:max-content;max-width:min(var(--platz),15rem);
  padding:.42em .8em .42em .5em;
  border-radius:1.1em;
  font-family:var(--serif);font-style:italic;font-size:clamp(.7rem,2cqw,1rem);line-height:1.25;letter-spacing:-.01em;
  color:var(--ink);background:var(--paper);
  border:1.5px solid var(--tone,var(--forest));
  box-shadow:0 .5rem 1.2rem rgba(41,68,55,.16);
  text-wrap:balance;
  transition:transform .3s cubic-bezier(.34,1.28,.5,1),background .2s ease,color .2s ease,box-shadow .2s ease;
}
.poster__bubble[data-side=l]{right:calc(100% - var(--sx) + 4%);--platz:calc(var(--sx) - 6%)}
.poster__bubble[data-side=r]{left:calc(var(--sx) + 4%);--platz:calc(100% - var(--sx) - 6%)}
.poster__bubble[data-vert=t]{bottom:calc(100% - var(--sy) + 2.5%)}
.poster__bubble[data-vert=b]{top:calc(var(--sy) + 2.5%)}
.poster__bubble[data-side=l][data-vert=t]{border-bottom-right-radius:.15em}
.poster__bubble[data-side=l][data-vert=b]{border-top-right-radius:.15em}
.poster__bubble[data-side=r][data-vert=t]{border-bottom-left-radius:.15em}
.poster__bubble[data-side=r][data-vert=b]{border-top-left-radius:.15em}
/* Die Blasen tragen Text und stehen dicht am Bildrand: ein kleiner Zuwachs
   genuegt, ein grosser wuerde sie ueber die Kante schieben. */
.poster__bubble:hover{transform:scale(1.02);box-shadow:0 .7rem 1.5rem rgba(41,68,55,.22)}
.poster__bubble[data-on]{transform:scale(1.02);background:var(--tone,var(--forest));color:var(--paper)}

/* --- Chips ------------------------------------------------------------------
   Keine Box, keine Punkte: vier ruhige Schalter mit dem, was Freiraum in der
   Situation tut. Apricot fuer begrenzt, Waldgruen fuer frei. */
.poster__try{grid-area:try;min-width:0}
.poster__try-hint{margin:.7rem 0 0;font-size:.72rem;line-height:1.5;color:var(--ink-3);max-width:26rem;text-wrap:pretty}
/* Eigene Rasterzeile ueber der vollen Breite: so kann das Handy daneben
   buendig mit dem ersten Kasten beginnen. */
.poster__try-label{grid-area:label;margin:0 0 .7rem;padding-top:1rem;max-width:30ch;font-family:var(--sans);font-size:clamp(1.4rem,2.5vw,1.85rem);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--ink);text-wrap:balance}
.poster__chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.poster__chip{
  --tone:#a44f2b;
  display:flex;align-items:center;gap:.6rem;min-width:0;
  padding:.5rem .7rem;
  font:inherit;text-align:left;color:var(--ink);cursor:pointer;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:.8rem;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease;
}
.poster__chip--frei{--tone:var(--forest)}
.poster__chip--geteilt{--tone:#75623d}
.poster__chip--geteilt .poster__chip-icon{background:linear-gradient(135deg,rgba(164,79,43,.15) 0 50%,rgba(41,68,55,.14) 50%)}
.poster__chip--geteilt[aria-pressed=true] .poster__chip-icon{background:linear-gradient(135deg,#a44f2b 0 50%,var(--forest) 50%)}
.poster__chip:hover{border-color:color-mix(in srgb,var(--tone) 55%,var(--line-strong))}
.poster__chip:focus-visible{outline:3px solid #b1663e;outline-offset:2px}
.poster__chip[aria-pressed=true]{border-color:var(--tone);background:var(--paper-alt);box-shadow:0 .35rem 1rem rgba(41,68,55,.12)}
.poster__chip-icon{flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;color:var(--tone);background:color-mix(in srgb,var(--tone) 12%,transparent)}
.poster__chip-icon svg{width:1.05rem;height:1.05rem}
.poster__chip[aria-pressed=true] .poster__chip-icon{background:var(--tone);color:var(--paper)}
.poster__chip-text{display:grid;min-width:0;line-height:1.2}
.poster__chip-text b{font-size:.86rem;font-weight:700;letter-spacing:-.01em}
.poster__chip-text small{font-size:.74rem;color:var(--ink-3);margin-top:.1rem}
.poster__chip[aria-pressed=true] small{color:var(--tone);font-weight:600}
.poster__more-label{grid-column:1/-1;margin:.18rem 0 -.12rem;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* --- Das Handy in der Demo ------------------------------------------------
   Ein Geraet, eine Groesse: keine Neigung, kein Anheben. Die Hoehe der
   Bildschirmflaeche setzt home-poster.js auf den hoechsten Zustand. */
.poster__phone{grid-area:phone;position:relative;z-index:2;align-self:start;padding-right:3cqw;--geraet:.48}
.uses__device{width:17rem;max-width:none;margin:0;order:0;zoom:var(--geraet);filter:drop-shadow(0 1.4rem 1.6rem rgba(20,42,33,.28))}
.uses__device,.uses__device:hover{transform:none}
.uses__device .phone-hardware__screens{min-height:0;height:var(--schirm-hoehe,auto)}
.uses__device .phone-screen-state{padding:.8rem .9rem}
.uses__device .ps__big{font-size:2.7rem}
.uses__device .ps__big span{font-size:1rem}
.uses__device .ps__big--wort{font-size:1.75rem;line-height:1.1}
.uses__device .ps__sub{font-size:.9rem}
.uses__device .ps__bar{margin:.9rem 0 .8rem}
.uses__device .ps__notice{padding:.65rem .75rem;font-size:.84rem}
/* Beim Ueberfahren wird schnell gewechselt: der abgehende Bildschirm
   verschwindet sofort, sonst stehen zwei Zahlen uebereinander. */
.uses__device .phone-screen-state{transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.uses__device .phone-screen-state:not(.active){transition:none;opacity:0}

/* Eine knappe App-Klammer macht das Mock-up als Freiraum-Oberflaeche
   erkennbar. Der Inhalt bleibt bewusst auf Marke, Tagesbezug und Erreichbarkeit
   begrenzt, damit die jeweils aktive Regel weiterhin die Hauptsache ist. */
.poster__appbar{
  display:flex;align-items:center;gap:.55rem;margin:.05rem .9rem 0;
  padding:.35rem 0 .55rem;border-bottom:1px solid var(--line);
  color:var(--forest);
}
.poster__appbar img{width:1.45rem;height:1.45rem;display:block;flex:none}
.poster__appbar>span{display:grid;line-height:1.05}
.poster__appbar b{font-size:.88rem;letter-spacing:-.02em}
.poster__appbar small{margin-top:.16rem;font-size:.62rem;font-weight:500;color:var(--ink-3)}
.poster__phone-safe{
  display:flex;align-items:center;gap:.5rem;margin:.35rem .9rem 1.05rem;
  padding:.48rem .58rem;border-radius:.7rem;background:var(--sage-soft);
  color:var(--forest);line-height:1.08;
}
.poster__phone-safe-dot{width:.55rem;height:.55rem;flex:none;border-radius:50%;background:var(--forest);box-shadow:0 0 0 .22rem rgba(41,68,55,.12)}
.poster__phone-safe>span:last-child{display:grid;min-width:0}
.poster__phone-safe b{font-size:.72rem}
.poster__phone-safe small{margin-top:.15rem;font-size:.59rem;color:var(--ink-2);white-space:nowrap}

/* Im Hero soll das Mock-up wie ein echtes Smartphone aussehen. Die alte
   inhaltsbasierte Hoehe machte es fast quadratisch. Das feste Seitenverhaeltnis
   gilt bewusst nur fuer Variante A; andere Geraetedemos behalten ihre eigene
   Geometrie. */
.poster__phone .uses__device{aspect-ratio:9 / 18.7}
.poster__phone .uses__device .phone-hardware__screen{height:100%;padding-bottom:0}
.poster__phone .uses__device .phone-hardware__screens{flex:1;height:auto;min-height:0}
.poster__phone .uses__device .phone-screen-state,
.poster__phone .uses__device .phone-screen-state.active{position:absolute;inset:0;height:auto}
.poster__phone .uses__device .phone-hardware__screen::after{
  content:"";position:absolute;z-index:4;left:50%;bottom:.55rem;
  width:3.4rem;height:.22rem;border-radius:999px;
  background:rgba(32,53,41,.34);transform:translateX(-50%);
}

/* Schmale Demo: Im Bild bleiben vier kompakte Nummern an ihren Symbolen. Der
   vollstaendige Satz steht in einer eigenen Zeile unter der Illustration und
   kann deshalb weder Bildmotive noch Symbole verdecken. */
@container (max-width:30rem){
  /* Schmale Demo: Die vier Saetze stehen mit Text im Bild, die Nummern
     entfallen. Die Blasen halten sich an ihrer Bildseite und bleiben
     dadurch von der Person in der Mitte weg. */
  .poster__bubble{
    font-size:clamp(.52rem,2.6cqw,.68rem);padding:.3em .55em;
    border-width:1.5px;border-radius:.9em;max-width:min(var(--platz),44cqw);
    box-shadow:0 .3rem .8rem rgba(41,68,55,.18);
  }
  .poster__bubble[data-side=l]{right:calc(100% - var(--sx) + 3%);--platz:calc(var(--sx) - 4%)}
  .poster__bubble[data-side=r]{left:calc(var(--sx) + 3%);--platz:calc(100% - var(--sx) - 4%)}
  .poster__bubble[data-vert=t]{bottom:calc(100% - var(--sy) + 1%)}
  .poster__bubble[data-vert=b]{top:calc(var(--sy) + 1%)}
  .poster__chips{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .poster__chip{padding:.4rem .6rem}
  .poster__chip--extra{padding:.36rem .55rem}
  .poster__try-label{padding-top:.8rem}
}

/* Das Elternraster liegt auf .poster__demo selbst und kann deshalb nicht in
   seiner eigenen Container-Abfrage umgebaut werden. Auf schmalen Viewports
   bekommt die Statuszeile eine echte Reihe zwischen Bild und Bedienung.
   Das Handy ragt hier nicht ins Bild, sondern beginnt buendig mit der
   Statuszeile. */
@media(max-width:33.999em){
  .poster__demo{grid-template-areas:"art art" "label label" "try phone"}
}

/* --- Freiraum unterscheidet --------------------------------------------- */
.stage{
  display:grid;
  grid-template-areas:"head" "uses" "pfeil" "panel";
  gap:1.2rem;
  padding-block:2.4rem 3.4rem;
  scroll-margin-top:5rem;
  position:relative;
}
.stage__head{grid-area:head;max-width:44rem}
.stage__head h2{font-family:var(--sans);font-size:clamp(1.85rem,5.8vw,3rem);font-weight:700;letter-spacing:-.05em;line-height:1.08;margin:0 0 .7rem}
.stage__head h2 em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--forest)}
.stage__lead{font-size:.98rem;line-height:1.6;color:var(--ink-2);margin:0;max-width:40rem;text-wrap:pretty}

/* Der Pfeil. Untereinander ein Pfeil nach unten mit Satz, nebeneinander (ab
   64 em) eine Linie von der gewaehlten Zeile bis an die Erklaerung.
   home-poster.js setzt --px/--pw/--py aus den gemessenen Kanten und data-ton. */
.stage__pfeil{grid-area:pfeil;--ton:var(--forest);display:grid;justify-items:center;margin:-.3rem 0 -.6rem}
.stage__pfeil[data-ton=zeit]{--ton:#a44f2b}
.stage__pfeil[data-ton=geteilt]{--ton:#75623d}
.stage__pfeil-text{font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--ton);margin-bottom:.35rem;transition:color .2s ease}
.stage__pfeil::after{content:"";order:2;width:2px;height:1.2rem;border-radius:2px 2px 0 0;background:var(--ton)}
.stage__pfeil::before{content:"";order:3;width:0;height:0;border-left:.45rem solid transparent;border-right:.45rem solid transparent;border-top:.6rem solid var(--ton)}

/* --- Die Liste ----------------------------------------------------------- */
.uses{grid-area:uses;min-width:0}
.uses__list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
/* Streaming hat kein Symbol im Bild und deshalb keine Nummer. */
.uses__plus{margin-top:.4rem;padding-top:.85rem;border-top:1px dashed var(--line-strong)}
.uses__row{
  width:100%;font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  display:grid;align-items:center;gap:0 .7rem;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-areas:"no icon title value";
  padding:.6rem .85rem;min-height:2.9rem;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:.75rem;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.uses__row:hover{border-color:var(--sage)}
.uses__row:focus-visible{outline:3px solid #b1663e;outline-offset:2px}
.uses__row[aria-pressed=true]{border-color:var(--forest);box-shadow:0 .4rem 1.2rem rgba(41,68,55,.12)}
.uses__row--geteilt[aria-pressed=true]{border-color:#75623d}
.uses__no{grid-area:no;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.78rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;background:var(--forest);color:var(--paper)}
.uses__row[data-uses-key=feeds] .uses__no,.uses__row[data-uses-key=games] .uses__no{background:#a44f2b}
.uses__no--plus{background:transparent;color:var(--ink-3);border:1px dashed var(--line-strong);font-weight:600}
.uses__icon{grid-area:icon}
.uses__icon svg{display:block;width:18px;height:18px;color:var(--forest);opacity:.7}
.uses__text{display:contents}
.uses__title{grid-area:title;min-width:0;font-size:.98rem;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.uses__title small{display:block;font-size:.62rem;font-weight:500;letter-spacing:.03em;color:var(--ink-3);margin-top:.15rem;text-transform:none}
.uses__value{grid-area:value;text-align:right;white-space:nowrap;font-size:1rem;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--forest);font-variant-numeric:tabular-nums}
.uses__value small{display:block;font-size:.66rem;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.uses__row--frei .uses__value{font-family:var(--serif);font-style:italic;font-size:.92rem;font-weight:400;letter-spacing:0;color:var(--sage-ink)}

/* --- Die Erklaerung: Problem, Loesung, Funktion ---------------------------- */
.uses__panels{grid-area:panel;min-width:0}
.uses__panel{border-top:2px solid var(--forest)}
.uses__qa{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.6rem;margin:0;padding:.5rem 0;border-top:1px solid var(--line);font-size:.88rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.uses__panel .uses__qa:first-child{border-top:0;padding-top:.6rem}
.uses__qa b{font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding-top:.36rem}
.uses__qa--problem{color:#8f4526}
.uses__qa--problem b{color:#a44f2b}
.uses__note{font-size:.74rem;line-height:1.55;color:var(--ink-3);margin:1rem 0 0;padding-left:.9rem;border-left:2px solid var(--sage-line);max-width:46rem;text-wrap:pretty}

/* --- Groessenstufen ------------------------------------------------------- */
@media(max-width:23.4em){
  .poster__phone{--geraet:.42}
  .uses__row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"no title" "no value";padding:.55rem .7rem;min-height:2.7rem}
  .uses__icon{display:none}
  .uses__value{text-align:left;font-size:.84rem;margin-top:.1rem}
  .uses__value small{display:inline;font-size:.8em}
  .uses__title small{display:none}
  .uses__row--frei .uses__value{font-size:.84rem}
}
@media(min-width:26em){ .poster__phone{--geraet:.52} }
@media(min-width:34em){
  /* Nebeneinander beginnt das Handy wie bisher schon an der Ueberschrift. */
  .poster__phone{grid-row:label-start/try-end;grid-column:2}
  .poster__actions{flex-direction:row;flex-wrap:wrap;align-items:center}
  .poster__actions .btn{width:auto}
  .poster__phone{--geraet:.6}
}
@media(min-width:48em){
  .poster{padding-block:2.2rem 3rem}
  .poster__copy,.poster__aside{max-width:40rem}
  .poster__phone{--geraet:.66}
  .stage{padding-block:3rem 4rem}
}

/* Auf Tablets beginnt das Handy auf Hoehe des Ueberschriftentexts. Dessen
   Innenabstand zur Illustration wird hier als Aussenabstand uebernommen. */
@media(min-width:48em) and (max-width:63.999em){
  .poster__phone{grid-row:label-start/try-end;grid-column:2;margin-top:1rem}
}

/* Breit: zwei klar ausgerichtete Spalten. Der gesamte Textblock beginnt an
   derselben Oberkante wie die Illustration; seine internen Abstaende bilden
   ein eigenes, ruhiges Raster. */
@media(min-width:64em){
  .poster{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    grid-template-areas:"pitch demo";
    grid-template-rows:auto;
    align-items:start;
    column-gap:clamp(2.5rem,4vw,4.5rem);row-gap:0;
    padding-block:2rem 3rem;
  }
  .poster__pitch{grid-area:pitch;display:grid;gap:1.3rem;align-content:start;max-width:40rem}
  .poster__copy,.poster__aside{grid-area:auto;align-self:start}
  .poster__demo{align-self:start}
  .poster__trust{max-width:31rem}
  .poster h1{font-size:clamp(2.6rem,3.9vw,3.6rem)}
  /* Beide Wege bleiben Buttons: gleiche Hoehe, gleiche Kante, gleiche
     Textkante. Ein unterstrichener Textlink darunter las sich als zweite,
     abgeschnittene Buttonkante -- siehe Hinweis bei .btn--ghost. */
  .poster__actions{gap:.6rem .8rem;align-items:center}
  .poster__phone{--geraet:.58;margin-top:1rem}

  .stage{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"head head" "uses panel";
    column-gap:6rem;row-gap:1.8rem;
  }
  /* Die Erklaerung bekommt eine Kante ueber die volle Hoehe der Liste: dort
     endet der Pfeil, egal welche Zeile gewaehlt ist. */
  .uses__panels{align-self:stretch;border-left:2px solid var(--line-strong);padding-left:1.8rem}
  .uses__panel{border-top:0}
  .uses__panel .uses__qa:first-child{padding-top:.2rem}
  .uses__qa{grid-template-columns:5.2rem minmax(0,1fr);font-size:.92rem}
  .uses__title small{display:inline;margin-left:.5rem;font-size:.78rem}

  .stage__pfeil{
    grid-area:auto;position:absolute;margin:0;display:block;
    left:var(--px,0);top:var(--py,0);width:var(--pw,0);height:2px;
    background:var(--ton);border-radius:2px;
    transform:translateY(-50%);
    opacity:calc(min(var(--pw-n,0),1));
    pointer-events:none;
    transition:top .35s cubic-bezier(.16,1,.3,1),background .2s ease,opacity .2s ease;
  }
  .stage__pfeil-text{display:none}
  .stage__pfeil::before{content:"";position:absolute;left:-4px;top:50%;margin:0;width:8px;height:8px;border:0;border-radius:50%;background:var(--ton);transform:translateY(-50%)}
  .stage__pfeil::after{content:"";position:absolute;right:-2px;top:50%;width:0;height:0;border-radius:0;background:none;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-left:.7rem solid var(--ton);transform:translateY(-50%)}
}
@media(min-width:80em){
  .poster__phone{--geraet:.62}
  .stage{column-gap:7rem}
  .uses__row{padding:.7rem 1rem;min-height:3.1rem}
  .uses__title{font-size:1.04rem}
}

@media(prefers-reduced-motion:reduce){
  .poster__spot,.poster__bubble,.poster__chip,.uses__row,.uses__device .phone-screen-state,.stage__pfeil{transition:none}
}

/* --- Das Alltagsproblem -------------------------------------------------- */
.friction{padding-block:3rem 3.5rem;scroll-margin-top:6rem}
.friction__head h2{font-family:var(--sans);font-size:clamp(2.1rem,4.2vw,4rem);font-weight:700;letter-spacing:-.055em;line-height:1.06;margin:.4rem 0 1rem;max-width:20ch}
.friction__head h2 em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--forest)}
.friction__lead{max-width:38rem;color:var(--ink-2);margin:0}
.friction__points{display:grid;gap:2rem;margin-top:2.8rem}
.friction__points article{border-top:2px solid var(--forest);padding-top:.9rem;min-width:0}
.friction__no{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--apricot-alt);margin:0}
.friction__points h3{font-family:var(--sans);font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:.5rem 0 .6rem}
.friction__points p{font-size:.98rem;line-height:1.62;color:var(--ink-2);margin:0 0 .8rem;max-width:34rem}
.friction__insight{margin:3rem 0 0;padding-left:1.3rem;border-left:3px solid var(--apricot)}
.friction__insight-kicker{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .7rem}
.friction__insight-lead{font-family:var(--serif);font-size:clamp(1.35rem,2.8vw,2.15rem);line-height:1.3;letter-spacing:-.02em;color:var(--forest);margin:0}
.friction__insight>p:not(.friction__insight-kicker){font-size:.95rem;line-height:1.65;color:var(--ink-2);margin:1rem 0 0;max-width:44rem}
.friction__bridge{margin:2.4rem 0 0;font-size:1.05rem;line-height:1.6;max-width:40rem}
.friction__bridge strong{color:var(--forest)}
@media(min-width:60em){
  .friction{padding-block:4rem 4.5rem}
  .friction__head{display:grid;grid-template-columns:1.25fr 1fr;column-gap:4rem;align-items:end}
  .friction__head>.poster__eyebrow{grid-column:1/-1}
  .friction__lead{padding-bottom:.5rem}
  .friction__points{grid-template-columns:1fr 1fr;gap:3rem}
  .friction__insight{margin-top:3.5rem;padding-left:2rem}
}

/* --------------------------------------------------------------------------
   Wirkung ohne soziale Nebenwirkung.
   Zwei Karten nebeneinander: die stumpfe Komplettsperre und die feine Grenze.
   Die linke Karte bleibt bewusst blass, die rechte traegt die Marke.
   -------------------------------------------------------------------------- */
.sideeffect{padding-block:3rem 3.5rem;scroll-margin-top:6rem}
.sideeffect__head h2{font-family:var(--sans);font-size:clamp(2.1rem,4.2vw,4rem);font-weight:700;letter-spacing:-.055em;line-height:1.06;margin:.4rem 0 1rem;max-width:18ch}
.sideeffect__head h2 em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--forest)}
.sideeffect__lead{max-width:42rem;color:var(--ink-2);line-height:1.65;margin:0}
.sideeffect__compare{display:grid;gap:1.4rem;margin-top:2.6rem}
.sideeffect__card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-lg);padding:1.6rem 1.5rem;margin:0;min-width:0}
.sideeffect__card h3{font-family:var(--sans);font-size:1.3rem;font-weight:700;letter-spacing:-.025em;line-height:1.18;margin:.5rem 0 1rem}
.sideeffect__card ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.sideeffect__card li{position:relative;padding-left:1.6rem;font-size:.97rem;line-height:1.55;color:var(--ink-2)}
.sideeffect__card li::before{position:absolute;left:0;top:-.02em;font-weight:700}
.sideeffect__tag{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0;color:var(--ink-3)}
.sideeffect__cost{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.4;margin:1.3rem 0 0;margin-top:auto;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--ink-3)}

.sideeffect__card--blunt{background:var(--paper-alt);opacity:.92}
.sideeffect__card--blunt li::before{content:"\00D7";color:#a44f2b}

.sideeffect__card--fine{border-color:var(--forest);border-top-width:3px}
.sideeffect__card--fine .sideeffect__tag{color:var(--forest)}
.sideeffect__card--fine li::before{content:"\2713";color:var(--forest)}
.sideeffect__cost--good{color:var(--forest)}

.sideeffect__close{max-width:46rem;font-size:1.05rem;line-height:1.65;color:var(--ink-2);margin:2.4rem 0 0}
.sideeffect__close strong{color:var(--forest)}

@media(min-width:60em){
  .sideeffect{padding-block:4rem 4.5rem}
  .sideeffect__head{display:grid;grid-template-columns:1.1fr 1fr;column-gap:4rem;align-items:end}
  .sideeffect__head>.poster__eyebrow{grid-column:1/-1}
  .sideeffect__lead{padding-bottom:.4rem}
  .sideeffect__compare{grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem}
  .sideeffect__card{padding:2rem 1.9rem}
}

/* ==========================================================================
   Startseite 2026: kompakte Produkterklaerung nach dem Hero
   ========================================================================== */
[hidden]{display:none!important}
.compact-head{max-width:48rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.compact-head h2,
.boundary h2,
.agreement h2{
  font-family:var(--sans);font-size:clamp(2.1rem,5vw,4rem);font-weight:700;
  letter-spacing:-.055em;line-height:1.04;margin:.35rem 0 1rem;text-wrap:balance
}
.compact-head>p:last-child,
.boundary__lead{
  max-width:42rem;margin:0;color:var(--ink-2);font-size:clamp(1rem,1.6vw,1.12rem);
  line-height:1.65;text-wrap:pretty
}
.compact-head--center{text-align:center;margin-inline:auto}
.compact-head--center>p:last-child{margin-inline:auto}

/* Drei reale Produktmomente mit vollstaendigen App-Screenshots. */
.product-flow{padding-block:clamp(3.5rem,7vw,6.5rem);scroll-margin-top:6rem}
.product-flow__steps{list-style:none;margin:0;padding:0;display:grid;gap:2.4rem}
.product-flow__step{display:grid;gap:1.4rem;align-items:start;min-width:0;padding-top:1.2rem;border-top:1px solid var(--line-strong)}
.product-flow__copy{align-self:start}
.product-flow__no{font-size:.7rem;font-weight:800;letter-spacing:.14em;color:#a44f2b}
.product-flow__copy h3{font-family:var(--sans);font-size:clamp(1.25rem,2.2vw,1.65rem);letter-spacing:-.03em;line-height:1.15;margin:.5rem 0 .55rem}
.product-flow__copy p{max-width:26rem;margin:0;color:var(--ink-2);line-height:1.58;text-wrap:pretty}
.product-flow__shot{width:min(100%,14rem);min-width:0;margin:0;justify-self:center}
.product-flow__screen{display:block;overflow:hidden;border:1px solid var(--line-strong);border-radius:1.25rem;background:var(--paper);box-shadow:0 .8rem 1.8rem rgba(41,68,55,.1)}
.product-flow__screen img{display:block;width:100%;height:auto}
.product-flow__screen:focus-visible{outline:3px solid var(--forest);outline-offset:5px}
.product-flow__shot figcaption{margin-top:.75rem;font-size:.75rem;line-height:1.5;text-align:center;color:var(--ink-2)}
.product-flow__shot figcaption span{color:var(--ink-3)}
.product-flow__details{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--line-strong)}
.product-flow__details summary{cursor:pointer;color:var(--forest);font-weight:600}
.product-flow__details .product-flow__shot{margin:1.5rem auto 0;width:min(100%,16rem)}
@media(min-width:48em){
  .product-flow__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
  .product-flow__step{grid-row:span 2;grid-template-rows:subgrid}
  .product-flow__shot{width:min(100%,16rem);margin-top:.5rem}
}

/* Ruhige Neigung nur auf breiten Ansichten; Beschriftungen bleiben gerade. */
@media(min-width:64em){
  .product-flow__steps .product-flow__screen{transform:rotate(var(--screen-tilt));transition:transform .22s ease,box-shadow .22s ease;transform-origin:50% 65%}
  .product-flow__step:nth-child(1){--screen-tilt:-2deg}
  .product-flow__step:nth-child(2){--screen-tilt:1deg}
  .product-flow__step:nth-child(3){--screen-tilt:2deg}
  .product-flow__steps .product-flow__screen:focus-visible{transform:rotate(0deg)}
}
@media(min-width:64em) and (hover:hover){
  .product-flow__steps .product-flow__screen:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 1rem 2rem rgba(41,68,55,.16)}
}
@media(prefers-reduced-motion:reduce){.product-flow__steps .product-flow__screen{transition:none}}
html[data-screen-lightbox-open]{overflow:hidden}
.screen-lightbox{width:calc(100% - 1.5rem);max-width:64rem;height:calc(100vh - 1.5rem);height:calc(100dvh - 1.5rem);max-height:none;margin:auto;padding:0;border:1px solid var(--line-strong);border-radius:1rem;background:var(--paper);color:var(--forest);box-shadow:0 2rem 6rem rgba(0,0,0,.25);overflow:hidden}
.screen-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.screen-lightbox::backdrop{background:rgba(14,31,25,.76);backdrop-filter:blur(5px)}
.screen-lightbox__header,.screen-lightbox__footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem}
.screen-lightbox__header{border-bottom:1px solid var(--line)}
.screen-lightbox__header h2{margin:0;font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.35;letter-spacing:0}
.screen-lightbox__close,.screen-lightbox__zoom{min-height:44px;padding:.6rem .8rem;border:1px solid var(--line-strong);border-radius:2rem;background:var(--paper);color:var(--forest);font:600 .8rem var(--sans);cursor:pointer;flex-shrink:0}
.screen-lightbox__close span{margin-left:.4rem;font-size:1.15rem}
.screen-lightbox button:focus-visible,.screen-lightbox__viewport:focus-visible{outline:3px solid var(--forest);outline-offset:-3px}
.screen-lightbox__viewport{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:1rem;display:flex;align-items:flex-start;background:var(--paper-alt)}
.screen-lightbox__image{display:block;flex-shrink:0;max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;border-radius:.65rem;box-shadow:0 .5rem 1.5rem rgba(41,68,55,.1)}
.screen-lightbox--zoomed .screen-lightbox__viewport{overflow:hidden;touch-action:none;cursor:grab;user-select:none}
.screen-lightbox--zoomed .screen-lightbox__viewport.is-dragging{cursor:grabbing}
.screen-lightbox--zoomed .screen-lightbox__image{width:min(1080px,max(640px,85vw));max-width:none;max-height:none;margin:0 auto}
.screen-lightbox__footer{border-top:1px solid var(--line)}
.screen-lightbox__footer>span{font-size:.75rem;color:var(--ink-3);text-align:right}
.screen-lightbox__error{margin:auto;text-align:center;color:var(--ink-2)}
.screen-lightbox__image[hidden]{display:none}

/* Das zentrale Produktversprechen: Nutzung begrenzen, Verbindung erhalten. */
.boundary{padding-block:clamp(3.5rem,7vw,6rem);display:grid;gap:2.5rem;align-items:center;scroll-margin-top:6rem}
.boundary h2 em,.agreement h2 em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--forest)}
.boundary__table{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:2rem;overflow:hidden;border:1px solid var(--sage-line);border-radius:var(--radius-lg);background:var(--sage-line)}
.boundary__column{background:var(--paper);padding:1.2rem 1rem}
.boundary__column>p{margin:0 0 .85rem;font-size:.67rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.boundary__column--time>p{color:#a44f2b}.boundary__column--free>p{color:var(--forest)}
.boundary__column ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.boundary__column li{position:relative;padding-left:1.05rem;font-size:.88rem;line-height:1.35;color:var(--ink-2)}
.boundary__column li::before{content:"";position:absolute;left:0;top:.48em;width:.42rem;height:.42rem;border-radius:50%;background:#c16b42}
.boundary__column--free li::before{background:var(--forest)}
.boundary__distinction{margin:1.15rem 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.boundary__distinction strong{color:var(--forest)}
.boundary__note{margin:1rem 0 0;padding-left:1rem;border-left:2px solid var(--sage-line);color:var(--ink-3);font-size:.78rem;line-height:1.55}
.boundary__figure{margin:0}
.boundary__figure img{display:block;width:100%;height:auto;border-radius:clamp(1.2rem,3vw,2rem)}
.boundary__figure figcaption{font-size:.76rem;line-height:1.45;color:var(--ink-3);margin:.7rem .2rem 0}
@media(min-width:60em){.boundary{grid-template-columns:1.02fr .98fr;gap:clamp(3rem,6vw,6rem)}}

/* Einmal vereinbaren statt jeden Abend neu verhandeln. */
.agreement{padding-block:clamp(3.5rem,7vw,6.5rem);display:grid;gap:2.5rem;align-items:center;scroll-margin-top:6rem}
.agreement__figure{margin:0}
.agreement__compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1.8rem}
.agreement__compare>div{min-width:0;padding:1.2rem;border-radius:var(--radius-lg)}
.agreement__compare>div:first-child{border:1px solid #c9bdae;background:#f4f0e9}
.agreement__compare>div:last-child{background:var(--forest);color:var(--paper)}
.agreement__compare span{display:block;margin-bottom:.7rem;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.agreement__compare>div:last-child span{color:var(--sage)}
.agreement__compare p{margin:0;font-family:var(--serif);font-size:clamp(1rem,2vw,1.3rem);line-height:1.38}
.agreement__close{max-width:35rem;margin:1.2rem 0 0;color:var(--ink-2);line-height:1.6}
/* Im HTML steht das Bild nach dem Text, damit es mobil nicht direkt unter dem
   Schulweg-Bild aus #nebenwirkungen landet. Breit bleibt es links (Zickzack). */
@media(min-width:60em){
  .agreement{grid-template-columns:.95fr 1.05fr;gap:clamp(3rem,6vw,6rem)}
  .agreement__figure{order:-1}
}

/* Mitwachsen ohne pseudo-wissenschaftliche Alters- oder Minutenwerte. */
.grow-simple{padding-block:clamp(3.5rem,7vw,6rem);scroll-margin-top:6rem}
.grow-simple__stages{display:grid;gap:1.8rem}
.grow-simple__stages article{position:relative;padding-top:1.25rem;border-top:2px solid var(--sage-line)}
.grow-simple__stages article::before{content:"";position:absolute;top:-.38rem;left:0;width:.65rem;height:.65rem;border-radius:50%;background:var(--forest);box-shadow:0 0 0 .28rem var(--paper-2)}
.grow-simple__stages span,.setup-choice__label{display:block;margin:0 0 .55rem;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-ink)}
.grow-simple__stages h3{font-family:var(--sans);font-size:1.25rem;letter-spacing:-.025em;line-height:1.18;margin:0 0 .5rem}
.grow-simple__stages p{margin:0;color:var(--ink-2);line-height:1.55}
.grow-simple__note{max-width:46rem;margin:2.2rem auto 0;text-align:center;color:var(--forest);font-family:var(--serif);font-size:1.08rem;font-style:italic}
@media(min-width:48em){.grow-simple__stages{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,4rem)}}

/* Ein klarer Startweg fuer den Pilot auf dem bestehenden Android-Geraet. */
.setup-choice{padding-block:clamp(3.5rem,7vw,6.5rem);scroll-margin-top:6rem}
.setup-choice__art{height:clamp(13rem,23vw,18rem);overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:#f7efdf}
.setup-choice__art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%}
.setup-choice__options{display:grid;grid-template-columns:minmax(0,1fr)}
.setup-choice__card{border:1px solid var(--line-strong);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2.2rem);background:var(--paper-alt)}
.setup-choice__card--standard{display:grid;gap:1.5rem;border-color:var(--forest);border-top-width:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);background:color-mix(in srgb,var(--sage-soft) 58%,var(--paper));box-shadow:0 .65rem 1.8rem rgba(41,68,55,.09)}
.setup-choice__card--standard .setup-choice__label{color:var(--forest)}
.setup-choice__card h3,.setup-choice__service h3{font-family:var(--sans);font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.03em;line-height:1.15;margin:0 0 .7rem}
.setup-choice__card-main>p:not(.setup-choice__label),.setup-choice__service p:not(.setup-choice__label){margin:0;color:var(--ink-2);line-height:1.58}
.setup-choice__card ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.setup-choice__card li{position:relative;padding-left:1.35rem;color:var(--ink-2);font-size:.92rem}
.setup-choice__card li::before{content:"✓";position:absolute;left:0;color:var(--forest);font-weight:800}
.setup-choice__service{display:grid;gap:1.3rem;align-items:center;margin-top:1rem;padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--radius-lg);background:var(--forest);color:var(--paper)}
.setup-choice__service .setup-choice__label{color:var(--sage)}
.setup-choice__service p:not(.setup-choice__label){color:rgba(255,255,255,.78);max-width:45rem}
.setup-choice__service .btn{justify-self:start;background:var(--paper);color:var(--forest);border-color:var(--paper)}
.setup-choice__details{margin:1rem 0 0;color:var(--ink-3);font-size:.82rem;line-height:1.5}
.preis-copy{border-top:1px solid var(--line);padding-top:1rem}
@media(min-width:48em){
  .setup-choice__card--standard{grid-template-columns:minmax(0,1.4fr) minmax(14rem,.6fr);gap:clamp(2rem,5vw,4rem);align-items:center}
  .setup-choice__card ul{padding-left:clamp(1.5rem,3vw,2.5rem);border-left:1px solid var(--sage-line)}
  .setup-choice__service{grid-template-columns:minmax(0,1fr) auto;gap:2rem}
}
@media(max-width:30em){
  .boundary__table,.agreement__compare{grid-template-columns:1fr}
}

/* Gruender: Verantwortung zuerst, Lebenslauf nur als leises Trust-Signal. */
.founder-section__head{max-width:48rem;margin-bottom:2.4rem}
.founder-section__head .h2{margin:.35rem 0 0}
.founder__copy h3{max-width:18ch;margin:0;font-family:var(--serif);font-size:clamp(2rem,4vw,3.6rem);font-weight:400;line-height:1.03;letter-spacing:-.035em;color:var(--forest)}
.founder__copy>.lead{max-width:43rem;margin:1.35rem 0 .8rem}
.founder__copy>p:not(.lead){max-width:42rem}
.founder__signals{max-width:42rem;margin:1.6rem 0 1.2rem;padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.founder__signals p{margin:0;font-size:.88rem;line-height:1.5;color:var(--muted)}
.founder__signals strong{display:block;margin-bottom:.2rem;color:var(--forest);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}