/* CREATE WITH ELLE
   Shared styles for every page. Change a color or font here
   and it updates everywhere. */

/* Licensed font files go here once you have them, e.g.:
@font-face {
  font-family: "Helvetica World";
  src: url("fonts/HelveticaWorld-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Helvetica World";
  src: url("fonts/HelveticaWorld-Bold.woff2") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "Times New Roman MT";
  src: url("fonts/TimesNewRomanMT-Italic.woff2") format("woff2");
  font-style: italic;
}
*/

:root {
  /* Creams & light neutrals */
  --cream:      #F7F5F4;  /* main background, menu bar, buttons */
  --cream-2:    #F5F0ED;
  --cream-3:    #F4EBE7;
  --blush:      #F3E1E1;  /* main pink: boxes, contact form */
  --blush-2:    #F1D3D8;

  /* Pink accents */
  --pink:       #F4D5DA;
  --pink-2:     #F9D1DB;

  /* Grays & dark */
  --gray-1:     #F1F1F1;
  --gray-2:     #E1E1E1;
  --gray-3:     #B4B4B2;
  --ink:        #545454;  /* main text + buttons */
  --ink-soft:   #666666;  /* softer body text */

  --white:      #FFFFFF;

  --font-sans:  "Helvetica World", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Times New Roman MT", "Times New Roman", Times, serif;

  --col:        540px;
  --gutter:     20px;
  --box-inset:  14px;  /* how far the pink boxes sit in from the text edge */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cream);
}

.site-header__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.brand {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
}

.menu-toggle {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 10px 0 10px 16px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: var(--cream);
  border-bottom: 1px solid var(--gray-2);
  padding: 4px var(--gutter) 16px;
}
.site-nav.is-open { display: flex; }

.site-nav a {
  text-decoration: none;
  font-size: 20px;
  padding: 10px 0;
}
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

@media (min-width: 760px) {
  :root { --col: 680px; --box-inset: 32px; }
  .menu-toggle { display: none; }
  .site-nav,
  .site-nav.is-open {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 26px;
    padding: 0;
    border: 0;
  }
  .site-nav a { font-size: 14px; padding: 4px 0; }
  .site-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
}

/* Page column */

.page {
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Banner image under the header */

.banner {
  height: 190px;
  overflow: hidden;
  background: var(--gray-1);
}
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
@media (min-width: 760px) {
  .banner { height: 340px; }
}

/* Hero spacing when it sits under the banner */
.banner + .page .hero { padding-top: 32px; }
@media (min-width: 760px) {
  .banner + .page .hero { padding-top: 48px; }
}

/* Hero */

.hero { padding: 16px 0 36px; }

.hero__photo {
  width: 112px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 24px;
}

.hero__photo--placeholder {
  background: var(--blush);
  display: grid;
  place-items: center;
}
.hero__photo--placeholder span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}

.hero__title {
  font-size: clamp(32px, 9vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 16px;
}

.hero__title span { display: block; }

/* Homepage headline: always exactly two lines, one per sentence,
   lined up with the pink boxes and sized so the longer line matches their width. */
.hero__title.hero__title--two-line {
  font-size: calc((min(100vw - 2 * var(--gutter), var(--col)) - 2 * var(--box-inset)) / 16.3);
  line-height: 1.12;
  padding: 0 var(--box-inset);
}
.hero__title--two-line span { white-space: nowrap; }

/* Small intro under the homepage headline, lined up with the boxes */
.hero__intro {
  padding: 0 var(--box-inset);
  margin-top: 14px;
}
.hero__intro .hero__intro-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0 0 6px;
}
.hero__intro p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.hero__intro p:last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  .hero__intro { margin-top: 18px; }
  .hero__intro .hero__intro-title { font-size: 14px; }
  .hero__intro p { font-size: 17px; }
}

.hero__text {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 36ch;
  margin: 0;
}

@media (min-width: 760px) {
  .hero { padding: 56px 0 56px; }
  .hero__photo { width: 140px; margin-bottom: 32px; }
  .hero__title { font-size: clamp(30px, 4.4vw, 38px); }
  .hero__text { font-size: 18px; }
}

/* Offer cards */

.offers {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 var(--box-inset) 64px; /* side padding pulls the boxes in from the screen edges */
}
@media (min-width: 760px) {
  .offers { gap: 24px; }
}
/* Boxes right under the banner (homepage) */
.offers--top { padding-top: 28px; }
@media (min-width: 760px) {
  .offers--top { padding-top: 44px; }
}

/* Hidden from view, still read by screen readers and search engines */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.card {
  display: block;
  text-decoration: none;
  background: var(--blush);
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  padding: 24px 22px;
  transition: background-color 0.2s ease;
}

.card--feature { padding-top: 28px; padding-bottom: 24px; }

.card__title {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}

.card__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  margin: 4px 0 0;
}

.card p:not(.card__sub) {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 12px 0 0;
}

