:root {
    --night: #150b19;
    --violet: #33163c;
    --lilac: #f49980;
    --orchid: #e67156;
    --blush: #facec2;
    --cream: #fff8f6;
    --ink: #200d26;
    --head: "Bricolage Grotesque", system-ui, sans-serif;
    --sans: "Inter Tight", system-ui, sans-serif;
    --g: clamp(16px, 3.4vw, 48px);
    --deep: #b95337; --card: #25122b; --sub: #edd0c0; --sub-dim: #c9a38d; --sub-faint: #967d6e; --sub-ink: #705343;
    --dawn: #fde4d9; --ink-muted: #4d2a3c; --morning-red: #8e2f23; --ember: #c2410c;
    --acc-rgb: 244,153,128; --ember-rgb: 194,65,12; --morning-red-rgb: 142,47,35; --orchid-rgb: 230,113,86; --deep-rgb: 185,83,55; --night-rgb: 21,11,25; --violet-rgb: 51,22,60; --ink-rgb: 32,13,38;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--night); color: var(--cream); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  h1, h2, h3 { font-family: var(--head); font-weight: 800; letter-spacing: -0.04em; }
  .btn { display: inline-block; padding: 14px 24px; border-radius: 999px; background: var(--lilac); color: var(--ink); font-weight: 600; text-decoration: none; font-size: 15px; transition: transform 0.2s, background 0.2s; }
  .btn:hover { transform: translateY(-2px); background: var(--blush); }
  .btn.dark { background: var(--ink); color: var(--lilac); }

  header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding: 16px var(--g); transition: background 0.3s; }
  header.solid { background: rgba(var(--night-rgb),0.8); backdrop-filter: blur(12px); }
  .logo { font-family: var(--head); font-weight: 800; font-size: 30px; letter-spacing: -0.05em; text-decoration: none; color: var(--lilac); }
  header nav { display: flex; gap: 24px; align-items: center; font-size: 15px; }
  header nav a { text-decoration: none; opacity: 0.9; }
  .aud { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 41; display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(var(--ink-rgb),0.85); border: 1px solid rgba(var(--acc-rgb),0.25); backdrop-filter: blur(10px); font-size: 13px; font-weight: 600; }
  .aud span { padding: 7px 14px; border-radius: 99px; color: var(--sub); transition: background 0.3s, color 0.3s; }
  .aud span.on { background: var(--lilac); color: var(--ink); }

  .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 150px var(--g) 56px; overflow: hidden; transition: padding-bottom 0.7s cubic-bezier(.2,.7,.2,1); }
  body.cookie-open .hero { padding-bottom: 150px; }
  .hero .ph { position: absolute; inset: 0; filter: saturate(0.85); }
  .hero .ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .hero .ph::after { z-index: 1; content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--night-rgb),0.92) 0%, rgba(var(--violet-rgb),0.6) 55%, rgba(240,142,98,0.35) 100%); }
  .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; }
  .blob.a { width: 540px; height: 540px; background: var(--orchid); right: -140px; bottom: -180px; }
  .blob.b { width: 400px; height: 400px; background: var(--deep); left: 32%; top: -160px; }
  .hero .in { position: relative; z-index: 2; max-width: 780px; }
  .hero h1 { line-height: 0.95; font-size: clamp(52px, 7.4vw, 116px); }
  .hero h1 span { color: var(--lilac); }
  .hero p { font-size: clamp(18px, 1.6vw, 22px); margin-top: 22px; max-width: 580px; color: var(--sub); }
  .hero .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; align-items: center; }
  .hero-actions { display: none; }
  .hero .guest, .hero-actions .guest { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); font-size: 15px; text-decoration: none; }

  .mission { position: relative; padding: 140px var(--g); text-align: center; overflow: hidden; }
  .mission .blob.c { width: 600px; height: 600px; background: #6b3c24; left: -200px; top: 0; opacity: 0.5; }
  .mission p { position: relative; font-family: var(--head); font-weight: 500; font-size: clamp(28px, 3.6vw, 52px); letter-spacing: -0.03em; line-height: 1.15; max-width: 1100px; margin: 0 auto; color: var(--sub); }
  .mission p b { color: var(--cream); font-weight: 700; }

  .lilaczone { background: var(--lilac); color: var(--ink); padding: 120px var(--g); border-radius: 44px 44px 0 0; }
  .lilaczone h2 { font-size: clamp(52px, 7.4vw, 120px); line-height: 0.92; }
  .lilaczone h2 em { font-style: normal; color: var(--cream); -webkit-text-stroke: 2px var(--ink); }
  .kicker { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; }
  .kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 60px; }
  .step { background: var(--cream); border-radius: 30px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; box-shadow: 0 20px 40px -24px rgba(var(--deep-rgb),0.6); }
  .step-top { display: flex; flex-direction: column; gap: 18px; }
  .step .phase { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .step .phase::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
  .step .n { font-family: var(--head); font-weight: 800; font-size: 110px; line-height: 0.8; letter-spacing: -0.06em; }
  .step h3 { font-size: 28px; line-height: 1.05; }
  .step p { margin-top: 8px; font-size: 16px; }
  .step[data-phase="night"] { background-color: var(--card); background-image: radial-gradient(130% 70% at 100% 0%, rgba(var(--violet-rgb),0.95), transparent 70%); color: var(--cream); box-shadow: 0 24px 48px -28px rgba(var(--ink-rgb),0.75); }
  .step[data-phase="night"] .phase { color: var(--sub-dim); }
  .step[data-phase="night"] .phase::before { box-shadow: inset 0 0 0 1.5px currentColor; }
  .step[data-phase="night"] .n { color: var(--lilac); }
  .step[data-phase="night"] p { color: var(--sub); }
  .step[data-phase="night"] img { opacity: 0.92; }
  .step[data-phase="morning"] { background-color: var(--cream); background-image: radial-gradient(90% 60% at 88% 0%, rgba(255,255,255,0.95), transparent 70%), linear-gradient(180deg, var(--cream) 0%, var(--dawn) 100%); color: var(--ink); box-shadow: 0 24px 48px -26px rgba(var(--deep-rgb),0.55); }
  .step[data-phase="morning"] .phase { color: var(--morning-red); }
  .step[data-phase="morning"] .phase::before { background: var(--orchid); box-shadow: 0 0 0 4px rgba(var(--orchid-rgb),0.18); }
  .step[data-phase="morning"] .n { color: var(--morning-red); }
  .step[data-phase="morning"] p { color: var(--sub-ink); }
  .step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }

  .quiet { background: var(--lilac); color: var(--ink); padding: 0 var(--g) 120px; }
  .quietbox { background: var(--ink); color: var(--cream); border-radius: 34px; padding: clamp(28px, 4vw, 60px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
  .quietbox h2 { font-size: clamp(40px, 5vw, 74px); line-height: 1; }
  .quietbox h2 span { color: var(--lilac); }
  .quietbox p { color: var(--sub); margin-top: 16px; font-size: 18px; }
  .ticks { list-style: none; display: grid; gap: 10px; }
  .ticks li { padding: 16px 20px; border-radius: 18px; background: rgba(var(--acc-rgb),0.1); border: 1px solid rgba(var(--acc-rgb),0.25); font-weight: 500; }
  .ticks li::before { content: "\2726  "; color: var(--orchid); }

  .irl { padding: 120px var(--g); }
  .irl .head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
  .irl h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1; }
  .strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; align-items: center; }
  .pol { background: var(--cream); padding: 8px 8px 32px; border-radius: 6px; position: relative; }
  .pol img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: 3px; }
  .pol .cap { position: absolute; bottom: 8px; left: 10px; right: 10px; color: var(--ink); font-size: 12.5px; font-weight: 600; }
  .pol:nth-child(1) { transform: rotate(-4deg); }
  .pol:nth-child(2) { transform: rotate(3deg) translateY(20px); }
  .pol:nth-child(3) { transform: rotate(-2deg); }
  .pol:nth-child(4) { transform: rotate(4deg) translateY(16px); }
  .pol:nth-child(5) { transform: rotate(-3deg); }
  .pol .tag { position: absolute; top: -12px; right: -10px; background: var(--blush); color: var(--ink); font-family: var(--head); font-weight: 700; font-size: 13px; padding: 6px 11px; border-radius: 99px; transform: rotate(8deg); }

  .hosts-start { padding: 64px var(--g) 40px; }
  .hosts-start h2 { font-size: clamp(36px, 4.4vw, 68px); line-height: 1; max-width: 900px; }
  .hosts-start h2 span { color: var(--lilac); }
  .hosts-start p { color: var(--sub); font-size: 19px; max-width: 620px; margin-top: 18px; }
  .org { padding: 30px var(--g) 120px; }
  .orgcard { border-radius: 40px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: var(--violet); }
  .orgcard .pic { position: relative; }
  .orgcard .pic img { width: 100%; height: 100%; object-fit: cover; min-height: 520px; }
  .orgcard .pic .notif { position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(255,248,246,0.95); color: var(--ink); border-radius: 18px; padding: 14px; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
  .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--ink); color: var(--lilac); display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 15px; }
  .orgcard .pic .notif b { display: block; }
  .orgcard .pic .notif span { color: var(--sub-ink); }
  .orgcard .pic .notif em { font-style: normal; font-size: 11px; color: var(--sub-ink); }
  .orgcard .tx { padding: clamp(28px, 4vw, 60px); display: flex; flex-direction: column; justify-content: center; }
  .orgcard h3 { font-size: clamp(34px, 3.8vw, 58px); line-height: 1; }
  .orgcard ul { list-style: none; margin: 24px 0 30px; }
  .orgcard li { padding: 12px 0; border-top: 1px solid rgba(var(--acc-rgb),0.2); color: var(--sub); }
  .orgcard li b { color: var(--cream); }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
  .stat { border-radius: 24px; background: var(--card); border: 1px solid rgba(var(--acc-rgb),0.18); padding: 22px; }
  .stat .v { font-family: var(--head); font-weight: 800; font-size: 54px; letter-spacing: -0.05em; color: var(--lilac); line-height: 1; }
  .stat b { display: block; margin-top: 8px; font-size: 16px; }
  .stat span { color: var(--sub); font-size: 14px; }
  .stat small { display: block; color: var(--sub-faint); font-size: 11px; margin-top: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

  .final { margin: 120px var(--g) 170px; border-radius: 44px; background-color: var(--lilac); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.05 0 0 0 0 0.15 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E"), radial-gradient(80% 110% at 88% 10%, rgba(230,113,86,0.35) 0%, rgba(230,113,86,0) 70%), linear-gradient(115deg, var(--lilac) 0%, var(--orchid) 100%); color: var(--ink); padding: clamp(36px, 5vw, 80px); display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: stretch; position: relative; }
  .final > div:first-child { align-self: center; }
  .final h2 { font-size: clamp(40px, 4.9vw, 84px); line-height: 0.96; }
  .final h2 span { display: block; }
  .final p { font-size: 18px; margin-top: 14px; max-width: 560px; }
  .final .price { display: inline-flex; align-items: center; margin-top: 24px; padding: 8px 15px; border-radius: 18px; background: rgba(255,248,246,0.55); border: 1px solid rgba(var(--ink-rgb),0.08); font-size: 14px; font-weight: 600; letter-spacing: 0.005em; }
  .final .curated { font-size: 14.5px; margin-top: 14px; opacity: 0.78; }
  .final .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
  /* Quiet side route under the apply button: write by email instead of the form. */
  .final .write-us { font-size: 14px; margin-top: 10px; opacity: 0.72; }
  .final .write-us a { display: inline-block; padding: 12px 0; text-decoration: underline; text-underline-offset: 3px; }
  .final .shot { position: relative; min-height: 440px; }
  .final .phone { position: absolute; left: 0; right: 0; bottom: calc(-1 * clamp(36px, 5vw, 80px) - 110px); margin: 0 auto; width: 290px; border-radius: 42px; padding: 9px; background: var(--ink); box-shadow: -24px 40px 90px -24px rgba(var(--ink-rgb),0.5), 0 18px 40px -18px rgba(var(--deep-rgb),0.45), inset 0 0 0 1px rgba(255,255,255,0.06); transform: rotate(3deg); }
  .scr { border-radius: 31px; overflow: hidden; background: var(--cream); color: var(--ink); }
  .scr .bar { display: flex; justify-content: space-between; padding: 12px 16px 2px; font-size: 11px; color: var(--sub-faint); }
  .scr .brand { display: flex; gap: 10px; align-items: center; padding: 10px 16px 8px; }
  .scr .hostmark { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--lilac); display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 14px; letter-spacing: -0.02em; box-shadow: 0 0 0 2px var(--cream), 0 0 0 3.5px var(--blush); }
  .scr .brand b { display: block; font-size: 13.5px; }
  .scr .brand small { color: var(--sub-faint); font-size: 11px; }
  .scr h4 { font-family: var(--head); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; line-height: 1.05; padding: 8px 16px 0; }
  .scr .g6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 14px 16px 0; }
  .scr .g6 div { aspect-ratio: 3 / 4; border-radius: 10px; background-size: cover; background-position: center; }
  .scr .g6 div.on { outline: 3px solid var(--orchid); outline-offset: -3px; }
  .scr .cta { margin: 16px 16px 0; min-height: 44px; display: grid; place-items: center; background: var(--ember); color: var(--cream); border-radius: 13px; padding: 0 12px; text-align: center; font-weight: 700; font-size: 13.5px; box-shadow: 0 8px 18px -8px rgba(var(--ember-rgb),0.55); }
  .scr .next { margin: 10px 16px 16px; display: flex; justify-content: space-between; background: #fdeee4; border-radius: 12px; padding: 9px 12px; font-size: 12px; }
  .scr .next b { color: var(--deep); }

  .guestbar { margin: 0 var(--g) 40px; padding: 26px 30px; border-radius: 26px; background: var(--card); border: 1px solid rgba(var(--acc-rgb),0.25); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
  .guestbar b { font-family: var(--head); font-weight: 800; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -0.03em; }
  .toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 45; background: var(--ink); border: 1px solid rgba(var(--acc-rgb),0.3); padding: 14px 20px; border-radius: 18px; display: flex; gap: 16px; align-items: center; font-size: 14px; max-width: calc(100% - 32px); }
  .toast b { font-family: var(--head); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
  .toast b span { color: var(--lilac); }
  .toast button { border: none; background: var(--lilac); color: var(--ink); padding: 8px 14px; border-radius: 99px; font: 600 13px var(--sans); cursor: pointer; }

  @media (max-width: 1000px) {
    header nav a:not(.btn) { display: none; }
    .aud { display: none; }
    .steps, .quietbox, .orgcard, .final, .stats { grid-template-columns: 1fr; }
    .strip { grid-template-columns: 1fr 1fr; }
    .pol:nth-child(5) { display: none; }
    .final { margin-bottom: 150px; }
    .final .shot { min-height: 0; margin-top: 12px; margin-bottom: calc(-1 * clamp(36px, 5vw, 80px) - 110px); }
    .final .phone { position: relative; bottom: auto; }
    .toast { flex-wrap: wrap; }
  }

  .formats { padding: 40px 0 120px; }
  .fhead { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; padding: 0 var(--g); }
  .fhead h2 { font-size: clamp(38px, 4.6vw, 68px); line-height: 1; }
  .scroller { display: flex; gap: 16px; overflow-x: auto; padding: 40px var(--g) 10px; scroll-padding-inline: var(--g); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .scroller::-webkit-scrollbar { display: none; }
  .scroller figure { flex: 0 0 auto; width: clamp(240px, 24vw, 320px); scroll-snap-align: start; border-radius: 26px; overflow: hidden; background: var(--card); }
  .scroller img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.5s; }
  .scroller figure:hover img { transform: scale(1.05); }
  .scroller figcaption { padding: 14px 16px 18px; }
  .scroller b { display: block; font-family: var(--head); font-size: 20px; letter-spacing: -0.02em; }
  .scroller span { color: var(--sub); font-size: 14px; }
  .toolkit { padding: 40px var(--g) 20px; }
  .toolkit h2 { font-size: clamp(40px, 5.2vw, 84px); line-height: 0.95; max-width: 1100px; }
  .toolkit h2 span { color: var(--lilac); }
  .tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 50px; }
  .tool { border-radius: 24px; background: var(--card); border: 1px solid rgba(var(--acc-rgb),0.18); padding: 24px; display: grid; gap: 8px; }
  .tool i { font-style: normal; width: 42px; height: 42px; border-radius: 12px; background: var(--lilac); color: var(--ink); display: grid; place-items: center; font-size: 18px; }
  .tool b { font-family: var(--head); font-size: 21px; letter-spacing: -0.02em; margin-top: 6px; }
  .tool span { color: var(--sub); font-size: 15.5px; }
  .faq { margin-top: 70px; border-top: 1px solid rgba(var(--acc-rgb),0.25); max-width: 1000px; }
  .faq details { border-bottom: 1px solid rgba(var(--acc-rgb),0.25); padding: 22px 0; }
  .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; font-family: var(--head); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
  .faq summary::after { content: "+"; color: var(--lilac); }
  .faq details[open] summary::after { content: "-"; }
  .faq p { color: var(--sub); margin-top: 10px; max-width: 760px; }
  @media (max-width: 1000px) { .tools { grid-template-columns: 1fr; } }

  html.cookie-ok .toast { display: none; }
  html, body { overflow-x: clip; }
  .note { color: var(--sub-faint); font-size: 13px; margin-top: 14px; }
  @media (max-width: 1000px) {
    .toast { left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; padding: 12px 14px; gap: 10px; flex-wrap: nowrap; }
    .toast > span { display: none; }
    .toast b { font-size: 16px; flex: 1; }
    body.cookie-open .hero { padding-bottom: 110px; }
    header { padding: 12px var(--g); }
  }

  .aud { position: static; transform: none; display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(var(--ink-rgb),0.85); border: 1px solid rgba(var(--acc-rgb),0.25); }
  .aud a { padding: 7px 14px; border-radius: 99px; color: var(--sub); text-decoration: none; opacity: 1 !important; transition: background 0.3s, color 0.3s; font-size: 13.5px; font-weight: 600; }
  .aud a.on { background: var(--lilac); color: var(--ink); }
  .hdr-cta .s { display: none; }
  @media (max-width: 1000px) {
    header nav { gap: 10px; }
    header nav .aud { display: none; }
    .hdr-cta { padding: 10px 16px; }
    .hdr-cta .l { display: none; } .hdr-cta .s { display: inline; }
  }

/* Landing header: audience switch, one quiet language link, apply button; burger menu up to 760 px. */
.site-header { justify-content: flex-start; gap: 0; }
.site-header.menu-open { background: rgba(var(--night-rgb),0.92); backdrop-filter: blur(12px); }
.site-header .site-menu { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.site-header .site-menu .aud { display: flex; }
.site-header .site-menu .aud a { display: inline-block; }
.site-header .site-menu .menu-only { display: none; }
.site-header .site-menu .lang-next { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px; color: var(--sub); opacity: 0.8; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-decoration: none; transition: color 0.2s; }
.site-header .site-menu .lang-next:hover, .site-header .site-menu .lang-next:focus-visible { color: var(--cream); opacity: 1; }
.site-header .hdr-cta { margin-left: 18px; }
.site-header .burger { display: none; }
@media (max-width: 1000px) {
  .site-header .site-menu { gap: 10px; }
  .site-header .hdr-cta { margin-left: 10px; }
}
@media (max-width: 760px) {
  .site-header .burger { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -8px 0 6px; border: 0; background: transparent; color: var(--cream); cursor: pointer; border-radius: 12px; }
  .site-header .burger span, .site-header .burger span::before { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s ease; }
  .site-header .burger span { position: relative; transform: translateY(-3px); }
  .site-header .burger span::before { content: ""; position: absolute; left: 0; top: 6px; }
  .site-header .burger[aria-expanded="true"] span { transform: rotate(45deg); }
  .site-header .burger[aria-expanded="true"] span::before { transform: translateY(-6px) rotate(-90deg); }
  .site-header .burger:focus-visible { outline: 2px solid var(--lilac); outline-offset: 0; }
  /* The burger precedes the nav in the markup (tab order: burger, menu, apply); visually it stays at the far right. */
  .site-header .hdr-cta { margin-left: auto; order: 1; }
  .site-header .burger { order: 2; }
  .site-header .site-menu { position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; margin: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 22px 12px; border-radius: 26px; background: rgb(var(--ink-rgb)); isolation: isolate; z-index: 60; border: 1px solid rgba(var(--acc-rgb),0.16); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s; }
  .site-header.menu-open .site-menu { visibility: visible; opacity: 1; transform: none; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s; }
  .site-header .site-menu .aud { flex-direction: column; gap: 0; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; }
  .site-header .site-menu .aud a, .site-header .site-menu .menu-only { display: flex; align-items: center; min-height: 58px; padding: 0; border-radius: 0; border-bottom: 1px solid rgba(var(--acc-rgb),0.14); background: none; color: var(--cream); font-family: var(--head); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
  .site-header .site-menu .aud a.on { background: none; color: var(--lilac); }
  .site-header .site-menu .lang-next { justify-content: flex-start; gap: 12px; min-height: 52px; margin-top: 4px; padding: 0; font-size: 13px; }
  .site-header .site-menu .lang-next::after { content: attr(aria-label); color: var(--sub-faint); font-weight: 500; letter-spacing: 0; font-size: 14px; }
}

/* Legal documents use the landing page palette and typography. */
/* Subpages share the landing header; there is no hero behind it, so it stays solid. */
.legal-page .site-header { background: rgba(var(--night-rgb),0.8); backdrop-filter: blur(12px); }
.legal-page .site-header.menu-open { background: rgba(var(--night-rgb),0.92); }
.legal-content { max-width: 780px; margin: 0 auto; padding: 140px var(--g) 80px; overflow-wrap: anywhere; }
.legal-content .back-link { display: inline-flex; align-items: center; min-height: 44px; margin: -36px 0 20px; padding-right: 12px; color: var(--sub); text-decoration: none; font-size: 15px; font-weight: 600; }
.legal-content .back-link:hover { color: var(--lilac); }
.legal-content h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.1; margin-bottom: 32px; }
.legal-content h2 { font-size: 25px; line-height: 1.25; margin: 36px 0 16px; }
.legal-content h3 { margin: 24px 0 12px; }
.legal-content p, .legal-content ul, .legal-content ol { margin: 16px 0; color: var(--sub); }
.legal-content li { margin: 8px 0; }
.legal-content ul, .legal-content ol { padding-left: 24px; }
.legal-content a { color: var(--lilac); text-underline-offset: 3px; }
.legal-content strong { color: var(--cream); }
[data-lang-block][hidden] { display: none; }
.contact-form { display: flex; flex-direction: column; gap: 8px; margin: 32px 0 16px; }
.contact-form[hidden] { display: none; }
.contact-form label { font-weight: 600; color: var(--cream); margin-top: 12px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(var(--acc-rgb),0.35); background: var(--card); color: var(--cream); font: inherit; }
.contact-form textarea { resize: vertical; min-height: 180px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--lilac); outline-offset: 1px; }
.contact-form .btn { align-self: flex-start; margin-top: 20px; border: 0; cursor: pointer; font-family: inherit; }
.contact-form .btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.contact-form .contact-hp { display: none; }
.contact-form .contact-turnstile { margin-top: 16px; min-height: 65px; }
.contact-status { min-height: 1.55em; }
.contact-privacy { font-size: 14px; }
.legal-content .contact-topic { margin: 28px 0 -8px; padding: 14px 18px; border-radius: 16px; background: rgba(var(--acc-rgb),0.1); border: 1px solid rgba(var(--acc-rgb),0.3); color: var(--cream); }

/* Guides (content/guides, built into /guides/ and /de/ratgeber/): the legal text column with a
   calmer reading rhythm, a breadcrumb, a hero image, article cards and a quiet note for hosts. */
.guide-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; padding: 0; margin: 0 0 20px; font-size: 14px; color: var(--sub-dim); }
.legal-content .guide-crumbs ol { padding: 0; margin: 0 0 20px; color: var(--sub-dim); }
.guide-crumbs li { margin: 0; }
.guide-crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--sub-faint); }
.guide-crumbs a { color: var(--sub); text-decoration: none; }
.legal-content .guide-crumbs a { color: var(--sub); }
.guide-crumbs a:hover { color: var(--lilac); }
.guide-crumbs [aria-current] { color: var(--sub-faint); }
.guide-content h1 { margin-bottom: 16px; }
.legal-content .guide-lede { font-size: 19px; line-height: 1.55; color: var(--cream); margin: 0 0 16px; }
.legal-content .guide-meta { font-size: 14px; color: var(--sub-faint); margin: 8px 0 0; }
.legal-content .guide-draft { display: inline-block; margin: 16px 0 0; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(var(--acc-rgb),0.45); color: var(--lilac); font-size: 13px; font-weight: 600; }
.legal-content .guide-scheduled { margin-right: 8px; }
.guide-hero { margin: 32px 0 8px; }
.guide-hero img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }
.guide-body { font-size: 18px; line-height: 1.7; }
.legal-content .guide-body p, .legal-content .guide-body ul, .legal-content .guide-body ol { margin: 18px 0; }
.guide-body h2 { margin-top: 44px; }
.guide-body img { width: 100%; height: auto; border-radius: 16px; margin: 28px 0; }
.guide-body blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--lilac); }
.legal-content .guide-body blockquote p { color: var(--cream); font-style: italic; }
.guide-body hr { border: 0; border-top: 1px solid rgba(var(--acc-rgb),0.25); margin: 40px 0; }
.guide-cta { margin-top: 64px; padding: 28px clamp(20px, 4vw, 36px); border-radius: 20px; background: var(--card); border: 1px solid rgba(var(--acc-rgb),0.18); }
.legal-content .guide-cta h2 { font-size: 22px; margin: 0 0 8px; }
.legal-content .guide-cta p { margin: 0 0 20px; }
.legal-content .guide-cta .btn { color: var(--ink); text-decoration: none; }
.legal-content .guide-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 36px; }
.legal-content .guide-card { margin: 0; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: start; }
.guide-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.legal-content .guide-card h2 { font-size: 22px; margin: 0 0 6px; }
.legal-content .guide-card h2 a { color: var(--cream); text-decoration: none; }
.legal-content .guide-card h2 a:hover { color: var(--lilac); }
.legal-content .guide-card p { margin: 0 0 6px; }
.legal-content .guide-empty { margin: 40px 0 0; color: var(--sub-dim); }
@media (max-width: 600px) {
  .legal-content .guide-card { grid-template-columns: 1fr; gap: 14px; }
}

