/* Fingene Stage Seven: one liquid-glass surface for every card, panel, pill and mock screen.
   Loaded after site.css, motion-plus.css and system.css. Same fill, same light rim, same edge light,
   same lift, same radius steps everywhere. Primary buttons stay solid ink on purpose. */
:root{
  --lg-fill:linear-gradient(140deg,rgba(255,255,255,.70),rgba(255,255,255,.36));
  --lg-fill-hi:linear-gradient(140deg,rgba(255,255,255,.84),rgba(255,255,255,.50));
  --lg-blur:blur(16px) saturate(1.6);
  --lg-edge:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -14px 24px -18px rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.42);
  --lg-lift:0 24px 48px -30px rgba(18,17,28,.30);
  --lg-dark:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
  --lg-dark-edge:inset 0 1px 1px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.10);
  --r-card:24px;--r-panel:32px;--r-inner:14px;
}

/* ---------- The surface ---------- */
.glass,.glass:not(.lq),.card.glass,.bt.glass,.stk.glass,.ui,.acard-s,.cta:not(.lq),.tblwrap,.rung,.tier,.callout,.score,.mp-hint,html .mp-rail ol{
  background:var(--lg-fill);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border:0;
  box-shadow:var(--lg-edge),var(--lg-lift);
  border-radius:var(--r-card);
  --ang:210deg;
}
.tblwrap,.rung,.callout,.score{position:relative}
.cta,.stk.glass{border-radius:var(--r-panel)}
html .mp-rail ol{border-radius:999px;background:var(--lg-fill);box-shadow:var(--lg-edge),var(--lg-lift);border:0}
html .mp-hint{border-radius:999px;color:var(--ink);background:var(--lg-fill-hi);box-shadow:var(--lg-edge),0 16px 40px -18px rgba(18,17,28,.35)}
@media (max-width:640px){html .mp-hint{border-radius:20px}}
html .mp-hint .x{color:var(--ink);opacity:.7}
html .mp-hint .y{background:var(--ink);color:#fff}

/* the same light rim the nav and chips already use */
.ui:after,.acard-s:after,.cta:not(.lq):after,.tblwrap:after,.rung:after,.tier:after,.callout:after,.score:after,.mp-hint:after,.mp-rail ol:after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.3px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ang),rgba(255,255,255,.95),rgba(255,255,255,.08) 22%,rgba(255,255,255,.6) 46%,rgba(255,255,255,.05) 70%,rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)
}

/* hover: the surface brightens a little, nothing jumps */
.bt.glass:hover,.acard-s.acard-s:hover{background:var(--lg-fill-hi);box-shadow:var(--lg-edge),0 30px 54px -30px rgba(18,17,28,.36)}
.acard-s:hover{transform:translateY(-4px)}

