/* Mabel, concept B: "Day four". Layered on /style.css so the brand vocabulary (ticker, nav, buttons,
   chips, stickers, pills, panel, conversion band, FAQ, footer) is shared with the solar page.
   Everything here is the time-based layer: the nine-day fork, the day rail, the Monday note.
   Motion is transform/opacity only. */

/* ---------- Hero: the nine-day fork ---------- */
.hero{padding-bottom:120px}
/* The deck: the plain statement of what Mabel is, right under the line. */
.deck{font-size:20px;line-height:1.45;font-weight:600;color:var(--ink);margin:28px 0 0;max-width:40ch;padding-left:18px;border-left:3px solid var(--fill)}
.hero .intro{margin-top:20px}
.fork{position:relative;padding:40px 0 0;display:flex;flex-direction:column;gap:18px}
.fork-label{position:absolute;top:0;right:0;font-size:10px;padding:4px 10px}
.track-lbl{display:block;font-size:11px;margin:0 0 7px}
.cells{display:grid;grid-template-columns:repeat(9,minmax(0,1fr)) minmax(124px,1.6fr);gap:7px;align-items:center}
.track-days .cells{align-items:end}
.track-days i{font:500 11px/1 'JetBrains Mono',Consolas,monospace;font-style:normal;color:var(--muted);text-align:center;letter-spacing:.04em}
.track-days .then{text-align:left;padding-left:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.t{display:block;width:100%;aspect-ratio:1;border-radius:9px;border:1.5px dashed var(--line);position:relative;background:color-mix(in srgb,var(--line) 14%,transparent)}
.t.done{border:0;background:var(--sage-fill)}
.t.done:after{content:'';position:absolute;left:50%;top:50%;width:14px;height:7px;border-left:2.5px solid #fffdf9;border-bottom:2.5px solid #fffdf9;transform:translate(-50%,-70%) rotate(-45deg)}
.track-without .t.none{border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.out{border-radius:12px;padding:10px 12px 11px;font:800 15px/1.1 'Bricolage Grotesque','Arial Black',sans-serif;letter-spacing:-.02em;box-shadow:var(--shadow);position:relative;z-index:1}
.out .mono{display:block;font-size:9px;letter-spacing:.06em;margin-bottom:5px;opacity:.8;white-space:nowrap}
.out.red{background:#C24A2E;color:#fffdf9;transform:rotate(2.5deg)}
.out.sage{background:var(--surface);color:var(--sage);box-shadow:inset 0 0 0 1.5px var(--sage),var(--shadow);transform:rotate(-2deg) translateY(2px)}
.track-bubble{margin-top:-6px}
.bubble{grid-column:5/11;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;border-top-left-radius:4px;padding:11px 14px;font-size:13.5px;line-height:1.4;box-shadow:var(--shadow)}
.bubble:before{content:'';position:absolute;top:-7px;left:14px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.bubble p{margin:0;max-width:none}
.bubble .tag{position:absolute;bottom:-12px;right:12px;background:var(--butter);color:#1C1512;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;box-shadow:0 2px 6px #1c151226}
.sticker-hero{left:-34px;right:auto;bottom:-74px;transform:rotate(-9deg)}
/* Reveal: default state is the end state (no JS, reduced motion). .play stages it in day order. */
.fork.play .t,.fork.play .out,.fork.play .bubble{animation:pop .5s cubic-bezier(.2,.8,.3,1.25) both;animation-delay:calc(var(--i)*.42s + .6s)}
.fork.play .out.red{animation-name:pop-red}
.fork.play .out.sage{animation-name:pop-sage}
.fork:not(.in-view) *{animation-play-state:paused}
@keyframes pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes pop-red{from{opacity:0;transform:translateY(-14px) rotate(6deg)}to{opacity:1;transform:rotate(2.5deg)}}
@keyframes pop-sage{from{opacity:0;transform:translateY(-14px) rotate(-6deg)}to{opacity:1;transform:rotate(-2deg) translateY(2px)}}

/* ---------- Film ---------- */
.film-section{padding-bottom:104px}
.film-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:36px;position:relative;z-index:1}
.film-head p{color:var(--muted);margin:0;max-width:42ch}
.film{position:relative;z-index:1;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--shadow)}
.film video{width:100%;height:100%;display:block;object-fit:cover;background:#1C1512}
.film-meta{display:flex;flex-wrap:wrap;gap:22px;margin:14px 0 0;color:var(--muted);position:relative;z-index:1}
.film-meta .mono{font-size:11px}
.bleed-film{top:-30px;right:calc(50% - 50vw);--bx:36%;--rot:9deg}
.big-card strong{font-size:32px}

/* ---------- Nine mornings: day rail + one morning at a time ---------- */
.mornings-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:48px}
.mornings-head p{color:var(--muted);margin:0;max-width:42ch}
.mornings .story{align-items:stretch}
.pills{padding-top:6px}
.pills button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.pills button small{font:500 10.5px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.pills button[aria-selected=true] small{opacity:.8}
.pills button:nth-of-type(2){margin-left:14px}
.pills button:nth-of-type(3){margin-left:28px}
.pills button:nth-of-type(4){margin-left:42px}
.pills button:nth-of-type(5){margin-left:28px}
.pills button:nth-of-type(6){margin-left:14px}
.mornings .panel{min-height:0}
.morning-note{color:var(--muted);margin:0 0 16px;font-size:10.5px}
.morning{display:flex;flex-direction:column}
.morning.swap{animation:rise .34s ease both}
.mornings .panel-title{font-size:28px;margin-bottom:20px;max-width:20ch}
.know,.sees,.without{margin:0;font-size:15px;max-width:none}
.know .mono,.sees .mono,.without .mono{display:block;font-size:10.5px;margin-bottom:5px;color:var(--muted)}
.know{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px;color:var(--muted)}
.chat{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.msg{position:relative;max-width:82%;padding:11px 14px 12px;border-radius:16px;font-size:15px;line-height:1.45;background:var(--surface);border:1px solid var(--line);border-top-left-radius:5px;box-shadow:var(--shadow);transform:rotate(-.6deg);transform-origin:left top}
.msg .who{display:block;font-size:10px;margin-bottom:4px;opacity:.7}
.msg.to{align-self:flex-end;background:var(--ink);color:var(--ground);border-color:var(--ink);border-radius:16px;border-top-right-radius:5px;transform:rotate(.6deg);transform-origin:right top}
.msg.to.is-quiet{background:transparent;color:var(--muted);border:1.5px dashed var(--line);box-shadow:none;font-style:italic}
.sees{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.sees .chip{font-size:13px}
.without{color:var(--red);font-size:14px}
.without .mono{color:var(--red);opacity:.85}

/* ---------- The Monday note ---------- */
.monday{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center}
.monday p:not(.eyebrow):not(.tool-note){color:var(--muted);margin:22px 0 0;max-width:46ch}
.monday h2{max-width:16ch}
.note-wrap{display:flex;justify-content:center}
.note{position:relative;width:min(100%,480px);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 26px 20px;box-shadow:var(--shadow-lift);transform:rotate(-1.2deg)}
.note-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);margin-bottom:16px}
.note-head .label{font-size:10px;padding:4px 10px}
.note-hi{margin:0 0 18px;font-size:16px;max-width:none}
.groups{margin:0;display:flex;flex-direction:column;gap:12px}
.group{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:12px 0 0;border-top:1px solid var(--line);align-items:baseline}
.group dt{font-size:10.5px;padding-left:12px;position:relative}
.group dt:before{content:'';position:absolute;left:0;top:4px;width:6px;height:6px;border-radius:50%;background:currentColor}
.group.is-ink dt{color:var(--ink)}
.group dd{margin:0;font-size:15px;line-height:1.5}
.note-foot{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}

/* ---------- Guardrails: a numbered sheet, not a card grid ---------- */
.rules-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:40px}
.rules-head p{color:var(--muted);margin:0;max-width:42ch}
.rules{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);max-width:960px}
.rules li{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rules .stamp{margin:0;padding-top:3px}
.rules h3{font-size:22px;margin:0 0 6px}
.rules p{color:var(--muted);margin:0;font-size:16px;max-width:58ch}

/* ---------- Free check ---------- */
.keep{font-weight:600}
.next{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.next li{display:flex;gap:14px;align-items:baseline}
.next .mono{color:var(--butter);font-size:11px}
.bleed-form{bottom:-40px}
.contact-note a:not(.book-link){text-decoration-color:#e8b49f}

/* ---------- Roleplay: an option, not a second product ---------- */
.roleplay{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:center}
.roleplay-copy p:not(.eyebrow):not(.tool-note){color:var(--muted);margin:22px 0 0;max-width:50ch}
.roleplay h2{max-width:18ch}
.modes{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:12px;font-size:15px;max-width:48ch}
.modes li{display:flex;gap:14px;align-items:baseline}
.modes .chip{flex-shrink:0;font-size:12px}
.roleplay .tool-note{margin-top:26px}
.scene{background:var(--surface-2);border-radius:24px;padding:28px 30px 30px}
.scene-head{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);margin:0 0 20px;font-size:10.5px}
.scene-head .label{font-size:10px;padding:4px 10px}
.scene .chat{margin:0}
.msg.aside{background:transparent;box-shadow:none;border:1.5px dashed var(--line);color:var(--muted);transform:rotate(0)}

/* ---------- Targets: projections, said plainly ---------- */
.targets-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:start;margin-bottom:44px}
.targets-head .deck{margin:6px 0 0;max-width:46ch}
.target-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.target{padding:28px 32px 32px 0;border-bottom:1px solid var(--line)}
.target+.target{padding-left:32px;border-left:1px solid var(--line)}
.t-label{display:block;color:var(--muted);margin-bottom:18px}
.t-num{display:flex;align-items:baseline;flex-wrap:nowrap;gap:0 10px;margin:0 0 6px;max-width:none}
.t-num span{font:800 clamp(56px,5.6vw,80px)/1 'Bricolage Grotesque','Arial Black',sans-serif;letter-spacing:-.04em;color:var(--red)}
.t-num small{font:600 15px/1.2 Manrope,'Segoe UI',sans-serif;color:var(--ink);text-transform:lowercase}
.target h3{font-size:22px;margin:0 0 14px}
.t-how{font-size:15px;line-height:1.55;color:var(--ink);margin:0;max-width:34ch}
.t-how b{display:block;font-weight:600;color:var(--muted);margin-bottom:4px}
.t-base{font-size:16px;line-height:1.55;margin:30px 0 0;max-width:64ch;padding-left:18px;border-left:3px solid var(--fill)}
.t-base b{font-weight:600}

/* ---------- The pilot pledge: short, plain, no mechanics ---------- */
.pledge{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start;padding-top:72px;padding-bottom:80px}
.pledge h2{font-size:clamp(28px,3.1vw,42px);max-width:16ch}
.pledge p{font-size:18px;line-height:1.55;margin:6px 0 0;max-width:50ch}
.pledge-note{display:inline-block;margin-top:22px;font-size:10.5px;color:var(--ink);border-color:var(--ink)}

/* ---------- Dark ---------- */
@media(prefers-color-scheme:dark){
.t.done:after{border-color:#1a1512}
.out.red{background:#C24A2E}
.bubble,.bubble:before{background:var(--surface)}
.msg.to{background:#F6F1E7;color:#1a1512;border-color:#F6F1E7}
.big-card strong{color:inherit}
}

/* ---------- Layout breakpoints ---------- */
@media(max-width:1000px){
.pledge{grid-template-columns:1fr;gap:20px}
.roleplay{grid-template-columns:1fr;gap:40px}
.targets-head{grid-template-columns:1fr;gap:12px}
.target-list{grid-template-columns:1fr}
.target{padding:24px 0}
.target+.target{padding-left:0;border-left:0}
.film-head,.mornings-head,.rules-head{grid-template-columns:1fr;gap:12px}
.monday{grid-template-columns:1fr;gap:40px}
.note-wrap{justify-content:flex-start}
}

@media(max-width:760px){
.pledge{padding-top:56px;padding-bottom:60px}
.pledge p{font-size:17px}
.scene{padding:20px 18px 22px;border-radius:20px}
.t-num span{font-size:56px}
.target h3{font-size:20px}
.t-base{font-size:15px;padding-left:14px}
.hero{padding-bottom:96px}
/* The fork turns on its side: days run down the page, the two tracks sit side by side. */
.fork{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:0 10px;padding-top:36px}
.track{display:contents}
.track-lbl{margin:0;align-self:end;padding-bottom:8px;line-height:1.25}
.track-days .track-lbl{grid-area:1/1}.track-days .cells{grid-area:2/1}
.track-without .track-lbl{grid-area:1/2}.track-without .cells{grid-area:2/2}
.track-with .track-lbl{grid-area:1/3}.track-with .cells{grid-area:2/3}
.track-bubble .cells{grid-area:3/1/4/4;margin-top:14px;display:block}
.cells{grid-template-columns:1fr;grid-template-rows:repeat(9,34px) auto;gap:6px;align-items:stretch}
.track-days .cells{align-items:center}
.track-days i{text-align:right;padding-right:2px;align-self:center}
.track-days .then{padding:8px 0 0;text-align:right}
.t{aspect-ratio:auto;height:34px}
.out{margin-top:6px;font-size:14px}
.out.red{transform:rotate(1.5deg)}
.out.sage{transform:rotate(-1.5deg)}
.bubble{grid-column:auto;border-top-left-radius:14px;border-top-right-radius:4px}
.bubble:before{left:auto;right:calc(25% - 6px)}
.bubble .tag{right:auto;left:12px}
.hero{padding-bottom:118px}
.deck{font-size:17.5px;margin-top:22px;padding-left:14px}
.sticker-hero{left:auto;right:-10px;bottom:-92px;transform:rotate(9deg)}
.film-section{padding-bottom:72px}
.film{border-radius:16px}
.film-meta{gap:14px;margin-top:12px}
.mornings-head{margin-bottom:28px}
.mornings .panel{order:0}
.mornings .panel-title{font-size:24px}
.msg{max-width:90%}
.pills button small{font-size:10px}
.note{padding:18px 18px 16px;transform:rotate(-.8deg)}
.group{grid-template-columns:1fr;gap:6px}
.rules li{grid-template-columns:40px 1fr;gap:12px;padding:20px 0}
.rules h3{font-size:20px}
.rules p{font-size:15px}
.next{margin-top:22px}
}

@media(prefers-reduced-motion:reduce){
.fork .t,.fork .out,.fork .bubble{animation:none!important;opacity:1}
.out.red{transform:rotate(2.5deg)}
.out.sage{transform:rotate(-2deg) translateY(2px)}
}

/* Keep mobile day controls directly above their content. */
@media(max-width:760px){
.mornings .story{min-width:0}
.mornings .pills{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:8px;overflow-x:auto;max-width:100%;padding:6px 2px 12px;scrollbar-width:thin}
.mornings .pills button{flex:0 0 auto;margin-left:0!important;min-height:48px}
.mornings .pills .arrow{display:none}
}