:root{
  /* Theme: Blue + Rose Taupe (warmer, less harsh than pure black) */
  --bg:#171a1f;
  --fg:#f5f5f5;
  --muted:rgba(245,245,245,.72);
  --card:rgba(255,255,255,.045);
  --card2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);

  --primary:#355987;
  --primary-rgb:53,89,135;
  --primary-deep:#233857;
  --primary-deep-rgb:35,56,87;
  --secondary:#c2a0a4;

  /* Backwards compat (older rules still reference --red). */
  --red:var(--primary);
  --white:#ffffff;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(var(--primary-rgb),.16), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(166,119,132,.14), transparent 60%),
    radial-gradient(1200px 800px at 50% 100%, rgba(255,255,255,.05), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:760px;
  margin:0 auto;
  /* Slightly tighter bottom spacing so the Privacy block reads like a footer note */
  padding:18px 14px 44px;
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.brand{
  font-size:18px;
  letter-spacing:.04em;
  margin:8px 0;
}

.pro-badge{
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.035));
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  margin:12px 0;
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}

.h2{
  margin:0 0 12px;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.h3{
  margin:18px 0 10px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.hint{
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px;
}

#imageInput{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px dashed var(--line);
  background:transparent;
  color:var(--fg);
}

#preview{
  display:none;
  width:100%;
  max-height:42vh;
  object-fit:contain;
  margin:14px 0 6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:#101010;
}

.label{
  margin:0 0 8px;
  font-size:12px;
  color:var(--muted);
}

.choice-row{ margin:10px 0; }

.choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chip{
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--fg);
  padding:9px 12px;
  border-radius:999px;
  font-size:12.5px;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.chip:hover{ transform:translateY(-1px); }
.chip.active{
  border-color: rgba(var(--primary-rgb),.85);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.18);
  background:rgba(var(--primary-rgb),.10);
}

.chip:active:not(.isLocked){
  transform: translateY(1px);
}
.chip:focus-visible{
  outline: 2px solid rgba(var(--primary-rgb), .65);
  outline-offset: 2px;
}

/* Exercises: selected + locked states (UI-only) */
.chip.isSelected{
  border-color: rgba(198,167,94,.72);
  background: rgba(var(--primary-rgb), .12);
  box-shadow:
    0 0 0 2px rgba(198,167,94,.22) inset,
    0 0 0 3px rgba(var(--primary-rgb), .18);
}
.chip.isLocked{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.chip.isLocked:hover{
  transform: none;
  box-shadow: none;
}
.chip.isLocked:active{
  transform: none;
}

.chipSub{
  font-size: 11px;
  opacity: .75;
  margin-left: 6px;
  white-space: nowrap;
}

.intent{ margin-top:12px; }
.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--fg);
  outline:none;
}

.row{ display:flex; align-items:center; gap:10px; }
.gap{ margin-top:12px; }

.check{
  color:var(--muted);
  font-size:12px;
  user-select:none;
}

.primary, .secondary{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
  cursor:pointer;
  border:1px solid var(--line);
}
.primary{
  background: linear-gradient(180deg, rgba(var(--primary-rgb),.96), rgba(var(--primary-deep-rgb),.96));
  border-color: rgba(var(--primary-rgb), .78);
  color:var(--white);
}
.primary:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.secondary{
  background:transparent;
  color:var(--fg);
  border-color: rgba(255,255,255,.12);
}

/* Two action buttons under the guided image */
.dualButtons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.dualButtons .primary{
  background: linear-gradient(180deg, rgba(var(--primary-rgb),.92), rgba(var(--primary-rgb),.75));
  box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 0 3px rgba(var(--primary-rgb),.12);
}
.dualButtons .secondary{
  background: rgba(255,255,255,.03);
}

/* Loader */
.loader{
  margin-top:14px;
  text-align:center;
  padding:12px 10px;
  border-radius:14px;
  border:1px solid var(--line);
}
.loader.hidden{ display:none; }

.aperture{
  width:44px;
  height:44px;
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.apertureSvg{
  width:100%;
  height:100%;
  display:block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}
.apertureSvg .blade{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  animation: aperturePulse 1.28s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.05s);
}
@keyframes aperturePulse{
  0%{ transform: translate(0,0) rotate(0deg); opacity:.96; }
  50%{ transform: translate(0,-9px) rotate(-8deg); opacity:1; }
  100%{ transform: translate(0,0) rotate(0deg); opacity:.96; }
}
@media (prefers-reduced-motion: reduce){
  .apertureSvg .blade{ animation:none !important; }
}

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

.fadeIn{
  animation: fadeIn .18s ease both;
}

.loader-text{
  font-size:13px;
  letter-spacing:.05em;
  color:var(--fg);
}
.loader-progress{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}


#loadingOverlay #loaderProgress{ display:none !important; }
/* Result base */
.result{
  padding-top:6px;
  line-height:1.55;
  font-size:14px;
  color:var(--fg);
  white-space:pre-wrap;
}

/* Tabs (Quick / Deep) */
.readingTabs{
  display:flex;
  gap:10px;
  margin:8px 0 6px;
}
.tab{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
}
.tab.active{
  border-color: rgba(var(--primary-rgb),.85);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.18);
}

.readingView{ margin-top:10px; }

/* Locked deep view */
.locked{
  position:relative;
  overflow:hidden;
}
.locked .locked-blur{
  filter: blur(8px);
  opacity:.6;
  pointer-events:none;
}
.lockOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background: linear-gradient(to bottom, rgba(21,21,21,.18), rgba(21,21,21,.86));
}
.lockOverlayCard{
  width:100%;
  max-width:520px;
  border:1px solid var(--line);
  background: rgba(18,18,18,.92);
  border-radius:16px;
  padding:14px;
}
.lockTitle{ margin:0 0 6px; font-size:14px; letter-spacing:.02em; }
.lockSub{ margin:0 0 10px; color:var(--muted); font-size:12px; line-height:1.5; }

/* --- Reading blocks (editorial) --- */
.resultBlocks{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

.resultBlock{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius:16px;
  padding:12px 12px;
}

.resultBlockTitle{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 8px;
}

.resultBlockBody{
  font-size:14px;
  line-height:1.6;
  color:var(--fg);
  max-height:240px;
  overflow:auto;
  padding-right:6px;
}

/* nice scrollbars */
.resultBlockBody::-webkit-scrollbar{ width:8px; }
.resultBlockBody::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius:999px;
}
.resultBlockBody::-webkit-scrollbar-track{ background: transparent; }

/* editorial text inside blocks */
.resultBlockBody p{ margin: 0 0 10px; }
.resultBlockBody ul{ margin: 8px 0 10px; padding-left: 18px; }
.resultBlockBody li{ margin: 6px 0; }

/* Followup box */
.followupResult{
  margin-top:16px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

/* Exercises rhythm */
#followupChoices{
  margin-bottom: 12px;
}

/* Interactive observation quizzes (zero-cost, no network) */
.quizCard{
  width:100%;
  border:1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(var(--primary-rgb),.10), rgba(255,255,255,.03));
  border-radius:16px;
  padding:14px 14px 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}
.quizTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.quizTag{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(198,167,94,.92);
  opacity:.95;
}
.quizIndex{
  font-size:11px;
  opacity:.65;
}
.quizQuestion{
  font-size:14px;
  font-weight:650;
  line-height:1.35;
  margin: 4px 0 10px;
}
.quizOptions{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.quizOpt{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color: var(--fg);
  font-size:13px;
  letter-spacing:.01em;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .08s ease, opacity .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.quizOpt:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
}
.quizOpt:active{ transform: translateY(1px); }
.quizOpt:disabled{
  cursor:default;
  transform:none;
}
.quizOpt.isSelected{
  border-color: rgba(198,167,94,.55);
  box-shadow: 0 0 0 2px rgba(198,167,94,.12) inset;
}
.quizOpt.isCorrect{
  border-color: rgba(120,200,160,.50);
  background: rgba(120,200,160,.10);
}
.quizOpt.isWrong{
  border-color: rgba(214,140,92,.55);
  background: rgba(214,140,92,.08);
}
.quizOpt.isCorrectHint{
  outline: 1px solid rgba(120,200,160,.28);
  outline-offset: -2px;
}

.quizFeedback{
  margin-top:0;
  opacity:0;
  max-height:0;
  overflow:hidden;
  color: rgba(245,245,245,.78);
  font-size:13px;
  line-height:1.45;
  transition: max-height .22s ease, opacity .22s ease, margin-top .22s ease;
}
.quizFeedback.isOpen{
  margin-top:10px;
  opacity:.98;
  max-height:240px;
}

@media (prefers-reduced-motion: reduce){
  .quizOpt, .quizFeedback{ transition:none !important; }
}

.quizCard + .quizCard{
  margin-top: 12px;
}
.quizCardDecision{
  background: linear-gradient(180deg, rgba(var(--primary-rgb),.08), rgba(255,255,255,.025));
}
.quizHintLine{
  margin: -2px 0 10px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(245,245,245,.62);
}
.rankOptions{
  gap: 9px;
}
.rankOpt{
  display:flex;
  align-items:center;
  gap:10px;
}
.rankOpt .rankBadge{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  display:grid;
  place-items:center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.66);
}
.rankOpt.isRankAssigned .rankBadge{
  border-color: rgba(198,167,94,.42);
  background: rgba(198,167,94,.12);
  color: rgba(255,255,255,.96);
}
.rankText{
  flex:1;
}
.rankActions{
  margin-top: 8px;
}
.rankReset{
  border:0;
  background: transparent;
  color: rgba(198,167,94,.9);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 2px 0;
}
.rankReset[hidden]{
  display:none !important;
}
.rankAnswerKey{
  margin-top: 8px;
  color: rgba(245,245,245,.64);
  font-size: 12px;
  line-height: 1.4;
}

.quizCardGuidedSequence{
  background: linear-gradient(180deg, rgba(var(--primary-rgb),.12), rgba(255,255,255,.028));
}
.guidedSeqStart{
  width: 100%;
  margin-top: 4px;
  border: 1px solid rgba(198,167,94,.26);
  border-radius: 12px;
  padding: 11px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color: rgba(255,255,255,.96);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
  cursor: pointer;
}
.guidedSeqMount{
  margin-top: 12px;
  opacity: 1;
  transition: opacity .18s ease, transform .18s ease;
}
.guidedSeqMount.isTransitioning,
.guidedSeqMount.isFresh{
  opacity: 0;
  transform: translateY(4px);
}
.guidedSeqFlow{
  display: grid;
  gap: 10px;
}
.guidedSeqMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 11px;
}
.guidedSeqMetaKicker{
  color: rgba(198,167,94,.9);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.guidedSeqMetaCount{
  color: rgba(245,245,245,.56);
}
.guidedSeqPrompt{
  font-size: 14px;
  font-weight: 650;
  line-height: 1.38;
}
.guidedSeqImageShell{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.32);
}
.guidedSeqImageStage{
  position: relative;
  isolation: isolate;
  background: #050608;
}
.guidedSeqImage{
  display: block;
  width: 100%;
  height: auto;
}
.guidedSeqImageFallback{
  min-height: 220px;
  display:grid;
  place-items:center;
  color: rgba(245,245,245,.64);
  font-size: 13px;
  padding: 18px;
  text-align:center;
}
.guidedSeqHotspotLayer{
  position:absolute;
  inset:0;
}
.guidedSeqHotspot{
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.guidedSeqHotspotDot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.94);
  background: rgba(0,0,0,.34);
  box-shadow: 0 0 0 4px rgba(0,0,0,.22);
}
.guidedSeqHotspotLabel{
  max-width: 110px;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(5,6,8,.84);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.96);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0,0,0,.22);
}
.guidedSeqHotspot.isSelected .guidedSeqHotspotDot{
  border-color: rgba(198,167,94,.95);
  box-shadow: 0 0 0 4px rgba(198,167,94,.14);
}
.guidedSeqHotspot.isCorrect .guidedSeqHotspotDot,
.guidedSeqHotspot.isCorrectHint .guidedSeqHotspotDot{
  border-color: rgba(120,200,160,.95);
}
.guidedSeqHotspot.isWrong .guidedSeqHotspotDot{
  border-color: rgba(214,140,92,.95);
}
.guidedSeqHint{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(245,245,245,.62);
}
.guidedSeqSummary{
  display: grid;
  gap: 12px;
}
.guidedSeqSummaryTop{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}
.guidedSeqSummaryKicker{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(198,167,94,.9);
}
.guidedSeqSummaryScore{
  font-size: 24px;
  font-weight: 750;
  line-height: 1;
  color: rgba(255,255,255,.98);
}
.guidedSeqSummaryList{
  display:grid;
  gap: 10px;
}
.guidedSeqReviewItem{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  border-radius: 12px;
  padding: 10px 11px;
}
.guidedSeqReviewPrompt{
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  margin-bottom: 6px;
}
.guidedSeqReviewMeta{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(245,245,245,.72);
}
.guidedSeqReviewMeta span{
  color: rgba(245,245,245,.48);
}
.guidedSeqReviewWhy{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.42;
  color: rgba(245,245,245,.82);
}
@media (prefers-reduced-motion: reduce){
  .guidedSeqMount{ transition:none !important; }
}

.exerciseHint{
  margin: 6px 2px 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(245,245,245,.78);
  opacity: .9;
}
.exerciseHint::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--gold-accent);
  margin-right:8px;
  transform: translateY(-1px);
  opacity: .9;
}
.exerciseHint.hidden{ display:none; }

.exercisePanel{
  /* purely a wrapper for small UX labels */
}
.exerciseMetaRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}
.exerciseTime{
  font-size: 12px;
  letter-spacing: .02em;
  opacity: .75;
}

/* Exercises typography/layout v2 */
.exercisePanel .ex-goal{
  text-align:center;
  font-weight:700;
  font-size:1.02rem;
  line-height:1.35;
  margin:10px 0 16px;
}
.exercisePanel .ex-label{
  color: var(--gold-accent, #d6b46b);
  font-weight:700;
  margin-right:6px;
}
.exercisePanel .ex-steps{
  counter-reset: step;
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.exercisePanel .ex-steps li{
  counter-increment: step;
  display:grid;
  grid-template-columns: 28px 1fr;
  column-gap:10px;
  align-items:start;
  font-size:0.92rem;
  font-weight:400;
  line-height:1.4;
  margin:0; /* override global followup li margin */
}
.exercisePanel .ex-steps li::before{
  content: counter(step) ")";
  justify-self:end;
  opacity:0.85;
  font-size:0.85rem;
  font-weight:500;
}
.exercisePanel .ex-tradeoff{
  text-align:center;
  margin-top:16px;
  font-size:0.84rem;
  font-style:italic;
  opacity:0.85;
}

.exSuccessLabel{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight: 750;
  color: rgba(255,255,255,.92);
  letter-spacing: .01em;
}
.exSuccessLabel::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--gold-accent);
  opacity: .95;
}
.followupResult p{ margin: 0 0 10px; }
.followupResult ul{ margin: 8px 0 10px; padding-left: 18px; }
.followupResult li{ margin: 6px 0; }

