/* =========================================================
   Praised access gate: waitlist page, on-the-list state, app gate.
   Loaded after the Aura Light stylesheet (aura.css). Every value is a token from it.
   New classes carry the ax- prefix so nothing collides with the homepage's names.
   ========================================================= */
:root{
  --success:#0b5d45; --success-tint:#e4f4ec; --highlight:#fff8ea; --highlight-ring:rgba(245,165,36,.35);
  --dot-deep:#f5a524; --ink-soft:#2c3550; --warn-ink:#8a5a00;
}
.ax-page{background:var(--ground);color:var(--ink);font-family:var(--body);min-height:100vh;overflow-x:clip}

/* hero */
.ax-hero{text-align:center;padding:64px var(--gut) 0;position:relative;z-index:2;max-width:1200px;margin:0 auto}
.ax-tag{display:inline-flex;align-items:center;gap:8px;background:var(--glow);color:var(--ink);border-radius:var(--r-pill);padding:7px 14px;font-size:13.5px;font-weight:600;line-height:1}
.ax-tag .ico{width:15px;height:15px;stroke-width:2}
.ax-hero h1.hero-h{max-width:960px}
.ax-hero .checker{max-width:560px}
.ax-hero .field .btn.solid{padding-left:20px}
.ax-note{font-size:13.5px;color:var(--muted);margin-top:14px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
.ax-note a{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.ax-note a .ico{width:15px;height:15px;transition:transform .25s var(--ease)}
.ax-note a:hover .ico{transform:translateX(3px)}
.ax-err{font-size:13.5px;font-weight:500;color:var(--warn-ink);margin-top:10px;text-align:center}

/* status card: who is on the list, and in what state */
.ax-status{max-width:560px;margin:36px auto 0;background:var(--frame);border-radius:20px;box-shadow:var(--sh-2),0 0 0 1px var(--line);padding:8px;text-align:left}
.ax-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px}
.ax-row+.ax-row{border-top:1px solid var(--line);border-radius:0}
.ax-row .ico{color:var(--muted);width:19px;height:19px}
.ax-row .k{font-size:13px;color:var(--muted);min-width:76px}
.ax-row .v{font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ax-row.me{background:var(--highlight);box-shadow:inset 0 0 0 1px var(--highlight-ring)}
.ax-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;margin-top:16px;font-size:13.5px;color:var(--muted)}
.ax-links button,.ax-links a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;border-radius:6px}
.ax-links button:hover,.ax-links a:hover{text-decoration-color:var(--ink)}

/* chips: results speak in words first */
.ax-chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:6px 11px;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;flex:none}
.ax-chip .ico{width:14px;height:14px;stroke-width:2.2;color:currentColor}
.ax-chip.ok{background:var(--success-tint);color:var(--success)}
.ax-chip.wait{background:transparent;color:var(--muted);border:1px dashed var(--line3);padding:5px 10px}
.ax-chip.kept{background:var(--highlight);color:var(--ink);box-shadow:inset 0 0 0 1px var(--highlight-ring)}

/* the stage under the hero: perspective field with a panel rising out of it */
.ax-stage{position:relative;height:400px;margin-top:8px;z-index:1}
.ax-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.ax-rise{position:relative;z-index:4;margin-top:-250px;padding-inline:var(--gut)}

