/* ═══════════════════════════════════════════════════════════════
   PROPERTY AUTOMATION — get-started wizard, page-specific styles.
   Serves BOTH /get-started-pf-early-7f9c2/ and /get-started-pa-early-7f9c2/.

   Loaded AFTER th.css and th-gs.css. It adds only what these two checkouts need
   on top of the AE component set, and overrides only where a rule was written
   for the /test/ demo (which sits under a full site nav; a checkout carries a
   slim bar instead — every extra link on a payment page is an exit).

   Everything is scoped under `body.pw` or a `pw`-prefixed class, so it cannot
   leak into the 107 pages that share th.css and th-gs.css. `th.css` itself is
   never imported into an app — that rule is unchanged; this is a website page.

   THREE TONES ONLY: void #000000, mint #4FD8A6, paper #F2F7F4. No gold.
   ═══════════════════════════════════════════════════════════════ */

body.pw { --pw-bar: 62px; }

/* ══════════ the checkout bar ══════════ */
.pwbar {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--pw-bar);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(4, 7, 6, .82); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.pwbar__b { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.pwbar__mark { display: block; width: 34px; color: #fff; }
.pwbar__mark svg { width: 100%; height: auto; display: block; }
.pwbar__n { font-family: 'Satoshi'; font-weight: 500; font-size: .98rem; letter-spacing: -.03em; color: rgba(255,255,255,.62); }
.pwbar__n b { font-weight: 900; color: #fff; }
.pwbar__s { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 600;
  letter-spacing: .04em; color: rgba(255,255,255,.42); }
.pwbar__s svg { width: 15px; height: 15px; color: var(--mint); }
@media (max-width: 560px) { .pwbar__s span { display: none; } }

/* The hero's top padding was sized for the full site nav (~94px). */
body.pw .gs-hero { padding-top: clamp(112px, 15vh, 160px); }
body.pw .gsrail { top: calc(var(--pw-bar) + 10px); }
body.pw .gserr { top: calc(var(--pw-bar) + 92px); }

/* ══════════ resume banner ══════════ */
.pwresume {
  position: sticky; top: var(--pw-bar); z-index: 55;
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  max-width: 1180px; margin: 0 auto; padding: .85rem clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgba(52,245,173,.22); background: rgba(52,245,173,.07);
  font-size: .9rem; color: rgba(255,255,255,.78);
}
.pwresume[hidden] { display: none; }
.pwresume > span { flex: 1 1 260px; }

/* ══════════ per-field error ══════════
   th-gs.css styles a single sticky banner. A form this long needs the message
   next to the field that is wrong, not only at the top. */
.gsf__e {
  display: block; margin-top: .45rem; font-size: .82rem; font-weight: 600;
  line-height: 1.5; color: #FFC9C9;
}
body.pw .pinput.is-bad,
body.pw select.is-bad,
body.pw textarea.is-bad {
  border-color: rgba(255,110,110,.62) !important;
  box-shadow: 0 0 0 3px rgba(255,110,110,.14) !important;
}

/* ══════════ numbered questions ══════════
   th-gs.css styles .gsq__n as a flex child of .gsq__head; here the numeral sits
   directly inside .gsq. */
body.pw .gsq { display: flex; align-items: baseline; gap: .6rem; }
body.pw .gsq__n { flex: none; }

/* ══════════ plan cards ══════════ */
.pwplan__meta { display: block; margin: .8rem 0 .2rem; padding: .7rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pwplan__meta span { display: block; font-size: .8rem; line-height: 1.7; color: rgba(255,255,255,.5); }
.pwplan__meta b { color: #fff; font-weight: 700; }
.pwplan__blurb { display: block; margin: .75rem 0 .2rem; font-size: .83rem; line-height: 1.6;
  color: rgba(255,255,255,.44); }
/* The bullets carry <strong> from src/features.py — keep them readable. */
body.pw .gsplan__f li strong { color: #fff; font-weight: 700; }

/* ══════════ notes ══════════ */
.pwnote {
  display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.4rem;
  padding: 1.1rem 1.25rem; border-radius: 20px;
  border: 1px solid rgba(52,245,173,.24);
  background: linear-gradient(160deg, rgba(52,245,173,.08), rgba(4,7,6,.5) 72%);
}
.pwnote[hidden] { display: none; }
.pwnote__ic { flex: none; width: 24px; height: 24px; color: var(--mint); }
.pwnote b { display: block; font-family: 'Satoshi'; font-weight: 900; font-size: 1rem; letter-spacing: -.03em; color: #fff; }
.pwnote p { margin: .4rem 0 0; font-size: .87rem; line-height: 1.6; color: rgba(255,255,255,.55); }
/* "not open for signup yet" reads as information, not as a mint call to action */
.pwnote--wait { border-color: var(--line-2); background: rgba(255,255,255,.03); }
.pwnote--wait .pwnote__ic { color: rgba(255,255,255,.6); }

.pwlist { margin: .6rem 0 0; padding-left: 1.15rem; }
.pwlist li { margin: .45rem 0; font-size: .87rem; line-height: 1.6; color: rgba(255,255,255,.55); }
.pwlist li b { color: #fff; }

/* ══════════ acknowledgements ══════════ */
.pwack .gsaccept__t b { display: block; font-family: 'Satoshi'; font-weight: 700; font-size: .95rem;
  letter-spacing: -.02em; color: #fff; }
.pwack .gsaccept__t small { display: block; margin-top: .35rem; font-size: .82rem; line-height: 1.55;
  color: rgba(255,255,255,.44); }

/* ══════════ honeypot ══════════
   Off-screen rather than display:none — some bots skip hidden inputs, and a bot
   that skips it is a bot we do not catch. */
.pwhp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ══════════ full-width field inside a grid ══════════ */
.gsf--wide { grid-column: 1 / -1; }

/* ══════════ a conditionally hidden field ══════════
   🚨 `.gsf{display:block}` in th-gs.css BEATS the browser's own `[hidden]` rule —
   an author stylesheet always wins over the UA stylesheet at equal specificity. So
   `<label class="gsf" hidden>` renders anyway, and the CIPC field that is supposed
   to appear only for registered entity types was visible to a sole proprietor from
   the moment the page loaded. Caught by driving the page, not by reading it.
   (The same hole exists on the Books checkout's #boCipcWrap — reported, not fixed
   here; th-bo.css is another product's stylesheet.) */
body.pw .gsf[hidden] { display: none; }

/* ══════════ pay button while working ══════════ */
body.pw #pwPayBtn[disabled] { opacity: .62; cursor: progress; }

/* ══════════ footer ══════════ */
.pwfoot { max-width: 900px; margin: clamp(40px, 7vh, 80px) auto 0;
  padding: 0 clamp(16px, 4vw, 40px) 60px; text-align: center; }
.pwfoot p { margin: .5rem 0; font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.32); }
.pwfoot a { color: rgba(255,255,255,.55); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.16); }
.pwfoot a:hover { color: var(--mint); border-bottom-color: var(--mint); }

/* ══════════ mobile ══════════
   A base rule qualified by an element beats a bare-class media query, so every
   override below is written at the same specificity as the rule it replaces.
   That is how the footer columns ended up 38px wide on 106 pages once already. */
@media (max-width: 680px) {
  body.pw .gspay { grid-template-columns: 1fr; }
  .pwresume { flex-direction: column; align-items: stretch; }
  .pwresume .btn { width: 100%; justify-content: space-between; }
}