/* ============================================================================
   Uncrypt — public theme (body.pv2).

   Loaded by includes/layout.php for any public page that opts in with the
   `pv2` body class: home, pricing, contact, trial and sign-in. A warm
   near-black ground, a soft light glow at the top of the page, light-weight
   geometric type, pill buttons, and copper as the one ACTION colour.

   Most components on these pages already draw from two token sets — the base
   --ink / --paper / --line set and the brand --u-* set — so this file re-points
   both, and every form, card, label and hairline follows without being restyled
   one by one. What cannot follow a token is set explicitly below.

   Emerald still means only live / verified / done. The glow is the one colour
   field, and it sits BEHIND the page (the structural "colour behind" exception)
   — panels themselves stay flat.
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans.woff2') format('woff2-variations'),
       url('../fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

html:has(> body.pv2) { background: #151517; }

body.pv2 {
  /* this theme's own tokens */
  --hx-bg:     #151517;
  --hx-bg-2:   #1b1b1e;
  --hx-bg-3:   #222226;
  --hx-line:   rgba(255, 248, 238, .09);
  --hx-line-2: rgba(255, 248, 238, .16);
  --hx-ink:    #f3efe8;
  --hx-ink-2:  #b8b2a8;
  --hx-ink-3:  #938d84;
  --hx-live:   #3ce38b;
  --hx-act:    #e8a06c;          /* copper — something you can click */
  --hx-act-2:  #d4884f;
  --hx-sans:   'Plus Jakarta Sans', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --hx-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hx-max:    1180px;
  --hx-r:      22px;

  /* the base component tokens (ui.css) */
  --ink:       var(--hx-ink);
  --ink-2:     var(--hx-ink-2);
  --paper:     #121214;
  --paper-2:   var(--hx-bg-3);
  --line:      var(--hx-line-2);
  --line-soft: var(--hx-line);

  /* the brand tokens (ui.css :root) */
  --u-void:    #101012;
  --u-ground:  var(--hx-bg);
  --u-panel:   var(--hx-bg-2);
  --u-panel-2: var(--hx-bg-3);
  --u-ridge:   #26262a;
  --u-line:    var(--hx-line);
  --u-line-1:  var(--hx-line-2);
  --u-line-2:  var(--hx-line-2);
  --u-line-3:  rgba(255, 248, 238, .26);
  --u-ink:     var(--hx-ink);
  --u-ink-2:   var(--hx-ink-2);
  --u-ink-3:   var(--hx-ink-3);

  /* marketing.css type */
  --mk-sans:   var(--hx-sans);
  --mk-max:    var(--hx-max);

  background: var(--hx-bg);
  color: var(--hx-ink);
  font-family: var(--hx-sans);
}

/* The page glow. Home draws its own (hero + closing band), so it is skipped
   there; every other pv2 page gets one soft field at the top. */
body.pv2:not(.hv2)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 640px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 60% at 18% 0%, rgba(46, 140, 160, .30), transparent 72%),
    radial-gradient(36% 56% at 82% 0%, rgba(126, 104, 196, .24), transparent 72%),
    radial-gradient(30% 40% at 50% 10%, rgba(212, 136, 79, .10), transparent 72%);
  filter: blur(24px);
}
body.pv2 main { position: relative; z-index: 1; background: transparent; }
body.pv2 .site-head {
  background: rgba(21, 21, 23, .74);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--hx-line);
}

/* ------------------------------------------------------------------ type -- */
body.pv2 h1, body.pv2 h2, body.pv2 h3 { font-family: var(--hx-sans); }
body.pv2 .mk-h2, body.pv2 .fm-title, body.pv2 .auth-intro-h {
  font-weight: 350; letter-spacing: -.022em;
}
body.pv2 .auth-card h1 { font-weight: 450; letter-spacing: -.02em; }
body.pv2 .mk-eyebrow, body.pv2 .auth-eyebrow {
  font-family: var(--hx-sans); font-size: 13px; font-weight: 600; letter-spacing: .14em;
  color: var(--hx-act);
}
/* In-content links are actions: copper, not the emerald of "verified". */
body.pv2 main a:not(.btn):not(.hx-btn):not(.nav-link) { color: var(--hx-act); }
/* the keyboard skip link: --ink is light on this theme, so pin both colours */
body.pv2 .skip { background: var(--hx-ink); color: var(--hx-bg); font-weight: 600; }

