/* /passwordless v2 · page layout glue, scoped under body.pg-pwl. The three assets style themselves (.pwt, .pwc, .pwf).
   Rhythm (D7): the dark hero (its pearl tray is the page's one grain), then white, then the dark close. ElevenLabs voice-agents is the
   reference for the anatomy; every asset is Hawcx's own. */
/* v4 (user, 2026-10-02: "incline our selves to darker colors gradients grains with a pinch of blue"): every --dk surface on this page */
body.pg-pwl{--dk:#0b0c10}
.pg-pwl .h2 .dim{display:block}
.pg-pwl .tlink{padding-block:1px}
/* hero: split head, H1 + pills left, one paragraph right */
.pg-pwl .pwl-hero{text-align:left;padding-bottom:96px}
.pg-pwl .pwl-head{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:72px;align-items:end}
.pg-pwl .pwl-head>*{min-width:0}
.pg-pwl .pwl-hero .crumbs{margin-bottom:28px}
.pg-pwl .pwl-hero .h1{margin:0;max-width:none;font-size:46px;line-height:50px}
.pg-pwl .pwl-hero .h1 .l2{font-size:48px;line-height:52px}
.pg-pwl .pwl-hero .ctas{justify-content:flex-start;margin-top:32px}
.pg-pwl .pwl-hero .sub{margin:0 0 6px;max-width:400px;font-size:17px;line-height:27px}
/* section split heads */
.pg-pwl .pwl-shead{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:80px;align-items:end}
.pg-pwl .pwl-shead .body{margin:0;max-width:420px}
/* works with: the head left, a two-column list right */
.pg-pwl .pwl-ww{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px;align-items:start}
.pg-pwl .pwl-ww .tlink{margin-top:24px}
.pg-pwl .pwl-ww-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px;margin:6px 0 0;padding:0;list-style:none}
.pg-pwl .pwl-ww-list li{display:flex;align-items:center;gap:12px;height:44px;font-size:16px;line-height:22px}
.pg-pwl .pwl-ww-list i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#f3f2ef;color:var(--ink)}
.pg-pwl .pwl-ww-list svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* get started: three columns, a pill each, three plain lines */
.pg-pwl .pwl-gs-h{text-align:center}
.pg-pwl .pwg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:48px}
.pg-pwl .pwg-col{padding:28px 28px 30px;border-radius:20px;background:#f3f2ef}
.pg-pwl .pwg-col h3{font-size:18px;line-height:26px;font-weight:500}
.pg-pwl .pwg-col>p{margin:4px 0 0;font-size:15px;line-height:22px;color:var(--ink-60)}
.pg-pwl .pwg-col .btn{display:flex;justify-content:center;margin-top:22px}
.pg-pwl .pwg-col ul{margin:22px 0 0;padding:0;list-style:none}
.pg-pwl .pwg-col li{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:14.5px;line-height:21px;color:var(--ink-80)}
.pg-pwl .pwg-col li svg{flex:none;width:14px;height:14px;margin-top:4px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-60)}
.pg-pwl .pwl-docs{margin-top:24px}
.pg-pwl .pwl-close-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.pg-pwl .pwl-close-more{margin-top:64px}
.pg-pwl .pwl-close-xs{max-width:560px;font-size:17px;line-height:28px;color:var(--w-60)}
.pg-pwl .pwl-close-links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:16px}
  .pg-pwl .pwl-who-rows p,.pg-pwl .pwl-close-xs{font-size:16px;line-height:26px}
  .pg-pwl .pwl-close-more{margin-top:48px}
@media (max-width:1100px){
  .pg-pwl .pwl-head,.pg-pwl .pwl-shead{grid-template-columns:minmax(0,1fr) 340px;column-gap:48px}
  .pg-pwl .pwl-hero .h1{font-size:40px;line-height:44px}.pg-pwl .pwl-hero .h1 .l2{font-size:42px;line-height:46px}
}
@media (max-width:900px){
  .pg-pwl .pwl-head,.pg-pwl .pwl-shead,.pg-pwl .pwl-ww{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .pg-pwl .pwl-head .sub{order:2}
  .pg-pwl .pwg{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pg-pwl .pwl-hero{padding-bottom:64px}
  .pg-pwl .pwl-hero .h1{font-size:36px;line-height:40px}.pg-pwl .pwl-hero .h1 .l2{font-size:38px;line-height:42px}
  .pg-pwl .pwl-ww-list{grid-template-columns:minmax(0,1fr)}
}

/* v3 close: a painted ember silk panel, one centred two-tone line and two pills */
.pg-pwl .pwl-cp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;min-height:420px;padding:72px 32px;border-radius:24px;text-align:center;
  background:#140b12 var(--pwl-cp) 50% 50%/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pg-pwl .pwl-cp .h2{margin:0;font-size:52px;line-height:56px}
.pg-pwl .pwl-cp .h2 .dim{color:rgba(255,255,255,.7)}
.pg-pwl .pwl-cp-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pg-pwl .pwl-cp-x{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 12px;margin:28px 0 0;font-size:15px;color:var(--w-60)}
@media (max-width:760px){ .pg-pwl .pwl-cp{min-height:360px;padding:56px 22px;border-radius:20px} .pg-pwl .pwl-cp .h2{font-size:36px;line-height:40px} }

/* v4: the console sits in the dark band, straight after the hero */
.pg-pwl .dark .pwl-shead .body{color:var(--w-60)}
.pg-pwl .pwl-dk2{padding-top:24px}
.pg-pwl .pwl-en-cta{margin-top:24px}
.pg-pwl #enterprise .pwl-shead{align-items:end}
.pg-pwl #get-started{padding-top:calc(var(--sec) + 8px)}
@media (max-width:760px){ .pg-pwl .pwl-cp{background-position:50% 100%} }