/* ============================================================
   Sessions — website (1:1 restyle van sessions.online)
   Design system: pietra / petrol / aubergine · Fraunces / Manrope
   ============================================================ */

:root{
  --pietra-light:#ECE7DC; --pietra-dark:#3E3528; --pietra-soft:#5C5448;
  --pietra-line:rgba(62,53,40,0.14);
  --petrol-light:#8DA4A4; --petrol-medium:#3F6562; --petrol-dark:#244542;
  --aubergine-light:#B59DB5; --aubergine-medium:#5A3163; --aubergine-deeper:#422449;
  --sara-card:#F4F0E7; --sara-card-line:rgba(62,53,40,0.10);
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:40px; --s-6:64px;
  --r-small:4px; --r-base:8px; --r-large:12px; --r-xl:22px;
  --maxw:1200px;
  --shadow:0 4px 16px rgba(62,53,40,0.10);
  --shadow-lg:0 18px 50px rgba(62,53,40,0.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Manrope',sans-serif; background:var(--pietra-light); color:var(--pietra-dark);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.5; -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;}
body::before{content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0.045 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  opacity:0.7; mix-blend-mode:multiply;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5); position:relative; z-index:2;}
.f{font-family:'Fraunces',serif;}
.eyebrow{font-family:'Manrope',sans-serif; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--pietra-soft);}
em{font-style:italic; color:var(--aubergine-medium);}

/* Buttons */
.btn{font-family:'Manrope',sans-serif; font-weight:600; font-size:15px;
  background:var(--aubergine-medium); color:var(--pietra-light); padding:12px 22px;
  border-radius:var(--r-base); text-decoration:none; border:none; cursor:pointer;
  transition:background .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1);
  display:inline-flex; align-items:center; gap:8px;}
.btn:hover{background:var(--aubergine-deeper); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--aubergine-medium); border:1px solid var(--aubergine-medium);}
.btn-ghost:hover{background:var(--aubergine-medium); color:var(--pietra-light);}
.arrow{width:16px; height:16px;}

/* Announcement */
.announce{background:var(--petrol-dark); color:var(--pietra-light); text-align:center;
  font-size:13px; font-weight:500; letter-spacing:0.04em; padding:9px 16px; position:relative; z-index:15;}

/* Nav — plain wordmark logo (no icon, no dot) */
header.nav{position:sticky; top:0; z-index:30; background:rgba(236,231,220,0.92);
  backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid var(--pietra-line);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:var(--s-3) var(--s-5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);}
.wordmark{font-family:'Fraunces',serif; font-weight:500; font-variation-settings:"SOFT" 60,"opsz" 22;
  color:var(--aubergine-medium); font-size:23px; letter-spacing:-0.005em; text-decoration:none;}
.nav-links{display:flex; gap:var(--s-4); align-items:center;}
.nav-item{position:relative;}
.nav-item > a, .nav-item > button{color:var(--pietra-dark); text-decoration:none;
  font-family:'Manrope',sans-serif; font-size:15px; font-weight:500; background:none; border:none;
  cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:6px 2px;}
.nav-item > a:hover, .nav-item > button:hover{color:var(--aubergine-medium);}
.chev{width:11px; height:11px; opacity:.6; transition:transform .2s;}
.nav-item:hover .chev{transform:rotate(180deg);}
.dropdown{position:absolute; top:100%; left:-14px; margin-top:8px; min-width:190px;
  background:var(--pietra-light); border:1px solid var(--pietra-line); border-radius:var(--r-large);
  box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility .18s; z-index:40;}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{opacity:1; visibility:visible; transform:none;}
.dropdown a{display:block; padding:9px 12px; border-radius:var(--r-base); color:var(--pietra-dark);
  text-decoration:none; font-size:14px; font-weight:500;}
.dropdown a:hover{background:rgba(90,49,99,0.08); color:var(--aubergine-medium);}
.nav-right{display:flex; align-items:center; gap:var(--s-3);}
.account{width:38px; height:38px; border-radius:50%; border:1px solid var(--aubergine-medium);
  display:flex; align-items:center; justify-content:center; color:var(--aubergine-medium); text-decoration:none; flex:none;}
.account:hover{background:var(--aubergine-medium); color:var(--pietra-light);}
.account svg{width:18px; height:18px;}
.lang-switch{font-size:13px; font-weight:600; color:var(--pietra-soft); text-decoration:none; letter-spacing:0.04em;}
.lang-switch:hover{color:var(--aubergine-medium);}

/* Hamburger — verschijnt zodra de desktop-nav verdwijnt */
.nav-burger{display:none; width:44px; height:44px; flex:none; background:none; border:none;
  cursor:pointer; padding:11px 10px; flex-direction:column; justify-content:space-between;}
.nav-burger span{display:block; height:2px; width:100%; background:var(--aubergine-medium);
  border-radius:2px; transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* Drawer */
.drawer{position:fixed; inset:0; z-index:60; background:var(--pietra-light);
  display:flex; flex-direction:column; overflow-y:auto;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);}
.drawer[hidden]{display:none;}
.drawer.open{opacity:1; transform:none; pointer-events:auto;}
.drawer-head{display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-3) 20px; border-bottom:1px solid var(--pietra-line);}
.drawer-close{width:44px; height:44px; flex:none; background:none; border:none; cursor:pointer;
  color:var(--aubergine-medium); display:flex; align-items:center; justify-content:center;}
.drawer-close svg{width:22px; height:22px;}
.drawer-nav{flex:1; padding:var(--s-3) 20px;}
.acc{border-bottom:1px solid var(--pietra-line);}
.acc-head{width:100%; min-height:52px; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Manrope',sans-serif; font-size:17px; font-weight:500; color:var(--pietra-dark);
  padding:14px 0; text-align:left;}
.acc-head .chev{width:16px; height:16px; opacity:.55; transition:transform .3s cubic-bezier(.4,0,.2,1);}
.acc-head[aria-expanded="true"] .chev{transform:rotate(180deg);}
.acc-body{display:none; padding-bottom:var(--s-2);}
.acc-body.open{display:block;}
.acc-body a{display:block; min-height:44px; display:flex; align-items:center;
  padding:6px 0 6px 14px; color:var(--pietra-soft); text-decoration:none; font-size:16px;}
.acc-body a:active{color:var(--aubergine-medium);}
.acc-link{display:flex; align-items:center; min-height:52px; padding:14px 0;
  border-bottom:1px solid var(--pietra-line); color:var(--pietra-dark);
  text-decoration:none; font-size:17px; font-weight:500;}
.drawer-foot{padding:var(--s-4) 20px calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top:1px solid var(--pietra-line);}
.drawer-foot .btn{width:100%; justify-content:center; min-height:48px;}
.drawer-meta{display:flex; gap:var(--s-4); justify-content:center; margin-top:var(--s-3);}
.drawer-meta a{min-height:44px; display:flex; align-items:center;}

@media(max-width:991px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-right .lang-switch, .nav-right .account{display:none;}
}
@media(min-width:992px){
  .drawer{display:none !important;}
}

/* Hero */
.hero{padding:var(--s-4) 0 var(--s-6);}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); align-items:center;}
.hero h1{font-family:'Fraunces',serif; font-weight:500; font-variation-settings:"SOFT" 70,"opsz" 60;
  font-size:clamp(34px,4.4vw,64px); line-height:1.05; letter-spacing:-0.015em; margin:0 0 var(--s-4); max-width:16ch;}
