/* ============================================================
   Scrantron — application UI
   Design language: a digital take on the #2-pencil answer sheet.
   Body face Inter for calm legibility; Oswald (condensed) reserved
   for "form print" texture — numbers, eyebrows, table heads, badges,
   and the answer sheet itself. Pacifico stays only on the wordmark.
   ============================================================ */
:root{
  --brand:#178a64;
  --brand-strong:#0e6e4f;
  --brand-deep:#08503b;
  --brand-tint:#e7f4ef;
  --brand-tint-2:#f2f8f5;
  --ink:#0f1a17;
  --ink-2:#33433d;
  --muted:#5c6b65;
  --paper:#ffffff;
  --page:#edf1ef;
  --hairline:#dde6e2;
  --hairline-2:#c9dad3;
  --pencil:#26312b;
  --ok:#15784a;
  --ok-tint:#e7f5ec;
  --warn:#8a5a00;
  --warn-tint:#fbf2db;
  --err:#b42318;
  --err-tint:#fdecea;
  --radius:11px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(15,26,23,.05),0 2px 6px rgba(15,26,23,.05);
  --shadow:0 18px 40px -20px rgba(15,26,23,.30);
  --header-h:64px;
  --footer-h:52px;
  --sidebar-w:236px;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Oswald","Inter",system-ui,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{height:100%;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;display:flex;flex-direction:column;
  color:var(--ink);background:var(--page);
  font-family:var(--font-body);font-size:15.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto}
a{color:var(--brand-strong);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--brand-deep)}

/* Headings — Inter, sentence case, tight. No shouting. */
h1,h2,h3,h4,.display{
  font-family:var(--font-body);font-weight:700;color:var(--ink);
  line-height:1.18;letter-spacing:-.012em;margin:0 0 .55rem;
}
h1{font-size:clamp(1.5rem,1.15rem + 1.1vw,2rem)}
h2{font-size:clamp(1.3rem,1.05rem + .8vw,1.7rem)}
h3{font-size:1.06rem}
h4{font-size:.96rem}
p{margin:0 0 1rem}
hr{border:0;border-top:1px solid var(--hairline);margin:1.4rem 0}
code{font-family:var(--font-mono);font-size:.92em;font-weight:600;color:var(--brand-deep);word-break:break-word}

/* Eyebrows / kickers / form-print labels — Oswald, the only uppercase */
.eyebrow,.page-kicker,.section-kicker,.sidebar-label,.filter-card::before{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.13em;
  font-weight:600;font-size:.72rem;color:var(--brand-strong);
}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .75rem}
.eyebrow::before,.section-kicker::before{
  content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--brand);flex:0 0 auto;
}

/* Utilities */
.muted{color:var(--muted)}
.center{text-align:center}
.ok-text{color:var(--ok)}
.warn{color:var(--warn)}
.copy{color:var(--ink-2)}
.lead{font-size:1.12rem;color:var(--ink-2);font-weight:500;line-height:1.5}
.no-decoration{text-decoration:none}
.mt-1{margin-top:1rem}.mt-2{margin-top:1.75rem}.mb-1{margin-bottom:1rem}
.max-620{max-width:620px;margin-inline:auto}
.max-850,.text-narrow{max-width:850px;margin-inline:auto}
.max-900,.section-narrow{max-width:900px;margin-inline:auto}
.stack{display:grid;gap:1.1rem}
.content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1.25rem;align-items:start}
.content-grid.two-tabs{grid-template-columns:1fr}

