/* Lead funnel pages - member.joindomas.com + pro.joindomas.com (2026-09-04).
   Loads AFTER style.css: tokens, .btn-link, .display-heading, .pp-* form
   and .faq-* all come from there so the form is the SAME one as
   joindomas.com/#join and /pros/#apply. This file only adds the funnel
   chrome: no site nav, form in the hero, proof beside it, one CTA. */

.fn-body { background: var(--sage); }
.fn-body.fn-dark { background: var(--ink-2); }

/* ---- Top bar: logo + one small exit. Not the site nav on purpose. ---- */
.fn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 7%;
}
.fn-bar-logo { height: 34px; width: auto; display: block; filter: invert(1) brightness(2); }
.fn-bar-login { font-size: 15px; color: var(--body-light); }
.fn-bar-login:hover { color: var(--white); }

/* ---- Hero: copy + proof on one side, the form on the other ---- */
/* Same hero photo as joindomas.com, ink-2 100% -> 85% -> 0% left to right. */
.fn-top { position: relative; background: var(--ink-2); }
.fn-top .photo-overlay-img { object-position: 70% 50%; }
.fn-top-scrim { background: linear-gradient(to right, rgb(47 58 54 / 100%), rgb(47 58 54 / 85%), rgb(47 58 54 / 0%)); } /* --ink-2 */
.fn-bar, .fn-hero { position: relative; z-index: 1; }
.fn-hero { padding: 24px 7% 90px; }
.fn-hero-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "left" "card"; gap: 36px; align-items: start; }
.fn-left { grid-area: left; display: flex; flex-direction: column; gap: 36px; }
.fn-copy { display: flex; flex-direction: column; gap: 22px; }
.fn-proof-wrap { display: flex; flex-direction: column; gap: 22px; }
.fn-card { grid-area: card; }
.fn-eyebrow { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--light-green); }
.fn-hero h1 { margin: 0; color: var(--white); line-height: 1.02; }
.fn-hero h1 em { font-style: normal; color: var(--light-green); }
/* Equal HEIGHT, auto width - matches the shared .appstore-badge/.play-badge
   classes (style.css) used unmodified everywhere else on the site. The
   Apple and Google badge SVGs have different native aspect ratios, so
   forcing equal WIDTH (the prior version of this rule) forced unequal
   height instead - the opposite of what "same size" means for a badge pair. */
.fn-store-badges { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; flex-wrap: wrap; }
.fn-sub { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--sage); opacity: 0.9; }

/* Proof rows sit right next to the form, not in a footer */
.fn-proof { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fn-proof li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--sage); }
.fn-proof svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; color: var(--light-green); }
.fn-proof strong { font-weight: 600; }

/* The 1%-locked offer tile (pro page). Gated by JS on the backend's exact cutoff. */
.fn-offer {
  display: flex; align-items: center; gap: 18px;
  margin-top: 6px; padding: 18px 20px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--white) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
}
.fn-offer-pct { font-family: var(--font-heading); font-weight: 200; font-size: 56px; line-height: 1; color: var(--gold); letter-spacing: -0.02em; }
.fn-offer-copy { display: flex; flex-direction: column; gap: 4px; color: var(--white); font-size: 15px; line-height: 1.4; }
.fn-offer-copy strong { font-weight: 600; }
.fn-offer-copy span { color: var(--body-light); }

