/* ================================================================
   HOW S.M.A.R.T. ARE YOU? — Stroke prevention microsite
   SGH National Stroke Awareness Campaign 2026 (RFP 26047)

   Copy      : Smart Quiz Microsite Copysheet, Draft 4 (27 July 2026)
   Art        : Draft 4 screen designs — icons and logos are the
                approved campaign assets, keyed from the master art.
   ================================================================ */

:root{
  color-scheme:dark;

  --red:#EB1C24;
  --red-lo:#C4141B;
  --red-hi:#FF2D36;
  --green:#00F000;
  --amber:#F8C800;

  --ink:#08040A;
  --card:#3A3A3A;
  --card-2:#2A2A2A;
  --white:#FFFFFF;
  --dim:#D6D2D4;
  --dimmer:#9A9498;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --text:"Source Sans 3","Helvetica Neue",Arial,sans-serif;

  --h1:clamp(27px,5.6vw,47px);
  --h2:clamp(21px,4.2vw,35px);
  --sub:clamp(16px,2.75vw,25px);
  --body:clamp(14.5px,2.15vw,19px);
  --small:clamp(12.5px,1.75vw,15px);
  --tiny:clamp(11px,1.5vw,13px);

  --col:900px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:var(--text);
  font-size:16px;
  line-height:1.5;
  color:var(--white);
  background:#08040A;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* The campaign ground: black with a smoky crimson field. */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(58% 44% at 8% 26%,  rgba(150,10,22,.62), transparent 72%),
    radial-gradient(52% 40% at 96% 20%, rgba(120,8,18,.52), transparent 74%),
    radial-gradient(70% 46% at 52% 96%, rgba(126,8,20,.50), transparent 76%),
    radial-gradient(40% 30% at 78% 62%, rgba(96,6,16,.40), transparent 78%),
    linear-gradient(118deg, transparent 30%, rgba(190,26,40,.10) 46%, transparent 60%),
    radial-gradient(90% 70% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.9) 88%),
    #08040A;
}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:8px}

/* ---------------- Layout ---------------- */

.app{position:relative;z-index:1;min-height:100svh}

.screen{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:clamp(28px,6vh,64px) clamp(20px,5vw,40px) clamp(24px,5vh,48px);
  text-align:center;
  animation:in .5s cubic-bezier(.2,.75,.3,1) both;
}
@keyframes in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.col{width:100%;max-width:var(--col);margin:0 auto}
.narrow{max-width:760px}
.wide{max-width:1180px}

/* ---------------- Type ---------------- */

.display{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:1.04;
  text-wrap:balance;
}
.h1{font-size:var(--h1)}
.h2{font-size:var(--h2)}

.sub{
  font-family:var(--text);
  font-weight:600;
  font-size:var(--sub);
  line-height:1.32;
  text-wrap:balance;
}
.body{font-size:var(--body);line-height:1.45;text-wrap:pretty}
.small{font-size:var(--small);line-height:1.45}
.tiny{font-size:var(--tiny);line-height:1.4;color:var(--dim)}

/* Breaks authored for the wide frames collapse on phones */
@media (max-width:719px){ br.wide{display:none} }

.r{color:var(--red)}
.g{color:var(--green)}
.y{color:var(--amber)}

.mt-s{margin-top:clamp(10px,1.6vh,16px)}
.mt-m{margin-top:clamp(16px,3vh,30px)}
.mt-l{margin-top:clamp(20px,3.6vh,40px)}

/* ---------------- Buttons ---------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:clamp(48px,6.4vh,62px);
  padding:0 clamp(26px,4vw,44px);
  border-radius:999px;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(14px,2.05vw,19px);
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.1;
  transition:transform .16s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:active{transform:scale(.975)}

.btn-solid{
  background:var(--red);
  color:#fff;
  box-shadow:0 0 34px -8px rgba(235,28,36,.9);
}
.btn-solid:hover{background:var(--red-hi)}

.btn-out{
  border:2px solid var(--red);
  color:#fff;
  background:rgba(235,28,36,.07);
  box-shadow:0 0 26px -12px rgba(235,28,36,.9);
}
.btn-out:hover{background:rgba(235,28,36,.20)}

.btn-row{
  display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,16px);
  justify-content:center;
}
.btn-col{flex-direction:column;align-items:center;gap:10px}
.btn-col .btn{min-width:min(430px,88vw)}

/* ---------------- Footer lockup ---------------- */

.lockup{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(26px,5.4vw,58px);
  margin-top:clamp(20px,3.8vh,44px);
  opacity:.96;
}
.lockup img{height:clamp(42px,5.2vw,60px);width:auto}
.lockup .ssi{height:clamp(40px,5vw,58px)}

/* ---------------- Habit row ---------------- */

