/* Leading Women Entrepreneurs — coming-soon page
   Built to I.E. Design's "26-LWE-02 1920x1080 & Mobile template Layout Final" PDF.

   Every measurement below is taken from that PDF and written in the PDF's own
   units, multiplied by a scale:

   Desktop (768px and up) — PDF desktop artboard = 1920 units wide
     --hu  masthead scale: 82% of the supplied masthead (0.82px per unit)
           (the Sept 30 update moved the logo/nav 11.5 units right, so the logo
           sits 52px from the edge at 82%, the same as the PDF at 100%)
     --u   everything else: 75% of the PDF (0.75px per unit → 1440px-wide layout)
     Both hold at those sizes on wide, tall windows and shrink together when the window
     is narrower than 1440px or too short to show the whole chair.
     The masthead art is pinned left (black panel never widens), red runs to the
     right edge, and the Join button keeps its right margin.

   Mobile (under 768px) — PDF mobile artboard = 262.08 units wide (= the 390px
     mobile masthead), scaled to the screen width, capped at 430px and centered.

   Text baselines are placed from the PDF's baseline positions using Poppins'
   metrics (ascent 1.05em, descent 0.35em): with line-height L and size S, the
   first baseline sits L/2 + 0.35S below the top of the line box. */

:root {
  /* LWE website color palette. Red uses RGB 236|28|36 — the value in the palette
     sheet and in every supplied PNG (the sheet's hex, #EB2027, doesn't match it). */
  --red: #ec1c24;
  --dark-gray: #6d6e70;
  --medium-gray: #838485;
  --black: #000;
  --white: #fff;

  /* Desktop scale also shrinks with window height so the whole chair (to the end of its
     shadow) fits on the first screen: masthead 240 × 0.82 + chair-shadow bottom 1226.55
     × 0.75 = 1116.7px at full size. */
  --u: min(0.75px, calc(100cqw / 1920), calc(100vh * 0.75 / 1116.7));
  --hu: min(0.82px, calc(100cqw * 0.82 / 1440), calc(100vh * 0.82 / 1116.7));
  --m: min(calc(430px / 262.08), calc(100cqw / 262.08));

  --font: "Poppins", system-ui, sans-serif;

  /* hover fade for every button and link */
  --fade: .3s ease;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  container-type: inline-size;   /* cqw = page width without the scrollbar */
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

/* Line breaks: br.d desktop only, br.m mobile only */
br.m { display: none; }

/* ---------- Masthead ---------- */

.masthead {
  position: relative;
  height: calc(240 * var(--hu));
  overflow: hidden;
  overflow: clip;               /* can't be scrolled sideways (e.g. by focus), unlike hidden */
  background: var(--red);
}
.masthead-art {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1920 * var(--hu));
  height: calc(240 * var(--hu));
  max-width: none;
}

/* Join button: I.E. Design's main + rollover PNGs, 224×63 at x 1651–1875 in the updated masthead */
.btn-join {
  position: absolute;
  top: calc(134.5 * var(--hu));
  right: calc(45 * var(--hu));
  width: calc(224 * var(--hu));
  height: calc(63 * var(--hu));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.btn-join img { width: 100%; height: 100%; }
.btn-join .over { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade); }
.btn-join:hover .over,
.btn-join:focus-visible .over { opacity: 1; }   /* rollover fades in over the main image */
.btn-join:focus-visible { outline-color: var(--white); }

/* ---------- Content ---------- */

.content {
  width: calc(1920 * var(--u));
  margin: 0 auto;
  padding-bottom: calc(186 * var(--u));
}