/* ---- Form card. Reuses .pp-form untouched; this is just the frame. ---- */
.fn-card {
  background: hsl(0deg 0% 100% / 95%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 24px 28px;
}
.fn-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.fn-card-head h2 { margin: 0; font-family: var(--font-heading); font-weight: 300; font-size: 28px; letter-spacing: -0.01em; color: var(--ink); }
.fn-card-free { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.fn-card .pp-label-gap { margin-top: 22px; }
.fn-card .pp-checkbox-row { margin-top: 22px; }
.fn-card .pp-form-nav { margin-top: 12px; }
.fn-card .pp-form-done h3 { font-family: var(--font-heading); font-weight: 300; font-size: 32px; }
.fn-card-foot { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); display: flex; gap: 8px; align-items: flex-start; }
.fn-card-foot svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
/* Progress reads as a bar, not three dots, so step 1 feels 1/2 done */
.fn-card .pp-dots { gap: 6px; }
.fn-card .pp-dot { width: 26px; height: 4px; border-radius: 2px; }

/* ---- Steps band: centered head, one card per step, the real app screen for that
   step rising out of the bottom of its card (clipped by the card) ---- */
.fn-steps { background: var(--moss); padding: 3% 5% 0; overflow: hidden; }
.fn-steps-head { text-align: center; margin: 0 auto 10px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.fn-steps .fn-eyebrow { color: var(--sage); opacity: 0.8; }
.fn-steps h2 { margin: 0; color: var(--white); }
.fn-steps-sub { margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--sage); opacity: 0.9; }
.fn-steps-grid { display: grid; grid-template-columns: 1fr; gap: 60px; margin: 0; padding: 0; list-style: none; }
.fn-step {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 36px 28px 0;
  border-radius: var(--radius);
  overflow: visible; /* phone bleeds past the card; .fn-steps below is the one real clip boundary */
}
.fn-step:not(:has(.fn-step-phone)) { padding-bottom: 36px; }
.fn-steps:not(:has(.fn-step-phone)) { padding-bottom: 100px; }
.fn-step-num {
  font-family: var(--font-heading); font-weight: 200; font-size: 64px; line-height: 1; letter-spacing: -0.03em;
  color: var(--light-green);
}
.fn-step h3 { margin: 4px 0 0; color: var(--white); }
.fn-step p { margin: 0 0 32px; font-size: 16px; line-height: 1.55; color: var(--white); opacity: 0.92; }
/* Real iPhone mockup (Figma community kit uyYXaRJ9L5lgnKZDzo8IfY, node 31:180 - frame
   exported with its screen layer hidden, so images/iphone-frame.webp has a genuine
   transparent cutout, not a fake border). Our screenshot sits behind the frame image,
   positioned to the frame's real screen-window geometry (measured off the Figma node,
   not guessed) so it's masked by the frame's own rounded hole - no border-radius needed
   on the shot itself. margin-top:auto is the actual fix for the old gap: cards are equal
   height (grid default stretch), so a shorter-copy card has leftover space above where
   the phone sits - margin-top:auto eats that space instead of leaving it below the
   phone, so all three phones' bottoms land on the same line regardless of copy length. */
.fn-step-phone {
  position: relative;
  width: 100%; max-width: 380px;
  aspect-ratio: 482.04 / 974;
  margin: auto auto 0;
  filter: drop-shadow(0 -14px 34px rgb(0 0 0 / 24%));
  transition: transform 0.4s ease;
}
.fn-step-phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.fn-step-phone-shot {
  position: absolute;
  left: 5.2545%; top: 1.9456%; width: 89.4783%; height: 95.8931%;
  object-fit: cover; object-position: top;
  border-radius: 2em;
  z-index: 1;
}
.fn-step:hover .fn-step-phone { transform: translateY(-8px); }
.fn-steps-grid + * { margin-top: 0; }

/* ---- Numbers row (pro) ---- */
.fn-nums { background: var(--sage); padding: 5% 5%; }
.fn-nums-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.fn-num { padding-top: 18px; }
.fn-num strong { display: block; font-family: var(--font-heading); font-weight: 200; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.fn-num span { display: block; margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--ink-3); max-width: 30ch; }

/* ---- FAQ reuses .faq-* from style.css; only the wrapper is ours ---- */
.fn-faq { background: var(--card); padding: 90px 7%; }
.fn-faq h2 { margin: 0 0 30px; color: var(--ink-2); }
.fn-faq-inside { max-width: 66%; margin: 0 auto; }

/* ---- Last CTA: send them back up to the one form ---- */
.fn-final { background: var(--sage); padding: 90px 7%; text-align: center; }
.fn-dark .fn-final { background: var(--ink-2); }
.fn-final h2 { margin: 0 0 10px; color: var(--ink); }
.fn-dark .fn-final h2 { color: var(--white); }
.fn-final p { margin: 0 auto 30px; max-width: 44ch; font-size: 17px; line-height: 1.5; color: var(--ink-3); }
.fn-dark .fn-final p { color: var(--body-light); }
.fn-final h3 { margin: 0 auto 20px; }
.fn-dark .fn-final h3 { color: var(--body-light); }

.fn-footer { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; padding: 26px 7% 34px; font-size: 13px; color: var(--text-muted); background: var(--sage); }
.fn-dark .fn-footer { background: var(--ink-2); color: var(--body-light); }
.fn-footer nav { display: flex; gap: 18px; }
.fn-footer a { color: inherit; }
.fn-footer a:hover { color: var(--accent-hover); }
.fn-dark .fn-footer a:hover { color: var(--white); }

@media (min-width: 900px) {
  .fn-hero { padding: 40px 7% 110px; min-height: calc(100svh - 80px); display: flex; align-items: center; }
  .fn-hero-grid { grid-template-columns: 1.05fr 0.95fr; grid-template-areas: "left card"; gap: 72px; align-items: center; width: 100%; }
  .fn-copy { gap: 28px; }
  .fn-card { padding: 40px 40px 34px; }
  .fn-steps { padding-top: 84px; }
  .fn-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .fn-step { padding: 28px 20px 0; }
  /* Hangs past the card on desktop only (stacked cards on mobile would overlap the next one); .fn-steps overflow:hidden makes the cut */
  .fn-step-phone { margin-bottom: -30%; }
  .fn-step:not(:has(.fn-step-phone)) { padding-bottom: 44px; }
  .fn-nums-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* ---- Mobile (mirrors the main site's <=860px treatment: 7% gutters, tighter section
   padding, one column everywhere). Desktop rules above are min-width so these only
   apply below 900px. ---- */
@media (max-width: 899px) {
  .fn-bar { padding: 18px 7%; }
  .fn-bar-logo { height: 28px; }
  .fn-bar-login { font-size: 14px; }
  .fn-store-badges { flex-wrap: nowrap; }
  .fn-store-badges img { height: 44px; }
  /* Copy spans the full width on a phone, so the left-right gradient alone leaves the
     right half of the headline on bare photo - flat ink-2 wash here instead. */
  .fn-top-scrim { background: rgb(47 58 54 / 88%); }
  .fn-hero { padding: 16px 7% 64px; }
  .fn-hero-grid { gap: 28px; }
  .fn-left { gap: 28px; }
  .fn-card { padding: 28px 20px 24px; }
  .fn-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fn-steps { padding: 15% 7% 0; }
  .fn-steps-head { margin-bottom: 8px; }
  .fn-steps-grid { gap: 0; }
  /* Each card clips its own phone on mobile: only the top ~62% shows, same "rising
     out" cut as desktop but per card, so three stacked phones don't triple the page. */
  .fn-step { padding: 36px 0 0; overflow: hidden; }
  .fn-step-num { font-size: 52px; }
  .fn-step p { margin-bottom: 24px; }
  .fn-step-phone { width: 68%; margin-bottom: -38%; filter: drop-shadow(0 -8px 22px rgb(0 0 0 / 22%)); }
  .fn-step:hover .fn-step-phone { transform: none; }
  .fn-nums { padding: 15% 7%; }
  .fn-faq { padding: 15% 7%; }
  .fn-faq-inside { max-width: 100%; }
  .fn-final { padding: 15% 7%; }
  .fn-final h2 { font-size: clamp(32px, 9vw, 40px); }
  .fn-footer { flex-direction: column; align-items: flex-start; padding: 24px 7% 32px; }
  .fn-footer nav { flex-wrap: wrap; gap: 10px 18px; }
}

@media (prefers-reduced-motion: no-preference) {
  .fn-copy > * { animation: fn-rise 0.6s ease both; }
  .fn-copy > :nth-child(2) { animation-delay: 0.06s; }
  .fn-copy > :nth-child(3) { animation-delay: 0.12s; }
  .fn-proof-wrap { animation: fn-rise 0.6s 0.18s ease both; }
  .fn-card { animation: fn-rise 0.7s 0.15s ease both; }
  @keyframes fn-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}


/* Member hero v2 (2026-09-26): rotating trade in the H1. Namespaced; pro page untouched. */
.fn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fn-h1 { display: flex; flex-direction: column; align-items: flex-start; letter-spacing: -0.02em; font-size: clamp(34px, 4.4vw, 72px); }
.fn-h1-accent { color: var(--light-green); }
.fn-rot { display: inline-grid; overflow: hidden; padding-bottom: 0.08em; }
.fn-rot-w { grid-area: 1 / 1; white-space: nowrap; transform: translateY(105%); opacity: 0; }
.fn-rot-w.is-in { transform: none; opacity: 1; transition: transform 0.7s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease; }
.fn-rot-w.is-out { transform: translateY(-105%); opacity: 0; transition: transform 0.7s cubic-bezier(.6,0,.4,1), opacity 0.5s ease; }


/* What we handle (2026-09-26), after Breems' services section on Awwwards: a photo panel
   beside a big index of trades; the active trade drives the photo and its real national
   price range (category_cost_baselines). Phones get an accordion with the photo inline. */
.fn-wh { background: var(--sage); padding: clamp(64px, 8vw, 120px) 7%; }
.fn-wh-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.fn-wh .fn-eyebrow { color: var(--british-green); }
.fn-wh h2 { margin: 0; color: var(--ink); }
.fn-wh-grid { display: grid; grid-template-columns: 1fr; }
.fn-wh-panel { display: none; }
.fn-wh-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.fn-wh-item { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.fn-wh-row { width: 100%; display: flex; align-items: baseline; padding: 18px 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--body-light); transition: color 0.3s ease; }
.fn-wh-name { font-family: var(--font-heading); font-weight: 200; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; }
.fn-wh-item.is-on .fn-wh-row, .fn-wh-row:hover { color: var(--ink); }
.fn-wh-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(.2,.8,.2,1); }
.fn-wh-item.is-on .fn-wh-detail { grid-template-rows: 1fr; }
.fn-wh-detail-in { overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fn-wh-detail-in > :last-child { margin-bottom: 22px; }
.fn-wh-detail p { margin: 0; color: var(--ink-3); }
.fn-wh-mimg { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--fx) 50%; border-radius: var(--radius); }
.fn-wh-meta { display: flex; flex-direction: column; gap: 2px; color: var(--text-muted); font-size: 13px; letter-spacing: 0.3px; }
.fn-wh-meta strong { font-family: var(--font-heading); font-weight: 200; font-size: 34px; letter-spacing: -0.02em; color: var(--ink); }
.fn-wh-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 28px; font-size: 14px; color: var(--text-muted); }
.fn-wh-foot a { color: var(--british-green); }
.fn-wh-foot a:hover { color: var(--moss); }