/* large panel: copy area + tint stage */
.ax-panel{max-width:1140px;margin:0 auto;background:var(--frame);border-radius:var(--r-xl);box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.05);padding:12px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px}
.ax-panel .copy{padding:32px 28px 32px 32px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.ax-panel h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,2.9vw,40px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.ax-panel p{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:440px;text-wrap:pretty}
.ax-panel .tstage{background:var(--tint);border-radius:var(--r-lg);padding:40px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:22px;justify-content:center}
.ax-panel .tstage>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ax-panel .tstage>*:not(canvas){position:relative}
.ax-lbl{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;display:block;margin-bottom:10px}
.ax-lbl small{font-family:var(--body);font-weight:500;font-size:13px;color:var(--muted);letter-spacing:0;margin-left:6px}
.ax-panel .field{box-shadow:0 10px 26px -20px rgba(10,16,34,.5)}
.ax-opts{display:flex;flex-wrap:wrap;gap:8px}
.ax-opt{border:1px solid var(--line2);background:var(--frame);border-radius:var(--r-pill);padding:11px 16px;font-size:14.5px;font-weight:500;min-height:44px;transition:border-color .2s,background .2s}
.ax-opt:hover{border-color:var(--ink)}
.ax-opt[aria-pressed="true"]{background:var(--ink);color:var(--frame);border-color:var(--ink)}
.ax-save{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ax-saved{font-size:13.5px;color:var(--success);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.ax-saved .ico{width:16px;height:16px;stroke-width:2.2}

/* sections */
.ax-sec{max-width:1200px;margin:0 auto;padding:184px var(--gut) 0}
.ax-sec .say{margin-top:0}
.ax-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end}
.ax-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:56px}
.ax-step{border-top:1px solid var(--line);padding-top:28px;display:flex;flex-direction:column;gap:14px}
.ax-step .n{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.ax-step .n i{font-style:normal;background:var(--glow);border-radius:var(--r-pill);padding:5px 10px;font-size:14px;line-height:1}
.ax-step h3{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.2vw,30px);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.ax-step p{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:440px;text-wrap:pretty}

/* share link */
.ax-share{background:var(--frame);border-radius:var(--r-xl);box-shadow:var(--sh-2),0 0 0 1px var(--line);padding:12px}
.ax-share .tstage{background:var(--tint);border-radius:var(--r-lg);padding:32px;position:relative;overflow:hidden}
.ax-share .tstage>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ax-share .tstage>*:not(canvas){position:relative}
.ax-share .field{padding-left:18px}
.ax-share .field input{font-size:15px}
.ax-share .hint{font-size:13.5px;color:var(--muted);margin-top:12px}

/* while you wait: the free tools */
.ax-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:56px;position:relative}
.ax-tool{background:var(--frame);border-radius:20px;box-shadow:0 0 0 1px var(--line);padding:24px;display:flex;flex-direction:column;gap:12px;min-height:220px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ax-tool:hover{transform:translateY(-4px);box-shadow:var(--sh-2),0 0 0 1px var(--line)}
.ax-tool .ti{width:44px;height:44px;border-radius:14px;background:var(--tint);display:grid;place-items:center}
.ax-tool .ti .ico{width:20px;height:20px}
.ax-tool b{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.2;letter-spacing:-.02em;margin-top:auto}
.ax-tool span{font-size:14.5px;line-height:1.45;color:var(--muted)}
.ax-tool .go{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--ink)}
.ax-tool .go .ico{width:16px;height:16px;transition:transform .25s var(--ease)}
.ax-tool:hover .go .ico{transform:translate(2px,-2px)}
.ax-tool.first{background:var(--highlight);box-shadow:inset 0 0 0 1px var(--highlight-ring)}
.ax-tool.first .ti{background:var(--glow)}

/* ---------- the app gate (app.praised.co) ---------- */
.ax-gate{min-height:100vh;display:flex;flex-direction:column;position:relative;isolation:isolate;background:var(--ground)}
.ax-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gut);position:relative;z-index:3}
.ax-bar .logo{font-size:21px}
.ax-who{display:flex;align-items:center;gap:6px;background:var(--frame);border-radius:var(--r-pill);box-shadow:0 0 0 1px var(--line);padding:5px 5px 5px 6px}
.ax-who .av{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--glow);font:800 13px/30px var(--display);text-align:center;flex:none}
.ax-who .em{font-size:14px;font-weight:500;padding:0 6px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-who .btn.text{padding:9px 14px;font-size:14px}
.ax-gbody{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:9vh var(--gut) 0;position:relative;z-index:2}
.ax-gbody h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,5.2vw,72px);line-height:.96;letter-spacing:-.04em;max-width:820px;text-wrap:balance;margin-top:22px}
.ax-gbody .lead{margin-top:26px;max-width:600px}
.ax-gbody .cta{margin-top:30px}
.ax-gbody .ax-status{margin-top:32px;width:100%}
.ax-gfield{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:auto}
.ax-gfield canvas{position:absolute;inset:0;width:100%;height:100%}
.ax-gfoot{position:relative;z-index:3;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px var(--gut) 22px;font-size:13px;color:var(--muted)}
.ax-gfoot nav{display:flex;gap:18px}
.ax-gfoot a:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .ax-panel{grid-template-columns:1fr}
  .ax-panel .copy{padding:24px 20px 8px}
  .ax-split{grid-template-columns:1fr;gap:32px}
  .ax-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .ax-hero{padding-top:40px}
  .ax-stage{height:250px}
  .ax-rise{margin-top:-110px;padding-inline:14px}
  .ax-panel{border-radius:var(--r-lg);padding:8px}
  .ax-panel .tstage{padding:22px 16px}
  .ax-sec{padding-top:120px}
  .ax-steps{grid-template-columns:1fr;gap:28px;margin-top:40px}
  .ax-tools{grid-template-columns:1fr;margin-top:40px}
  .ax-tool{min-height:0}
  .ax-row .k{display:none}
  .ax-who .em{display:none}
  .ax-gbody{padding-top:7vh}
  .ax-gfield{height:34%}
}
@media (prefers-reduced-motion:reduce){
  .ax-tool,.ax-tool:hover{transition:none;transform:none}
}

/* site build: the canvas's <sc-if> blocks are [data-wl-if] wrappers, shown by build/waitlist.js */
[data-wl-if]{display:contents}[data-wl-if][hidden]{display:none}
/* the site's .tstage centres a row and stands 560px tall; these two panels are forms that run the full width */
.ax-panel .tstage{align-items:stretch;min-height:0}.ax-share .tstage{display:block;min-height:0}
/* phones: the header's checker button steps aside as the solid one does on every other page, and the
   status rows wrap, so the email stays readable instead of ending in an ellipsis */
@media (max-width:760px){.acts .btn.ghost[href$="/checker"]{display:none}}
@media (max-width:560px){.ax-row{flex-wrap:wrap;row-gap:8px}.ax-row .v{white-space:normal;overflow-wrap:anywhere;flex:1 1 60%}}