/* Moonrise → sunrise arc between bedtime and wake-up */
.sched__arc { width: 140px; height: 44px; overflow: visible; }
.sched__arc-line { fill: none; stroke: var(--seaglass); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.sched__arc-moon { fill: var(--c-sleep); }
.sched__arc-sun { fill: var(--warm-sand); stroke: var(--clay); stroke-width: 1.5; }
.sched__arc-rays { fill: none; stroke: var(--clay); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1.6 3.4; opacity: .7; transform-box: fill-box; transform-origin: center; animation: spinSlow 18s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.sched__arc-dot { fill: #fff; stroke: var(--c-sleep); stroke-width: 2; filter: drop-shadow(0 2px 4px rgba(88,86,214,0.35)); }
.sched__cell .sched__lbl { display: inline-flex; align-items: center; gap: 6px; }
.sched__lbl svg { width: 12px; height: 12px; }
.bell { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--c-sleep); background: rgba(88,86,214,0.10); border-radius: 99px; padding: 5px 10px; }

/* ── Stress extras ── */
.stressx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: 980px; }
.xcard { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.seg { display: flex; background: var(--mist); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 9px; color: var(--text-2); cursor: pointer; transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--deep-water); box-shadow: 0 2px 8px rgba(33,68,77,0.10); }
.method { display: flex; flex-direction: column; gap: 10px; }
.method__bar { position: relative; height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--clay) 0 33%, var(--warm-sand) 33% 66%, var(--steady-teal) 66%); }
.method__marker { position: absolute; top: -5px; width: 22px; height: 22px; border-radius: 99px; background: #fff; border: 3px solid var(--deep-water); transform: translateX(-50%); transition: left .8s var(--ease); left: var(--pos, 72%); }
.method__ticks { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: .06em; }
.method__note { font-size: 13px; color: var(--text-2); line-height: 1.5; min-height: 3.6em; }

/* Box breathing demo uses Watch screenshot; .bb styles removed */
/* Journal */
.moods { display: flex; justify-content: space-between; gap: 6px; }
.mood { flex: 1; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mist); font-size: 18px; border: 1.5px solid transparent; }
.mood--on { border-color: var(--steady-teal); background: rgba(62,110,121,0.08); }
.journal { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.journal b { color: var(--deep-water); font-weight: 600; }

/* ── Steps ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { background: rgba(251,250,247,0.07); border: 1px solid rgba(251,250,247,0.14); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.step__icon { width: 44px; height: 44px; border-radius: 999px; background: rgba(251,250,247,0.12); display: flex; align-items: center; justify-content: center; }
.step__title { font-size: 17px; font-weight: 700; color: var(--paper); }
.step__body { font-size: 15px; line-height: 1.55; color: var(--text-light); margin: 0; font-weight: 400; }

/* ═══════════ Fasting — its own world ═══════════ */
.fast { background: var(--f-bg); color: #F5F1EE; position: relative; overflow: hidden; }
.fast::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, rgba(19,236,91,0.10), transparent 70%); pointer-events: none; }
.fast .wrap { position: relative; }
.fast__grid { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 40px; align-items: center; margin-top: 56px; }
.fast__intro { align-items: center; text-align: center; margin: 0 auto; }
.badge--fast { color: var(--f-green); background: rgba(19,236,91,0.10); }
.h2--fast { color: #fff; font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; font-size: 46px; }
.lead--fast { color: var(--f-muted); }
.fast__copy, .fast__side { display: flex; flex-direction: column; gap: 18px; }
.fast__h { font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
.fast__p { font-size: 15px; line-height: 1.55; color: var(--f-muted); margin: 0; font-weight: 400; }
.sched-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.schip { font-family: var(--rounded); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--f-surface); color: #E6E6E6; border: 1px solid rgba(255,255,255,0.06); cursor: pointer; }
.schip:hover { border-color: rgba(255,255,255,0.16); }
.schip--on { background: var(--f-green); color: #0E1512; }
.fast__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fast__feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: #D6D6D6; }
.fast__feats svg { flex-shrink: 0; margin-top: 2px; }

.fast__stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.island { display: inline-flex; align-items: center; gap: 10px; background: #000; border-radius: 999px; padding: 8px 16px 8px 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06); font-size: 13px; }
.island__dot { width: 10px; height: 10px; border-radius: 99px; background: var(--zone, var(--f-green)); box-shadow: 0 0 12px var(--zone, var(--f-green)); animation: islandpulse 2.4s ease-in-out infinite; }
@keyframes islandpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.island__time { font-family: var(--rounded); font-weight: 700; color: #fff; }
.island__zone { color: var(--zone, var(--f-green)); font-weight: 600; font-size: 12px; }

.fast__ring { position: relative; width: 300px; height: 300px; }
.fast__ring svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.fast__ring .ring__t,
.fast__ring .ring__bg,
.fast__ring .ring__seg { fill: none; stroke-width: 14; stroke-linecap: butt; }
.ring__t { stroke: var(--f-surface); }
.ring__bg { opacity: 0.22; }
.ring__seg { transition: stroke-dashoffset .12s linear, opacity .4s; opacity: .95; }
.ring__ticks line { stroke: #F5F1EE; stroke-width: 2.5; stroke-linecap: round; }
.ring__knob { pointer-events: none; }
.ring__knob-glow { fill: var(--zone, var(--f-green)); opacity: .38; transition: fill .4s; }
.ring__knob-dot { fill: #fff; stroke: var(--zone, var(--f-green)); stroke-width: 3.5; transition: stroke .4s; }
.ring__glow { position: absolute; inset: 14px; border-radius: 999px; box-shadow: 0 0 0 0 rgba(19,236,91,0); pointer-events: none; transition: box-shadow .6s; }
.fast__ring--live .ring__glow { box-shadow: 0 0 60px -10px var(--zone, var(--f-green)); }
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ring__cap { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--f-muted); font-weight: 600; }
.ring__time { font-family: var(--rounded); font-size: 40px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.ring__rem { font-family: var(--rounded); font-size: 15px; font-weight: 700; color: var(--zone, var(--f-green)); margin-top: 6px; }
.ring__remlbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #666; font-weight: 600; }

.zonecard { width: 100%; max-width: 340px; background: var(--f-card); border-radius: 18px; padding: 18px 18px 18px 20px; border-left: 3px solid var(--zone, var(--f-green)); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); position: relative; transition: border-color .4s; }
.zonecard__cap { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--zone, var(--f-green)); font-weight: 600; transition: color .4s; }
.zonecard__name { font-size: 22px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.zonecard__desc { font-size: 13px; color: #BFBFBF; line-height: 1.5; margin: 0; min-height: 2.9em; font-weight: 400; }
.zonecard__bar { display: flex; align-items: center; gap: 10px; }
.zonecard__track { flex: 1; height: 5px; border-radius: 99px; background: #2A2F2C; overflow: hidden; }
.zonecard__fill { height: 100%; width: var(--w, 40%); background: var(--zone, var(--f-green)); border-radius: 99px; transition: width .2s linear, background .4s; }
.zonecard__stage { font-family: var(--rounded); font-size: 12px; font-weight: 700; color: var(--zone, var(--f-green)); }
.zonecard__info { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 99px; background: rgba(255,255,255,0.08); display: grid; place-items: center; color: var(--zone, var(--f-green)); font-family: var(--serif); font-style: italic; font-size: 15px; }

.zones { display: flex; gap: 6px; }
.zones span { flex: 1; height: 6px; border-radius: 99px; background: var(--zc); opacity: .28; transition: opacity .4s; }
.zones span.is-on { opacity: 1; }

/* Bernie */
.bernie { background: var(--f-surface); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; border: 1px solid rgba(255,255,255,0.05); }
.bernie__head { display: flex; align-items: center; justify-content: space-between; }
.bernie__title { font-size: 15px; font-weight: 700; color: #fff; }
.bernie__lvl { font-family: var(--rounded); font-size: 12px; font-weight: 700; color: var(--zone, var(--f-green)); background: color-mix(in srgb, var(--zone, var(--f-green)) 14%, transparent); padding: 4px 10px; border-radius: 99px; transition: color .4s, background .4s; }
.bernie__stages { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.bframe { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; border-radius: 16px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--zone-own) 16%, #070908), #070908 70%); border: 1.5px solid rgba(255,255,255,0.06); transition: border-color .4s, transform .5s var(--ease), box-shadow .5s; }
.bframe__art { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.bframe img { width: 92%; height: 92%; object-fit: contain; opacity: .48; filter: saturate(.7); transition: transform .5s var(--ease), opacity .4s, filter .4s; }
.bframe.is-active { border-color: var(--zone-own); box-shadow: 0 0 48px -10px var(--zone-own); transform: translateY(-3px); }
.bframe.is-active img { opacity: 1; filter: none; transform: scale(1.04); }
.bframe__lbl { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--f-muted); }
.bframe__lbl span { font-size: 9px; letter-spacing: .08em; font-weight: 600; opacity: .8; }
.bframe.is-active .bframe__lbl { color: var(--zone-own); }
.bernie__arrow { color: var(--f-muted); }
.bernie__p { font-size: 13px; color: var(--f-muted); line-height: 1.5; margin: 0; font-weight: 400; }

/* ── Journaling (Carpe daily cycle) ── */
.journal-ink { background: #1A1A18; color: #F2F0E9; }
.journal-ink__head { display: flex; flex-direction: column; gap: 28px; margin-bottom: 48px; }
.journal-ink__title { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.journal-ink__title .overline { flex-shrink: 0; }
.journal-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid #3A3A36;
  border-left: 1px solid #3A3A36;
}
.journal-step {
  border-right: 1px solid #3A3A36;
  border-bottom: 1px solid #3A3A36;
  padding: 26px 22px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.journal-step__n { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: #C97F5F; }
.journal-step__t { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: #F2F0E9; }
.journal-step__p { font-size: 14px; font-weight: 400; color: #8A8779; line-height: 1.5; }

.journal-flow__head { display: flex; align-items: baseline; gap: 24px; margin-bottom: 48px; }
.journal-flow__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.journal-flow__card { display: flex; flex-direction: column; min-width: 0; }
.journal-flow__shot { padding: 8px 20px 4px; line-height: 0; }
.journal-flow__shot img { width: 100%; height: auto; }
.journal-flow__cap { padding: 16px 4px 0; }
.journal-flow__label { font-size: 15px; font-weight: 600; margin-top: 6px; color: var(--deep-water); }

/* ── Cycle ── */
.card--cycle { width: 100%; max-width: 560px; padding: 24px; display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; }
.dial { position: relative; width: 200px; height: 200px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial circle { fill: none; stroke-width: 16; stroke-linecap: butt; }
.dial .dial__seg { stroke-dashoffset: 0; transition: stroke-dasharray 1.1s var(--ease); }
.dial__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.dial__day { font-size: 30px; }
.dial__phase { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: .06em; text-transform: uppercase; }
.dial__mark { position: absolute; width: 10px; height: 10px; border-radius: 99px; background: #fff; border: 3px solid var(--deep-water); left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(var(--deg)) translateY(-92px); }
.cycle__side { display: flex; flex-direction: column; gap: 12px; }
.fertile { background: rgba(232,203,164,0.35); border: 1px solid rgba(232,203,164,0.9); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.fertile__t { font-size: 13px; font-weight: 700; }
.fertile__s { font-size: 12.5px; color: var(--text-2); }