/* ===================================================================
   THE WEEKLY GLOW CHECK — hair interactive
   Premium editorial beauty aesthetic. Mobile-first, self-contained.
   =================================================================== */

:root{
  /* Palette — warm ivory, soft blush, muted clay, dark espresso, muted rose accent */
  --ivory:        #FBF6EF;
  --ivory-2:      #F6EEE3;
  --surface:      #FFFDFA;
  --surface-soft: #F3EADF;
  --blush:        #F5E4DD;
  --clay:         #C9A896;
  --espresso:     #3A2C25;
  --espresso-2:   #5A4A40;
  --muted:        #7A6C62;
  --accent:       #A6685E;   /* muted rose — restrained */
  --accent-deep:  #8E534B;
  --sage:         #7E8A6E;
  --line:         #E7DACB;
  --line-soft:    #EFE5D8;
  --focus:        #4A5D8A;

  --radius:      18px;
  --radius-sm:   12px;
  --radius-lg:   26px;
  --shadow-1: 0 1px 2px rgba(58,44,37,.05), 0 4px 14px rgba(58,44,37,.06);
  --shadow-2: 0 2px 6px rgba(58,44,37,.06), 0 12px 32px rgba(58,44,37,.10);

  --font: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 640px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--espresso);
  font-family:var(--font-ui);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1,h2,h3{ font-family:var(--font); font-weight:600; line-height:1.18; letter-spacing:-.01em; margin:0; }
p{ margin:0; }
button{ font-family:inherit; }

/* Warm ambient background wash — subtle, no heavy gradients */
.app-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(245,228,221,.55), transparent 70%),
    radial-gradient(55% 40% at 100% 100%, rgba(201,168,150,.16), transparent 72%),
    var(--ivory);
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px 40px; min-height:100dvh; display:flex; flex-direction:column; }

/* ---- Brand bar (small, discreet) ---- */
.brand{
  display:flex; align-items:center; gap:9px;
  padding:18px 2px 12px;
}
.brand svg{ display:block; width:26px; height:26px; color:var(--accent); flex:none; }
.brand .mark{
  font-family:var(--font); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--espresso-2); font-weight:600;
}
.unsubscribe-notice{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--sage);
  border-radius:var(--radius); padding:16px; margin:0 0 18px; box-shadow:var(--shadow-1);
}
.unsubscribe-notice[hidden]{ display:none; }
.unsubscribe-notice h2{ font-size:20px; margin-bottom:6px; }
.unsubscribe-notice p{ color:var(--espresso-2); font-size:14px; }
.unsubscribe-notice .unsubscribe-secondary{ color:var(--muted); margin-top:6px; }
.unsubscribe-notice .btn{ min-height:46px; margin-top:12px; font-size:15px; }
.preferences-link{ text-decoration:none; }

/* ---- Screens ---- */
.screen{ display:none; animation:fade .32s ease both; flex:1 0 auto; }
.screen.is-active{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* ---- Intro ---- */
.intro-label{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-deep);
  font-weight:700; margin-bottom:14px;
}
.intro h1{ font-size:clamp(29px,8.5vw,40px); margin-bottom:14px; }
.intro .lead{ font-size:17px; color:var(--espresso-2); margin-bottom:14px; }
.trust{
  font-size:15px; color:var(--muted); background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--clay);
  border-radius:var(--radius-sm); padding:12px 14px; margin:18px 0 16px;
}
.time-line{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin-bottom:20px; font-weight:600; }
.time-line svg{ width:16px; height:16px; }

.hero-accent{ width:100%; height:96px; margin:2px 0 18px; display:block; object-fit:cover; border-radius:var(--radius-sm); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:56px; padding:15px 22px;
  background:var(--accent); color:#fff; border:none; border-radius:var(--radius);
  font-size:17px; font-weight:700; letter-spacing:.01em; cursor:pointer;
  box-shadow:var(--shadow-1); transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
  font-family:var(--font-ui);
}
.btn:hover{ background:var(--accent-deep); }
.btn:active{ transform:translateY(1px) scale(.995); }
.btn.secondary{
  background:var(--surface); color:var(--espresso); border:1.5px solid var(--line);
  box-shadow:none;
}
.btn.secondary:hover{ background:var(--surface-soft); }
.btn.ghost{
  background:transparent; color:var(--accent-deep); border:1.5px solid var(--clay);
  box-shadow:none;
}
.btn.ghost:hover{ background:var(--blush); }
.btn svg{ width:19px; height:19px; }

