/* ==========================================================================
   BLVCKOS™ checkout page — shared system.

   Structure cloned from the proven TQW checkout pages
   (HQ\tqw-landing\checkout.css + enroll\five.html): phone = one centred
   column, desktop >=960px = the hosted-checkout split (brand left, secure
   checkout right, hairline divider between).

   Retitled to the BLVCKOS palette: accent #4ab897, NEVER TQW's #61E9DE.
   The landing page's own styles.css is not loaded here.
   ========================================================================== */

:root {
  --bg: #000000;
  --ink: #ffffff;
  --ink-soft: #cfd2d6;
  --ink-dim: #9aa0a6;
  --teal: #4ab897;
  --teal-border: rgba(74, 184, 151, 0.45);
  --teal-dim: rgba(74, 184, 151, 0.08);
  --line: rgba(255, 255, 255, 0.08);
  --sans: "Montserrat", system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

html,
body,
button,
a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: rgba(74, 184, 151, 0.3);
  color: #fff;
}

img {
  display: block;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.store {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 28px 16px 36px;
}

/* vertical centring that still allows overflow scroll on short screens */
.store::before,
.store::after {
  content: "";
  flex: 1 0 0;
}

.brandcol,
.formcol {
  display: contents;
}

/* --------------------------------------------------------------------------
   Brand column
   -------------------------------------------------------------------------- */
.idrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.idrow img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: cover;
}

.idrow span {
  font-size: 16px;
  font-weight: 600;
}

.tagline {
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 14px;
  max-width: 40ch;
}

.offer {
  text-align: center;
  margin-top: 38px;
}

.offer-name {
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
}

.offer-price {
  font-weight: 700;
  font-size: 48px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.offer-meta {
  color: var(--ink-dim);
  font-size: 14px;
  margin-top: 2px;
  min-height: 1.4em;
}

.descblock {
  margin-top: 34px;
}

.desc-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}

.desc {
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.5;
}

.desc + .desc {
  margin-top: 12px;
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 34px 0 8px;
}

/* Back to the landing page */
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}

