@font-face{font-family:Geist;src:url('../geist-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url('../geist-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{font-family:Geist,Arial,sans-serif;color:#f7f7f5;background:#eff0ef;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* V8.4: body repeats the root's type and colours. A host that wraps the page
   (the shared link adds body{font:14px system-ui;color:#141413} and
   img{max-width:100%}) must not reach the headline or the images. */
body{margin:0;min-width:320px;overflow-x:clip;font:16px Geist,Arial,sans-serif;color:#f7f7f5;background:#eff0ef}
button{font:inherit}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;max-width:none}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip-link{position:absolute;left:20px;top:-60px;z-index:20;padding:11px 15px;background:#fff;color:#111}
.skip-link:focus{top:12px}
.site-header{position:absolute;z-index:10;top:0;left:50%;width:min(calc(100% - 96px),1470px);height:82px;display:flex;align-items:center;gap:30px;transform:translateX(-50%)}
.wordmark{font-size:27px;font-weight:700;letter-spacing:-.085em}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:27px;font-size:14px;font-weight:700}
.how-link{color:#c2c3c5}
.how-link:hover{color:#fff}
.app-link{display:inline-grid;place-items:center;min-height:42px;padding:0 18px;border-radius:999px;background:#f6f6f4;color:#111113}
.app-link:hover{background:#dededb}
.languages{display:flex;gap:3px}
.languages button{padding:7px 5px;border:0;background:transparent;color:#87898d;font-size:12px;cursor:pointer}
.languages button[aria-pressed=true]{color:#fff;font-weight:700}
.hero{height:calc(100svh + 340px);min-height:850px;background:#101113}
.hero-pin{position:sticky;top:0;height:100svh;min-height:620px;display:flex;align-items:center;overflow:hidden}
.chapter-layout{width:min(calc(100% - 96px),1470px);margin:0 auto;display:grid;align-items:center}
.hero-layout{grid-template-columns:minmax(0,1fr) minmax(600px,1fr);gap:30px;padding-top:62px}
.chapter-copy{position:relative;z-index:2}
h1,h2{margin:0;font-weight:700;letter-spacing:-.075em}
h1{max-width:700px;font-size:clamp(68px,6.8vw,112px);line-height:.94}
.chapter-copy p{max-width:520px;margin:34px 0 0;color:#bec1c1;font-size:clamp(18px,1.35vw,21px);line-height:1.5;letter-spacing:-.015em}
.next-link{display:inline-flex;align-items:center;gap:16px;margin-top:34px;color:#e8e8e6;font-size:14px;font-weight:700}
.next-link span:last-child{display:grid;place-items:center;width:33px;height:33px;border:1px solid currentColor;border-radius:50%;font-size:21px;font-weight:400}
.moment-stage{position:relative;width:650px;height:590px;justify-self:center}
.photo-card{position:absolute;width:310px;height:420px;overflow:hidden;border:2px solid #f1f1ef;border-radius:32px;background:#566f81;box-shadow:0 30px 75px #0009;transform-origin:top left;will-change:transform}
.photo-card img{height:100%;object-fit:cover}
.photo-card-view{left:300px;top:110px;transform:rotate(6deg)}
.photo-card-view img{object-position:center 55%}
.photo-card-you{left:10px;top:90px;z-index:2;padding:0;text-align:left;transform:rotate(-6deg);cursor:default}
.photo-card-you img{object-position:50% 50%}
.photo-card-you.is-ready{cursor:pointer}
.photo-card-you:disabled{pointer-events:none}
.tap-indicator{position:absolute;z-index:2;right:10%;bottom:7%;display:grid;place-items:center;width:29%;aspect-ratio:1;border:4px solid #fff;border-radius:50%;background:#ffffff30;opacity:0;transform:scale(.65);transition:opacity .3s,transform .3s;pointer-events:none}
.tap-indicator span{width:25%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 18px #fff}
.photo-card-you.is-ready .tap-indicator{opacity:1;transform:scale(1);animation:tap-pulse 2.1s ease-out infinite}
@keyframes tap-pulse{0%,100%{box-shadow:0 0 0 0 #ffffff9c}55%{box-shadow:0 0 0 28px #ffffff00}}
.collection{position:relative;z-index:2;min-height:1060px;background:#eff0ef;color:#17191a}
.collection-layout{position:relative;grid-template-columns:minmax(480px,.98fr) minmax(0,1fr);gap:clamp(60px,8vw,140px);align-items:start;min-height:1060px}
.collection-stage{position:absolute;z-index:3;top:105px;left:0;width:min(43vw,570px)}
.diary-grid{--gap:clamp(8px,.75vw,13px);--tile-w:calc((100cqw - 2 * var(--gap))/3);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);container-type:inline-size;mask-image:linear-gradient(to bottom,#000 0%,#000 89%,transparent 100%)}
.diary-tile,.share-photo{position:relative;aspect-ratio:340/455;overflow:hidden;border-radius:clamp(12px,1.35vw,20px);background-color:#344342}
.screenshot-tile{background-image:url('../private-diary-grid.webp');background-size:calc(var(--tile-w) * 3.468) auto;background-position:calc(var(--tile-w) * var(--x)) calc(var(--tile-w) * var(--y));background-repeat:no-repeat}
/* 21.10.: the faded columns beside the phone in the Circle chapter have their own image (slots folder 3e). */
.share-photo.screenshot-tile{background-image:url('../circle-side-grid.webp')}
.natural-tile{background-size:cover;background-position:center}
.sea-tile{background-image:url('../sea.jpg')}
.selfie-tile{background-image:url('../selfie.jpg')}
.archive-card{position:absolute;inset:0;z-index:2;overflow:hidden;border:2px solid #fff;border-radius:inherit;background:#8db1c3;box-shadow:0 20px 48px #1118;transform-origin:50% 50%;will-change:transform}
.archive-view{height:100%;object-fit:cover;object-position:center 55%}
.archive-inset{position:absolute;left:6%;top:5%;width:31%;height:31%;overflow:hidden;border:2px solid #fff;border-radius:23%;background:#17222b}
.archive-inset img{height:100%;object-fit:cover}
.study-caption{margin:13px 0 0;color:#626866;font-size:11px;line-height:1.35;text-align:center}
.collection-copy{grid-column:2;position:sticky;top:clamp(135px,21vh,260px);padding-top:clamp(135px,21vh,260px);padding-bottom:120px}
h2{max-width:650px;font-size:clamp(58px,5.8vw,91px);line-height:.98}
.collection-copy p{color:#484e4c}
.sharing{position:relative;z-index:1;min-height:1260px;padding:140px 0 160px;background:#dce6e1;color:#17201b}
.sharing-layout{grid-template-columns:minmax(0,.88fr) minmax(630px,1.12fr);gap:clamp(40px,6vw,90px);align-items:start}
.sharing-copy{position:sticky;top:clamp(135px,22vh,260px);padding-top:180px}
.sharing-copy p{color:#46544c}
.sharing-copy .future-note{max-width:480px;margin-top:54px;padding-top:18px;border-top:1px solid #97aaa0;font-size:16px}
.sharing-stage{position:relative;width:100%;padding-top:50px}
.sharing-grid{display:grid;grid-template-columns:1fr 1.14fr 1fr;gap:14px;overflow:hidden;max-height:1050px;mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 86%,transparent 100%)}
.sharing-column{display:flex;flex-direction:column;gap:14px;min-width:0;container-type:inline-size}
.sharing-column:nth-child(2){padding-top:150px}
.sharing-column:nth-child(3){padding-top:85px}
.share-photo{flex:none;width:100%;border-radius:20px;box-shadow:0 12px 25px #22372a19}
.share-photo.screenshot-tile{--tile-w:100cqw}
.share-photo-inset{position:absolute;top:6%;left:7%;width:32%;height:30%;overflow:hidden;border:2px solid #fff;border-radius:23%}
.share-photo-inset img{height:100%;object-fit:cover}
.avatar-friends{background-image:url('../../trust-circle-v3.webp');background-position:center 67%}
.selection-note{margin:5px 10px;color:#485b50;font-size:13px;line-height:1.35}
.sharing-stage .study-caption{padding:10px 0;color:#4b5b51}
@media(max-width:1250px){.hero-layout{grid-template-columns:minmax(0,1fr) 520px}.moment-stage{transform:scale(.8);transform-origin:center center;margin-left:-55px;margin-right:-55px}h1{font-size:clamp(62px,6.7vw,91px)}.sharing-layout{grid-template-columns:minmax(0,1fr) minmax(510px,1fr)}.sharing-column:nth-child(2){padding-top:125px}}
@media(max-width:950px){
  .site-header,.chapter-layout{width:calc(100% - 42px)}
  .site-header{height:70px;gap:14px}
  .hero{height:calc(100svh + 250px);min-height:760px}
  .hero-pin{min-height:650px}
  .hero-layout{display:block;padding-top:62px}
  h1{max-width:650px;font-size:clamp(49px,9vw,77px)}
  .hero-copy p{margin-top:19px;max-width:600px;font-size:16px}
  .hero-copy .next-link{margin-top:18px}
  .moment-stage{left:auto;width:380px;height:440px;margin:16px auto 0;transform:none}
  .photo-card{width:220px;height:300px;border-radius:23px}
  .photo-card-view{left:155px;top:45px;transform:rotate(5deg)}
  .photo-card-you{left:0;top:65px;transform:rotate(-6deg)}
  .collection{min-height:0}
  .collection-layout{display:flex;flex-direction:column-reverse;gap:35px;min-height:0;padding-top:78px}
  .collection-copy{position:relative;top:auto;grid-column:auto;padding:0}
  .collection-copy h2{max-width:660px;font-size:clamp(48px,8vw,70px)}
  .collection-copy p{margin-top:22px;font-size:16px}
  .collection-copy .next-link{margin-top:20px}
  .collection-stage{position:relative;top:auto;left:auto;width:min(82vw,510px);align-self:center;margin-bottom:-115px}
  .sharing{padding-top:200px}
  .sharing-layout{display:flex;flex-direction:column;gap:45px}
  .sharing-copy{position:relative;top:auto;padding:0}
  .sharing-copy h2{font-size:clamp(48px,8vw,70px)}
  .sharing-copy p{font-size:16px}
  .sharing-stage{width:min(100%,610px);align-self:center;padding-top:0}
}
@media(max-width:540px){
  .wordmark{font-size:23px}
  .site-nav{gap:0}
  .how-link{display:none}
  .app-link{min-height:36px;padding:0 11px;font-size:12px;white-space:nowrap}
  .languages button{padding:6px 3px;font-size:11px}
  .hero{height:auto;min-height:0;overflow-x:clip}
  .hero-pin{position:relative;height:auto;min-height:0;overflow:visible}
  .hero-layout{padding-top:100px;padding-bottom:30px}
  h1{font-size:clamp(46px,10.8vw,60px)}
  .hero-copy p{font-size:15px;line-height:1.42}
  .moment-stage{margin-top:16px}
  .collection-layout{padding-top:63px}
  .collection-copy h2,.sharing-copy h2{font-size:clamp(45px,10vw,58px)}
  .collection-stage{width:min(96vw,430px);margin-bottom:-80px}
  .sharing{min-height:0;padding:160px 0 90px}
  .sharing-grid{gap:7px;max-height:850px}
  .sharing-column{gap:7px}
  .sharing-column:nth-child(2){padding-top:105px}
  .sharing-column:nth-child(3){padding-top:56px}
  .share-photo{border-radius:12px}
  .selection-note{margin:4px 2px;font-size:11px}
}
@media(max-width:360px){.moment-stage{transform:scale(.82);transform-origin:top left;height:360px}.hero-layout{padding-top:86px}.hero-copy p{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo-card,.archive-card{will-change:auto}.photo-card-you.is-ready .tap-indicator{animation:none}}

/* The collection is a single pinned scene; its diary header yields to the moving grid. */
.hero{height:200svh;min-height:1250px}
.collection{height:330svh;min-height:2300px;overflow:clip}
.collection-pin{position:sticky;top:0;height:100svh;min-height:620px;display:flex;align-items:center}
.collection-layout{position:relative;grid-template-columns:minmax(470px,.94fr) minmax(0,1fr);gap:clamp(58px,8vw,140px);align-items:center;min-height:0}
.collection-stage{position:relative;top:auto;left:auto;width:min(41vw,550px);justify-self:start}
.diary-shell{position:relative;width:100%;height:min(79svh,750px);min-height:530px;overflow:hidden;border-radius:34px;background:#050506;box-shadow:0 34px 85px #10171435}
.diary-header{position:relative;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;height:118px;padding:19px 23px 12px;background:#050506;color:#fff}
.diary-brand{font-size:27px;font-weight:700;letter-spacing:-.085em}
.diary-title{border:1px solid #e5e6e3;border-radius:999px;padding:8px 14px;font-size:15px;white-space:nowrap}
.diary-viewport{position:absolute;top:118px;right:0;bottom:0;left:0;overflow:hidden}
.diary-grid{--gap:clamp(7px,.65vw,11px);margin:0 17px 20px;mask-image:none;will-change:transform}
.diary-tile{border-radius:clamp(10px,1vw,16px)}
.first-tile{background-image:url('../sea.jpg');background-size:cover;background-position:center 55%}
.tile-inset{position:absolute;top:5%;left:6%;width:31%;height:31%;overflow:hidden;border:2px solid #fff;border-radius:23%}
.tile-inset img{height:100%;object-fit:cover}
.feed-dim{position:absolute;inset:0;z-index:1;background:#030506b8;opacity:0;pointer-events:none}
.archive-card,.focus-card{position:absolute;z-index:5;overflow:hidden;border:2px solid #fff;border-radius:22px;background:#8db1c3;box-shadow:0 24px 56px #0008;pointer-events:none;will-change:left,top,width,height,opacity}
.archive-card{inset:auto}
.focus-card{opacity:0}
.archive-view{height:100%;object-fit:cover;object-position:center 55%}
.archive-inset{position:absolute;left:6%;top:5%;width:31%;height:31%;overflow:hidden;border:2px solid #fff;border-radius:23%;background:#17222b}
.archive-inset img{height:100%;object-fit:cover}
.collection-stage .study-caption{color:#666c69}
.collection-copy{position:relative;top:auto;grid-column:2;padding:0}
.collection-copy .next-link{margin-top:28px}
.share-decision{position:absolute;z-index:6;top:80%;right:0;width:min(44%,440px);padding:20px;border:1px solid #cad8cf;border-radius:24px;background:#f8fbf9;box-shadow:0 24px 55px #334a3726;opacity:0;transform:translateY(36px);pointer-events:none;will-change:opacity,transform}
.share-decision.is-visible{pointer-events:auto}
.share-decision .decision-question{margin:0 0 14px;color:#243229;font-size:18px;font-weight:700;line-height:1.25}
.decision-options{display:flex;flex-wrap:wrap;gap:9px}
.decision-circle{display:flex;align-items:center;gap:8px;min-height:48px;padding:5px 11px 5px 5px;border:1px solid #adbbb2;border-radius:999px;background:#fff;color:#23322a;font-size:13px;font-weight:700;cursor:pointer}
.decision-circle[aria-pressed=true]{border-color:#254b35;background:#254b35;color:#fff}
.decision-avatar{display:block;width:35px;height:35px;border-radius:50%;background-size:cover;background-position:center}
.decision-check{display:none;margin-left:3px;font-size:14px}
.decision-circle[aria-pressed=true] .decision-check{display:block}
@media(max-width:950px){
  .hero{height:185svh;min-height:1040px}
  .collection{height:330svh;min-height:2000px}
  .collection-pin{min-height:0}
  .collection-layout{display:flex;flex-direction:column;justify-content:center;gap:15px;width:calc(100% - 42px);height:100%;padding:25px 0}
  .collection-copy{order:0;width:min(100%,610px);align-self:center}
  .collection-copy h2{font-size:clamp(42px,6vw,58px)}
  .collection-copy p{margin-top:13px;font-size:15px;line-height:1.4}
  .collection-copy .next-link{margin-top:12px}
  .collection-stage{order:1;align-self:center;width:min(74vw,460px);margin:0}
  .diary-shell{height:min(62svh,630px);min-height:390px}
  .diary-header{height:90px;padding:13px 18px 8px}
  .diary-viewport{top:90px}
  .diary-grid{margin:0 11px 18px}
  .diary-brand{font-size:23px}
  .diary-title{font-size:13px}
  .share-decision{top:auto;right:calc((100% - min(74vw,460px))/2 - 14px);bottom:18px;width:min(380px,67vw);padding:13px;border-radius:18px}
  .share-decision .decision-question{font-size:14px}
  .decision-circle{min-height:39px;font-size:11px}
  .decision-avatar{width:28px;height:28px}
}
@media(max-width:540px){
  .hero{height:180svh;min-height:1000px;overflow:visible}
  .hero-pin{position:sticky;top:0;height:100svh;min-height:0;overflow:hidden}
  .hero-layout{padding-top:74px;padding-bottom:0}
  .moment-stage{height:370px}
  .collection{height:350svh;min-height:1900px}
  .collection-layout{justify-content:flex-start;padding-top:30px;gap:12px}
  .collection-copy h2{font-size:clamp(37px,9.7vw,48px)}
  .collection-copy p{font-size:13px;line-height:1.32}
  .collection-copy .next-link{display:none}
  .collection-stage{width:min(91vw,420px)}
  .diary-shell{height:calc(100svh - 280px);min-height:365px;max-height:530px;border-radius:25px}
  .diary-header{height:75px;padding:10px 13px 7px}
  .diary-viewport{top:75px}
  .diary-brand{font-size:21px}
  .diary-title{font-size:11px;padding:6px 9px}
  .diary-grid{margin:0 8px 12px}
  .collection-stage .study-caption{margin-top:7px}
  .share-decision{right:16px;bottom:50px;width:min(350px,calc(100% - 32px))}
  .share-decision .decision-question{margin-bottom:9px}
  .decision-options{gap:5px}
  .decision-circle{min-height:34px;padding:3px 7px 3px 3px;font-size:10px}
  .decision-avatar{width:25px;height:25px}
}
@media(prefers-reduced-motion:reduce){.diary-grid,.archive-card,.focus-card,.share-decision{will-change:auto}}

/* Keep the two capture cards within their own column, including at full-screen widths. */
.hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,650px);column-gap:clamp(35px,5vw,110px)}
.moment-stage{max-width:100%}
@media(min-width:951px) and (max-width:1400px){
  .hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
  .moment-stage{transform:scale(.8);transform-origin:center center;margin-left:-55px;margin-right:-55px}
}

/* The real V2 Private Diary hierarchy: wordmark, scope pill, then view tabs. */
.diary-header{height:155px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:11px 18px 10px}
.diary-wordmark{display:flex;flex-direction:column;align-items:center;line-height:1}
.diary-beta{color:#d6bb8a;font-size:9px;line-height:1;letter-spacing:.28em}
.diary-brand{margin-top:4px;color:#fff;font-size:43px;font-weight:700;line-height:.9;letter-spacing:-.085em}
.diary-title{display:inline-block;margin-top:6px;padding:4px 13px;border:1.5px solid #fff;border-radius:999px;color:#fff;font-size:15px;line-height:1.2}
.diary-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;align-items:center;width:100%;margin-top:10px}
.diary-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:28px;color:#a7a8a8;font-size:13px;font-weight:700;white-space:nowrap}
.diary-tab.is-active{border:1.5px solid #fff;border-radius:999px;color:#fff}
.diary-tab svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.diary-viewport{top:155px}
@media(max-width:950px){
  .hero-layout{display:block}
  .moment-stage{max-width:none}
  .diary-header{height:133px;padding:10px 12px 8px}
  .diary-brand{font-size:38px}
  .diary-title{font-size:13px}
  .diary-tabs{margin-top:8px}
  .diary-tab{font-size:12px}
  .diary-viewport{top:133px}
}
@media(max-width:540px){
  .diary-header{height:117px;padding:8px 10px 7px}
  .diary-brand{font-size:32px}
  .diary-beta{font-size:7px}
  .diary-title{margin-top:4px;font-size:11px;padding:3px 10px}
  .diary-tabs{margin-top:6px;gap:3px}
  .diary-tab{min-height:24px;gap:4px;font-size:10px}
  .diary-tab svg{width:13px;height:13px}
  .diary-viewport{top:117px}
}

/* The diary stays in place while the white/mint boundary holds at mid-screen. */
.collection{height:520svh;overflow:visible;background:transparent}
.collection-pin{align-items:flex-start}
.collection-layout{height:100%;align-items:start}
.collection-stage{width:min(41vw,500px,50svh);margin-top:clamp(54px,7svh,82px)}
.collection-copy{align-self:center;margin-top:-65px}
.diary-shell{--diary-header-height:155px;--diary-header-collapse:0px;height:calc(100svh + 165px);min-height:755px}
.diary-header{height:var(--diary-header-height);transform:translateY(calc(-1 * var(--diary-header-collapse)));will-change:transform}
.diary-viewport{top:calc(var(--diary-header-height) - var(--diary-header-collapse));will-change:top}
.sharing{height:420svh;min-height:0;margin-top:-230svh;margin-bottom:0;padding-top:0}
.sharing-layout{position:sticky;top:calc(-1 * var(--sharing-hold-offset,0px));height:100svh;padding-top:95px;align-items:start;will-change:opacity}
.sharing-copy{position:relative;top:auto;align-self:start;padding-top:0}
.sharing-copy{will-change:transform,opacity}
.sharing-stage{height:calc(100svh - 95px);padding-top:50px;overflow:hidden}
.sharing-grid{max-height:none;will-change:transform}
/* Keep the diary and Circle chapters on the same centered desktop rails. */
@media(min-width:951px){
  .collection-layout,.sharing-layout{width:min(calc(100vw - 96px),1320px);grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:clamp(56px,5.5vw,88px)}
  .collection-layout{flex:none;margin-inline:auto}
  .collection-stage{max-width:500px}
  .collection-copy h2,.sharing-copy h2{max-width:590px}
}

/* The Circle is the subject; surrounding Dual Moments provide context. */
.sharing-grid{grid-template-columns:minmax(0,.58fr) minmax(0,1.68fr) minmax(0,.58fr);gap:12px;overflow:visible}
.sharing-column.photo-column{z-index:1;opacity:.56;transform:scale(.86);transform-origin:center top}
.sharing-column.circle-column{z-index:3;margin-inline:-19px;padding-top:95px}
.sharing-column:nth-child(3){padding-top:130px}
.selection-note{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Circle choice lives on the moment, not as a form beside the chapter copy. */
.share-decision{position:absolute;z-index:7;top:var(--decision-top,180px);left:var(--decision-left,0px);right:auto;display:flex;flex-direction:column;justify-content:center;width:var(--decision-width,250px);height:var(--decision-height,180px);padding:14px 18px 18px;border:0;border-radius:0 0 20px 20px;background:linear-gradient(180deg,#07100bb8,#07100bee 72%);color:#fff;box-shadow:none;opacity:0;transform:translateY(24px);pointer-events:none;text-align:center;backdrop-filter:none}
.share-decision .decision-question{margin:0 0 12px;color:#fff;font-size:15px;font-weight:700}
.decision-options{display:flex;justify-content:center;gap:24px;flex-wrap:nowrap}
.decision-circle{display:flex;flex-direction:column;gap:7px;min-width:92px;min-height:0;padding:0;border:0;border-radius:0;background:none;color:#e6e8e5;font-size:12px;line-height:1.15;text-align:center;cursor:pointer;transition:opacity .25s ease}
.decision-circle:hover,.decision-circle[aria-pressed=true]{background:none;color:#fff}
.decision-avatar{position:relative;display:block;width:76px;height:76px;flex:none;margin:0 auto;border:3px solid #ffffffde;border-radius:50%;background-size:cover;transition:transform .3s,border-color .3s,box-shadow .3s}
.decision-circle:hover .decision-avatar{transform:translateY(-3px)}
.decision-circle[aria-pressed=true] .decision-avatar{border-color:#fff;box-shadow:0 0 0 5px #d6bb8a,0 9px 25px #0009;transform:scale(1.08)}
.share-decision.is-locked .decision-circle:not([aria-pressed=true]){opacity:.24}
.share-decision.is-locked .decision-circle[aria-pressed=true] .decision-avatar{transform:scale(1.15);box-shadow:0 0 0 7px #d6bb8a,0 13px 35px #000b}
.decision-check{position:absolute;right:-8px;bottom:-4px;display:none;place-items:center;width:20px;height:20px;margin:0;border-radius:50%;background:#fff;color:#13241b;font-size:13px;font-weight:700}
.decision-circle[aria-pressed=true] .decision-check{display:grid}
.circle-morph{position:fixed;z-index:30;top:0;left:0;width:0;height:0;overflow:hidden;border:3px solid #fff;background:#17271e;box-shadow:0 22px 55px #101e19a8;opacity:0;pointer-events:none;will-change:left,top,width,height,border-radius,opacity}
.circle-morph img{display:block;width:100%;height:100%;object-fit:cover}
.circle-morph[data-circle=friends] img{object-position:center 67%}
@media(max-width:950px){
  .collection{height:520svh}
  .collection-layout{align-items:center;justify-content:flex-start}
  .collection-copy{align-self:center;margin-top:0}
  .collection-stage{width:min(74vw,460px,50svh);margin-top:0}
  .diary-shell{--diary-header-height:133px;height:calc(100svh - 160px);min-height:520px}
  .sharing-layout{padding-top:100px}
  .sharing-copy{padding-top:0}
  .sharing-stage{height:calc(100svh - 100px);padding-top:0}
  .share-decision{right:auto;bottom:auto;padding:11px 8px 14px}
  .share-decision .decision-question{font-size:13px}
  .decision-circle{min-height:0;padding:0;font-size:11px}
  .decision-avatar{width:65px;height:65px}
}
@media(max-width:540px){
  .collection{height:540svh}
  .collection-stage{width:min(91vw,420px)}
  .diary-shell{--diary-header-height:117px;height:calc(100svh - 115px);min-height:560px;max-height:none}
  .sharing-layout{padding-top:105px}
  .sharing-stage{height:calc(100svh - 105px)}
  .share-decision{padding:8px 5px 10px;border-radius:0 0 20px 20px}
  .share-decision .decision-question{margin-bottom:8px;font-size:11px}
  .decision-options{gap:7px}
  .decision-circle{min-width:76px;gap:4px;font-size:9px}
  .decision-avatar{width:53px;height:53px;border-width:2px}
}
@media(max-width:950px){
  .sharing-grid{grid-template-columns:minmax(0,.43fr) minmax(0,1.6fr) minmax(0,.43fr);gap:8px}
  .sharing-column.circle-column{margin-inline:-10px;padding-top:70px}
  .sharing-column:nth-child(3){padding-top:105px}
}
@media(max-width:540px){
  .sharing-layout{padding-top:83px;gap:16px}
  .sharing-copy h2{font-size:39px;line-height:.97}
  .sharing-copy p{font-size:14px;line-height:1.32}
  .sharing-copy .future-note{margin-top:13px;padding-top:9px;font-size:12px;line-height:1.3}
  .sharing-stage{height:calc(100svh - 325px);flex:none}
  .sharing-grid{grid-template-columns:minmax(0,.34fr) minmax(0,1.72fr) minmax(0,.34fr);gap:5px}
  .sharing-column.photo-column{opacity:.45;transform:scale(.85)}
  .sharing-column.circle-column{margin-inline:-7px;padding-top:47px}
  .sharing-column:nth-child(3){padding-top:76px}
}
@media(prefers-reduced-motion:reduce){.decision-avatar{transition:none}}

/* V2 diary hierarchy: the secondary views live beside the wordmark, not in the tab row. */
.diary-header{height:165px}
.diary-shell{--diary-header-height:165px}
.diary-tabs{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-top:13px}
.diary-feature-trigger{position:absolute;z-index:2;top:27px;display:grid;place-items:center;width:42px;height:42px;padding:8px;border:0;border-radius:50%;background:transparent;color:#c5c6c5;cursor:pointer}
.diary-feature-trigger:hover,.diary-feature-trigger[aria-pressed=true]{background:#ffffff1b;color:#fff}
.diary-calendar-trigger{left:18px}
.diary-map-trigger{right:18px}
.diary-feature-trigger svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.diary-header{z-index:8}
.diary-shell[data-diary-feature] .diary-tab.is-active{border-color:transparent;color:#a7a8a8}
.diary-shell[data-diary-feature=calendar] .diary-calendar-trigger,.diary-shell[data-diary-feature=map] .diary-map-trigger{background:#25282c;color:#fff}
.diary-shell[data-diary-feature=map] .diary-header{background:linear-gradient(#111c,#1118 77%,transparent)}
.diary-shell[data-diary-feature=map] .diary-tab{border-radius:999px;background:#060606;color:#c9c9c9}
.diary-feature-panel{position:absolute;z-index:6;top:var(--diary-header-height);right:0;bottom:0;left:0;overflow:auto;background:#080808;color:#fff}
.diary-feature-panel[data-active=map]{top:0;overflow:hidden;background:#f7f5ec}
.diary-feature-panel[hidden]{display:none}
.diary-feature-view{display:none;padding:28px 16px 36px}
.diary-feature-panel[data-active=calendar] .diary-calendar-view,.diary-feature-panel[data-active=map] .diary-map-view{display:block}
.calendar-month{margin:20px 0 17px;text-align:center;font-size:clamp(15px,1.8vw,22px);font-weight:800;letter-spacing:-.025em}
.calendar-following{margin-top:clamp(95px,13svh,180px)}
.calendar-days,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;text-align:center}
.calendar-days{margin-bottom:10px;color:#fff;font-size:11px;font-weight:800;text-transform:uppercase}
.calendar-grid span{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:.78;padding-bottom:10%;border:1px solid transparent;border-radius:13px;background:#171717;color:#fff;font-size:clamp(11px,1.35vw,16px);font-weight:800}
.calendar-grid .calendar-empty{background:transparent}
.calendar-grid .calendar-current{border:1.5px solid #fff;background:#080808}
.calendar-grid .has-moment{background-image:linear-gradient(transparent 45%,#0008),var(--day-image);background-size:cover;background-position:center;color:#fff}
.diary-map-view{height:100%;padding:0}
.feature-map{position:relative;height:100%;min-height:100%;overflow:hidden;background:#f7f5ec}
.feature-map svg{display:block;width:100%;height:100%}
.map-moment-marker{position:absolute;z-index:1;display:block;width:70px;aspect-ratio:340/455;overflow:visible;border:3px solid #fff;border-radius:16px;background:#fff;box-shadow:0 10px 27px #17222957;transform:translate(-50%,-50%)}
.map-moment-marker>img{display:block;width:100%;height:100%;border-radius:13px;object-fit:cover}
.map-moment-marker-main{z-index:3;top:39%;left:47%;width:clamp(112px,28%,150px);border-width:4px;border-radius:21px;box-shadow:0 16px 39px #1722297a}
.map-moment-marker-main>img{border-radius:17px}
.map-moment-marker-secondary{top:23%;left:24%;transform:translate(-50%,-50%) rotate(-8deg)}
.map-moment-marker-tertiary{top:53%;left:77%;width:76px;transform:translate(-50%,-50%) rotate(7deg)}
.map-moment-inset{position:absolute;top:6%;left:7%;width:36%;aspect-ratio:.82;overflow:hidden;border:2px solid #fff;border-radius:25%;box-shadow:0 2px 8px #0006}
.map-moment-inset img{display:block;width:100%;height:100%;object-fit:cover}
.map-moment-marker b{position:absolute;bottom:-15px;left:50%;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#292d31;color:#fff;font-size:13px;transform:translateX(-50%)}
@media(max-width:540px){.map-moment-marker-main{width:104px}.map-moment-marker-secondary{left:22%;width:56px}.map-moment-marker-tertiary{left:78%;width:60px}}
@media(max-width:950px){.diary-header{height:137px}.diary-shell{--diary-header-height:137px}.diary-feature-trigger{top:22px;width:33px;height:33px}.diary-feature-trigger svg{width:18px;height:18px}.diary-tabs{margin-top:8px}}
@media(max-width:540px){.diary-header{height:122px}.diary-shell{--diary-header-height:122px}.diary-feature-trigger{top:17px;width:29px;height:29px;padding:5px}.diary-calendar-trigger{left:7px}.diary-map-trigger{right:7px}.diary-feature-trigger svg{width:16px;height:16px}.diary-tabs{margin-top:6px}.diary-feature-view{padding:18px 9px 25px}.diary-map-view{padding:0}.calendar-days,.calendar-grid{gap:3px}.calendar-grid span{font-size:10px;border-radius:7px}.calendar-month{font-size:15px}.calendar-following{margin-top:90px}}

/* A real moment carries the story into the badge chapter. */
.badge-chapter{position:relative;z-index:2;height:250svh;background:#182b30;color:#f4f5ef}
.badge-pin{position:sticky;top:0;display:flex;align-items:center;height:100svh;overflow:hidden}
.badge-layout{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(45px,7vw,130px)}
.badge-copy{opacity:0;transform:translateY(80px);will-change:transform,opacity}
.badge-copy p{max-width:470px;color:#c0cdca}
.badge-stage{justify-self:center;width:min(34vw,440px);text-align:center}
.proof-card{position:relative;width:100%;aspect-ratio:340/455;perspective:1200px;opacity:0;will-change:opacity,transform}
.proof-card-rotor{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.proof-face{position:absolute;inset:0;overflow:hidden;border:2px solid #f9faf4;border-radius:28px;backface-visibility:hidden;box-shadow:0 30px 70px #0007}
.proof-front{background:#86b2c3}
.proof-front>img{height:100%;object-fit:cover}
.proof-inset{position:absolute;top:5%;left:6%;width:31%;height:31%;overflow:hidden;border:2px solid #fff;border-radius:23%}
.proof-inset img{height:100%;object-fit:cover}
.proof-back{display:flex;flex-direction:column;align-items:center;padding:30px 24px;background:#050505;color:#fff;border-color:#d4b65a;transform:rotateY(180deg)}
.proof-seal{width:48%;max-width:180px;margin:10% auto 5%;filter:drop-shadow(0 10px 16px #c9a74a3b)}
.proof-name{font-size:clamp(29px,2.7vw,43px);font-weight:700;letter-spacing:-.055em;line-height:1}
.proof-flip-button{position:absolute;z-index:2;top:13px;right:13px;display:grid;place-items:center;width:42px;height:42px;border:1.5px solid #c5a34f;border-radius:50%;background:#050505d9;color:#d7b75b;cursor:pointer}
.proof-flip-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.proof-flip-button:disabled{opacity:0;pointer-events:none}
.badge-hint{margin:17px 0 0;color:#c0cdca;font-size:13px;opacity:0}
.badge-transfer{position:fixed;z-index:25;top:0;left:0;width:0;height:0;perspective:1200px;opacity:0;pointer-events:none;will-change:left,top,width,height,opacity}
.transfer-rotor{position:absolute;inset:0;transform-style:preserve-3d}
.transfer-face{position:absolute;inset:0;overflow:hidden;border:2px solid #fff;border-radius:20px;backface-visibility:hidden;box-shadow:0 22px 52px #0007}
.transfer-front{background:#86b2c3}
.transfer-front>img{width:100%;height:100%;object-fit:cover}
.transfer-front span{position:absolute;top:5%;left:6%;width:31%;height:31%;overflow:hidden;border:2px solid #fff;border-radius:23%}
.transfer-front span img{width:100%;height:100%;object-fit:cover}
.transfer-back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-color:#d4b65a;background:#050505;color:#fff;transform:rotateY(180deg)}
.transfer-back img{width:45%;max-width:170px}
.transfer-back strong{font-size:clamp(22px,3vw,38px)}
@media(max-width:950px){.badge-layout{display:flex;flex-direction:column;gap:25px}.badge-copy h2{font-size:clamp(45px,7vw,68px)}.badge-copy p{margin-top:16px;font-size:16px}.badge-stage{width:min(62vw,370px)}}
@media(max-width:540px){.badge-layout{gap:20px}.badge-copy h2{font-size:40px}.badge-copy p{font-size:14px;line-height:1.38}.badge-stage{width:min(69vw,305px)}.proof-face{border-radius:22px}.proof-back{padding:18px 15px 14px}.proof-seal{width:44%;margin:7% auto 2%}.proof-name{font-size:25px}.proof-flip-button{width:44px;height:44px;top:10px;right:10px}}
@media(prefers-reduced-motion:reduce){.badge-copy,.proof-card,.badge-transfer{will-change:auto}.proof-card-rotor{transition:none}}

/* The second sharing example is distinct from the sea moment that enters the diary. */
.recall-moment-tile{background-image:url('../../trust-circle-v3.webp')}
.collection-stage{overflow:visible}
.focus-card{z-index:8}
.share-decision{z-index:9}

/* The badge has a focal seal and one human sentence. */
.proof-seal{width:35%;max-width:145px;margin:6% auto 3%}
.proof-name{font-size:clamp(34px,3vw,47px)}
@media(max-width:540px){.proof-back{padding:16px 15px 61px}.proof-seal{width:34%;margin:4% auto 2%}.proof-name{font-size:27px}}

@media(max-width:540px){.sharing-copy{min-height:260px}}

@media(max-width:540px){.proof-back{padding-bottom:62px}.proof-seal{width:38%;margin:6% auto 2%}}

@media(max-width:540px){.badge-stage{width:min(80vw,330px)}}

/* Section 4 copy: a gold rule leads into the bridge sentence. */
.badge-story-bridge{max-width:455px;margin-top:31px}
.badge-story-rule{display:block;width:56px;height:2px;background:#d2b963}
.badge-story-bridge p{margin:13px 0 0;color:#eadfbf;font-size:15px;line-height:1.4}
@media(max-width:540px){.badge-story-bridge{margin-top:13px}.badge-story-rule{width:40px}.badge-story-bridge p{margin-top:8px;font-size:11px}.proof-back{padding-bottom:65px}}

@media(max-width:950px){html,body{overflow-x:clip}}

/* ---------------------------------------------------------------------------
   Story v2 (2026-09-25): circle from the inside, minimal badge + gift,
   three brand scenarios (take part → badge → offer), closing.
   --------------------------------------------------------------------------- */
.avatar-family{background-image:url('../private-diary-grid.webp');background-size:260px auto;background-position:-96px -230px}
.circle-morph-inset{position:absolute;top:5%;left:6%;width:31%;height:31%;overflow:hidden;border:2px solid #fff;border-radius:23%}
.circle-morph-inset img{width:100%;height:100%;object-fit:cover}
.circle-morph img{object-position:center 67%}

.sharing-column.circle-column{align-items:center}
.circle-view{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px;padding:14px;color:#17241d}
.circle-view::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:28px;background:#f6faf7;box-shadow:0 22px 50px #1d33262b;opacity:var(--cv-chrome,1)}
.cv-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 10px;padding:4px 4px 0;opacity:var(--cv-chrome,1)}
.cv-kind{grid-column:1/-1;color:#5a6d62;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cv-name{font-size:clamp(26px,2.3vw,34px);line-height:1;letter-spacing:-.05em}
.cv-members{display:flex;align-items:center;gap:8px;color:#4b5d52;font-size:12px;font-weight:600;white-space:nowrap}
.cv-avatars{display:flex}
.cv-avatars i{--tile-w:30px;display:block;width:24px;height:24px;margin-left:-7px;border:2px solid #f6faf7;border-radius:50%;background-image:url('../private-diary-grid.webp');background-size:calc(var(--tile-w) * 3.468) auto;background-position:calc(var(--tile-w) * var(--x)) calc(var(--tile-w) * var(--y))}
.cv-avatars i[hidden]{display:none}
.cv-post{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:20px;background:#17271e}
.cv-post-view{width:100%;height:100%;object-fit:cover;object-position:center 67%}
.cv-post-inset{position:absolute;top:5%;left:6%;width:31%;height:31%;overflow:hidden;border:2px solid #fff;border-radius:23%}
.cv-post-inset img{width:100%;height:100%;object-fit:cover}
.cv-post-label{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:#0b140fcc;color:#fff;font-size:12px;font-weight:700}
.cv-reaction{align-self:flex-start;max-width:88%;padding:10px 13px;border-radius:16px 16px 16px 4px;background:#fff;box-shadow:0 6px 18px #1d332614;opacity:var(--cv-feed,1)}
.cv-reaction p{margin:0;color:#17241d;font-size:15px;line-height:1.3}
.cv-reaction small{display:block;margin-top:4px;color:#607267;font-size:11px;font-weight:700}
.cv-friend{display:flex;align-items:center;gap:12px;opacity:var(--cv-feed,1)}
.cv-friend-moment{--tile-w:58px;position:relative;flex:none;width:58px;height:77px;border-radius:12px}
.cv-friend-inset{position:absolute;top:5px;left:5px;width:34%;height:30%;border:1.5px solid #fff;border-radius:6px;background:url('../selfie.jpg') center/cover}
.cv-friend-copy{display:flex;flex-direction:column;gap:2px;font-size:13px;color:#4b5d52}
.cv-friend-copy strong{color:#17241d;font-size:15px}
.cv-privacy{margin:2px 4px 0;color:#3f5247;font-size:12px;line-height:1.35;opacity:var(--cv-feed,1)}
.cv-others{max-width:420px;margin:14px 0 0;color:#3f5247;font-size:12px;text-align:center}
.cv-others span:first-child{font-weight:700}
@media(max-width:540px){.circle-view{gap:8px;padding:9px}.circle-view::before{border-radius:20px}.cv-name{font-size:21px}.cv-kind{font-size:9px}.cv-members{font-size:10px}.cv-avatars i{width:18px;height:18px;margin-left:-5px}.cv-post{border-radius:14px}.cv-post-label{left:8px;bottom:8px;font-size:10px;padding:4px 8px}.cv-reaction{padding:7px 9px}.cv-reaction p{font-size:12px}.cv-friend-moment{--tile-w:42px;width:42px;height:56px}.cv-friend-copy{font-size:11px}.cv-friend-copy strong{font-size:12px}.cv-privacy{font-size:10px}.cv-others{font-size:10px;margin-top:8px}}

/* Badge: the card is the back of the moment, so it carries no mini moments. */
.proof-back{justify-content:flex-start;padding:26px 24px 20px}
.proof-seal{width:34%;max-width:140px;margin:4% auto 3%}
.proof-footer{width:100%;padding-top:10px;border-top:1px solid #d6bc7045;color:#8f8a7c;font-size:11px;text-align:left}
.gift-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;margin-top:18px;padding:14px 16px;border:1px dashed #d4b65a99;border-radius:18px;background:#0b1416;color:#f3eee2;text-align:left;opacity:0;will-change:opacity,transform}
.gift-kicker{grid-column:1;color:#d4b65a;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gift-title{grid-column:1;font-size:17px;letter-spacing:-.02em}
.gift-note{grid-column:1/-1;margin:4px 0 0;color:#b9c3c0;font-size:12px;line-height:1.35}
.gift-action{grid-column:2;grid-row:1/3;min-height:42px;padding:0 16px;border:0;border-radius:999px;background:#d4b65a;color:#16120a;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.gift-card.is-accepted .gift-action{background:transparent;border:1px solid #d4b65a;color:#d4b65a;font-size:11px;max-width:150px;line-height:1.2}
@media(min-width:951px){.badge-stage{width:min(30vw,400px)}}
@media(max-width:950px){.badge-stage{width:min(66vw,360px)}}
@media(max-width:540px){.proof-back{padding:14px 13px 11px}.proof-seal{width:26%;margin:2% auto 1%}.proof-footer{padding-top:6px;font-size:9px}.gift-card{margin-top:10px;padding:9px 11px;border-radius:14px}.gift-note{display:none}.gift-title{font-size:13px}.gift-kicker{font-size:9px}.gift-action{min-height:36px;padding:0 12px;font-size:11px}.badge-stage{width:min(72vw,300px)}}

/* Brand scenarios: one fixed promise, three worlds. */
.offers{position:relative;z-index:3;background:#efd9c4;color:#3b2e29;transition:background-color .45s ease,color .45s ease}
.offers[data-mode=padel]{background:#0e2b45;color:#f4f5f0}
.offers[data-mode=fernivo]{background:#d6d9d3;color:#171b1a}
.offers-layout{grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:28px clamp(40px,7vw,120px);align-items:start}
.offers-copy{grid-column:1;grid-row:1}
.scenario-card{grid-column:2;grid-row:1}
.offers-foot{grid-column:1;grid-row:2;max-width:560px}
.offers-foot p{margin:0;color:inherit;font-size:15px;line-height:1.45}
.offers-eyebrow{display:block;margin-bottom:20px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.offers-copy h2{max-width:13ch;font-size:clamp(46px,4.6vw,76px);color:inherit}
.offers-copy p{max-width:40ch;color:inherit;opacity:.82}
.scenario-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:560px;margin-top:30px}
.scenario-switch button{display:flex;flex-direction:column;gap:3px;min-height:64px;padding:10px 12px;border:1px solid currentColor;border-radius:16px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.78}
.scenario-switch button small{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.scenario-switch button strong{font-size:14px;overflow-wrap:anywhere}
.scenario-switch button[aria-pressed=true]{opacity:1;background:#1c1714;border-color:#1c1714;color:#fff}
.offers[data-mode=padel] .scenario-switch button[aria-pressed=true]{background:#f4f5f0;border-color:#f4f5f0;color:#0e2b45}
.scenario-switch button:focus-visible,.scn-actions button:focus-visible,.gift-action:focus-visible,.closing-cta:focus-visible{outline:3px solid #d4b65a;outline-offset:3px}
.offers-brandline{padding-top:16px;border-top:1px solid currentColor}
.offers-foot .offers-disclaimer{margin-top:12px;font-size:11px;opacity:.6}
.scenario-card{overflow:hidden;border-radius:28px;background:#2b1d1a;color:#fff;box-shadow:0 30px 70px #2a1a1454}
.offers[data-mode=padel] .scenario-card{background:#102c47;box-shadow:0 30px 70px #04101d9e}
.offers[data-mode=fernivo] .scenario-card{background:#101414;box-shadow:0 30px 70px #0508095c}
.scn-image{position:relative;height:190px;overflow:hidden}
.scn-image img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.scn-image::after{content:"";position:absolute;inset:0;background:linear-gradient(#0000 25%,#000c)}
.scn-circle,.scn-identity{position:absolute;z-index:1;left:18px}
.scn-circle{top:16px;padding:5px 10px;border-radius:999px;background:#000a;font-size:11px;font-weight:700}
.scn-identity{bottom:34px;font-size:34px;letter-spacing:-.05em;line-height:1}
.offers[data-mode=cafe] .scn-identity{font-family:Georgia,serif;font-style:italic;font-weight:500}
.scn-tiles{display:flex;gap:6px}
.scn-tile{--tile-w:40px;position:relative;width:40px;height:53px;border-radius:8px}
.scn-tile.is-empty{opacity:.25;filter:grayscale(1)}
.scn-progress{color:#d4b65a;font-size:12px;font-weight:700}
.scn-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scn-actions button{min-height:40px;padding:0 10px;border:1px solid #ffffff6b;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.scn-actions button.is-primary{border-color:#d4b65a;background:#d4b65a;color:#16120a}
.scn-result{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;font-size:13px;font-weight:600}
.scn-result.is-accepted{color:#e9d08a}
.scn-undo{width:32px;height:32px;border:1px solid #ffffff4d;border-radius:50%;background:transparent;color:#fff;cursor:pointer}
@media(max-width:950px){.offers-layout{display:flex;flex-direction:column;gap:30px}.scenario-card{width:100%;max-width:520px;margin-inline:auto}}
@media(max-width:540px){.offers-copy h2{font-size:38px}.offers-copy p{font-size:14px}.scenario-switch{gap:5px;margin-top:20px}.scenario-switch button{min-height:56px;padding:7px 8px;border-radius:12px}.scenario-switch button small{font-size:8px}.scenario-switch button strong{font-size:11px}.offers-foot p{font-size:13px}.scn-image{height:150px}.scn-identity{font-size:28px}.scn-actions button{font-size:11px}}

/* Closing: why it can be trusted, and an honest way in. */
.closing{position:relative;z-index:3;padding:clamp(100px,14vh,170px) 0;background:#0f1211;color:#f2f2ee}
.closing-layout{display:flex;flex-direction:column;align-items:flex-start;gap:44px}
.closing h2{max-width:12ch;color:#f2f2ee}
.closing-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;width:100%;margin:0;padding:0;list-style:none}
.closing-points li{padding-top:16px;border-top:1px solid #ffffff2e}
.closing-points strong{font-size:18px}
.closing-points p{margin:8px 0 0;color:#aeb6b2;font-size:15px;line-height:1.45}
.closing-action{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.closing-cta{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;background:#f2f2ee;color:#0f1211;font-weight:800;text-decoration:none}
.closing-action p{margin:0;color:#8e9893;font-size:14px}
@media(max-width:950px){.closing-points{grid-template-columns:1fr;gap:18px}}
@media(max-width:540px){.closing h2{font-size:42px}.closing-layout{gap:30px}}
@media(prefers-reduced-motion:reduce){.offers{transition:none}}

/* Objects alternate sides: S1 right, S2 left, S3 right, S4 left, S5 right. */
@media(min-width:951px){
  .badge-layout{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
  .badge-stage{grid-column:1;grid-row:1}
  .badge-copy{grid-column:2;grid-row:1}
  .sharing-column.circle-column{padding-top:24px}
  .circle-view{max-width:min(420px,calc((100svh - 300px) * .75))}
}

/* Section 2 hint: calendar and map light up once while the moment settles into the grid. */
.diary-feature-trigger.is-hinting{color:#fff;background:rgba(255,255,255,calc(var(--hint) * .14));box-shadow:0 0 0 calc(1.5px + var(--hint) * 3px) rgba(232,211,154,calc(var(--hint) * .85)),0 0 calc(var(--hint) * 22px) rgba(232,211,154,calc(var(--hint) * .55))}

/* Section 5 as a pinned stage: three scenarios, one after another. */
.offers{padding:0}
.offers-track{position:relative;height:430svh}
.offers-pin{position:sticky;top:0;display:flex;align-items:center;min-height:100svh;padding:90px 0 40px;box-sizing:border-box}
.offers-layout{align-items:center}
.offers-foot{display:flex;flex-direction:column;gap:12px;padding:10px 0 110px}
.offers-foot p{max-width:620px}
.scenario-switch button{position:relative;overflow:hidden}
.scenario-meter{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--meter,0) * 100%);background:#d4b65a}
.scn-index{position:absolute;z-index:1;top:16px;right:16px;padding:5px 10px;border-radius:999px;background:#d4b65a;color:#16120a;font-size:11px;font-weight:800}
.scn-tile{transition:opacity .25s ease,filter .25s ease}
.scenario-card.is-entering .scn-image img,.scenario-card.is-entering .scn-identity{animation:scn-enter .45s ease both}
@keyframes scn-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:950px){.offers-pin{align-items:flex-start;padding:80px 0 24px}.offers-foot{padding:20px 0 80px}}
@media(max-width:540px){.offers-pin{padding:72px 0 16px}.offers-layout{gap:18px}.scn-index{top:12px;right:12px;font-size:10px}.scn-circle{max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(prefers-reduced-motion:reduce){.scenario-card.is-entering .scn-image img,.scenario-card.is-entering .scn-identity{animation:none}.scn-tile{transition:none}}
.offers .scn-image{height:130px}
@media(max-width:540px){.offers .scn-image{height:118px}.offers .scn-identity{bottom:28px;font-size:26px}}
.offers-pin{padding:78px 0 16px}
@media(max-width:950px){.offers-pin{padding:80px 0 16px}}
@media(max-width:540px){.offers-pin{padding:70px 0 12px}}

/* Moving cards travel on the compositor: fixed box at the origin, transform only. */
.archive-card,.focus-card{left:0;top:0;transform-origin:0 0;will-change:transform,opacity}
.circle-morph,.badge-transfer{transform-origin:0 0;will-change:transform,opacity}
/* Shorter circle hold: the badge approach starts sooner after the circle settles. */
.sharing{height:300svh}

/* S1 -> S2 flight: the composed hero moment travels into the diary. */
.moment-flight{position:fixed;z-index:6;top:0;left:0;width:0;height:0;overflow:hidden;border:2px solid #fff;border-radius:24px;background:#8db1c3;box-shadow:0 24px 56px #0008;opacity:0;pointer-events:none;transform-origin:0 0;will-change:transform,opacity}
/* The flying moment keeps the post's rounded corners (radius travels with the transform). */
.circle-morph{border-radius:20px}
@media(max-width:540px){.circle-morph{border-radius:14px}}

/* S3 desktop: the whole circle card fits one screen — post left, conversation right. */
@media(min-width:951px){
  .sharing-grid{grid-template-columns:minmax(0,.4fr) minmax(0,2fr) minmax(0,.4fr)}
  .circle-view{display:grid;max-width:600px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:auto auto auto auto 1fr;gap:12px 16px;align-items:start}
  .cv-head{grid-column:1/-1}
  .cv-post{grid-column:1;grid-row:2/6}
  .cv-reaction{grid-column:2;grid-row:2;max-width:none}
  .cv-friend{grid-column:2;grid-row:3;flex-direction:column;align-items:flex-start;gap:8px}
  .cv-friend-moment{--tile-w:110px;width:110px;height:147px;border-radius:14px}
  .cv-privacy{grid-column:2;grid-row:5;align-self:end;margin:0}
}

/* ---------------------------------------------------------------------------
   Floating facts (2026-09-26): the badge card stays minimal; the few things a
   visitor must take away arrive from the front and rest over the card edges.
   --------------------------------------------------------------------------- */
.float-card{--in:1;position:absolute;z-index:4;display:flex;align-items:flex-start;gap:10px;max-width:240px;padding:11px 14px;border:0;border-radius:16px;background:#f6f2e7;color:#16120a;font:inherit;text-align:left;box-shadow:0 18px 40px #0000004d,0 2px 6px #0000002e;cursor:pointer;opacity:var(--in);transform:translate3d(0,calc((1 - var(--in)) * 34px),0) scale(calc(1.3 - .3 * var(--in)));transform-origin:50% 50%;will-change:transform,opacity}
.float-card svg{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:#a07e22;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.float-card span{display:flex;flex-direction:column;gap:2px}
.float-card small{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.62}
.float-card strong{font-size:15px;line-height:1.2;letter-spacing:-.01em}
.float-card em{display:none;max-width:26ch;margin-top:3px;font-size:12px;font-style:normal;line-height:1.35;opacity:.75}
.float-card.is-open em{display:block}
.float-card:focus-visible{outline:3px solid #d4b65a;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.float-card{transform:none}}

/* S4 — the badge itself carries only seal, name and circle. */
.badge-stage{position:relative}
.proof-back{justify-content:center;gap:10px;padding:28px 22px}
.proof-back .proof-seal{width:46%;max-width:190px;margin:0 auto 8px}
.proof-back .proof-name{font-size:clamp(34px,3.2vw,48px)}
.proof-circle{color:#c8a853;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.float-layer{position:absolute;top:0;left:0;width:100%;aspect-ratio:340/455;pointer-events:none}
.float-layer .float-card{pointer-events:auto}
.fc-a{top:9%;left:-16%}
.fc-b{top:37%;right:-18%}
.fc-c{top:63%;left:-14%}
.fc-gift{right:-10%;bottom:-9%;left:auto;display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:78%;max-width:320px;margin:0;border:0;background:#f6f2e7;color:#16120a;opacity:var(--in)}
.fc-gift .gift-kicker{color:#8a6a14}
.fc-gift .gift-note{color:#4d4637}
.fc-gift .gift-action{background:#16120a;color:#f6f2e7}
.fc-gift.is-accepted .gift-action{background:transparent;border:1px solid #16120a;color:#16120a}
.badge-hint{margin-top:48px}
@media(max-width:950px){.fc-a{left:-10%}.fc-b{right:-10%}.fc-c{left:-8%}.fc-gift{right:-6%}}
@media(max-width:540px){.proof-back .proof-seal{width:40%}.proof-back .proof-name{font-size:28px}.proof-circle{font-size:10px}.float-card{gap:7px;max-width:170px;padding:8px 10px;border-radius:12px}.float-card svg{width:15px;height:15px}.float-card small{font-size:8px}.float-card strong{font-size:12px}.float-card em{font-size:10px}.fc-a{left:-12%;top:6%}.fc-b{right:-12%;top:34%}.fc-c{left:-10%;top:60%}.fc-gift{width:92%;right:-4%;bottom:-12%;padding:9px 11px}.fc-gift .gift-note{display:none}.badge-hint{margin-top:44px}}

/* S5 — the whole section takes on the brand's world; YOMO keeps its voice. */
.offers[data-mode=cafe]{--b-bg:#dcd7c8;--b-ink:#222222;--b-soft:#4a4a42;--b-accent:#70735e;--b-accent-ink:#f4f1e8;--b-card:#222222;--b-card-ink:#eeeeee;--b-font:'Lexend',Geist,sans-serif}
.offers[data-mode=padel]{--b-bg:linear-gradient(160deg,#004059 0%,#0f4f86 55%,#1b5da1 100%);--b-ink:#ffffff;--b-soft:#d6e4f3;--b-accent:#1b5da1;--b-accent-ink:#ffffff;--b-card:#ffffff;--b-card-ink:#0b2a44;--b-font:'Oswald',Geist,sans-serif}
.offers[data-mode=fernivo]{--b-bg:#0b0b0b;--b-ink:#ffffff;--b-soft:#bdbdbd;--b-accent:#000000;--b-accent-ink:#ffffff;--b-card:#ffffff;--b-card-ink:#000000;--b-font:'Barlow Condensed',Geist,sans-serif}
.offers,.offers[data-mode=padel],.offers[data-mode=fernivo]{background:var(--b-bg);color:var(--b-ink)}
.offers-copy p,.offers-foot p{color:var(--b-soft);opacity:1}
.scenario-switch button{border-color:currentColor;color:var(--b-ink)}
.scenario-switch button[aria-pressed=true],.offers[data-mode=padel] .scenario-switch button[aria-pressed=true]{background:var(--b-ink);border-color:var(--b-ink);color:#1b1b1b}
.offers[data-mode=padel] .scenario-switch button[aria-pressed=true]{color:#0b2a44}
.scenario-stage{position:relative;width:100%;max-width:440px;margin-inline:auto;padding-bottom:40px}
.offers .scenario-card,.offers[data-mode=padel] .scenario-card,.offers[data-mode=fernivo] .scenario-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:26px;background:var(--b-card);color:var(--b-card-ink);box-shadow:0 30px 70px #0000003d}
.bc-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:14px 16px}
.brand-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--b-accent);color:var(--b-accent-ink);font:700 11px/1 var(--b-font);letter-spacing:.06em}
.offers[data-mode=cafe] .brand-avatar{background:#dcd7c8;color:#222}
.offers[data-mode=cafe] .brand-avatar::after{content:"MORVÉNO"}
.offers[data-mode=padel] .brand-avatar{box-shadow:0 0 0 2px #fff,0 0 0 4px #1b5da1;font-size:15px}
.offers[data-mode=padel] .brand-avatar::after{content:"BA"}
.offers[data-mode=fernivo] .brand-avatar{width:42px;background:#000;color:#fff;font-size:12px;letter-spacing:0;text-transform:lowercase}
.offers[data-mode=fernivo] .brand-avatar::after{content:"fernivo"}
.bc-who{display:flex;flex-direction:column;min-width:0}
.bc-who strong{font:700 17px/1.1 var(--b-font);letter-spacing:.01em}
.offers[data-mode=padel] .bc-who strong,.offers[data-mode=fernivo] .bc-who strong{text-transform:uppercase;font-size:19px}
.bc-who small{overflow:hidden;font-size:11px;white-space:nowrap;text-overflow:ellipsis;opacity:.7}
.offers .scn-index{position:static;padding:4px 9px;border-radius:999px;background:var(--b-accent);color:var(--b-accent-ink);font-size:10px;font-weight:800;white-space:nowrap}
.offers[data-mode=cafe] .scn-index{background:#70735e;color:#f4f1e8}
.offers[data-mode=fernivo] .scn-index{background:#000;color:#fff}
.bc-image{height:235px;overflow:hidden}
.bc-image img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
.offers[data-mode=fernivo] .bc-image img{filter:grayscale(1) contrast(1.1)}
.bc-badge{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 18px 22px;text-align:center}
.bc-seal{display:flex;flex-direction:column;align-items:center;gap:6px}
.bc-seal img{width:74px;height:74px;object-fit:contain;transition:filter .35s ease,opacity .35s ease}
.bc-seal strong{font:700 24px/1 var(--b-font)}
.offers[data-mode=padel] .bc-seal strong{text-transform:uppercase}
.scenario-card:not(.is-earned) .bc-seal img,.scenario-card:not(.is-earned) .bc-stage.is-open img{filter:grayscale(1);opacity:.45}
.offers .scn-tiles{justify-content:center}
.offers .scn-progress{color:inherit;font-size:12px;font-weight:700;opacity:.75}
.bc-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.bc-stage{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:14px;background:#0000000a}
.bc-stage img{width:38px;height:38px;object-fit:contain}
.bc-stage strong{font:800 15px/1 var(--b-font);text-transform:uppercase}
.bc-stage small{font-size:10px;opacity:.65}
.bc-stage.is-open{background:#000;color:#fff}
.bc-stage.is-locked{opacity:.45}
.bc-stage.is-locked img{filter:grayscale(1)}
.bc-teaser{font:800 14px/1.2 var(--b-font);text-transform:uppercase;letter-spacing:.02em}
.scn-floats{position:absolute;inset:0;pointer-events:none}
.scn-floats .float-card{pointer-events:auto;max-width:250px;background:#ffffff;color:#141414}
.offers[data-mode=cafe] .scn-floats .float-card{background:#f4f1e8;color:#222}
.scn-floats strong{font-family:var(--b-font)}
.offers[data-mode=padel] .scn-floats strong,.offers[data-mode=fernivo] .scn-floats strong{text-transform:uppercase;letter-spacing:.01em}
.fs-a{top:32%;left:-12%}
.fs-b{top:50%;right:-12%}
.fs-c{bottom:0;left:4%;right:4%;max-width:none!important;flex-direction:column;gap:6px}
.fs-c .scn-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:6px}
.fs-c .scn-actions button{min-height:38px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.fs-c .scn-actions button.is-primary{border-color:var(--b-accent);background:var(--b-accent);color:var(--b-accent-ink)}
.offers[data-mode=cafe] .fs-c .scn-actions button.is-primary{border-color:#70735e;background:#70735e;color:#f4f1e8}
.fs-c .scn-result{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:6px 0 0;font-size:13px;font-weight:700}
.fs-c .scn-undo{width:30px;height:30px;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
@media(max-width:540px){.scenario-stage{max-width:340px;padding-bottom:36px}.bc-head{padding:11px 12px}.brand-avatar{width:36px;height:36px;font-size:9px}.bc-who strong{font-size:15px}.bc-image{height:170px}.bc-badge{padding:12px 12px 18px;gap:8px}.bc-seal img{width:56px;height:56px}.bc-seal strong{font-size:19px}.fs-a{left:-6%;top:30%}.fs-b{right:-6%;top:50%}.scn-floats .float-card{max-width:190px}.fs-c{left:2%;right:2%}}
/* Facts sit in the free zones above and below the seal, never over it. */
.proof-back .proof-seal{width:40%}
.fc-a{top:6%;left:-16%}
.fc-b{top:19%;right:-24%}
.fc-c{top:82%;left:-16%}
@media(max-width:950px){.fc-a{left:-10%}.fc-b{right:-12%}.fc-c{top:85%;left:-10%}}
@media(max-width:540px){.fc-a{top:4%;left:-12%}.fc-b{top:17%;right:-12%}.fc-c{top:77%;left:-12%}.proof-back .proof-seal{width:36%}}
/* S5 float placement: facts rest on the image zone and below the card, never over seal or progress. */
.offers[data-mode=cafe]{--b-solid:#dcd7c8}
.offers[data-mode=padel]{--b-solid:#0b3a5e}
.offers[data-mode=fernivo]{--b-solid:#0b0b0b}
.scenario-switch button[aria-pressed=true],.offers[data-mode=padel] .scenario-switch button[aria-pressed=true]{color:var(--b-solid)}
.scn-floats .float-card{flex-direction:column;gap:2px}
.scenario-stage{padding-bottom:104px}
.fs-a{top:17%;left:-10%}
.fs-b{top:29%;right:-7%}
.fs-c{bottom:0;left:5%;right:5%}
@media(max-width:540px){.scenario-stage{padding-bottom:112px}.fs-a{top:16%;left:-5%}.fs-b{top:28%;right:-4%}.fs-c{left:1%;right:1%}}

/* S5 brand world: image, motif and wordmark fill the whole stage behind the content. */
.offers-world{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.offers-layout{position:relative;z-index:1}
.ow-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
/* 21.10.: on wide screens the café photo fills only the left part and fades out, so the cup sits between the text and the card instead of behind it. */
@media(min-width:900px) and (orientation:landscape){.offers[data-mode=cafe] .ow-image{width:64%;-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent);mask-image:linear-gradient(90deg,#000 72%,transparent)}}
.offers-world::after{content:"";position:absolute;inset:0;background:var(--b-veil)}
.ow-pattern{position:absolute;z-index:1;inset:0}
.ow-mark{position:absolute;z-index:1;right:-1vw;bottom:-3.2vw;color:var(--b-ink);font:700 clamp(120px,19vw,300px)/.8 var(--b-font);letter-spacing:-.02em;white-space:nowrap;opacity:.09}
.offers-world.is-entering .ow-image,.offers-world.is-entering .ow-mark{animation:scn-enter .6s ease both}
.offers[data-mode=cafe]{--b-veil:linear-gradient(90deg,#dcd7c8 0%,#dcd7c8f2 34%,#dcd7c899 56%,#dcd7c826 100%)}
.offers[data-mode=padel]{--b-veil:linear-gradient(90deg,#004059 0%,#004059ee 34%,#0f4f86a6 58%,#1b5da144 100%)}
.offers[data-mode=fernivo]{--b-veil:linear-gradient(90deg,#0b0b0b 0%,#0b0b0bee 36%,#0b0b0b99 58%,#0b0b0b40 100%)}
.offers[data-mode=fernivo] .ow-image{filter:grayscale(1) contrast(1.1)}
.offers[data-mode=cafe] .ow-pattern{background:radial-gradient(circle at 88% 14%,#f6c56fcc 0,#f6c56f55 5vw,transparent 14vw)}
.offers[data-mode=padel] .ow-pattern{inset:16% 5% 12% 55%;border:2px solid #ffffff3d;border-radius:6px}
.offers[data-mode=padel] .ow-pattern::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:2px solid #ffffff3d}
.offers[data-mode=padel] .ow-pattern::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed #ffffff33}
.offers[data-mode=fernivo] .ow-pattern{background:linear-gradient(115deg,transparent 52%,#ffffff17 52% 57%,transparent 57% 61%,#ffffff17 61% 66%,transparent 66% 70%,#ffffff17 70% 75%,transparent 75%)}
.offers[data-mode=padel] .ow-mark,.offers[data-mode=fernivo] .ow-mark{text-transform:uppercase}
@media(max-width:950px){
  .offers[data-mode=cafe]{--b-veil:linear-gradient(180deg,#dcd7c8 0%,#dcd7c8f0 42%,#dcd7c8a6 70%,#dcd7c866 100%)}
  .offers[data-mode=padel]{--b-veil:linear-gradient(180deg,#004059 0%,#004059ee 42%,#0f4f86b0 70%,#1b5da170 100%)}
  .offers[data-mode=fernivo]{--b-veil:linear-gradient(180deg,#0b0b0b 0%,#0b0b0bee 42%,#0b0b0ba8 70%,#0b0b0b70 100%)}
  .ow-mark{bottom:auto;top:38%;right:-4vw;font-size:34vw}
  .offers[data-mode=padel] .ow-pattern{inset:40% 6% 6% 6%}
}
@media(prefers-reduced-motion:reduce){.offers-world.is-entering .ow-image,.offers-world.is-entering .ow-mark{animation:none}}

/* Usage as a possibility: who, where, how long — then the choice. */
.fs-rights{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:4px}
.fs-rights dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:13px}
.fs-rights dt{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.6;padding-top:2px}
.fs-rights dd{margin:0;font-weight:600}
.fs-note{margin:0;font-size:11px;line-height:1.35;opacity:.7}
.fs-c .scn-actions{margin-top:4px}
@media(max-width:540px){.fs-rights dl{font-size:11px}.fs-note{font-size:10px}}

/* S4 -> S5 hop: the badge card glides to the brand card and hands over. */
.badge-hop{position:fixed;z-index:7;top:0;left:0;width:0;height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;border:2px solid #d4b65a;border-radius:26px;background:#050505;color:#fff;box-shadow:0 30px 70px #0007;opacity:0;pointer-events:none;transform-origin:0 0;will-change:transform,opacity}
.badge-hop img,.badge-hop strong{opacity:var(--hop-content,1)}
.badge-hop img{width:34%;max-width:150px}
.badge-hop strong{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.05em}
/* The wordmark stays a quiet watermark: its entry animation must not lift its opacity. */
.offers-world.is-entering .ow-mark{animation:ow-mark-enter .7s ease both}
@keyframes ow-mark-enter{from{transform:translateY(24px)}to{transform:none}}
.ow-mark{opacity:.1}
.offers[data-mode=cafe] .ow-mark{color:#70735e;opacity:.16}
/* The usage card now carries where + how long: give it room below the card. */
.scenario-stage{padding-bottom:150px}
@media(max-width:540px){.scenario-stage{padding-bottom:160px}}

/* ===== V7 tempo: the same story in about two thirds of the scroll distance ===== */
.hero{height:150svh;min-height:980px}
.collection{height:450svh}
.badge-chapter{height:180svh}
.offers-track{height:300svh}
@media(max-width:950px){.collection{height:460svh}}
.sharing{height:241svh}

/* V8.20: mountain moment. Her own view of the same day, and the second time as a thumbnail on the badge. */
.circle-view[data-circle="friends"] .cv-friend-moment{background-image:url('../her-view-v3.jpg');background-size:cover;background-position:center}
.cv-friend-inset{display:none}
.fc-c{align-items:center}
.fc-thumb{flex:none;width:46px;height:61px;border-radius:9px;object-fit:cover;box-shadow:0 2px 8px #0003}
@media(max-width:540px){.fc-thumb{width:34px;height:45px;border-radius:7px}}

/* V8.20: back camera left and in front at the start of section 1. */
.photo-card-view{left:10px;top:90px;transform:rotate(-6deg)}
.photo-card-you{left:300px;top:110px;transform:rotate(6deg)}
@media(max-width:950px){.photo-card-view{left:0;top:65px;transform:rotate(-6deg)}.photo-card-you{left:155px;top:45px;transform:rotate(5deg)}}

/* V8.20: own picture for the family circle tile (website-slots/3b_circle_familie-kachel). */
.circle-view[data-circle="family"] .cv-friend-moment{background-image:url('../family-view-v3.jpg');background-size:cover;background-position:center}

/* V8.21 copy: removed lines stay out of the layout; no recap block before the closing call. */
.hero-freedom:empty,.offer-fair:empty,.values-built:empty,.cf-copy > p:empty,[data-website-text="fallback"]:empty{display:none}
.closing-layout{display:none}

/* V8.21 Chapters: the photo book leads. Formats first, the how-to as a detail. */
.chapter-showcase{--scene-ink:#f4f4ef;--scene-muted:#bac5bf;--scene-line:#ffffff26;--scene-accent:#b8f1d0;min-width:0;color:var(--scene-ink)}
.chapter-formats{margin-top:0}
.chapter-formats .format-tabs{margin-bottom:22px}
.chapter-formats .format-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.format-soon{display:inline-block;padding:2px 7px;border-radius:999px;background:#d2b963;color:#16120a;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.chapter-formats [data-format-panel]{animation:scene-enter .45s ease both}
.chapter-formats [data-format-panel][hidden]{display:none}
.chapter-formats h3{margin:22px 0 8px;font-size:clamp(24px,2.3vw,34px);line-height:1.08;letter-spacing:-.04em}
.chapter-formats [data-format-panel] > p{max-width:42ch;margin:0;color:var(--scene-muted);font-size:16px;line-height:1.55}
.photobook{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1.55/1;width:100%;padding:14px;border-radius:10px;background:linear-gradient(90deg,#2a3a31 0,#33473b 50%,#2a3a31 100%);box-shadow:0 34px 70px #0008,0 2px 0 #ffffff14 inset;perspective:1600px}
.photobook-page{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;padding:clamp(12px,2vw,22px);background:#f6f2e8;color:#263a31;overflow:hidden}
.photobook-left{border-radius:6px 2px 2px 6px;box-shadow:inset -18px 0 26px -18px #0006}
.photobook-right{border-radius:2px 6px 6px 2px;box-shadow:inset 18px 0 26px -18px #0006;transform-origin:left center}
.photobook small{font-size:10px;letter-spacing:.12em;color:#5d6f63}
.photobook h4{margin:0;font-size:clamp(18px,2vw,28px);line-height:1;letter-spacing:-.045em}
.pb-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1;min-height:0}
.pb-pair img,.photobook-right > img:not(.pb-inset){width:100%;height:100%;min-height:0;object-fit:cover;border-radius:3px}
.photobook-right > img:not(.pb-inset){flex:1}
.pb-inset{position:absolute;top:calc(clamp(12px,2vw,22px) + 8px);left:calc(clamp(12px,2vw,22px) + 8px);width:30%;aspect-ratio:3/4;height:auto;object-fit:cover;border:2px solid #fff;border-radius:10px;box-shadow:0 6px 16px #0004}
.pb-caption{font-size:11px;color:#5d6f63}
.pb-caption:empty{display:none}
.photobook img[hidden]{display:none}
.photobook.is-turning .photobook-right{animation:pb-turn .7s cubic-bezier(.2,.8,.2,1)}
@keyframes pb-turn{0%{transform:rotateY(-80deg);opacity:.2}100%{transform:none;opacity:1}}
.photobook-cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:12px 20px;border:0;border-radius:999px;background:#f4f4ef;color:#151b19;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.photobook-cta:focus-visible{outline:2px solid var(--scene-accent);outline-offset:4px}
.chapter-export{margin:22px 0 0;color:#f4f4ef;font-size:15px;font-weight:600}
.chapter-how{margin-top:22px;border-top:1px solid var(--scene-line);padding-top:16px}
.chapter-how > summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-weight:700;color:var(--scene-ink)}
.chapter-how > summary::-webkit-details-marker{display:none}
.chapter-how > summary::after{content:'+';display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#ffffff1f;font-size:16px}
.chapter-how[open] > summary::after{content:'–'}
.chapter-how > h3{margin:18px 0 8px;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em}
.chapter-how > p{max-width:48ch;margin:0 0 10px;color:var(--scene-muted);line-height:1.55}
.chapter-how .chapter-how-note{font-size:13px}
.chapter-how .story-sequence{margin-top:16px}
@media(max-width:950px){.photobook{aspect-ratio:1.35/1;padding:9px}.photobook-page{padding:10px}.pb-caption{display:none}.chapter-formats .format-tabs button{font-size:12px}}
@media(prefers-reduced-motion:reduce){.photobook.is-turning .photobook-right{animation:none}}
.chapters-section h2{max-width:17ch;font-size:clamp(40px,4.4vw,68px)}

/* V8.21b: Chapters fits one screen; every format uses the same stage, so switching never jumps. */
.chapter-formats .format-tabs{margin-bottom:16px}
.chapter-formats [data-format-panel]{animation:none}
.chapter-formats .photobook{width:auto;max-width:100%;aspect-ratio:1.55/1}
.chapter-formats .format-picture{width:auto;aspect-ratio:3/3.6;transform:none;padding:12px;border-radius:8px}
.chapter-formats .format-collage{width:min(100%,520px);transform:none;border-radius:8px}
.chapter-formats [data-format-panel]{transform:translateZ(0);outline:none}
.chapter-formats h3{margin:16px 0 6px;font-size:clamp(20px,1.7vw,26px)}
.chapter-formats [data-format-panel] > p{min-height:0;font-size:15px}
.photobook-cta{margin-top:12px;padding:10px 18px;font-size:14px}
.chapter-export{margin-top:14px;font-size:14px}
.chapter-how{margin-top:14px;padding-top:12px}
h1,h2,h3{text-wrap:balance}

/* V8.21: the three promises stay visible; the technical answer opens beneath them. */
.values-pillars{padding-top:28px}
.values-pillars .values-proof-grid{margin-top:0}
.values-tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#456a5022;color:#456a50;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.values-tech{margin-top:26px}
.values-tech > summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-weight:700}
.values-tech > summary::-webkit-details-marker{display:none}
.values-tech > summary::after{content:'+';display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#17201b14;font-size:15px}
.values-tech[open] > summary::after{content:'–'}
.values-tech-body{max-width:70ch;margin-top:14px}
.values-tech-body h4{margin:0 0 10px;font-size:18px;letter-spacing:-.02em}
.values-tech-body p{margin:0 0 10px;font-size:15px;line-height:1.6;color:#4b5d52}

/* V8.21c: consumer principle, one calm hierarchy; empty helper lines stay out. */
.values-section .values-lead,.values-section .values-body{max-width:56ch;margin:0 0 16px;font-size:clamp(17px,1.3vw,19px);line-height:1.6;opacity:1;color:#2b3b32}
.values-pillars .values-proof-grid h3{font-size:19px;margin-bottom:8px}
.values-pillars .values-proof-grid p{font-size:15px;opacity:1;color:#4b5d52}
.values-tag{margin-left:8px;padding:0;background:none;color:#6f8274;font-size:11px;font-weight:700;letter-spacing:.06em}
.values-tech-body p{font-size:15px;color:#4b5d52}
.values-tech-body h4:empty,.values-tech-body p:empty,.chapter-how > h3:empty,.chapter-how > p:empty{display:none}
.chapter-how .story-sequence{margin-top:14px}
/* reading an opened explanation: the floating app bar steps back */
body.is-reading .sticky-cta{opacity:0;pointer-events:none;transform:translateY(130%);transition:opacity .25s,transform .25s}
/* comfortable touch targets */
[data-language]{min-width:44px;min-height:44px}
.values-tech > summary,.chapter-how > summary,.values-proof > summary{min-height:44px}

/* V8.21d Chapters: headline and format choice share the top line; one stage for all three formats. */
.chapters-section .scene-layout{align-items:start}
.chapters-section .chapter-copy{padding-top:4px}
.format-stage{display:grid;place-items:center;width:100%;aspect-ratio:1.55/1;max-height:min(48vh,440px);margin:0 auto}
.format-stage > *{max-width:100%;max-height:100%}
.format-stage .photobook{height:100%;width:auto;aspect-ratio:1.55/1}
.format-stage .format-picture{height:100%;width:auto;aspect-ratio:3/3.7;margin:0}
.format-stage .format-picture img[hidden]{display:none}
.format-stage .format-collage{height:100%;width:auto;aspect-ratio:1.25/1;margin:0}
.format-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;color:#bac5bf;font-size:13px}
.format-nav button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff33;border-radius:50%;background:transparent;color:#f4f4ef;font:inherit;font-size:18px;cursor:pointer}
.format-nav button:focus-visible{outline:2px solid #b8f1d0;outline-offset:3px}
@media(max-width:950px){.format-stage{max-height:none}}
.format-stage{width:min(100%,calc(min(48vh,440px) * 1.55));max-height:none}
.format-stage .photobook{width:100%;height:100%}
.chapters-section h2{max-width:16ch;font-size:clamp(36px,3.7vw,58px)}
@media(max-width:950px){.format-stage{width:100%}}
.chapters-section h2{max-width:none;font-size:clamp(34px,3.3vw,52px)}
.chapters-section .chapter-copy p + p{margin-top:12px}
#chapters h2{max-width:none;font-size:clamp(34px,3.3vw,52px)}
#chapters h2{font-size:clamp(38px,3.9vw,60px)}
/* stage size comes only from its aspect ratio; the content is placed inside it */
.format-stage{position:relative;display:block;min-height:0}
.format-stage > .format-picture,.format-stage > .format-collage{position:absolute;top:0;bottom:0;left:50%;height:100%;width:auto;max-width:100%;transform:translateX(-50%)}
.format-stage > .photobook{position:absolute;inset:0;width:100%;height:100%}

/* V8.21e Chapters: one calm caption style for all three formats; arrows for all three. */
.format-caption{max-width:52ch;margin:14px auto 0;text-align:center;color:#bac5bf;font-size:15px;line-height:1.55}
.format-caption strong{color:#f4f4ef;font-weight:600}
.chapter-formats [data-format-panel] > p.format-caption{min-height:3.1em;margin-top:12px}
.chapters-section .chapter-copy .chapter-export{margin-top:18px;color:#f4f4ef;font-size:inherit;font-weight:600}
/* Chapters ruhiger: eine Textgröße links, Bildunterschrift so breit wie das Buch */
.chapters-section .chapter-copy p.chapter-export{margin-top:12px;font-size:clamp(18px,1.35vw,21px);font-weight:400;color:#f4f4ef}
.chapter-formats .format-caption{max-width:min(100%,62ch);font-size:16px;color:#c5cfc8}
.chapter-formats .format-caption strong{font-weight:500}
/* Bildunterschrift mittig unter dem Beispiel */
.chapter-formats [data-format-panel] > p.format-caption{max-width:min(100%,58ch);margin:14px auto 0;text-align:center;font-size:16px;color:#c5cfc8}
/* 13.10.: Fotobuch mit quadratischen Seiten (21 × 21 cm) wie in der App */
.chapter-formats .format-stage > .photobook{inset:auto;top:50%;left:0;width:100%;height:auto;aspect-ratio:auto;transform:translateY(-50%)}
.chapter-formats .photobook .photobook-page{aspect-ratio:1/1}
/* Collagen als fertige App-Exporte (4:5 und 9:16) */
.chapter-formats .format-stage > .format-collage{display:block;padding:0;gap:0;background:none;border-radius:8px;overflow:hidden;box-shadow:0 24px 50px #0007}
.chapter-formats .format-collage [data-col-img]{display:block;width:100%;height:100%;object-fit:cover}
/* Bildunterschrift: mittig, höchstens so breit wie die Beispielfläche */
.chapter-formats [data-format-panel] > p.format-caption{max-width:min(100%,calc(min(48vh,440px) * 1.55),58ch)}
@media(max-width:950px){.chapter-formats [data-format-panel] > p.format-caption{max-width:100%}}
/* 13.10.: Selfie-Rahmen der Teilen-Kachel so dünn wie bei den übrigen Rasterbildern */
.recall-moment-tile .tile-inset{border-width:1px}
/* 13.10.: Chapters-Beispiele als fertige App-Dateien (website-slots/_werkzeug/chapters.py) */
.chapter-formats .photobook.is-rendered{display:block;padding:10px;border-radius:10px}
.chapter-formats .photobook.is-rendered img{display:block;width:100%;height:auto;aspect-ratio:2/1;border-radius:3px}
.chapter-formats .photobook.is-rendered.is-turning img{animation:pb-fade .45s ease}
@keyframes pb-fade{from{opacity:.25}to{opacity:1}}
.chapter-formats .format-stage > .format-picture.is-rendered{padding:0;background:none;border-radius:0;transform:translateX(-50%);aspect-ratio:3/4;box-shadow:0 24px 50px #0007;overflow:hidden}
.chapter-formats .format-picture.is-rendered [data-pic-img]{display:block;width:100%;height:100%;object-fit:cover}
@media(prefers-reduced-motion:reduce){.chapter-formats .photobook.is-rendered.is-turning img{animation:none}}
/* 13.10. 15 Uhr: Bilder (PNG mit runden Ecken) und Collagen frei im Format, ohne Kasten */
.chapter-formats .format-stage > .format-picture.is-rendered{box-shadow:none;overflow:visible;filter:drop-shadow(0 18px 30px #0008)}
.chapter-formats .format-picture.is-rendered [data-pic-img]{object-fit:contain}
.chapter-formats .format-stage > .format-collage.is-rendered{display:block;padding:0;background:none;transform:translateX(-50%);aspect-ratio:4/5;border-radius:6px;overflow:hidden;box-shadow:0 24px 50px #0007}
.chapter-formats .format-collage.is-rendered [data-col-img]{display:block;width:100%;height:100%;object-fit:cover}
/* 13.10. 16 Uhr: Chapters-Text links – drei Absätze, eine Schriftgröße, ruhig unterscheidbar */
.chapters-section .chapter-copy p.chapter-friends{display:flex;align-items:center;gap:14px;margin-top:22px;color:#c5cfc8}
.cf-faces{display:inline-flex;flex:none}
.cf-faces img{width:34px;height:34px;margin-left:-10px;border:2px solid #171c1a;border-radius:50%;object-fit:cover}
.cf-faces img:first-child{margin-left:0}
.chapters-section .chapter-copy p.chapter-export{display:flex;align-items:center;gap:14px;max-width:520px;margin-top:22px;padding:16px 20px;border:1px solid #b8f1d033;border-radius:16px;background:#b8f1d00f;color:#f4f4ef;font-weight:500}
.chapter-export svg{flex:none;width:22px;height:22px;fill:none;stroke:#b8f1d0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:540px){.cf-faces img{width:28px;height:28px}.chapters-section .chapter-copy p.chapter-export{padding:14px 16px}}
/* 13.10.: Stammgast-Karte – fünf echte Café-Momente statt Rasterausschnitte */
.scn-tile.is-photo{background-size:cover;background-position:center}
#values-title{hyphens:manual;overflow-wrap:break-word}
/* 21.10. (Pascal): Badge-Karte zeigt Brot, Gabel und Glas – Ausschnitt von oben, etwas höher. */
.bc-image,.offers .bc-image{height:auto;aspect-ratio:880/378}
.bc-image img{object-position:center top}