/* Guide building blocks (scripts/guide-markdown.mjs, README): an "at a glance" box under the hero,
   a compact table of contents, callouts, tables that scroll sideways on phones, round-tick
   checklists and figures with captions. Quiet surfaces in the page palette, generous spacing. */
.guide-glance { margin: 32px 0 0; padding: 24px clamp(20px, 4vw, 32px) 26px; border-radius: 20px; background: var(--card); border: 1px solid rgba(var(--acc-rgb),0.18); }
.legal-content .guide-glance-title { margin: 0 0 14px; font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lilac); }
.legal-content .guide-glance ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.legal-content .guide-glance li { position: relative; margin: 0; padding-left: 24px; color: var(--cream); font-size: 17px; line-height: 1.5; }
.guide-glance li::before { content: ""; position: absolute; left: 3px; top: 0.58em; width: 8px; height: 8px; border-radius: 50%; background: var(--orchid); box-shadow: 0 0 0 4px rgba(var(--orchid-rgb),0.16); }

.guide-toc { margin: 32px 0 0; padding: 2px 0 2px 20px; border-left: 2px solid rgba(var(--acc-rgb),0.28); }
.legal-content .guide-toc-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub-dim); }
.legal-content .guide-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
.legal-content .guide-toc li { counter-increment: toc; display: flex; gap: 14px; margin: 0; }
.guide-toc li::before { content: counter(toc, decimal-leading-zero); flex: none; padding-top: 9px; font-size: 13px; line-height: 1.45; font-variant-numeric: tabular-nums; color: var(--sub-faint); }
.legal-content .guide-toc a { display: block; padding: 8px 0; font-size: 16px; line-height: 1.45; color: var(--sub); text-decoration: none; transition: color 0.2s; }
.legal-content .guide-toc a:hover, .legal-content .guide-toc a:focus-visible { color: var(--lilac); }
/* Jump targets stay clear of the fixed header. */
.guide-body [id] { scroll-margin-top: 96px; }