@media (min-width: 900px) {
  .fn-wh-grid { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 88px); align-items: stretch; }
  .fn-wh-panel { display: block; position: relative; min-height: 520px; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); }
  .fn-wh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx) 50%; opacity: 0; transform: scale(1.04); transition: opacity 0.6s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
  .fn-wh-img.is-on { opacity: 1; transform: none; }
  .fn-wh-card { position: absolute; left: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 24px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
  .fn-wh-card-l { font-size: 13px; letter-spacing: 0.3px; color: var(--text-muted); }
  .fn-wh-card { right: 20px; max-width: none; }
  .fn-wh-card-n { font-family: var(--font-heading); font-weight: 200; font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
  .fn-wh-card-d { margin: 6px 0 16px; color: var(--ink-3); }
  .fn-wh-detail { display: none; }
  .fn-wh-row { padding: 22px 0; }
}

/* 2026-10-01: inline links inside funnel copy read as links (underlined, accent color). */
.fn-text-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.fn-text-link:hover { color: var(--accent-hover); }

/* 2026-10-01 touch targets */
.fn-bar > a:first-child { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; }
.fn-bar-login { display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; }
.fn-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.fn-footer nav { row-gap: 0; }
.fn-wh-foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* 2026-10-01 touch targets, round 2 */
.fn-footer nav a { min-width: 44px; }

/* Partners: what it costs (2026-10-15) - a ruled ledger beside the pitch, sage band between moss steps and the white FAQ. */
.pt-cost { background: var(--sage); padding: 120px 7%; }
.pt-cost-inside { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px 96px; align-items: start; }
.pt-cost-head { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 120px; }
.pt-cost-head .fn-eyebrow { color: var(--british-green); margin: 0; }
.pt-cost-head h2 { margin: 0; color: var(--ink); }
.pt-cost-head p { margin: 0; color: var(--ink-3); line-height: 1.55; }
.pt-ledger { margin: 0; border-top: 1px solid var(--ink); }
.pt-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who amt" "note note";
  gap: 10px 24px; padding: 30px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.pt-row dt { grid-area: who; align-self: end; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); }
.pt-row dd { margin: 0; }
.pt-amt { grid-area: amt; font-family: var(--font-heading); font-weight: 200; font-size: clamp(44px, 5vw, 76px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.pt-note { grid-area: note; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 860px) {
  .pt-cost { padding: 15% 7%; }
  .pt-cost-inside { grid-template-columns: 1fr; gap: 40px; }
  .pt-cost-head { position: static; }
}