/* ===== Top navigation ===== */
.topbar{
  position:sticky;top:0;z-index:1000;min-height:var(--header-h);
  display:flex;align-items:center;gap:1.25rem;
  padding:.6rem clamp(1rem,2.2vw,1.75rem);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--hairline);box-shadow:0 1px 0 rgba(15,26,23,.02);
}
.logo{
  flex:0 0 auto;display:inline-flex;align-items:center;
  color:var(--brand-strong);font-family:"Pacifico",cursive;
  font-size:clamp(1.45rem,1.2rem + .8vw,1.85rem);line-height:1;text-decoration:none;white-space:nowrap;
}
.logo::after{content:"";width:.5rem;height:.5rem;margin-left:.4rem;border:2px solid var(--brand);border-radius:50%}
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-toggle-btn{
  display:none;margin-left:auto;min-height:38px;align-items:center;cursor:pointer;
  border:1px solid var(--hairline-2);background:#fff;color:var(--ink);
  border-radius:var(--radius-sm);padding:.45rem .9rem;font-weight:600;
}
.nav-panel{display:flex;align-items:center;gap:1.1rem;flex:1;min-width:0}
.mainnav{display:flex;align-items:center;gap:.15rem;margin-inline:auto;flex-wrap:wrap}
.mainnav a,.authlinks a{
  display:inline-flex;min-height:36px;align-items:center;padding:.4rem .7rem;
  border-radius:var(--radius-sm);color:var(--ink-2);font-weight:500;font-size:.92rem;text-decoration:none;
}
.mainnav a.on,.mainnav a:hover,.authlinks a:hover{background:var(--brand-tint);color:var(--brand-deep)}
.authlinks{display:flex;align-items:center;justify-content:flex-end;gap:.35rem;flex-wrap:wrap}
.authlinks .who{
  display:inline-flex;align-items:center;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:.35rem .65rem;border-radius:999px;background:var(--brand-tint);color:var(--brand-deep);font-weight:600;font-size:.86rem;
}
.global-search{display:flex;align-items:center;gap:.4rem;min-width:200px;max-width:320px}
.global-search input{min-height:38px;margin:0;padding:.4rem .7rem;font-size:.92rem}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:42px;padding:.6rem 1.2rem;border:1px solid var(--brand);border-radius:999px;
  background:var(--brand);color:#fff;font-family:var(--font-body);font-weight:600;font-size:.94rem;line-height:1;
  text-decoration:none;cursor:pointer;transition:background .14s,border-color .14s,transform .04s,box-shadow .14s;
}
.btn:hover,.btn:focus-visible{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.small{min-height:34px;padding:.42rem .85rem;font-size:.82rem}
.btn.ghost{background:#fff;color:var(--brand-deep);border-color:var(--hairline-2)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-deep)}
.btn.danger{background:var(--err);border-color:var(--err)}
.btn.danger:hover,.btn.danger:focus-visible{background:#8f1c13;border-color:#8f1c13}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;flex-wrap:wrap}

/* ===== Forms ===== */
label{display:block;margin:0 0 .35rem;font-weight:600;font-size:.86rem;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=datetime-local],textarea,select{
  width:100%;min-height:42px;margin:0 0 .15rem;padding:.6rem .75rem;
  border:1px solid var(--hairline-2);border-radius:var(--radius-sm);background:#fff;
  color:var(--ink);font-family:var(--font-body);font-size:.95rem;line-height:1.4;transition:border-color .14s,box-shadow .14s;
}
textarea{min-height:120px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
input::placeholder,textarea::placeholder{color:#9aa8a2}
input[type=file]{
  width:100%;padding:.7rem;border:1.5px dashed var(--hairline-2);border-radius:var(--radius-sm);background:var(--brand-tint-2);font-size:.9rem;cursor:pointer;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(23,138,100,.16)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem 1.15rem}
.form-grid>*{min-width:0}
.field-wide{grid-column:1/-1}
.field-xl{min-width:0}
.form-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.35rem}
.inline-form{display:flex;align-items:flex-end;gap:.8rem;flex-wrap:wrap}
.inline-form .field{flex:1 1 240px}
.inline-form input,.inline-form select{margin:0}
.checkline{display:flex;align-items:center;min-height:42px}
.checkline label{display:flex;align-items:center;gap:.55rem;margin:0;font-weight:500;color:var(--ink)}
.checkline input,input[type=checkbox]{width:auto;min-height:0;accent-color:var(--brand);margin:0}

/* ===== Flash banners ===== */
.flash{
  margin:0 clamp(1rem,2vw,1.6rem);margin-top:1rem;padding:.85rem 1.1rem;
  border:1px solid var(--hairline);border-left:5px solid var(--brand);border-radius:var(--radius-sm);
  background:#fff;box-shadow:var(--shadow-sm);font-weight:500;
}
.flash-ok{border-left-color:var(--ok);background:var(--ok-tint);color:#0f5a37}
.flash-err{border-left-color:var(--err);background:var(--err-tint);color:#86170f}

/* ===== Marketing surfaces (.section legacy + .home-* system) ===== */
.section{padding:clamp(1.75rem,4vw,3.25rem) clamp(1rem,4vw,3rem);flex:1}
.section h1{margin-bottom:.5rem}
.pitch h2{color:var(--brand-deep)}
.featgrid,.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin-top:1.75rem;text-align:left}
.featgrid>div,.feature-grid article{border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;padding:1.3rem;box-shadow:var(--shadow-sm)}
.featgrid .ico{font-size:1.9rem;color:var(--brand)}
.featgrid h3,.feature-grid h3{margin:.5rem 0 .35rem;color:var(--ink)}
.feature-grid p,.featgrid p{margin:0;color:var(--muted);font-size:.95rem}
.feature-grid article>span{font-family:var(--font-display);color:var(--brand);font-size:1.15rem;letter-spacing:.05em}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:1.75rem}
.plancard{border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;padding:1.6rem;box-shadow:var(--shadow-sm);text-align:center}
.plancard h3{margin:.4rem 0}
.plancard .price{font-family:var(--font-display);font-size:clamp(1.7rem,1.2rem + 1vw,2.2rem);color:var(--brand-strong)}
.plancard ul{list-style:none;padding:0;margin:1.1rem 0;color:var(--ink-2);line-height:1.85;font-size:.95rem}
.plancard p{margin:.25rem 0 1rem;color:var(--muted)}
.note{border:1px solid var(--hairline);border-left:5px solid var(--brand);border-radius:var(--radius-sm);background:var(--brand-tint-2);padding:1rem 1.2rem;margin:1.25rem 0;color:var(--ink-2)}
.box{max-width:760px;margin:2.5rem auto;padding:1.75rem;border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}

/* Homepage */
.home-page{flex:1;width:100%}
.home-hero{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;padding:clamp(2rem,5vw,4rem) clamp(1.1rem,4vw,3.5rem);
  background:radial-gradient(1100px 460px at 12% -10%,var(--brand-tint) 0%,transparent 60%),#fff;
  border-bottom:1px solid var(--hairline);
}
.home-hero-copy h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.15rem);line-height:1.06;margin:.2rem 0 .9rem;letter-spacing:-.02em}
.home-lead{font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);color:var(--ink-2);max-width:46ch;margin-bottom:1.6rem}
.home-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hero-signature{font-size:.92rem;color:var(--muted);max-width:50ch;margin:0 0 1.5rem}
.home-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;max-width:460px}
.home-metrics>div{border:1px solid var(--hairline);border-radius:var(--radius-sm);background:#fff;padding:.85rem;text-align:center;box-shadow:var(--shadow-sm)}
.home-metrics strong{display:block;font-family:var(--font-display);font-size:1.3rem;color:var(--brand-strong);letter-spacing:.04em}
.home-metrics span{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}

/* Homepage answer-sheet preview (the signature object) */
.sheet-demo{border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.sheet-demo-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;background:var(--ink);color:#fff}
.sheet-logo{font-family:"Pacifico",cursive;font-size:1.35rem;color:#fff}
.sheet-demo-head small{display:block;font-size:.72rem;color:rgba(255,255,255,.7);margin-top:.1rem}
.sheet-record{text-align:right;font-family:var(--font-display);text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;color:rgba(255,255,255,.75)}
.sheet-record b{display:block;color:var(--brand);font-size:1rem}
.sheet-lines{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;padding:1rem 1.2rem .4rem}
.sheet-lines span{font-family:var(--font-display);text-transform:uppercase;font-size:.66rem;letter-spacing:.08em;color:var(--muted);border-bottom:2px solid var(--hairline-2);padding-bottom:1.4rem}
.bubble-preview{display:grid;gap:.4rem;padding:.8rem 1.2rem 1.1rem}
.bubble-preview-row{display:grid;grid-template-columns:auto repeat(5,1fr);gap:.45rem;align-items:center}
.bubble-preview-row b{font-family:var(--font-display);font-size:.8rem;color:var(--muted);width:1.2rem}
.bubble-preview-row span{
  display:flex;align-items:center;justify-content:center;height:1.55rem;border:1.5px solid var(--hairline-2);border-radius:999px;
  font-family:var(--font-display);font-size:.72rem;color:var(--muted);
}
.bubble-preview-row span.picked{background:var(--pencil);border-color:var(--pencil);color:#fff}
.sheet-demo-foot{display:flex;gap:.4rem;flex-wrap:wrap;padding:.9rem 1.2rem;background:var(--brand-tint-2);border-top:1px solid var(--hairline)}
.sheet-demo-foot span{font-family:var(--font-display);text-transform:uppercase;font-size:.68rem;letter-spacing:.06em;color:var(--brand-deep);background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:.25rem .65rem}

.home-section{padding:clamp(2rem,5vw,3.75rem) clamp(1.1rem,4vw,3.5rem);max-width:1180px;margin-inline:auto}
.section-head{margin-bottom:1.75rem;max-width:62ch}
.section-head h2{margin:.4rem 0 .5rem}
.section-head p{color:var(--ink-2);margin:0}
.section-head.compact{margin-bottom:1.25rem}
.split-section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.split-section>div:first-child h2{margin:.4rem 0 .55rem}
.split-section>div:first-child p{color:var(--ink-2)}
.workflow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
.workflow-grid article{border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;padding:1.4rem;box-shadow:var(--shadow-sm)}
.workflow-grid article span{
  display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-deep);font-family:var(--font-display);font-size:1.05rem;margin-bottom:.7rem;
}
.workflow-grid h3{margin:0 0 .35rem}
.workflow-grid p{margin:0;color:var(--muted);font-size:.94rem}
.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.role-grid article{border:1px solid var(--hairline);border-left:4px solid var(--brand);border-radius:var(--radius);background:#fff;padding:1.25rem;box-shadow:var(--shadow-sm)}
.role-grid h3{margin:0 0 .4rem;color:var(--brand-deep)}
.role-grid p{margin:0;color:var(--muted);font-size:.94rem}
.mini-plans{display:grid;gap:.7rem}
.mini-plans article{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:#fff;padding:1rem 1.2rem;box-shadow:var(--shadow-sm)}
.mini-plans strong{font-size:1.05rem}
.mini-plans span{font-family:var(--font-display);color:var(--brand-strong);letter-spacing:.03em}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.review-grid article{border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;padding:1.4rem;box-shadow:var(--shadow-sm)}
.review-grid p{font-size:1.02rem;color:var(--ink);margin:0 0 .9rem}
.review-grid strong{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;color:var(--brand-deep)}
.home-cta{text-align:center;padding:clamp(2.25rem,5vw,3.75rem) 1.25rem;background:var(--ink);color:#fff;margin-top:1rem}
.home-cta .eyebrow{color:var(--brand);justify-content:center}
.home-cta h2{color:#fff;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem)}
.home-cta p{color:rgba(255,255,255,.78);max-width:54ch;margin-inline:auto}
.home-cta .home-actions{justify-content:center}
.home-cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.home-cta .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ===== Auth (login / signup) ===== */
.authwrap{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;
  flex:1;max-width:980px;margin:clamp(1.5rem,5vw,3.5rem) auto;padding:0 clamp(1rem,4vw,2rem);
}
.rolelist{display:grid;gap:.6rem}
.rolelist>div{padding:.85rem 1.1rem;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:#fff;font-weight:600;color:var(--ink-2)}
.rolelist a{text-decoration:none;color:inherit}
.rolelist .picked{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-deep)}
.rolelist .picked::after{content:" \2192";font-weight:700}
.authcard{width:100%;background:#fff;padding:clamp(1.5rem,3vw,2.25rem);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow)}
.authcard h2{text-align:center;margin:0 0 1.25rem;color:var(--ink)}
.authcard form>label{margin-top:.9rem}
.authcard .btn{width:100%;margin-top:1.1rem}
.authcard p.center{margin-top:1.1rem;color:var(--muted)}

/* ===== Application shell ===== */
.appshell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);flex:1;min-height:calc(100svh - var(--header-h));align-items:start}
.sidebar{
  position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));overflow:auto;
  display:flex;flex-direction:column;gap:.1rem;padding:1rem .7rem 1.5rem;
  background:var(--ink);scrollbar-width:thin;scrollbar-color:var(--brand) var(--ink);
}
.sidebar-label{padding:1.1rem .7rem .4rem;color:rgba(255,255,255,.45);font-size:.66rem}
.sidebar-label:first-child{padding-top:.2rem}
.sidebar a{
  position:relative;display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-radius:var(--radius-sm);
  color:rgba(255,255,255,.82);font-size:.92rem;font-weight:500;line-height:1.2;text-decoration:none;transition:background .12s,color .12s;
}
.sidebar a::before{content:"";width:.45rem;height:.45rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);flex:0 0 auto;transition:background .12s,border-color .12s}
.sidebar a.sub{padding-left:1.7rem;font-size:.85rem;color:rgba(255,255,255,.66)}
.sidebar a:hover,.sidebar a:focus-visible{background:rgba(255,255,255,.07);color:#fff}
.sidebar a.on{background:rgba(23,138,100,.22);color:#fff;font-weight:600}
.sidebar a.on::before{background:var(--brand);border-color:var(--brand)}
.main{
  min-width:0;min-height:calc(100svh - var(--header-h) - 2.5rem);
  margin:1.25rem;padding:clamp(1.25rem,2.2vw,1.9rem);
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow-x:hidden;
}

/* ===== Page head ===== */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;margin:0 0 1.6rem;padding:0 0 1.2rem;border-bottom:1px solid var(--hairline)}
.page-head>div:first-child{min-width:min(100%,420px);max-width:780px}
.page-head h1,.main>h1{margin:0 0 .3rem;color:var(--ink);font-size:clamp(1.45rem,1.2rem + .9vw,1.8rem)}
.page-sub{margin:0;color:var(--muted);font-size:.96rem;max-width:72ch}
.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.section-title-row h3{margin:0 0 .25rem}
.section-title-row .page-sub{font-size:.9rem}

/* ===== Tabs ===== */
.tabs{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin:0 0 1.5rem;padding:.3rem;background:var(--brand-tint-2);border:1px solid var(--hairline);border-radius:999px;width:fit-content;max-width:100%}
.tab{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:36px;padding:.42rem 1rem;border-radius:999px;color:var(--ink-2);font-weight:600;font-size:.88rem;line-height:1;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s}
.tab:hover,.tab:focus-visible{color:var(--brand-deep);background:#fff}
.tab.active{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.tab .badge{min-height:18px;padding:.05rem .42rem;background:rgba(255,255,255,.25);color:inherit;border:0}
.tab.active .badge{background:rgba(255,255,255,.28);color:#fff}
.tab:not(.active) .badge{background:#fff;color:var(--brand-deep);border:1px solid var(--hairline)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.trash-tabs{margin-top:.25rem}

/* ===== Filters ===== */
.filter-card{position:relative;margin:0 0 1.5rem;padding:1.25rem;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--brand-tint-2);box-shadow:var(--shadow-sm)}
.filter-card::before{content:"Filters";display:block;margin:0 0 .9rem;color:var(--brand-strong)}
.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.85rem .9rem;align-items:end}
.filters-grid.compact-one-line{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.filters-grid input,.filters-grid select{margin:0;min-height:40px;font-size:.92rem;background:#fff}
.filters-grid .search-field{grid-column:span 2}
.filter-card label{font-size:.74rem;color:var(--ink-2)}
.filter-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;align-self:end}
.preset-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.25rem}

/* ===== Tables ===== */
.table-scroll{width:100%;overflow:auto;border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
.main>table{width:100%;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
table{width:100%;margin:0;border-collapse:collapse;background:#fff;font-size:.92rem}
th{padding:.7rem .85rem;background:var(--brand-strong);color:#fff;text-align:left;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:.74rem;font-weight:600;white-space:nowrap}
td{padding:.78rem .85rem;border-bottom:1px solid var(--hairline);vertical-align:middle;color:var(--ink-2)}
tbody tr:nth-child(even){background:var(--brand-tint-2)}
tbody tr:hover{background:var(--brand-tint)}
tr:last-child td{border-bottom:0}
td strong{color:var(--ink)}
td .btn{margin:.1rem 0}
.table-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.table-actions form,form.table-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0}
.empty{padding:2rem 1.35rem;text-align:center;color:var(--muted);font-style:normal}
.soft-deleted{opacity:.72}
.pagination{display:flex;align-items:center;justify-content:center;gap:.85rem;flex-wrap:wrap;margin:1.4rem 0 .25rem;color:var(--muted);font-size:.9rem}

/* ===== Badges ===== */
.badge{
  display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:.14rem .6rem;
  border:1px solid var(--hairline);border-radius:999px;background:var(--brand-tint-2);color:var(--brand-deep);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:.7rem;font-weight:600;line-height:1.1;white-space:nowrap;
}
.badge.ok{color:var(--ok);border-color:rgba(21,120,74,.3);background:var(--ok-tint)}
.badge.err{color:var(--err);border-color:rgba(180,35,24,.25);background:var(--err-tint)}
.badge.warn{color:var(--warn);border-color:rgba(138,90,0,.3);background:var(--warn-tint)}

/* ===== Cards / panels ===== */
.card{border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;padding:clamp(1.25rem,2vw,1.65rem);margin:0 0 1.5rem;box-shadow:var(--shadow-sm)}
.card>h3:first-child{margin-top:0}
.card.max-620,.card.request-card{margin-inline:0}
.notice{border:1px solid var(--hairline);border-left:5px solid var(--brand);border-radius:var(--radius-sm);background:var(--brand-tint-2);padding:.95rem 1.15rem;margin:1.25rem 0;color:var(--ink-2)}
.notice .btn{margin-left:.5rem}

/* ===== Stats ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:0 0 1.75rem}
.stats .stat{
  position:relative;display:flex;flex-direction:column;gap:.2rem;padding:1.2rem 1.3rem;
  border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;
}
.stats .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.stats .stat .n{font-family:var(--font-display);font-size:clamp(2.1rem,1.5rem + 1.5vw,2.85rem);line-height:1;color:var(--ink)}
.stats .stat .l{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;color:var(--muted)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.85rem}
.statgrid .stat{border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;padding:1.1rem;box-shadow:var(--shadow-sm)}
.statgrid .stat strong{display:block;font-family:var(--font-display);font-size:1.9rem;color:var(--brand-strong);line-height:1}
.statgrid .stat span{display:block;color:var(--muted);font-size:.84rem;margin-top:.2rem}

/* ===== Dashboard checklist ===== */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.checklist li{display:flex;align-items:center;gap:.75rem;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:#fff;padding:.8rem 1rem}
.checklist li a{font-weight:600;text-decoration:none;color:var(--ink)}
.checklist li a:hover{color:var(--brand-deep)}
.checklist span{display:inline-flex;align-items:center;min-width:48px;justify-content:center;padding:.18rem .5rem;border-radius:999px;font-family:var(--font-display);text-transform:uppercase;font-size:.68rem;letter-spacing:.05em}
.checklist .done{background:var(--ok-tint);color:var(--ok)}
.checklist .todo{background:var(--warn-tint);color:var(--warn)}
.quick-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.85rem;margin:1rem 0}

/* ===== UID box ===== */
.uidbox{padding:.85rem 1rem;border:1px dashed var(--hairline-2);border-radius:var(--radius-sm);background:var(--brand-tint-2);color:var(--brand-deep);font-family:var(--font-mono);font-size:1.15rem;font-weight:600;letter-spacing:.04em;word-break:break-all}

/* ===== Request workspace ===== */
.request-workspace{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,2.75rem);align-items:start}
.request-copy h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin:.1rem 0 .6rem}
.request-copy p{color:var(--ink-2);max-width:48ch}
.request-example{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--hairline)}
.request-example strong{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--brand-strong);margin-bottom:.5rem}
.request-example code{display:block;padding:.65rem .8rem;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--brand-tint-2);font-size:.92rem}
.request-form{display:grid;gap:.9rem;padding:clamp(1.25rem,2vw,1.65rem);border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
.request-form textarea{min-height:170px;font-size:1rem}
.request-form .notice{margin:0}
.request-card{max-width:none}

/* ===== Profile ===== */
.profile-head{margin-bottom:1.5rem}
.profile-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.4rem;align-items:start}
.profile-side{display:grid;gap:1.4rem}
.profile-panel{border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;padding:clamp(1.25rem,2vw,1.6rem);box-shadow:var(--shadow-sm)}
.profile-panel h3{margin-top:0}
.profile-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem 1.1rem}
.profile-form-grid .field-wide{grid-column:1/-1}
.profile-form-grid textarea{min-height:96px}
.id-panel .uidbox{margin-bottom:.85rem}
.danger-zone{border-color:rgba(180,35,24,.4)}
.danger-zone h3{color:var(--err)}
.danger-zone .warn{color:var(--ink-2);font-size:.9rem}
.profile-panel.stack,.profile-panel .stack{gap:.85rem}

/* ===== Classroom picker / search lists ===== */
.search-list{display:grid;gap:.6rem}
.search-list-input{margin:0!important}
.search-list-results{max-height:320px;overflow:auto}
.search-list-results [hidden]{display:none!important}
.classroom-checks{display:grid;gap:.6rem;padding:.15rem}
.classroom-checks label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:start;margin:0;padding:.8rem;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:#fff;font-weight:500;cursor:pointer;transition:border-color .12s,background .12s}
.classroom-checks label:hover{border-color:var(--hairline-2);background:var(--brand-tint-2)}
.classroom-checks label strong{color:var(--ink)}
.classroom-checks label span{display:block;color:var(--muted);font-size:.84rem;font-weight:400}
.classroom-checks input{margin-top:.2rem;accent-color:var(--brand)}
.classroom-picker-wide .classroom-checks{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-height:440px}
.classroom-picker-wide .classroom-checks label:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}
.classroom-picker-wide .search-list-input{min-height:46px;font-size:1rem}

/* ===== Misc ===== */
.split-form-card .form-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tall-textarea{min-height:300px;font-family:var(--font-mono);font-size:.92rem;line-height:1.6}

/* ===== Footer ===== */
.footer{min-height:var(--footer-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem clamp(1rem,2vw,1.75rem);background:#fff;border-top:1px solid var(--hairline);color:var(--muted);font-size:.88rem}
.footer a{text-decoration:none;font-weight:600;color:var(--brand-deep)}

/* ===== Responsive ===== */
@media(max-width:1080px){
  :root{--sidebar-w:212px}
  .home-hero,.split-section{grid-template-columns:1fr}
  .request-workspace,.profile-layout{grid-template-columns:1fr}
}
@media(max-width:920px){
  :root{--header-h:60px}
  .nav-toggle-btn{display:inline-flex}
  .nav-panel{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.4rem;padding:1rem;background:#fff;border-bottom:1px solid var(--hairline);box-shadow:var(--shadow)}
  .nav-toggle:checked~.nav-panel{display:flex}
  .mainnav,.authlinks{justify-content:flex-start;flex-direction:column;align-items:stretch}
  .global-search{max-width:none}
  .appshell{display:block;min-height:0}
  .sidebar{position:sticky;top:var(--header-h);z-index:700;height:auto;flex-direction:row;align-items:center;gap:.25rem;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:.5rem .6rem}
  .sidebar-label{display:none}
  .sidebar a{padding:.5rem .8rem}
  .sidebar a::before{display:none}
  .main{margin:.9rem;min-height:0}
}
@media(max-width:640px){
  body{font-size:15px}
  .home-metrics{grid-template-columns:1fr 1fr}
  .tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;border-radius:var(--radius)}
  .table-scroll table,.main>table{min-width:640px}
  .btnrow,.form-actions{width:100%}
  .page-head{gap:.85rem}
  .footer{flex-direction:column;text-align:center;gap:.4rem}
}
@media print{
  .topbar,.sidebar,.footer,.btnrow,.tabs,.filter-card,.preset-row,.pagination,.flash{display:none!important}
  .main{margin:0;border:0;box-shadow:none}
  body{background:#fff}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Exam status timeline (draft → scheduled → published → closed) */
.exam-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;max-width:140px;margin-top:.45rem}
.exam-timeline span{height:6px;border-radius:999px;background:var(--hairline)}
.exam-timeline span.on{background:var(--brand)}

/* ============================================================
   SaaS product polish pass — clean, compact, predictable
   ============================================================ */
:root{
  --brand:#16a37b;
  --brand-strong:#0d7f61;
  --brand-deep:#07543f;
  --brand-tint:#e9f7f2;
  --brand-tint-2:#f7fbf9;
  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#64748b;
  --page:#f6f8fb;
  --hairline:#e5eaf0;
  --hairline-2:#d5dee8;
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.04);
  --shadow:0 24px 60px -28px rgba(15,23,42,.42);
  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
}
body{background:linear-gradient(180deg,#f8fafc 0%,var(--page) 42%,#f8fafc 100%);color:var(--ink)}
h1,h2,h3,h4{letter-spacing:-.022em}.page-sub,.muted{color:var(--muted)}
.topbar{background:rgba(255,255,255,.86);box-shadow:0 1px 0 rgba(15,23,42,.04);border-bottom-color:rgba(226,232,240,.9)}
.logo{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.logo::after{background:var(--brand);border:0;width:.48rem;height:.48rem}
.mainnav a,.authlinks a{font-weight:650;color:#475569}.mainnav a.on,.mainnav a:hover,.authlinks a:hover{background:#f1f5f9;color:var(--ink)}
.authlinks .who{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0}
.global-search{min-width:180px}.global-search input{border-radius:999px;background:#f8fafc}
.btn{border-radius:10px;box-shadow:0 1px 1px rgba(15,23,42,.05);font-weight:700}.btn.small{border-radius:9px}.btn.ghost{background:#fff}.btn.danger{background:#dc2626;border-color:#dc2626}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=datetime-local],textarea,select{border-radius:10px;border-color:#dbe3ea;background:#fff}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px rgba(22,163,123,.13)}
.appshell{grid-template-columns:248px minmax(0,1fr)}
.sidebar{background:#0f172a;border-right:1px solid rgba(255,255,255,.06);padding:1rem .8rem 1.5rem;box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
.sidebar-label{font-family:var(--font-body);font-size:.68rem;letter-spacing:.08em;color:#94a3b8;padding-top:1.15rem}
.sidebar a{border-radius:10px;padding:.68rem .78rem;color:#cbd5e1}.sidebar a::before{display:none}.sidebar a:hover{background:rgba(255,255,255,.08)}.sidebar a.on{background:#16a37b;color:#fff;box-shadow:0 8px 22px rgba(22,163,123,.22)}
.main{margin:1.1rem;padding:clamp(1.1rem,2vw,1.65rem);border-radius:18px;border-color:#e2e8f0;box-shadow:0 8px 28px rgba(15,23,42,.045);background:rgba(255,255,255,.96)}
.page-head{padding-bottom:1rem;margin-bottom:1rem}.page-head h1,.main>h1{font-size:clamp(1.55rem,1.25rem + .9vw,2rem)}
.tabs{width:100%;gap:.35rem;margin:0 0 1rem;padding:.35rem;border-radius:12px;background:#f8fafc;border-color:#e2e8f0;overflow-x:auto;flex-wrap:nowrap}.tab{min-height:34px;padding:.42rem .85rem;border-radius:9px;font-size:.84rem;color:#475569}.tab:hover{background:#fff;color:var(--ink)}.tab.active{background:#0f172a;color:#fff;box-shadow:0 8px 18px rgba(15,23,42,.14)}.tab:not(.active) .badge{border-color:#e2e8f0;color:#0f172a}.tab-panel.active{animation:fadeIn .12s ease-out}@keyframes fadeIn{from{opacity:.65;transform:translateY(2px)}to{opacity:1;transform:none}}
.filter-card,.compact-filter-card{padding:.65rem .75rem!important;margin:0 0 1rem!important;border-radius:13px;background:#f8fafc;border-color:#e2e8f0;box-shadow:none}.filter-card::before{display:none}.filters-grid,.filters-grid.compact-one-line{display:grid;grid-template-columns:minmax(220px,2fr) repeat(auto-fit,minmax(138px,1fr)) auto;gap:.55rem;align-items:end}.filters-grid .search-field{grid-column:auto}.filters-grid label{margin:0 0 .18rem;font-size:.68rem;font-weight:700;color:#64748b}.filters-grid input,.filters-grid select{min-height:36px!important;padding:.42rem .62rem;font-size:.86rem}.filter-actions{min-width:max-content;gap:.4rem}.filter-actions .btn{min-height:36px}
.preset-row{margin:0 0 .8rem;gap:.4rem}.preset-row .btn{min-height:32px;padding:.38rem .7rem}
.table-scroll{border-radius:14px;border-color:#e2e8f0;box-shadow:none}table{font-size:.9rem}th{background:#f8fafc;color:#475569;border-bottom:1px solid #e2e8f0;font-family:var(--font-body);font-size:.72rem;letter-spacing:.045em}td{padding:.68rem .85rem;color:#334155;border-bottom-color:#eef2f6}tbody tr:nth-child(even){background:#fbfdfe}tbody tr:hover{background:#f1f5f9}.soft-deleted{opacity:.88;background:#fff7ed!important}.empty{padding:1.4rem;color:#64748b;background:#fff}.table-actions{gap:.35rem}.table-actions form,form.table-actions{gap:.35rem}.badge{font-family:var(--font-body);letter-spacing:.02em;font-weight:700;text-transform:none;font-size:.72rem}.badge.ok{background:#ecfdf5}.badge.warn{background:#fffbeb}.badge.err{background:#fef2f2}
.card{border-color:#e2e8f0;border-radius:16px;box-shadow:none}.notice{border-left-width:4px;background:#f8fafc;border-color:#e2e8f0}.compact-notice{padding:.75rem .9rem;margin:.1rem 0;font-size:.9rem}
.request-workspace-saas{grid-template-columns:minmax(250px,.72fr) minmax(0,1fr);gap:1.25rem}.request-form{border-radius:16px;border-color:#e2e8f0;box-shadow:0 10px 28px rgba(15,23,42,.045)}.request-form textarea{min-height:180px}.request-example code{background:#f8fafc;border-color:#e2e8f0;color:#0f172a}.page-kicker,.section-kicker,.eyebrow,.sidebar-label{font-family:var(--font-body)}
.stats,.statgrid,.quick-panel,.feature-grid,.workflow-grid,.role-grid,.review-grid{gap:.9rem}.stats .stat,.statgrid .stat,.workflow-grid article,.role-grid article,.review-grid article,.featgrid>div,.feature-grid article,.plancard{border-color:#e2e8f0;border-radius:16px;box-shadow:none}.stats .stat .n,.statgrid .stat strong{font-family:var(--font-display);font-weight:800}
.home-hero{border-bottom-color:#e2e8f0}.sheet-demo{box-shadow:0 26px 70px -34px rgba(15,23,42,.45)}
.footer{background:#fff;border-top-color:#e2e8f0}
@media(max-width:920px){.appshell{display:block}.sidebar{background:#0f172a;border-right:0}.main{margin:.8rem}.filters-grid,.filters-grid.compact-one-line{grid-template-columns:1fr 1fr}.filters-grid .search-field{grid-column:1/-1}.filter-actions{grid-column:1/-1}.request-workspace-saas{grid-template-columns:1fr}}
@media(max-width:640px){.tabs{border-radius:12px}.filters-grid,.filters-grid.compact-one-line{grid-template-columns:1fr}.filter-actions{justify-content:flex-start}.main{padding:1rem;border-radius:14px}.table-scroll table,.main>table{min-width:720px}.request-copy{padding:.25rem 0}}

/* ============================================================
   Complete modern SaaS redesign — Flutter-style green workspace
   ============================================================ */
:root{
  --brand:#16a37b;
  --brand-strong:#0d7f61;
  --brand-deep:#064e3b;
  --brand-soft:#dff7ee;
  --brand-mist:#f1fbf7;
  --brand-glow:rgba(22,163,123,.22);
  --ink:#0b1220;
  --ink-2:#253247;
  --muted:#667085;
  --page:#f5f8fb;
  --paper:#ffffff;
  --line:#e6edf3;
  --line-strong:#d7e1ea;
  --radius-xl:30px;
  --radius-lg:24px;
  --radius:18px;
  --radius-sm:13px;
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 10px 26px rgba(15,23,42,.06);
  --shadow:0 28px 80px -38px rgba(15,23,42,.48);
  --shadow-green:0 26px 60px -36px rgba(22,163,123,.72);
  --header-h:74px;
  --sidebar-w:282px;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 420px at -10% 0%, rgba(22,163,123,.13), transparent 60%),
    radial-gradient(800px 420px at 110% 12%, rgba(22,163,123,.10), transparent 58%),
    linear-gradient(180deg,#fbfdff 0%,#f5f8fb 45%,#f8fbfa 100%);
  color:var(--ink);
}
h1,h2,h3,h4,.display{font-family:var(--font-display);letter-spacing:-.04em;font-weight:800;color:var(--ink)}
h1{font-size:clamp(1.85rem,1.15rem + 2.4vw,3.65rem);line-height:.98}
h2{font-size:clamp(1.5rem,1.1rem + 1.35vw,2.35rem);line-height:1.05}
h3{font-size:1.12rem;line-height:1.16}.page-sub,.home-lead{color:#516070}.muted{color:var(--muted)}
a{color:var(--brand-strong)}

/* Navigation */
.topbar.glass-nav{
  min-height:var(--header-h);padding:.78rem clamp(1rem,3vw,2.2rem);
  background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.45);
  border-bottom:1px solid rgba(226,235,241,.86);box-shadow:0 10px 30px rgba(15,23,42,.045);
}
.logo{gap:.72rem;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.22rem;letter-spacing:-.04em;text-decoration:none}
.logo::after{display:none}.logo-mark,.mini-logo{
  width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(145deg,var(--brand),var(--brand-deep));box-shadow:0 14px 30px -18px var(--brand);font-family:var(--font-display);font-weight:800;
}
.logo-text{font-size:1.28rem}.mainnav{gap:.22rem}.mainnav a,.authlinks a{
  min-height:42px;border-radius:999px;padding:.55rem .9rem;font-weight:700;color:#526071;transition:background .16s,color .16s,transform .16s;
}
.mainnav a:hover,.authlinks a:hover,.mainnav a.on{background:#edf7f3;color:var(--brand-deep);transform:translateY(-1px)}
.authlinks .nav-cta,.authlinks .dashboard-link{background:var(--ink);color:#fff;box-shadow:0 16px 34px -24px rgba(15,23,42,.65)}
.authlinks .nav-cta:hover,.authlinks .dashboard-link:hover{background:var(--brand-deep);color:#fff}.authlinks .who{background:#ecfdf5;border:1px solid #bcf3dc;color:var(--brand-deep);min-height:38px}
.global-search{position:relative;min-width:min(310px,28vw);padding:.18rem .25rem .18rem .8rem;border:1px solid rgba(215,225,234,.9);border-radius:999px;background:rgba(255,255,255,.88);box-shadow:var(--shadow-xs)}
.global-search span{color:var(--muted);font-weight:800}.global-search input{border:0;background:transparent;box-shadow:none!important;min-height:36px;padding-left:.35rem}.global-search .btn{min-height:32px;padding:.35rem .78rem}
.nav-toggle-btn{border-radius:13px;border-color:var(--line);width:44px;height:42px;padding:0;justify-content:center;gap:4px;flex-direction:column;background:#fff}
.nav-toggle-btn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:99px}

/* Buttons and controls */
.btn{border-radius:13px;border:0;background:linear-gradient(145deg,var(--brand),var(--brand-strong));box-shadow:var(--shadow-green);font-weight:800;letter-spacing:-.01em;min-height:44px;padding:.68rem 1.14rem}
.btn:hover,.btn:focus-visible{background:linear-gradient(145deg,#17b98b,var(--brand-strong));transform:translateY(-1px);box-shadow:0 22px 44px -28px rgba(22,163,123,.88)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.btn.ghost:hover{background:#f7fbf9;color:var(--brand-deep);border-color:#bdeedb}.btn.small{min-height:36px;border-radius:11px;padding:.46rem .85rem;font-size:.84rem}.btn-xl{min-height:54px;padding:.86rem 1.35rem;border-radius:16px;font-size:1rem}.btn.danger{background:linear-gradient(145deg,#ef4444,#b91c1c);box-shadow:0 18px 38px -28px rgba(185,28,28,.85)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=datetime-local],textarea,select{
  border:1px solid #d9e3ec;border-radius:14px;background:#fff;min-height:46px;box-shadow:0 1px 0 rgba(15,23,42,.02);
}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 5px rgba(22,163,123,.13)}
label{font-weight:800;color:#465568}.badge{border-radius:999px;padding:.33rem .62rem;font-weight:800;font-size:.72rem}.badge.ok{background:#e8fbf3;color:#047857}.badge.warn{background:#fff7e6;color:#a15c07}.badge.err{background:#fff1f1;color:#b42318}

/* Marketing home */
.modern-home{overflow:hidden}.hero-v2{
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);gap:clamp(1.5rem,5vw,4.4rem);align-items:center;
  min-height:calc(100svh - var(--header-h));padding:clamp(2rem,5vw,5rem) clamp(1.1rem,5vw,4.5rem) clamp(3rem,6vw,5.5rem);
}
.hero-v2::before{content:"";position:absolute;inset:1rem clamp(1rem,4vw,3rem) auto;height:min(72vh,680px);border-radius:42px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(236,253,245,.72));border:1px solid rgba(255,255,255,.78);box-shadow:0 28px 90px -60px rgba(15,23,42,.45);z-index:-2}
.hero-orb{position:absolute;border-radius:999px;filter:blur(2px);opacity:.9;z-index:-1;animation:orbFloat 7s ease-in-out infinite alternate}.orb-one{width:230px;height:230px;background:rgba(22,163,123,.18);left:7%;top:12%}.orb-two{width:160px;height:160px;background:rgba(15,23,42,.08);right:8%;bottom:16%;animation-delay:1s}
.hero-copy{max-width:720px}.hero-copy h1{margin:.2rem 0 1.1rem}.home-lead{font-size:clamp(1.04rem,.96rem + .42vw,1.28rem);line-height:1.62;max-width:58ch;margin-bottom:1.65rem}.home-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.25rem}.trust-strip{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.trust-strip span,.logo-cloud span{display:inline-flex;align-items:center;gap:.38rem;padding:.55rem .8rem;border:1px solid rgba(215,225,234,.86);border-radius:999px;background:rgba(255,255,255,.78);box-shadow:var(--shadow-xs);color:#526071;font-weight:700}.trust-strip b{color:var(--brand-deep)}
.hero-product{position:relative;min-height:560px}.app-preview-window{position:absolute;inset:2rem 1rem auto auto;width:min(590px,100%);border-radius:30px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);backdrop-filter:blur(18px);overflow:hidden;animation:floatY 5.5s ease-in-out infinite}.window-top{height:54px;display:flex;align-items:center;gap:.48rem;padding:0 1rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.68)}.window-top span{width:11px;height:11px;border-radius:999px;background:#d8e1ea}.window-top span:first-child{background:#ff6b6b}.window-top span:nth-child(2){background:#ffc857}.window-top span:nth-child(3){background:#20c997}.window-top strong{margin-left:auto;color:#596779;font-size:.86rem}.preview-grid{display:grid;grid-template-columns:96px 1fr;gap:1rem;padding:1rem}.preview-panel{border-radius:22px;background:#f7fbf9;border:1px solid var(--line);padding:1rem}.preview-sidebar{display:grid;gap:.7rem;align-content:start}.preview-sidebar i{height:38px;border-radius:13px;background:#e7f3ef}.preview-sidebar i:first-child{background:var(--brand)}.preview-main{min-height:330px}.preview-hero-line{height:70px;border-radius:22px;background:linear-gradient(135deg,#0f172a,#166b55);margin-bottom:1rem}.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.preview-stats span{border-radius:18px;background:#fff;border:1px solid var(--line);padding:1rem;box-shadow:var(--shadow-xs)}.preview-stats b{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--ink)}.preview-stats small{color:var(--muted);font-weight:700}.mini-chart{height:118px;margin-top:1rem;border-radius:20px;background:#fff;border:1px solid var(--line);display:flex;align-items:end;gap:.55rem;padding:1rem}.mini-chart i{flex:1;border-radius:999px 999px 8px 8px;background:linear-gradient(180deg,var(--brand),#a7f3d0);animation:barRise 1.5s ease both}.mini-chart i:nth-child(1){height:42%}.mini-chart i:nth-child(2){height:72%;animation-delay:.08s}.mini-chart i:nth-child(3){height:55%;animation-delay:.16s}.mini-chart i:nth-child(4){height:88%;animation-delay:.24s}.mini-chart i:nth-child(5){height:66%;animation-delay:.32s}
.answer-card{position:absolute;left:0;bottom:3.5rem;width:310px;padding:1rem;border-radius:26px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.92);box-shadow:0 26px 70px -40px rgba(15,23,42,.55);animation:floatY 5.8s ease-in-out infinite}.answer-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.answer-card-head span{font-size:.72rem;font-weight:800;color:var(--brand-deep);background:#e7f9f1;border-radius:999px;padding:.25rem .55rem}.answer-row{display:grid;grid-template-columns:24px repeat(4,1fr);gap:.35rem;align-items:center;margin:.42rem 0}.answer-row b{font-size:.8rem;color:#667085}.answer-row span{height:28px;border-radius:999px;border:1px solid #cfdae4;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#64748b}.answer-row span.picked{background:var(--ink);color:#fff;border-color:var(--ink)}.result-pill{position:absolute;right:.4rem;bottom:1.8rem;display:flex;align-items:center;gap:.65rem;padding:.8rem 1rem;border-radius:18px;background:#0f172a;color:#fff;box-shadow:0 28px 60px -38px rgba(15,23,42,.8);animation:floatY 6.2s ease-in-out infinite}.result-pill b{font-family:var(--font-display);font-size:1.45rem}.result-pill span{font-size:.82rem;color:#cbd5e1}.float-delay-1{animation-delay:.35s}.float-delay-2{animation-delay:.7s}
.logo-cloud{max-width:1120px;margin:-1.2rem auto 0;padding:0 clamp(1.1rem,4vw,2rem);display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}.home-section{max-width:1210px;padding:clamp(3rem,6vw,5.4rem) clamp(1.1rem,4vw,2rem)}.center-block{text-align:center;margin-inline:auto}.center-block p{margin-inline:auto}.section-kicker,.eyebrow{font-family:var(--font-body);font-weight:900;color:var(--brand-strong)}.journey-grid,.role-grid-v2,.feature-grid-v2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.journey-grid article,.role-grid-v2 article,.feature-grid-v2 article,.price-stack article{position:relative;overflow:hidden;border:1px solid rgba(224,234,241,.95);border-radius:26px;background:rgba(255,255,255,.9);padding:1.25rem;box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s,border-color .16s}.journey-grid article:hover,.role-grid-v2 article:hover,.feature-grid-v2 article:hover,.price-stack article:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c9eee0}.journey-grid article span{display:inline-flex;width:46px;height:46px;border-radius:16px;align-items:center;justify-content:center;background:#e8fbf3;color:var(--brand-deep);font-family:var(--font-display);font-weight:800;margin-bottom:1rem}.journey-grid p,.role-grid-v2 p,.feature-grid-v2 p{color:#5f6f7f;margin:0}.roles-v2{align-items:center}.role-grid-v2{grid-template-columns:repeat(3,1fr)}.role-grid-v2 article span,.feature-grid-v2 article>span{display:inline-flex;width:50px;height:50px;border-radius:18px;align-items:center;justify-content:center;background:#f0faf6;font-size:1.25rem;margin-bottom:1rem}.feature-grid-v2{grid-template-columns:repeat(3,minmax(0,1fr))}.pricing-teaser{display:grid;grid-template-columns:minmax(0,.88fr) minmax(380px,1.12fr);gap:2rem;align-items:center}.price-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.price-stack article{padding:1.2rem}.price-stack small{font-weight:900;color:var(--brand-strong);text-transform:uppercase;letter-spacing:.08em}.price-stack strong{display:block;font-family:var(--font-display);font-size:1.45rem;margin:.4rem 0}.price-stack span{color:#566579;font-weight:800}.price-stack .featured{background:linear-gradient(145deg,#0f172a,#0e6e4f);color:#fff}.price-stack .featured small,.price-stack .featured span{color:#d1fae5}.cta-v2{max-width:1120px;margin:0 auto clamp(2rem,5vw,4rem);border-radius:34px;text-align:center;background:linear-gradient(135deg,#0f172a,#064e3b);color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);padding:clamp(2.2rem,5vw,4rem)}.cta-v2 h2,.cta-v2 p{color:#fff}.cta-v2>p:not(.eyebrow){color:#dbeafe;max-width:620px;margin-inline:auto}.cta-v2 .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22)}

/* Application shell and dashboard */
.appshell.app-v2,.appshell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);align-items:start;min-height:calc(100svh - var(--header-h) - var(--footer-h));background:transparent}.sidebar{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));overflow-y:auto;background:linear-gradient(180deg,#101828 0%,#111827 100%);border-right:1px solid rgba(255,255,255,.06);padding:1rem .95rem 1.4rem;box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}.side-brand-card{display:flex;align-items:center;gap:.75rem;margin:0 0 1.1rem;padding:.75rem;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.side-brand-card strong{display:block;color:#fff;font-family:var(--font-display);font-size:1rem;letter-spacing:-.02em}.side-brand-card small{display:block;color:#98a2b3;font-weight:700;font-size:.78rem}.mini-logo{width:40px;height:40px;border-radius:14px;flex:0 0 auto}.sidebar-label{font-family:var(--font-body);font-size:.68rem;letter-spacing:.12em;color:#98a2b3;margin:.95rem .7rem .45rem;padding:0;text-transform:uppercase}.sidebar a{display:flex;align-items:center;gap:.72rem;margin:.16rem 0;padding:.72rem .8rem;border-radius:15px;color:#cbd5e1;text-decoration:none;font-weight:800;transition:background .15s,color .15s,transform .15s}.sidebar a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}.sidebar a.on{background:linear-gradient(145deg,var(--brand),var(--brand-strong));color:#fff;box-shadow:0 18px 34px -26px rgba(22,163,123,.95)}.side-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-weight:900}.sidebar a.on .side-icon{background:rgba(255,255,255,.2)}.main{margin:1.15rem clamp(.9rem,2vw,1.35rem);padding:clamp(1rem,2vw,1.55rem);border:1px solid rgba(226,235,241,.95);border-radius:28px;background:rgba(255,255,255,.72);backdrop-filter:blur(20px);box-shadow:0 18px 55px -45px rgba(15,23,42,.55)}.dashboard-main{display:grid;gap:1.15rem}.dashboard-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.32fr);gap:1.2rem;align-items:stretch;padding:clamp(1.2rem,3vw,2.1rem);border-radius:30px;background:linear-gradient(135deg,#ffffff 0%,#f0fbf7 48%,#e8f7f2 100%);border:1px solid rgba(224,234,241,.96);box-shadow:var(--shadow-sm)}.dashboard-hero::after{content:"";position:absolute;right:-90px;top:-120px;width:300px;height:300px;background:rgba(22,163,123,.14);border-radius:999px}.dashboard-hero h1{margin:.18rem 0 .55rem}.dashboard-hero .page-sub{max-width:720px;font-size:1rem;line-height:1.6}.dashboard-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}.quick-action{position:relative;display:grid;gap:.12rem;min-width:170px;padding:.86rem .95rem;border-radius:18px;background:#fff;border:1px solid var(--line);text-decoration:none;box-shadow:var(--shadow-xs);transition:transform .15s,box-shadow .15s,border-color .15s}.quick-action::after{content:"→";position:absolute;right:.9rem;top:.82rem;color:var(--brand);font-weight:900}.quick-action strong{color:var(--ink);font-size:.94rem}.quick-action span{color:var(--muted);font-size:.78rem;font-weight:700}.quick-action:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#bdeedb}.dashboard-spotlight{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;border-radius:26px;padding:1.2rem;background:linear-gradient(145deg,#0f172a,#14382f);color:#fff;box-shadow:0 26px 60px -40px rgba(15,23,42,.88)}.dashboard-spotlight span{color:#a7f3d0;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.dashboard-spotlight strong{font-family:var(--font-display);font-size:clamp(2rem,1.4rem + 2vw,3.35rem);line-height:1;margin:.4rem 0;color:#fff}.dashboard-spotlight small{color:#cbd5e1;font-weight:700}.stats-v2,.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}.stats-v2 .stat,.stats .stat{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.86);padding:1.1rem;box-shadow:var(--shadow-sm);min-height:150px}.stats-v2 .stat::after{content:"";position:absolute;right:-38px;bottom:-48px;width:120px;height:120px;border-radius:999px;background:rgba(22,163,123,.09)}.stat-icon{width:34px;height:34px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;background:#e8fbf3;color:var(--brand);font-size:.7rem}.stats .stat .n,.stat .n{display:block;font-family:var(--font-display);font-size:clamp(2rem,1.5rem + 1.2vw,3rem);font-weight:800;letter-spacing:-.05em;color:var(--ink);line-height:1.02;margin:.65rem 0 .15rem}.stats .stat .l,.stat .l{display:block;color:#334155;font-weight:900}.stat small{display:block;color:var(--muted);font-weight:650;margin-top:.2rem}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,.55fr);gap:1rem}.card,.data-card{border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.86);box-shadow:var(--shadow-sm);padding:1.15rem}.checklist-card h3,.insight-card h3{margin-bottom:.9rem}.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.62rem}.checklist li{display:flex;align-items:center;gap:.7rem;padding:.72rem;border:1px solid var(--line);border-radius:16px;background:#fff}.checklist a{text-decoration:none;font-weight:850;color:var(--ink)}.checklist .done,.checklist .todo{min-width:52px;text-align:center;border-radius:999px;padding:.22rem .46rem;font-size:.72rem;font-weight:900}.checklist .done{background:#e8fbf3;color:#047857}.checklist .todo{background:#fff7e6;color:#a15c07}.insight-card{display:grid;place-items:center;text-align:center}.health-ring{width:132px;height:132px;border-radius:999px;margin:.2rem auto 1rem;background:conic-gradient(var(--brand) 0 72%, #e8eef4 72% 100%);display:grid;place-items:center;box-shadow:inset 0 0 0 12px #fff}.health-ring span{display:grid;place-items:center;width:92px;height:92px;background:#fff;border-radius:999px;font-family:var(--font-display);font-weight:800;font-size:1.6rem}.data-card{padding:1.1rem}.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.section-title-row h2{font-size:1.55rem;margin:0}.section-title-row .section-kicker{margin-bottom:.3rem}.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:none}table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}th{position:sticky;top:0;z-index:1;background:#f8fafc;color:#536273;border-bottom:1px solid var(--line);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:900;padding:.82rem .9rem}td{padding:.86rem .9rem;border-bottom:1px solid #eef3f7;color:#334155;vertical-align:middle}tbody tr:hover{background:#f8fcfa}tbody tr:last-child td{border-bottom:0}.empty{text-align:center;color:var(--muted);padding:1.7rem!important;background:#fff}.filter-card,.compact-filter-card{border-radius:20px!important;background:rgba(255,255,255,.86)!important;border-color:var(--line)!important}.tabs{border-radius:18px;background:#eff6f3;border-color:#dceae4}.tab{border-radius:14px;font-weight:900}.tab.active{background:linear-gradient(145deg,#0f172a,#1f2937);box-shadow:0 14px 28px -24px rgba(15,23,42,.8)}.notice,.note,.box{border-radius:22px;border-color:var(--line);box-shadow:var(--shadow-sm);background:#fff}.authwrap{background:radial-gradient(620px 300px at 50% 0%,rgba(22,163,123,.14),transparent 65%)}.authcard{border-radius:28px;border-color:var(--line);box-shadow:var(--shadow);background:rgba(255,255,255,.88)}

/* Footer */
.footer{background:rgba(255,255,255,.8);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:1rem clamp(1rem,3vw,2.2rem)}

/* Animation */
.reveal-on-scroll{opacity:0;transform:translateY(22px);transition:opacity .68s cubic-bezier(.2,.8,.2,1), transform .68s cubic-bezier(.2,.8,.2,1)}.reveal-on-scroll.is-visible{opacity:1;transform:none}@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}@keyframes orbFloat{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(18px,26px,0) scale(1.08)}}@keyframes barRise{from{transform:scaleY(.35);transform-origin:bottom;opacity:.35}to{transform:scaleY(1);opacity:1}}

/* Responsive */
@media(max-width:1180px){
  :root{--sidebar-w:244px}.hero-v2{grid-template-columns:1fr}.hero-product{min-height:500px;max-width:760px;margin-inline:auto;width:100%}.journey-grid{grid-template-columns:repeat(2,1fr)}.pricing-teaser{grid-template-columns:1fr}.stats-v2,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:920px){
  :root{--header-h:66px}.topbar.glass-nav{padding:.62rem 1rem}.nav-toggle-btn{display:inline-flex}.nav-panel{display:none;position:absolute;top:100%;left:.75rem;right:.75rem;flex-direction:column;align-items:stretch;gap:.55rem;padding:.9rem;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.nav-toggle:checked~.nav-panel{display:flex}.mainnav,.authlinks{display:flex;flex-direction:column;align-items:stretch;margin:0}.mainnav a,.authlinks a{justify-content:center}.global-search{min-width:0;max-width:none;width:100%}.appshell.app-v2,.appshell{display:block}.sidebar{position:sticky;top:var(--header-h);z-index:800;height:auto;display:flex;align-items:center;gap:.35rem;overflow-x:auto;overflow-y:hidden;padding:.65rem;background:#0f172a}.side-brand-card,.sidebar-label{display:none}.sidebar a{flex:0 0 auto;margin:0;padding:.6rem .75rem}.sidebar a span:last-child{white-space:nowrap}.side-icon{display:none}.main{margin:.85rem;border-radius:22px}.dashboard-hero,.dashboard-grid{grid-template-columns:1fr}.hero-v2::before{inset:.75rem;height:auto;bottom:1rem}.feature-grid-v2,.role-grid-v2{grid-template-columns:1fr 1fr}.price-stack{grid-template-columns:1fr}.filters-grid,.filters-grid.compact-one-line{grid-template-columns:1fr 1fr}.filter-actions{grid-column:1/-1}.request-workspace-saas,.request-workspace,.profile-layout,.content-grid{grid-template-columns:1fr!important}
}
@media(max-width:640px){
  h1{font-size:clamp(2rem,1.4rem + 5vw,2.85rem)}.hero-v2{padding:1.1rem .9rem 2.5rem;min-height:auto}.hero-product{min-height:570px}.app-preview-window{left:0;right:0;top:1rem;width:100%}.preview-grid{grid-template-columns:1fr}.preview-sidebar{display:none}.preview-stats{grid-template-columns:1fr}.answer-card{width:min(300px,92vw);bottom:4.4rem}.result-pill{right:0}.journey-grid,.feature-grid-v2,.role-grid-v2,.stats-v2,.stats{grid-template-columns:1fr}.home-section{padding:2.6rem .95rem}.dashboard-actions{display:grid}.quick-action{min-width:0}.section-title-row{align-items:flex-start;flex-direction:column}.filters-grid,.filters-grid.compact-one-line{grid-template-columns:1fr}.home-actions .btn{width:100%}.logo-text{display:none}.topbar.glass-nav{min-height:62px}.table-scroll table,.main>table{min-width:720px}.main{padding:.85rem;border-radius:18px}.card,.data-card{border-radius:20px}.footer{flex-direction:column;text-align:center}.trust-strip{display:grid;grid-template-columns:1fr 1fr}.logo-cloud{justify-content:flex-start;margin-top:.5rem}
}
@media(prefers-reduced-motion:reduce){.reveal-on-scroll,.app-preview-window,.answer-card,.result-pill,.hero-orb,.mini-chart i{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}

/* Secondary marketing and auth screens */
.marketing-page{flex:1;width:100%}.marketing-hero{max-width:1060px;margin:0 auto;text-align:center;padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,2rem) clamp(1.8rem,3vw,2.6rem)}.marketing-hero h1{max-width:880px;margin:.25rem auto 1rem}.marketing-hero .lead{margin-left:auto;margin-right:auto}.plans-v2{max-width:1180px;margin:0 auto clamp(2rem,5vw,4rem);padding:0 clamp(1rem,4vw,2rem);grid-template-columns:repeat(3,minmax(0,1fr))}.plans-v2 .plancard{position:relative;overflow:hidden;border-radius:28px;padding:1.35rem;text-align:left;background:rgba(255,255,255,.88);box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s}.plans-v2 .plancard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.plans-v2 .price{font-family:var(--font-display);font-size:2.1rem;font-weight:800;color:var(--brand-deep)}.plans-v2 .featured-plan{background:linear-gradient(145deg,#0f172a,#07543f);color:#fff}.plans-v2 .featured-plan h3,.plans-v2 .featured-plan .price{color:#fff}.plans-v2 .featured-plan p{color:#d1fae5}.membership-note{max-width:980px;margin:0 auto clamp(2rem,5vw,4rem)}.contact-grid{max-width:1080px;margin:0 auto clamp(2rem,5vw,4rem);padding:0 clamp(1rem,4vw,2rem);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.2rem;align-items:start}.contact-info-card,.contact-card{border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.88);box-shadow:var(--shadow-sm);padding:1.4rem}.contact-info-card{background:linear-gradient(145deg,#0f172a,#064e3b);color:#fff}.contact-info-card h2{color:#fff}.contact-info-card p{color:#d1fae5}.contact-chip{display:inline-flex;margin:.25rem .2rem 0 0;padding:.45rem .65rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-weight:800;color:#fff}.auth-v2{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,480px);gap:1.5rem;align-items:center;max-width:1180px;width:100%;margin:0 auto;padding:clamp(2rem,6vw,5rem) clamp(1rem,4vw,2rem);background:transparent}.auth-visual{position:relative;min-height:420px;border-radius:34px;padding:clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#0f172a,#064e3b);color:#fff;box-shadow:var(--shadow);overflow:hidden}.auth-visual::after{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:999px;background:rgba(255,255,255,.10)}.auth-visual h1,.auth-visual p{color:#fff}.auth-visual>p:not(.eyebrow){max-width:560px;color:#d1fae5;font-size:1.05rem}.rolelist-v2{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}.rolelist-v2 div{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:.55rem .8rem;font-weight:900}.rolelist-v2 div.picked{background:#fff;color:var(--brand-deep)}.rolelist-v2 a{color:inherit}.authcard{border-radius:30px;padding:clamp(1.35rem,3vw,2rem);width:100%;max-width:none}.authcard h2{font-size:2rem}.authcard form{display:grid;gap:.65rem}.auth-submit{width:100%;margin-top:.35rem}.authcard .center{margin-top:.55rem}
@media(max-width:920px){.plans-v2{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-grid,.auth-v2{grid-template-columns:1fr}.auth-visual{min-height:auto}.marketing-hero{text-align:left}.marketing-hero h1,.marketing-hero .lead{margin-left:0}}
@media(max-width:640px){.plans-v2{grid-template-columns:1fr}.contact-grid{padding:0 .95rem}.auth-v2{padding:1rem .9rem 2rem}.auth-visual,.authcard{border-radius:24px}}

/* Classroom request and QR flow */
.class-invite-workspace{align-items:stretch}.qr-share-card{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.25rem;align-items:center;overflow:hidden;position:relative}.qr-share-card::before{content:"";position:absolute;right:-90px;top:-120px;width:250px;height:250px;border-radius:999px;background:rgba(22,163,123,.10)}.qr-share-copy,.qr-box{position:relative}.qr-box{display:grid;justify-items:center;gap:.65rem;padding:1rem;border:1px dashed #bdeedb;border-radius:24px;background:linear-gradient(180deg,#fff,#f6fffb)}.qr-box img,.classroom-qr-mini img{width:220px;max-width:100%;height:auto;border-radius:18px;background:#fff;padding:.65rem;border:1px solid var(--line);box-shadow:var(--shadow-xs)}.qr-box code,.classroom-qr-mini code{display:inline-flex;padding:.42rem .62rem;border-radius:999px;background:#0f172a;color:#fff;font-weight:900;letter-spacing:.04em}.copy-link-box{display:flex;gap:.55rem;align-items:center;margin-top:1rem}.copy-link-box input{flex:1;font-size:.9rem;color:#475569;background:#f8fafc}.classroom-qr-mini{background:linear-gradient(145deg,#ffffff,#f3fff9)!important}.qr-mini-layout{display:flex;gap:1rem;align-items:center}.qr-mini-layout img{width:128px;border-radius:16px}.soft-tabs{margin-top:.75rem;background:#f8fafc}.empty-state-card{max-width:720px}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}
@media(max-width:760px){.qr-share-card{grid-template-columns:1fr}.copy-link-box,.qr-mini-layout{display:grid}.qr-mini-layout img{width:180px}.qr-box{justify-items:start}}

/* SaaS messages, confirmation modal, and loading feedback */
.toast-stack{position:fixed;right:1.1rem;bottom:1.1rem;z-index:2200;display:grid;gap:.72rem;max-width:min(420px,calc(100vw - 2rem));pointer-events:none}.toast{pointer-events:auto;position:relative;display:flex;align-items:flex-start;gap:.85rem;margin:0;padding:.9rem .92rem .9rem 1rem;border-radius:18px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:0 24px 70px -38px rgba(15,23,42,.55);backdrop-filter:blur(16px);animation:toastIn .28s cubic-bezier(.2,.9,.2,1) both}.toast::before{content:"";width:10px;height:10px;border-radius:999px;margin-top:.34rem;background:var(--brand)}.toast span{font-weight:800;color:#243142;line-height:1.35}.toast.flash-err::before{background:#ef4444}.toast.flash-err span{color:#7f1d1d}.toast.flash-ok::before{background:var(--brand)}.toast-close{margin-left:auto;border:0;background:#f1f5f9;color:#64748b;border-radius:10px;width:28px;height:28px;font-size:1.1rem;line-height:1;cursor:pointer}.toast-close:hover{background:#e2e8f0;color:#0f172a}.toast.is-hiding{animation:toastOut .24s ease both}
.confirm-modal{position:fixed;inset:0;z-index:2300;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(15,23,42,.44);backdrop-filter:blur(8px)}.confirm-modal.is-open{display:flex}.confirm-box{width:min(430px,100%);border-radius:26px;background:#fff;border:1px solid rgba(255,255,255,.8);box-shadow:0 35px 120px -55px rgba(15,23,42,.72);padding:1.25rem;animation:modalPop .22s ease both}.confirm-box h3{margin:0 0 .45rem}.confirm-box p{color:#596779;margin:.2rem 0 1.05rem;line-height:1.55}.confirm-actions{display:flex;justify-content:flex-end;gap:.65rem;flex-wrap:wrap}.busy-overlay{position:fixed;inset:0;z-index:2400;display:grid;place-items:center;background:rgba(248,250,252,.62);backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:opacity .18s ease}.is-busy .busy-overlay{opacity:1;pointer-events:auto}.busy-card{display:grid;justify-items:center;gap:.45rem;padding:1.15rem 1.3rem;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 28px 90px -50px rgba(15,23,42,.65)}.busy-card strong{font-family:var(--font-display);font-size:1.05rem}.busy-card small{color:var(--muted);font-weight:700}.spinner{width:34px;height:34px;border:4px solid #dbeafe;border-top-color:var(--brand);border-radius:50%;animation:spin .72s linear infinite}.table-scroll{position:relative}.table-scroll:empty::before{content:"";display:block;height:160px;border-radius:22px;background:linear-gradient(90deg,#f1f5f9 0%,#fff 45%,#f1f5f9 100%);background-size:240% 100%;animation:skeleton 1.2s infinite}.pagination{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;flex-wrap:wrap;margin-top:1rem}.pagination span{font-weight:800;color:#596779;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem .75rem;box-shadow:var(--shadow-xs)}.search-list-results{max-height:360px;overflow:auto;scrollbar-gutter:stable}.classroom-checks label{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}.classroom-checks label:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes skeleton{0%{background-position:120% 0}100%{background-position:-120% 0}}@keyframes toastIn{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}@keyframes toastOut{to{transform:translateY(10px) scale(.98);opacity:0}}@keyframes modalPop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@media(max-width:640px){.toast-stack{left:.75rem;right:.75rem;bottom:.75rem}.confirm-actions .btn{flex:1}.pagination{justify-content:center}.pagination .btn{flex:1}}
@media(prefers-reduced-motion:reduce){.toast,.toast.is-hiding,.confirm-box,.spinner,.busy-overlay{animation:none!important;transition:none!important}.spinner{border-top-color:#dbeafe}}
.search-list-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.55rem}.search-list-head label{margin:0}.search-list-head .btnrow{gap:.45rem}


/* Footer legal links */
.footer-links{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.footer-links a{display:inline-flex;align-items:center;min-height:32px;padding:.25rem .55rem;border-radius:999px}
.footer-links a:hover{background:var(--brand-mist, var(--brand-tint));color:var(--brand-deep)}

/* Fixed global search: keeps the header search aligned and responsive */
.global-search{
  flex:1 1 300px;min-width:min(320px,100%);max-width:460px;
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.35rem;
  min-height:42px;padding:.25rem .3rem .25rem .75rem;border:1px solid var(--line, var(--hairline));
  border-radius:999px;background:rgba(255,255,255,.92);box-shadow:var(--shadow-xs, 0 1px 2px rgba(15,23,42,.05));
}
.global-search span{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-weight:900;line-height:1}
.global-search input[type="text"]{
  min-width:0!important;width:100%;min-height:32px!important;margin:0!important;padding:.35rem .25rem!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:.9rem!important;
}
.global-search input[type="text"]:focus{box-shadow:none!important;border-color:transparent!important}
.global-search .btn{min-height:32px;padding:.35rem .75rem;white-space:nowrap;border-radius:999px}
@media(max-width:1080px){.global-search{flex-basis:240px;min-width:min(260px,100%)}}
@media(max-width:920px){.global-search{width:100%;max-width:none;min-width:0}.global-search .btn{padding:.35rem .9rem}}
@media(max-width:460px){.global-search{grid-template-columns:auto minmax(0,1fr);padding-right:.75rem}.global-search .btn{grid-column:1/-1;width:100%;margin-top:.2rem}}

/* ============================================================
   Scrantron outstanding responsive refresh
   Final override layer: premium SaaS polish + all-screen layout.
   ============================================================ */
:root{
  color-scheme:light;
  --brand:#10a37f;
  --brand-strong:#078465;
  --brand-deep:#064e3b;
  --brand-soft:#dffdf1;
  --brand-mist:#f0fdf7;
  --ink:#101828;
  --ink-2:#344054;
  --muted:#667085;
  --page:#f6f8fb;
  --surface:#ffffff;
  --surface-soft:#f8fbfa;
  --line:#e4e9f0;
  --line-strong:#ccd6e1;
  --glass:rgba(255,255,255,.82);
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 8px 24px -18px rgba(16,24,40,.28);
  --shadow:0 26px 80px -48px rgba(16,24,40,.55);
  --ring:0 0 0 4px rgba(16,163,127,.18);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:30px;
  --header-h:74px;
  --footer-h:64px;
  --sidebar-w:276px;
  --page-pad:clamp(.9rem,2.4vw,1.65rem);
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  min-width:320px;
  background:
    radial-gradient(circle at 8% -10%,rgba(16,163,127,.14),transparent 34rem),
    radial-gradient(circle at 96% 4%,rgba(6,78,59,.10),transparent 30rem),
    linear-gradient(180deg,#f9fbfc 0%,var(--page) 38%,#eef4f2 100%);
}
body.nav-open{overflow:hidden}
::selection{background:rgba(16,163,127,.22)}
:focus-visible{outline:none!important;box-shadow:var(--ring)!important}
.skip-link{position:fixed;left:1rem;top:.75rem;z-index:3000;transform:translateY(-150%);padding:.65rem .9rem;border-radius:999px;background:#0f172a;color:#fff;text-decoration:none;font-weight:900;box-shadow:var(--shadow)}
.skip-link:focus{transform:translateY(0)}

/* Top chrome */
.topbar.glass-nav,.topbar{
  min-height:var(--header-h);
  padding:calc(.55rem + env(safe-area-inset-top,0px)) clamp(.85rem,2vw,1.5rem) .55rem;
  gap:.9rem;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(228,233,240,.9);
  box-shadow:0 10px 34px -28px rgba(16,24,40,.55);
  backdrop-filter:blur(18px) saturate(1.35);
}
.logo{gap:.62rem;color:var(--ink);font-family:var(--font-body);font-weight:900;letter-spacing:-.04em;font-size:clamp(1.05rem,.94rem + .55vw,1.34rem)}
.logo::after{display:none}
.logo-mark,.mini-logo{
  display:inline-grid;place-items:center;width:42px;height:42px;border-radius:16px;
  background:linear-gradient(145deg,var(--brand),var(--brand-deep));color:#fff;
  font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;box-shadow:0 16px 32px -24px rgba(6,78,59,.85);
}
.logo-text{white-space:nowrap}
.nav-panel{gap:.8rem;min-width:0}
.mainnav{gap:.18rem;padding:.2rem;border:1px solid rgba(228,233,240,.88);border-radius:999px;background:rgba(255,255,255,.64);box-shadow:var(--shadow-xs)}
.mainnav a,.authlinks a{min-height:40px;border-radius:999px;padding:.48rem .78rem;color:#475467;font-weight:800;font-size:.9rem;white-space:nowrap}
.mainnav a.on,.mainnav a:hover,.authlinks a:hover{background:#ecfdf3;color:var(--brand-deep)}
.authlinks{gap:.42rem;min-width:0}.authlinks .who{max-width:190px;background:#ecfdf3;border:1px solid #baf7d9;color:var(--brand-deep)}
.authlinks .nav-cta,.authlinks .dashboard-link{background:linear-gradient(145deg,#101828,#1f2937);color:#fff}.authlinks .nav-cta:hover,.authlinks .dashboard-link:hover{background:linear-gradient(145deg,var(--brand),var(--brand-deep));color:#fff}
.nav-toggle-btn span{display:block;width:18px;height:2px;background:currentColor;border-radius:999px;transition:transform .16s ease,opacity .16s ease}.nav-toggle-btn{gap:.28rem;justify-content:center;width:44px;min-height:44px;padding:0;border-radius:15px;background:#fff}
.nav-toggle:checked + .nav-toggle-btn span:first-child{transform:translateY(6px) rotate(45deg)}.nav-toggle:checked + .nav-toggle-btn span:nth-child(2){opacity:0}.nav-toggle:checked + .nav-toggle-btn span:last-child{transform:translateY(-6px) rotate(-45deg)}
.global-search{flex:1 1 330px;max-width:470px;min-width:250px;background:rgba(255,255,255,.78);border-color:rgba(212,221,230,.9)}
.global-search input[type="text"]{font-weight:700;color:var(--ink-2)}

/* Shared content rhythm */
.section,.home-section,.marketing-page{padding-inline:clamp(1rem,4vw,3rem)}
.main,.card,.authcard,.plancard,.filter-card,.contact-card,.contact-info-card,.dashboard-hero,.dashboard-panel,.hero-v2::before,.app-preview-window{border-color:rgba(228,233,240,.95)}
.card,.authcard,.plancard,.contact-card,.contact-info-card,.filter-card,.dashboard-panel{
  border-radius:var(--radius-lg);background:rgba(255,255,255,.86);box-shadow:var(--shadow-sm);backdrop-filter:blur(14px);
}
.card{padding:clamp(1rem,2vw,1.35rem)}
.page-head,.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.page-head h1{font-size:clamp(1.45rem,1rem + 1.45vw,2.24rem);letter-spacing:-.035em}.page-sub{color:var(--muted);font-weight:600;margin:.25rem 0 0}
.lead{color:#475467}.btn{min-height:42px;border:0;background:linear-gradient(145deg,var(--brand),var(--brand-strong));box-shadow:0 16px 32px -24px rgba(6,78,59,.9);font-weight:900}.btn:hover{background:linear-gradient(145deg,var(--brand-strong),var(--brand-deep));transform:translateY(-1px)}.btn.ghost{border:1px solid var(--line-strong);background:#fff;color:var(--ink-2);box-shadow:var(--shadow-xs)}.btn.ghost:hover{background:#f0fdf7;border-color:#9eeccf;color:var(--brand-deep)}.btn.danger{background:linear-gradient(145deg,#e5484d,#b42318)}.btn.small{min-height:36px;padding:.5rem .82rem}.btnrow{gap:.5rem}
.badge{display:inline-flex;align-items:center;gap:.35rem;min-height:28px;padding:.28rem .62rem;border-radius:999px;border:1px solid var(--line);background:#f8fafc;color:#475467;font-size:.78rem;font-weight:900;text-decoration:none}.badge.ok{background:#ecfdf3;color:#057a55;border-color:#baf7d9}.badge.warn{background:#fffaeb;color:#b54708;border-color:#fedf89}.badge.err{background:#fef3f2;color:#b42318;border-color:#fecdca}

/* App shell */
.appshell,.appshell.app-v2{grid-template-columns:var(--sidebar-w) minmax(0,1fr);gap:0;min-height:calc(100svh - var(--header-h) - var(--footer-h))}
.sidebar{
  top:var(--header-h);height:calc(100svh - var(--header-h));padding:1rem .9rem calc(1.2rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#0b1220 0%,#111827 58%,#0b3529 150%);box-shadow:inset -1px 0 0 rgba(255,255,255,.06);scrollbar-width:thin;
}
.side-brand-card{border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.sidebar a{border-radius:16px;color:#d0d5dd;font-weight:850}.sidebar a:hover{transform:translateX(3px);background:rgba(255,255,255,.09)}.sidebar a.on{background:linear-gradient(145deg,var(--brand),#047857);box-shadow:0 18px 36px -28px rgba(16,163,127,1)}.side-icon{background:rgba(255,255,255,.10)}
.main{
  width:min(100% - calc(var(--page-pad) * 2),1480px);margin:var(--page-pad) auto;padding:clamp(1rem,2.1vw,1.75rem);
  border-radius:clamp(22px,3vw,34px);background:rgba(255,255,255,.72);border:1px solid rgba(228,233,240,.96);
  box-shadow:0 26px 75px -58px rgba(16,24,40,.62);overflow:hidden;
}
.dashboard-main{overflow:visible}.dashboard-hero{grid-template-columns:minmax(0,1fr) minmax(220px,.34fr);border-radius:34px;background:linear-gradient(135deg,#fff 0%,#f0fdf7 52%,#e8fff6 100%)}
.stats,.statgrid,.quick-grid,.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem}.stat,.stat-card,.quick-card{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-xs);padding:1rem}.stat strong,.stat .n,.stat-card strong{font-size:clamp(1.45rem,1.1rem + 1vw,2.1rem);letter-spacing:-.04em;color:var(--ink)}

/* Forms and filter rows */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=datetime-local],textarea,select{min-height:46px;border-radius:14px;border-color:#d7dee8;background:#fff;font-weight:650;color:var(--ink-2)}
label{font-weight:850;color:#344054}.form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}.filters-grid,.filters-grid.compact-one-line{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:.85rem;align-items:end}.filters-grid .search-field{min-width:0}.filter-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}.filter-card{position:relative;overflow:hidden}.filter-card::after{content:"";position:absolute;right:-55px;top:-75px;width:160px;height:160px;border-radius:50%;background:rgba(16,163,127,.08);pointer-events:none}
.tabs{display:flex;gap:.45rem;align-items:center;overflow-x:auto;scrollbar-width:thin;padding:.35rem;margin:0 0 1rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);box-shadow:var(--shadow-xs)}.tab,.tabs a{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;min-height:38px;padding:.5rem .82rem;border-radius:999px;text-decoration:none;color:#475467;font-weight:900}.tab.active,.tabs a.active,.tabs .on{background:linear-gradient(145deg,var(--brand),var(--brand-strong));color:#fff;box-shadow:0 14px 26px -22px rgba(6,78,59,.9)}

/* Tables: readable on desktop, safe on tiny screens */
.table-scroll{width:100%;overflow:auto;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow-xs);-webkit-overflow-scrolling:touch;scrollbar-width:thin}.table-scroll table,.main>table{width:100%;border-collapse:separate;border-spacing:0}.table-scroll th,.main>table th{position:sticky;top:0;z-index:1;background:#f8fafc;color:#344054;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}.table-scroll th,.table-scroll td,.main>table th,.main>table td{padding:.78rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}.table-scroll tr:last-child td{border-bottom:0}.table-scroll tr:hover td{background:#fbfefc}.table-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.empty{padding:1.4rem!important;text-align:center;color:var(--muted);font-weight:800;background:#fbfcfe}

/* Home page polish */
.hero-v2{grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);min-height:calc(100svh - var(--header-h));align-items:center}.hero-v2::before{inset:1rem clamp(.8rem,3vw,2.4rem) auto;height:min(76vh,720px);border-radius:clamp(28px,4vw,52px)}.hero-copy h1{font-size:clamp(2.35rem,1.35rem + 4.4vw,5.45rem);line-height:.98;letter-spacing:-.065em;max-width:12ch}.home-lead{max-width:56ch;color:#475467}.home-actions .btn{min-height:50px;padding-inline:1.15rem}.hero-product{min-height:clamp(420px,52vw,630px)}.app-preview-window{width:min(620px,96%);right:0}.answer-card,.result-pill{box-shadow:var(--shadow);border-color:rgba(228,233,240,.9)}.journey-grid,.feature-grid-v2,.role-grid-v2{grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:1rem}.home-section{max-width:1240px;margin-inline:auto}.pricing-teaser,.home-cta{border-radius:clamp(28px,4vw,44px)}

/* Auth and marketing pages */
.auth-v2{grid-template-columns:minmax(0,1fr) minmax(340px,480px);min-height:calc(100svh - var(--header-h) - var(--footer-h));padding-block:clamp(1rem,4vw,4rem)}.auth-visual{border-radius:38px;background:radial-gradient(circle at 85% 5%,rgba(255,255,255,.14),transparent 18rem),linear-gradient(145deg,#101828,#064e3b)}.authcard{max-width:520px;justify-self:center}.marketing-hero h1{letter-spacing:-.045em}.plans-v2,.contact-grid{max-width:1180px}

/* Footer */
.footer{min-height:var(--footer-h);display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.9rem clamp(1rem,2.2vw,1.6rem);background:rgba(255,255,255,.76);border-top:1px solid rgba(228,233,240,.95);backdrop-filter:blur(14px)}.footer-links{gap:.35rem}.footer-links a{font-weight:850;color:#475467;text-decoration:none}.footer .muted{font-weight:800}

/* Responsive strategy */
@media(max-width:1180px){
  :root{--sidebar-w:250px}
  .mainnav a,.authlinks a{padding-inline:.62rem}.global-search{max-width:360px}
  .hero-v2{grid-template-columns:1fr}.hero-copy h1{max-width:13ch}.hero-product{min-height:500px}.app-preview-window{left:auto;right:0}
}
@media(max-width:920px){
  :root{--header-h:68px;--footer-h:58px;--page-pad:.8rem}
  .topbar{align-items:center}.nav-toggle-btn{display:inline-flex;flex-direction:column;margin-left:auto}.nav-panel{
    position:fixed;left:.75rem;right:.75rem;top:calc(var(--header-h) + .65rem);z-index:1900;display:grid;gap:.75rem;
    max-height:calc(100svh - var(--header-h) - 1.3rem);overflow:auto;padding:1rem;border:1px solid rgba(228,233,240,.96);
    border-radius:26px;background:rgba(255,255,255,.96);box-shadow:0 30px 90px -42px rgba(16,24,40,.66);backdrop-filter:blur(22px);
    transform:translateY(-10px) scale(.98);opacity:0;pointer-events:none;transition:transform .16s ease,opacity .16s ease;
  }
  .nav-toggle:checked ~ .nav-panel{transform:none;opacity:1;pointer-events:auto}.mainnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:20px;padding:.45rem;margin:0}.mainnav a{justify-content:center}.authlinks{justify-content:stretch}.authlinks a,.authlinks .who{flex:1;justify-content:center;max-width:none}.global-search{min-width:0;max-width:none;width:100%;order:2}.appshell,.appshell.app-v2{display:block}.sidebar{position:sticky;top:var(--header-h);z-index:650;height:auto;display:flex;align-items:center;gap:.35rem;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:.55rem .7rem;background:rgba(15,23,42,.98);box-shadow:0 12px 30px -24px rgba(16,24,40,.8)}.side-brand-card,.sidebar-label{display:none}.sidebar a{flex:0 0 auto;margin:0;padding:.58rem .78rem;border-radius:999px;transform:none!important}.side-icon{width:24px;height:24px;border-radius:999px}.main{width:auto;margin:var(--page-pad);border-radius:24px}.dashboard-hero,.request-workspace-saas,.profile-layout,.contact-grid,.auth-v2{grid-template-columns:1fr}.filter-actions{justify-content:flex-start}.hero-v2{padding-top:1.4rem}.hero-copy h1{max-width:12ch}.hero-product{min-height:430px}.app-preview-window{position:relative;inset:auto;width:100%;animation:none}.answer-card,.result-pill{position:relative;inset:auto!important;margin-top:1rem;animation:none}.preview-grid{grid-template-columns:80px 1fr}.preview-main{min-height:260px}.authcard{max-width:none}.auth-visual{min-height:auto}.footer{justify-content:center;text-align:center}
}
@media(max-width:680px){
  body{font-size:15px}.logo-text{max-width:44vw;overflow:hidden;text-overflow:ellipsis}.main{padding:.9rem;border-radius:20px}.page-head{display:grid}.page-head .btnrow,.section-title-row .btnrow{justify-content:flex-start;width:100%}.btnrow .btn,.form-actions .btn,.filter-actions .btn{flex:1 1 auto}.tabs{border-radius:18px}.tab,.tabs a{min-height:36px;padding:.45rem .7rem}.content-grid,.stats,.statgrid,.quick-grid,.dashboard-grid{grid-template-columns:1fr}.table-scroll{border-radius:18px}.table-scroll table,.main>table{min-width:720px}.table-scroll th,.table-scroll td,.main>table th,.main>table td{padding:.68rem .72rem}.table-actions .btn{flex:1 1 100%;width:100%}.form-grid,.filters-grid,.filters-grid.compact-one-line{grid-template-columns:1fr}.inline-form{display:grid}.inline-form .field{flex:auto}.hero-v2::before{inset:.55rem;height:70vh;border-radius:28px}.hero-copy h1{font-size:clamp(2.25rem,15vw,4.2rem);max-width:10ch}.home-actions{display:grid}.home-actions .btn{width:100%}.trust-strip span,.logo-cloud span{flex:1 1 100%;justify-content:center}.preview-grid{grid-template-columns:1fr}.preview-sidebar{display:none}.preview-stats{grid-template-columns:1fr 1fr}.preview-stats span:last-child{grid-column:1/-1}.qr-share-card,.qr-mini-layout,.copy-link-box{grid-template-columns:1fr!important}.toast-stack{left:.75rem;right:.75rem;bottom:.75rem}.footer-links{justify-content:center}.footer-links a{flex:1 1 auto;justify-content:center}
}
@media(max-width:420px){
  :root{--header-h:64px}.logo-mark{width:38px;height:38px;border-radius:14px}.topbar{gap:.5rem}.mainnav{grid-template-columns:1fr}.global-search{grid-template-columns:auto minmax(0,1fr)}.global-search .btn{grid-column:1/-1;width:100%}.authlinks{display:grid;grid-template-columns:1fr}.hero-copy h1{max-width:11ch}.preview-stats{grid-template-columns:1fr}.btn{width:100%}
}
@media(hover:none){.btn:hover,.sidebar a:hover,.table-scroll tr:hover td{transform:none;background:inherit}.btn:hover{background:linear-gradient(145deg,var(--brand),var(--brand-strong));color:#fff}.btn.ghost:hover{background:#fff;color:var(--ink-2)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-orb,.app-preview-window,.mini-chart i,.answer-card,.result-pill,.reveal-on-scroll{animation:none!important;transition:none!important}}


/* Premium homepage image design + package lock states */
.premium-home{overflow:hidden}.home-hero-art{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.72fr) minmax(420px,1.28fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;max-width:1480px;margin:0 auto;padding:clamp(2rem,5vw,5.5rem) clamp(1rem,4vw,2rem) clamp(1.5rem,3vw,3rem)}.home-hero-art::before{content:"";position:absolute;inset:1rem;border-radius:42px;background:linear-gradient(135deg,rgba(79,70,229,.10),rgba(20,184,166,.09) 48%,rgba(255,255,255,.62));z-index:-2}.hero-bg-orb{position:absolute;border-radius:999px;filter:blur(18px);opacity:.5;z-index:-1;animation:orbFloat 9s ease-in-out infinite alternate}.orb-a{width:260px;height:260px;background:#c7d2fe;left:3%;top:9%}.orb-b{width:320px;height:320px;background:#99f6e4;right:5%;bottom:2%;animation-delay:-2s}.hero-art-card,.visual-image-card{margin:0;border-radius:34px;overflow:hidden;background:rgba(255,255,255,.78);border:1px solid rgba(203,213,225,.72);box-shadow:0 32px 95px -48px rgba(15,23,42,.62)}.hero-art-card{transform:perspective(1400px) rotateY(-4deg) rotateX(1deg);transform-origin:center;animation:floatY 8s ease-in-out infinite}.hero-art-card img,.visual-image-card img{display:block;width:100%;height:auto}.hero-copy{max-width:650px}.hero-copy h1{font-size:clamp(2.6rem,5.2vw,5.75rem);line-height:.95;letter-spacing:-.065em}.home-lead{font-size:clamp(1.02rem,1.5vw,1.25rem);max-width:58ch}.hero-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-top:1.25rem}.hero-metrics span{display:grid;gap:.08rem;padding:.78rem .85rem;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:var(--shadow-xs)}.hero-metrics b{font-family:var(--font-mono);font-size:1.1rem;color:var(--brand-deep)}.hero-metrics small{color:var(--muted);font-weight:800}.home-strip{max-width:1180px;margin:0 auto 1.25rem;padding:.7rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}.home-strip span,.feature-points span{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);background:rgba(255,255,255,.86);border-radius:999px;padding:.54rem .78rem;font-weight:900;color:#334155;box-shadow:var(--shadow-xs)}.visual-feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);gap:clamp(1.2rem,4vw,3rem);align-items:center;max-width:1340px}.visual-feature.flip{grid-template-columns:minmax(420px,1.15fr) minmax(0,.85fr)}.visual-feature.flip .visual-copy{order:2}.visual-feature.flip .visual-image-card{order:1}.visual-copy h2{font-size:clamp(2rem,3.4vw,3.65rem);line-height:1}.visual-copy p{font-size:1.05rem}.feature-points{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}.visual-image-card{border-radius:32px;transition:transform .2s ease,box-shadow .2s ease}.visual-image-card:hover{transform:translateY(-5px);box-shadow:0 34px 100px -44px rgba(15,23,42,.7)}.access-flow{max-width:1180px}.access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.access-grid article{position:relative;padding:1.25rem;border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,#fff,#f8fffd);box-shadow:var(--shadow-sm)}.access-grid b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:16px;background:#0f172a;color:#fff;font-family:var(--font-display);margin-bottom:.75rem}.locked-workspace-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;margin-bottom:1rem;padding:1.1rem;border:1px solid #fed7aa;border-radius:24px;background:linear-gradient(135deg,#fff7ed,#ffffff);box-shadow:var(--shadow-xs)}.locked-workspace-banner h2{margin:.1rem 0;font-size:1.35rem}.locked-workspace-banner p{margin:0;color:#7c2d12}.locked-actions{display:flex;gap:.55rem;flex-wrap:wrap}.side-locked-note{display:block;margin:.15rem .55rem .7rem;padding:.65rem .75rem;border-radius:16px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.25);color:#fde68a;font-weight:900;font-size:.82rem}.sidebar .side-locked-note{color:#fef3c7}.checklist span.todo+span{color:#475569;font-weight:750}
@media(max-width:1120px){.home-hero-art,.visual-feature,.visual-feature.flip{grid-template-columns:1fr}.hero-art-card{transform:none}.visual-feature.flip .visual-copy,.visual-feature.flip .visual-image-card{order:initial}.hero-copy{max-width:860px}.access-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.home-hero-art{padding:1rem .85rem 2rem}.home-hero-art::before{inset:.4rem;border-radius:28px}.hero-metrics{grid-template-columns:1fr 1fr}.hero-art-card,.visual-image-card{border-radius:22px}.visual-feature{padding-inline:.85rem}.access-grid{grid-template-columns:1fr}.locked-workspace-banner{grid-template-columns:1fr}.locked-actions .btn{width:100%}.home-strip{justify-content:flex-start;padding:.85rem}.hero-copy h1{font-size:clamp(2.25rem,12vw,3.6rem)}}