/* ============================================================
   Pro tier interface

   Deliberately separate from style.css. The consumer site is a marketing
   surface and this is a tool someone uses with a client sitting next to
   them, so it is denser, quieter, and built for repeat use rather than
   first impressions. Loading it only on /pro pages also means none of the
   264 consumer pages carry a byte of it.

   Same palette as the consumer site, no purple in the chrome. The one
   colour a professional controls is their own accent, and that appears
   only on their client-facing result page, never in here.
   ============================================================ */

:root {
  --pro-ink: #1A1214;
  --pro-soft: #6B5B60;
  --pro-line: #EDE4E1;
  --pro-bg: #FBF7F6;
  --pro-card: #FFFFFF;
  /* Taken from style.css rather than approximated, so a button here is the
     same colour as the same button on the consumer site. The primary
     button on both is rose-deep hovering to rose-dark; coral is the
     secondary accent. */
  --pro-rose: #BE3B57;        /* --rose-deep  */
  --pro-rose-dark: #A8324B;   /* --rose-dark  */
  --pro-coral: #FF8674;       /* --coral      */
  --pro-coral-deep: #D14257;  /* --coral-deep */
  --pro-green: #2E7D5B;
  --pro-amber: #9A6B15;
  --pro-r: 12px;
}

* { box-sizing: border-box; }

