/* skinrx.app — self-contained. The same tokens and type as skinrx.help, but no
   dependency on that site's lib/ or stylesheet, since this is a separate
   domain and a broken cross-site link would take the page down with it. */
:root{
  --cream:#F5EFE8; --paper:#FFFCF8; --ink:#2B2622; --ink60:#6E655D;
  --rule:#E2D9CE; --teal:#5B8FA8; --coral:#D94F2E; --gold:#C9A84C;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:17px/1.65 "DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.wrap{max-width:46rem; margin:0 auto; padding:2.4rem 1.2rem 4rem}

header{text-align:center; padding-bottom:.4rem}
/* The full SkinRx.help mark, in place of the plain Rx square. Height is fixed
   and the width follows, so the artwork's own proportions are kept whatever
   its pixel size. */
.mark{
  display:block; margin:0 auto; height:72px; width:auto;
  max-width:min(84vw, 300px); object-fit:contain;
}
@media(max-width:520px){ .mark{ height:58px } }
h1{
  font-family:"Playfair Display",Georgia,serif; font-weight:700;
  font-size:clamp(1.9rem,5.4vw,2.7rem); line-height:1.15; margin:1.1rem 0 0;
}
.lede{color:var(--ink60); font-size:1.05rem; margin:.7rem auto 0; max-width:32rem}

.card{
  background:var(--paper); border:1px solid var(--rule); border-radius:6px;
  padding:1.3rem 1.4rem; margin-top:1.6rem;
}
h2{font-family:"Playfair Display",Georgia,serif; font-size:1.25rem; margin:0 0 .5rem}
h3{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
   color:var(--ink60); margin:0 0 .5rem; font-weight:600}
p{margin:.6rem 0 0}
a{color:var(--teal)}
a:hover{color:var(--coral)}
.muted{color:var(--ink60); font-size:.88rem}

ul.plain{list-style:none; margin:.8rem 0 0; padding:0}
ul.plain li{padding:.55rem 0; border-top:1px solid var(--rule)}
ul.plain li:first-child{border-top:0}
ul.plain b{font-weight:600}

/* Store placeholders. Deliberately not Apple's or Google's official badge
   artwork — both have licence terms, and a badge that links nowhere would be a
   misuse of their marks. These are plainly labelled as not yet available. */
.stores{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem}
.badge{
  flex:1 1 13rem; display:flex; flex-direction:column; justify-content:center;
  min-height:62px; padding:.7rem 1rem; border-radius:6px;
  border:1px dashed var(--rule); background:var(--cream); color:var(--ink60);
}
.badge b{display:block; color:var(--ink); font-size:.95rem; font-weight:600}
.badge span{font-size:.78rem}

/* Beta badge, 21 Sep 2026. Still our own design, like the two above: Google's
   badge guidelines forbid altering the official "Get it on Google Play"
   artwork, and its logo is a trademark, so a BETA sticker on the real thing is
   not an option. This badge is live rather than a placeholder, so it drops the
   dashed border, links down to the tester steps, and carries a small tag. */
.badge--beta{position:relative; border:1px solid var(--teal); background:var(--paper);
  text-decoration:none}
.badge--beta:hover{border-color:var(--coral)}
.badge--beta:hover b{color:var(--coral)}

/* The App Store badge, live from 22 Sep 2026. Same house style as the two
   above — still not Apple's own artwork, which its marketing guidelines
   require to be used unaltered and which is not ours to redraw. Teal rather
   than coral on the tag, so "Out now" reads as settled and the Android
   "Beta" keeps the attention-seeking colour. */
.badge--live{position:relative; border:1px solid var(--teal); background:var(--paper);
  text-decoration:none}
.badge--live:hover{border-color:var(--teal)}
.badge--live:hover b{color:var(--teal)}
.beta--live{background:var(--teal)}
.beta{position:absolute; top:-.55rem; right:.8rem; font-style:normal;
  font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper); background:var(--coral); padding:.12rem .45rem; border-radius:3px}

/* Section headings inside a card, and the numbered tester steps. */
.card h3{margin:1.3rem 0 .45rem}
.card h3:first-child{margin-top:0}
ol.steps{margin:.7rem 0 1rem; padding-left:1.4rem}
ol.steps li{padding:.45rem 0}
ol.steps li b{display:block}

footer{margin-top:2.6rem; padding-top:1.2rem; border-top:1px solid var(--rule);
  color:var(--ink60); font-size:.86rem; text-align:center}
footer a{margin:0 .45rem; white-space:nowrap}

@media(max-width:520px){
  .wrap{padding-top:1.8rem}
  .badge{flex-basis:100%}
}