.mentorReadLead{
  position: relative;
  margin: 12px 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--primary-rgb),.18);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--primary-rgb),.14), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 84px);
}
.mentorReadLead::before{
  content:"";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--primary-rgb),0), rgba(var(--primary-rgb),.42) 36%, rgba(198,167,94,.24) 50%, rgba(var(--primary-rgb),0));
  pointer-events: none;
}
#resultsCard.mentorStageActive .mentorReadLead{
  border-color: rgba(var(--primary-rgb),.24);
  background:
    radial-gradient(130% 145% at 0% 0%, rgba(var(--primary-rgb),.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026));
}
.mentorReadEyebrow{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(198,167,94,.96);
  margin-bottom: 6px;
}
.mentorReadText{
  font-size: 14px;
  line-height: 1.45;
  color: rgba(245,245,245,.94);
}
.mentorReadLead .guidedToolBtn{
  margin-top: 10px;
}
#resultActions .mentorBackActionBtn{
  margin-top: 0;
}
.mentorRevealLead{
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(245,245,245,.82);
}

/* Step indicator */
.preReadStepIndicator{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 6px;
}
.preReadStepDot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transition: all .3s;
}
.preReadStepDot.is-active{
  background: rgba(198,167,94,.9);
  width: 20px;
  border-radius: 3px;
}
.preReadStepDot.is-done{
  background: rgba(198,167,94,.4);
}
.preReadStepHint{
  text-align: center;
  font-size: 11.5px;
  color: rgba(245,245,245,.35);
  padding: 0 20px 12px;
  min-height: 18px;
  transition: color .3s;
}
.preReadStepHint.is-ready{
  color: rgba(198,167,94,.7);
}

/* Mentor reveal button — locked vs unlocked */
.mentorRevealBtn{
  margin-top: 12px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s;
  border: none;
}
.mentorRevealBtn.is-locked{
  background: rgba(255,255,255,.05);
  color: rgba(245,245,245,.3);
  border: 1px solid rgba(255,255,255,.07);
  cursor: default;
  pointer-events: none;
}
.mentorRevealBtn.is-unlocked{
  background: linear-gradient(135deg, rgba(198,167,94,.95), rgba(160,128,58,.95));
  color: rgba(20,18,14,.95);
  box-shadow: 0 4px 20px rgba(198,167,94,.18);
  animation: mentorUnlock .5s ease;
}
@keyframes mentorUnlock{
  0%{ transform: scale(1); box-shadow: 0 0 0 rgba(198,167,94,0); }
  50%{ transform: scale(1.02); box-shadow: 0 0 24px rgba(198,167,94,.28); }
  100%{ transform: scale(1); }
}

#resultsCard.preReadPending .finalReviewBlock{
  display:none !important;
}

#resultActions{
  align-items:center;
  justify-content:flex-start;
}

#resultActions .guidedToolBtn,
.mentorReadLead .guidedToolBtn{
  width:auto;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.014));
  color:rgba(245,242,236,.84);
  box-shadow:none;
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
}

#resultActions .guidedToolBtn::before,
.mentorReadLead .guidedToolBtn::before{
  content:"i";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid rgba(214,191,147,.22);
  background:rgba(214,191,147,.06);
  color:rgba(235,214,172,.88);
  font-size:10px;
  font-weight:700;
  line-height:1;
}

#resultActions .guidedToolBtn:hover,
.mentorReadLead .guidedToolBtn:hover{
  transform:none;
  border-color:rgba(198,167,94,.20);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:rgba(245,242,236,.92);
}

#resultActions .guidedToolBtn:active,
.mentorReadLead .guidedToolBtn:active{
  transform:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.024));
}

.finalReviewBlock{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.finalReviewTop{
  margin-bottom: 10px;
}

.finalReviewEyebrow{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(198,167,94,.88);
  margin-bottom: 6px;
}

.finalReviewMicro{
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(245,245,245,.72);
}

.finalReviewSummary{
  display: grid;
  gap: 10px;
}

.finalReviewSummary .scoreRow{
  margin-top: 0;
}

.finalReviewSummary .verdictLine{
  margin: 0;
  color: rgba(245,245,245,.84);
}

.finalReviewCards{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.finalReviewCards .resultCard{
  margin: 0;
}

.mentorBackBtn{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(245,245,245,.88);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.mentorBackBtn:hover{ transform: translateY(-1px); border-color: rgba(198,167,94,.34); background: rgba(255,255,255,.04); }
.mentorBackBtn:active{ transform: translateY(1px); }
.mentorBackBtn:focus-visible{ outline: 2px solid rgba(var(--primary-rgb), .55); outline-offset: 2px; }

#resultsCard.preReadPending #microProgress,
#resultsCard.preReadPending #modeSwitch,
#resultsCard.preReadPending .scoreRow,
#resultsCard.preReadPending #verdictLine,
#resultsCard.preReadPending #resultActions,
#resultsCard.preReadPending #cardsWrap,
#resultsCard.preReadPending #critiqueCTA,
#resultsCard.preReadPending #mentorReadLead,
#resultsCard.preReadPending .nextShotBlock{
  display: none !important;
}
#resultsCard.preReadPending .imgStage{
  max-width: 640px;
}

/* ─── Phase Stepper Nav ─── */
.phaseNav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px 16px 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(23,26,31,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin: 0 -20px 16px;
}

.phaseTab{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  cursor: default;
  transition: opacity .2s;
  flex: 1;
  max-width: 80px;
}

.phaseNum{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.25);
  background: transparent;
  transition: all .25s;
}

.phaseLabel{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  transition: color .25s;
}

.phaseConnector{
  height: 2px;
  flex: 1;
  max-width: 24px;
  background: rgba(255,255,255,.1);
  border-radius: 1px;
  margin-bottom: 16px;
  transition: background .25s;
}

/* Unlocked tab */
.phaseTab.is-unlocked{
  cursor: pointer;
}
.phaseTab.is-unlocked .phaseNum{
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.65);
}
.phaseTab.is-unlocked .phaseLabel{
  color: rgba(255,255,255,.5);
}
.phaseTab.is-unlocked:hover .phaseNum{
  border-color: rgba(198,167,94,.5);
  color: rgba(198,167,94,.8);
}
.phaseTab.is-unlocked:hover .phaseLabel{
  color: rgba(198,167,94,.7);
}

/* Active tab */
.phaseTab.is-active .phaseNum{
  background: linear-gradient(135deg, rgba(198,167,94,.9), rgba(160,128,58,.9));
  border-color: transparent;
  color: rgba(20,18,14,.95);
}
.phaseTab.is-active .phaseLabel{
  color: rgba(198,167,94,.9);
}

/* Completed connector */
.phaseConnector.is-done{
  background: rgba(198,167,94,.35);
}

/* ─── Phase content visibility (CSS-based) ─── */

/* ─── Phase CSS ─── 
   Only active when analysis is rendered (data-phase-active).
   Photo (imgStage) is always visible at top.
   Each phase shows ONLY its own content.
─────────────────────────────────────────────────── */

/* phase1Exercises and mentor CTA — only visible in phase 1 */
#phase1Exercises { display: none; }
#phase1MentorCta { display: none; }
#resultsCard[data-phase-active].phase-1 #phase1Exercises { display: block !important; }
#resultsCard[data-phase-active].phase-1 #phase1MentorCta { display: block !important; }

/* ── Phase 1: Look ──
   Shows: imgStage + phase1Exercises + followupResult (mentor CTA)
   Hides: everything else including #followups (phase 3 content) */
#resultsCard[data-phase-active].phase-1 .resultHero,
#resultsCard[data-phase-active].phase-1 #cardsWrap,
#resultsCard[data-phase-active].phase-1 #mentorReadLead,
#resultsCard[data-phase-active].phase-1 #deepReadTheoryToggleRow,
#resultsCard[data-phase-active].phase-1 #critiqueCTA,
#resultsCard[data-phase-active].phase-1 .nextShotBlock,
#resultsCard[data-phase-active].phase-1 .finalReviewBlock,
#resultsCard[data-phase-active].phase-1 #resultActions,
#resultsCard[data-phase-active].phase-1 .row.gap:has(#analyzeAnotherBtn),
#resultsCard[data-phase-active].phase-1 #phaseCta_2,
#resultsCard[data-phase-active].phase-1 #phaseCta_3,
#resultsCard[data-phase-active].phase-1 #followups {
  display: none !important;
}

/* ── Phase 2: Read ──
   Shows: imgStage + resultActions (guided btn) + mentorReadLead + cardsWrap + phaseCta_2
   Hides: score/verdict, followups, mission, score, bottom row */
#resultsCard[data-phase-active].phase-2 .resultHero,
#resultsCard[data-phase-active].phase-2 #phase1Exercises,
#resultsCard[data-phase-active].phase-2 #followups,
#resultsCard[data-phase-active].phase-2 .nextShotBlock,
#resultsCard[data-phase-active].phase-2 .finalReviewBlock,
#resultsCard[data-phase-active].phase-2 .row.gap:has(#analyzeAnotherBtn),
#resultsCard[data-phase-active].phase-2 #phaseCta_3 {
  display: none !important;
}

/* ── Phase 3: Practice ──
   Shows: imgStage + followups (specific exercises) + phaseCta_3
   Hides: mentor cards, score, mission, bottom row, phase1 quizzes */
#resultsCard[data-phase-active].phase-3 #phase1Exercises,
#resultsCard[data-phase-active].phase-3 #followupResult,
#resultsCard[data-phase-active].phase-3 .resultHero,
#resultsCard[data-phase-active].phase-3 #cardsWrap,
#resultsCard[data-phase-active].phase-3 #mentorReadLead,
#resultsCard[data-phase-active].phase-3 #deepReadTheoryToggleRow,
#resultsCard[data-phase-active].phase-3 #critiqueCTA,
#resultsCard[data-phase-active].phase-3 #resultActions,
#resultsCard[data-phase-active].phase-3 .nextShotBlock,
#resultsCard[data-phase-active].phase-3 .finalReviewBlock,
#resultsCard[data-phase-active].phase-3 .row.gap:has(#analyzeAnotherBtn),
#resultsCard[data-phase-active].phase-3 #phaseCta_2 {
  display: none !important;
}

/* ── Phase 4: Shoot ──
   Shows: imgStage + nextShotBlock + resultHero (score/verdict) + finalReviewBlock + bottom row
   Hides: mentor cards, exercises, phase CTAs */
#resultsCard[data-phase-active].phase-4 #phase1Exercises,
#resultsCard[data-phase-active].phase-4 #followupResult,
#resultsCard[data-phase-active].phase-4 #cardsWrap,
#resultsCard[data-phase-active].phase-4 #mentorReadLead,
#resultsCard[data-phase-active].phase-4 #deepReadTheoryToggleRow,
#resultsCard[data-phase-active].phase-4 #critiqueCTA,
#resultsCard[data-phase-active].phase-4 #followups,
#resultsCard[data-phase-active].phase-4 #resultActions,
#resultsCard[data-phase-active].phase-4 #phaseCta_2,
#resultsCard[data-phase-active].phase-4 #phaseCta_3 {
  display: none !important;
}

/* Phase 4 mission mount */
#phase4MissionMount {
  display: none;
}
#resultsCard[data-phase-active].phase-4 #phase4MissionMount {
  display: block !important;
}

/* Phase advance CTA */
.phaseCta{
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: 16px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
  margin-top: 20px;
  background: linear-gradient(135deg, rgba(198,167,94,.95), rgba(160,128,58,.95));
  color: rgba(20,18,14,.95);
}
.phaseCta:hover{ opacity: .88; }
.phaseCta:active{ opacity: .75; }
.phaseCtaWrap{
  padding: 0 0 8px;
}