h1 {
  margin: calc(115.84 * var(--u)) 0 0;
  font-size: calc(72 * var(--u));
  line-height: calc(98 * var(--u));
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
h1 span { display: block; }

/* The PDF's photo box keeps the page spacing; the photo itself is larger (full shadow)
   and positioned so the chair sits exactly where the PDF has it. Multiply keeps its white
   background invisible wherever it overlaps anything. */
.chair-spot {
  position: relative;
  width: calc(1105.56 * var(--u));
  height: calc(819.04 * var(--u));
  margin: calc(67.08 * var(--u)) 0 0 calc(432.97 * var(--u));
}
.chair {
  position: absolute;
  left: calc(-77.62 * var(--u));
  top: calc(21.23 * var(--u));
  width: calc(1193.4 * var(--u));
  height: calc(839.8 * var(--u));
  max-width: none;
  mix-blend-mode: multiply;
}

.copy {
  margin: calc(39.48 * var(--u)) 0 0 calc(305 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: calc(70 * var(--u));
  white-space: nowrap;
}
.copy p { margin: 0 0 calc(70 * var(--u)); }
.copy p:last-child { margin-bottom: 0; }

/* The PDF sets this last desktop line 72 below the one above it (every other line is 70) */
.nudge { display: inline-block; padding-top: calc(2 * var(--u)); }

.link-join {
  padding: 0;
  border: 0;
  background: none;
  color: var(--red);
  font-size: 1.05em;            /* 42 on 40 in the PDF */
  font-weight: 600;
  line-height: 1;               /* keeps the line box at the paragraph's leading */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--fade);
}
.link-join:hover { text-decoration-color: currentColor; }

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

.site-footer {
  height: calc(175 * var(--u));
  background: var(--black);
  color: var(--white);
}
.foot-inner { position: relative; height: 100%; }

.copyright,
.privacy-link {
  position: absolute;
  top: calc(74.65 * var(--u));  /* baseline 95.9 below the footer's top edge */
  margin: 0;
  font-size: calc(25 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
/* Left edge lines up with the logo (63.5 in the updated masthead); the right margin
   mirrors it, as in the PDF (copyright 52 / icon 52.98 against a logo at 52) */
.copyright { left: calc(63.5 * var(--hu)); }
.privacy-link {
  right: calc(64.48 * var(--hu) + (67.9 + 39.12) * var(--u));
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  text-transform: uppercase;
  transition: text-decoration-color var(--fade);
}
.privacy-link:hover { text-decoration-color: currentColor; }

.mail {
  position: absolute;
  top: calc(53.96 * var(--u));
  right: calc(64.48 * var(--hu));
  width: calc(67.9 * var(--u));
  height: calc(67.9 * var(--u));
  border-radius: 50%;
  color: var(--white);
}
.mail svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the filled rollover icon covers the outline one exactly, so it just fades in on top */
.mail .over { opacity: 0; transition: opacity var(--fade); }
.mail:hover .over,
.mail:focus-visible .over { opacity: 1; }

.site-footer :focus-visible { outline-color: var(--white); }

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  br.m { display: inline; }
  br.d { display: none; }

  .masthead {
    height: calc(245.02 * var(--m));
    /* Black/red bands behind the art: they show past the 430px cap (continuing to the
       screen edges) and through the PNG's see-through pixels — its semi-transparent blend
       row at the join, over red, gives the file's intended 50% blend. */
    background: linear-gradient(var(--black) calc(145.15 * var(--m)), var(--red) calc(145.15 * var(--m)));
  }
  .masthead-art {
    left: calc(50% - 131.04 * var(--m));
    /* the PNG starts with one transparent pixel row; shift up by it so the art sits at the top */
    top: calc(-262.08 / 1170 * var(--m));
    width: calc(262.08 * var(--m));
    height: auto;
  }
  .btn-join {
    top: calc(178.82 * var(--m));
    left: calc(50% - 131.04 * var(--m) + 73.58 * var(--m));
    right: auto;
    width: calc(114.91 * var(--m));
    height: calc(32.25 * var(--m));
  }

  .content {
    width: calc(262.08 * var(--m));
    padding-bottom: calc(39.94 * var(--m));
  }
  h1 {
    margin-top: calc(32.08 * var(--m));
    font-size: calc(18 * var(--m));
    line-height: calc(24 * var(--m));
    /* the PDF's mobile headline is centered 0.56 units right of the artboard's center */
    position: relative;
    left: calc(0.56 * var(--m));
  }
  h1 .s2 { margin-top: calc(13 * var(--m)); }

  .chair-spot {
    width: calc(224.28 * var(--m));
    height: calc(177.62 * var(--m));
    margin: calc(23.55 * var(--m)) 0 0 calc(18.5 * var(--m));
  }
  .chair {
    left: calc(-17.44 * var(--m));
    top: calc(5.77 * var(--m));
    width: calc(255.93 * var(--m));
    height: calc(180.1 * var(--m));
  }

  .copy {
    margin: calc(24.13 * var(--m)) 0 0 calc(18.62 * var(--m));
    font-size: calc(10 * var(--m));
    line-height: calc(17 * var(--m));
  }
  .copy p { margin-bottom: calc(17 * var(--m)); }
  .link-join { font-size: 1.1em; }          /* 11 on 10 in the PDF */
  .nudge { display: inline; padding: 0; }

  .site-footer { height: calc(145.56 * var(--m)); }
  .foot-inner { width: calc(262.08 * var(--m)); margin: 0 auto; }
  .copyright,
  .privacy-link {
    left: calc(18.62 * var(--m));
    right: auto;
    font-size: calc(10 * var(--m));
  }
  .copyright { top: calc(32.76 * var(--m)); }     /* baseline 41.26 */
  .privacy-link { top: calc(57.76 * var(--m)); }  /* baseline 66.26 */
  .mail {
    top: calc(87.01 * var(--m));
    left: calc(18.29 * var(--m));
    right: auto;
    width: calc(34.22 * var(--m));
    height: calc(34.22 * var(--m));
  }
}

/* ---------- Popups (shared) ---------- */

dialog {
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: 0;
  overscroll-behavior: contain;
}
dialog::backdrop { background: rgb(0 0 0 / .72); }

.close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--black);
}
.close svg { display: block; width: 100%; height: 100%; }