.hero .sub{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(19px,1.9vw,26px); line-height:1.25;
  color:var(--pietra-soft); max-width:34ch; margin-bottom:var(--s-5); font-variation-settings:"SOFT" 60,"opsz" 26;}
@media(max-width:991px){.hero-grid{grid-template-columns:1fr; gap:var(--s-5);}}

/* Hero stage system — two rotating animations + dots */
.hero-viz{display:flex; flex-direction:column; align-items:center; gap:var(--s-4);}
.stage-wrap{position:relative; width:100%; min-height:566px; display:flex; align-items:center; justify-content:center;}
.hero-stage{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1), visibility .6s;}
.hero-stage.active{opacity:1; visibility:visible; transform:none;}
.hero-dots{display:flex; gap:10px; align-items:center;}
.hero-dots .dot{width:9px; height:9px; padding:0; border:none; border-radius:50%; background:var(--pietra-line);
  cursor:pointer; transition:background .3s, width .3s;}
.hero-dots .dot:hover{background:var(--aubergine-light);}
.hero-dots .dot.active{background:var(--aubergine-medium); width:24px;}
.hero-dots .dot.active:hover{background:var(--aubergine-medium);}

/* Guide-cursor — petrol pointer that clicks through the flow */
.hero-cursor{position:absolute; left:0; top:0; z-index:12; pointer-events:none; opacity:0;
  transform:translate(-80px,-80px);
  transition:transform 1s cubic-bezier(.4,0,.2,1), opacity .5s cubic-bezier(.4,0,.2,1);}
.hero-cursor.show{opacity:1;}
.hero-cursor .cur-arrow{position:absolute; left:-3px; top:-2px; width:30px; height:30px;
  fill:var(--petrol-medium); stroke:var(--pietra-light); stroke-width:1.1; stroke-linejoin:round;
  filter:drop-shadow(0 2px 5px rgba(36,69,66,0.45));}
.hero-cursor .cur-ripple{position:absolute; left:-7px; top:-6px; width:30px; height:30px; border-radius:50%;
  background:var(--petrol-medium); opacity:0; transform:scale(.3);}
.hero-cursor.clicking .cur-ripple{animation:cur-click .55s ease-out;}
.hero-cursor.clicking .cur-arrow{animation:cur-press .28s ease-out;}
/* While dragging the slider the cursor tracks the thumb tightly (no glide) */
.hero-cursor.drag{transition:opacity .3s;}
.hero-cursor.drag .cur-arrow{transform:scale(.9);}
/* form field: blinking caret while the cursor "types" */
.app-field.typing::after{content:''; display:inline-block; width:2px; height:1em; margin-left:1px;
  background:var(--aubergine-medium); vertical-align:-2px; animation:caret-blink .9s steps(1) infinite;}
@keyframes caret-blink{0%,50%{opacity:1;}50.01%,100%{opacity:0;}}
.app-field:empty{min-height:1.5em;}
@keyframes cur-click{0%{opacity:.45; transform:scale(.3);}100%{opacity:0; transform:scale(1.7);}}
@keyframes cur-press{0%,100%{transform:scale(1);}45%{transform:scale(.8);}}

/* ============================================================
   HERO ANIMATION 1 — CLIENT APP (phone, aubergine)
   Faithful to the Sessions client components.
   ============================================================ */
.phone{width:270px; max-width:100%; background:var(--pietra-light); border:2px solid var(--pietra-dark);
  border-radius:36px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;}
.phone-inner{position:relative; height:540px;}
.app-screen{position:absolute; inset:0; padding:26px 20px 22px;
  display:flex; flex-direction:column; opacity:0; transform:translateY(8px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); pointer-events:none;}
.app-screen.active{opacity:1; transform:none; pointer-events:auto;}
/* top-bar: wordmark-slot | presence | slot (3-col grid) */
.app-top{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:16px; margin-bottom:18px;}
.app-presence{grid-column:2; width:10px; height:10px; border-radius:50%; background:var(--aubergine-medium);
  animation:breath 10s cubic-bezier(.4,0,.4,1) infinite;}
@keyframes breath{0%{transform:scale(.85);opacity:.55;}40%{transform:scale(1.5);opacity:1;}100%{transform:scale(.85);opacity:.55;}}
.app-mid{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-3); min-height:0;}
.app-h{font-family:'Fraunces',serif; font-weight:500; font-size:24px; line-height:1.15;
  font-variation-settings:"SOFT" 70,"opsz" 24; color:var(--pietra-dark); margin-bottom:18px;}
.app-q{text-align:left;}
.app-name{color:var(--aubergine-light); font-variation-settings:"SOFT" 80,"opsz" 24;}
.app-sub{font-family:'Fraunces',serif; font-style:italic; font-size:16px; color:var(--pietra-soft); line-height:1.5;}
.app-intro{font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:16.5px; color:var(--pietra-soft);
  line-height:1.6; font-variation-settings:"SOFT" 55,"opsz" 17; margin-bottom:12px;}
.app-instruct{font-size:13px; color:var(--pietra-soft); margin-bottom:14px;}
.app-cta{margin-top:0; background:var(--aubergine-medium); color:var(--pietra-light); border-radius:var(--r-base);
  padding:13px 22px; text-align:center; font-weight:600; font-size:15px; display:flex; align-items:center; justify-content:center; gap:9px;}
.app-cta svg{width:17px; height:17px;}
/* mood slider — gradient rgba(181,157,181,.38) → aubergine, ± steppers */
.app-slider{width:100%; height:8px; border-radius:4px; position:relative;
  background:linear-gradient(90deg,rgba(181,157,181,0.38),var(--aubergine-medium));}
.app-slider::after{content:''; position:absolute; left:var(--pos,70%); top:50%; width:20px; height:20px; border-radius:50%;
  background:var(--aubergine-medium); transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(90,49,99,0.35);}
.app-steppers{display:flex; justify-content:space-between; width:100%; padding:0 2px; color:var(--pietra-dark);}
.app-steppers svg{width:24px; height:24px;}
.app-progress{display:flex; gap:6px; width:100%; margin-top:auto; margin-bottom:20px;}
.app-progress span{flex:1; height:2px; border-radius:1px; background:var(--pietra-line);}
.app-progress span.on{background:var(--aubergine-medium);}
/* emotion tags — selected is SUBTLE (border + tint), never filled */
.tag-cloud{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:auto;}
.etag{font-size:14px; font-weight:500; padding:9px 16px; border-radius:20px; border:1px solid var(--pietra-line); color:var(--pietra-dark);}
.etag.on{border-color:var(--aubergine-medium); background:rgba(90,49,99,0.07); color:var(--aubergine-medium);}
/* transition — statement + subline (no circle) */
.app-transition{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:0 8px;}
.app-statement{font-family:'Fraunces',serif; font-weight:500; font-size:29px; line-height:1.1; letter-spacing:-0.02em;
  color:var(--aubergine-medium); font-variation-settings:"SOFT" 70,"opsz" 30; animation:statement-in .5s cubic-bezier(.4,0,.2,1) both;}