/* Micro-progress indicator */
.micro-progress {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.micro-progress .step{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 10px 8px;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.micro-progress .step:active{
  transform: translateY(1px);
}
.micro-progress .step.active {
  color: var(--fg);
  font-weight: 800;
  border-bottom: 2px solid var(--primary);
}

/* Loader subline */
.loader-sub{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.loaderMsg{
  font-size: 13px;
  opacity: .85;
  margin-top: 10px;
  line-height: 1.35;
  text-align: center;
}




/* Loader message dots (premium, subtle) */
.loadingDots{
  display:inline-flex;
  gap:4px;
  margin-left:6px;
  vertical-align:middle;
}
.loadingDots span{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.75);
  opacity:.35;
  animation: dotPulse 1.05s ease-in-out infinite;
}
.loadingDots span:nth-child(2){ animation-delay: .15s; }
.loadingDots span:nth-child(3){ animation-delay: .30s; }

@keyframes dotPulse{
  0%,100%{ opacity:.25; transform: translateY(0); }
  50%{ opacity:.85; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce){
  .loadingDots span{ animation:none !important; opacity:.6; transform:none; }
}
/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(8px);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 300ms ease, transform 300ms ease;
}

/* Sticky CTA */
.sticky-cta-fixed {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 40px);
  max-width: 400px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Mobile swipe plans */
@media (max-width: 719px) {
  .plans {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
  }
  .plan {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
}

/* Guided View Overrides */
.guidedOverlay {
  background: rgba(0,0,0,0.45); /* Softer overlay */
  backdrop-filter: blur(2px);
}
.hotspotDot {
  width: 44px; /* Large tap target */
  height: 44px;
}

/* Paywall modal priority */
.paywall {
  z-index: 2000;
}
.paywall-inner {
  z-index: 2001;
}

/* Guided overlay priority */
.guidedOverlay {
  z-index: 1000;
}

/* Sticky CTA lower priority but above content */
.sticky-cta-fixed, .stickyNextRep {
  z-index: 200;
}

/* Double safety: hide sticky when modal is open */
body.modal-open .sticky-cta-fixed,
body.modal-open .stickyNextRep {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tabs robustness */
.readingTabs {
  position: relative;
  z-index: 60;
  pointer-events: auto;
}
.tab {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Paywall modal priority */
.paywall {
  z-index: 2000;
}
.paywall-inner {
  z-index: 2001;
}

/* Guided overlay priority */
.guidedOverlay {
  z-index: 1000;
}

/* Sticky CTA lower priority but above content */
.sticky-cta-fixed, .stickyNextRep {
  z-index: 200;
}

/* Double safety: hide sticky when modal is open */
body.modal-open .sticky-cta-fixed,
body.modal-open .stickyNextRep {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tabs robustness */
.readingTabs {
  position: relative;
  z-index: 60;
  pointer-events: auto;
}
.tab {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Paywall modal priority */
.paywall {
  z-index: 2000;
}
.paywall-inner {
  z-index: 2001;
}

/* Guided overlay priority */
.guidedOverlay {
  z-index: 1000;
}

/* Sticky CTA lower priority but above content */
.sticky-cta-fixed, .stickyNextRep {
  z-index: 200;
}

/* Double safety: hide sticky when modal is open */
body.modal-open .sticky-cta-fixed,
body.modal-open .stickyNextRep {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tabs robustness */
.readingTabs {
  position: relative;
  z-index: 60;
  pointer-events: auto;
}
.tab {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden{ display:none !important; }

/* PAYWALL */
.paywall{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:14px;
}
.paywall.hidden{ display:none; }

.paywall-inner{
  width:100%;
  max-width:760px;
  background: rgba(30,30,30,.98);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:16px;
  max-height: 86vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}


.paywall-title{ margin:0 0 6px; font-size:18px; }
.paywall-sub{ margin:0 0 14px; color:var(--muted); }

.paywall-free{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px;
  margin-bottom:12px;
  background: rgba(255,255,255,.03);
}
.paywall-free-title{ font-weight:800; margin:0 0 6px; }
.paywall-free-sub{ margin:0 0 10px; color:var(--muted); }
.paywall-free-note{ margin-top:10px; font-size:12px; color:rgba(245,245,245,.58); }

.paywall-free{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px;
  margin-bottom:12px;
}
.paywall-free-title{ font-weight:800; margin-bottom:6px; }
.paywall-free-sub{ margin:0 0 10px; color:var(--muted); }
.paywall-free-note{ margin-top:10px; font-size:12px; color:rgba(245,245,245,.58); opacity:1; }

.plans{
  display:flex;
  gap:12px;
  margin-bottom:12px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.plans::-webkit-scrollbar{ height:8px; }
.plans::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius:999px; }
.plan{
  scroll-snap-align:start;
  flex: 0 0 82vw;
  max-width: 360px;
}
.plan{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px;
}
.plan-name{ font-weight:700; margin-bottom:6px; }
.plan-price{ font-size:22px; font-weight:800; margin-bottom:8px; }
.plan-price span{ font-size:12px; font-weight:600; opacity:.7; margin-left:4px; }
.plan ul{ margin:0; padding-left:18px; color:var(--muted); }
.plan li{ margin:6px 0; }

/* History */
.historyList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.historyItem{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.historyMeta{
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}

/* Intro (welcome) — black background + white fade bubble */
.intro{
  position: fixed;
  inset: 0;
  /* Subtle white haze + blur so the page behind feels "faded" (not stacked). */
  background:
    radial-gradient(120% 90% at 50% 20%,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.07) 35%,
      rgba(0,0,0,.60) 70%,
      rgba(0,0,0,.78) 100%);
  backdrop-filter: blur(7px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 70;
}

.intro-inner{
  width: min(92vw, 680px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 22px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 140% at 30% 0%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 35%,
      rgba(255,255,255,.04) 65%,
      rgba(255,255,255,.00) 100%);
  backdrop-filter: blur(10px);
  text-align: center;
}

.intro-kicker{
  color: rgba(245,245,245,.70);
  letter-spacing:.14em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 10px;
}

.intro-title{
  margin: 0 0 12px;
  font-size: 26px;
  letter-spacing: .01em;
}

.intro-sub{
  margin: 0 auto 0;
  max-width: 520px;
  color: rgba(245,245,245,.86);
  line-height: 1.6;
  font-size: 14px;
}
.intro-sub.small{ color: rgba(245,245,245,.72); }

.intro-note{
  margin: 12px 0 0;
  color: rgba(245,245,245,.55);
  font-size: 12px;
}

@media (min-width: 720px){
  .plans{ grid-template-columns:1fr 1fr; }
  .row.gap{ gap:12px; }
  .secondary{ width:auto; flex:1; }
}
@media (max-width: 420px){
  .card{ padding:14px; }
  .chip{ font-size:12px; padding:9px 11px; }
  .result{ font-size:13px; }
  .intro-title{ font-size: 22px; }
}

/* Paywall 3-column layout */
.plans.plans-3{
  grid-template-columns: 1fr;
}
@media (min-width: 860px){
  .plans.plans-3{
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  .plan.plan-free .row.gap{
    flex-direction: column;
    align-items: stretch;
  }
  .plan.plan-free .input{
    width: 100%;
  }
}

.paywall-note{
  margin-top:10px;
  font-size:12px;
  color:rgba(245,245,245,.58);
  opacity:1;
}


/* -----------------------------
   UI v2 additions
------------------------------*/
.top-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.intro-bullets{
  margin: 14px 0 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:480px;
}
.intro-bullet{
  opacity:.92;
}
.heroBullets{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;            /* 10–12px */
  margin-top: 14px;     /* subtitle -> bullets */
  margin-bottom: 18px;  /* bullets -> CTA */
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------
   Daily Frame home hero (premium editorial intro)
---------------------------------------------- */
.dfHero{
  position: relative;
  display: none;
  margin: 12px 0 8px;
  padding: 2px 0 18px;
  isolation: isolate;
}
body.df-mode .dfHero{
  display: block;
  margin-top: 76px;
}
body:not(.df-mode) .dfHero{
  display: none !important;
}
.dfHero::before{
  content: "";
  position: absolute;
  inset: -18px 8% 12px;
  z-index: -2;
  border-radius: 34px;
  background:
    radial-gradient(56% 72% at 20% 18%, rgba(79,111,154,.18), transparent 72%),
    radial-gradient(64% 84% at 82% 22%, rgba(198,167,94,.10), transparent 78%),
    radial-gradient(84% 120% at 50% 100%, rgba(255,255,255,.06), transparent 82%);
  filter: blur(16px);
  animation: dfHeroDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.dfHero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 72px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13,17,24,0), rgba(13,17,24,.52) 54%, rgba(13,17,24,0));
  pointer-events: none;
}
.dfHeroFrame{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.09);
  padding: 18px 18px 20px;
  background:
    linear-gradient(180deg, rgba(10,15,23,.88), rgba(13,18,27,.76)),
    radial-gradient(120% 120% at 18% 0%, rgba(79,111,154,.16), transparent 58%),
    radial-gradient(120% 140% at 100% 8%, rgba(198,167,94,.08), transparent 62%);
  box-shadow: 0 18px 48px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.dfHero.isReady .dfHeroFrame{
  opacity: 1;
  transform: translateY(0);
}
.dfHeroViewport{
  overflow: hidden;
}
.dfHeroTrack{
  display: flex;
  width: 100%;
  will-change: transform;
  transition: transform .52s cubic-bezier(.22,.61,.36,1);
  touch-action: pan-y;
}
.dfHeroSlide{
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2px;
  opacity: .46;
  transform: translateY(4px);
  transition: opacity .28s ease, transform .28s ease;
}
.dfHeroSlide.isActive{
  opacity: 1;
  transform: translateY(0);
}
.dfHeroTitle{
  margin: 0;
  max-width: 10.5ch;
  font-size: clamp(29px, 8vw, 42px);
  line-height: 1.04;
  letter-spacing: -.025em;
  font-weight: 680;
  text-wrap: balance;
}
.dfHeroBody{
  margin: 14px 0 0;
  max-width: 33ch;
  font-size: 14px;
  line-height: 1.62;
  color: rgba(245,245,245,.76);
  text-wrap: pretty;
}
.dfHeroDots{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.dfHeroDot{
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.dfHeroDot:hover{
  transform: scale(1.08);
}
.dfHeroDot:focus-visible{
  outline: 2px solid rgba(198,167,94,.48);
  outline-offset: 3px;
}
.dfHeroDot.isActive{
  background: var(--gold-accent, #C6A75E);
  box-shadow: 0 0 0 4px rgba(198,167,94,.14);
  transform: scale(1.12);
}
.dfHeroGoBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 16px auto 0;
  min-width: 144px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(198,167,94,.26);
  background: rgba(255,255,255,.035);
  color: rgba(245,245,245,.92);
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.dfHeroGoBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(198,167,94,.42);
  background: rgba(255,255,255,.05);
}
.dfHeroGoBtn:focus-visible{
  outline: 2px solid rgba(198,167,94,.42);
  outline-offset: 3px;
}
@keyframes dfHeroDrift{
  from{ transform: translate3d(0, 0, 0) scale(1); }
  to{ transform: translate3d(0, 6px, 0) scale(1.03); }
}
@media (min-width: 720px){
  .dfHero{
    margin-top: 18px;
    margin-bottom: 12px;
  }
  .dfHeroFrame{
    padding: 24px 26px 24px;
    border-radius: 28px;
  }
  .dfHeroSlide{
    min-height: 188px;
  }
  .dfHeroBody{
    font-size: 14.5px;
  }
}
@media (max-width: 420px){
  .dfHeroFrame{
    padding: 16px 16px 18px;
  }
  .dfHeroSlide{
    min-height: 188px;
  }
  .dfHeroBody{
    max-width: 31ch;
    font-size: 13.5px;
  }
}

.heroBullet{
  text-align: center;
  line-height: 1.4;     /* 1.35–1.45 */
  opacity: .9;
}

.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background: rgba(0,0,0,.65);
}
.modal-inner{
  width: min(720px, 100%);
  background: rgba(20,20,20,.95);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:18px;
  max-height: 85vh;
  overflow:auto;
}
.modal-title{ margin:0 0 6px; }
.modal-sub{ margin:0 0 14px; opacity:.85; }

.stickyAnalyze{
  position:sticky;
  bottom:12px;
  padding-top:10px;
  background: linear-gradient(180deg, rgba(18,18,18,0), rgba(18,18,18,.92) 38%, rgba(18,18,18,1) 100%);
}


/* Larger Analyze button (below Train today) */
#analyzeBtn{
  min-height: 58px;
  font-size: 16px;
  padding: 16px 18px;
  border-radius: 16px;
}
.resultHero{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,.03);
  margin-bottom:14px;
}

.notice{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size:13px;
  line-height:1.35;
  opacity:.95;
}
.notice b{ font-weight:900; }
.badgeRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  opacity:.95;
}
.scoreRow{
  display:flex;
  gap:14px;
  align-items:baseline;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.scoreLine{
  display:flex;
  gap:6px;
  align-items:baseline;
}
.scoreNum{
  font-size:36px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.scoreOut{ opacity:.7; font-weight:700; }
.scoreReason{
  opacity:.9;
  font-size:14px;
}
.scoreGuideBtn{
  margin-left:auto;
  flex-basis:100%;
  text-align:right;
  background:transparent;
  border:0;
  padding:6px 0 0;
  font-size:12.5px;
  opacity:.85;
  color: rgba(198,167,94,.95);
}
.scoreGuideBtn:active{ opacity:1; transform: translateY(0.5px); }
.scoreGuideBtn:hover{ opacity:1; }
.scoreGuideBtn:focus-visible{
  outline:2px solid rgba(198,167,94,.75);
  outline-offset:3px;
  border-radius:10px;
}

.scoreRowReframed{
  display:block;
  margin: 10px 0 2px;
  padding: 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.scoreCommLabel{
  display:none;
}
.scoreRowReframed .scoreCommLabel{
  display:block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(255,255,255,.90);
  margin-bottom: 4px;
}
.scoreRowReframed .scoreLine{
  margin-bottom: 4px;
}
.scoreRowReframed .scoreReason{
  display:block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(245,245,245,.88);
}
.scoreMicrocopy{
  display:none;
}
.scoreRowReframed .scoreMicrocopy{
  display:block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(245,245,245,.74);
}
.scoreRowReframed .scoreGuideBtn{
  margin-left: 0;
  flex-basis: auto;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-top: 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  opacity: 1;
}

/* When the score guide button is used as a text-link inside the helper row,
   override the older button styling (Deep Read only). */
#resultsCard.mode-critique .scoreRowReframed .scoreLinkRow .scoreGuideBtn,
#resultsContainer.mode-critique .scoreRowReframed .scoreLinkRow .scoreGuideBtn{
  width: auto;
  padding: 8px 0;
  margin-top: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}

.scoreRowReframed .scoreLinkRow .scoreGuideBtn{
  width: auto;
  padding: 8px 0;
  margin-top: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}
.scoreRowReframed .scoreGuideBtn:focus-visible{
  outline:2px solid rgba(255,255,255,.2);
  outline-offset:2px;
}

.verdictLine{
  font-size:15px;
  line-height:1.35;
  opacity:.95;
}

/* Read / Critique switch (mobile-first) */
.modeSwitch{
  display:flex;
  gap:10px;
  margin: 10px 0 8px;
}
.modeBtn{
  flex:1;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding:10px 12px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  opacity: .92;
}
.modeBtn.active{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
  opacity: 1;
}

/* End-of-Read CTA */
.critiqueCTA{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.critiqueCTA .ctaTitle{
  font-weight: 900;
  margin-bottom: 8px;
}
.critiqueCTA .ctaBullets{
  opacity: .9;
  font-size: 13px;
  line-height: 1.35;
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.focusRow{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.focusLabel{
  opacity:.75;
  font-size:13px;
}

.focusMicro{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  opacity: .75;
}

.focusMicro + .stickyAnalyze{
  margin-top: 12px;
}

.imgStage{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  margin: 10px auto 12px;
  width: 100%;
  max-width: 380px; /* 2x smaller by default */
}

html[data-guided-open="1"] .imgStage{
  max-width: 760px; /* full size in Guided */
}

.imgStage img{
  width:100%;
  display:block;
}
.hotspotLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear;
}
.hotspotLayer.isSuppressed{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.hotspotLayer.isRevealed{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hotspotDot{
  pointer-events:auto;
  position:absolute;
  transform: translate(-50%, -50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.70);
  background: rgba(var(--primary-rgb),.68);
  color:rgba(255,255,255,.96);
  font-weight:800;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 30px rgba(0,0,0,.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .12s ease, background .12s ease;
}
.hotspotDot.active{
  outline: 3px solid rgba(255,255,255,.45);
  background: rgba(var(--primary-rgb),.78);
}
.hotspotTip{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
  background: rgba(255,255,255,.05);
  margin-bottom:12px;
}
.hotspotTip b{
  display:block;
  margin-bottom:6px;
}

.resultCards{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.resultCards.is-fading{
  opacity: .55;
  transform: translateY(2px);
}
.resultCard{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:12px 14px;
  background: rgba(255,255,255,.03);
}
.resultCardSection{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.022));
  backdrop-filter: blur(2px);
}
.resultCardToggle{
  appearance:none;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  text-align:left;
}
.resultCardToggle:focus-visible{
  outline:2px solid rgba(198,167,94,.38);
  outline-offset:4px;
  border-radius:12px;
}
.resultCardChevron{
  flex:0 0 auto;
  width:11px;
  height:11px;
  border-right:1.5px solid rgba(245,245,245,.62);
  border-bottom:1.5px solid rgba(245,245,245,.62);
  transform: rotate(45deg);
  transition: transform .18s ease, border-color .18s ease, opacity .18s ease;
  opacity:.9;
  margin-right:2px;
}
.resultCard.isExpanded .resultCardChevron{
  transform: rotate(225deg);
  border-color: rgba(198,167,94,.9);
}
.resultCardBodyWrap{
  overflow:hidden;
  max-height:0;
  opacity:0;
  margin-top:0;
  transition:max-height .24s ease, opacity .18s ease, margin-top .18s ease;
}
.resultCard.isExpanded .resultCardBodyWrap{
  opacity:1;
  margin-top:10px;
}

/* Scroll-driven reveal (IG/TikTok-ish but subtle) */
.resultCard.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
}
.resultCard.reveal.in{
  opacity:1;
  transform: none;
}

.stickyNextRep{
  position: sticky;
  bottom: 12px;
  z-index: 20;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(18,18,18,0), rgba(18,18,18,.92) 38%, rgba(18,18,18,1) 100%);
}
.stickyNextRep .primary{
  width: 100%;
}
.resultCardTitle{
  font-weight:800;
  margin:0;
  letter-spacing:-0.01em;
}
.resultCardBody ul, .resultCardBody ol{
  margin: 0;
  padding-left: 18px;
}
.resultCardBody li{
  margin: 6px 0;
  opacity:.92;
}
.resultCard.isCollapsed .resultCardTitle{
  color: rgba(245,245,245,.92);
}
.resultCard.isExpanded{
  border-color: rgba(198,167,94,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.028));
}
.resultCard.isExpanded .resultCardTitle{
  color:#fff;
}
.muted{ opacity:.65; }

@media (max-width: 430px){
  .resultCard{
    padding:11px 13px;
  }
  .resultCardToggle{
    gap:12px;
  }
  .resultCard.isExpanded .resultCardBodyWrap{
    margin-top:9px;
  }
}

.locked{
  position:relative;
  overflow:hidden;
}
.locked-blur{
  filter: blur(6px);
  transform: scale(1.02);
}
.lockOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.45);
}
.lockOverlayCard{
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:14px;
  background: rgba(18,18,18,.92);
  max-width: 420px;
  text-align:center;
}
.lockTitle{ font-weight:900; margin-bottom:6px; }
.lockSub{ opacity:.85; font-size:13px; margin-bottom:10px; }

.deepCols{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.deepK{
  opacity:.75;
  font-size:12px;
  letter-spacing:.01em;
  margin-bottom:4px;
}

.historyRow{
  display:flex;
  gap:12px;
  align-items:center;
}
.historyThumb{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.historyText{ flex:1; }
.historyMeta{
  font-size:12px;
  opacity:.7;
  margin-bottom:4px;
}
.historyTitle{ font-weight:700; opacity:.95; }

.loadingOverlay{
  position:fixed;
  inset:0;
  z-index:80;
  background: rgba(0,0,0,.70);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.loadingInner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background: rgba(18,18,18,.88);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:18px 16px;
  width: min(320px, 90vw);
}
.iris{
  width: 64px;
  height: 64px;
}

.guidedOverlay{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  flex-direction:column;
}
.guidedTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  background: rgba(0,0,0,.55);
}
.guidedCounter{ font-weight:800; }
.guidedClose{
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:8px 12px;
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.guidedBackdrop{
  flex:1;
  position:relative;
  background-color:#000;
  /* background-image is set in JS to the current photo */
}
.guidedBackdrop::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle var(--spot-r, 240px) at var(--spot-x, 50%) var(--spot-y, 50%),
      rgba(0,0,0,0) 0 46%,
      rgba(0,0,0,.38) 66%,
      rgba(0,0,0,.52) 100%);
  pointer-events:none;
}
.guidedCard{
  padding:14px;
  background: rgba(18,18,18,.92);
  border-top:1px solid rgba(255,255,255,.12);
}
.guidedTitle{ font-weight:900; margin-bottom:6px; }
.guidedTip{ opacity:.9; margin-bottom:12px; line-height:1.35; }

.scoreGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px;
  background: rgba(255,255,255,.03);
}

/* Critique: editorial key/value rows (readable + stable) */
.kvList{ display:grid; gap:0; }
.kvRow{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 16px;
  align-items:start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.kvRow:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.kvK{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .65;
  line-height: 1.35;
  font-weight: 600;
}
.kvV{
  font-weight: 500;
  opacity: .92;
  line-height: 1.65;
  text-align: left;
  max-width: 62ch;
}

@media (max-width: 520px){
  .kvRow{ grid-template-columns: 1fr; gap: 6px; }
}

.scoreBDRow{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.scoreBDK{ opacity:.85; font-size:13px; }
.scoreBDV{ font-weight:900; font-size:13px; }
.scoreBDOverall{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top:6px; padding-top:8px; border-top:1px solid rgba(255,255,255,.10); }
.aboutBlock{
  margin: 12px 0 16px;
}
.aboutTitle{
  font-weight:900;
  margin-bottom:6px;
}
.aboutText{ opacity:.9; line-height:1.45; }
.aboutText.small{ opacity:.75; font-size:13px; margin-top:10px; }

/* ================================
   ABOUT MODAL — PREMIUM EDITORIAL
   Blue + Gold accents only
=================================== */

#aboutModal .modal-inner{
  background: linear-gradient(180deg, rgba(20,24,32,.96), rgba(14,16,22,.98));
  border-color: rgba(198,167,94,.16);
}

#aboutModal .modal-title{
  letter-spacing: .01em;
  margin-bottom: 14px;
}

#aboutModal .aboutContent{
  max-width: 620px;
  margin: 0 auto;
}

#aboutModal .aboutHeadline{
  margin: 0 0 14px;
  font-size: clamp(22px, 4.9vw, 30px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.98);
  text-wrap: balance;
}

#aboutModal .aboutText{
  line-height: 1.7;
  margin: 0 0 14px;
  font-size: 14.5px;
  color: rgba(245,245,245,.9);
}

#aboutModal .aboutGold{
  color: var(--gold-accent);
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
}

#aboutModal .aboutSep{
  height: 1px;
  margin: 18px 0 18px;
  background: linear-gradient(90deg,
    rgba(198,167,94,0),
    rgba(198,167,94,.16),
    rgba(var(--primary-rgb),.10),
    rgba(198,167,94,.14),
    rgba(198,167,94,0)
  );
}

#aboutModal .aboutSubhead{
  margin: 0 0 12px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(198,167,94,.82);
}

#aboutModal .aboutQuote{
  margin: 18px 0 18px;
  padding: 14px 16px;
  border-left: 2px solid rgba(198,167,94,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border-radius: 14px;
  line-height: 1.58;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,.95);
  text-wrap: balance;
}

#aboutModal .aboutPrinciples,
#aboutModal .aboutList{
  list-style: none;
  padding: 0;
  margin: 0;
}