.rung{--rc:#FBAB3E}
/* tinted glass (doubled class so it beats .glass:not(.lq)): Gene cards, callouts, pricing windows, the Pro plan */
.acard-s.acard-s{background:linear-gradient(160deg,rgba(255,255,255,.74),color-mix(in srgb,var(--tint,#fff) 72%,transparent))}
.callout.callout{background:linear-gradient(140deg,color-mix(in srgb,var(--c-t,#FDF0D8) 88%,transparent),color-mix(in srgb,var(--c-t,#FDF0D8) 52%,transparent))}
.rung.rung{background:linear-gradient(150deg,color-mix(in srgb,var(--rc) 46%,rgba(255,255,255,.6)),color-mix(in srgb,var(--rc) 18%,rgba(255,255,255,.34)));color:var(--ink)}
.rung .eyebrow{color:var(--ink2)!important}
.rung b{color:var(--ink)}
.tier.pro.pro{background:linear-gradient(160deg,rgba(255,255,255,.74),rgba(253,233,208,.62))}
.tier.feat.feat{background:linear-gradient(155deg,rgba(18,17,28,.90),rgba(18,17,28,.76));box-shadow:var(--lg-dark-edge),0 40px 70px -40px rgba(18,17,28,.8);color:#fff}
.tier.feat:after{opacity:.35}

/* mock app screens: inner rows are lighter glass, not white boxes */
.ui .opt{background:rgba(255,255,255,.55);border:1px solid rgba(18,17,28,.08);border-radius:var(--r-inner)}
.ui .opt.on{background:rgba(255,255,255,.9);border-color:var(--ink)}
.ui .sms,.ui .row{border-radius:var(--r-inner)}
.ui .sms{background:rgba(255,255,255,.55)}

/* pills and ghost buttons share the glass, primary buttons stay solid ink */
.pill{background:var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:0;box-shadow:var(--lg-edge)}
.pill.sage{background:linear-gradient(140deg,rgba(227,243,231,.92),rgba(227,243,231,.6));color:#1e5e33}
.btn.ghost:not(.lq){background:var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border-color:transparent;box-shadow:var(--lg-edge),0 10px 24px -18px rgba(18,17,28,.35)}
.btn.ghost:not(.lq):hover{background:var(--lg-fill-hi)}
html .mp-snd{background:var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:0;box-shadow:var(--lg-edge)}

/* dark scenes keep the dark version of the same glass */
html.dk [data-dark] .ui,html.dk [data-dark] .pill,html.dk [data-dark] .mp-snd,html.dk .mp-snd,html.dk .mp-rail ol,.mp-rail.dark ol{background:var(--lg-dark);box-shadow:var(--lg-dark-edge)}
html.dk [data-dark] .btn.ghost:not(.lq){background:var(--lg-dark);box-shadow:var(--lg-dark-edge)}
.tier.feat .pill{background:rgba(255,255,255,.1)}

/* the Mind Monitor week: a mood swatch per day instead of a progress ring */
.ring{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--c) 20%,rgba(255,255,255,.8));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 42%,transparent)}
.ring span{width:auto;height:auto;background:none;color:inherit;font-size:19px}

/* ---------- Behavior Score card ---------- */
.score{padding:24px 24px 18px;width:100%;max-width:440px;font-size:14px;color:var(--ink);--p:68;--bo:1}
.sc-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sc-top .k{font-size:12px;color:var(--muted)}
.sc-conf{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#5B3A00;background:rgba(251,171,62,.2);padding:5px 11px;border-radius:999px}
.sc-conf i{width:6px;height:6px;border-radius:50%;background:#C87412}
.sc-main{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.sc-num{font-family:var(--serif);font-weight:400;font-size:clamp(68px,7vw,92px);line-height:.85;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.sc-of{font-family:var(--serif);font-size:24px;color:var(--muted)}
.sc-line{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.25;margin-top:10px;color:var(--ink2);max-width:28ch}
.sc-scale{position:relative;height:36px;margin-top:24px}
.sc-track{position:absolute;left:0;right:0;top:17px;height:1.5px;background:rgba(18,17,28,.18)}
.sc-track:before{content:"";position:absolute;left:0;right:0;top:-5px;height:11px;background:linear-gradient(90deg,rgba(18,17,28,.22) 1px,transparent 1px) 0 0/10% 100% repeat-x;border-right:1px solid rgba(18,17,28,.22)}
.sc-band{position:absolute;top:10px;height:16px;left:calc(var(--lo)*1%);width:calc((var(--hi) - var(--lo))*1%);background:rgba(232,150,46,.30);border-radius:999px;opacity:var(--bo);transform:scaleX(calc(.4 + .6*var(--bo)));transition:opacity .2s}
.sc-mark{position:absolute;top:4px;left:calc(var(--p)*1%);width:2px;height:28px;margin-left:-1px;background:var(--ink);border-radius:2px}
.sc-mark:after{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--accent-ink,#A84B0C);box-shadow:0 0 0 3px rgba(255,255,255,.8)}
.sc-nums{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:2px}
.sc-note{font-size:13px;line-height:1.45;color:var(--muted);margin-top:10px}
.sc-why{margin:18px 0 0;border-top:1px solid rgba(18,17,28,.1)}
.sc-why div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(18,17,28,.07)}
.sc-why dt{color:var(--ink2)}
.sc-why dd{margin:0;font-weight:600;text-align:right}
.sc-weeks{margin-top:16px}
.sc-weeks .k{font-size:12px;color:var(--muted)}
.sc-tally{display:flex;align-items:flex-end;gap:6px;height:46px;margin-top:10px}
.sc-tally i{flex:1;max-width:16px;height:calc(12% + (var(--v) - 50)*4.8%);background:rgba(18,17,28,.2);border-radius:3px;transform:scaleY(var(--g,1));transform-origin:50% 100%}
.sc-tally i.now{background:var(--accent-ink,#A84B0C)}
.sc-foot{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* reduced motion and touch: blur is lighter work on phones, effects off when asked */
@media (pointer:coarse){
  .glass,.ui,.acard-s,.cta:not(.lq),.tblwrap,.rung,.tier,.callout,.score,.pill,.btn.ghost:not(.lq),.mp-snd{-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
}
@media (prefers-reduced-motion:reduce){.sc-band{transition:none}}

/* ---------- Chapter rail sits on the left edge on every page (it overlapped the floating mark on the right).
   html-prefixed so the order of stylesheets on a page cannot undo it. ---------- */
html .mp-rail{right:auto;left:max(18px,env(safe-area-inset-left,0px))}
html .mp-rail a{justify-content:flex-start;flex-direction:row-reverse}
html .mp-rail .lb{right:auto;left:calc(100% + 10px);transform:translate(-8px,-50%);clip-path:inset(0 100% 0 0 round 999px)}
html .mp-rail a:hover .lb,html .mp-rail a:focus-visible .lb{transform:translate(0,-50%);clip-path:inset(0 0 0 0 round 999px)}
/* only where there is room beside the content column */
@media (max-width:1359px){html .mp-rail.ready{display:none}}