.app-subline{font-family:'Fraunces',serif; font-style:italic; font-size:15px; color:var(--pietra-soft);
  line-height:1.5; animation:sub-in .5s .3s cubic-bezier(.4,0,.2,1) both;}
@keyframes statement-in{from{opacity:0; transform:translateY(12px);}to{opacity:1; transform:none;}}
@keyframes sub-in{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}
/* ed-title (exercise/reading/form heading) */
.ed-title{font-family:'Fraunces',serif; font-weight:500; font-size:21px; color:var(--pietra-dark);
  font-variation-settings:"SOFT" 70,"opsz" 21; margin-bottom:14px;}
/* breath circle — scale 0.32 → 1.18 on muted petrol, aubergine italic phase */
.app-breath{width:150px; height:150px; border-radius:50%; background:rgba(141,164,164,0.35);
  animation:breath-real 11s ease-in-out infinite;}
@keyframes breath-real{0%{transform:scale(.32);}36%{transform:scale(1.18);}64%{transform:scale(1.18);}100%{transform:scale(.32);}}
.breath-phase{position:relative; min-height:28px; margin-top:34px; width:100%; text-align:center;}
.breath-phase span{position:absolute; left:0; right:0; font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:19px; color:var(--aubergine-medium); font-variation-settings:"SOFT" 60,"opsz" 22;}
.breath-phase .ph-in{animation:phase-in 11s ease-in-out infinite;}
.breath-phase .ph-out{animation:phase-out 11s ease-in-out infinite;}
@keyframes phase-in{0%,50%{opacity:1;}55%,95%{opacity:0;}100%{opacity:1;}}
@keyframes phase-out{0%,50%{opacity:0;}55%,95%{opacity:1;}100%{opacity:0;}}
/* form field */
.app-sublabel{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.14em; color:var(--pietra-soft); margin-bottom:10px;}
.app-field{border:1px solid var(--pietra-line); border-radius:var(--r-base); padding:12px 14px; font-size:15px; color:var(--pietra-dark);
  background:rgba(62,53,40,0.025); line-height:1.5;}
.app-field.filled{border-color:var(--aubergine-medium); background:rgba(90,49,99,0.03);}
/* psychoeducatie */
.app-listen{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--aubergine-medium);
  border:1px solid var(--pietra-line); border-radius:100px; padding:7px 14px; margin-bottom:14px;}
.app-listen svg{width:16px; height:16px;}
.app-read{font-size:14px; color:var(--pietra-dark); line-height:1.65;}
/* S4 synthese */
.s4-h{font-family:'Fraunces',serif; font-weight:500; font-size:28px; line-height:1.1; letter-spacing:-0.018em;
  color:var(--pietra-dark); font-variation-settings:"SOFT" 70,"opsz" 32; margin-bottom:16px;}
.s4-synth{font-family:'Fraunces',serif; font-size:16px; line-height:1.6; color:var(--pietra-dark);}

/* ============================================================
   HERO ANIMATION 2 — THERAPIST CONSOLE (laptop)
   Faithful to the Sara console: aubergine = action,
   petrol = data/positive, #7A4E48 = negative. Does NOT breathe.
   ============================================================ */
.laptop{width:540px; max-width:100%;}
.laptop-screen{background:var(--pietra-light); border:2px solid var(--pietra-dark); border-radius:14px 14px 0 0;
  border-bottom:none; overflow:hidden; box-shadow:var(--shadow-lg);}
.laptop-base{height:15px; background:var(--pietra-dark); border-radius:0 0 10px 10px; margin:0 auto; width:112%; margin-left:-6%;
  position:relative; box-shadow:0 8px 14px rgba(62,53,40,0.18);}
.console{position:relative; height:372px; background:var(--pietra-light); font-family:'Manrope',sans-serif;}
.con-screen{position:absolute; inset:0; padding:16px 20px; opacity:0; transition:opacity .7s cubic-bezier(.4,0,.2,1);
  pointer-events:none; overflow:hidden; display:flex; flex-direction:column;}
.con-screen.active{opacity:1; pointer-events:auto;}
.con-bar{display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--pietra-line);}
.con-brand{font-family:'Fraunces',serif; font-weight:500; font-size:16px; color:var(--aubergine-medium);}
.con-tag{font-size:11px; color:var(--pietra-soft);}
.con-link{color:var(--aubergine-medium);}
.con-h1{font-family:'Fraunces',serif; font-size:19px; color:var(--pietra-dark); margin-bottom:12px;}
.con-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.con-client{background:var(--sara-card); border:1px solid var(--sara-card-line); border-radius:var(--r-large); padding:12px 14px;}
.con-client.hi{border-color:var(--aubergine-medium); box-shadow:0 0 0 1px var(--aubergine-medium) inset;}
.cc-name{font-family:'Fraunces',serif; font-size:15px; color:var(--pietra-dark);}
.cc-sub{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--pietra-soft); margin-top:4px;}
.cc-dot{width:8px; height:8px; border-radius:50%; flex:none;}
.cc-meta{font-size:10.5px; color:var(--pietra-soft); margin-top:8px;}
/* client head (tabs) */
.con-clienthead{flex:none;}
.con-clienthead.dim{opacity:.5;}
.ch-id{display:flex; flex-direction:column; gap:2px;}
.ch-name{font-family:'Fraunces',serif; font-size:18px; color:var(--pietra-dark);}
.ch-sub{font-size:11px; color:var(--pietra-soft);}
.ch-actions{display:flex; gap:6px; margin:10px 0 8px;}
.sara-btn{font-size:11.5px; font-weight:500; border-radius:var(--r-base); padding:6px 11px; border:1px solid var(--pietra-line);
  color:var(--pietra-dark); background:transparent; display:inline-flex; align-items:center;}
.sara-btn-primary{background:var(--aubergine-medium); color:#fff; border-color:var(--aubergine-medium);}
.sara-btn.danger{color:#7A4E48; border-color:rgba(122,78,72,0.4);}
.con-tabs{display:flex; gap:18px; border-bottom:1px solid var(--pietra-line);}
.con-tabs span{font-size:12.5px; font-weight:500; color:var(--pietra-soft); padding:8px 2px 10px; position:relative;}
.con-tabs span.on{color:var(--aubergine-medium);}
.con-tabs span.on::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--aubergine-medium); border-radius:2px;}
/* dashboard scroll */
.con-scrollport{flex:1; overflow:hidden; position:relative; margin-top:14px;}
.con-scroll{position:absolute; inset:0;}
.con-scroll.scrolling{animation:con-autoscroll 5s ease-in-out;}
@keyframes con-autoscroll{0%,12%{transform:translateY(0);}88%,100%{transform:translateY(-290px);}}
.sara-kopzin{font-family:'Fraunces',serif; font-size:13.5px; line-height:1.5; color:var(--pietra-dark);
  border-left:3px solid var(--aubergine-medium); padding-left:14px; margin-bottom:14px;}