#aboutModal .aboutPrinciples li{
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

#aboutModal .aboutPrinciples li:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

#aboutModal .aboutPrincipleLead{
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.96);
}

#aboutModal .aboutPrincipleText{
  display: block;
  line-height: 1.66;
  font-size: 14.25px;
  color: rgba(245,245,245,.88);
}

#aboutModal .aboutList li{
  position: relative;
  padding-left: 18px;
  margin: 10px 0;
  line-height: 1.64;
  font-size: 14.25px;
  color: rgba(245,245,245,.9);
}

#aboutModal .aboutList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(198,167,94,.68);
}

#aboutModal .aboutClosing{
  text-align: left;
  margin: 0;
  color: rgba(245,245,245,.92);
}

#aboutModal .aboutClosingLead{
  font-size: 15px;
  line-height: 1.62;
  font-weight: 500;
  margin: 0 0 10px;
}

#aboutModal .aboutClosingFinal{
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

@media (min-width: 900px){
  #aboutModal .aboutContent{
    max-width: 660px;
  }

  #aboutModal .aboutHeadline{
    font-size: 31px;
  }
}




/* Paywall horizontal on mobile */
@media (min-width: 720px){
  .plans{
    display:grid;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .plan{
    flex: initial;
    max-width: none;
  }
}


/* Hotspot dot size */
@media (max-width: 520px){
  .hotspotDot{
    width:44px;
    height:44px;
    font-size:16px;
  }
}


/* ================================
   CRITIQUE PREMIUM THEME + MOTION
   Add to public/styles.css
=================================== */

:root{
  --read-accent: var(--primary);
  --critique-accent: #4F6F9A;
  --gold-accent: #C6A75E;        /* elegant gold */
  --critique-bg-dim: rgba(0,0,0,0.04); /* subtle */
}

/* Critique readability: left aligned, line length, subtle gold markers */
#resultsContainer.mode-critique .resultCardBody,
#resultsCard.mode-critique .resultCardBody{
  text-align: left;
  line-height: 1.65;
}
#resultsContainer.mode-critique .resultCardBody > *,
#resultsCard.mode-critique .resultCardBody > *{
  max-width: 62ch;
}
#resultsContainer.mode-critique .resultCardBody li::marker,
#resultsCard.mode-critique .resultCardBody li::marker{
  color: rgba(198,167,94,.85);
}

/* Container gets a mode class: .mode-read or .mode-critique */
#resultsContainer.mode-critique{
  /* subtle atmosphere change */
  background: linear-gradient(180deg, var(--critique-bg-dim), rgba(0,0,0,0));
  transition: background 280ms ease;
}

/* Segmented tabs */
.modeSwitch{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding: 10px 0 6px;
  margin: 0 auto 10px;
}

.modeBtn{
  position:relative;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.78);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
  cursor:pointer;
  user-select:none;
}

.modeBtn small{
  display:block;
  margin-top:4px;
  font-weight:500;
  font-size:11px;
  opacity:.75;
}

/* Active states */
.modeBtn.active{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
  pointer-events: none;
}

/* Critique tab: subtle premium even when inactive */
#critiqueModeBtn{
  border-color: rgba(198,167,94,0.22);
  background: rgba(198,167,94,0.04);
}
#critiqueModeBtn.active{
  border-color: rgba(198,167,94,0.38);
}

/* Critique active gets premium underline (gold) */
#critiqueModeBtn.active::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-6px;
  height:2px;
  border-radius: 999px;
  background: var(--gold-accent);
}

/* Critique-only elegant gold touches inside cards */
#resultsContainer.mode-critique .resultCard,
#resultsCard.mode-critique .resultCard{
  border-color: rgba(198,167,94,0.18);
}
#resultsContainer.mode-critique .resultCardTitle,
#resultsCard.mode-critique .resultCardTitle{
  position: relative;
}
#resultsContainer.mode-critique .resultCardTitle::before,
#resultsCard.mode-critique .resultCardTitle::before{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(198,167,94,0.65);
  margin-right: 8px;
  vertical-align: middle;
}

/* Score breakdown bars (Critique only) */
.scoreBars .scoreBDRow,
.scoreBars .scoreBDOverall{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(124px, 136px) 48px;
  gap: 10px;
  align-items: center;
}
.scoreBar{
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.18);
  overflow: hidden;
}
.scoreBarFill{
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(176,145,79,.88), rgba(214,184,116,.98));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 760ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
  opacity: .98;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 10px rgba(198,167,94,.12);
  will-change: transform;
}

/* Hotspot micro-motion */
.hotspotDot{
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 220ms ease, transform 220ms ease;
}
.hotspotDot.hotspotIn{
  opacity: 1;
  transform: scale(1);
}
.hotspotTip{
  transition: opacity 220ms ease, transform 220ms ease;
}
.hotspotTip.tipIn{
  opacity: 1;
  transform: translateY(0);
}
.hotspotTip.hidden{
  opacity: 0;
  transform: translateY(10px);
}

/* Paywall bottom-sheet motion */
.paywall{
  transition: opacity 300ms ease;
  opacity: 1;
}
.paywall.is-opening{
  opacity: 1;
}
.paywall.is-closing{
  opacity: 0;
}
.paywall-inner{
  transform: translateY(100%);
  transition: transform 300ms ease;
}
.paywall:not(.hidden):not(.is-closing) .paywall-inner{
  transform: translateY(0);
}
.paywall.is-closing .paywall-inner{
  transform: translateY(100%);
}

/* CTA nudge */
.critiqueCTA.ctaNudge{
  animation: ctaPulse 520ms ease;
}
@keyframes ctaPulse{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}

/* Guided overlay: tooltip/card slide in */
.guidedCard{
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}
.guidedOverlay:not(.hidden) .guidedCard{
  transform: translateY(0);
  opacity: 1;
}

/* Optional: when critique is active, text/icon accents shift */
#resultsContainer.mode-critique .accent,
#resultsCard.mode-critique .accent{
  color: var(--critique-accent);
}

/* Deep transition for mode change */
.modeTransition{
  will-change: transform, opacity;
  transition: opacity 280ms ease, transform 280ms ease;
}
.modeTransition.fadeOut{
  opacity: 0;
  transform: translateY(8px);
}
.modeTransition.fadeIn{
  opacity: 1;
  transform: translateY(0);
}

/* Score premium presence in critique */
#resultsContainer.mode-critique .scoreValue{
  color: #fff;
  position: relative;
}
#resultsContainer.mode-critique .scoreValue::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background: var(--gold-accent);
  opacity: .85;
}

/* Pulse */
.scorePulse{
  animation: scorePulse 520ms ease;
}
@keyframes scorePulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .modeTransition{ transition:none !important; }
  .scorePulse{ animation:none !important; }
  .scoreBarFill{ transition:none !important; }
  .hotspotLayer{ transition:none !important; }
  .hotspotDot{ transition:none !important; transform:none !important; opacity:1 !important; }
  .hotspotTip{ transition:none !important; }
  .paywall{ transition:none !important; opacity:1 !important; }
  .paywall-inner{ transition:none !important; transform:none !important; }
  .critiqueCTA.ctaNudge{ animation:none !important; }
  .guidedCard{ transition:none !important; transform:none !important; opacity:1 !important; }
  .premiumCta{ animation: none !important; }
  .premiumCta::before{ animation: none !important; opacity: 0 !important; }

}

/* Compatibility: this build uses #resultsCard as the results container */
#resultsCard.mode-critique{
  background: linear-gradient(180deg, var(--critique-bg-dim), rgba(0,0,0,0));
  transition: background 280ms ease;
}
#resultsCard.mode-critique .accent{ color: var(--critique-accent); }
#resultsCard.mode-critique .scoreNum{
  color:#fff;
  position:relative;
}
#resultsCard.mode-critique .scoreNum::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background: var(--gold-accent);
  opacity:.85;
}

/* Manifesto micro-block */
.manifesto{
  margin: 14px 0 6px;
  padding: 0 6px;
}

.manifestoText{
  max-width: 56ch;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(245,245,245,.78);
  text-align: center;
  letter-spacing: .01em;
}

.manifestoText::after{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold-accent);
  margin-left: 8px;
  transform: translateY(-1px);
  opacity: .85;
}

.manifestoBreak{ display: none; }

@media (max-width: 520px){
  .manifestoText{ font-size: 12.5px; }
  .manifestoBreak{ display: block; }
}

/* =============================
   YOUR NEXT SHOT (reveal-only)
   ============================= */

.followupMicro{
  margin: 6px 0 10px;
  font-size: 12px;
  line-height: 1.35;
  opacity: .75;
}

.followupMicro2{
  margin: -4px 0 12px;
  font-size: 12px;
  line-height: 1.35;
  opacity: .9;
}

.nextShotBlock,
.nextShotCapstone{
  margin-top: 16px;
  padding: 16px 15px 14px;
  border-radius: 18px;
  border: 1px solid rgba(198,167,94,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(130% 180% at 50% 0%, rgba(198,167,94,.10), rgba(0,0,0,0) 62%),
    rgba(255,255,255,.025);
  box-shadow: 0 16px 38px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.03);
}

.nextShotHeader{
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(198,167,94,.92);
  margin-bottom: 7px;
}

.nextShotMicro{
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(245,245,245,.92);
  margin-bottom: 8px;
}

.nextShotAccess{
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(245,245,245,.66);
  margin-bottom: 12px;
}