.micro{ font-size:13.5px; color:var(--muted); text-align:center; margin-top:12px; }
.intro-result-note{ margin-bottom:0; }
.disclosure-sm{
  font-size:12.5px; color:var(--muted); line-height:1.5;
  margin-top:26px; padding-top:16px; border-top:1px solid var(--line-soft);
}

/* ---- Progress ---- */
.qtop{ padding-top:6px; }
.progress-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.progress-text{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-deep); }
.progress-track{ height:6px; background:var(--surface-soft); border-radius:99px; overflow:hidden; border:1px solid var(--line-soft); }
.progress-fill{ height:100%; background:var(--accent); border-radius:99px; width:0; transition:width .45s cubic-bezier(.4,0,.2,1); }

.q-head-with-motif{ display:flex; align-items:flex-start; gap:14px; margin:24px 0 4px; }
.q-head{ flex:1; margin:0; }
.q-head h2{ font-size:clamp(22px,6vw,27px); }
.q-sub{ font-size:15px; color:var(--muted); margin-top:9px; }
.question-motif{
  flex:none; width:54px; height:54px; display:flex; align-items:center; justify-content:center;
  border-radius:16px; background:var(--blush); color:var(--accent-deep); border:1px solid var(--line);
}
.question-motif svg{ width:31px; height:31px; }

/* ---- Answer cards ---- */
.answers{ margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.answer{
  position:relative; display:flex; align-items:center; gap:14px;
  width:100%; min-height:60px; padding:14px 16px; text-align:left;
  background:var(--surface); color:var(--espresso);
  border:1.5px solid var(--line); border-radius:var(--radius);
  font-size:16.5px; font-weight:500; line-height:1.35; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease;
  font-family:var(--font-ui);
}
.answer:hover{ border-color:var(--clay); background:var(--surface-soft); }
.answer:active{ transform:scale(.995); }
.answer .dot{
  flex:none; width:24px; height:24px; border-radius:50%;
  border:2px solid var(--clay); background:transparent; position:relative; transition:all .18s ease;
}
.answer .dot::after{
  content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; transform:scale(0); transition:transform .18s ease;
}
.answer .txt{ flex:1; }
.answer.selected{
  border-color:var(--accent); background:var(--blush); box-shadow:0 0 0 3px rgba(166,104,94,.14);
}
.answer.selected .dot{ background:var(--accent); border-color:var(--accent); }
.answer.selected .dot::after{ transform:scale(1); }
.answer .check{ display:none; position:absolute; right:15px; color:var(--accent); width:20px; height:20px; }

.nav-row{ margin-top:22px; display:flex; gap:12px; }
.nav-row .btn{ width:auto; flex:1; }
.back-btn{ max-width:120px; }

/* ---- Transition screen ---- */
.transition{ text-align:center; padding:20vh 10px; }
.spinner{
  width:44px; height:44px; margin:0 auto 22px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent); animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.transition h2{ font-size:23px; margin-bottom:8px; }
.transition p{ color:var(--muted); font-size:15px; }

/* ---- Result ---- */
.result-eyebrow{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin:8px 0 8px; }
.result-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px 22px; box-shadow:var(--shadow-2); margin-bottom:20px; position:relative; overflow:hidden;
}
.result-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--accent),var(--clay));
}
.result-card h1{ font-size:clamp(28px,8vw,38px); margin-bottom:8px; }
.result-image{
  float:right; width:104px; height:104px; object-fit:cover; border-radius:18px;
  margin:2px 0 12px 16px; border:1px solid var(--line); background:var(--surface-soft);
}
.result-subtitle{ font-size:17px; color:var(--espresso-2); font-style:italic; margin-bottom:16px; }
.result-support{ font-size:14px; color:var(--muted); background:var(--surface-soft); border-radius:var(--radius-sm); padding:11px 14px; }