.sara-kopzin .ai-tag{display:block; font-family:'Manrope',sans-serif; font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--aubergine-light); margin-bottom:6px;}
.kz-quote{color:var(--pietra-soft); font-style:italic;}
.sara-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px;}
.sara-tile{background:var(--sara-card); border:1px solid var(--sara-card-line); border-radius:var(--r-large); padding:10px;}
.sara-tile .v{font-family:'Fraunces',serif; font-size:19px; line-height:1.1; color:var(--pietra-dark);}
.sara-tile .v small{font-family:'Manrope',sans-serif; font-size:10px; color:var(--pietra-soft);}
.sara-tile .v.trend-op{color:var(--petrol-medium);}
.sara-tile .k{font-size:9px; text-transform:uppercase; letter-spacing:0.05em; color:var(--pietra-soft); margin-top:6px;}
.sara-section-label{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--pietra-soft); margin:8px 0 8px;}
.sara-card{background:var(--sara-card); border:1px solid var(--sara-card-line); border-radius:var(--r-large); padding:14px;}
.mood-chart{width:100%; height:96px; display:block;}
.sara-log{margin-top:2px;}
.log-row{display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; padding:9px 0;
  border-bottom:1px solid var(--pietra-line); font-size:12px;}
.log-row:last-child{border-bottom:none;}
.log-date{color:var(--pietra-soft);}
.log-mid{display:flex; align-items:center; gap:8px; color:var(--pietra-soft);}
.sara-exit{font-size:10px; font-weight:600; padding:2px 8px; border-radius:100px;}
.sara-exit.afgerond{background:rgba(63,101,98,0.14); color:var(--petrol-dark);}
.sara-exit.tezwaar{background:rgba(122,78,72,0.14); color:#7A4E48;}
.log-dur{color:var(--pietra-soft); white-space:nowrap;}
/* plan — phase spine + pool */
.sara-spine{position:relative; margin-left:10px; padding-left:24px; margin-top:10px;}
.sara-spine::before{content:''; position:absolute; left:4px; top:10px; bottom:10px; width:2px; background:var(--pietra-line);}
.sara-phase{position:relative; padding:4px 0 10px;}
.phase-dot{position:absolute; left:-24px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--pietra-light); border:2px solid var(--pietra-line);}
.sara-phase.actief .phase-dot{background:var(--aubergine-medium); border-color:var(--aubergine-medium); box-shadow:0 0 0 4px rgba(90,49,99,0.14);}
.phase-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.phase-titel{font-family:'Fraunces',serif; font-size:15px; color:var(--pietra-dark);}
.phase-titel small{display:block; font-family:'Manrope',sans-serif; font-size:10px; color:var(--pietra-soft);}
.phase-status{font-size:10px; color:var(--pietra-soft);}
.sara-pool{margin-top:6px;}
.pool-item{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-base);
  border:1px solid var(--sara-card-line); background:var(--sara-card); margin-bottom:6px;}
.pool-item.bumped{border-color:var(--aubergine-medium); box-shadow:0 0 0 1px var(--aubergine-medium) inset;}
.pool-item.removed{opacity:0.45;}
.pool-item.removed .pi-titel{text-decoration:line-through;}
.pi-main{flex:1; min-width:0;}
.pi-titel{display:block; font-size:12.5px; font-weight:500; color:var(--pietra-dark);}
.pi-meta{display:block; font-size:10px; color:var(--pietra-soft); margin-top:2px;}
.pi-icons{display:flex; gap:6px; font-size:14px;}
.pi-icons .star{color:var(--pietra-soft);}
.pi-icons .star.on{color:var(--aubergine-medium);}
.pi-icons .rm{color:var(--pietra-soft);}
.pi-icons .rm.on{color:#7A4E48;}
.phase-switch{margin-top:4px;}
/* profiel */
.sara-field{padding:11px 0; border-bottom:1px solid var(--pietra-line);}
.sara-field:last-child{border-bottom:none;}
.sara-field .fk{font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--pietra-soft);}
.sara-field .fv{font-size:13px; color:var(--pietra-dark); margin-top:4px;}
.sara-field .fv.note{font-size:12.5px; line-height:1.5; color:var(--pietra-dark);}
.sara-taglist{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.p-tag{font-size:12px; background:rgba(62,53,40,0.06); border-radius:100px; padding:4px 12px; color:var(--pietra-dark);}
/* modal */
.con-modal-overlay{position:absolute; inset:0; background:rgba(62,53,40,0.35); display:flex; align-items:center; justify-content:center; padding:20px; z-index:5;}
.con-modal{background:var(--pietra-light); border-radius:var(--r-large); padding:20px; max-width:320px; width:100%; box-shadow:0 20px 60px rgba(62,53,40,0.25);}
.con-modal h4{font-family:'Fraunces',serif; font-size:16px; color:var(--pietra-dark); margin-bottom:10px;}
.con-modal p{font-size:12px; color:var(--pietra-soft); line-height:1.5; margin-bottom:10px;}
.con-modal p b{color:var(--pietra-dark);}
.modal-warn{display:flex; align-items:center; gap:8px; font-size:12px; color:#7A4E48; background:rgba(122,78,72,0.08);
  border-radius:var(--r-base); padding:9px 11px; margin-bottom:12px;}
.modal-field .fk{font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--pietra-soft); margin-bottom:4px;}
.modal-input{font-size:12px; color:var(--pietra-dark); border:1px solid var(--pietra-line); border-radius:var(--r-base); padding:9px 11px; background:var(--pietra-light); line-height:1.4;}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:16px;}

/* Section scaffold */
section.band{padding:var(--s-6) 0;}
.band + .band{border-top:1px solid var(--pietra-line);}
.center-head{text-align:center; max-width:820px; margin:0 auto var(--s-6);}
.center-head .eyebrow{color:var(--aubergine-medium); display:block; margin-bottom:var(--s-4);}
.center-head h2{font-family:'Fraunces',serif; font-weight:500; font-variation-settings:"SOFT" 60,"opsz" 40;
  font-size:clamp(26px,2.6vw,40px); line-height:1.15; letter-spacing:-0.01em;}

/* Meer voortgang */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);}
.value-block h3{font-family:'Fraunces',serif; font-weight:500; font-size:22px; line-height:1.25; margin-bottom:var(--s-3);}
.value-block p{font-size:16px; color:var(--pietra-soft); line-height:1.6;}
@media(max-width:991px){.value-grid{grid-template-columns:1fr; gap:var(--s-4);}}

/* Product feature blocks */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); align-items:center; margin-bottom:var(--s-6);}
.feature:last-child{margin-bottom:0;}
.feature.flip .feature-visual{order:2;}
.feature h3{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(22px,2.2vw,32px); margin-bottom:var(--s-3);}
.feature p{font-size:17px; color:var(--pietra-soft); line-height:1.6; margin-bottom:var(--s-4); max-width:46ch;}
.feature ul{list-style:none;}
.feature li{font-size:16px; color:var(--pietra-dark); padding:8px 0 8px 28px; position:relative;}
.feature li::before{content:''; position:absolute; left:0; top:12px; width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--petrol-medium);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6562' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/10px no-repeat;}
.feature-visual{min-height:360px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--pietra-line); border-radius:var(--r-large); background:var(--pietra-light); padding:var(--s-5);}
@media(max-width:991px){.feature{grid-template-columns:1fr; gap:var(--s-4);} .feature.flip .feature-visual{order:0;}}