.guide-callout { --tone: var(--acc-rgb); margin: 32px 0; padding: 20px clamp(18px, 3.6vw, 28px) 22px; border-radius: 18px; background: rgba(var(--tone),0.07); border: 1px solid rgba(var(--tone),0.26); }
.guide-callout-note { --tone: 237,208,192; background: rgba(var(--violet-rgb),0.55); }
.guide-callout-important { --tone: var(--orchid-rgb); background: rgba(var(--tone),0.11); border-color: rgba(var(--tone),0.42); box-shadow: inset 4px 0 0 rgb(var(--tone)); }
.legal-content .guide-body .guide-callout-label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--tone)); }
.guide-callout-label svg { flex: none; width: 18px; height: 18px; }
.legal-content .guide-body .guide-callout p, .legal-content .guide-body .guide-callout ul, .legal-content .guide-body .guide-callout ol { margin: 10px 0 0; color: var(--cream); }
.legal-content .guide-body .guide-callout p.guide-callout-label + * { margin-top: 0; }

.guide-body figure { margin: 36px 0; overflow-x: auto; }
.guide-body figure img { margin: 0; width: 100%; height: auto; border-radius: 16px; }
.legal-content .guide-body figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--sub-dim); }
.guide-body figure:has(> table) { padding: 6px clamp(16px, 3vw, 24px) 4px; border-radius: 18px; background: var(--card); border: 1px solid rgba(var(--acc-rgb),0.16); scrollbar-width: thin; scrollbar-color: rgba(var(--acc-rgb),0.35) transparent; }
.guide-body table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; overflow-wrap: normal; }
.guide-body th, .guide-body td { min-width: 9.5em; padding: 14px 20px 14px 0; text-align: left; vertical-align: top; }
.guide-body th:last-child, .guide-body td:last-child { padding-right: 0; }
.guide-body th { padding-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sub-dim); border-bottom: 1px solid rgba(var(--acc-rgb),0.4); vertical-align: bottom; }
.guide-body td { color: var(--sub); border-bottom: 1px solid rgba(var(--acc-rgb),0.13); }
.guide-body tr:last-child td { border-bottom: 0; }
.guide-body td:first-child { color: var(--cream); font-weight: 500; }

