/* Echte faze app-schermen als zelf-bevattende mockups.
   Eén-op-één overgenomen uit faze/designs/faze-latest-flow.html (het echte design system). */

.device{position:relative;width:290px;height:600px;background:#15130F;border-radius:44px;padding:9px;box-shadow:0 22px 54px rgba(33,28,25,.3);flex:0 0 auto;text-align:left;font-size:16px;line-height:1.4;color:var(--ink);font-family:var(--sans)}
.screen{position:relative;width:100%;height:100%;background:var(--paper);border-radius:36px;overflow:hidden;display:flex;flex-direction:column}
.screen.blush{background:var(--blush)}
.notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:90px;height:20px;background:#15130F;border-radius:12px;z-index:5}
.status{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 0;font-size:11px;font-weight:600;color:var(--ink)}
.status i{width:16px;height:8px;border:1px solid var(--ink);border-radius:2px;display:inline-block}
.sbody{flex:1;display:flex;flex-direction:column;padding:6px 18px 14px;overflow:hidden}
.sbody .t{font-family:var(--serif);font-weight:500}
.sbody .muted{color:var(--ink-faint)}
.sover{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.sbtn{display:block;width:100%;border:0;border-radius:13px;padding:13px;font-family:var(--sans);font-size:14px;font-weight:600;text-align:center}
.sbtn.primary{background:var(--accent);color:#fff}
.sbtn.cta{background:var(--brand);color:var(--paper)}
.sbtn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline)}
svg.i{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spriv{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-soft)}
.spriv svg{width:12px;height:12px}
.toprow{display:flex;justify-content:space-between;align-items:flex-start;padding-top:6px}
.toprow .nm{font-family:var(--serif);font-size:19px;font-weight:500}
.toprow .dt{font-size:11.5px;color:var(--ink-soft)}
.scard{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;padding:12px;margin-top:10px}
.scard.warm{background:var(--blush);border-color:transparent}
.schip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--sunken);color:var(--ink-soft)}
.ringwrap{position:relative;height:128px;margin-top:6px;display:flex;align-items:center;justify-content:center}
.ring{width:116px;height:116px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}
.ring::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--paper)}
.ring .in{position:relative;z-index:1;text-align:center}
.ring .in .d{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1}
.ring .in .o{font-size:10px;color:var(--ink-soft)}
.r-full{background:conic-gradient(var(--ovulation) 0 25%,var(--luteal) 25% 50%,var(--menstrual) 50% 75%,var(--follicular) 75% 100%)}
.r-learn{background:conic-gradient(var(--brand) 0 38%,var(--hairline) 38% 100%)}
.sglow{position:absolute;width:126px;height:126px;border-radius:50%;background:var(--ovulation-tint);z-index:0;animation:breathe 9s ease-in-out infinite}
.suggest{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:10px;margin-top:8px;font-size:12px}
.suggest svg{width:15px;height:15px;color:var(--brand);flex:0 0 auto}
.conf{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;padding:4px 9px;border-radius:999px}
.conf svg{width:11px;height:11px}
.stabs{display:flex;justify-content:space-between;padding:8px 10px 18px;border-top:1px solid var(--hairline);background:var(--surface)}
.stab{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:8.5px;color:var(--ink-faint);flex:1}
.stab svg{width:19px;height:19px}
.stab.on{color:var(--brand)}
.scale{margin-top:10px}
.scale .lab{font-size:12px;font-weight:600;margin-bottom:6px;display:flex;justify-content:space-between}
.scale .lab span{color:var(--ink-faint);font-weight:500;font-size:10px}
.pips{display:flex;gap:6px}
.pips b{flex:1;height:26px;border-radius:8px;background:var(--surface);border:1px solid var(--hairline)}
.pips b.on{background:var(--brand);border-color:var(--brand)}
.pips.amber b.on{background:var(--accent);border-color:var(--accent)}
.yn{display:flex;gap:7px;margin-top:5px}
.yn .o{flex:1;border:1px solid var(--hairline);border-radius:10px;padding:8px;text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--surface)}
.yn .o.sel{border:2px solid var(--menstrual);background:var(--menstrual-tint);color:var(--menstrual-text)}
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.month .dow{font-size:8.5px;color:var(--ink-faint);text-align:center;font-weight:600}
.month .day{aspect-ratio:1;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--ink);background:var(--surface);border:1px solid var(--hairline)}
.day.m{background:var(--menstrual-tint);color:var(--menstrual-text);border-color:transparent}
.day.f{background:var(--follicular-tint);color:var(--follicular-text);border-color:transparent}
.day.o{background:var(--ovulation-tint);color:var(--ovulation-text);border-color:transparent}
.day.l{background:var(--luteal-tint);color:var(--luteal-text);border-color:transparent}
.day.today{outline:2px solid var(--brand);font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:5px 9px;margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;color:var(--ink-soft)}
.legend i{width:9px;height:9px;border-radius:3px}
.prow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hairline)}
.prow:last-child{border-bottom:none}
.prow .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.prow .ic svg{width:14px;height:14px}
.prow .pt{font-size:12px;font-weight:600;line-height:1.2}
.prow .ps{font-size:10px;color:var(--ink-faint)}
.prow .meta{margin-left:auto;text-align:right;flex:0 0 auto}
.prow .meta .n{font-size:10px;font-weight:600;color:var(--ink-soft)}
.prow .meta .c{font-size:8.5px;color:var(--ink-faint)}
.crow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hairline)}
.crow:last-child{border-bottom:none}
.crow .ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.crow .ic svg{width:16px;height:16px}
.crow .ct{font-size:12px;font-weight:600;line-height:1.2}
.crow .cs{font-size:10px;color:var(--ink-faint)}
.crow .arr{margin-left:auto;color:var(--ink-faint)}
.crow .arr svg{width:14px;height:14px}
.htitle{font-family:var(--serif);font-size:19px;font-weight:500}
.hsub{font-size:11.5px;color:var(--ink-soft)}
.sback{display:flex;align-items:center;gap:9px;padding-top:6px}
.sback svg{width:19px;height:19px}
.safe{background:var(--blush);border-radius:12px;padding:10px;display:flex;gap:9px;align-items:flex-start;margin-top:10px}
.safe svg{width:16px;height:16px;color:var(--accent-text);flex:0 0 auto;margin-top:1px}
.safe span{font-size:10.5px;color:var(--ink-soft);line-height:1.45}
.lrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.lrow:last-child{border-bottom:none}
.lrow .ic{width:28px;height:28px;border-radius:8px;background:var(--sunken);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--brand)}
.lrow .ic svg{width:14px;height:14px}
.lrow .lt{font-size:12px;font-weight:600;line-height:1.25}
.lrow .ls{font-size:10px;color:var(--ink-faint)}
.lrow .arr{margin-left:auto;color:var(--ink-faint)}
.lrow .arr svg{width:13px;height:13px}
.tog{width:34px;height:20px;border-radius:999px;position:relative;flex:0 0 auto;margin-left:auto}
.tog::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px}
.tog.on{background:var(--brand)}
.tog.on::after{right:3px}
.tog.off{background:var(--hairline)}
.tog.off::after{left:3px}
.bub{max-width:86%;font-size:11px;line-height:1.45;padding:8px 10px;border-radius:13px;margin-top:7px}
.bub.ai{background:var(--surface);border:1px solid var(--hairline);border-top-left-radius:4px}
.bub.me{background:var(--brand);color:var(--paper);margin-left:auto;border-top-right-radius:4px}
.askbar{display:flex;align-items:center;gap:7px;border:1px solid var(--hairline);border-radius:11px;padding:8px 11px;margin-top:9px;font-size:11px;color:var(--ink-faint);background:var(--surface)}
.askbar svg{width:14px;height:14px;color:var(--brand);margin-left:auto}
.pinned{background:var(--follicular-tint);border-radius:12px;padding:10px;margin-top:10px}
.pinned .lbl{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--follicular-text);display:flex;align-items:center;gap:5px;margin-bottom:4px}
.pinned .lbl svg{width:12px;height:12px}
.pinned p{font-size:11px;line-height:1.45}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600}
@media(max-width:700px){.device{width:264px;height:548px}}