.habits{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(6px,2.4vw,34px);
  margin:clamp(16px,2.8vh,30px) auto 0;
  max-width:820px;
}
.habit{
  flex:1 1 0;
  max-width:150px;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,1vw,10px);
}
.habit .art{
  height:clamp(48px,8.4vw,96px);
  width:auto;
  object-fit:contain;
}
.habit .cap{
  font-family:var(--text);
  font-weight:700;
  font-size:clamp(9px,1.42vw,15px);
  line-height:1.16;
  color:#fff;
  width:100%;
  margin:0;
  text-align:center;
}
.habit .cap b{
  color:var(--red);
  font-family:var(--display);
  font-weight:800;
  font-size:1.36em;
  line-height:0;
}
#habitsLanding .habit-r .cap,
#habitsLanding .habit-t .cap,
#habitsEdu .habit-r .cap,
#habitsEdu .habit-t .cap{
  transform:translateX(-12px);
}
@media (max-width:768px){
  #habitsLanding .habit-r .cap,
  #habitsLanding .habit-t .cap,
  #habitsEdu .habit-r .cap,
  #habitsEdu .habit-t .cap{
    transform:translateX(-5px);
  }
}

/* ---------------- Quiz ---------------- */

.qbar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:5;
  background:rgba(255,255,255,.07);
}
.qbar i{
  display:block;height:100%;width:0;
  background:var(--red);
  box-shadow:0 0 12px rgba(235,28,36,.9);
  transition:width .5s cubic-bezier(.3,.8,.3,1);
}

.qmeta{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--tiny);
  letter-spacing:.22em;
  color:var(--dimmer);
  margin-bottom:clamp(14px,2.6vh,26px);
}
.qmeta b{color:#fff}

.options{
  display:flex;flex-direction:column;
  gap:clamp(9px,1.5vh,15px);
  width:100%;
  max-width:780px;
  margin:clamp(20px,3.6vh,40px) auto 0;
}

.opt{
  display:flex;align-items:center;
  width:100%;
  min-height:clamp(50px,7vh,66px);
  padding:12px clamp(20px,5.2%,62px);
  border-radius:999px;
  border:2px solid rgba(235,28,36,.92);
  background:rgba(120,6,14,.16);
  box-shadow:0 0 22px -10px rgba(235,28,36,.95), inset 0 0 22px -14px rgba(235,28,36,.9);
  text-align:left;
  font-family:var(--text);
  font-weight:400;
  font-size:clamp(14.5px,2.05vw,20px);
  line-height:1.28;
  color:#fff;
  transition:background .18s ease, border-color .18s ease, transform .16s ease, box-shadow .2s ease;
}
.opt:hover:not(.on){background:rgba(235,28,36,.24)}
.opt:active{transform:scale(.992)}
.opt.on{
  background:var(--red);
  border-color:var(--red);
  font-weight:600;
  box-shadow:0 0 40px -10px rgba(235,28,36,1);
}
.opt.off{opacity:.55}
.opt .k{font-weight:700;margin-right:.45em;flex:none}

/* Feedback nudge — grey card, icon rail, copy */
.nudge{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,22px);
  width:100%;max-width:780px;
  margin:clamp(20px,3.4vh,38px) auto 0;
  padding:clamp(14px,2.2vh,20px) clamp(18px,2.6vw,26px);
  border-radius:clamp(16px,2vw,22px);
  background:var(--card);
  text-align:left;
  animation:in .42s cubic-bezier(.2,.75,.3,1) both;
}
.nudge .art{height:clamp(44px,5.6vw,64px);width:auto;flex:none}
.nudge .rule{width:1px;align-self:stretch;background:rgba(255,255,255,.28);flex:none}
.nudge .body{min-width:0}
.nudge p{font-size:clamp(12.5px,1.8vw,16px);line-height:1.4}
.nudge p+p{margin-top:.6em}
.nudge cite{
  display:block;
  margin-top:.8em;
  padding-top:.8em;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.72);
  font-size:clamp(10.5px,1.45vw,12px);
  font-style:normal;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.nudge cite a{color:inherit;text-decoration:underline;text-underline-offset:2px}
sup {font-size:10px;}

/* ---------------- Loading ---------------- */

.track{
  width:min(560px,86%);
  height:clamp(14px,1.8vh,20px);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  margin:0 auto;
}
.track i{
  display:block;height:100%;width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--red-lo),var(--red-hi));
  box-shadow:0 0 24px rgba(235,28,36,.85);
  transition:width .8s cubic-bezier(.4,.7,.3,1);
}

/* ---------------- Result ---------------- */

.dial{
  position:relative;
  width:clamp(180px,30vw,272px);
  aspect-ratio:1/1;
  margin:0 auto;
}
.dial svg{width:100%;height:100%;overflow:visible}
.dial .arcText{
  font-family:var(--display);
  font-weight:800;
  font-size:21px;
  letter-spacing:.10em;
  fill:#fff;
}
.dial .ringTrack{fill:none;stroke:rgba(255,255,255,.09);stroke-width:11}
.dial .ringFill{
  fill:none;stroke-width:11;stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.25,.85,.3,1), stroke .4s ease;
}
.dial .num{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
}
.dial .num b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(56px,10.5vw,94px);
  line-height:.86;
  font-variant-numeric:tabular-nums;
}
.dial .num span{
  font-family:var(--text);font-weight:400;
  font-size:clamp(18px,3vw,28px);
  color:#fff;
}

/* ---------------- Breakdown ---------------- */

