/* 1028WD Web Designer Pro pass: look only, for / and /join/. Loaded last by those two pages and
   by nothing else, so no other page changes. Every rule is scoped to .homepage-sales / .join-sales
   or to chrome that only these two pages see with this file. No words, order or behaviour change. */
:root {
  --wd-sky: #00b6ef;
  --wd-gold: #feb833;
  --wd-apex: #ff8a4c;
  --wd-line: rgba(148, 170, 196, .14);
  --wd-line-2: rgba(148, 170, 196, .24);
  --wd-r: 14px;
  --wd-r-in: 10px;
  --wd-lift: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 48px -28px rgba(0, 0, 0, .8);
}

/* One frame width on both pages: home's hero and news band join the 1100px column the rest uses */
.homepage-sales > .hero .composition-container,
.homepage-sales #new-every-week > .container {
  max-width: 1100px;
  margin-inline: auto;
}
/* phones keep the site's own 20px gutter, so the hero's buttons and credit line keep their rows */
@media (min-width: 601px) {
  .homepage-sales > .hero .composition-container,
  .homepage-sales #new-every-week > .container { padding-inline: 24px; }
}

/* Type: display tracking, balanced headings, small labels up to 12px */
:is(.homepage-sales, .join-sales) h1 { letter-spacing: -.02em; }
/* the 1100px frame keeps home's headline at its 1280 size, so it breaks the way it did */
@media (min-width: 1281px) { .homepage-sales > .hero h1 { font-size: 61px; } }
@media (min-width: 1025px) { .homepage-sales #new-every-week > .container { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
:is(.homepage-sales, .join-sales) :is(h2, h3) { text-wrap: balance; }
:is(.homepage-sales, .join-sales) .lede { text-wrap: pretty; }
.sp-sizzle-teaser small,
.join-sales :is(.sp-preview-label, .tour-kicker, .tour-kicker span, .tool-tier, .tour-figure figcaption, .tour-figure figcaption a) {
  font-size: 12px;
}
.join-sales .join-proof-heading .sp-preview-label,
.join-sales .join-tool-proof :is(.tour-kicker, .tour-kicker span, .tool-tier) { font-size: 12px; }
.sp-sizzle-teaser span { white-space: nowrap; }

/* First screen: a low sky light behind the portrait side and a gold one under the headline */
:is(.homepage-sales, .join-sales) > .hero {
  background-image:
    radial-gradient(42% 70% at 78% 30%, rgba(0, 182, 239, .11), rgba(0, 182, 239, 0) 72%),
    radial-gradient(38% 60% at 18% 85%, rgba(254, 184, 51, .05), rgba(254, 184, 51, 0) 70%);
}

/* Hero portrait and product shots: a lit frame instead of a flat 1px line */
:is(.homepage-sales, .join-sales) .by-spags > img {
  border-color: var(--wd-line-2);
  border-radius: var(--wd-r);
  box-shadow: 0 0 0 1px rgba(0, 182, 239, .08), 0 30px 60px -32px rgba(0, 182, 239, .45);
}
:is(.homepage-sales, .join-sales) .tour-media {
  border-color: var(--wd-line-2);
  border-radius: var(--wd-r-in);
  box-shadow: var(--wd-lift);
}

/* Buttons: one shape on both pages, a small lift on hover, a sky focus ring */
:is(.homepage-sales, .join-sales) .button {
  border-radius: var(--wd-r-in);
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
:is(.homepage-sales, .join-sales) .button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 26px -14px rgba(254, 184, 51, .7);
}
:is(.homepage-sales, .join-sales) .plan.apex .button:hover { box-shadow: 0 12px 26px -14px rgba(255, 138, 76, .8); }
:is(.homepage-sales, .join-sales, .sp-site-header, .sp-site-footer, #sp-capture-footer) :is(a, button, summary, input):focus-visible {
  outline: 2px solid var(--wd-sky);
  outline-offset: 3px;
}
.homepage-sales .youtube iframe:is(:focus, :focus-within) { outline: 2px solid var(--wd-sky); outline-offset: 3px; }

/* Pricing: lit cards, tabular figures, the button sits on the card floor */
:is(.homepage-sales, .join-sales) .plans { gap: 20px; }
:is(.homepage-sales, .join-sales) .plan {
  flex-direction: column;
  padding: 28px 26px;
  border-color: var(--wd-line-2);
  border-radius: var(--wd-r);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 38%);
  box-shadow: var(--wd-lift);
}
:is(.homepage-sales, .join-sales) .plan.apex {
  border-color: rgba(255, 138, 76, .6);
  background-image:
    radial-gradient(120% 55% at 50% 0%, rgba(255, 138, 76, .14), rgba(255, 138, 76, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 38%);
  box-shadow: 0 0 0 1px rgba(255, 138, 76, .16), 0 24px 50px -36px rgba(255, 138, 76, .42);
}
:is(.homepage-sales, .join-sales) .price { font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
:is(.homepage-sales, .join-sales) .price span { letter-spacing: 0; color: #9fb0c6; }
:is(.homepage-sales, .join-sales) .plan ul {
  border-top: 1px solid var(--wd-line);
  padding-top: 18px;
}
:is(.homepage-sales, .join-sales) .plan .button {
  margin-top: auto;
  justify-content: center;
  white-space: nowrap;
  min-height: 50px;
}
.join-sales .billing button { border-radius: var(--wd-r-in); transition: background-color .2s ease, border-color .2s ease; }

/* FAQ: each question is its own quiet panel; the open one picks up the sky line */
:is(.homepage-sales, .join-sales) .site-faq details {
  padding: 0 20px;
  margin-bottom: 10px;
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-r-in);
  background: rgba(255, 255, 255, .02);
  transition: border-color .2s ease, background-color .2s ease;
}
:is(.homepage-sales, .join-sales) .site-faq details:hover { border-color: var(--wd-line-2); }
:is(.homepage-sales, .join-sales) .site-faq details[open] {
  border-color: rgba(0, 182, 239, .38);
  background: rgba(0, 182, 239, .045);
}
:is(.homepage-sales, .join-sales) .site-faq summary { padding: 18px 0; cursor: pointer; }
:is(.homepage-sales, .join-sales) .site-faq summary::after { color: var(--wd-sky); transition: transform .2s ease; }
:is(.homepage-sales, .join-sales) .site-faq details[open] summary::after { transform: rotate(45deg); }
:is(.homepage-sales, .join-sales) .site-faq details p { margin: 0 0 18px; max-width: 68ch; }

/* YouTube cards and about: same radius family, readable measure */
.homepage-sales .youtube .subscribe-btn { border: 1px solid transparent; border-radius: 8px; }
.homepage-sales .youtube .video-container { border-radius: var(--wd-r-in); overflow: hidden; box-shadow: 0 0 0 1px var(--wd-line-2), var(--wd-lift); }
.homepage-sales #about p { max-width: 72ch; }
.homepage-sales > .container .quiet { max-width: 90ch; overflow-wrap: anywhere; }

/* Footer: links pass contrast; the capture button keeps its shape in High Contrast */
.sp-site-footer .footer-links a { color: #9fb0c6; transition: color .2s ease; }
.sp-site-footer .footer-links a:hover { color: var(--wd-sky); }
.sp-site-footer .footer-copyright { color: #8191a8; }
#sp-capture-footer button[type="submit"] { border: 1px solid transparent; color: #08111d; }

/* Rhythm: alternate sections sit on a faint band so the long scroll reads in steps */
.homepage-sales > :is(#product-preview, #youtube, #faq),
.join-sales > :is(.join-member-story, #purchase-proof, #faq) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, .008));
  border-block: 1px solid var(--wd-line);
}

/* Join member story: the active indicator and the avatar take the same sky accent */
.join-sales .member-indicator[aria-pressed="true"] span { background: var(--wd-sky); }
.join-sales .join-member-story .container { max-width: 1100px; padding-inline: 24px; }
.join-sales .member-carousel-controls button:not(.member-indicator) { transition: border-color .2s ease, color .2s ease; }
.join-sales .member-carousel-controls button:not(.member-indicator):hover { border-color: rgba(0, 182, 239, .55); color: var(--wd-sky); }
.join-sales .member-avatar { box-shadow: 0 0 0 2px rgba(0, 182, 239, .35); }

/* Tablet: three cards squeeze their labels, so each plan becomes one wide row */
@media (min-width: 641px) and (max-width: 1024px) {
  :is(.homepage-sales, .join-sales) .plans {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 680px;
    margin-inline: auto;
  }
  :is(.homepage-sales, .join-sales) .plan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-content: start;
  }
  :is(.homepage-sales, .join-sales) .plan > * { grid-column: 1; }
  :is(.homepage-sales, .join-sales) .plan > ul {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    margin: 0;
    border-top: 0;
    border-left: 1px solid var(--wd-line);
    padding: 0 0 0 28px;
  }
  :is(.homepage-sales, .join-sales) .plan > .button { grid-column: 1 / -1; margin-top: 18px; }
}

/* Phone: full-width actions, tighter cards, the billing switch becomes one segmented bar */
@media (max-width: 640px) {
  :is(.homepage-sales, .join-sales) .plan { padding: 24px 20px; min-width: 0; }
  :is(.homepage-sales, .join-sales) .plan .button { font-size: clamp(14px, 3.9vw, 17px); padding-inline: 12px; }
  :is(.homepage-sales, .join-sales) .paths .button { justify-content: center; }
  .join-sales .billing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--wd-line-2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
  }
  .join-sales .billing button { padding-inline: 8px; white-space: nowrap; }
  :is(.homepage-sales, .join-sales) .site-faq details { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.homepage-sales, .join-sales) :is(.button, .site-faq details, .site-faq summary::after) { transition: none; }
  :is(.homepage-sales, .join-sales) .button:hover { transform: none; }
}