/* Inner pages: no photo, a bit more room above the headline */
.hero--page { padding-top: 32px; }
@media (min-width: 760px) {
  .hero--page { padding-top: 64px; }
  .hero--page .hero__title span { white-space: normal; }
}

/* Primary button */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin-top: 22px;
  padding: 0 20px;
  border-radius: 4px;
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.card p.card__lede {
  font-weight: 700;
  color: var(--ink);
}

.card p.card__hook {
  font-size: 16px;
  color: var(--ink);
  margin-top: 14px;
}

/* Two-button choice (Work With Me card) */
.card p.card__choose {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-top: 22px;
}
.button-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.button-group .button {
  margin-top: 0;
  text-decoration: none;
  justify-content: space-between;
}
@media (hover: hover) {
  .button-group .button:hover .arrow { transform: translateX(4px); }
}
@media (min-width: 760px) {
  .button-group { flex-direction: row; }
  .button-group--stack { flex-direction: column; }
  .button-group--stack .button { max-width: none; }
  .button-group .button { flex: 1; max-width: none; }
}

/* Text link with arrow (other cards) */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1.5px solid var(--ink);
}

a.link { text-decoration: none; }
@media (hover: hover) {
  a.link:hover .arrow { transform: translateX(4px); }
}
.arrow { display: inline-block; transition: transform 0.2s ease; }

/* Cards are pink, and turn white on hover or tap.
   Buttons are light cream, and turn pink when their card changes. */
.card:active { background: var(--white); }
.card:active .button { background: var(--blush); }
@media (hover: hover) {
  .card:hover { background: var(--white); }
  .card:hover .button { background: var(--blush); }
  .button-group .button:hover { background: var(--blush-2); }
  .card--static:hover .button:not(:hover) .arrow { transform: none; }
  .card:hover .arrow { transform: translateX(4px); }
}

@media (min-width: 760px) {
  .card { padding: 30px 32px; }
  .card--feature { padding: 36px 32px 32px; }
  .button { justify-content: space-between; max-width: 320px; }
}

/* ---------- Toolkit sales page ---------- */

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.hero__copy { margin-top: 4px; }
.hero__copy p {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 0 0 12px;
}
.hero__copy .hero__aside {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
  margin-top: 16px;
}

/* Buttons that sit on their own (not inside a card) */
.cta { margin-top: 24px; }
.cta .button { margin-top: 0; justify-content: space-between; }
.button--pink { background: var(--blush); }
.button--outline {
  background: transparent;
  border: 1px solid var(--ink);
  min-height: 46px;
  font-size: 14px;
}
.cta:has(a[href^="#pending"])::after {
  content: "Link coming soon";
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
@media (hover: hover) {
  .cta .button:hover { background: var(--white); }
  .cta .button--pink:hover { background: var(--blush-2); }
  .cta .button--outline:hover { background: var(--cream); }
  .cta .button:hover .arrow { transform: translateX(4px); }
}
@media (min-width: 760px) {
  .cta .button { display: inline-flex; min-width: 280px; max-width: none; }
  .cta .button--outline { min-width: 0; gap: 16px; }
}

/* Sections divided by thin lines */
.section {
  border-top: 1px solid var(--gray-2);
  padding: 40px 0;
}
.section__title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 16px;
}
.section__title--lg { font-size: 32px; line-height: 1.08; letter-spacing: -0.025em; color: #252525; }
.section > p {
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 12px;
}
.section > .section__lead { color: var(--ink); margin-top: 18px; }
@media (min-width: 760px) {
  .section { padding: 56px 0; }
  .section__title { font-size: 30px; }
  .section__title--lg { font-size: 42px; }
}

/* "You'll walk away knowing how to" rows: small star + statement, thin lines between */
.outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.outcomes li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--gray-2);
}
.outcomes li:last-child { border-bottom: 0; }
.outcomes li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 13px;
  font-size: 11px;
  color: var(--ink-soft);
}