/* Oefening-animatie (frameless) */
.exset{position:relative; width:100%; max-width:380px; min-height:320px;}
.exscreen{position:absolute; inset:0; opacity:0; transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; align-items:center; text-align:center;}
.exscreen.active{opacity:1; transform:none;}
.exscreen .eyebrow{color:var(--aubergine-medium); margin-bottom:10px;}
.exscreen h4{font-family:'Fraunces',serif; font-weight:500; font-size:24px; margin-bottom:6px; color:var(--pietra-dark);}
.exscreen p{font-size:14px; color:var(--pietra-soft); margin-bottom:18px;}
.ex-breath{width:150px; height:150px; border-radius:50%; background:rgba(141,164,164,0.35);
  animation:breath-real 11s ease-in-out infinite; margin-bottom:20px;}
.ex-diary{width:100%; max-width:300px; text-align:left;}
.ex-diary .row{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 14px;
  border:1px solid var(--pietra-line); border-radius:var(--r-base); margin-bottom:8px; font-size:14px; color:var(--pietra-dark);}
.ex-diary .mood-scale{display:flex; gap:4px; flex:none;}
.ex-diary .mood-scale i{width:9px; height:9px; border-radius:50%; background:var(--pietra-line);}
.ex-diary .mood-scale i.on{background:var(--aubergine-medium);}
/* depressie-cyclus (taart-diagram, faithful to OpbouwenDiagramV2Renderer) */
.taart{width:230px; max-width:100%; aspect-ratio:1/1; overflow:visible;}

/* Dashboard-samenvatting */
.summary{display:flex; flex-direction:column; gap:7px; width:100%; max-width:420px;}
.sum-card{border:1px solid var(--pietra-line); border-radius:var(--r-large); padding:11px 13px; background:var(--pietra-light);}
.sum-card .l{font-size:9px; text-transform:uppercase; letter-spacing:0.12em; color:var(--petrol-medium); margin-bottom:5px; display:flex; align-items:center; gap:7px;}
.sum-card .l svg{width:15px; height:15px;}
.sum-did{display:flex; gap:8px; flex-wrap:wrap;}
.sum-chip{font-size:11px; padding:4px 9px; border-radius:100px; background:rgba(63,101,98,0.10); color:var(--petrol-dark);}
.sum-mood{display:flex; align-items:center; gap:10px;}
.sum-mood .big{font-family:'Fraunces',serif; font-size:24px; color:var(--petrol-medium);}
.sum-mood .trend{flex:1;}
.sum-said{font-family:'Fraunces',serif; font-style:italic; font-size:13.5px; color:var(--pietra-dark); line-height:1.4;}

/* Model network */
.model-net{position:relative; width:100%; max-width:440px; aspect-ratio:1/1; margin:0 auto;
  display:flex; align-items:center; justify-content:center;}
.model-net .rings{position:absolute; inset:0; border-radius:50%;}
.model-net .rings i{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid var(--pietra-line); border-radius:50%;}
.model-net .rings i:nth-child(1){width:44%; height:44%;}
.model-net .rings i:nth-child(2){width:68%; height:68%;}
.model-net .rings i:nth-child(3){width:92%; height:92%;}
.model-orbit{position:absolute; inset:0; animation:spin 60s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.mn-line{position:absolute; top:50%; left:50%; height:1px; background:var(--pietra-line); transform-origin:left center;}
.mn-core{position:relative; width:96px; height:96px; border-radius:50%; background:rgba(90,49,99,0.12);
  display:flex; align-items:center; justify-content:center; color:var(--aubergine-medium); z-index:2;}
.mn-core svg{width:42px; height:42px;}
.mn-s{font-family:'Fraunces',serif; font-weight:500; font-size:46px; line-height:1; color:var(--aubergine-medium); font-variation-settings:"SOFT" 60,"opsz" 40;}
.mn-node{position:absolute; top:50%; left:50%; width:60px; height:60px; border-radius:50%;
  background:var(--pietra-light); border:1px solid var(--pietra-line); display:flex; align-items:center; justify-content:center;
  color:var(--petrol-medium); font-family:'Manrope',sans-serif; font-weight:600; font-size:13px; z-index:2;
  transform:translate(-50%,-50%);}
.mn-node svg{width:26px; height:26px;}

/* Diensten */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4);}
.svc{border:1px solid var(--pietra-line); border-radius:var(--r-large); padding:var(--s-5); background:var(--pietra-light);}
.svc .ico{width:44px; height:44px; border-radius:11px; background:rgba(63,101,98,0.10);
  display:flex; align-items:center; justify-content:center; color:var(--petrol-medium); margin-bottom:var(--s-4);}
.svc .ico svg{width:24px; height:24px;}
.svc h3{font-family:'Fraunces',serif; font-weight:500; font-size:24px; margin-bottom:var(--s-3);}
.svc p{font-size:16px; color:var(--pietra-soft); line-height:1.6;}
@media(max-width:991px){.cards-3{grid-template-columns:1fr;}}

/* Voor wie — pricing integrated in cards */
.who{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4);}
.who-col{border:1px solid var(--pietra-line); border-radius:var(--r-large); padding:var(--s-5); background:var(--pietra-light); display:flex; flex-direction:column;}
.who-col .ico{width:44px; height:44px; border-radius:11px; background:rgba(90,49,99,0.10);
  display:flex; align-items:center; justify-content:center; color:var(--aubergine-medium); margin-bottom:var(--s-3);}
.who-col .ico svg{width:24px; height:24px;}
.who-col h3{font-family:'Fraunces',serif; font-weight:500; font-size:24px; margin-bottom:var(--s-3);}
.who-col > p{font-size:16px; color:var(--pietra-soft); line-height:1.55; margin-bottom:var(--s-4);}
.who-col ul{list-style:none; margin-bottom:var(--s-4);}
.who-col li{font-size:14px; color:var(--pietra-dark); padding:7px 0 7px 24px; position:relative;}
.who-col li::before{content:''; position:absolute; left:0; top:11px; width:14px; height:14px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6562' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;}
@media(max-width:991px){.who{grid-template-columns:1fr;}}

/* About (merged) */
.page-head{display:grid; grid-template-columns:1.4fr 1fr; gap:var(--s-5); align-items:start; margin-bottom:var(--s-6);}
.page-head .eyebrow{color:var(--aubergine-medium); display:block; margin-bottom:var(--s-4);}
.page-head h2{font-family:'Fraunces',serif; font-weight:500; font-variation-settings:"SOFT" 70,"opsz" 40;
  font-size:40px; line-height:1.12; letter-spacing:-0.01em; margin-bottom:var(--s-4);}
.page-head p{font-size:17px; color:var(--pietra-soft); line-height:1.6; max-width:52ch;}
@media(max-width:767px){.page-head{grid-template-columns:1fr;} .page-head h2{font-size:30px;}}
.group-label{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.14em; color:var(--pietra-soft); margin:var(--s-5) 0 var(--s-4);}
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4);}
.team-grid.adv{grid-template-columns:repeat(4,1fr);}
.member{text-align:center;}
.member-photo{aspect-ratio:1/1; margin-bottom:var(--s-3);
  background:transparent center/cover no-repeat; filter:grayscale(1) contrast(0.96);}
.member-name{font-family:'Fraunces',serif; font-weight:500; font-size:18px;}
.member-role{font-size:14px; color:var(--pietra-soft); margin-top:2px;}
@media(max-width:767px){.team-grid, .team-grid.adv{grid-template-columns:1fr 1fr;}}