/* Task lists ("- [ ]" and "- [x]"): round ticks, for reading only. */
.legal-content .guide-body ul:has(> li > input[type="checkbox"]), .legal-content .guide-body ol:has(> li > input[type="checkbox"]) { padding-left: 0; }
.legal-content .guide-body li:has(> input[type="checkbox"]) { list-style: none; position: relative; margin: 14px 0; padding-left: 40px; }
.guide-body li > input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: absolute; left: 0; top: 0.12em; width: 26px; height: 26px; margin: 0; border-radius: 50%; border: 1.5px solid rgba(var(--acc-rgb),0.55); background: rgba(var(--acc-rgb),0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f49980' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat; opacity: 1; cursor: default; }
.guide-body li > input[type="checkbox"]:checked { border-color: var(--lilac); background-color: var(--lilac); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23200d26' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.legal-content .guide-body li > input[type="checkbox"] + p { margin-top: 0; }
@media (max-width: 600px) {
  .guide-body figure { margin: 30px 0; }
  .guide-body figure:has(> table) { margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); padding-left: var(--g); padding-right: var(--g); border-radius: 0; border-left: 0; border-right: 0; }
}

/* Shared footer (templates/partials/footer.html), identical on every page.
   Desktop: a wider brand column (logo, line, apply button) and two narrow link columns on one grid;
   a quiet bottom bar with copyright, the legal links as one dotted line and the language as a plain text link. */
.site-footer { max-width: 1200px; margin: 0 auto; padding: 88px var(--g) 36px; color: var(--sub); font-size: 15px; }
.site-footer a { text-decoration: none; }
.site-footer .f-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 48px; align-items: start; }
.site-footer .f-brand { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer .f-brand .logo { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .f-brand .logo:hover { color: var(--blush); }
.site-footer .f-brand p { margin-top: 4px; color: var(--sub); font-size: 16px; }
.site-footer .f-cta { margin-top: 24px; }
.site-footer .f-cta:hover { color: var(--ink); }
.site-footer .f-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; padding-top: 10px; }
.site-footer .f-col h2 { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub-dim); line-height: 1.4; margin-bottom: 8px; }
.site-footer .f-col ul { list-style: none; }
.site-footer .f-col a { display: inline-flex; align-items: center; min-height: 34px; color: var(--cream); opacity: 0.78; transition: color 0.2s, opacity 0.2s; }
.site-footer .f-col a:hover, .site-footer .f-col a:focus-visible { color: var(--lilac); opacity: 1; }
.site-footer .f-bottom { display: flex; align-items: center; gap: 8px 32px; margin-top: 64px; padding-top: 14px; border-top: 1px solid rgba(var(--acc-rgb),0.14); color: var(--sub-faint); font-size: 13px; }
.site-footer .f-copy { flex: 0 0 auto; }
.site-footer .f-legal { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.site-footer .f-legal ul { display: flex; flex-wrap: wrap; list-style: none; margin-left: -18px; }
.site-footer .f-legal li { display: inline-flex; align-items: center; }
.site-footer .f-legal li::before { content: "\00B7"; display: inline-block; width: 18px; text-align: center; color: var(--sub-faint); }
.site-footer .f-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sub-dim); transition: color 0.2s; outline-offset: -3px; }
.site-footer .f-legal a:hover, .site-footer .f-legal a:focus-visible { color: var(--cream); }
.site-footer .f-lang { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; color: var(--sub); opacity: 0.8; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; transition: color 0.2s, opacity 0.2s; }
.site-footer .f-lang:hover, .site-footer .f-lang:focus-visible { color: var(--cream); opacity: 1; }
[data-cookie-banner][hidden] { display: none; }