body.pro {
  margin: 0;
  background: var(--pro-bg);
  color: var(--pro-ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.pro-shell { max-width: 960px; margin: 0 auto; padding: 0 1.15rem 4rem; }
.center { text-align: center; }
.muted { color: var(--pro-soft); }
.small { font-size: .88rem; }
.tiny { font-size: .8rem; }
.stack > * + * { margin-top: 1rem; }

/* ---------- header ---------- */
.pro-head {
  background: var(--pro-card);
  border-bottom: 1px solid var(--pro-line);
  position: sticky; top: 0; z-index: 20;
}
.pro-head .inner {
  max-width: 960px; margin: 0 auto; padding: .7rem 1.15rem;
  display: flex; align-items: center; gap: 1rem;
}
.pro-logo {
  font-weight: 700; text-decoration: none; color: var(--pro-ink);
  display: flex; align-items: center; gap: .5rem; min-height: 44px;
}
.pro-logo .tag {
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--pro-rose); color: #fff; padding: .18rem .42rem; border-radius: 4px;
}
.pro-nav { margin-left: auto; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.pro-nav a {
  color: var(--pro-soft); text-decoration: none; font-size: .9rem;
  padding: .55rem .7rem; border-radius: 8px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.pro-nav a:hover { background: var(--pro-bg); color: var(--pro-ink); }
.pro-nav a[aria-current="page"] { color: var(--pro-ink); font-weight: 600; }

/* ---------- banner ---------- */
.pro-banner {
  background: #FFF6E9; border: 1px solid #F0DCBC; color: #6B4E12;
  border-radius: var(--pro-r); padding: .85rem 1.1rem; margin: 1.2rem 0;
  font-size: .92rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.pro-banner.warn { background: #FDEEEA; border-color: #F3CBC0; color: #8A3520; }

/* ---------- cards ---------- */
.pro-card {
  background: var(--pro-card); border: 1px solid var(--pro-line);
  border-radius: var(--pro-r); padding: 1.4rem 1.5rem;
}
.pro-card + .pro-card { margin-top: 1.1rem; }
.pro-card h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.pro-card h3 { margin: 0 0 .3rem; font-size: 1rem; }

.pro-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------- stats ---------- */
.stat { background: var(--pro-card); border: 1px solid var(--pro-line); border-radius: var(--pro-r); padding: 1.2rem 1.3rem; }
.stat .n { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat .k { color: var(--pro-soft); font-size: .85rem; margin-top: .2rem; }

/* ---------- buttons ---------- */
.pro-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .7rem 1.2rem; border-radius: 100px;
  background: var(--pro-rose); color: #fff; border: 1.5px solid var(--pro-rose);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  white-space: normal; text-align: center;
}
.pro-btn:hover { background: var(--pro-rose-dark); border-color: var(--pro-rose-dark); }
/* Ghost matches .btn-ghost on the consumer site: rose text, neutral border,
   and the same faint rose wash on hover. */
.pro-btn.ghost { background: transparent; color: var(--pro-rose); border-color: var(--pro-line); }
.pro-btn.ghost:hover { border-color: var(--pro-rose); color: var(--pro-rose); background: rgba(190, 59, 87, .04); }
.pro-btn.small { min-height: 36px; padding: .35rem .85rem; font-size: .85rem; }
.pro-btn.big { padding: .9rem 1.7rem; font-size: 1.02rem; }
.pro-btn[disabled] { opacity: .55; cursor: not-allowed; }
.pro-btn.danger { background: transparent; color: var(--pro-rose); border-color: #E7C6CE; }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: 1.1rem; }
.field > span.lab { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .92rem; }
.field > span.hint { display: block; color: var(--pro-soft); font-size: .84rem; margin-bottom: .4rem; }
.field input[type=text], .field input[type=email], .field textarea, .field select {
  width: 100%; font: inherit; padding: .7rem .9rem; min-height: 44px;
  border: 1.5px solid var(--pro-line); border-radius: 10px;
  background: var(--pro-card); color: var(--pro-ink);
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--pro-rose); outline-offset: 1px; border-color: var(--pro-rose);
}
.field input[type=color] {
  width: 56px; height: 44px; padding: 2px; border: 1.5px solid var(--pro-line);
  border-radius: 10px; background: var(--pro-card); cursor: pointer;
}
.row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

.check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 20px; }

/* Radio cards for the retail choice, which is a decision worth making
   deliberately rather than a dropdown someone skims past. */
.opts { display: grid; gap: .7rem; }
.opt-card {
  display: flex; gap: .8rem; align-items: flex-start;
  border: 1.5px solid var(--pro-line); border-radius: var(--pro-r);
  padding: 1rem 1.1rem; cursor: pointer; background: var(--pro-card);
}
.opt-card:hover { border-color: var(--pro-rose); }
.opt-card.on { border-color: var(--pro-rose); background: #FDF4F6; }
.opt-card input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 20px; }
.opt-card strong { display: block; }
.opt-card em { display: block; font-style: normal; color: var(--pro-soft); font-size: .88rem; margin-top: .2rem; }

/* ---------- list ---------- */
.pro-list { list-style: none; margin: 0; padding: 0; }
.pro-list li {
  border: 1px solid var(--pro-line); border-radius: var(--pro-r);
  background: var(--pro-card); padding: 1rem 1.15rem; margin-bottom: .7rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.pro-list .who { font-weight: 600; }
.pro-list .meta { color: var(--pro-soft); font-size: .85rem; }
.pro-list .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.pill {
  font-size: .74rem; padding: .2rem .55rem; border-radius: 100px;
  background: var(--pro-bg); border: 1px solid var(--pro-line); color: var(--pro-soft);
}
.pill.seen { color: var(--pro-green); border-color: #BFE0CE; background: #F0F9F4; }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--pro-soft); }

/* ---------- logo preview ---------- */
.logo-prev {
  display: flex; align-items: center; justify-content: center;
  width: 128px; height: 76px; border: 1.5px dashed var(--pro-line);
  border-radius: 10px; background: var(--pro-card); overflow: hidden;
}
.logo-prev img { max-width: 100%; max-height: 100%; }
.logo-prev span { color: var(--pro-soft); font-size: .78rem; }

/* ---------- toast ---------- */
.pro-toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  background: var(--pro-ink); color: #fff; padding: .8rem 1.2rem;
  border-radius: 100px; font-size: .9rem; z-index: 60; max-width: 90vw; text-align: center;
}
.pro-toast.bad { background: var(--pro-rose); }
[hidden] { display: none !important; }

/* ---------- consultation flow ---------- */
.steps-bar { display: flex; gap: .4rem; margin: 1.4rem 0; flex-wrap: wrap; }
.steps-bar .s {
  flex: 1 1 90px; height: 4px; border-radius: 4px; background: var(--pro-line);
}
.steps-bar .s.on { background: var(--pro-rose); }

.share-box {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  background: var(--pro-bg); border: 1px solid var(--pro-line);
  border-radius: 10px; padding: .6rem .8rem; margin-top: .8rem;
}
.share-box code {
  font-size: .85rem; overflow-x: auto; white-space: nowrap;
  flex: 1 1 220px; min-width: 0; color: var(--pro-ink);
}

/* The consumer quiz renders inside the consultation page, so it gets a
   plain container rather than the marketing hero it normally sits in. */
#quiz-root .results-hero { border-radius: var(--pro-r); }

@media (max-width: 560px) {
  .pro-card { padding: 1.15rem 1.1rem; }
  .pro-list li { align-items: flex-start; }
  .pro-list .actions { margin-left: 0; width: 100%; }
  .pro-btn { width: 100%; }
  .pro-btn.small { width: auto; }
  .row .pro-btn { width: auto; }
}

/* ---------- Skip link ----------
   The accessibility pass adds this markup to every page, but the styling
   lived only in style.css, which the pro app deliberately does not load.
   The result was a visible "Skip to content" link sitting at the top of
   all six pro pages. Same behaviour as the consumer site: present in the
   tab order, off screen until focused, moved up rather than off to the
   left so focusing it cannot scroll the page sideways. */
.pro .skip-link {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-120%);
  z-index: 200;
  background: var(--pro-rose);
  color: #fff;
  padding: .85rem 1.3rem;
  border-radius: 0 0 var(--pro-r) 0;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .12s ease;
}
.pro .skip-link:focus { transform: translateY(0); outline: 3px solid var(--pro-coral); outline-offset: 2px; }

/* ---------- Touch targets ----------
   pro.css had no coarse-pointer block at all, so every .pro-btn.small was
   36px on a phone: Subscribe, Open and Copy link on the dashboard, and the
   same buttons in history. This is a tool used one-handed next to a client,
   so those are the buttons that matter most. */
@media (pointer: coarse) {
  .pro-btn.small { min-height: 44px; padding-left: 1rem; padding-right: 1rem; }
  .check input, .opt-card input { width: 24px; height: 24px; flex-basis: 24px; }
}

/* ---------- Header on a narrow screen ----------
   The logo wrapped onto two lines and the four nav links onto two rows,
   which ate a third of the screen above the fold. Stack it deliberately
   instead: name on one line, nav as its own row underneath. */
.pro-logo { white-space: nowrap; }

@media (max-width: 560px) {
  .pro-head .inner { flex-wrap: wrap; gap: .2rem .6rem; padding: .5rem 1.15rem .6rem; }
  /* Still a link, so it keeps the same 44px minimum as everything else
     rather than being excused for being the logo. */
  .pro-logo { font-size: .98rem; min-height: 44px; }
  .pro-nav {
    margin-left: 0; width: 100%; gap: 0;
    justify-content: space-between; flex-wrap: nowrap;
  }
  .pro-nav a { padding: .5rem .35rem; font-size: .85rem; flex: 1 1 auto; justify-content: center; }
}

/* ---------- Dashboard ---------- */
.dash-top {
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  margin: 1.8rem 0 1.4rem;
}
.dash-top h1 { margin: 0; font-size: 1.55rem; letter-spacing: -.01em; }
.dash-top p { margin: .15rem 0 0; }
.dash-top .pro-btn { margin-left: auto; }

.sec-head {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--pro-soft); font-weight: 700;
  margin: 2.2rem 0 .8rem;
}
.sec-sub { margin: -.6rem 0 .9rem; }

/* ---------- KPI row ----------
   Stat tiles, not charts. A single current value is not a one-bar chart. */
.kpi-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi-row .stat .n { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.kpi-row .stat .n .sub {
  font-size: .82rem; font-weight: 500; color: var(--pro-soft); letter-spacing: 0;
}
.stat.low { border-color: #F0DCBC; background: #FFFCF6; }
.stat.low .n { color: var(--pro-amber); }

/* ---------- Action queues ---------- */
.queue h3 { display: flex; align-items: center; gap: .5rem; }
.count-chip {
  font-size: .74rem; font-weight: 700; min-width: 22px; height: 22px;
  padding: 0 .4rem; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pro-rose); color: #fff;
}
.queue-list { list-style: none; margin: 0; padding: 0; }
.queue-list li {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .6rem 0; border-top: 1px solid var(--pro-line);
}
.queue-list li:first-child { border-top: 0; }
.queue-list .who { font-weight: 600; }
.queue-list .when { color: var(--pro-soft); font-size: .82rem; }
.queue-list .acts { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- Ranked bars ----------
   One hue for every bar. The categories are nominal, so shading by value
   would encode length twice and burn the only free channel.
   Marks: capped thickness, 4px rounded data-end, square at the baseline,
   hairline recessive track, no gridlines because each row is labelled. */
.bars { display: grid; gap: .55rem; }
.bar-row {
  display: grid; grid-template-columns: minmax(0, 8.5rem) 1fr auto;
  align-items: center; gap: .7rem;
}
.bar-label {
  font-size: .85rem; color: var(--pro-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-track {
  height: 14px; border-radius: 3px;
  background: var(--pro-bg); border: 1px solid var(--pro-line);
  overflow: hidden;
}
.bar-fill {
  display: block; height: 100%;
  background: var(--pro-rose);
  /* Square where it leaves the baseline, rounded at the data end. */
  border-radius: 0 4px 4px 0;
}
.bar-val {
  font-size: .82rem; font-weight: 600; color: var(--pro-soft);
  min-width: 1.6rem; text-align: right; font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .dash-top .pro-btn { margin-left: 0; width: 100%; }
  /* A label column narrow enough to fit a phone truncates "No curl
     definition" to nothing useful, so every bar stacks at this width. */
  .bars .bar-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "bar bar";
    gap: .25rem .7rem;
  }
  .bars .bar-label { grid-area: label; white-space: normal; }
  .bars .bar-val   { grid-area: value; }
  .bars .bar-track { grid-area: bar; }
  .bars { gap: .8rem; }
  .queue-list .acts { margin-left: 0; width: 100%; }
  .queue-list .acts .pro-btn { flex: 1 1 auto; }
}

/* Landing page eyebrow: names the buyer before the headline does. */
.eyebrow-pro {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--pro-rose); margin: 0 0 .7rem;
}

/* Product names are long enough that a fixed label column truncates them to
   uselessness ("TGIN Honey Miracl..."). Stacking gives the label the full
   width and keeps the bar readable underneath it. */
.bars.stacked { gap: .8rem; }
.bars.stacked .bar-row {
  grid-template-columns: 1fr auto;
  grid-template-areas: "label value" "bar bar";
  gap: .25rem .7rem;
}
.bars.stacked .bar-label { grid-area: label; white-space: normal; }
.bars.stacked .bar-val   { grid-area: value; }
.bars.stacked .bar-track { grid-area: bar; }

/* ============================================================
   Pro landing page

   The only public page in the pro tier, so it carries marketing weight
   the dashboard deliberately does not. Wider rhythm, larger type, and
   the deliverable shown rather than described.
   ============================================================ */

/* .pro-nav a is (0,1,1) and outranks .pro-btn (0,1,0), so a button placed in
   the nav inherited the muted link colour and rendered grey text on rose:
   1.9:1, effectively unreadable. The same trap caught .nav-pro on the
   consumer header. Any button inside a nav needs the nav-level specificity. */
.pro-nav a.pro-btn { color: #fff; margin-left: .3rem; }
.pro-nav a.pro-btn:hover { color: #fff; }
.lp-wrap { max-width: 1060px; margin: 0 auto; padding: 0 1.15rem; }
.lp-section { padding: 4rem 1.15rem; }
.center { text-align: center; }

.lp-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  line-height: 1.2; letter-spacing: -.02em;
  margin: 0 0 2rem; max-width: 24ch;
}
.lp-h2.center { margin-inline: auto; text-align: center; }
.eyebrow-pro.center { text-align: center; }
.lead {
  font-size: 1.06rem; line-height: 1.7; color: var(--pro-soft);
  max-width: 54ch; margin: 0 0 1.6rem;
}

/* ---------- hero ---------- */
.lp-hero {
  padding: 3.5rem 0 4rem;
  background:
    radial-gradient(1100px 420px at 12% -10%, #FFF1EC 0%, transparent 70%),
    radial-gradient(900px 380px at 92% 0%, #FDF3F5 0%, transparent 65%);
  border-bottom: 1px solid var(--pro-line);
}
.hero-grid {
  display: grid; gap: 3rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(1.85rem, 4.2vw, 2.7rem);
  line-height: 1.12; letter-spacing: -.03em;
  margin: 0 0 1rem; max-width: 17ch;
}
.hero-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-fine { font-size: .84rem; color: var(--pro-soft); }

.tick-row {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  font-size: .87rem; color: var(--pro-soft);
}
.tick-row li { position: relative; padding-left: 1.15rem; }
.tick-row li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pro-rose);
}

/* ---------- the phone demo ----------
   A miniature of the real branded result, built from the same tokens the
   server renderer uses, so it cannot quietly drift from the product. */
.hero-demo { display: flex; flex-direction: column; align-items: center; }
.phone {
  width: 100%; max-width: 300px;
  border: 9px solid #241B1E; border-radius: 30px;
  background: #241B1E;
  box-shadow: 0 24px 50px -18px rgba(52, 30, 38, .38), 0 4px 12px rgba(52, 30, 38, .1);
}
.phone-screen {
  background: #fff; border-radius: 21px; overflow: hidden;
  font-size: 11px; line-height: 1.45;
}
.demo-brand {
  background: var(--demo-accent); color: var(--demo-on-accent);
  padding: 1.15rem .95rem 1rem; text-align: center;
}
.demo-logo {
  width: 26px; height: 26px; border-radius: 50%; margin: 0 auto .5rem;
  background: linear-gradient(#FFD9A0, #FF8064 55%, #C93F6A);
}
.demo-brand strong { display: block; font-size: 12.5px; line-height: 1.3; }
.demo-brand span { display: block; opacity: .72; font-size: 10px; margin-top: .18rem; }
.demo-chips { display: flex; gap: .25rem; justify-content: center; flex-wrap: wrap; margin-top: .55rem; }
.demo-chips i {
  font-style: normal; font-size: 8.5px; padding: .12rem .38rem; border-radius: 100px;
  background: rgba(26, 18, 20, .07); border: 1px solid rgba(26, 18, 20, .18);
}
.demo-body { padding: .8rem .8rem 1rem; }
.demo-step + .demo-step { margin-top: .75rem; }
.demo-step-h { display: flex; align-items: center; gap: .35rem; font-weight: 700; font-size: 10.5px; }
.demo-step-h em { font-style: normal; font-weight: 400; color: #8B7B80; margin-left: auto; font-size: 9px; }
.demo-num {
  width: 15px; height: 15px; border-radius: 50%; background: var(--demo-mark); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 9px;
}
.demo-card {
  border: 1px solid #EDE4E1; border-radius: 8px; padding: .45rem .55rem;
  margin-top: .35rem; position: relative;
}
.demo-card.top { border-color: var(--demo-mark); margin-top: .6rem; }
.demo-pick {
  position: absolute; top: -6px; left: .5rem; font-size: 7px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--demo-mark); color: #fff; padding: .08rem .28rem; border-radius: 100px;
}
.demo-card b { font-size: 10px; }
.demo-card i { font-style: normal; float: right; color: #8B7B80; font-size: 9.5px; }
.demo-card p { margin: .2rem 0 0; font-size: 9px; color: #6B5B60; line-height: 1.4; }
.demo-caption {
  font-size: .78rem; color: var(--pro-soft); text-align: center;
  margin: 1rem 0 0; max-width: 30ch;
}

/* ---------- bands ---------- */
.lp-band { background: var(--pro-card); border-block: 1px solid var(--pro-line); padding: 4rem 0; }

.prob-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.prob-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--pro-bg); border: 1px solid var(--pro-line);
  color: var(--pro-rose); font-weight: 700; font-size: .88rem; margin-bottom: .7rem;
}
.prob h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.prob p { margin: 0; color: var(--pro-soft); font-size: .93rem; }

/* ---------- steps ---------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: step;
}
.steps li {
  background: var(--pro-card); border: 1px solid var(--pro-line);
  border-radius: var(--pro-r); padding: 1.5rem 1.4rem 1.3rem; position: relative;
}
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--pro-rose); color: #fff; font-weight: 700;
  margin-bottom: .8rem;
}
.steps h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.steps p { margin: 0 0 .9rem; color: var(--pro-soft); font-size: .93rem; }
.step-tag {
  display: inline-block; font-size: .76rem; font-weight: 600;
  color: var(--pro-rose); background: #FDF4F6;
  border: 1px solid #F3D9E0; border-radius: 100px; padding: .22rem .6rem;
}

/* ---------- features ---------- */
.feat-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.feat { padding-left: 1rem; border-left: 2px solid var(--pro-rose); }
.feat h3 { margin: 0 0 .35rem; font-size: 1rem; }
.feat p { margin: 0; color: var(--pro-soft); font-size: .93rem; }

/* ---------- price ---------- */
.price-card {
  max-width: 480px; margin: 0 auto; text-align: center;
  background: var(--pro-card); border: 1px solid var(--pro-line);
  border-radius: 18px; padding: 2.4rem 2rem 2rem;
  box-shadow: 0 18px 40px -26px rgba(52, 30, 38, .3);
}
.price-big { margin: .2rem 0 .3rem; font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.price-big .per { display: block; font-size: .85rem; font-weight: 500; color: var(--pro-soft); margin-top: .35rem; letter-spacing: 0; }
.price-card .pro-btn { margin-top: 1.3rem; }
.price-fine { margin: 1.2rem 0 0; max-width: 42ch; margin-inline: auto; }

/* ---------- faq ---------- */
.faq { max-width: 720px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--pro-line);
}
.faq summary {
  cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-weight: 600; list-style: none; min-height: 44px;
  display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--pro-soft); border-bottom: 2px solid var(--pro-soft);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--pro-rose); }
.faq p { margin: 0 0 1.15rem; color: var(--pro-soft); font-size: .95rem; max-width: 62ch; }

/* ---------- final ---------- */
.lp-final {
  background: var(--pro-rose); color: #fff; padding: 4rem 0;
}
.lp-final h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 0 0 .7rem; letter-spacing: -.02em; }
.lp-final .lead { color: rgba(255, 255, 255, .88); }
.lp-final .pro-btn {
  background: #fff; color: var(--pro-rose); border-color: #fff;
}
.lp-final .pro-btn:hover { background: #FDF4F6; border-color: #FDF4F6; color: var(--pro-rose); }

.lp-foot { padding: 2.5rem 0; border-top: 1px solid var(--pro-line); }
.lp-foot p { margin: 0 0 .6rem; max-width: 70ch; }
.lp-foot a { color: var(--pro-soft); }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-copy h1, .lp-h2, .lead { max-width: none; }
  .hero-demo { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ---------- animated hero demo ----------
   The accent a professional would choose. Terracotta rather than the
   Beauty Match rose, so it reads as their colour and not ours, and warm
   enough to sit with the peach and coral in the logo. White text on it is
   6.57:1. */
:root {
  /* The accent a professional would pick, shown on their client's page.
     A light tan from the same family as the lightest stop in the logo.
     A tan header needs dark text: white on it is 1.43, dark ink is 12.88.
     The small badges sit on a white card, so they take a deeper warm tone
     of their own rather than the tan, which would disappear there. */
  --demo-accent: #E8D5BE;
  --demo-on-accent: #1A1214;
  --demo-mark: #7A5A42;
}

.phone-screen { position: relative; min-height: 356px; }
.demo-layer {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
}

/* One 12s loop: read the photo, then show what came out of it. Long dwells
   on both halves so it reads as a demonstration rather than a flicker. */
.demo-scan   { animation: demoScan 12s ease-in-out infinite; }
.demo-result { animation: demoResult 12s ease-in-out infinite; }

@keyframes demoScan {
  0%, 42%   { opacity: 1; }
  48%, 96%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes demoResult {
  0%, 42%   { opacity: 0; transform: translateY(8px); }
  50%, 94%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(8px); }
}

.scan-head {
  padding: .7rem .8rem .5rem; font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--pro-rose);
  display: flex; justify-content: space-between; align-items: baseline;
}
.scan-head span { font-weight: 500; letter-spacing: 0; text-transform: none; color: #8B7B80; }

/* An abstract stand-in for the client's photo. Deliberately not a person:
   a real face here would need rights and would imply a customer we do not
   have. */
.scan-frame {
  position: relative; margin: 0 .8rem; height: 150px; border-radius: 10px;
  overflow: hidden; background: #F6EEEA; border: 1px solid #EDE4E1;
}
.scan-subject {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 46% at 50% 74%, #6B4536 0%, #59392C 45%, transparent 72%),
    radial-gradient(30% 24% at 50% 40%, #C9927A 0%, #B07F69 60%, transparent 78%),
    linear-gradient(#F6EEEA, #EDE1DB);
}
.scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pro-rose), transparent);
  box-shadow: 0 0 12px 2px rgba(190, 59, 87, .45);
  animation: sweep 12s ease-in-out infinite;
}
@keyframes sweep {
  0%        { top: 0; opacity: 0; }
  4%        { opacity: 1; }
  30%       { top: 100%; opacity: 1; }
  34%, 100% { top: 100%; opacity: 0; }
}

.scan-readout { padding: .65rem .8rem; display: grid; gap: .3rem; }
.reading {
  font-size: 9.5px; color: #6B5B60;
  display: flex; justify-content: space-between; gap: .5rem;
  border-bottom: 1px dotted #EDE4E1; padding-bottom: .25rem;
  opacity: 0;
}
.reading b { color: var(--pro-ink); font-size: 10px; }
.reading { animation: readIn 12s ease-out infinite; }
.r1 { animation-delay: 0s; }
.r2 { animation-delay: .55s; }
.r3 { animation-delay: 1.1s; }
.r4 { animation-delay: 1.65s; }
@keyframes readIn {
  0%, 12%  { opacity: 0; transform: translateY(4px); }
  18%, 40% { opacity: 1; transform: translateY(0); }
  46%, 100%{ opacity: 0; transform: translateY(0); }
}

.demo-result { overflow: hidden; }

/* Motion is decoration here: the still frame carries the same meaning, so
   under a reduced-motion preference the routine simply sits there. */
@media (prefers-reduced-motion: reduce) {
  .demo-scan { display: none; }
  .demo-result, .scan-line, .reading { animation: none; opacity: 1; transform: none; }
}

/* ---------- pricing tiers ----------
   The middle tier is raised and outlined because it is the one we expect
   people on, and the ladder is built so that choosing it is obvious rather
   than clever: ten dollars more than solo for four times the scans. */
.tiers {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}
.tier {
  background: var(--pro-card); border: 1px solid var(--pro-line);
  border-radius: 16px; padding: 1.8rem 1.5rem 1.6rem; text-align: center;
  position: relative;
}
.tier.best {
  border-color: var(--pro-rose); border-width: 2px;
  padding-top: 2.1rem;
  box-shadow: 0 18px 40px -26px rgba(52, 30, 38, .35);
}
.tier-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--pro-rose); color: #fff; white-space: nowrap;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 100px;
}
.tier h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.tier-price {
  margin: 0; font-size: 2.35rem; font-weight: 700; line-height: 1; letter-spacing: -.03em;
}
.tier-price span {
  display: block; font-size: .8rem; font-weight: 500;
  color: var(--pro-soft); margin-top: .35rem; letter-spacing: 0;
}
.tier-scans { margin: 1.1rem 0 .3rem; font-size: .95rem; }
.tier-scans b { font-size: 1.1rem; }
.tier-blurb {
  margin: 0 0 1.3rem; color: var(--pro-soft); font-size: .88rem;
  min-height: 2.6em;
}
.tier .pro-btn { width: 100%; }

@media (max-width: 560px) {
  .tier-blurb { min-height: 0; }
}

/* ---------- products you stock ---------- */
.stock-results {
  border: 1px solid var(--pro-line); border-radius: 10px;
  margin: -.6rem 0 1.1rem; overflow: hidden; background: var(--pro-card);
}
.stock-hit {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .65rem .9rem; min-height: 44px;
  background: none; border: 0; border-top: 1px solid var(--pro-line);
  font: inherit; text-align: left; cursor: pointer; color: var(--pro-ink);
}
.stock-hit:first-child { border-top: 0; }
.stock-hit:hover { background: var(--pro-bg); }
.stock-hit span { flex: 1; }
.stock-hit em { font-style: normal; font-size: .78rem; color: var(--pro-soft); white-space: nowrap; }

.stock-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.stock-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #FDF4F6; border: 1px solid #F3D9E0; color: var(--pro-rose);
  border-radius: 100px; padding: .3rem .4rem .3rem .75rem; font-size: .85rem;
}
.stock-chip button {
  width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(190, 59, 87, .12); color: var(--pro-rose);
  font-size: 15px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
}
.stock-chip button:hover { background: var(--pro-rose); color: #fff; }
@media (pointer: coarse) {
  /* The remove control is a lone target inside a chip, so it needs the
     full size rather than the inline exemption. */
  .stock-chip button { width: 32px; height: 32px; }
}

/* ---------- plan picker in settings ----------
   The public pricing table sells; this one just has to make the choice
   available and obvious, so it is a compact row rather than a second
   marketing block. */
.plan-pick {
  display: grid; gap: .8rem; margin: 1rem 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.plan-opt {
  border: 1.5px solid var(--pro-line); border-radius: var(--pro-r);
  padding: 1rem 1.1rem; background: var(--pro-card);
}
.plan-opt.wanted { border-color: var(--pro-rose); }
.plan-opt.current { background: var(--pro-bg); }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.plan-head strong { font-size: 1rem; }
.plan-price { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.plan-price em { font-style: normal; font-size: .75rem; font-weight: 500; color: var(--pro-soft); }
.plan-scans { margin: .3rem 0 .9rem; font-size: .85rem; color: var(--pro-soft); }
.plan-opt .pro-btn { width: 100%; }
.plan-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: 36px; font-size: .82rem; font-weight: 600; color: var(--pro-soft);
  border: 1px dashed var(--pro-line); border-radius: 100px;
}

/* ---------- consumer progress timeline ---------- */
.scan-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 1.1rem;
  background: var(--pro-card); border: 1px solid var(--pro-line);
  border-radius: var(--pro-r); padding: 1rem 1.15rem; margin-bottom: .8rem;
}
.scan-shot {
  width: 110px; height: 110px; border-radius: 10px; overflow: hidden;
  background: var(--pro-bg); border: 1px solid var(--pro-line);
  display: flex; align-items: center; justify-content: center;
}
.scan-shot img { width: 100%; height: 100%; object-fit: cover; }
.no-shot { font-size: .72rem; color: var(--pro-soft); text-align: center; padding: .4rem; }
.scan-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.scan-reads { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .2rem; }
.scan-reads li { font-size: .88rem; color: var(--pro-soft); }
.scan-note {
  margin: .6rem 0 0; font-size: .88rem; padding-left: .7rem;
  border-left: 2px solid var(--pro-line); color: var(--pro-ink);
}
.scan-body .pro-btn { margin-top: .8rem; }

/* ---------- then and now ---------- */
.cmp-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.cmp-shots figure { margin: 0; }
.cmp-shots img, .cmp-shots .no-shot {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--pro-line); background: var(--pro-bg);
  display: flex; align-items: center; justify-content: center;
}
.cmp-shots figcaption {
  margin-top: .4rem; font-size: .82rem; color: var(--pro-soft); text-align: center;
}
.cmp-list { list-style: none; margin: 0; padding: 0; }
.cmp-list li {
  display: grid; gap: .1rem; padding: .7rem 0; border-top: 1px solid var(--pro-line);
}
.cmp-list li:first-child { border-top: 0; }
.cmp-list .c-key {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pro-soft);
}
.cmp-list .c-now { font-weight: 600; }
.cmp-list .c-was { font-size: .84rem; color: var(--pro-soft); }
.cmp-list li.changed .c-now { color: var(--pro-rose); }

@media (max-width: 560px) {
  .scan-row { grid-template-columns: 84px 1fr; gap: .8rem; }
  .scan-shot { width: 84px; height: 84px; }
}

/* ---------- links ----------
   Plain links inside the pro and me pages had no rule, so they fell back to
   the browser default: #0000EE, and #551A8B once visited. That second one
   is purple, which the palette does not use anywhere, and it appeared the
   moment somebody clicked a privacy link. Buttons and nav items carry their
   own colours and are excluded. */
body.pro a:not(.pro-btn):not(.pro-logo):not([class*="nav"]):not(.stock-hit) {
  color: var(--pro-rose);
}
body.pro a:not(.pro-btn):not(.pro-logo):not([class*="nav"]):not(.stock-hit):visited {
  color: var(--pro-rose);
}
body.pro a:not(.pro-btn):not(.pro-logo):not([class*="nav"]):not(.stock-hit):hover {
  color: var(--pro-rose-dark);
}