/* ---------- Let's Connect popup ---------- */

.signup {
  width: min(720px, calc(100% - 32px));
  padding: 48px 44px 40px;
  border-top: 8px solid var(--red);
  background: var(--white);
  color: var(--black);
}
/* both popups (signup + privacy) open with the same fade-and-rise */
dialog[open] { animation: rise .22s ease-out; }
dialog[open]::backdrop { animation: fade .22s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade { from { opacity: 0; } }

.signup h2 {
  margin: 0 0 6px;
  color: var(--red);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}
.signup .lede {
  margin: 0 0 26px;
  color: var(--dark-gray);
  font-size: 14px;
  line-height: 1.4;
}

.signup-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.signup-form label {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.signup-form .req { color: var(--red); margin-left: 2px; }

.signup-form input:not([type="checkbox"], [type="radio"]) {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--medium-gray);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font: 400 15px/1.2 var(--font);
}
.signup-form input:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 1px var(--black);
}
.signup-form input[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}

.signup-form fieldset { margin: 6px 0 26px; padding: 0; border: 0; }
.signup-form legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.signup-form legend.caps { letter-spacing: 0.06em; text-transform: uppercase; }
.signup-form .hint { margin: -4px 0 10px; color: var(--dark-gray); font-size: 12px; line-height: 1.3; }

.choices { display: grid; gap: 10px; }
.choices.cols { grid-template-columns: 1fr 1fr; column-gap: 24px; }

.signup-form .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: var(--dark-gray);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  transition: color var(--fade);
}
.signup-form .check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}
.signup-form .check:hover { color: var(--black); }
.signup-form .check.fine { font-size: 11.5px; line-height: 1.4; }
.signup-form .check a { color: var(--black); text-underline-offset: 2px; transition: color var(--fade); }
.signup-form .check a:hover { color: var(--red); }

.signup-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.error { margin: -4px 0 16px; color: var(--red); font-size: 13px; line-height: 1.3; }

.btn-submit {
  width: 100%;
  margin-top: 6px;
  padding: 16px 20px;
  border: 0;
  border-radius: 0;
  background: var(--red);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color var(--fade);
}
.btn-submit:hover,
.btn-submit:focus-visible { background: var(--black); }
.btn-submit[disabled] { opacity: .6; cursor: progress; }

/* ---------- Privacy Policy + Terms popups (black on white only) ---------- */

.policy {
  width: min(640px, calc(100% - 32px));
  padding: 40px 40px 36px;
  background: var(--white);
  color: var(--black);
  font-size: 12px;
  line-height: 1.6;
}
.policy h2,
.policy h3 { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.6; }
.policy h2 { text-transform: uppercase; letter-spacing: 0.06em; }
.policy h3 { margin-top: 18px; }
.policy p { margin: 0 0 10px; }
.policy h2 + p { margin-bottom: 16px; }
.policy ul { margin: 0 0 10px; padding-left: 18px; }
.policy li { margin-bottom: 2px; }
.policy a { color: var(--black); }
.policy article:focus { outline: none; }

/* iPhones zoom the page when a field's text is under 16px — keep 16px on touch screens */
@media (pointer: coarse) {
  .signup-form input:not([type="checkbox"], [type="radio"]) { font-size: 16px; }
}

@media (max-width: 480px) {
  .signup { padding: 44px 22px 28px; }
  .signup-form .row { grid-template-columns: 1fr; gap: 0; }
  .choices.cols { grid-template-columns: 1fr; }
  .signup h2 { font-size: 24px; }
  .policy { padding: 36px 22px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}