/* The guest part stays on the light peach ground from "What your guests experience" down to the event formats;
   dark cards sit on it on purpose. The host part starts dark with a large transition heading. */
.irl, .formats { background: var(--lilac); color: var(--ink); }
.formats { border-radius: 0 0 44px 44px; }
.irl .sub, .formats .sub { color: var(--ink-muted); font-weight: 500; }
.irl .pol { box-shadow: 0 18px 36px -22px rgba(var(--ink-rgb),0.5); }
.formats { padding-bottom: 96px; }
.formats .scroller { padding-bottom: 34px; }
.formats .scroller figure { box-shadow: 0 24px 44px -28px rgba(var(--ink-rgb),0.6); }
.formats figcaption { color: var(--cream); }
.hosts-intro { padding: 150px var(--g) 0; }
.hosts-intro .kicker { color: var(--lilac); }
.hosts-intro h2 { font-size: clamp(52px, 7.4vw, 120px); line-height: 0.92; max-width: 1100px; scroll-margin-top: 150px; }

/* Phone layout (up to 760 px): calm hero with actions below the video, tighter section rhythm, compact footer. */
@media (max-width: 760px) {
  :root { --section-y: 60px; }

  .hero { min-height: calc(100svh - 170px); padding: 120px var(--g) 30px; }
  body.cookie-open .hero { padding-bottom: 30px; min-height: calc(100svh - 240px); }
  .hero .ph { filter: none; }
  .hero .ph::after { background: linear-gradient(180deg, rgba(var(--night-rgb),0.55) 0%, rgba(var(--night-rgb),0) 22%, rgba(var(--night-rgb),0) 42%, rgba(var(--night-rgb),0.72) 72%, var(--night) 100%); }
  .hero .blob { display: none; }
  .hero h1 { font-size: 44px; line-height: 0.96; }
  .hero p { font-size: 17px; margin-top: 14px; color: var(--cream); opacity: 0.86; }
  .hero .row { display: none; }
  .hero-actions { display: flex; flex-direction: column; gap: 10px; padding: 8px var(--g) 0; }
  .hero-actions .btn, .hero-actions .guest { display: flex; justify-content: center; align-items: center; min-height: 52px; text-align: center; }
  .hero-actions .guest { padding: 12px 18px; background: rgba(255,255,255,0.06); border-color: rgba(var(--acc-rgb),0.25); backdrop-filter: none; }

  .mission { padding: var(--section-y) var(--g); }
  .lilaczone { padding: var(--section-y) var(--g); border-radius: 32px 32px 0 0; }
  .steps { margin-top: 36px; }
  .quiet { padding: 0 var(--g) var(--section-y); }
  .irl { padding: var(--section-y) var(--g); }
  .strip { margin-top: 32px; }
  .formats { padding: 0 0 var(--section-y); }
  .formats .scroller { padding-top: 28px; padding-bottom: 28px; }
  .formats { padding-bottom: calc(var(--section-y) - 28px); }
  .formats { border-radius: 0 0 32px 32px; }
  .hosts-intro { padding: calc(var(--section-y) * 1.4) var(--g) 0; }
  .hosts-intro h2 { font-size: 46px; scroll-margin-top: 120px; }
  .hosts-start { padding: 28px var(--g) 20px; }
  .hosts-start h2 { font-size: 30px; }
  .org { padding: 20px var(--g) var(--section-y); }
  .toolkit { padding: 0 var(--g); }
  .tools { margin-top: 32px; }
  .faq { margin-top: 44px; }
  .final { margin: var(--section-y) var(--g) 150px; }
  .guestbar { margin-bottom: 0; }

  .site-footer { padding: var(--section-y) var(--g) 24px; }
  .site-footer .f-main { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .site-footer .f-brand { align-items: stretch; }
  .site-footer .f-brand .logo { align-self: flex-start; }
  .site-footer .f-cta { display: flex; justify-content: center; align-items: center; min-height: 52px; margin-top: 20px; text-align: center; }
  .site-footer .f-cols { column-gap: 16px; padding-top: 0; }
  .site-footer .f-col h2 { margin-bottom: 2px; }
  .site-footer .f-col a { min-height: 44px; }
  .site-footer .f-bottom { flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin-top: 32px; padding-top: 8px; }
  .site-footer .f-legal { order: -1; flex: 1 1 100%; }
  .site-footer .f-legal li::before { width: 16px; }
  .site-footer .f-legal ul { margin-left: -16px; }
}

/* One photo, new every night: the live selfie screen next to a large heading, still on the light guest ground, with room to breathe. */
.fresh { background: var(--lilac); color: var(--ink); padding: 40px var(--g) 170px; }
.freshgrid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(40px, 5.5vw, 90px); align-items: center; max-width: 1200px; margin: 0 auto; }
.fresh h2 { font-size: clamp(44px, 5.6vw, 88px); line-height: 0.95; max-width: 820px; text-wrap: balance; }
.fresh h2 span { display: block; color: var(--morning-red); }
.fresh p { color: var(--ink-muted); font-size: 19px; line-height: 1.6; margin-top: 28px; max-width: 500px; }
.freshphone { justify-self: center; position: relative; width: min(300px, 100%); border-radius: 40px; overflow: hidden; border: 10px solid var(--ink); background: var(--ink); transform: rotate(3deg); box-shadow: 0 40px 80px -34px rgba(var(--ink-rgb),0.55); }
.freshgrid .freshphone { order: -1; justify-self: end; }
.freshphone img { display: block; width: 100%; height: auto; aspect-ratio: 860 / 1864; }
.freshtag { position: absolute; left: 14px; bottom: calc(15% + 14px); display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 99px; background: rgba(255,248,246,0.9); color: var(--ink); font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: -0.01em; box-shadow: 0 8px 20px -10px rgba(var(--ink-rgb),0.5); }
.freshtag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orchid); box-shadow: 0 0 0 3px rgba(var(--orchid-rgb),0.2); }
@media (max-width: 760px) {
  .fresh { padding: 12px var(--g) calc(var(--section-y) * 1.4); }
  .freshgrid { grid-template-columns: 1fr; gap: 44px; }
  .freshgrid .freshphone { order: 0; justify-self: center; }
  .fresh h2 { font-size: 40px; }
  .fresh p { font-size: 17px; margin-top: 18px; }
  .freshphone { width: min(250px, 70%); border-width: 8px; border-radius: 34px; }
}