/* Contact form */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); align-items:start;}
.contact-intro h2{font-family:'Fraunces',serif; font-weight:500; font-variation-settings:"SOFT" 60,"opsz" 40; font-size:36px; line-height:1.15;}
.field{margin-bottom:var(--s-4);}
.field label{display:block; font-size:14px; font-weight:600; color:var(--pietra-dark); margin-bottom:7px;}
.field input, .field textarea{width:100%; font-family:'Manrope',sans-serif; font-size:16px; color:var(--pietra-dark);
  background:var(--pietra-light); border:1px solid var(--pietra-line); border-radius:var(--r-base); padding:12px 14px; transition:border-color .2s;}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--aubergine-medium);}
.field textarea{min-height:120px; resize:vertical;}
.form-submit{width:100%; justify-content:center;}
@media(max-width:767px){.contact-grid{grid-template-columns:1fr; gap:var(--s-5);}}

/* CTA */
.cta{text-align:center; padding:var(--s-6) 0;}
.cta h2{font-family:'Fraunces',serif; font-weight:500; font-variation-settings:"SOFT" 70,"opsz" 40; font-size:36px; line-height:1.15; margin-bottom:var(--s-3);}
.cta p{color:var(--pietra-soft); font-size:17px; margin:0 auto var(--s-5); max-width:44ch;}

/* Footer — plain wordmark, no dot/mark */
footer{background:var(--petrol-dark); color:var(--pietra-light); padding:var(--s-6) 0 var(--s-5); margin-top:var(--s-6);}
.foot-inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5);}
.foot-brand{margin-bottom:var(--s-4);}
.foot-brand .wordmark{color:var(--pietra-light); font-size:30px; font-variation-settings:"SOFT" 60,"opsz" 30;}
.foot-rule{height:1px; background:rgba(236,231,220,0.22); margin:var(--s-4) 0 var(--s-5);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s-3);}
.foot-bottom small{color:rgba(236,231,220,0.85); font-size:14px;}
.foot-bottom .links{display:flex; gap:var(--s-4); align-items:center;}
.foot-bottom a{color:rgba(236,231,220,0.85); font-size:14px; text-decoration:none;}
.foot-bottom a:hover{color:var(--pietra-light);}
.foot-social{width:40px; height:40px; border-radius:50%; background:rgba(236,231,220,0.14);
  display:flex; align-items:center; justify-content:center; color:var(--pietra-light);}
.foot-social:hover{background:rgba(236,231,220,0.24);}
.foot-social svg{width:20px; height:20px;}

/* Reveal */
.reveal{opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);}
.reveal.in{opacity:1; transform:none;}

@media(prefers-reduced-motion:reduce){
  .app-presence, .app-breath, .ex-breath, .mn-node,
  .breath-phase span, .con-scroll.scrolling, .app-statement, .app-subline{animation:none;}
  .breath-phase .ph-out{opacity:0;}
  .hero-cursor{display:none;}
  .reveal{opacity:1; transform:none; transition:none;}
  .app-screen, .con-screen, .exscreen, .hero-stage{transition:opacity .3s;}
  *{scroll-behavior:auto;}
}

/* ============================================================
   HERO v2 — 1-op-1 capture van de echte app (16-07-2026)
   ============================================================ */
/* client: transitie is serif-italic, donker, gecentreerd (echt) */
.app-statement{font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:17px; line-height:1.55;
  letter-spacing:0; color:var(--pietra-dark); font-variation-settings:"SOFT" 55,"opsz" 17; animation:statement-in .5s cubic-bezier(.4,0,.2,1) both;}
.app-exits{display:flex; justify-content:space-between; font-size:12px; color:var(--pietra-soft); margin-top:10px; min-height:14px;}
.etag.sm{font-size:12px; padding:7px 12px;}
.field-wrap{display:none;}
.field-wrap.open{display:block; margin-top:10px;}
/* tap-through oefening */
.tap-wrap{position:relative; flex:1; min-height:120px; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 6px;}
.tap-step{position:absolute; left:0; right:0; opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1);
  font-style:italic; font-weight:400; font-size:19px; line-height:1.45; color:var(--aubergine-medium); font-variation-settings:"SOFT" 60,"opsz" 19;}
.tap-step.on{opacity:1;}
.tap-hint{font-size:10.5px; color:var(--pietra-soft); text-align:center; margin-bottom:8px;}
[data-scene="tap"] .app-cta{opacity:0; transition:opacity .4s;}
[data-scene="tap"].tap-done .app-cta{opacity:1;}
.app-readclip{position:relative; overflow:hidden; max-height:210px;}
.app-readclip::after{content:''; position:absolute; left:0; right:0; bottom:0; height:34px;
  background:linear-gradient(to bottom, rgba(236,231,220,0), var(--pietra-light));}

/* therapeut-console (basale weergave van de echte interface) */
.t-bar{background:var(--petrol-dark); color:#F5F1E8; display:flex; justify-content:space-between; align-items:center;
  padding:9px 16px; margin:-16px -20px 12px; flex:none;}
.t-brand{font-family:'Fraunces',serif; font-size:14px;}
.t-user{font-size:9.5px; color:rgba(245,241,232,.8); display:flex; gap:7px; align-items:center;}
.t-av{width:17px; height:17px; border-radius:50%; background:rgba(245,241,232,.22); display:flex; align-items:center; justify-content:center; font-size:8.5px;}
.t-h1{font-size:17px; color:var(--pietra-dark); margin-bottom:8px;}
.t-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:10px;}
.t-tile{background:var(--sara-card); border:1px solid var(--sara-card-line); border-radius:9px; padding:6px 9px;}
.t-tile .n{font-size:16px; color:var(--pietra-dark); line-height:1.1;}
.t-tile .k{font-size:8.5px; color:var(--pietra-soft); display:flex; gap:4px; align-items:center; margin-top:2px; white-space:nowrap;}
.t-dot{width:6px; height:6px; border-radius:50%; flex:none; display:inline-block;}
.t-row{display:grid; grid-template-columns:1.35fr .55fr 1.5fr auto; gap:10px; align-items:center;
  padding:7px 0; border-bottom:1px solid var(--pietra-line); font-size:10px;}