.hx-wrap { max-width: var(--hx-max); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.hx-h1 {
  font-family: var(--hx-sans); font-weight: 350;
  font-size: clamp(38px, 6.4vw, 78px); line-height: 1.04; letter-spacing: -.028em;
  color: var(--hx-ink); margin: 0; text-wrap: balance;
}
.hx-h1-sm { font-size: clamp(32px, 4.8vw, 58px); }
.hx-h2 {
  font-weight: 350; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -.022em;
  margin: 0; color: var(--hx-ink); text-wrap: balance;
}
.hx-lede { font-size: clamp(16px, 1.45vw, 19px); line-height: 1.6; color: var(--hx-ink-2); max-width: 640px; margin: 22px auto 0; }
.hx-sub  { font-size: 17px; line-height: 1.6; color: var(--hx-ink-2); max-width: 620px; margin: 16px 0 0; }
.hx-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-act); margin: 0 0 16px; }
.hx-fine { font-size: 13.5px; color: var(--hx-ink-3); margin: 16px 0 0; }
.hx-sechead { margin-bottom: clamp(32px, 5vw, 56px); max-width: 760px; }
.hx-center { text-align: center; margin-left: auto; margin-right: auto; }
.hx-center .hx-sub, .hx-center .hx-lede { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- buttons -- */
.hx-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  font: 600 15.5px/1 var(--hx-sans); text-decoration: none; letter-spacing: -.005em;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
body.pv2 .hx-btn-solid { background: var(--hx-ink); color: #151517; }
body.pv2 .hx-btn-solid:hover { background: #fff; transform: translateY(-1px); }
body.pv2 .hx-btn-line { border: 1px solid var(--hx-act-2); color: var(--hx-act); background: transparent; }
body.pv2 .hx-btn-line:hover { background: rgba(232, 160, 108, .1); color: #f3b98c; }
.hx-btn:focus-visible { outline: 2px solid var(--hx-act); outline-offset: 3px; }

/* The shared .btn family (forms on trial, contact, sign-in) as pills. */
body.pv2 .btn { border-radius: 999px; font-family: var(--hx-sans); }
body.pv2 .btn-lg { padding: 14px 28px; }
body.pv2 .btn-primary { background: var(--hx-ink); border-color: var(--hx-ink); color: #151517 !important; }
body.pv2 .btn-primary:hover { background: #fff; border-color: #fff; }
body.pv2 .btn-ghost, body.pv2 .btn-outline, body.pv2 .mk-btn-ghost {
  background: transparent; border: 1px solid var(--hx-act-2); color: var(--hx-act) !important;
}
body.pv2 .btn-ghost:hover, body.pv2 .btn-outline:hover, body.pv2 .mk-btn-ghost:hover {
  background: rgba(232, 160, 108, .1); color: #f3b98c !important;
}
body.pv2 .btn:focus-visible { outline: 2px solid var(--hx-act); outline-offset: 3px; }

/* ----------------------------------------------------------------- forms -- */
body.pv2 input[type="text"], body.pv2 input[type="email"], body.pv2 input[type="password"],
body.pv2 input[type="number"], body.pv2 input[type="tel"], body.pv2 textarea, body.pv2 select {
  background: #121214; border: 1px solid var(--hx-line-2); border-radius: 12px;
  color: var(--hx-ink); font-family: var(--hx-sans);
}
body.pv2 input:focus, body.pv2 textarea:focus, body.pv2 select:focus {
  border-color: var(--hx-act-2); box-shadow: 0 0 0 3px rgba(232, 160, 108, .16);
}
body.pv2 ::placeholder { color: #7b766e; opacity: 1; }
body.pv2 .field-label { color: var(--hx-ink-2); font-weight: 600; letter-spacing: .02em; }

/* the card a form sits in */
body.pv2 .auth-card,
body.pv2 .fm-panel {
  background: var(--hx-bg-2); border: 1px solid var(--hx-line); border-radius: var(--hx-r);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
body.pv2 .mfa-pick { border-radius: 14px; }

/* ------------------------------------------------------------- responsive -- */
@media (prefers-reduced-motion: reduce) {
  .hx-btn, body.pv2 .btn { transition: none; }
  body.pv2 .hx-btn-solid:hover { transform: none; }
}

/* ================================================================ pricing ==
   Plans side by side in columns — name, price, action, then what is included —
   the layout people expect from a pricing page. One column only on phones. */
.pz-head { padding: clamp(72px, 10vw, 120px) 0 clamp(36px, 5vw, 56px); }
.pz-plans { padding: 0 0 clamp(64px, 8vw, 100px); }
.pz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pz-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--hx-bg-2); border: 1px solid var(--hx-line); border-radius: var(--hx-r);
  padding: 30px 28px 32px;
}
.pz-plan.is-hot { border-color: rgba(232, 160, 108, .55); box-shadow: 0 0 0 1px rgba(232, 160, 108, .18), 0 30px 80px rgba(0, 0, 0, .35); }
.pz-badge {
  position: absolute; top: -13px; left: 28px; padding: 5px 12px; border-radius: 999px;
  background: var(--hx-act); color: #1c1208; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
body.pv2 .pz-name { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--hx-ink); }
.pz-tag { margin: 8px 0 0; min-height: 3em; color: var(--hx-ink-2); font-size: 15px; line-height: 1.5; }
.pz-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }
.pz-amt { font-size: clamp(38px, 3.6vw, 48px); font-weight: 350; letter-spacing: -.03em; color: var(--hx-ink); line-height: 1; }
.pz-per { font-size: 14.5px; color: var(--hx-ink-2); font-weight: 500; }
.pz-cad { margin: 8px 0 0; font-size: 13.5px; color: var(--hx-ink-3); }
.pz-cta { width: 100%; margin-top: 24px; }
.pz-note { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--hx-ink-3); }
.pz-lead { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--hx-line); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hx-ink-2); }
.pz-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; }
.pz-list li { position: relative; padding-left: 28px; color: var(--hx-ink); font-size: 15px; line-height: 1.45; }
.pz-list li::before, .pz-tick {
  content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(60, 227, 139, .14) center/11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ce38b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.pz-feats { padding: clamp(64px, 8vw, 100px) 0; border-top: 1px solid var(--hx-line); }
.pz-featgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pz-feat { position: relative; background: var(--hx-bg-2); border: 1px solid var(--hx-line); border-radius: 18px; padding: 24px 22px; }
.pz-feat .pz-tick { position: static; display: block; margin-bottom: 16px; width: 26px; height: 26px; background-size: 14px; }
body.pv2 .pz-feat h3 { margin: 0 0 8px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--hx-ink); }
.pz-feat p { margin: 0; color: var(--hx-ink-2); font-size: 14.5px; line-height: 1.6; }
.pz-close { padding: clamp(72px, 10vw, 120px) 0; border-top: 1px solid var(--hx-line); }

@media (max-width: 1040px) { .pz-featgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .pz-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; gap: 26px; }
  .pz-tag { min-height: 0; }
}
@media (max-width: 620px) { .pz-featgrid { grid-template-columns: minmax(0, 1fr); } }

/* reset: the small follow-up line under the form panel's button */
body.pv2 .fm-after-note { margin: 16px 0 0; }

/* reset: the code step's two quiet follow-ups (new code · different email) */
body.pv2 .fm-subactions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 8px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hx-line); }
body.pv2 .fm-subactions form { margin: 0; }
/* plain text actions, styled exactly like a link ("Forgot your password?") */
body.pv2 .fm-linkbtn { appearance: none; background: none; border: 0; padding: 4px 0; margin: 0;
  font: inherit; font-size: .92rem; color: var(--hx-act); cursor: pointer; text-decoration: none; }
body.pv2 .fm-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
body.pv2 .fm-linkbtn:focus-visible { outline: 2px solid var(--hx-act); outline-offset: 3px; border-radius: 3px; }
body.pv2 .fm-linkbtn:disabled { color: var(--hx-ink-3); cursor: default; text-decoration: none;
  font-variant-numeric: tabular-nums; }
body.pv2 .fm-linkbtn.fm-back { color: var(--hx-ink-2); }
body.pv2 .fm-code { letter-spacing: .32em; font-size: 1.15rem; text-align: center; }