.nextShotPreview{
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 11px 12px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.nextShotFieldRow{
  display: grid;
  gap: 4px;
}

.nextShotFieldLabel{
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(198,167,94,.86);
}

.nextShotFieldValue{
  font-size: 14px;
  line-height: 1.3;
  color: rgba(255,255,255,.94);
  font-weight: 650;
}

.nextShotFieldHints{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.nextShotHintPill{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(198,167,94,.18);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.66);
  font-size: 11px;
  line-height: 1;
}

.premiumCta{
  width: 100%;
  min-height: 50px;
  /* More breathing room around the CTA */
  margin: 16px 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(198,167,94,.62);
  /* Metallic gold base (premium, not neon) */
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    radial-gradient(120% 160% at 35% 20%, rgba(255,255,255,.18), rgba(0,0,0,0) 55%),
    linear-gradient(120deg, rgba(198,167,94,.62), rgba(198,167,94,.32) 55%, rgba(198,167,94,.50));
  color: rgba(255,255,255,.96);
  font-weight: 600;
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
  /* gentle breathing glow (subtle) */
  box-shadow: 0 0 12px rgba(198,167,94,.10);
  animation: premiumGlow 7s ease-in-out infinite;
  transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease;
}


/* Slow, subtle gold shimmer (premium) */
.premiumCta::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.32;
  will-change: transform;
  mix-blend-mode: overlay;
  background: linear-gradient(
    110deg,
    rgba(0,0,0,0) 0%,
    rgba(198,167,94,.00) 35%,
    rgba(198,167,94,.18) 48%,
    rgba(255,255,255,.10) 52%,
    rgba(198,167,94,.18) 56%,
    rgba(0,0,0,0) 70%
  );
  transform: translate3d(-140%,0,0);
  animation: premiumShimmer 5.9s linear infinite;
}

@media (hover:hover){
  .premiumCta:hover{
    transform: translateY(-1px);
    filter: brightness(1.04);
    border-color: rgba(198,167,94,.78);
  }
}

.premiumCta:active{
  transform: translateY(0px);
  filter: brightness(1.02);
}

.premiumCta:focus-visible{
  outline: 2px solid rgba(198,167,94,.85);
  outline-offset: 3px;
}

@keyframes premiumShimmer{
  0%{ transform: translate3d(-140%,0,0); }
  100%{ transform: translate3d(140%,0,0); }
}

@keyframes premiumGlow{
  0%,100%{ box-shadow: 0 0 12px rgba(198,167,94,.10); }
  50%{ box-shadow: 0 0 18px rgba(198,167,94,.18); }
}
.premiumCta::after{ content: none !important; display: none !important; }

.premiumCta:disabled{
  opacity: .5;
}

/* Keep the YNS capstone compact even with the stronger shell. */
.nextShotBlock,
.nextShotCapstone{
  overflow: hidden;
}

.nextShotRevealBtn{
  width: 100%;
}

#resultsCard.dfFullMode .nextShotBlock,
#resultsCard.dfFullMode .nextShotCapstone{
  margin-top: 18px;
}

/* Privacy block: compact, low-emphasis footer note */
.card.privacy{
  padding: 10px 12px;
  margin: 10px 0 4px;
  border-radius: 16px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
  opacity: .82;
}
.card.privacy .h2{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .07em;
  opacity: .72;
}
.privacy-list{
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.32;
}
.privacy-list li{ margin: 4px 0; font-weight: 400; }
.privacy-list li::marker{ opacity: .55; }

/* Modal */
.nsModal{
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nsBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .45s ease;
}

.nsModal.is-open .nsBackdrop{ opacity: 1; }

.nsPanel{
  position: relative;
  width: min(520px, 100%);
  margin: auto 0;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 20px));
  max-height: calc(100dvh - (env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 20px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 22px;
  padding: 16px 16px 14px;
  background: rgba(18,18,22,.92);
  border: 1px solid rgba(255,255,255,.10);
  transform: translateY(14px) scale(.985);
  opacity: 0;
  transition: transform .48s cubic-bezier(.2,.8,.2,1), opacity .48s cubic-bezier(.2,.8,.2,1);
}

.nsModal.is-open .nsPanel{
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .nsPanel,
  .nsBackdrop,
  .ynsBlock{ transition: none !important; transform: none !important; }
}

.nsClose{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.9);
  font-size: 20px;
}

/* =============================
   Your Next Shot (Assignment Card)
   Scoped to the YNS modal only
============================= */

.ynsModalCard{
  overflow: hidden;
}

.ynsModalCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 22px;
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(var(--primary-rgb),.14), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(198,167,94,.06), rgba(0,0,0,0) 38%);
  opacity:.9;
}

.ynsModalCard > *{ position: relative; z-index: 1; }

.ynsBlock{
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .42s cubic-bezier(.2,.8,.2,1),
    transform .42s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0ms);
}

.nsModal.is-open .ynsBlock{
  opacity: 1;
  transform: translateY(0);
}

.ynsEyebrow{
  margin: 4px 0 8px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-accent, #C6A75E);
  opacity: .92;
}

.ynsFocusValue{
  font-size: 18px;
  line-height: 1.15;
  font-weight: 760;
  color: rgba(255,255,255,.96);
}

.ynsSubtitle{
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255,255,255,.74);
}

.ynsChallengeHero{
  margin: 0;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--primary-rgb),.22);
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb),.12), rgba(255,255,255,.02));
  box-shadow: 0 14px 30px rgba(0,0,0,.30), 0 0 0 3px rgba(var(--primary-rgb),.10);
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 720;
  color: rgba(255,255,255,.95);
}

.ynsSection{ margin: 0 0 12px; }

.ynsSectionLabel{
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(198,167,94,.84);
}

.ynsSectionValue,
.ynsSectionBody{
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,.82);
}

.ynsConstraintList{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ynsConstraintItem{
  position: relative;
  padding: 0 0 0 16px;
  color: rgba(255,255,255,.86);
  font-size: 12.5px;
  line-height: 1.35;
}

.ynsConstraintItem::before{
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(198,167,94,.86);
  box-shadow: 0 0 0 3px rgba(198,167,94,.12);
}

.ynsSuccess .ynsSectionBody{
  color: rgba(255,255,255,.90);
}

.ynsNudge{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255,255,255,.68);
  opacity: .78;
}

.feDebugWrap{
  margin-top: 10px;
}

.feDebugToggle{
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.84);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .01em;
  text-align: left;
  padding: 10px 12px;
}

.feDebugPanel{
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
}

.feDebugTitle{
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}

.feDebugGrid{
  display: grid;
  gap: 10px;
}

.feDebugSection{
  display: grid;
  gap: 6px;
}

.feDebugSectionTitle{
  font-size: 10.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(198,167,94,.82);
}

.feDebugRow{
  display: grid;
  grid-template-columns: minmax(116px, 132px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.feDebugLabel{
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(255,255,255,.56);
}

.feDebugValue{
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.88);
  word-break: break-word;
}

.feDebugBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.feDebugBadge.is-good{
  color: rgba(197,255,214,.94);
  background: rgba(79,159,108,.18);
  border-color: rgba(79,159,108,.34);
}

.feDebugBadge.is-bad{
  color: rgba(255,214,214,.96);
  background: rgba(164,66,66,.20);
  border-color: rgba(164,66,66,.34);
}

.feDebugBadge.is-muted{
  color: rgba(255,255,255,.64);
  background: rgba(255,255,255,.04);
}

.ynsActions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
}

.ynsSaveBtn,
.ynsCloseBtn{
  flex: 1;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
}

.ynsSaveBtn{
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
}

.ynsCloseBtn{
  background: linear-gradient(180deg, rgba(var(--primary-rgb),.88), rgba(var(--primary-deep-rgb),.88));
  border-color: rgba(var(--primary-rgb), .72);
  color: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 0 3px rgba(var(--primary-rgb),.10);
}

.ynsSaveBtn.is-flash{
  border-color: rgba(198,167,94,.34);
}

.nsTitle{
  font-size: 13px;
  opacity: .75;
  margin-bottom: 6px;
}

.nsChallenge{
  font-size: 15px;
  line-height: 1.35;
  font-weight: 650;
  margin-bottom: 12px;
}

.nsLabel{
  font-size: 12px;
  opacity: .7;
  margin-bottom: 6px;
}

.nsSection{ margin-bottom: 10px; }

.nsList{
  margin: 0;
  padding-left: 18px;
  opacity: .9;
  font-size: 13px;
}

.nsBody{
  font-size: 13px;
  line-height: 1.35;
  opacity: .9;
}

.nsNudge{
  margin-top: 10px;
  font-size: 12px;
  opacity: .7;
}

body.nextshot-open{ overflow: hidden; }

body.has-live-analysis:not(.df-mode) #uploadCard.analysisSetupCollapsed,
body.has-live-analysis:not(.df-mode) #analyzeCard.analysisSetupCollapsed{
  display: none !important;
}

@media (max-height: 760px){
  .nsModal{
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  }
  .nsPanel{
    padding: 14px 14px 12px;
  }
  .ynsChallengeHero{
    padding: 11px 11px;
    font-size: 15px;
  }
  .ynsActions{
    position: sticky;
    bottom: 0;
    margin: 10px -2px -2px;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(18,18,22,0), rgba(18,18,22,.92) 26%, rgba(18,18,22,.98));
  }
}

@media (max-height: 700px){
  .nsPanel{
    border-radius: 20px;
    padding: 13px 13px 12px;
  }
  .nsClose{
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
  }
  .ynsEyebrow{ margin: 2px 0 7px; }
  .ynsTitle{ font-size: 17px; line-height: 1.12; }
  .ynsSubtitle,
  .ynsSectionBody,
  .ynsSectionValue,
  .ynsNudge,
  .ynsConstraintItem{ font-size: 12.5px; }
  .ynsSection{ margin-bottom: 8px; }
  .ynsActions{ gap: 8px; }
  .ynsSaveBtn,
  .ynsCloseBtn{ height: 42px; font-size: 13.5px; }
  .feDebugRow{ grid-template-columns: 1fr; gap: 4px; }
  .feDebugValue{ font-size: 11.5px; }
  .feDebugLabel{ font-size: 11px; }
}

@media (min-width: 720px){
  .intro-inner{ padding: 24px; }
}

/* APP_VERSION: guided_exercises_meta_v1 */
/* ==========================================
   Daily Frame MVP (entry flow)
========================================== */

body.df-mode #introScreen,
body.df-mode #manifestoBlock,
body.df-mode #uploadCard,
body.df-mode #analyzeCard,
body.df-mode #privacyCard{
  display:none !important;
}

body.df-mode #resultsCard{
  display:none !important;
}

body.df-mode.df-full-reveal #resultsCard{
  display:block !important;
}

body.dfBootPending{
  overflow:hidden;
}

body.dfBootPending main.container{
  visibility:hidden;
}

 .dfScreen{
  margin: 12px 0 10px;
}
body.df-mode .dfScreen{
  margin-top: 16px;
}
.dfCountdownDock{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  left: 50%;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 144px;
  max-width: calc(100vw - 28px);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(216,183,116,.18);
  background: linear-gradient(180deg, rgba(18,21,27,.90), rgba(12,14,19,.94));
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -4px, 0);
  transition: opacity .18s ease, transform .18s ease;
}
body.df-mode .dfCountdownDock{
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}
.dfCountdownLabel{
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245,245,245,.54);
}
.dfCountdownValue{
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .055em;
  font-variant-numeric: tabular-nums;
  color: rgba(232,201,136,.88);
  text-shadow: 0 0 8px rgba(198,167,94,.06);
}
@media (max-width: 480px){
  body.df-mode .dfScreen{
    margin-top: 70px;
  }
  .dfCountdownDock{
    top: calc(env(safe-area-inset-top, 0px) + 54px);
    min-width: 136px;
    padding: 7px 11px;
  }
}
.dfPagerViewport{
  --dfArchiveRatio: 0;
  --dfArchiveAbsRatio: 0;
  --dfArchivePeekPx: 56px;
  --dfPeekOlderReveal: 0;
  --dfPeekNewerReveal: 0;
  position: relative;
  overflow: visible;
  padding-inline: 6px;
}
.dfPagerPeek{
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--dfArchivePeekPx);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .22s ease, transform .30s cubic-bezier(.22,.78,.18,1), filter .22s ease;
}
.dfPagerPeek.hidden{
  display: block !important;
  opacity: 0 !important;
}
.dfPagerPeekOlder{
  left: 0;
  transform: translate3d(-18px,0,0) scale(.962);
}
.dfPagerPeekNewer{
  right: 0;
  transform: translate3d(18px,0,0) scale(.962);
}
.dfPagerPeekInner{
  position: absolute;
  inset: 6px 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.036), rgba(255,255,255,.016)),
    linear-gradient(180deg, rgba(var(--primary-rgb),.08), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(236,204,136,.04), rgba(0,0,0,0));
  box-shadow:
    0 16px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.dfPagerPeekMedia,
