/*
 * pingmylawyer.com, one stylesheet for the whole site.
 *
 * The palette comes from the logo: deep indigo for structure, violet for the signal going out.
 * Indigo carries authority, violet carries the ping, and nothing else competes with them.
 * Every page pulls from these tokens so the marketing site, the signing room and the case page
 * read as one product rather than three.
 */

:root{
  /* brand, straight off the mark */
  --indigo:#2B1B63;
  --indigo-deep:#1C1142;
  --violet:#7B3FBE;
  --violet-soft:#9E6BD8;
  --violet-wash:#F1EAFB;

  /* surfaces and ink */
  --ground:#F4F6FA;
  --card:#FFFFFF;
  --raise:#FBFBFE;
  --line:#E3E6F1;
  --ink:#1E1B36;
  --ink-2:#4A4766;
  --muted:#75769A;

  /* states, kept away from the brand hues so they always mean something */
  --good:#1E8E6A;
  --warn:#C98A22;
  --bad:#D2523F;

  --logo-ink:var(--indigo);
  --logo-violet:var(--violet);
  --logo-violet-soft:var(--violet-soft);

  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --btn-fg:#FFFFFF;
  --shadow:0 1px 2px rgba(27,17,66,.05), 0 8px 24px -12px rgba(27,17,66,.18);
  --maxw:1120px;

  --display:"Jost","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --indigo:#C9BEF2;
    --indigo-deep:#0F0B20;
    --violet:#A97BE8;
    --violet-soft:#C4A5F2;
    --violet-wash:#241A45;

    --ground:#0F0B20;
    --card:#191331;
    --raise:#1F1840;
    --line:#2E2657;
    --ink:#ECEAF6;
    --ink-2:#BFBBDB;
    --muted:#918DB5;

    --good:#4BC39A;
    --warn:#E3B558;
    --bad:#F0806C;
    --btn-fg:#17102E;

    --logo-ink:#EDE9FA;
    --logo-violet:#A97BE8;
    --logo-violet-soft:#C4A5F2;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --indigo:#C9BEF2; --indigo-deep:#0F0B20; --violet:#A97BE8; --violet-soft:#C4A5F2; --violet-wash:#241A45;
  --ground:#0F0B20; --card:#191331; --raise:#1F1840; --line:#2E2657;
  --ink:#ECEAF6; --ink-2:#BFBBDB; --muted:#918DB5;
  --good:#4BC39A; --warn:#E3B558; --bad:#F0806C; --btn-fg:#17102E;
  --logo-ink:#EDE9FA; --logo-violet:#A97BE8; --logo-violet-soft:#C4A5F2;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font:400 17px/1.62 var(--body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%}
a{color:var(--violet)}
a:hover{color:var(--violet-soft)}
:focus-visible{outline:2px solid var(--violet); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(34px,5vw,58px);line-height:1.06;letter-spacing:-.03em}
h2{font-size:clamp(26px,3.2vw,38px);line-height:1.14;letter-spacing:-.025em}
h3{font-size:20px;line-height:1.3}
h4{font-size:16px;line-height:1.35}
p{margin:0 0 15px}
.lede{font-size:19.5px;line-height:1.6;color:var(--ink-2)}
.quiet{color:var(--muted);font-size:15.5px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:600 12.5px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--violet);margin:0 0 18px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet)}

/* ---------------------------------------------------------------- brand */
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand svg{width:34px;height:34px;flex:0 0 auto}
.brand .word{font:600 22px/1 var(--display);letter-spacing:-.025em;white-space:nowrap}
.brand .word i{font-style:normal;color:var(--violet)}
.brand:hover{color:var(--ink)}

/* ------------------------------------------------------------------ nav */
/* No rule under the masthead and no separate fill: the page is one solid ground from the top
   of the screen to the footer, which is the only divider on the site. */
.site-head{position:sticky;top:0;z-index:20;background:var(--ground)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav a{color:var(--ink-2);text-decoration:none;font-size:15.5px;font-weight:500}
.site-nav a:hover{color:var(--violet)}
@media (max-width:820px){ .site-nav a.hide-sm{display:none} }

/* -------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  background:var(--violet);color:var(--btn-fg);
  font:600 16px/1 var(--body);padding:15px 26px;border-radius:999px;
  transition:transform .12s ease, background .16s ease, box-shadow .16s ease;
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--violet) 70%,transparent);
}
.btn:hover{background:var(--violet-soft);color:var(--btn-fg);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--violet);color:var(--violet);background:transparent}
.btn.block{display:flex;width:100%}
.btn.sm{padding:11px 18px;font-size:15px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---------------------------------------------------------------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:26px}
.card.flat{box-shadow:none}
.card.lift{box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .grid.c2,.grid.c3{grid-template-columns:1fr} }

section{padding:72px 0}
/* nothing full width draws its own border */
.band{background:transparent;border:0}
section.tight{padding:52px 0}
.section-head{max-width:640px;margin:0 0 34px}
.section-head p{margin-top:10px}

/* ------------------------------------------------------- the ping ladder */
.ladder{list-style:none;margin:0;padding:0;counter-reset:rung}
.ladder li{position:relative;padding:0 0 26px 58px;counter-increment:rung}
.ladder li::before{
  content:counter(rung);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  background:var(--violet-wash);color:var(--violet);display:grid;place-items:center;
  font:600 15px/1 var(--display);border:1px solid color-mix(in srgb,var(--violet) 30%,transparent)
}
.ladder li::after{content:"";position:absolute;left:17.5px;top:38px;bottom:2px;width:1px;background:var(--line)}
.ladder li:last-child{padding-bottom:0}
.ladder li:last-child::after{display:none}
.ladder strong{display:block;font:600 16.5px/1.35 var(--display);margin-bottom:3px}
.ladder span{color:var(--muted);font-size:15px}

/* --------------------------------------------------------------- forms */
label{display:block;font:600 14px/1.35 var(--body);margin:0 0 7px;color:var(--ink)}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--raise);color:var(--ink);font:400 16px/1.45 var(--body);
}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:transparent}
.field{margin:0 0 18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){ .two{grid-template-columns:1fr} }
.hint{color:var(--muted);font-size:13.5px;margin:-10px 0 18px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--violet)}
.err{background:color-mix(in srgb,var(--bad) 12%,transparent);border:1px solid var(--bad);color:var(--ink);padding:12px 14px;border-radius:var(--r-sm);font-size:15px;margin:0 0 16px;display:none}
.err.on{display:block}

/* --------------------------------------------------------------- footer */
.site-foot{background:var(--card);border-top:1px solid var(--line);padding:46px 0 56px;color:var(--muted);font-size:14.5px}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;margin-bottom:30px}
@media (max-width:820px){ .site-foot .cols{grid-template-columns:1fr} }
.site-foot h4{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.site-foot a{color:var(--muted);text-decoration:none;display:block;margin-bottom:9px}
.site-foot a:hover{color:var(--violet)}
.disclaimer{max-width:760px;line-height:1.6}