/* ==========================================================================
   Wick Journal — Register page (Sprint 07 CP06 item 8, MZW-6008)

   LOAD ORDER (required):
     design-system-v2.css   → tokens + base components
     forms.css              → the full form layer, overrides v2's minimal one
     register.css           → this file, page-specific only

   v2 and forms.css are both READ-ONLY.

   Nothing in this file is free-designed. Every block is ported from an
   existing source, cited inline:
     sample_v2_elements/sample-landing.css             → tokens, rhythm, top nav, type scale
     sample_v2_elements/sample-forms-design-system.css → the entire form layer
     css/landing.css                                        → the signed-off diagonal cross-out mark
   ========================================================================== */


/* ==========================================================================
   Landing-only tokens — sample-landing.css § 1 (verbatim)
   Rhythm and measure only. No new colours: marketing uses the same palette as
   the product, which is the whole point of shipping them from one system.
   ========================================================================== */

:root{
  --l-max:1180px;          /* content measure */
  --l-max-narrow:760px;    /* centred prose and section headers */
  --l-gutter:20px;
  --l-gutter-lg:40px;
  --l-band:clamp(72px,10vw,128px);   /* vertical space between sections */
  --l-nav-h:64px;
}


/* ==========================================================================
   Page rhythm — sample-landing.css § 2 (verbatim, only the rules this page uses)
   ========================================================================== */

.l-wrap{max-width:var(--l-max);margin:0 auto;padding:0 var(--l-gutter)}
@media(min-width:1024px){ .l-wrap{padding:0 var(--l-gutter-lg)} }

.l-section{padding:var(--l-band) 0}

.l-eyebrow{color:var(--mark);font-size:var(--t-xs);margin-bottom:14px}
.l-lede{color:var(--muted);font-size:clamp(15px,1.5vw,17px);
        margin-top:18px;max-width:56ch}


/* ==========================================================================
   Top nav — sample-landing.css § 3 (verbatim)

   Transparent over the page, then a panel once it scrolls. The motion layer
   adds `.is-stuck` past 24px of scroll; without JS it simply stays
   transparent, which is still correct.
   ========================================================================== */

.l-topnav{position:sticky;top:0;z-index:var(--z-nav);
          border-bottom:1px solid transparent;transition:background var(--d-base),
          border-color var(--d-base),backdrop-filter var(--d-base)}
.l-topnav.is-stuck{background:color-mix(in srgb,var(--canvas) 86%,transparent);
                   backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
                   border-bottom-color:var(--rule)}
.l-topnav-in{display:flex;align-items:center;gap:var(--s-6);height:var(--l-nav-h)}
.l-topnav .brand{font-size:24px}
.l-topnav-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}

/* Brand slot holds the real logo lockup instead of the sample's text wordmark
   — same substitution the signed-off footer made (landing.css .footer-brand),
   kept at the same 2.75rem scale. */
.l-topnav .brand{display:inline-flex;align-items:center}
.l-topnav .brand img{height:2.75rem;width:auto;display:block}


/* ==========================================================================
   Two-column split — proportions from sample-landing.css § .l-faq
   Promo aside beside the form, stacking below 900px.
   ========================================================================== */

.reg-split{display:grid;gap:clamp(32px,4vw,64px);align-items:start}
@media(min-width:900px){ .reg-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media(min-width:900px){ .reg-promo{position:sticky;top:calc(var(--l-nav-h) + 32px)} }

/* Aside heading scale — sample-landing.css .l-faq-aside h2, with the sample's
   established `em` treatment (.l-display em). */
/* text-wrap:balance evens the line lengths so the browser stops orphaning the
   last word; "100 accounts" in the markup keeps the accented phrase from
   splitting across lines regardless of width. */
.reg-promo h1{font-family:var(--f-display);font-weight:400;
              font-size:clamp(30px,3.6vw,42px);line-height:1.04;letter-spacing:-.025em;
              text-wrap:balance}
.reg-promo h1 em{font-style:italic;color:var(--mark)}


/* ==========================================================================
   Seats count — v2's .meter carries the bar (design-system-v2.css § 4.2);
   the figure uses the sample's .l-proof numeral treatment.
   ========================================================================== */

.reg-seats{margin-top:28px;color:var(--muted);font-size:var(--t-sm)}
.reg-seats-num{color:var(--text);font-family:var(--f-num);font-size:22px;
               letter-spacing:-.02em;margin-right:4px}


/* ==========================================================================
   Regular prices — structure from sample-landing.css .l-proof; the diagonal
   cross-out mark is ported verbatim from the signed-off landing.css:973
   (.pricing-price--struck). Mark uses --mark, not --loss/--win, per the
   Signal Colors Rule — those two mean P&L only.
   ========================================================================== */

.l-proof{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);
         margin-top:30px;color:var(--faint);font-size:var(--t-xs)}
.l-proof b{color:var(--text);font-weight:500;font-family:var(--f-num)}

.reg-struck b{position:relative}
.reg-struck b::after{
    content:"";
    position:absolute;
    left:0%;
    right:-6%;
    top:50%;
    height:2px;
    background:var(--mark);
    transform:translateY(-50%) rotate(-20deg);
    pointer-events:none;
}


/* ==========================================================================
   FORM-LAYER ADDITIONS

   The form layer now ships as css/forms.css, loaded before this file.
   Only the deltas this page needs live here.
   ========================================================================== */

/* Success variant of the form-level block — same structure as .form-alert but
   --win instead of --loss, matching .field-msg.is-success. Used for the
   "check your email" confirmation after a successful submit. Not in forms.css. */
.form-alert.is-success{border-color:color-mix(in srgb,var(--win) 40%,transparent);
                       background:color-mix(in srgb,var(--win) 9%,transparent)}
.form-alert.is-success .ic{color:var(--win)}
.form-alert.is-success a{color:var(--win)}

.form-alert{margin-bottom:var(--s-5)}

/* An author `display` rule outranks the UA's [hidden]{display:none}, so every
   element this page toggles with the hidden attribute needs its own guard. */
.form[hidden],
.form-alert[hidden],
.field-msg[hidden]{display:none}

/* The card's own footer link, below the actions rule. */
.reg-form-foot{margin-top:var(--s-5);color:var(--muted);font-size:var(--t-sm)}
.reg-form-foot a,
.form-actions + .hint a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* Paid phase (Sprint 09 CP4): js/seats.js swaps data-phase="free" for "paid"
   once the free seats are gone. Author display rules outrank the UA's
   [hidden], so the swap needs this guard. */
[data-phase][hidden],[data-promo][hidden],[data-no-promo][hidden]{display:none}