.t-row:last-child{border-bottom:none;}
.t-name{display:block; font-size:12.5px; color:var(--pietra-dark);}
.t-sub{display:block; font-size:9px; color:var(--pietra-soft); margin-top:1px;}
.t-spark{width:56px; height:15px;}
.t-opm{color:var(--pietra-soft); font-size:9.5px; line-height:1.35;}
.t-status{font-size:9px; color:var(--pietra-dark); display:flex; align-items:center; gap:4px; white-space:nowrap;}
.t-emma{cursor:pointer;}
/* client-page kop */
.t-chead{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px;}
.t-cname{display:block; font-size:17px; color:var(--pietra-dark);}
.t-csub{display:block; font-size:9.5px; color:var(--pietra-soft); margin-top:1px;}
.t-actions{display:flex; gap:6px; flex:none;}
.t-btn{font-size:10px; font-weight:500; border-radius:7px; padding:6px 10px; border:1px solid var(--pietra-line); color:var(--pietra-dark); white-space:nowrap;}
.t-btn-primary{background:var(--petrol-dark); color:#fff; border-color:var(--petrol-dark);}
.t-sum{border-left:3px solid var(--petrol-dark); padding:2px 0 2px 10px; margin-bottom:10px;
  font-family:'Fraunces',serif; font-size:11px; line-height:1.5; color:var(--pietra-dark);}
.t-sum b{color:var(--petrol-dark); font-weight:600;}
.t-sumlabel{display:block; font-family:'Manrope',sans-serif; font-size:8px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--petrol-medium); margin-bottom:3px;}
.t-cols{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.t-col h5{font-size:11px; font-weight:500; color:var(--pietra-dark); margin-bottom:5px;}
.t-card{background:var(--sara-card); border:1px solid var(--sara-card-line); border-radius:9px; padding:8px 9px; font-size:9.5px; color:var(--pietra-soft); line-height:1.5;}
.t-big{font-size:17px; color:var(--pietra-dark); margin-right:2px;}
.t-mut{color:var(--pietra-soft); font-size:9px;}
.t-chip{display:inline-block; font-size:8.5px; border:1px solid var(--pietra-line); border-radius:100px; padding:2px 7px; margin-top:4px; color:var(--pietra-dark); background:var(--pietra-light);}
.t-quote{font-style:italic; font-size:10.5px; color:var(--pietra-dark);}
/* modals */
.t-overlay{position:absolute; inset:0; background:rgba(62,53,40,.35); display:flex; align-items:center; justify-content:center; padding:18px; z-index:5;}
.t-modal{background:var(--pietra-light); border-radius:12px; padding:14px 16px; width:100%; max-width:330px; box-shadow:0 20px 60px rgba(62,53,40,.25);}
.t-step{font-size:8px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--pietra-soft); margin-bottom:3px;}
.t-mtitle{font-size:15px; color:var(--pietra-dark); margin-bottom:4px;}
.t-mp{font-size:10px; color:var(--pietra-soft); line-height:1.45; margin-bottom:8px;}
.t-fldlabel{font-size:9px; color:var(--pietra-dark); font-weight:600; margin:6px 0 3px;}
.t-fld{border:1px solid var(--pietra-line); border-radius:7px; padding:7px 9px; font-size:10px; font-style:italic; color:var(--pietra-soft); background:rgba(62,53,40,.02);}
.t-mactions{display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:8px;}
.t-link{font-size:10px; color:var(--pietra-dark); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
.t-mbtn{background:var(--petrol-dark); color:#fff; border-radius:100px; padding:7px 13px; font-size:10.5px; font-weight:600; white-space:nowrap;}
.t-mbtn.aub{background:var(--aubergine-medium);}
.t-stepper{display:flex; align-items:center; gap:4px; margin:10px 0 6px;}
.t-sd{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:7.5px; color:var(--pietra-soft); text-align:center; white-space:nowrap;}
.t-sdot{width:18px; height:18px; border-radius:50%; border:1px solid var(--pietra-line); display:flex; align-items:center; justify-content:center; font-size:8.5px; color:var(--pietra-soft); font-style:normal;}
.t-sdot.on{background:var(--petrol-dark); border-color:var(--petrol-dark); color:#fff;}
.t-sline{flex:1; height:1px; background:var(--pietra-line); margin-bottom:12px;}
.t-done{display:flex; gap:8px; align-items:flex-start; background:var(--sara-card); border:1px solid var(--sara-card-line); border-radius:9px; padding:9px 10px; font-size:10px; color:var(--pietra-dark); line-height:1.45;}
.t-check{width:15px; height:15px; border-radius:50%; background:rgba(63,101,98,.16); color:var(--petrol-dark); display:inline-flex; align-items:center; justify-content:center; font-size:9px; flex:none;}
.t-msgwrap{margin-top:4px;}
.t-msg{border:1px solid var(--pietra-line); border-radius:8px; padding:8px 10px; min-height:52px; font-size:10.5px; color:var(--pietra-dark); line-height:1.5; background:rgba(62,53,40,.02);}
.t-msg:empty::before{content:'Schrijf hier je bericht…'; color:var(--pietra-soft); font-style:italic;}
.t-msg.typing::after{content:''; display:inline-block; width:1.5px; height:1em; margin-left:1px; background:var(--petrol-dark); vertical-align:-2px; animation:caret-blink .9s steps(1) infinite;}
.t-toast{position:absolute; right:14px; bottom:12px; background:var(--pietra-light); border:1px solid var(--pietra-line);
  border-radius:100px; padding:7px 12px; font-size:10px; color:var(--pietra-dark); display:flex; gap:6px; align-items:center;
  box-shadow:0 6px 20px rgba(62,53,40,.14);}

/* Product-oefeningen v2 — 1-op-1 met de echte content-JSON's */
.exscreen.exv2{align-items:flex-start; text-align:left;}
.ex-title{font-family:'Fraunces',serif; font-weight:500; font-size:21px; color:var(--pietra-dark);
  font-variation-settings:"SOFT" 70,"opsz" 21; margin-bottom:5px;}
.ex-orient{font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:14.5px; color:var(--pietra-soft);
  line-height:1.55; font-variation-settings:"SOFT" 55,"opsz" 17; margin-bottom:14px;}
.ex-breathwrap{width:100%; display:flex; flex-direction:column; align-items:center; padding-top:18px;}
.exv2 .ex-breath{width:150px; height:150px; margin-bottom:0; animation:breath-ademruimte 10s ease-in-out infinite;}
@keyframes breath-ademruimte{0%{transform:scale(.32);}40%{transform:scale(1.18);}100%{transform:scale(.32);}}
.ex-phase{position:relative; min-height:26px; margin-top:30px; width:100%; text-align:center;}
.ex-phase span{position:absolute; left:0; right:0; font-style:italic; font-weight:400; font-size:18px;
  color:var(--aubergine-medium); font-variation-settings:"SOFT" 60,"opsz" 22;}
.ex-phase .ph-in{animation:phase-in10 10s ease-in-out infinite;}
.ex-phase .ph-out{animation:phase-out10 10s ease-in-out infinite;}
@keyframes phase-in10{0%,36%{opacity:1;}44%,94%{opacity:0;}100%{opacity:1;}}
@keyframes phase-out10{0%,36%{opacity:0;}44%,94%{opacity:1;}100%{opacity:0;}}
.ex-fld{width:100%; max-width:330px; margin-bottom:13px;}
.ex-label{display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  color:var(--pietra-soft); margin-bottom:6px;}
.ex-input{border:1px solid var(--pietra-line); border-radius:var(--r-base); padding:10px 12px; font-size:13.5px;
  font-style:italic; color:var(--pietra-soft); background:rgba(62,53,40,.02);}
.ex-chips{display:flex; gap:7px;}

/* storyboard 16-07: gedachteschema-velden in de phone + opgaande mini-lijn bij Sara */
.gs-fld{margin-bottom:10px;}
.gs-fld .app-field{min-height:40px;}
.t-mini{display:block; width:100%; height:16px; margin:5px 0 2px;}

/* ── CR-9: depressiecyclus stapsgewijs ──────────────────────────────────── */
.cy-wrap{flex:1; display:flex; align-items:center; justify-content:center; min-height:0; padding:2px 0;}
.cy-wrap .taart{width:100%; max-width:214px; height:auto;}
.cy-slice{fill:rgba(62,53,40,.03); transition:fill .55s cubic-bezier(.4,0,.2,1);}
.cy-slice.on{fill:rgba(90,49,99,.09);}
.cy-slice.latest{fill:rgba(90,49,99,.18);}
.cy-txt,.cy-arr{opacity:0; transition:opacity .55s cubic-bezier(.4,0,.2,1);}
.cy-txt.on,.cy-arr.on{opacity:1;}

/* ── CR-14: verdiepingsschermen therapeut ───────────────────────────────── */
.t-tabs{display:flex; gap:16px; border-bottom:1px solid var(--pietra-line); margin-bottom:10px;}
.t-tabs span{font-size:11px; font-weight:500; color:var(--pietra-soft); padding:6px 2px 8px; position:relative; white-space:nowrap;}
.t-tabs span.on{color:var(--petrol-dark);}
.t-tabs span.on::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--petrol-dark); border-radius:2px;}
.t-detail{flex:1; min-height:0; overflow:hidden;}
.t-dstats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px;}
.t-dstat{background:var(--sara-card); border:1px solid var(--sara-card-line); border-radius:9px; padding:8px 10px; display:flex; flex-direction:column; gap:1px;}
.t-drow{display:grid; grid-template-columns:46px 1fr auto; gap:10px; align-items:center; padding:7px 0;
  border-bottom:1px solid var(--pietra-line); font-size:10px;}