.sec{ margin-bottom:22px; }
.sec-title{
  font-family:var(--font); font-size:20px; font-weight:600; margin-bottom:12px; color:var(--espresso);
  display:flex; align-items:center; gap:9px;
}
.sec-title svg{ width:20px; height:20px; color:var(--accent); flex:none; }
.sec p{ color:var(--espresso-2); font-size:16px; margin-bottom:12px; }
.sec p:last-child{ margin-bottom:0; }

.steps{ display:flex; flex-direction:column; gap:14px; }
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 16px 16px; box-shadow:var(--shadow-1); position:relative;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700; font-size:15px; margin-bottom:9px; font-family:var(--font-ui);
}
.step h3{ font-size:17px; margin-bottom:6px; }
.step p{ font-size:15px; color:var(--espresso-2); margin:0; }

.callout{
  border-radius:var(--radius); padding:16px 16px; border:1px solid var(--line);
}
.callout.avoid{ background:#F7ECEA; border-color:#EAD3CF; }
.callout.today{ background:#EEF1EA; border-color:#DBE1D0; }
.callout .c-label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:7px;
  display:flex; align-items:center; gap:7px;
}
.callout.avoid .c-label{ color:var(--accent-deep); }
.callout.today .c-label{ color:var(--sage); }
.callout .c-label svg{ width:16px; height:16px; }
.callout p{ font-size:15.5px; color:var(--espresso-2); margin:0; }

/* Tracker */
.tracker{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.tracker li{ display:block; }
.tracker label{
  display:flex; align-items:center; gap:13px; padding:12px 14px; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-size:15.5px; color:var(--espresso); transition:background .16s ease, border-color .16s ease; min-height:48px;
}
.tracker label:hover{ background:var(--surface-soft); }
.tracker input{ position:absolute; opacity:0; width:0; height:0; }
.tracker .box{
  flex:none; width:24px; height:24px; border-radius:7px; border:2px solid var(--clay); background:transparent;
  display:flex; align-items:center; justify-content:center; transition:all .16s ease;
}
.tracker .box svg{ width:15px; height:15px; color:#fff; opacity:0; transform:scale(.5); transition:all .16s ease; }
.tracker input:checked + .box{ background:var(--sage); border-color:var(--sage); }
.tracker input:checked + .box svg{ opacity:1; transform:scale(1); }
.tracker input:focus-visible + .box{ box-shadow:0 0 0 3px rgba(74,93,138,.4); }
.tracker label:has(input:checked) .tlabel{ color:var(--muted); text-decoration:line-through; }
.tracker .tlabel{ transition:color .16s ease; }

.closing-line{
  font-family:var(--font); font-style:italic; font-size:17px; color:var(--accent-deep);
  text-align:center; padding:6px 8px 0; line-height:1.4;
}

/* Reflection */
.reflection{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 16px; margin-bottom:22px; }
.reflection-spaced{ margin-top:22px; }
.reflection h3{ font-size:17px; margin-bottom:13px; text-align:center; }
.reflect-btns{ display:flex; flex-direction:column; gap:10px; }
.reflect-btns .btn{ min-height:50px; font-size:16px; }
.simple-plan{
  margin-top:15px; background:var(--surface-soft); border-radius:var(--radius-sm); padding:15px 16px; border:1px solid var(--line);
  animation:fade .3s ease both;
}
.simple-plan h4{ font-family:var(--font); font-size:15px; margin-bottom:10px; }
.simple-plan ul{ margin:0; padding-left:20px; color:var(--espresso-2); font-size:15px; }
.simple-plan li{ margin-bottom:6px; }
.simple-plan li:last-child{ margin-bottom:0; }

/* Sponsors */
.sponsors-head{ margin:6px 0 4px; }
.sponsors-head h2{ font-size:22px; margin-bottom:6px; }
.sponsors-head p{ font-size:15px; color:var(--muted); }
.sponsor-grid{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.sponsor{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-1); position:relative;
}
.sponsor-cat{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--accent-deep);
  padding:12px 16px 0;
}
.sponsor-top{ display:flex; gap:14px; padding:10px 16px 0; align-items:flex-start; }
.sponsor-img{
  flex:none; width:76px; height:76px; border-radius:var(--radius-sm); background:var(--surface-soft);
  border:1px solid var(--line); object-fit:cover; display:block;
}
.sponsor-body{ flex:1; min-width:0; }
.sponsor-tags{ display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.sponsored-label{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#fff;
  background:var(--espresso-2); padding:2px 8px; border-radius:99px;
}
.sponsor-logo{ height:16px; width:auto; opacity:.85; }
.sponsor-body h3{ font-size:16px; margin-bottom:5px; line-height:1.25; }
.sponsor-benefit{ font-size:14px; color:var(--espresso-2); margin-bottom:5px; }
.sponsor-context{ font-size:13.5px; color:var(--muted); }
.sponsor-category-hint{ margin-top:4px; font-style:italic; }
.sponsor-foot{ padding:14px 16px 16px; }
.sponsor-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:48px;
  background:var(--surface-soft); color:var(--accent-deep); border:1.5px solid var(--clay); border-radius:var(--radius-sm);
  font-size:15px; font-weight:700; text-decoration:none; transition:background .18s ease; cursor:pointer;
}
.sponsor-cta:hover{ background:var(--blush); }
.sponsor-cta svg{ width:15px; height:15px; }
.sponsor-disclosure{ font-size:12px; color:var(--muted); margin-top:9px; line-height:1.45; }

/* Email / Save */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px;
  box-shadow:var(--shadow-1); margin-bottom:20px;
}
.panel h2{ font-size:20px; margin-bottom:8px; }
.panel p.p-sub{ font-size:15px; color:var(--espresso-2); margin-bottom:14px; }
.email-row{ display:flex; flex-direction:column; gap:11px; }
.email-panel{ margin-top:22px; }
.email-micro{ text-align:left; }
.email-actions{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; margin:0; }
.email-actions legend{ font-size:13px; font-weight:700; padding:0 5px; }
.email-actions label{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--espresso-2); padding:5px 0; }
.email-actions input{ width:18px; height:18px; margin:2px 0 0; flex:none; }
.field{
  width:100%; min-height:52px; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-size:16px; font-family:var(--font-ui); color:var(--espresso); background:var(--ivory); -webkit-appearance:none;
}
.field:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(166,104,94,.15); }
.field.invalid{ border-color:var(--accent-deep); background:#F9ECEA; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); margin-top:2px; }
.consent input{ margin-top:3px; width:18px; height:18px; flex:none; }
.form-msg{ font-size:14px; margin-top:10px; padding:11px 13px; border-radius:var(--radius-sm); display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ background:#EEF1EA; color:#43503A; border:1px solid #DBE1D0; }
.form-msg.err{ background:#F7ECEA; color:var(--accent-deep); border:1px solid #EAD3CF; }
.field-error{ font-size:13px; color:var(--accent-deep); margin-top:6px; display:none; }
.field-error.show{ display:block; }

/* Share */
.share-btns{ display:flex; flex-direction:column; gap:11px; }
.copy-toast{ font-size:14px; color:var(--sage); text-align:center; margin-top:10px; font-weight:600; opacity:0; transition:opacity .2s; }
.copy-toast.show{ opacity:1; }

/* Return */
.return-panel{
  background:linear-gradient(160deg, var(--blush), var(--surface));
  border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px; margin-bottom:20px; text-align:center;
}
.return-panel h2{ font-size:21px; margin-bottom:9px; }
.return-panel p{ font-size:15px; color:var(--espresso-2); margin-bottom:16px; }
.explore-btn{ margin-top:11px; }

/* Issue switcher — browse weekly editions */
.issues{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; margin-bottom:20px; box-shadow:var(--shadow-1);
}
.issues h2{ font-size:19px; margin-bottom:5px; }
.issues .issues-sub{ font-size:14px; color:var(--muted); margin-bottom:15px; }
.issue-list{ display:flex; flex-direction:column; gap:10px; }
.issue{
  display:flex; align-items:center; gap:13px; width:100%; min-height:60px; padding:13px 15px; text-align:left;
  background:var(--ivory); border:1.5px solid var(--line); border-radius:var(--radius);
  cursor:pointer; transition:border-color .18s ease, background .18s ease, transform .12s ease;
  font-family:var(--font-ui); color:var(--espresso);
}
.issue:hover:not([disabled]){ border-color:var(--clay); background:var(--surface-soft); }
.issue:active:not([disabled]){ transform:scale(.995); }
.issue[disabled]{ cursor:default; opacity:.72; }
.issue-ico{
  flex:none; width:40px; height:40px; border-radius:12px; background:var(--blush);
  display:flex; align-items:center; justify-content:center; color:var(--accent-deep);
}
.issue-ico svg{ width:22px; height:22px; }
.issue-body{ flex:1; min-width:0; }
.issue-body .i-name{ display:block; font-size:16px; font-weight:600; font-family:var(--font); line-height:1.2; }
.issue-body .i-desc{ display:block; font-size:13px; color:var(--muted); margin-top:4px; }
.issue-tag{
  flex:none; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:4px 10px; border-radius:99px; white-space:nowrap;
}
.issue-tag.live{ background:var(--sage); color:#fff; }
.issue-tag.soon{ background:var(--surface-soft); color:var(--muted); border:1px solid var(--line); }
.issue.is-current{ border-color:var(--accent); background:var(--blush); box-shadow:0 0 0 3px rgba(166,104,94,.12); }
.issue.is-soon{ opacity:.78; }
.issue.is-soon:hover{ border-color:var(--line); background:var(--ivory); }

.restart-link{ text-align:center; margin:6px 0 4px; }
.restart-link button{
  background:none; border:none; color:var(--accent-deep); font-size:15px; font-weight:600; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:10px; min-height:44px; font-family:var(--font-ui);
}
.restart-link button:hover{ color:var(--accent); }

.result-note{
  font-size:13px; color:var(--muted); background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:20px; line-height:1.5;
}

/* Footer */
.foot{
  border-top:1px solid var(--line); margin-top:24px; padding-top:18px;
  font-size:12.5px; color:var(--muted); line-height:1.55;
}
.foot p{ margin-bottom:9px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:6px 4px; align-items:center; margin-bottom:9px; }
.foot-links a{ color:var(--espresso-2); text-decoration:none; }
.foot-links a:hover{ text-decoration:underline; }
.foot-links span{ color:var(--line); }

/* Global error banner */
.err-banner{
  display:none; background:#F7ECEA; border:1px solid #EAD3CF; color:var(--accent-deep);
  border-radius:var(--radius-sm); padding:12px 14px; font-size:14px; margin:12px 0;
}
.err-banner.show{ display:block; }

/* Focus visibility */
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }
.answer:focus-visible{ outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Larger screens */
@media (min-width:768px){
  .wrap{ padding:0 32px 56px; }
  .sponsor-grid{ flex-direction:row; }
  .sponsor-grid .sponsor{ flex:1; display:flex; flex-direction:column; }
  .sponsor-grid .sponsor-foot{ margin-top:auto; }
  .sponsor-top{ flex-direction:column; align-items:center; text-align:center; }
  .sponsor-img{ width:100%; height:120px; }
  .sponsor-body{ width:100%; }
  .sponsor-tags{ justify-content:center; }
  .reflect-btns{ flex-direction:row; }
  .share-btns{ flex-direction:row; }
  .email-row{ }
}
@media (min-width:1024px){
  :root{ --maxw:720px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .spinner{ animation:none; border-top-color:var(--accent); }
}