/* 14-day roadmap */
.roadmap {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.phase {
  background: var(--cream-3);
  border-radius: 6px;
  padding: 20px;
}
.phase__days {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.phase__title {
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.phase p:not(.phase__days) {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}
@media (min-width: 760px) {
  .roadmap { grid-template-columns: 1fr 1fr; }
  .phase { padding: 24px; }
}

/* Final Toolkit call to action */
.closing {
  background: var(--blush);
  border-radius: 6px;
  padding: 32px 22px;
  margin: 8px 0;
}
.closing__title {
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.closing p {
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 12px;
}
@media (min-width: 760px) {
  .closing { padding: 48px 40px; }
  .closing__title { font-size: 34px; }
}

/* FAQ */
.faq details { border-bottom: 1px solid var(--gray-2); }
.faq details:first-child { border-top: 1px solid var(--gray-2); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 52ch;
}

/* Toolkit-owner Clarity Call: small and quiet so it doesn't compete */
.clarity {
  background: var(--blush-2);
  border-radius: 6px;
  padding: 22px 20px;
  margin: 0 0 64px;
}
.clarity__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.clarity__title {
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 8px;
}
.clarity p:not(.clarity__label) {
  font-size: 15px;
  margin: 0 0 8px;
  max-width: 52ch;
}
.clarity .cta { margin-top: 16px; }
.clarity .cta .button { display: inline-flex; gap: 16px; padding: 0 18px; }
@media (min-width: 760px) {
  .clarity { padding: 26px 28px; }
}

/* ---------- About page story ---------- */

.about-story { padding-bottom: 64px; }
.about-story .hero__title { margin-bottom: 20px; }
/* Magazine style: photo sits to the right and the story wraps around it */
.about-photo {
  display: block;
  width: 160px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 6px;
}
.about-photo--float {
  float: right;
  margin: 6px 0 10px 18px;
}
.about-story::after { content: ""; display: block; clear: both; }
@media (min-width: 760px) {
  .about-photo { width: 270px; }
  .about-photo--float { margin: 6px 0 16px 32px; }
}
.about-story p {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 0 14px;
}
.about-story .about-story__signoff {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.35;
  color: var(--ink);
  margin-top: 22px;
}

/* ---------- Link rows (About and Contact pages) ---------- */

.link-list { border-bottom: 1px solid var(--gray-2); }
.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--gray-2);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.link-list strong {
  display: block;
  font-size: 17px;
  line-height: 1.3;
}
.link-list small {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.link-list .arrow { font-size: 18px; flex: none; }
.link-list a:active .arrow { transform: translateX(4px); }
@media (hover: hover) {
  .link-list a:hover .arrow { transform: translateX(4px); }
  .link-list a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
}
.link-list a[href^="#pending"] strong,
.link-list a[href^="#pending"] .arrow { color: var(--ink-soft); }
.link-list a[href^="#pending"] .arrow { visibility: hidden; }
@media (hover: hover) {
  .link-list a[href^="#pending"]:hover strong { text-decoration: none; }
}

/* ---------- Contact page ---------- */

.contact-ugc {
  font-size: 17px;
  margin: 0 0 14px;
}
.contact-ugc a { text-underline-offset: 4px; word-break: break-word; }
.contact-portfolio { font-weight: 700; }
@media (hover: hover) {
  .contact-portfolio:hover .arrow { transform: translateX(4px); }
}

.contact-form {
  background: var(--blush);
  border-radius: 6px;
  padding: 16px 14px 14px;
  margin-bottom: 64px;
}
.contact-form__title {
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.field-row { display: grid; gap: 0 16px; }
.field { display: block; margin-bottom: 9px; }
.field > span {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}
.field abbr { text-decoration: none; }
.field small { color: var(--ink-soft); font-size: 13px; }
.field input,
.field textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px keeps iPhones from zooming in */
  color: var(--ink);
  background: var(--cream);
  border: 0;
  border-bottom: 1px solid var(--ink-soft);
  border-radius: 0;
  padding: 8px 10px;
  -webkit-appearance: none;
  appearance: none;
}
.field input { height: 38px; }
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus,
.field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; }

.form-submit {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
@media (hover: hover) {
  .form-submit:hover { background: var(--cream); }
}
.form-status { font-size: 14px; margin: 10px 0 0; }
.form-status:empty { display: none; }

/* Not connected yet: dashed button + note, so it never looks live */
.contact-form form.is-pending .form-submit { border-style: dashed; border-color: var(--gray-3); cursor: default; }
.contact-form form.is-pending::after {
  content: "Form not connected yet";
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

@media (min-width: 760px) {
  .contact-form { padding: 22px 22px 18px; max-width: 480px; }
  .contact-form__title { font-size: 22px; margin-bottom: 12px; }
  .field-row { grid-template-columns: 1fr 1fr; }
}

.thanks { padding-bottom: 96px; }
.thanks__back { margin-top: 20px; }

/* Footer */

.site-footer {
  border-top: 1px solid var(--gray-2);
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 20px;
}
.site-footer__links a {
  font-size: 14px;
  padding: 6px 0;
  text-decoration: none;
}
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }

.site-footer__small {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0;
}

/* Placeholder links
   Any link with href="#pending…" is not connected yet.
   These styles flag it so it never looks live. */

a[href^="#pending"] { cursor: default; }

.card[href^="#pending"] .button {
  background: transparent;
  color: var(--ink);
  border: 1px dashed var(--gray-3);
}
.card[href^="#pending"] .link {
  border-bottom-style: dashed;
  border-bottom-color: var(--gray-3);
}
.card[href^="#pending"]::after {
  content: "Link coming soon";
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.button[href^="#pending"] {
  background: transparent;
  color: var(--ink);
  border: 1px dashed var(--gray-3);
}
.button-group:has(a[href^="#pending"])::after {
  content: "Links coming soon";
  font-size: 12px;
  color: var(--ink-soft);
  flex-basis: 100%;
}
.button-group { flex-wrap: wrap; }

.site-footer__links a[href^="#pending"] { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .arrow { transition: none; }
}