.t-drow:last-child{border-bottom:none;}
.t-ddate{color:var(--pietra-soft);}
.t-ditem{color:var(--pietra-dark);}
.t-dtag{font-size:8.5px; font-weight:600; padding:2px 7px; border-radius:100px; white-space:nowrap;}
.t-dtag.ok{background:rgba(63,101,98,.14); color:var(--petrol-dark);}
.t-dtag.warn{background:rgba(122,78,72,.14); color:#7A4E48;}
.t-chart{width:100%; height:72px; display:block; margin-bottom:10px;}
.t-emos{display:flex; flex-direction:column; gap:5px;}
.t-emo{display:grid; grid-template-columns:62px 1fr 26px; gap:8px; align-items:center; font-size:10px; color:var(--pietra-dark);}
.t-emo i{height:5px; border-radius:3px; background:var(--petrol-medium); display:block;}
.t-quo{padding:8px 0; border-bottom:1px solid var(--pietra-line);}
.t-quo:last-child{border-bottom:none;}
.t-qdate{display:block; font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--pietra-soft); margin-bottom:3px;}
.t-quo p{font-size:11.5px; font-style:italic; color:var(--pietra-dark); line-height:1.45;}
.t-quo .t-mut{display:block; margin-top:2px; font-size:9px;}
.t-col-deed,.t-col-voelde,.t-col-zei{cursor:pointer;}


/* Overzicht-box: breder + compact zodat hij dezelfde hoogte houdt als oefeningen/model */
.summary{max-width:480px;}
.sum-lead .l{color:var(--petrol-dark);}
.sum-lead-txt{font-style:normal; font-size:13px; line-height:1.45;}
.sum-card .l svg{width:13px; height:13px;}

/* Witruimte onder de tekstkaarten gehalveerd → lagere overzicht-box */
.sum-card{padding-bottom:6px;}
.sum-lead .sum-said, .sum-card:last-child .sum-said{margin-bottom:0;}
.sum-said{display:block;}
.summary{gap:6px;}

/* Guard: een scherm groeit nooit voorbij de telefoon */
.app-screen{overflow:hidden;}
.app-field{max-height:96px; overflow:hidden;}

/* Activiteitendagboek: velden gelijkmatig over het blok verdelen */
.exscreen.exv2{justify-content:flex-start;}
.ex-fld{width:100%; max-width:330px; margin-bottom:22px;}
.ex-fld:last-child{margin-bottom:0;}
/* Overzicht-graphic: emotietags onder de stemmingslijn */
.sum-emos{display:flex; gap:6px; margin-top:7px;}

/* ============================================================
   Mobiele maatvoering — breakpoints 991 / 767 / 479 (carv-set)
   ============================================================ */
@media(max-width:767px){
  :root{ --s-5:24px; --s-6:40px; }
  .hero{padding:var(--s-3) 0 var(--s-5);}
  /* De telefoon houdt zijn eigen maat (270x540): op 390px is er 350px
     werkruimte, dus krimpen is niet nodig. Alleen de breedte verkleinen
     zou de 1:2-verhouding breken en de mockup uitrekken. */
  .stage-wrap{min-height:566px;}
  /* De therapeut-console vervalt op mobiel: een informatiedichte
     desktop-UI van 540px wordt in ~350px onleesbaar. Alleen de
     cliënt-animatie blijft; de rotatie in main.js volgt dit via
     dezelfde 767px-query. */
  .hero-stage[data-stage="therapeut"]{display:none;}
  .hero-dots{display:none;}
  .taart{width:190px;}
  .model-net{max-width:330px;}
  .feature-visual{min-height:300px; padding:var(--s-4);}
  .btn{width:100%; justify-content:center;}
  .nav-right .btn{width:auto;}
  /* De hero-CTA staat op mobiel al in de topbalk en de drawer */
  .hero .btn{display:none;}
}
@media(max-width:479px){
  :root{ --s-5:20px; --s-6:32px; }
  .wrap, .nav-inner, .foot-inner{padding-left:20px; padding-right:20px;}
  .taart{width:170px;}
  .model-net{max-width:280px;}
  .team-grid, .team-grid.adv{grid-template-columns:1fr;}
  .feature-visual{min-height:260px; padding:var(--s-3);}
  /* 4 tegels met nowrap-labels passen niet in de versmalde laptop */
  .t-tiles{grid-template-columns:repeat(2,1fr);}
}
/* iOS zoomt automatisch in op inputs kleiner dan 16px */
input, textarea, select{font-size:16px;}

/* Focus in aubergine i.p.v. de blauwe browser-default */
.drawer a:focus-visible, .drawer button:focus-visible, .nav-burger:focus-visible{
  outline:2px solid var(--aubergine-medium); outline-offset:3px; border-radius:var(--r-small);}
.drawer :focus:not(:focus-visible){outline:none;}

/* Doelgroepwoord in de Voor wie-koppen — aubergine, geen cursief
   (em is al cursief; hier gaat het om nadruk binnen een Fraunces-kop) */
.hl{color:var(--aubergine-medium);}

/* Ankernavigatie: de sticky topbalk is 80px hoog. Zonder scroll-margin
   springt het doel eronder en is de titel waarop je klikt onzichtbaar.
   Geldt voor beide talen en alle schermbreedtes. */
section[id], .feature[id]{scroll-margin-top:96px;}

/* Actie-banner: klikbaar, scrollt naar het contactformulier */
a.announce{display:block; text-decoration:none; cursor:pointer;
  transition:background .2s cubic-bezier(.4,0,.2,1);}
a.announce:hover{background:var(--petrol-medium);}
.announce-arrow{display:inline-block; margin-left:4px; transition:transform .2s cubic-bezier(.4,0,.2,1);}
a.announce:hover .announce-arrow{transform:translateX(4px);}
/* Pilot-toelichting onder de contactkop */
.contact-note{font-size:14px; line-height:1.6; color:var(--pietra-soft);
  margin-top:var(--s-3); max-width:44ch;}
.contact-intro p{font-size:17px; color:var(--pietra-soft); line-height:1.55; margin-top:var(--s-3);}