.dfPagerPeekShade,
.dfPagerPeekMeta{
  position: absolute;
  inset: 0;
}
.dfPagerPeekMedia{
  background-position: center;
  background-size: cover;
  opacity: .56;
  filter: saturate(.92) brightness(.84);
}
.dfPagerPeekFilled .dfPagerPeekMedia{
  opacity: .76;
}
.dfPagerPeekShade{
  background:
    linear-gradient(180deg, rgba(10,12,16,.02) 0%, rgba(10,12,16,.16) 34%, rgba(10,12,16,.56) 100%);
}
.dfPagerPeekMeta{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 0 7px 9px;
  background: linear-gradient(180deg, rgba(10,12,16,0) 42%, rgba(10,12,16,.58) 100%);
}
.dfPagerPeekTag,
.dfPagerPeekDate{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dfPagerPeekTag{
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245,245,245,.74);
}
.dfPagerPeekDate{
  font-size: 9px;
  line-height: 1.1;
  color: rgba(245,245,245,.64);
}
.dfPagerViewport.dfCanPeekOlder .dfPagerPeekOlder{
  opacity: calc(.58 + (var(--dfPeekOlderReveal) * .32));
  transform: translate3d(calc(-18px + (var(--dfPeekOlderReveal) * 18px)),0,0) scale(calc(.962 + (var(--dfPeekOlderReveal) * .038)));
}
.dfPagerViewport.dfCanPeekNewer .dfPagerPeekNewer{
  opacity: calc(.58 + (var(--dfPeekNewerReveal) * .32));
  transform: translate3d(calc(18px - (var(--dfPeekNewerReveal) * 18px)),0,0) scale(calc(.962 + (var(--dfPeekNewerReveal) * .038)));
}
.dfPagerViewport.dfArchiveDragging .dfPagerPeek{
  filter: brightness(1.03);
}
.dfShell{
  --dfArchiveX: 0px;
  --dfArchiveScale: 1;
  width: calc(100% - clamp(12px, 3.8vw, 22px));
  max-width: calc(100% - clamp(12px, 3.8vw, 22px));
  margin-inline: auto;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 12px;
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.014)),
    linear-gradient(180deg, rgba(10,12,18,.72), rgba(8,10,15,.88));
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate3d(var(--dfArchiveX),0,0) scale(var(--dfArchiveScale));
  transition: transform .34s cubic-bezier(.2,.82,.18,1), box-shadow .24s ease, padding .22s ease;
}
.dfShell.dfArchiveDragging{
  box-shadow: 0 20px 44px rgba(0,0,0,.26);
}
.dfShell.dfArchiveAnimating{
  pointer-events: none;
}
.dfShell.dfArchiveNoTrans,
.dfPagerViewport.dfArchiveNoTrans .dfPagerPeek{
  transition: none !important;
}
@media (max-width: 480px){
  .dfPagerViewport{
    --dfArchivePeekPx: 44px;
    padding-inline: 4px;
  }
  .dfPagerPeekOlder{
    transform: translate3d(-14px,0,0) scale(.966);
  }
  .dfPagerPeekNewer{
    transform: translate3d(14px,0,0) scale(.966);
  }
  .dfShell{
    width: calc(100% - 12px);
    max-width: calc(100% - 12px);
  }
}
.dfLabelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 4px;
}
.dfLabel{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,245,245,.72);
}
.dfDate{
  font-size: 11px;
  color: rgba(245,245,245,.6);
}
.dfSubtitle{
  font-size: 12px;
  font-weight: 560;
  letter-spacing: .01em;
  color: rgba(245,245,245,.86);
  margin-bottom: 10px;
}
.dfImageWrap{
  width: 100%;
  max-width: min(100%, 720px);
  margin-inline: auto;
  margin-bottom: 26px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(244,244,244,.18);
  background: rgba(255,255,255,.018);
  box-shadow:
    0 24px 68px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.04) inset;
  transition: max-width .24s ease, margin .24s ease, border-radius .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.dfImage{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(70svh, 620px);
  margin-inline: auto;
  border-radius: 7px;
  object-fit: contain;
  background: #0f1218;
  box-shadow: none;
}
.dfQuestionMount{
  margin-top: 0;
  min-height: 210px;
  transition: margin-top .22s ease, min-height .22s ease;
}
.dfQuizCard{
  background: linear-gradient(180deg, rgba(18,22,29,.86), rgba(16,18,24,.96));
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.dfQuizCard.isVisible{
  opacity: 1;
  transform: translateY(0);
}
.dfQuizCard.dfMotionOut{
  opacity: 0;
  transform: translateY(8px);
}
.dfLockedCard{
  background: linear-gradient(180deg, rgba(18,22,29,.9), rgba(14,17,23,.98));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 15px 15px 14px;
  box-shadow: 0 18px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}
.dfLockedCard.isVisible{
  opacity: 1;
  transform: translateY(0);
}
.dfLockedTop{
  margin-bottom: 10px;
}
.dfLockedTitle{
  color: rgba(247,248,250,.96);
  font-size: 18px;
  font-weight: 720;
  line-height: 1.18;
}
.dfLockedLead{
  margin-top: 6px;
  color: rgba(236,239,245,.78);
  font-size: 13px;
  line-height: 1.38;
}
.dfLockedBody{
  margin-top: 12px;
  color: rgba(236,239,245,.88);
  font-size: 13px;
  line-height: 1.48;
}
.dfLockedMeta{
  margin-top: 10px;
  color: rgba(231,198,131,.92);
  font-size: 12px;
  line-height: 1.38;
}

.dfQuestionMount .quizFeedback{
  transform: translateY(6px);
  transition: max-height .22s ease, opacity .22s ease, margin-top .22s ease, transform .22s ease;
}
.dfQuestionMount .quizFeedback.isOpen{
  transform: translateY(0);
}
.dfContinue{
  margin-top: 10px;
  width: 100%;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(245,245,245,.9);
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, background .12s ease, border-color .12s ease;
}
.dfCtas .dfContinue{
  margin-top: 0;
}
.dfContinue:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.dfContinue.isVisible{
  opacity: 1;
  transform: translateY(0);
}
.dfCtas{
  margin-top: 12px;
  display: grid;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .24s ease, transform .24s ease, margin-top .22s ease;
}
.dfCtas.isVisible{
  opacity: 1;
  transform: translateY(0);
}
.dfScreen.dfActiveFlow .dfShell{
  padding: 11px;
}

.dfScreen.dfActiveFlow .dfImageWrap{
  max-width: min(94%, 680px);
  margin-inline: auto;
  border-radius: 12px;
}

.dfScreen.dfActiveFlow .dfQuestionMount{
  margin-top: 0;
  min-height: 196px;
}

.dfScreen.dfActiveFlow .dfCtas{
  margin-top: 10px;
}
.dfBubble{
  width:100%;
  border:none;
  border-radius: 16px;
  padding: 14px 14px;
  font-weight: 650;
  font-size: 14px;
  line-height: 1.2;
  text-align:center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.dfBubble:active{ transform: translateY(1px); }
.dfBubbleBlue{
  color: #eef3ff;
  border:1px solid rgba(var(--primary-rgb),.38);
  background: linear-gradient(180deg, rgba(var(--primary-rgb),.28), rgba(var(--primary-deep-rgb),.56));
  box-shadow: 0 10px 22px rgba(10,16,28,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.dfBubbleBlue:hover{
  filter: brightness(1.05);
}
.dfBubbleGold{
  color: #17120a;
  border:1px solid rgba(222,189,120,.42);
  background: linear-gradient(180deg, rgba(231,199,132,.98), rgba(188,148,79,.98));
  box-shadow: 0 10px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.45);
}
.dfBubbleGold:hover{
  filter: brightness(1.03);
}
.dfLockedMentorCta{
  min-height: 86px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  border-color: rgba(216,183,116,.24);
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb),.22), rgba(var(--primary-deep-rgb),.58));
  box-shadow:
    0 12px 24px rgba(10,16,28,.24),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(216,183,116,.05);
}
.dfLockedMentorCta:hover,
.dfLockedMentorCta:focus-visible{
  filter: none;
  outline: none;
  border-color: rgba(216,183,116,.34);
  box-shadow:
    0 14px 28px rgba(10,16,28,.28),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(216,183,116,.08);
}
.dfLockedMentorIcon{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(216,183,116,.24);
  background: rgba(216,183,116,.08);
  color: rgba(238,206,142,.95);
  font-size: 14px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.dfLockedMentorBody{
  min-width: 0;
  display: grid;
  gap: 3px;
}
.dfLockedMentorTitle{
  color: rgba(245,245,245,.96);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
}
.dfLockedMentorSub{
  color: rgba(235,239,247,.74);
  font-size: 11px;
  font-weight: 520;
  line-height: 1.32;
}
.dfLockedMentorHint{
  color: rgba(236,204,136,.94);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .01em;
}

body.df-mode.df-full-reveal #modeSwitch,
body.df-mode.df-full-reveal #critiqueCTA,
body.df-mode.df-full-reveal #microProgress{
  display:none !important;
}

/* In DF full reveal, keep the lower Exercises block visible so the
   remaining richer modes (guided + rank) can appear before Next Shot.
   Only suppress the legacy inline result panel / transient hint. */
body.df-mode.df-full-reveal #followupResult,
body.df-mode.df-full-reveal #exerciseHint{
  display:none !important;
}

body.df-mode.df-full-reveal .dfHideInDailyFrame{
  display:none !important;
}

.dfEndAnalyzerRow{
  margin: 22px auto 8px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dfEndAnalyzerRow .dfBubble{
  width: auto;
  min-width: min(100%, 236px);
  max-width: min(100%, 320px);
}
.dfFooterSecondaryCta{
  min-height: 42px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 620;
  color: rgba(244,239,228,.92);
  border: 1px solid rgba(216,183,116,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 8px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
.dfFooterSecondaryCta:hover,
.dfFooterSecondaryCta:focus-visible{
  filter: brightness(1.02);
  border-color: rgba(216,183,116,.26);
}

#resultsCard.dfFullMode{
  animation: dfResultsFadeIn .24s ease-out both;
}
@keyframes dfResultsFadeIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

body.df-mode .dfScreen.dfGone{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}

.dfSuppressed{
  display:none !important;
}

/* DF → Personal route polish (progressive steps + deep-read-only UI cleanup) */
body.df-personal-route #modeSwitch,
body.df-personal-route #critiqueCTA{
  display:none !important;
}


/* Top-right menu (DF personal route) */
.dfMenuBtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--fg);
  display:grid;
  place-items:center;
  gap: 3px;
  padding: 0;
  position: relative;
}
.dfMenuBtn span{
  display:block;
  width: 16px;
  height: 1.5px;
  border-radius: 999px;
  background: rgba(245,245,245,.92);
  transition: transform .18s ease, opacity .18s ease;
}
.dfMenuBtn.isOpen span:nth-child(1){ transform: translateY(4.5px) rotate(45deg); }
.dfMenuBtn.isOpen span:nth-child(2){ opacity: 0; }
.dfMenuBtn.isOpen span:nth-child(3){ transform: translateY(-4.5px) rotate(-45deg); }

.top{ position: relative; }

.dfMenuPanel{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: linear-gradient(180deg, rgba(26,30,37,.98), rgba(20,22,27,.98));
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 16px 34px rgba(0,0,0,.30);
  z-index: 30;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.dfMenuPanel.isOpen{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dfMenuItem{
  width:100%;
  border:1px solid transparent;
  background: transparent;
  color: var(--fg);
  border-radius: 10px;
  padding: 10px 12px;
  text-align:left;
  font-size: 13px;
}
.dfMenuItem:hover,
.dfMenuItem:focus-visible{
  outline:none;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

@media (prefers-reduced-motion: reduce){
  .dfMenuBtn span,
  .dfMenuPanel{ transition:none !important; }
}

.dfStepHidden{
  display:none !important;
}

.dfStepRevealIn{
  animation: dfStepRevealIn .24s ease-out both;
}

@keyframes dfStepRevealIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.uploadHelperWrap{
  margin-top: 10px;
}

.uploadHelperToggle{
  width: 100%;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--fg);
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}

.uploadHelperPanel{
  margin-top: 8px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(4px);
  padding: 0 12px;
  transition: max-height .24s ease, opacity .22s ease, transform .22s ease, padding .22s ease;
}

.uploadHelperPanel.isOpen{
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
  padding: 12px;
}

.uploadHelperLead{
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.35;
}

.uploadHelperList{
  margin: 0;
  padding-left: 18px;
  color: rgba(245,245,245,.82);
  font-size: 12px;
  line-height: 1.35;
}

.uploadHelperList li + li{
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce){
  .dfQuizCard,
  .dfCtas,
  .dfContinue{
    transition: none !important;
  }
  .dfShell,
  .dfPagerPeek,
  .dfPagerPeekInner{
    transition: none !important;
    animation: none !important;
  }
}



/* === DF nav + Deep Read accent restoration + own-result CTA cleanup (surgical patch) === */

/* Persistent top-right app nav (DF + Personal) */
.dfMenuBtn{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: 12px;
  z-index: 92;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.dfMenuPanel{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 54px);
  right: 12px;
  z-index: 91;
  min-width: 236px;
}
.dfMenuPanel .dfMenuItem:first-child{
  border-color: rgba(var(--primary-rgb),.18);
}
.dfMenuPanel .dfMenuItem:last-child{
  border-color: rgba(198,167,94,.14);
}
.dfMenuPanel .dfMenuItem:last-child:hover,
.dfMenuPanel .dfMenuItem:last-child:focus-visible{
  border-color: rgba(198,167,94,.26);
  background: rgba(198,167,94,.07);
}

/* Restore premium blue+gold accents in Deep Read (no layout changes) */
#resultsContainer.mode-critique .resultCard,
#resultsCard.mode-critique .resultCard{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
#resultsContainer.mode-critique .resultCardTitle,
#resultsCard.mode-critique .resultCardTitle{
  color: rgba(239,244,255,.98);
}
#resultsContainer.mode-critique .resultCardTitle::before,
#resultsCard.mode-critique .resultCardTitle::before{
  background: rgba(198,167,94,.78);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.10);
}

#resultsContainer.mode-critique .resultCard[data-card="scores"],
#resultsCard.mode-critique .resultCard[data-card="scores"]{
  border-color: rgba(198,167,94,.22);
  background:
    radial-gradient(120% 130% at 8% 8%, rgba(var(--primary-rgb),.10), rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 95% 100%, rgba(198,167,94,.06), rgba(0,0,0,0) 52%),
    rgba(255,255,255,.03);
}
#resultsContainer.mode-critique .resultCard[data-card="scores"] .resultCardTitle,
#resultsCard.mode-critique .resultCard[data-card="scores"] .resultCardTitle{
  color: rgba(198,167,94,.96);
}
#resultsContainer.mode-critique .scoreBars .scoreBDK,
#resultsCard.mode-critique .scoreBars .scoreBDK{
  color: rgba(229,237,255,.88);
}
#resultsContainer.mode-critique .scoreBars .scoreBDOverall,
#resultsCard.mode-critique .scoreBars .scoreBDOverall{
  border-top-color: rgba(var(--primary-rgb),.22);
  background: linear-gradient(90deg, rgba(var(--primary-rgb),.06), rgba(198,167,94,.03));
  border-radius: 10px;
  padding: 9px 10px 0;
  margin: 8px -2px 0;
}
#resultsContainer.mode-critique .scoreBars .scoreBDOverall .scoreBDK,
#resultsCard.mode-critique .scoreBars .scoreBDOverall .scoreBDK{
  color: rgba(239,244,255,.96);
  font-weight: 700;
}
#resultsContainer.mode-critique .scoreBars .scoreBDOverall .scoreBDV,
#resultsCard.mode-critique .scoreBars .scoreBDOverall .scoreBDV{
  color: rgba(198,167,94,.98);
}
#resultsContainer.mode-critique .scoreBars .scoreBar,
#resultsCard.mode-critique .scoreBars .scoreBar{
  background: rgba(9,16,28,.68);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
}
#resultsContainer.mode-critique .scoreBars .scoreBarFill,
#resultsCard.mode-critique .scoreBars .scoreBarFill{
  background: linear-gradient(90deg, rgba(182,149,80,.9), rgba(220,190,118,.99));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 12px rgba(198,167,94,.14);
}

#resultsContainer.mode-critique .scoreRowReframed,
#resultsCard.mode-critique .scoreRowReframed{
  border-color: rgba(198,167,94,.22);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(var(--primary-rgb),.10), rgba(0,0,0,0) 56%),
    radial-gradient(130% 120% at 100% 100%, rgba(198,167,94,.07), rgba(0,0,0,0) 52%),
    rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
#resultsContainer.mode-critique .scoreRowReframed .scoreCommLabel,
#resultsCard.mode-critique .scoreRowReframed .scoreCommLabel{
  color: rgba(198,167,94,.96);
}
#resultsContainer.mode-critique .scoreRowReframed .scoreMicrocopy,
#resultsCard.mode-critique .scoreRowReframed .scoreMicrocopy{
  color: rgba(229,237,255,.74);
}
/* Score helper links row (Deep Read only) */
#resultsContainer.mode-critique .scoreRowReframed .scoreLinkRow,
#resultsCard.mode-critique .scoreRowReframed .scoreLinkRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Fallback (in case mode-critique class is not applied consistently):
   scoreRowReframed only exists in Deep Read, so this remains safe. */
.scoreRowReframed .scoreLinkRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

#resultsContainer.mode-critique .scoreRowReframed .scoreLink,
#resultsCard.mode-critique .scoreRowReframed .scoreLink{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 0;
  color: rgba(228,237,255,.92);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  border-bottom: 1px solid rgba(var(--primary-rgb),.45);
}

.scoreRowReframed .scoreLink{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 0;
  color: rgba(228,237,255,.92);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  border-bottom: 1px solid rgba(var(--primary-rgb),.45);
}

/* Robust Deep Read accents for the actual card stack (cardsWrap can drift outside resultsCard).
   This keeps accents Deep Read-only without touching DF. */