.back:hover {
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Whop embed mount
   -------------------------------------------------------------------------- */
.wco {
  position: relative;
  min-height: 430px;
  /* Puts Whop's Email label exactly 43px under the Phone field, matching the
     gap between the fields above it, so the checkout reads as the bottom of
     one column rather than a second form stapled on. Whop still contributes
     28px of its own above the label (CheckoutRequirements' 12px row gap and
     the Email wrapper's padding, neither reachable), so this carries the
     remaining 15. Re-measure if Whop changes its internals. */
  margin-top: 9px;
}

.wco::before {
  content: "Loading secure checkout…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

.wco iframe {
  position: relative;
  z-index: 1;
}

/* The loading line sits UNDER the embed and used to be covered by Whop's own
   opaque card. Elements' card is made transparent so it sits on the page's
   black, which let "Loading secure checkout…" show through the middle of the
   finished checkout. Killed the moment the element mounts. */
.wco.is-mounted::before {
  content: none;
}

/* Last resort only: shown if Whop's Elements CDN cannot be reached, so a man
   who has already typed his details still has a way into the whop instead of
   a box that never fills. Never seen in the normal flow. */
.wco-fallback {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  border-radius: 10px;
  background: #02e8a3;
  color: #000;
  font-weight: 600;
  text-decoration: none;
}

/* Shown instead of the embed while the plan ID is still a placeholder */
.wco-placeholder {
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wco-placeholder::before {
  content: none;
}

.wco-placeholder .ph {
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 28px 24px;
  max-width: 34ch;
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.wco-placeholder .ph b {
  color: var(--ink-soft);
  font-weight: 700;
}

.secure {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}

.secure svg {
  width: 11px;
  height: 11px;
  stroke: var(--ink-dim);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   "Your details" step: the FINAL TQW cascade (its v4-v7 refinements
   flattened), teal swapped to BLVCKOS. System font + 42px boxes + 17px text
   to mimic Whop's own inputs exactly, faint resting border, teal focus ring,
   and the three-stage Chrome-autofill kill so filled fields never go white.
   -------------------------------------------------------------------------- */
.wdet {
  max-width: 400px;
  padding: 0 0 6px;
}

/* Whop's embed renders in the system font; the details step matches it. */
.wdet,
.wdet-label,
.wdet-input,
.wdet-hint {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wdet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

@media (max-width: 480px) {
  .wdet-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.wdet-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 16px 0 8px;
}

.wdet-input {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 12px;
  font-size: 17px;
  color: var(--ink);
  background: #0e1113;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  outline: none;
}

@media (max-width: 640px) {
  .wdet-input {
    height: 46px;
    font-size: 17px;
  }
}

.wdet-input::placeholder {
  color: #6a7176;
}

.wdet-input:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.wdet-input:focus {
  border-color: rgba(74, 184, 151, 0.9);
  box-shadow: 0 0 0 1px rgba(74, 184, 151, 0.35);
}

/* Chrome paints its light-blue autofill UNDER the border; a translucent
   border lets it glow through as a white ring. Opaque border = nothing shows,
   and the endless background-color transition stops the white flash. */
.wdet-input:-webkit-autofill,
.wdet-input:-webkit-autofill:hover {
  border: 1px solid #22272a;
  -webkit-box-shadow: 0 0 0 1000px #0e1113 inset;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  transition: background-color 9999999s ease-in-out 0s;
}

.wdet-input:-webkit-autofill:focus {
  border: 1px solid rgba(74, 184, 151, 0.9);
  -webkit-box-shadow: 0 0 0 1000px #0e1113 inset, 0 0 0 1px rgba(74, 184, 151, 0.35);
}

.wdet-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.wdet-hint {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 16px 0 4px;
  padding: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  text-align: center;
  max-width: 400px;
}

/* CONSENT LINE under the fields, added 14-09-26. Deliberately small and dim:
   it is a disclosure, not a persuasion element, and making it loud on a free
   signup would read as a warning. The links stay underlined and at full ink
   so they are unmistakably clickable, which is the part that matters. */
 The footer pair is styled to
   disappear, on Patrick's instruction, because it is boilerplate a man goes
   looking for. 

/* intl-tel-input themed to the dark form (TQW final) */
.wdet .iti {
  width: 100%;
  display: block;
}

.iti--separate-dial-code .iti__selected-flag {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px 0 0 8px;
}

.iti__selected-flag:hover,
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background: rgba(255, 255, 255, 0.07);
}

.iti--separate-dial-code .iti__selected-dial-code {
  color: #9aa0a6;
  font-size: 14px;
}

.iti__arrow {
  border-top-color: rgba(255, 255, 255, 0.45);
}

.iti__arrow--up {
  border-bottom-color: rgba(255, 255, 255, 0.45);
}

.iti__country-list {
  background: #0b0b0d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  color: var(--ink);
  max-height: 242px;
  max-width: calc(100vw - 40px);
}

.iti__country {
  padding: 9px 12px;
}

.iti__country.iti__highlight {
  background: rgba(74, 184, 151, 0.08);
}

.iti__country-name {
  color: rgba(255, 255, 255, 0.92);
}

.iti__dial-code {
  color: rgba(255, 255, 255, 0.5);
}

.iti__divider {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   Entrance motion (TQW spec)
   -------------------------------------------------------------------------- */
.up {
  opacity: 0;
  transform: translateY(14px);
  animation: up 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.up.d1 { animation-delay: 0.08s; }
.up.d2 { animation-delay: 0.16s; }
.up.d3 { animation-delay: 0.26s; }

@keyframes up {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Desktop: the hosted-checkout split
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
  .store {
    max-width: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .store::before,
  .store::after {
    content: none;
  }

  .brandcol {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: end;
    width: min(480px, 100%);
    padding: 56px 96px 56px 32px;
  }

  .formcol {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line);
    padding: 52px 32px 56px 88px;
  }

  .formcol .wco {
    width: min(400px, 100%);
  }

  .idrow {
    gap: 13px;
  }

  .idrow img {
    width: 48px;
    height: 48px;
    border-radius: 11px;
  }

  .idrow span {
    font-size: 17px;
  }

  .tagline {
    font-size: 14.5px;
    margin-top: 16px;
    max-width: 40ch;
  }

  .offer {
    text-align: left;
    margin-top: 30px;
  }

  .offer-name { font-size: 16px; }
  .offer-price { font-size: 36px; line-height: 1.3; }
  .offer-meta { font-size: 13px; }

  .descblock { margin-top: 30px; }
  .desc-label { font-size: 14.5px; margin-bottom: 6px; }
  .desc { font-size: 14.5px; }

  .rule { display: none; }
}

/* --------------------------------------------------------------------------
   LEGAL FOOTER on /join, added 14-09-26. The store layout is a two-column
   grid that fills the viewport, so this sits outside it as a plain centred
   strip rather than trying to join a column: on a phone the two columns
   stack, and a footer inside either one would land in the middle of the page.
   -------------------------------------------------------------------------- */
/* THE STRIP. It owns the separation and the padding and nothing else; the row
   inside it is `.foot-legal`, the landing page's own class, below.

   THE HAIRLINE IS PART OF THE MIRROR, not a compensation for this page. An
   earlier version of this comment said the landing page gets its separation
   from the section padding above it and that /join does not, which is simply
   wrong: styles.css `.foot` carries `border-top: 1px solid var(--hair)` and
   --hair is rgba(255, 255, 255, 0.08), the identical value written out here.
   So it matches by design, and it happens to do a second job on this page,
   where it is the only boundary between the form and the row. */
.store-legal {
  text-align: center;
  padding: 28px 22px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   THE LEGAL ROW, MIRRORED FROM styles.css (Patrick, 17-09-26: "make it the
   same design as the main landing page footer").

   THIS IS A DUPLICATE ON PURPOSE AND IT HAS TO STAY IN STEP. join.html loads
   checkout.css and never styles.css, so `.foot-legal` cannot be reused by
   reference. Same class name, same values, so the mirror is obvious from
   either file. If you change one, change the other.

   What this replaced: Space Mono, uppercase, 11.5px, tracked 0.04em, both
   links underlined, no copyright line. That is the treatment the landing page
   footer was rebuilt away from on 15-09, and it made two links read as two
   buttons on the one page where a man is deciding whether to hand over his
   phone number.

   TWO DELIBERATE DIFFERENCES from the landing page's copy, and only two:
     - no `margin: 20px 0 0`, which over there is the gap under the wordmark
       and here would double the strip's own padding
     - `justify-content: center`, because this is a full-width strip under a
       two-column layout that stacks on a phone. The landing page's row is left
       aligned to its content column; on desktop here that column is
       `min(480px, 100%)` justified to the end of a grid track, so a row hung
       under it would sit nowhere in particular.
   -------------------------------------------------------------------------- */
.foot-legal {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.32);
  /* A WRAPPING FLEX LINE, not a run of inline text. The three items carry no
     whitespace between them in the markup so the separator's own margins
     control the spacing; no whitespace also means inline layout would have
     nowhere to break, and on the landing page at 320 that ran the row 43px
     past its container. Flex gives the break opportunity by structure. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  row-gap: 3px;
}

.foot-legal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
  /* THE TAP BOX, NOT THE TYPE. At 11px the hit area is 14px tall, which is a
     hard target on a phone. The padding grows it and the equal negative margin
     takes the layout cost back out, so the row looks identical and the box is
     twice the height. */
  padding: 7px 0;
  margin: -7px 0;
}

/* The separator is drawn by CSS rather than typed into the markup, so a link
   can be added or removed without leaving a stray middot behind, and so the
   dot can be dimmer than the words it separates.

   AFTER, not before, and every item nowrap, so a break can only fall BETWEEN
   items and a wrapped line starts on a word rather than on a floating dot. */
.foot-legal > * {
  white-space: nowrap;
}

.foot-legal > *:not(:last-child)::after {
  content: "·";
  margin: 0 9px;
  color: rgba(255, 255, 255, 0.18);
}

/* HOVER ONLY ON A REAL POINTER. A touch device synthesises hover on tap and
   leaves it applied, so it would stick on after a tap and read as a fault. */
@media (hover: hover) and (pointer: fine) {
  .foot-legal a:hover {
    color: rgba(255, 255, 255, 0.7);
  }
}

/* Keyboard focus is NOT a hover and must always show, on every device. */
.foot-legal a:focus-visible {
  color: rgba(255, 255, 255, 0.9);
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Mirrored from styles.css, which carries the same block. Without it the two
   rows drift under reduce: the landing row transitions in 0s and this one kept
   the 0.2s colour fade. Measured, not assumed. */
@media (prefers-reduced-motion: reduce) {
  .foot-legal a {
    transition: none;
  }
}