.bd-grid{
  display:flex;flex-direction:column;
  gap:clamp(14px,2.4vh,22px);
  margin-top:clamp(22px,4vh,40px);
  width:100%;
}

.bd{
  display:flex;align-items:flex-start;gap:clamp(14px,3vw,20px);
  text-align:left;
  padding-bottom:clamp(14px,2.4vh,20px);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.bd:last-child{border-bottom:0;padding-bottom:0}

.medal{
  position:relative;flex:none;
  width:clamp(92px,16vw,132px);
  height:clamp(92px,16vw,132px);
  border-radius:50%;
  overflow:hidden;
  border:3px solid currentColor;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  padding:8px;
  box-shadow:0 0 26px -12px currentColor;
}
.medal img{height:44%;width:auto}
.medal .cap{
  font-family:var(--text);font-weight:700;
  font-size:clamp(7.5px,1.5vw,10.5px);
  line-height:1.1;color:#fff;text-align:center;
}
.medal .cap b{color:var(--red);font-family:var(--display);font-weight:800;font-size:1.4em;line-height:0}

.bd-copy{flex:1;min-width:0}
.bd-status{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(13px,2vw,17px);letter-spacing:.02em;
  color:#fff;
}
.bd-ans{
  font-size:clamp(11.5px,1.6vw,13.5px);
  color:var(--dimmer);margin-top:2px;
}
.bd-text{
  font-size:clamp(13px,1.85vw,16px);
  line-height:1.45;margin-top:8px;color:var(--dim);
}
.bd-citation{
  display:block;
  margin-top:.9em;
  padding-top:.75em;
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.62);
  font-size:clamp(10.5px,1.35vw,12px);
  font-style:normal;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.bd-citation a{color:inherit;text-decoration:underline;text-underline-offset:2px}

@media (min-width:900px){
  .bd-grid{
    flex-direction:row;
    align-items:stretch;
    gap:0;
  }
  .bd{
    flex-direction:column;
    align-items:center;
    text-align:center;
    flex:1 1 0;
    min-width:0;
    padding:0 clamp(10px,1.4vw,18px);
    border-bottom:0;
    border-right:1px solid rgba(255,255,255,.16);
    gap:14px;
  }
  .bd:last-child{border-right:0}
  .bd-ans{display:none}
}

/* ---------------- Share sheet ---------------- */

.sheet{
  position:fixed;inset:0;z-index:40;
  background:rgba(4,2,5,.86);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vh,32px) clamp(14px,4vw,32px);
  overflow-y:auto;
  animation:fade .3s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.sheet-inner{
  width:100%;max-width:880px;
  display:grid;gap:clamp(16px,2.6vw,26px);
  grid-template-columns:1fr;
  align-items:start;
  margin:auto;
}
@media (min-width:820px){ .sheet-inner{grid-template-columns:340px 1fr} }

/* The share card mirrors the 4:5 social asset */
.card{
  position:relative;
  aspect-ratio:4/5;
  width:100%;
  max-width:340px;
  margin:0 auto;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(60% 40% at 12% 18%, rgba(150,10,22,.60), transparent 70%),
    radial-gradient(58% 40% at 92% 30%, rgba(120,8,18,.50), transparent 74%),
    radial-gradient(70% 44% at 50% 96%, rgba(126,8,20,.46), transparent 76%),
    #08040A;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:6.5% 6% 5.5%;
  text-align:center;
  container-type:inline-size;
}
.card .ct{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:8.6cqw;line-height:1.05;
}
.card .cdial{position:relative;width:44%;aspect-ratio:1/1}
.card .cdial svg{width:100%;height:100%;overflow:visible}
.card .cdial .arcText{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.10em;fill:#fff}
.card .cdial .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.card .cdial .num b{font-family:var(--display);font-weight:800;font-size:15cqw;line-height:.86}
.card .cdial .num span{font-size:5cqw}
.card .cmsg{font-size:4.4cqw;line-height:1.3;font-weight:400}
.card .chabits{display:flex;gap:2%;justify-content:center;width:100%}
.card .chabits .h{flex:1;display:flex;flex-direction:column;align-items:center;gap:4%}
.card .chabits img{height:9cqw;width:auto}
.card .chabits .cap{font-size:2.7cqw;line-height:1.1;font-weight:700}
.card .chabits .cap b{color:var(--red);font-family:var(--display);font-weight:800;font-size:1.4em;line-height:0}
.card .clock{display:flex;align-items:center;justify-content:center;gap:9%;width:100%}
.card .clock img{height:7.4cqw;width:auto}

.msgs{display:flex;flex-direction:column;gap:9px}
.msg{
  text-align:left;padding:13px 16px;border-radius:12px;
  border:1.5px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  font-size:14px;line-height:1.42;color:var(--dim);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.msg:hover{background:rgba(255,255,255,.09);color:#fff}
.msg.on{border-color:var(--red);background:rgba(235,28,36,.16);color:#fff}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);
  z-index:60;padding:12px 22px;border-radius:999px;
  background:#fff;color:#0A0508;
  font-family:var(--display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------------- Motion preference ---------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}