#cardsWrap.critiqueAccents .resultCard{
  border-color: rgba(198,167,94,0.18);
}
#cardsWrap.critiqueAccents .resultCardTitle{
  position: relative;
}
#cardsWrap.critiqueAccents .resultCardTitle::before{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(198,167,94,0.65);
  margin-right: 8px;
  vertical-align: middle;
}
#cardsWrap.critiqueAccents .resultCard[data-card="scores"]{
  border-color: rgba(198,167,94,0.22);
  background: rgba(255,255,255,0.03);
}
#cardsWrap.critiqueAccents .resultCard[data-card="scores"] .resultCardTitle{
  color: rgba(198,167,94,0.96);
}
#cardsWrap.critiqueAccents .scoreBars .scoreBar{
  background: rgba(9,16,28,.64);
}
#cardsWrap.critiqueAccents .scoreBars .scoreBarFill{
  background: linear-gradient(90deg, rgba(182,149,80,.9), rgba(220,190,118,.99));
}
#cardsWrap.critiqueAccents .scoreBars .scoreBDOverall{
  border-top-color: rgba(198,167,94,0.20);
}

#resultsContainer.mode-critique .scoreRowReframed .scoreLink:hover,
#resultsCard.mode-critique .scoreRowReframed .scoreLink:hover{
  color: rgba(255,255,255,.98);
  border-bottom-color: rgba(198,167,94,.55);
}

#resultsContainer.mode-critique .scoreRowReframed .scoreLink:focus-visible,
#resultsCard.mode-critique .scoreRowReframed .scoreLink:focus-visible{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: 3px;
}

/* Deep Read follow-up area accents (keep structure intact) */
#resultsContainer.mode-critique #followups .h3,
#resultsCard.mode-critique #followups .h3{
  color: rgba(228,237,255,.97);
}
#resultsContainer.mode-critique #followups .h3::before,
#resultsCard.mode-critique #followups .h3::before{
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(198,167,94,.78);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.10);
  vertical-align: middle;
}
#resultsContainer.mode-critique #followups .followupMicro,
#resultsCard.mode-critique #followups .followupMicro{
  color: rgba(228,237,255,.78);
}
#resultsContainer.mode-critique #followups .followupMicro2,
#resultsCard.mode-critique #followups .followupMicro2{
  color: rgba(198,167,94,.78);
}

/* Own-result CTA cleanup: hide redundant DF gold CTA, promote Analyze Another */
body.df-own-result #dfEndAnalyzerRow{
  display: none !important;
}
body.df-own-result #analyzeAnotherBtn{
  background: linear-gradient(180deg, rgba(231,199,132,.98), rgba(188,148,79,.98)) !important;
  border-color: rgba(222,189,120,.44) !important;
  color: #16120a !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.42);
  font-weight: 700;
}
body.df-own-result #analyzeAnotherBtn:hover,
body.df-own-result #analyzeAnotherBtn:focus-visible{
  filter: brightness(1.03);
}
body.df-own-result #openHistoryBtn{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(245,245,245,.88);
}

/* Small mobile spacing safety so fixed menu does not crowd top content */
body.df-mode .top,
body.df-personal-route .top,
body.df-full-reveal .top{
  padding-right: 52px;
}
body.df-mode .top{
  padding-left: 0;
}


/* DF archive navigation (same-page, backward-first) */
.dfArchiveNav{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  gap: 8px;
  margin: 10px 0 10px;
  padding: 10px 10px 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.015));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(0,0,0,.14);
}
.dfArchiveState{
  order: 10;
  flex: 1 0 100%;
  min-width: 0;
  width: max-content;
  margin: 1px auto 0;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.022);
  text-align: center;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245,245,245,.58);
}
.dfArchiveState::before{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(216,183,116,.86);
  box-shadow: 0 0 10px rgba(216,183,116,.26);
  flex: 0 0 auto;
}
.dfArchiveBtn{
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  color: rgba(245,245,245,.9);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .01em;
  touch-action: manipulation;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 16px rgba(0,0,0,.14);
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    opacity .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}
.dfArchiveBtn:hover,
.dfArchiveBtn:focus-visible{
  outline: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 20px rgba(0,0,0,.16);
}
.dfArchiveBtn:active{
  transform: translateY(0);
}
.dfArchiveBtn[disabled]{
  opacity: .42;
  box-shadow: none;
}
.dfArchiveBtn.isLocked{
  border-color: rgba(216,183,116,.22);
  background:
    linear-gradient(180deg, rgba(216,183,116,.08), rgba(216,183,116,.03));
  color: rgba(236,204,136,.94);
}
.dfArchiveTodayBtn{
  color: rgba(245,245,245,.78);
  border-color: rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(38,92,150,.12), rgba(255,255,255,.018));
}
.dfArchiveTodayBtn:hover,
.dfArchiveTodayBtn:focus-visible{
  color: rgba(245,245,245,.94);
  border-color: rgba(80,140,214,.24);
}
body.df-mode .dfPagerViewport{
  touch-action: pan-y;
}
body.df-mode.df-full-reveal .dfArchiveNav{
  opacity: .82;
}
@media (max-width: 520px){
  .dfArchiveNav{
    gap: 6px;
    padding: 8px 8px 7px;
    border-radius: 14px;
  }
  .dfArchiveBtn{
    min-height: 32px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .dfArchiveTodayBtn{ font-size: 10px; }
  .dfArchiveState{
    font-size: 9px;
    padding: 4px 9px;
    letter-spacing: .08em;
  }
}


#scoreHelpModal .modal-inner{
  max-width: 640px;
}
#scoreHelpModal .scoreHelpContent{
  max-width: 600px;
  margin: 0 auto;
}
#scoreHelpModal .scoreHelpScale li{
  margin: 8px 0;
}
#scoreHelpModal .aboutText{
  line-height: 1.65;
  margin: 0 0 12px;
  opacity: .92;
}
#scoreHelpModal .aboutClosing{
  text-align: center;
}

/* AYO entry-shell polish (upload / analyze / privacy only) */
#uploadCard,
#analyzeCard{
  position: relative;
  overflow: hidden;
  border-color: rgba(var(--primary-rgb),.16);
  background:
    radial-gradient(120% 82% at 14% 0%, rgba(var(--primary-rgb),.10), transparent 56%),
    radial-gradient(110% 92% at 100% 100%, rgba(198,167,94,.028), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.034));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 14px 34px rgba(0,0,0,.24);
}

#uploadCard::before,
#analyzeCard::before,
#privacyCard::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:1px;
  background: linear-gradient(90deg,
    rgba(var(--primary-rgb),0),
    rgba(var(--primary-rgb),.34) 38%,
    rgba(198,167,94,.16) 50%,
    rgba(var(--primary-rgb),.20) 62%,
    rgba(var(--primary-rgb),0));
  pointer-events:none;
}

#uploadCard .h2,
#analyzeCard .h2,
#privacyCard .h2{
  color: rgba(236,242,255,.9);
  letter-spacing: .07em;
}

#uploadCard .h2::after,
#analyzeCard .h2::after,
#privacyCard .h2::after{
  content:"";
  display:block;
  width:44px;
  height:1px;
  margin-top:7px;
  background: linear-gradient(90deg, rgba(var(--primary-rgb),.42), rgba(198,167,94,.24), rgba(var(--primary-rgb),0));
}

#imageInput{
  border-color: rgba(var(--primary-rgb),.24);
  background: linear-gradient(180deg, rgba(var(--primary-rgb),.07), rgba(255,255,255,.014));
}

#imageInput:focus-visible{
  outline: 2px solid rgba(var(--primary-rgb),.34);
  outline-offset: 2px;
}

#preview{
  border-color: rgba(var(--primary-rgb),.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.uploadHelperToggle{
  border-color: rgba(var(--primary-rgb),.16);
  background: linear-gradient(180deg, rgba(var(--primary-rgb),.055), rgba(255,255,255,.02));
}

.uploadHelperPanel{
  border-color: rgba(var(--primary-rgb),.12);
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb),.05), rgba(255,255,255,.022));
}

.uploadHelperLead{
  color: rgba(231,239,255,.9);
}

.uploadHelperList li::marker,
.privacy-list li::marker{
  color: rgba(198,167,94,.56);
  opacity: 1;
}

#analyzeCard .focusLabel{
  color: rgba(226,235,255,.8);
  opacity: .98;
  font-weight: 600;
}

#analyzeCard .focusMicro{
  color: rgba(245,245,245,.74);
  opacity: 1;
}

#analyzeCard .stickyAnalyze{
  background:
    linear-gradient(180deg,
      rgba(var(--primary-rgb),0),
      rgba(var(--primary-rgb),.06) 22%,
      rgba(18,18,18,.88) 44%,
      rgba(18,18,18,1) 100%);
}

#analyzeBtn{
  border-color: rgba(var(--primary-rgb),.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 22px rgba(0,0,0,.22),
    0 0 0 1px rgba(198,167,94,.035);
}

#privacyCard{
  position: relative;
  border-color: rgba(var(--primary-rgb),.14);
  background:
    radial-gradient(120% 100% at 8% 0%, rgba(var(--primary-rgb),.08), transparent 58%),
    radial-gradient(120% 120% at 100% 100%, rgba(198,167,94,.024), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.022));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  opacity: .94;
}

#privacyCard .privacy-list{
  color: rgba(236,240,248,.78);
}


/* =====================================
   Paywall redesign patch (mobile-first)
   ===================================== */
.paywall{
  padding: 12px;
  align-items: flex-end;
}

.paywall-inner{
  position: relative;
  width: min(100%, 430px);
  max-width: 430px;
  max-height: min(92dvh, 760px);
  overflow: hidden;
  padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
  border-radius: 24px;
  border: 1px solid rgba(24, 43, 71, 0.12);
  background: linear-gradient(180deg, #f6f0e4 0%, #efe7d9 100%);
  color: #13243b;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.pw-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(19, 36, 59, 0.08);
  color: #13243b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pw-head{
  padding-right: 42px;
  margin-bottom: 12px;
}

.paywall-title{
  margin: 0 0 4px;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #13243b;
}

.paywall-sub{
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(19, 36, 59, 0.78);
}

.pw-billing{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(19, 36, 59, 0.06);
}

.pw-billing-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(19, 36, 59, 0.72);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.pw-billing-btn.is-active{
  background: #13243b;
  color: #f7f3eb;
  box-shadow: 0 8px 20px rgba(19, 36, 59, 0.16);
}

.pw-save{
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(199, 152, 63, 0.16);
  color: #c08a2d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.pw-billing-btn.is-active .pw-save{
  background: rgba(243, 206, 131, 0.22);
  color: #f3cf86;
}

.pw-plans{
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.pw-plan-card{
  width: 100%;
  border: 1px solid rgba(19, 36, 59, 0.10);
  border-radius: 18px;
  padding: 11px 12px 12px;
  background: rgba(255, 255, 255, 0.58);
  color: #13243b;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.pw-plan-card.is-selected{
  border-color: rgba(184, 137, 44, 0.48);
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(250,241,219,0.92) 100%);
  box-shadow: 0 12px 28px rgba(19, 36, 59, 0.10), inset 0 0 0 1px rgba(184, 137, 44, 0.12);
}

.pw-plan-topline{
  min-height: 22px;
  margin-bottom: 6px;
}

.pw-plan-topline-empty{
  opacity: 0;
}

.pw-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(184, 137, 44, 0.14);
  color: #9b6a12;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pw-plan-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pw-plan-name{
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pw-usage{
  font-size: 11px;
  line-height: 1.35;
  color: rgba(19, 36, 59, 0.66);
}

.pw-price{
  flex-shrink: 0;
  font-size: 21px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #13243b;
}

.pw-price span{
  font-size: 11px;
  font-weight: 700;
  color: rgba(19, 36, 59, 0.66);
}

.pw-benefits{
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.pw-benefits li{
  position: relative;
  padding-left: 13px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(19, 36, 59, 0.82);
}

.pw-benefits li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #b8892c;
  font-weight: 800;
}

.pw-benefits-short{
  gap: 5px;
}

.pw-primary{
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 15px;
  background: #13243b;
  color: #f7f3eb;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(19, 36, 59, 0.18);
}

.pw-free-link{
  width: 100%;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: rgba(19, 36, 59, 0.62);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pw-trust{
  margin-top: 10px;
  display: grid;
  gap: 2px;
  text-align: center;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(19, 36, 59, 0.56);
}

@media (max-height: 740px) {
  .paywall-inner{
    padding-top: 14px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .pw-head,
  .pw-billing,
  .pw-plans{
    margin-bottom: 10px;
  }

  .pw-plan-card{
    padding: 10px 11px 11px;
  }

  .pw-benefits{
    gap: 3px;
    margin-top: 7px;
  }

  .pw-benefits li,
  .pw-free-link{
    font-size: 11px;
  }

  .pw-trust{
    font-size: 9px;
  }
}


/* ==== Field Exercise UI polish (A6) ==== */
.nextShotBlock,
.nextShotCapstone{
  margin-top: 18px;
  padding: 18px 16px 16px;
  border-radius: 20px;
  border: 1px solid rgba(198,167,94,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    radial-gradient(125% 170% at 50% 0%, rgba(198,167,94,.08), rgba(0,0,0,0) 62%),
    rgba(255,255,255,.022);
  box-shadow: 0 18px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.028);
}

.nextShotHeader{ margin-bottom: 8px; }

.nextShotMicro{
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.38;
  font-weight: 560;
}

.nextShotAccess{
  margin-bottom: 14px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(245,245,245,.62);
}

.nextShotPreview{
  gap: 12px;
  margin: 0 0 14px;
  padding: 13px 13px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.018));
}

.nextShotFieldRowFocus{ gap: 5px; }
.nextShotFieldRowMission{ gap: 6px; }

.nextShotFieldLabel{
  font-size: 10px;
  letter-spacing: .12em;
}

.nextShotFocusValue{
  font-size: 15px;
  line-height: 1.22;
  font-weight: 720;
  color: rgba(255,255,255,.96);
}

.nextShotFieldPreview{
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(255,255,255,.84);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nextShotFieldHints{ display:none; }

.nextShotRevealBtn{
  margin: 10px 0 0;
}

.ynsModalCard::before{
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(var(--primary-rgb),.12), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(198,167,94,.05), rgba(0,0,0,0) 38%);
}

.ynsSubtitle{
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.36;
}

.ynsSection{ margin: 0 0 16px; }

.ynsFocusSection{
  padding: 13px 13px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
}

.ynsFocusValue{
  font-size: 19px;
  line-height: 1.14;
  font-weight: 780;
}

.ynsDoThisSection{ margin-bottom: 18px; }

.ynsChallengeHero{
  padding: 15px 15px;
  border-radius: 18px;
  border: 1px solid rgba(var(--primary-rgb),.24);
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb),.11), rgba(255,255,255,.025));
  box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 0 0 2px rgba(var(--primary-rgb),.08);
  font-size: 16px;
  line-height: 1.42;
  font-weight: 730;
}

.ynsConstraintsSection{
  padding: 13px 13px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.024);
}

.ynsConstraintList{ gap: 10px; }

.ynsConstraintItem{
  padding-left: 18px;
  font-size: 12.75px;
  line-height: 1.42;
}

.ynsSuccess{
  padding: 13px 13px 12px;
  border-radius: 16px;
  border: 1px solid rgba(198,167,94,.16);
  background: linear-gradient(180deg, rgba(198,167,94,.08), rgba(255,255,255,.015));
}

.ynsSuccessBody,
.ynsSuccess .ynsSectionBody{
  color: rgba(255,255,255,.92);
  font-size: 13.25px;
  line-height: 1.42;
}

.ynsNudge{ display:none !important; }

