/* The signup steps and the assessment in the TOX design system (White & Kelp),
   loaded only when the new screens are on (JOURNEY_PREVIEW). Colour, type and
   shape only: every step, form, video and save underneath is the same page.
   With the switch off this file is never linked and app.css is unchanged. */

body.skin-journey {
  --ink: #15191A;
  --soft: #3E4547;
  --muted: #61696B;
  --gold: #1F5E64;
  --gold-soft: #CDD2CE;
  --mag: #1F5E64;
  --warm: #FFFFFF;
  --tint: #F5F4EF;
  --card: #FFFFFF;
  --line: #E7E7E1;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #FFFFFF;
  color: #15191A;
  font-family: var(--sans);
}

/* Header: the TOX wordmark, with TOX peeking in, as on the reveal. */
.skin-journey .shell .hd,
.skin-journey.assessment-page .hd {
  position: relative;
  background: #FFFFFF;
  border-bottom: 0;
  padding: 14px 20px;
  min-height: 58px;
}
.skin-journey .shell .hd { text-align: center; overflow: visible; }
.skin-journey .journey-mark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .18em;
  color: #15191A;
  text-decoration: none;
  line-height: 30px;
}
/* Higher than app.css's ".shell .hd img { height: 28px }", which would squash him flat.
   TOX sits whole at the right edge of the page's column (560 wide, 22 in), level with the
   wordmark: on a phone 16px in from the screen edge, on a computer beside the column, never
   over text and never off the page. */
.skin-journey .hd .journey-peek {
  position: absolute;
  right: max(16px, calc(50% - 258px));
  top: 12px;
  width: 40px;
  height: auto;
  aspect-ratio: 360 / 369;
  margin: 0;
  transform: none;
  pointer-events: none;
}

.skin-journey .wrap { padding: 8px 22px 44px; }

/* Step dots: kelp for done, ink for now, hairline for ahead. */
.skin-journey .progress { gap: 6px; margin: 8px 0 10px; }
.skin-journey .pdot { width: 22px; height: 4px; border-radius: 999px; background: #E7E7E1; }
.skin-journey .pdot.done { background: #1F5E64; }
.skin-journey .pdot.now { background: #15191A; transform: none; }
.skin-journey .plabel,
.skin-journey.signup-page .plabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: #61696B;
  margin-bottom: 26px;
}

/* Her words in serif. */
.skin-journey h1,
.skin-journey .promise h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -.01em;
  color: #15191A;
  text-wrap: balance;
  margin-bottom: 14px;
}
.skin-journey .promise { margin-bottom: 26px; }
.skin-journey .lede {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 28px;
  color: #3E4547;
  text-wrap: pretty;
}
.skin-journey .card .lede { font-family: var(--sans); font-size: 16px; line-height: 24px; text-align: left; }

/* Her videos: same Shorts, softer frame. */
.skin-journey .video-embed { margin-bottom: 26px; }
.skin-journey .video-embed-frame { border-radius: 26px; box-shadow: none; background: #133A3E; }

/* Cards: hairline, no shadow, no gradient rail. */
.skin-journey .card {
  border: 1px solid #E7E7E1;
  border-radius: 24px;
  box-shadow: none;
  padding: 24px 22px;
}
.skin-journey .card.accent:before { display: none; }
.skin-journey .signin-card { background: #F5F4EF; border-color: #F5F4EF; margin-top: 14px; }
.skin-journey .signin-heading { font-family: var(--serif); font-size: 22px; line-height: 28px; }
.skin-journey .eyebrow {
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 600;
  color: #1F5E64;
}

/* Fields. */
.skin-journey label.field { font-size: 14px; font-weight: 600; color: #15191A; margin: 16px 0 6px; }
.skin-journey input[type="text"],
.skin-journey input[type="email"],
.skin-journey input[type="tel"] {
  border: 1px solid #CDD2CE;
  border-radius: 14px;
  background: #FFFFFF;
  padding: 14px 16px;
  min-height: 52px;
}
.skin-journey input[type="text"]:focus,
.skin-journey input[type="email"]:focus,
.skin-journey input[type="tel"]:focus {
  outline: none;
  border-color: #1F5E64;
  box-shadow: 0 0 0 3px #E4EFEF;
}
.skin-journey .check { font-size: 13px; line-height: 19px; color: #61696B; }
.skin-journey .check input { width: 20px; height: 20px; accent-color: #1F5E64; }
.skin-journey .check a, .skin-journey a { color: #1F5E64; }

/* One kelp button per screen; the secondary is a quiet outline. */
.skin-journey .btn,
.skin-journey button.btn {
  background: #1F5E64;
  border-radius: 16px;
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: none;
  transition: transform .12s ease;
}
.skin-journey .btn:hover, .skin-journey button.btn:hover { background: #133A3E; }
/* A link drawn as the button (the not-found page's way home) keeps white words on kelp. */
.skin-journey a.btn, .skin-journey a.btn:hover { color: #FFFFFF; text-decoration: none; }
.skin-journey .btn:active, .skin-journey button.btn:active { transform: scale(.98); }
.skin-journey .btn-ghost,
.skin-journey button.btn-ghost {
  border: 1px solid #CDD2CE;
  border-radius: 16px;
  min-height: 52px;
  font-weight: 600;
  background: #FFFFFF;
}
.skin-journey .note { color: #61696B; font-size: 14px; }

/* How-to tips as a numbered list in kelp. */
.skin-journey .tips { list-style: none; padding: 0; counter-reset: tip; }
.skin-journey .tips li {
  position: relative;
  counter-increment: tip;
  padding-left: 40px;
  margin: 14px 0;
  color: #15191A;
  line-height: 24px;
}
.skin-journey .tips li::before {
  content: counter(tip);
  position: absolute;
  left: 0;
  top: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #1F5E64;
  color: #1F5E64;
  font-size: 13px;
  font-weight: 600;
  line-height: 25px;
  text-align: center;
}
.skin-journey .account-note,
.skin-journey .prep-note { color: #3E4547; font-size: 15px; line-height: 23px; }

/* Who sees what you share (NIC-12). */
.skin-journey .privacy-card { color: #3E4547; font-size: 15px; line-height: 23px; }
.skin-journey .privacy-heading { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 30px; color: #15191A; }
.skin-journey .privacy-list li::marker { color: #1F5E64; }
.skin-journey .privacy-card a { color: #1F5E64; }

.skin-journey .cal-wrap { border-radius: 20px; border-color: #E7E7E1; }

.skin-journey .err { color: #15191A; background: #F5F4EF; border-left: 3px solid #15191A; border-radius: 12px; }

.skin-journey .ft { border-top: 1px solid #E7E7E1; background: #FFFFFF; }
.skin-journey .ft .dis { color: #61696B; font-size: 12.5px; line-height: 18px; }

/* The assessment header: wordmark left, save-for-later right. */
.skin-journey.assessment-page .hd { display: flex; align-items: center; justify-content: space-between; }
.skin-journey .come-back-btn,
.skin-journey button.come-back-btn {
  color: #1F5E64;
  border-color: #CDD2CE;
  font-size: 13px;
  padding: 8px 14px;
}
.skin-journey .come-back-btn:hover { background: #E4EFEF; }
.skin-journey .assessment-portal-link { color: #1F5E64; }