/* Bedrock — professional UI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
  --ink:#0f172a;--ink2:#1e293b;--mut:#64748b;--mut2:#94a3b8;
  --line:#e2e8f0;--line2:#eef2f7;--bg:#f8fafc;--card:#fff;
  --accent:#2563eb;--accent-d:#1d4ed8;--accent-soft:#eff6ff;
  --navy:#0b1729;--good:#15803d;--good-soft:#dcfce7;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  --shadow-lg:0 12px 40px rgba(15,23,42,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);margin:0;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:820px;margin:0 auto;padding:0 22px}

/* ---------- top nav ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(248,250,252,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.site-nav .inner{max-width:1080px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand img{width:26px;height:26px;border-radius:7px}
.site-nav nav{display:flex;gap:26px}
.site-nav nav a{color:var(--mut);text-decoration:none;font-size:14.5px;font-weight:500}
.site-nav nav a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-actions .ghost{color:var(--ink);text-decoration:none;font-weight:600;font-size:14.5px}
.mode{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:20px;padding:2px 9px}
@media(max-width:760px){.site-nav nav{display:none}}

/* ---------- buttons / inputs ---------- */
.btn,button.cta{font-family:inherit;font-weight:600;font-size:15px;border:none;border-radius:10px;padding:12px 20px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;transition:transform .04s,box-shadow .2s,background .2s}
.btn-primary,button.cta{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.25)}
.btn-primary:hover,button.cta:hover{background:var(--accent-d);box-shadow:0 6px 18px rgba(37,99,235,.28)}
.btn-primary:active,button.cta:active{transform:translateY(1px)}
.btn-sm{padding:9px 15px;font-size:14px;border-radius:9px}
input,select{font-family:inherit;font-size:15px;border:1px solid var(--line);border-radius:10px;padding:12px 13px;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- hero ---------- */
.hero{padding:64px 0 36px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-d);border:1px solid #dbe6fe;border-radius:30px;padding:5px 13px;font-size:12.5px;font-weight:700;letter-spacing:.01em;margin-bottom:18px}
.hero h1{font-size:46px;line-height:1.07;letter-spacing:-.035em;font-weight:800;margin:0 0 16px}
.hero h1 .hl{color:var(--accent)}
.hero .lede{font-size:18px;color:var(--mut);margin:0 0 24px;max-width:520px}
.hero-form{display:flex;gap:9px;flex-wrap:wrap;max-width:540px}
.hero-form input{flex:1;min-width:190px}
.hero-form .row2{display:flex;gap:9px;width:100%}
.hero-sub{font-size:13px;color:var(--mut2);margin-top:11px}
.stats{display:flex;gap:30px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.stat .n{font-size:25px;font-weight:800;letter-spacing:-.02em}
.stat .l{font-size:12.5px;color:var(--mut);font-weight:500}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero h1{font-size:36px}.hero{padding:40px 0 24px}}

/* ---------- hero product preview ---------- */
.preview{background:var(--navy);border-radius:18px;padding:16px;box-shadow:var(--shadow-lg);position:relative}
.preview .bar{display:flex;gap:6px;padding:4px 6px 12px}
.preview .bar i{width:10px;height:10px;border-radius:50%;background:#33425a;display:block}
.preview .screen{background:#fff;border-radius:11px;overflow:hidden}
.preview .ph{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;padding:13px 15px}
.preview .ph .t{font-weight:700;font-size:14px}
.preview .ph .s{font-size:11.5px;opacity:.85}
.preview .row{display:flex;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line2);align-items:flex-start}
.preview .row:last-child{border-bottom:none}
.preview .sc{flex:none;width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-d);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.preview .row.r5 .sc{background:#fee2e2;color:#b91c1c}.preview .row.r4 .sc{background:#ffedd5;color:#c2410c}
.preview .tx b{font-size:12.5px;display:block}.preview .tx span{font-size:11.5px;color:var(--mut)}
@media(max-width:860px){.preview{max-width:460px;margin:0 auto}}

/* ---------- generic sections ---------- */
.section{padding:54px 0}
.section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kick{text-align:center;color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.h2{text-align:center;font-size:31px;font-weight:800;letter-spacing:-.03em;margin:0 0 10px}
.sub{text-align:center;color:var(--mut);font-size:16.5px;max-width:600px;margin:0 auto 38px}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
.step .num{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.step h3{font-size:17px;margin:0 0 6px;letter-spacing:-.01em}
.step p{font-size:14.5px;color:var(--mut);margin:0}

/* who it's for */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.persona{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.persona .ic{font-size:22px;margin-bottom:8px}
.persona b{display:block;font-size:15px;margin-bottom:3px}
.persona span{font-size:13.5px;color:var(--mut)}
@media(max-width:860px){.steps{grid-template-columns:1fr}.who{grid-template-columns:1fr 1fr}}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 22px;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.plan-pop{border:2px solid var(--accent);box-shadow:0 14px 40px rgba(37,99,235,.16);transform:translateY(-4px)}
.pop-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.07em;border-radius:30px;padding:4px 13px}
.plan-name{font-weight:700;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.07em}
.plan-price{font-size:40px;font-weight:800;letter-spacing:-.03em;margin:8px 0 4px}
.plan-price span{font-size:16px;font-weight:500;color:var(--mut)}
.plan-trial{font-size:12.5px;color:var(--mut);margin-bottom:16px}
.plan-feats{list-style:none;padding:0;margin:0 0 20px;flex:1}
.plan-feats li{padding:6px 0 6px 25px;position:relative;font-size:14px}
.plan-feats li:before{content:"";position:absolute;left:2px;top:11px;width:13px;height:7px;border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}
.plan form{display:flex;flex-direction:column;gap:9px}
.plan input{width:100%}.plan .cta{width:100%}
@media(max-width:860px){.plans{grid-template-columns:1fr;max-width:420px;margin:0 auto}.plan-pop{transform:none}}

/* ---------- sample / convert ---------- */
.section-title{font-size:12.5px;letter-spacing:.09em;color:var(--mut);font-weight:700;text-transform:uppercase;margin:30px 2px 12px}
.banner{background:var(--navy);color:#fff;border-radius:16px;padding:20px 22px;margin:18px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;box-shadow:var(--shadow)}
.banner b{font-size:17px}
.banner form{display:flex;gap:8px;flex-wrap:wrap}
.banner input{background:#16243c;border-color:#2a3b57;color:#fff}
.banner input::placeholder{color:#7d8ba3}

/* ---------- brief cards (sample + dashboard feed) ---------- */
.brief{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.brief-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:16px}
.kicker{font-size:11px;letter-spacing:.12em;color:var(--mut);font-weight:700}
.brief-head h2{margin:6px 0 2px;font-size:20px;letter-spacing:-.02em}
.brief-head .sub{color:var(--mut);font-size:13px;text-align:left;margin:0}
.brand-mk{font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.card{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:13px 15px;margin:10px 0;background:#fbfdff}
.card.rel5{border-left-color:#dc2626}.card.rel4{border-left-color:#ea580c}.card.rel3{border-left-color:var(--accent)}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--mut);margin-bottom:5px}
.score{background:var(--ink);color:#fff;border-radius:5px;padding:1px 7px;font-weight:700}
.juris{font-weight:700;color:var(--ink)}
.tag{background:#eef2f6;border-radius:5px;padding:1px 7px}
.loc{font-weight:600;margin:2px 0 4px}.applicant{color:var(--mut);font-weight:400}
.why{font-size:14px}
.brief-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);color:var(--mut);font-size:12px}
.empty{color:var(--mut);padding:20px 0}

/* ---------- dashboard ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.logo{font-weight:800;letter-spacing:-.02em;color:var(--ink);font-size:20px}
.pill{background:var(--good-soft);color:var(--good);border-radius:30px;padding:3px 11px;font-size:12px;font-weight:700}
.feed-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.hint{font-size:12.5px;color:var(--mut)}

/* ---------- footer ---------- */
.site-foot{background:var(--navy);color:#9fb0c6;margin-top:20px}
.site-foot .inner{max-width:1080px;margin:0 auto;padding:34px 22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px}
.site-foot .brand{color:#fff}
.site-foot a{color:#9fb0c6;text-decoration:none;font-size:14px;display:block;padding:3px 0}
.site-foot a:hover{color:#fff}
.site-foot .col b{color:#fff;font-size:13px;display:block;margin-bottom:8px}
.foot-bottom{border-top:1px solid #1c2c47;text-align:center;color:#6b7d97;font-size:12.5px;padding:16px}

/* ---------- PWA install ---------- */
.install{display:none;background:#fff;border:1px dashed var(--accent);border-radius:12px;padding:11px 15px;margin:16px 0 0;align-items:center;justify-content:space-between;gap:10px}
.install.show{display:flex}
@media(max-width:560px){.hero h1{font-size:31px}.h2{font-size:25px}.banner{flex-direction:column;align-items:stretch}.banner form,.banner input{width:100%}}