.ynsActions{
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.ynsActionsSolo{ justify-content: stretch; }

.ynsCloseBtnSolo{
  width: 100%;
  flex: 1 1 100%;
}

.ynsSaveBtn{ display:none !important; }

@media (max-width: 720px){
  .nextShotBlock,
  .nextShotCapstone{ padding: 16px 14px 14px; }
  .nextShotFieldPreview{ font-size: 13px; }
  .ynsSection{ margin-bottom: 14px; }
  .ynsFocusValue{ font-size: 18px; }
  .ynsChallengeHero{ font-size: 15.5px; padding: 14px 14px; }
}

@media (max-height: 760px){
  .ynsActions{
    position: sticky;
    bottom: 0;
    margin: 12px -2px -2px;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(18,18,22,0), rgba(18,18,22,.92) 26%, rgba(18,18,22,.98));
  }
}


/* ==== A8 FE + DF editorial learning bridge ==== */
.nextShotHeader{
  margin-bottom: 9px;
}
.nextShotMicro{
  color: rgba(255,255,255,.94);
}
.nextShotPreview{
  border-color: rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.016));
}
.nextShotFieldRowMission{
  padding-top: 2px;
}
.nextShotFieldPreview{
  color: rgba(255,255,255,.86);
}
.nextShotRevealBtn{
  min-height: 48px;
  margin-top: 8px;
}
.ynsFocusSection{
  margin-bottom: 18px;
}
.ynsSectionLabel{
  margin-bottom: 7px;
}
.ynsConstraintsSection,
.ynsSuccess{
  background-clip: padding-box;
}
.feDebugWrap{
  margin-top: 8px;
  opacity: .9;
}
.feDebugToggle{
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.022);
}

.dfSubtitle{
  margin-bottom: 12px;
  color: rgba(245,245,245,.8);
}
.dfLessonWrap{
  margin: 0 0 14px;
  padding: 12px 13px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.dfLessonLabel{
  margin-bottom: 5px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(198,167,94,.86);
}
.dfLessonValue{
  font-size: 15px;
  line-height: 1.24;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}
.dfLessonBridge{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.38;
  color: rgba(245,245,245,.68);
}
@media (max-width: 720px){
  .dfLessonWrap{
    margin-bottom: 12px;
    padding: 11px 12px 10px;
  }
  .dfLessonValue{
    font-size: 14px;
  }
  .dfLessonBridge{
    font-size: 11.5px;
  }
}


/* ==== A10 FE integration + loading state ==== */
.nextShotBlock.is-loading,
.nextShotCapstone.is-loading{
  min-height: 208px;
}

.nextShotBlock.is-loading .nextShotPreview,
.nextShotCapstone.is-loading .nextShotPreview{
  min-height: 96px;
}

.nextShotBlock.is-loading .nextShotFocusValue,
.nextShotCapstone.is-loading .nextShotFocusValue,
.nextShotBlock.is-loading .nextShotFieldPreview,
.nextShotCapstone.is-loading .nextShotFieldPreview{
  color: transparent !important;
  position: relative;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.16), rgba(255,255,255,.08));
  background-size: 220% 100%;
  animation: feSkeletonShift 1.7s ease-in-out infinite;
}

.nextShotBlock.is-loading .nextShotFocusValue,
.nextShotCapstone.is-loading .nextShotFocusValue{
  min-height: 22px;
  width: min(62%, 240px);
}

.nextShotBlock.is-loading .nextShotFieldPreview,
.nextShotCapstone.is-loading .nextShotFieldPreview{
  min-height: 18px;
  width: 100%;
}

.nextShotBlock.is-loading .nextShotRevealBtn,
.nextShotCapstone.is-loading .nextShotRevealBtn{
  opacity: .72;
  filter: saturate(.86);
}

.feDebugWrap{
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: 10px;
}

.feDebugPanel{
  background: rgba(255,255,255,.018);
}

.dfLessonWrap{
  margin-bottom: 16px;
}

.dfLessonLabel{
  color: rgba(198,167,94,.88);
}

.dfLessonBridge{
  max-width: 44ch;
}

@keyframes feSkeletonShift {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .nextShotBlock.is-loading .nextShotFocusValue,
  .nextShotCapstone.is-loading .nextShotFocusValue,
  .nextShotBlock.is-loading .nextShotFieldPreview,
  .nextShotCapstone.is-loading .nextShotFieldPreview{
    animation: none;
    background: rgba(255,255,255,.11);
  }
}


/* ==== B Visual Mission UI replacement ==== */
.nextShotBlock,
.nextShotCapstone{
  position: relative;
}

.nextShotHeader{
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nextShotFieldRowVerb{
  gap: 6px;
}

.nextShotFieldRowVerb .nextShotFieldLabel{
  color: rgba(198,167,94,.9);
}

.nextShotFocusValue{
  font-size: 16px;
  letter-spacing: -.01em;
}

.nextShotFieldPreview{
  line-height: 1.34;
}


.nextShotReasonWrap{
  margin: 10px 0 2px;
  padding: 10px 11px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.055);
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.012));
}

.nextShotReasonLabel{
  margin-bottom: 5px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(198,167,94,.82);
}

.nextShotReason{
  font-size: 12.75px;
  line-height: 1.42;
  color: rgba(245,245,245,.74);
}

.vmPanel{
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.vmClose{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* Header */
.vmHeader{
  padding-right: 36px;
}

.vmHeaderEyebrow{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(198,167,94,.8);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.vmHeaderSub{
  font-size: 13px;
  color: rgba(245,245,245,.55);
  line-height: 1.4;
}

/* Mission block: verb pill + task */
.vmMissionBlock{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px;
  border-radius: 18px;
  border: 1px solid rgba(198,167,94,.2);
  border-left: 3px solid rgba(198,167,94,.55);
  background: linear-gradient(160deg, rgba(198,167,94,.08), rgba(255,255,255,.015));
}

.vmVerbPill{
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: rgba(198,167,94,.12);
  border: 1px solid rgba(198,167,94,.24);
  color: rgba(198,167,94,.95);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vmVerbPill::before{
  content: attr(data-icon);
  font-size: 12px;
  line-height: 1;
  opacity: .85;
}

.vmMissionTask{
  font-size: clamp(16px, 3.5vw, 19px);
  font-weight: 600;
  line-height: 1.38;
  color: rgba(255,255,255,.97);
  letter-spacing: -.02em;
}

/* Reason row */
.vmReasonRow{
  padding: 12px 14px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.018);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vmReasonText{
  font-size: 13px;
  color: rgba(245,245,245,.7);
  line-height: 1.48;
  font-style: italic;
}

.vmReasonDisclaimer{
  font-size: 10.5px;
  color: rgba(245,245,245,.28);
  line-height: 1.4;
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: 8px;
  letter-spacing: .01em;
}

/* Generic section */
.vmSection{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.022);
}

.vmSectionLabel{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(245,245,245,.45);
}

/* Danger */
.vmDangerRow{
  border-color: rgba(200,80,60,.22);
  background: rgba(200,60,40,.04);
}

.vmDangerLabel{
  color: rgba(210,110,90,.85);
}

.vmDangerText{
  font-size: 13px;
  color: rgba(245,245,245,.85);
  line-height: 1.44;
}

/* Success */
.vmSuccessRow{
  border-color: rgba(100,160,110,.22);
  background: rgba(80,140,90,.035);
}

.vmSuccessLabel{
  color: rgba(130,175,135,.9);
}

.vmSuccessText{
  font-size: 13px;
  color: rgba(245,245,245,.9);
  line-height: 1.44;
  font-weight: 500;
}

/* Push further */
.vmPushRow{
  border-color: rgba(255,255,255,.055);
  background: rgba(255,255,255,.015);
}

.vmPushText{
  font-size: 12.5px;
  color: rgba(245,245,245,.7);
  line-height: 1.44;
}

/* Step reveal animation */
.vmStepSection{
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  max-height: 0;
  pointer-events: none;
  transition:
    max-height 420ms cubic-bezier(.22,.61,.36,1),
    opacity 260ms ease,
    transform 260ms ease,
    margin-top 260ms ease;
}

.vmStepSection.is-collapsed{
  opacity: 1;
  transform: translateY(0);
  max-height: 44px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.vmStepSection.is-collapsed .vmSectionLabel{
  text-align: center;
  width: 100%;
}

.vmStepSection.is-collapsed > *:not(.vmSectionLabel){
  display: none;
}

.vmStepSection.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Checklist */
.vmPromptList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.vmPromptItem{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}

.vmPromptNumber{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  border: 1px solid rgba(198,167,94,.32);
  background: rgba(198,167,94,.14);
  color: rgba(255,255,255,.9);
  font-size: 10.5px;
  font-weight: 700;
}

.vmPromptText{
  font-size: 13px;
  line-height: 1.44;
  color: rgba(255,255,255,.88);
}

/* Actions */
.vmActions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.vmActionBtn{
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(198,167,94,.9), rgba(170,138,72,.9));
  border: none;
  color: rgba(20,18,14,.95);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: opacity .15s ease;
}

.vmActionBtn:hover{ opacity: .88; }
.vmActionBtn:active{ opacity: .75; }

.vmActionBtn.hidden,
.vmCloseBtn.hidden{ display: none; }

.vmCloseBtn{
  width: 100%;
  padding: 12px 20px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.vmCloseBtn:hover{
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.85);
}


.dfLessonWrap{
  position: relative;
}

.dfLessonBridge{
  color: rgba(245,245,245,.72);
}

@media (max-width: 720px){
  .vmVerbValue{
    font-size: 22px;
  }
  .vmSignalHunt{
    font-size: 15px;
  }
  .vmPromptItem{
    grid-template-columns: 22px 1fr;
    gap: 10px;
    padding: 11px 11px;
  }
  .vmPromptText,
  .vmDangerBody,
  .vmPushBody,
  .vmReasonBody,
  .ynsSuccessBody{
    font-size: 12.5px;
  }
  .nextShotReason{
    font-size: 12px;
  }
}

/* === NAV BAR ============================================================ */
.nav-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 28px;
  background: rgba(15, 15, 17, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-bar__brand { font-family: Georgia, "Times New Roman", serif; font-size: 18px; letter-spacing: 0.5px; color: #f5f5f0; text-decoration: none; }
.nav-bar__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-bar__links a, .nav-bar__links button {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font: inherit; font-size: 14px; letter-spacing: 0.4px;
  color: rgba(245, 245, 240, 0.72); text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
  border-bottom: 1px solid transparent;
}
.nav-bar__links a:hover, .nav-bar__links button:hover { color: #f5f5f0; }
.nav-bar__links [aria-current="page"], .nav-bar__links .is-active {
  color: #f5f5f0; border-bottom-color: #c9a227;
}
@media (max-width: 600px) {
  .nav-bar { padding: 10px 16px; gap: 12px; }
  .nav-bar__links { gap: 16px; }
  .nav-bar__links a, .nav-bar__links button { font-size: 13px; }
  .nav-bar__brand { font-size: 16px; }
}

/* === USER PILL ========================================================== */
#userPill { position: relative; display: inline-block; }
.user-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f5f5f0; font-size: 13px; letter-spacing: 0.3px;
  cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease;
}
.user-pill:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); }
.user-pill--anon { color: #c9a227; border-color: rgba(201, 162, 39, 0.45); }
.user-pill--anon:hover { background: rgba(201, 162, 39, 0.1); }
.user-pill__chev { font-size: 10px; opacity: 0.7; transition: transform 0.2s ease; }
#userPill.is-open .user-pill__chev { transform: rotate(180deg); }
.user-pill__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px;
  padding: 12px; border-radius: 12px;
  background: #1a1a1d; border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  transform-origin: top right; animation: userPillMenuIn 0.16s ease-out;
}
@keyframes userPillMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.user-pill__email { font-size: 13px; color: #f5f5f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-pill__plan { font-size: 11px; color: rgba(245, 245, 240, 0.55); margin: 2px 0 10px; letter-spacing: 0.4px; text-transform: uppercase; }
.user-pill__item {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 8px 10px; margin-top: 2px;
  border-radius: 6px; color: #f5f5f0; font: inherit; font-size: 13px; cursor: pointer;
  transition: background 0.14s ease;
}
.user-pill__item:hover { background: rgba(255, 255, 255, 0.06); }
.user-pill__item--danger { color: #e57373; }
.user-pill__item--danger:hover { background: rgba(229, 115, 115, 0.1); }

/* === MAGIC LINK MODAL =================================================== */
#magicLinkModal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0; transition: opacity 0.22s ease;
  padding: 20px;
}
#magicLinkModal.is-open { opacity: 1; }
#magicLinkModal.hidden { display: none !important; }
#magicLinkModal .modal-content {
  background: #161618; color: #f5f5f0;
  width: 100%; max-width: 420px;
  padding: 32px 28px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(12px); opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
#magicLinkModal.is-open .modal-content { transform: translateY(0); opacity: 1; }
#magicLinkModal .modal-context-message {
  margin: 0 0 16px; padding: 10px 12px;
  background: rgba(201, 162, 39, 0.1);
  border-left: 2px solid #c9a227; border-radius: 4px;
  font-size: 13px; color: rgba(245, 245, 240, 0.85); line-height: 1.5;
}
#magicLinkModal h2 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 22px; }
#magicLinkModal p  { font-size: 14px; color: rgba(245, 245, 240, 0.7); line-height: 1.55; }
#magicLinkModal input[type="email"] {
  width: 100%; box-sizing: border-box;
  margin-top: 14px; padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px;
  color: #f5f5f0; font-size: 14px;
}
#magicLinkModal input[type="email"]:focus { outline: none; border-color: #c9a227; }
#magicLinkModal button[type="submit"], #magicLinkModal #authSubmitBtn {
  width: 100%; margin-top: 12px; padding: 12px;
  background: #c9a227; color: #161618; border: 0; border-radius: 8px;
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background 0.18s ease;
}
#magicLinkModal button[type="submit"]:hover, #magicLinkModal #authSubmitBtn:hover { background: #d6b13a; }

/* === HERO REWRITE ======================================================= */
.hero-v2 { padding: 80px 28px 60px; max-width: 880px; margin: 0 auto; text-align: left; }
.hero-v2__line {
  display: block; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 6vw, 56px); line-height: 1.12; color: #f5f5f0;
  opacity: 0; transform: translateY(14px);
  animation: heroLineIn 0.7s ease-out forwards;
}
.hero-v2__line:nth-child(1) { animation-delay: 0.05s; }
.hero-v2__line:nth-child(2) { animation-delay: 0.25s; color: rgba(245, 245, 240, 0.78); }
.hero-v2__line:nth-child(3) { animation-delay: 0.45s; color: #c9a227; font-style: italic; }
@keyframes heroLineIn { to { opacity: 1; transform: translateY(0); } }
#heroTodayCta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 36px; padding: 10px 0;
  background: none; border: 0; border-bottom: 1px solid rgba(245, 245, 240, 0.4);
  color: #f5f5f0; font-size: 14px; letter-spacing: 0.6px; cursor: pointer;
  opacity: 0; animation: heroLineIn 0.7s 0.7s ease-out forwards;
  transition: border-color 0.2s ease, color 0.2s ease;
}
#heroTodayCta:hover { color: #c9a227; border-bottom-color: #c9a227; }
#heroTodayCta .arrow { transition: transform 0.2s ease; }
#heroTodayCta:hover .arrow { transform: translateY(2px); }