/* Scroll motion (motion.js). Only under html.motion, which the head script sets when JavaScript runs and
   reduced motion is off, so without JavaScript everything is visible. Only opacity and the individual
   translate, rotate and scale properties move, so existing transforms (tilted cards, phone) stay intact. */
:root { --reveal-ease: cubic-bezier(.2,.7,.2,1); }
html.motion [data-reveal] { opacity: 0; translate: 0 var(--reveal-y, 22px); transition: opacity 0.65s var(--reveal-ease), translate 0.75s var(--reveal-ease), rotate 0.9s var(--reveal-ease), scale 0.9s var(--reveal-ease); transition-delay: var(--reveal-delay, 0ms); }
html.motion [data-reveal].is-in { opacity: 1; translate: none; rotate: none; scale: none; }
html.motion [data-reveal="tilt"] { --reveal-y: 28px; rotate: var(--reveal-r, -3deg); }
html.motion .pol:nth-child(1) { --reveal-r: 4deg; }
html.motion .pol:nth-child(2) { --reveal-r: -3deg; }
html.motion .pol:nth-child(3) { --reveal-r: 2deg; }
html.motion .pol:nth-child(4) { --reveal-r: -4deg; }
html.motion .pol:nth-child(5) { --reveal-r: 3deg; }
html.motion .freshphone { --reveal-r: -4deg; --reveal-y: 36px; }
html.motion [data-reveal="lift"] { --reveal-y: 44px; scale: 0.965; transform-origin: 0 100%; transition-duration: 0.9s, 1s, 1s, 1s; }
html.motion [data-reveal="pop"] { --reveal-y: 14px; scale: 0.97; }
html.motion [data-reveal="rise"] { --reveal-y: 48px; transition-duration: 0.8s, 1s, 1s, 1s; }
html.motion [data-parallax] { will-change: translate; }
@keyframes page-in { from { opacity: 0; translate: 0 12px; } }
html.motion .legal-content { animation: page-in 0.6s var(--reveal-ease) both; }
@media (prefers-reduced-motion: reduce) {
  html.motion [data-reveal] { opacity: 1; translate: none; rotate: none; scale: none; transition: none; }
  html.motion [data-parallax] { translate: none !important; }
  html.motion .legal-content { animation: none; }
}

/* Afterparty dialog (pre-launch mode): opened with showModal by i18n.js; without JavaScript the link's #afterparty-info shows it via :target. */
.ap-dialog { width: calc(100% - 32px); max-width: 460px; height: fit-content; margin: auto; padding: 0; border: 0; border-radius: 28px; background: var(--card); color: var(--cream); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); }
.ap-dialog::backdrop { background: rgba(var(--night-rgb),0.72); backdrop-filter: blur(6px); }
.ap-dialog:target:not([open]) { display: block; position: fixed; inset: 0; z-index: 100; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 100vmax rgba(var(--night-rgb),0.72); }
.ap-box { padding: 32px 28px 28px; border: 1px solid rgba(var(--acc-rgb),0.25); border-radius: inherit; }
.ap-box h2 { font-size: clamp(26px, 6vw, 34px); line-height: 1.05; }
.ap-box p { margin: 14px 0 26px; color: var(--sub); font-size: 17px; }
.ap-box .btn { min-height: 44px; }
.ap-box .btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }