:root{--ink:#edf4fb;--blue:#98d5ff;--muted:#97a8b9;--line:#243546;--ease:cubic-bezier(.22,1,.36,1)}
body,button,input{font-family:'Outfit','Segoe UI',sans-serif}
h1,h2{font-weight:400;letter-spacing:-.045em;line-height:1.12;text-wrap:balance}
.day h1{font-size:clamp(64px,8.4vw,110px);font-weight:400;letter-spacing:-.05em}
.day h1 span,.opening h1 span{font-family:inherit;font-style:normal;font-size:1em;font-weight:300;letter-spacing:inherit}
.opening h1{font-size:clamp(46px,5.8vw,77px);letter-spacing:-.045em;line-height:1.1}
.opening-grid{grid-template-columns:1.35fr 1fr;align-items:center;gap:75px}
.opening-copy{border-left:1px solid var(--line);padding:12px 0 12px 35px}
.opening-copy p{font-size:15px;line-height:1.85}
.wordmark{font-weight:500;font-size:19px;transition:color .25s}
.wordmark:hover{color:var(--blue)}
.day>.muted{font-size:18px;font-weight:300}
.question h2{font-size:34px;line-height:1.28;font-weight:400;letter-spacing:-.035em}
.text-only h2{font-size:44px;font-weight:400;letter-spacing:-.045em}
.header-note,.header-date,.topline,.from,.author,.site-footer,.tiny,.photo-frame figcaption,.music-toggle{font-family:'Outfit','Segoe UI',sans-serif;letter-spacing:.07em}
.topline,.from,.author{font-size:11px}
.primary{border-radius:3px;position:relative;isolation:isolate;overflow:hidden;font-weight:500;font-size:13px;letter-spacing:.01em;box-shadow:0 0 0 0 #98d5ff00;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s,background .35s}
.primary:before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),#fff8,transparent 65%);opacity:0;transition:opacity .3s}
.primary:after{content:'';position:absolute;inset:-70% -30%;background:linear-gradient(105deg,transparent 40%,#fff5 50%,transparent 60%);transform:translateX(-110%);transition:transform .8s var(--ease);pointer-events:none}
.primary:active,.secondary:active,.option:active{transform:scale(.98);transition-duration:.1s}
.secondary{border-radius:3px;font-size:12px;transition:background .3s,border-color .3s,transform .35s var(--ease),color .3s}
.back{position:relative;border:0;transition:color .25s,transform .3s var(--ease)}
.back:after{content:'';position:absolute;bottom:4px;left:0;width:100%;height:1px;background:var(--blue);transform:scaleX(.25);transform-origin:left;opacity:.35;transition:transform .35s var(--ease),opacity .3s}
.option{position:relative;isolation:isolate;overflow:hidden;border-radius:3px;min-height:69px;padding:18px 15px;font-size:14px;transition:background .3s,color .3s,transform .35s var(--ease),border-color .3s}
.option:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(220px circle at var(--pointer-x,50%) var(--pointer-y,50%),#80c7ff24,transparent 80%);opacity:0;transition:opacity .35s}
.radio{font-family:inherit;transition:color .3s,border-color .3s,background .3s,transform .35s var(--ease)}
.selected{box-shadow:inset 2px 0 0 var(--blue);background:#112b40;color:var(--blue)}
.feedback{padding:22px 24px;margin-top:25px;background:#102234;border:1px solid #2d4c64;border-radius:4px}
.feedback p{font-size:14px;line-height:1.8;color:#bbcad6}
.memory-trigger{display:block;position:relative;width:100%;border:1px solid #304557;padding:0;background:#111e29;color:white;overflow:hidden;border-radius:5px;transition:box-shadow .45s,transform .45s var(--ease),border-color .45s}
.memory-trigger .photo{transition:filter .6s,transform .8s var(--ease);filter:saturate(.9);transform-origin:center}
.photo-action{position:absolute;bottom:17px;right:17px;border:1px solid #b7d7ee55;background:#071521b3;backdrop-filter:blur(12px);padding:9px 13px;font-size:11px;letter-spacing:.04em;transform:translateY(5px);transition:background .3s,transform .4s var(--ease)}
.photo-frame figcaption{font-size:11px;color:#90a6b8;padding-top:16px}
.pocket{border-radius:5px;transition:box-shadow .4s,transform .4s var(--ease)}
.pocket-front{transition:transform .9s var(--ease)}
.pocket-note strong{font-family:'Outfit','Segoe UI',sans-serif;font-weight:400;letter-spacing:-.03em}
.paper{border-radius:4px;padding:48px 54px}
.paper h2{font-family:'Outfit','Segoe UI',sans-serif;font-weight:400;font-size:42px;letter-spacing:-.04em}
.paper p{font-size:21px;line-height:1.85}
.declaration{font-family:'Outfit','Segoe UI',sans-serif;font-size:20px;font-weight:300}
.ask h1{font-weight:400;letter-spacing:-.045em}
.ask h1 span{font-family:'Outfit','Segoe UI',sans-serif;font-style:normal;font-weight:300;font-size:36px;letter-spacing:-.035em}
.music-toggle{border-radius:4px;transition:background .3s,border-color .3s,transform .3s}
.music-toggle:hover{border-color:#7cb8e0;background:#132b3f;transform:translateY(-2px)}
#photo-dialog{padding:45px 0 0;border:0;background:#0c131c;color:white;width:min(900px,calc(100vw - 36px));max-height:92svh;overflow:auto;box-shadow:0 30px 100px #0009}
#photo-dialog::backdrop{background:#02070edb;backdrop-filter:blur(10px)}
#photo-dialog img{display:block;width:100%;height:auto;max-height:calc(90svh - 45px);object-fit:contain}
.photo-close{position:absolute;top:6px;right:12px;min-height:35px;padding:8px 12px;background:none;border:0;color:#b9d8ee;font-size:12px}
.photo-close:hover{color:white;background:#23394b}
@media(hover:hover) and (pointer:fine){.primary:hover{transform:translateY(-4px);background:#a5dcff;box-shadow:0 8px 30px #77c5fc24}.primary:hover:before{opacity:1}.primary:hover:after{transform:translateX(110%)}.secondary:hover{transform:translateY(-3px);background:#102a3c;border-color:#6da3c9}.back:hover{transform:translateX(-3px)}.back:hover:after{transform:scaleX(1);opacity:1}.option:hover{transform:translateX(5px);padding-left:15px;background:#12283b;border-color:#557f9c;color:#e6f4ff}.option:hover:before{opacity:1}.option:hover .radio{transform:scale(1.12);border-color:var(--blue);color:var(--blue)}.option.selected:hover .radio{color:#0a2030}.memory-trigger:hover{transform:translateY(-5px);border-color:#8dbedd;box-shadow:0 12px 35px #0005}.memory-trigger:hover .photo{transform:scale(1.025);filter:saturate(1.08)}.memory-trigger:hover .photo-action{transform:translateY(0);background:#1b4564}.pocket:not(.open):hover .pocket-front{transform:translateY(-8px)}.pocket:hover{box-shadow:0 14px 40px #0005}}
@media(max-width:1000px){.opening-grid{gap:40px}.opening-copy{padding-left:24px}.opening h1{font-size:49px}.question h2{font-size:30px}.text-only h2{font-size:37px}}
@media(max-width:700px){.wordmark{font-size:17px}.day h1{font-size:clamp(48px,14vw,78px);letter-spacing:-.045em}.day>.muted{font-size:16px}.opening-grid{display:block}.opening h1{font-size:clamp(33px,9.6vw,52px);letter-spacing:-.04em}.opening-copy{padding:27px 0 0;border-left:0;border-top:1px solid var(--line);margin-top:30px}.opening-copy p{font-size:14px}.opening-copy .rule{display:none}.opening-copy .muted{margin-top:16px}.question h2,.text-only h2{font-size:28px;line-height:1.3}.option{font-size:13px;min-height:63px;padding:16px 12px}.photo-action{font-size:10px;bottom:12px;right:12px;transform:none}.photo-frame figcaption{font-size:10px}.feedback{padding:19px}.feedback p{font-size:13px}.paper{padding:30px 26px}.paper h2{font-size:32px}.paper p{font-size:18px;line-height:1.8}.declaration{font-size:17px;line-height:1.75}.ask h1{font-size:clamp(28px,8.4vw,48px)}.ask h1 span{font-size:27px}.primary{font-size:12px}.decision .primary,.decision .secondary{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.primary:hover,.secondary:hover,.option:hover,.memory-trigger:hover,.memory-trigger:hover .photo,.back:hover{transform:none!important}}

/* A recognisable search field; the private response is never echoed. */
.day form{display:block;border:0;padding:0;max-width:640px}
.search-label{display:block;margin-bottom:12px;color:var(--muted);font-size:12px;letter-spacing:.04em}
.search-field{display:flex;align-items:center;gap:16px;padding:8px 8px 8px 22px;background:#101a24;border:1px solid #40596e;border-radius:8px;transition:border-color .25s,box-shadow .25s,background .25s}
.search-field:focus-within{border-color:var(--blue);background:#122131;box-shadow:0 0 0 4px #98d5ff0d}
.search-icon{width:23px;height:23px;flex-shrink:0;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round}
.day .search-field input{padding:16px 0;font-size:15px;min-height:52px}
.day .search-field input:focus-visible{outline:0}
.day .search-field .primary{min-width:100px;flex-shrink:0;border-radius:4px}
.eyebrow{font-family:inherit;letter-spacing:.06em;font-size:12px}
.tiny{font-size:11px;letter-spacing:.015em;line-height:1.6}

/* The photo comes before the question on every screen, with full framing. */
.question.has-photo{max-width:660px;margin-inline:auto}
.has-photo .question-grid{display:flex;flex-direction:column;align-items:stretch;gap:30px}
.has-photo .photo-frame{width:min(100%,480px);margin:0 auto}
.has-photo .photo{height:auto;aspect-ratio:auto;object-fit:contain;max-height:none}
body[data-scene=q3] .photo-frame{width:min(100%,320px)}
body[data-scene=q3] .photo{height:auto;aspect-ratio:auto;max-height:none;object-fit:contain}
.has-photo .question-copy{width:100%;min-width:0}
.has-photo .topline{margin-bottom:22px}
.has-photo .progress{margin-bottom:25px}
.has-photo h2{max-width:600px;font-size:32px;line-height:1.3}
.pocket-label small,.pocket-note small{font-family:inherit;letter-spacing:.02em}
@media(max-width:700px){
  .search-field{gap:10px;padding:7px 7px 7px 14px}
  .search-icon{width:20px;height:20px}
  .day .search-field input{font-size:12px;padding:12px 0;min-height:47px}
  .day .search-field .primary{min-width:68px;padding:13px 14px;min-height:47px}
  .has-photo .question-grid{gap:25px}
  .has-photo h2{font-size:27px}
  body[data-scene=q3] .photo-frame{width:min(100%,280px)}
}

/* Keep the buyer's sequence together in a compact reading card. */
.experience-layout{width:min(760px,calc(100% - 64px));padding:42px 0 65px}
.scene.card{max-width:680px;margin-inline:auto;padding:32px 38px 38px;background:linear-gradient(145deg,#121b24e6,#0c121be6);border:1px solid #26394b;border-radius:14px;box-shadow:0 25px 65px #0003}
.scene.day{max-width:640px;margin-inline:auto}
.day h1{font-size:clamp(54px,7vw,86px)}
.day>.muted{margin:25px 0 30px}
.scene .topline{margin-bottom:30px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.opening-grid{display:block}
.opening h1{font-size:clamp(44px,5vw,64px);line-height:1.15}
.opening-copy{padding:26px 0 0;margin-top:28px;border-left:0;border-top:1px solid var(--line)}
.opening-copy .rule{display:none}
.opening-copy .muted{margin-top:18px}
.question.text-only .question-copy{display:block}
.question.text-only h2{font-size:34px;line-height:1.3;max-width:550px}
.question .progress{margin-bottom:25px}
.question .options{gap:10px}
.question .option{border:1px solid #2b3d4d;background:#111c27;border-radius:6px;min-height:58px}
.question .option.selected{border-color:#7ebce8;background:#153047}
.question.has-photo .photo-frame{width:100%}
body[data-scene=q3] .photo-frame{width:min(100%,280px)}
.has-photo .question-grid{gap:26px}
.has-photo h2{font-size:30px}
.reveal h2{font-size:32px}
.pocket{width:min(100%,360px);height:500px;margin-inline:auto;background:#dce8ee;border:1px solid #3d5568}
.pocket-front{padding:12px;background:#111f2b}
.pocket-front img{object-fit:contain;object-position:center}
.pocket-note{padding:32px}
.pocket-note strong{font-size:26px;line-height:1.5}
.pocket-label{padding:13px 3px 2px;font-size:23px;gap:12px}
.pocket-label small{font-size:10px;line-height:1.5;max-width:165px;text-align:right}
.paper{padding:30px 32px}
.paper p{font-family:inherit;font-size:18px;line-height:1.8}
.ask h1{font-size:clamp(38px,4.8vw,56px);line-height:1.16}
.ask h1 span{font-size:32px}
.decision{flex-direction:column}
.decision>*{width:100%}
@media(max-width:700px){
  .experience-layout{width:calc(100% - 32px);padding:28px 0 45px}
  .scene.card{padding:20px 20px 26px;border-radius:10px}
  .scene.day{padding:0 4px}
  .day h1{font-size:clamp(48px,13vw,78px)}
  .opening h1{font-size:clamp(34px,9vw,50px)}
  .opening-copy{margin-top:24px;padding-top:22px}
  .scene .topline{margin-bottom:24px;padding-bottom:12px}
  .question.text-only h2,.has-photo h2,.reveal h2{font-size:26px;line-height:1.3}
  .question .option{font-size:13px;min-height:58px}
  .radio{width:24px;height:24px}
  .has-photo .question-grid{gap:24px}
  body[data-scene=q3] .photo-frame{width:min(100%,260px)}
  .pocket{height:440px}
  .pocket-note{padding:25px}
  .pocket-note strong{font-size:23px}
  .pocket-label small{font-size:9px;max-width:145px}
  .paper{padding:25px 22px}
  .paper p{font-size:16px;line-height:1.8}
  .ask h1{font-size:clamp(28px,7.8vw,46px)}
  .ask h1 span{font-size:27px}
  .decision .primary,.decision .secondary{font-size:12px}
}
@media(hover:hover) and (pointer:fine){.question .option:hover{background:#173147;border-color:#658eac}.question .option.selected:hover{background:#1c3a52}}

/* The far-right blue from the buyer's palette is RGB 2, 104, 179. */
:root{--blue:#0268b3;--blue-light:#8dcefb;--bg:#090c10}
.day h1 span,.opening h1 span,.ask h1 span,.yes h1 span{color:var(--blue-light)}
.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.search-icon,.author{color:var(--blue-light)}
.search-icon{stroke:var(--blue-light)}
.progress .done{background:#2699df}
.question .option.selected{border-color:var(--blue);background:#0e2c43;color:#c7e6ff}
.selected .radio{background:var(--blue);border-color:var(--blue);color:#fff}
.feedback{background:#0d2233;border-color:#24445e}
.back:hover,.wordmark:hover,.music-panel a{color:var(--blue-light)}
.paper,.pocket{background:#c9d6dc}
.secondary{border-color:#315b7a;color:#bfd8eb}
.search-field:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px #0268b322}
@media(hover:hover) and (pointer:fine){
  .primary:hover{background:#0879c9;border-color:#0879c9;box-shadow:0 8px 30px #0268b335}
  .option:hover .radio{color:var(--blue-light);border-color:#4b9dd8}
  .option.selected:hover .radio{color:#fff}
  .secondary:hover{background:#0c2a40;border-color:var(--blue)}
}

/* One quiet header and one audio toggle; keep attention on the message. */
.site-header{justify-content:center;border:0;padding:26px 0 8px}
.experience-layout{min-height:calc(100svh - 76px);padding-bottom:90px}
.scene .topline{margin-bottom:26px}
.question .photo-frame,body[data-scene=q3] .question .photo-frame{width:100%;max-width:none}
.question .photo,body[data-scene=q3] .question .photo{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 38%;max-height:none}
.photo-action{font-size:10px;padding:7px 10px}
.feedback-detail{display:block;margin-top:6px;color:var(--muted)}
.feedback strong{font-weight:500;color:var(--ink);font-size:16px}
.music-wrap{right:24px;bottom:20px}
.music-toggle{min-width:98px;min-height:44px;font-size:12px;letter-spacing:0;border-radius:24px;box-shadow:0 5px 20px #0004}
.music-toggle[aria-pressed=true]{color:#d6edff;border-color:#0268b3;background:#0b2539}
@media(max-width:700px){
  .site-header{padding:22px 0 0}
  .experience-layout{padding-top:28px;padding-bottom:90px;min-height:calc(100svh - 58px)}
  .music-wrap{right:18px;bottom:18px}
  .question .photo,body[data-scene=q3] .question .photo{aspect-ratio:3/2;object-position:center 38%}
}