/* ---------- tokens ---------- */
:root{
  /* GetConnects Design System tokens (claude.ai/design project, colors_and_type.css):
     blue #00B1FC, cyan #00DCED, teal-end #00DDCD, mint #BFFDFF, dark teal #00A1A6,
     navy #0D1B2A, charcoal #1C2B3A, gray #6B7280, light gray #F3F4F6.
     Status hues = the design system's dashboard set (darker steps of the same hues
     carry badge text so small type stays legible on the pale tints).
     Fonts: Avenir Next headlines, Space Grotesk body per the system, falling back
     to Segoe UI offline. This file makes no external font calls; the hosted
     version loads the real families. */
  --navy:#0D1B2A; --navy-2:#1C2B3A; --ink:#1C2B3A; --muted:#6B7280; --faint:#94A0AB;
  --paper:#F3F4F6; --card:#FFFFFF; --line:#E3E7EB; --line-soft:#EDF0F3;
  --accent:#00B1FC; --accent-hover:#0099DF; --accent-ink:#007377; --accent-soft:#E8FDFE; --accent-line:#A5EEF3;
  --mint:#BFFDFF; --grad:linear-gradient(135deg,#00B1FC 0%,#00DDCD 100%);
  --green:#15803D; --green-fill:#22C55E; --green-bg:#E9F8F0; --green-line:#BFE9CF;
  --amber:#B45309; --amber-fill:#F59E0B; --amber-bg:#FEF4E5; --amber-line:#F6DFB3;
  --red:#B91C1C;   --red-fill:#EF4444;   --red-bg:#FDECEC;   --red-line:#F6C6C6;
  --grey-bg:#EEF1F4; --grey-line:#D8DEE4;
  --s1:#00A1A6; --s2:#6B7280; /* chart series: brand dark teal + gray, fixed order, never cycled */
  --radius:14px; --radius-sm:8px; --radius-btn:10px;
  --shadow:0 4px 16px rgba(13,27,42,.08);
  --font-head:'Avenir Next','Avenir','Nunito','Segoe UI',system-ui,sans-serif;
  --font-body:'Space Grotesk','Plus Jakarta Sans','Hero','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{color-scheme:light}
body{
  font-family:var(--font-body);
  background:var(--paper); color:var(--ink); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.page-title,.card-title,.tile-value,.hero-number,.drawer-title,.login-brand,.nav-brand{font-family:var(--font-head)}
button,input,select,textarea{font:inherit; color:inherit}
img,svg{max-width:100%}
a{color:var(--accent-ink)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.hidden{display:none !important}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }

/* ---------- login ---------- */
#login-screen{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#0A1420 0%, #0D1B2A 50%, #0E3E46 100%); padding:20px;
}
.login-card{background:var(--card); border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.35); width:400px; max-width:100%; padding:30px 30px 24px; position:relative; overflow:hidden}
.login-card::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad)}
.login-brand{font-size:21px; font-weight:700; color:var(--navy); letter-spacing:-.2px}
.login-brand span{color:var(--accent)}
.login-tag{color:var(--muted); font-size:13px; margin-top:2px}
.login-sub{margin:16px 0 8px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.user-row{display:flex; gap:8px}
.user-btn{flex:1; border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:10px 6px; cursor:pointer; text-align:center}
.user-btn .avatar{width:34px; height:34px; border-radius:50%; background:var(--grey-bg); color:var(--navy); font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 6px; font-size:14px}
.user-btn.sel{border-color:var(--accent); background:var(--accent-soft)}
.user-btn.sel .avatar{background:var(--accent); color:#fff}
.user-btn .uname{font-size:13px; font-weight:600}
.user-btn .urole{font-size:11px; color:var(--muted)}
.pin-row{display:flex; gap:8px; margin-top:14px}
.pin-row input{flex:1; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font-size:16px; letter-spacing:.35em; text-align:center}
.pin-row input:focus{border-color:var(--accent); outline:none}
/* real-auth login (v4 step 1): stacked email + password, plain input styling */
.login-form input{width:100%; box-sizing:border-box; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font-size:15px}
.login-form input:focus{border-color:var(--accent); outline:none}
.login-form .pin-row{margin-top:8px}
.login-form .pin-row input{letter-spacing:normal; text-align:left; font-size:15px}
#login-error{color:var(--red); font-size:12.5px; margin-top:8px; min-height:17px}
.login-note{margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); color:var(--faint); font-size:11.5px}

/* ---------- app shell ---------- */
#app{display:grid; grid-template-columns:222px 1fr; min-height:100vh}
nav{background:var(--navy); color:#cfdce8; padding:18px 12px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto}
.nav-brand{color:#fff; font-weight:700; font-size:16.5px; padding:2px 10px 2px}
.nav-brand span{color:#00DCED}
.nav-tag{color:rgba(191,253,255,.7); font-size:11px; padding:0 10px 14px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:12px}
.nav-item{display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:0; color:#c3d2df; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:14px; margin-bottom:2px}
.nav-item svg{flex:0 0 auto; opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.07); color:#fff}
.nav-item.active{background:var(--accent); color:#fff; font-weight:600}
.nav-foot{margin-top:auto; padding:12px 10px 2px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#7e93a6}
.nav-foot b{color:#d5e2ec; display:block; font-size:13px}
#logout-btn{margin-top:8px; background:rgba(255,255,255,.08); color:#d5e2ec; border:0; border-radius:7px; padding:6px 10px; cursor:pointer; font-size:12.5px}
#logout-btn:hover{background:rgba(255,255,255,.16)}

main{padding:22px 26px 60px; max-width:1220px; width:100%}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.page-title{font-size:22px; font-weight:700; color:var(--navy); letter-spacing:-.2px}
.page-sub{color:var(--muted); font-size:13.5px; margin-top:2px}
.head-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* the drift-guard badge (the v1 ink-stamp tilt read as crooked; straightened 13 Jul per Steph) */
.stamp{
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  border:2px solid var(--green); color:var(--green); border-radius:8px; padding:5px 12px;
  font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--green-bg);
}
.stamp small{font-weight:600; letter-spacing:.04em; font-size:10px; text-transform:none}
.stamp.fail{border-color:var(--red); color:var(--red); background:var(--red-bg)}

.role-chip{display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:4px 12px 4px 5px; font-size:12.5px}
.role-chip .avatar{width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center}

/* ---------- cards, tiles, grids ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:16px}
.card-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.card-title{font-size:15px; font-weight:700; color:var(--navy)}
.card-sub{font-size:12.5px; color:var(--muted)}
.grid{display:grid; gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr)}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px}
.tile-label{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.tile-value{font-size:23px; font-weight:700; color:var(--navy); margin-top:3px; letter-spacing:-.3px}
.tile-value .unit{font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0}
.tile-note{font-size:12px; color:var(--muted); margin-top:2px}
.tile.t-green{border-color:var(--green-line); background:var(--green-bg)}
.tile.t-amber{border-color:var(--amber-line); background:var(--amber-bg)}
.tile.t-red{border-color:var(--red-line); background:var(--red-bg)}
.tile .delta-up{color:var(--green); font-weight:600}
.tile .delta-down{color:var(--red); font-weight:600}

/* hero */
.hero{display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:stretch}
.hero-number{font-size:52px; font-weight:750; color:var(--navy); letter-spacing:-1.5px; line-height:1.05}
.hero-number .unit{font-size:17px; font-weight:600; color:var(--muted); letter-spacing:0}
.hero-sub{color:var(--muted); font-size:13.5px; margin-top:4px}
.progress{height:12px; background:var(--grey-bg); border-radius:8px; position:relative; margin:14px 0 6px; overflow:visible}
.progress-fill{height:100%; background:var(--grad); border-radius:8px 3px 3px 8px; min-width:6px}
.progress .marker{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--faint)}
.progress .marker.stretch{background:var(--amber)}
.progress-legend{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted)}

/* badges / chips / flags */
.badge{display:inline-flex; align-items:center; gap:5px; border-radius:6px; padding:2px 8px; font-size:11.5px; font-weight:600; border:1px solid transparent; white-space:nowrap}
.badge-green{background:var(--green-bg); color:var(--green); border-color:var(--green-line)}
.badge-amber{background:var(--amber-bg); color:var(--amber); border-color:var(--amber-line)}
.badge-red{background:var(--red-bg); color:var(--red); border-color:var(--red-line)}
.badge-grey{background:var(--grey-bg); color:var(--muted); border-color:var(--grey-line)}
.badge-accent{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-line)}
.health-dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:2px}
.hd-green{background:var(--green-fill)} .hd-amber{background:var(--amber-fill)} .hd-red{background:var(--red-fill)} .hd-grey{background:var(--faint)}
.flag{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; border-radius:5px; padding:1.5px 6px; margin:1px 2px 1px 0; white-space:nowrap}
.flag-hard{background:var(--red-bg); color:var(--red); border:1px solid var(--red-line)}
.flag-soft{background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-line)}
/* compact flag chip for tables: icon + count, full list in the tooltip */
.flag-chip{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; border-radius:6px; padding:2px 8px; margin-right:3px; white-space:nowrap; cursor:default}
.flag-chip.fc-hard{background:var(--red-bg); color:var(--red); border:1px solid var(--red-line)}
.flag-chip.fc-soft{background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-line)}
/* needs-attention lane */
.attn-row{display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line-soft); font-size:13px; cursor:pointer}
.attn-row:last-child{border-bottom:0}
.attn-row:hover{background:#f8fafc}
.attn-ic{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800}
.attn-ic.a-red{background:var(--red-bg); color:var(--red); border:1px solid var(--red-line)}
.attn-ic.a-amber{background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-line)}
.attn-why{color:var(--muted); font-size:12px; margin-left:auto; text-align:right}
/* funnel bars (campaign drawer) */
.funnel-row{display:flex; align-items:center; gap:10px; padding:4px 0; font-size:12.5px}
.funnel-row .f-label{width:86px; color:var(--muted); font-weight:600}
.funnel-row .f-bar{flex:1; height:14px; background:var(--grey-bg); border-radius:4px; overflow:hidden}
.funnel-row .f-bar i{display:block; height:100%; background:var(--grad); border-radius:4px 2px 2px 4px}
.funnel-row .f-val{min-width:56px; text-align:right; font-weight:700}
/* owner-financials share toggle */
.share-toggle{display:flex; align-items:center; gap:10px; font-size:13.5px}
.share-toggle input{width:18px; height:18px; accent-color:var(--accent)}
/* single-line stat rows (reconciled position) */
.stat-row{display:flex; align-items:baseline; gap:8px; padding:7.5px 0; border-bottom:1px solid var(--line-soft)}
.stat-row:last-child{border-bottom:0}
.stat-label{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.stat-note{font-size:11.5px; color:var(--faint); margin-left:auto; white-space:nowrap}
.stat-value{font-size:15.5px; color:var(--navy); white-space:nowrap; min-width:72px; text-align:right}
.ready-tile{border:1.5px dashed var(--grey-line); background:#fbfcfe; border-radius:var(--radius); padding:13px 14px}
.ready-tile .tile-value{font-size:14px; color:var(--muted); font-weight:600; margin-top:5px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); text-align:left; padding:10px 12px; border-bottom:1.5px solid var(--line); white-space:nowrap}
td{padding:12px; border-bottom:1px solid var(--line-soft); vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr.rowlink{cursor:pointer}
tbody tr.rowlink:hover{background:#f8fafc}
td.r,th.r{text-align:right}
tr.row-red td{background:var(--red-bg)}
tr.row-amber td{background:var(--amber-bg)}
tr.row-green td{background:var(--green-bg)}

/* ---------- buttons & forms ---------- */
.btn{border:1px solid var(--line); background:#fff; border-radius:var(--radius-btn); padding:7px 14px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink)}
.btn:hover{border-color:var(--faint)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 16px rgba(0,177,252,.30)}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn-ghost{background:transparent}
.btn-danger{background:#fff; border-color:var(--red-line); color:var(--red)}
.btn-sm{padding:4px 10px; font-size:12.5px; border-radius:7px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.field{margin-bottom:12px}
.field label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px}
.field input,.field select,.field textarea{width:100%; border:1.5px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; font-size:14px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent); outline:none}
.field textarea{resize:vertical; min-height:64px}
.field .own{font-size:10.5px; color:var(--faint); font-weight:600; margin-left:5px; text-transform:none; letter-spacing:0}
.field.locked input,.field.locked select,.field.locked textarea{background:var(--grey-bg); color:var(--muted); cursor:not-allowed}
.lock-hint{font-size:11px; color:var(--faint); margin-top:3px}
.form-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.form-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.form-grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.inline-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* ---------- gauges / registry tiles ---------- */
.gauge{border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:13px 14px}
.gauge .g-top, .ready-tile .g-top{display:flex; justify-content:space-between; align-items:center; gap:6px}
.gauge .g-name{font-size:12px; font-weight:700; color:var(--navy)}
.gauge .g-owner{font-size:10.5px; color:var(--faint); font-weight:600}
.gauge .g-value{font-size:21px; font-weight:700; margin-top:4px; letter-spacing:-.3px}
.gauge .g-target{font-size:11.5px; color:var(--muted); margin-top:1px}
.gauge.g-green{border-left:4px solid var(--green-fill)}
.gauge.g-amber{border-left:4px solid var(--amber-fill)}
.gauge.g-red{border-left:4px solid var(--red-fill)}
.gauge.g-grey{border-left:4px solid var(--grey-line)}

/* milestones */
.mile{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:8px 11px; background:#fff; font-size:12.5px}
.mile .light{width:10px; height:10px; border-radius:50%; flex:0 0 auto}
.light-open{background:#fff; border:2px solid var(--faint)}
.light-part{background:var(--amber-fill)}
.light-done{background:var(--green-fill)}
.light-date{background:var(--accent)}

/* attainment bar */
.attain{display:flex; align-items:center; gap:8px}
.attain .bar{flex:1; height:8px; background:var(--grey-bg); border-radius:5px; overflow:hidden; min-width:70px}
.attain .bar i{display:block; height:100%; border-radius:5px 2px 2px 5px}
.attain .pct{font-size:12px; font-weight:700; min-width:38px; text-align:right}

/* ---------- drawer ---------- */
#overlay{position:fixed; inset:0; background:rgba(15,32,48,.45); z-index:40; opacity:0; pointer-events:none; transition:opacity .15s}
#drawer{position:fixed; top:0; right:-640px; width:620px; max-width:96vw; height:100vh; background:var(--paper); z-index:50; box-shadow:-12px 0 40px rgba(15,32,48,.25); transition:right .18s ease; display:flex; flex-direction:column}
body.drawer-open #overlay{opacity:1; pointer-events:auto}
body.drawer-open #drawer{right:0}
.drawer-head{background:#fff; border-bottom:1px solid var(--line); padding:16px 20px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.drawer-title{font-size:17px; font-weight:700; color:var(--navy)}
.drawer-sub{font-size:12.5px; color:var(--muted); margin-top:2px}
#drawer-body{padding:18px 20px 40px; overflow-y:auto; flex:1}
/* drawer forms: the 620px panel never runs the 4-across grid, and stacks fully when narrow */
#drawer .form-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:520px){ #drawer .form-grid, #drawer .form-grid-2, #drawer .form-grid-3{grid-template-columns:1fr} #drawer .kv{grid-template-columns:1fr} }
.drawer-close{background:none; border:0; font-size:22px; line-height:1; cursor:pointer; color:var(--muted); padding:4px}
.kv{display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; font-size:13.5px}
.kv div b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin-bottom:1px}

/* ---------- feed ---------- */
.feed{display:flex; flex-direction:column; gap:0}
.feed-item{display:flex; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line-soft); font-size:13px}
.feed-item:last-child{border-bottom:0}
.feed .avatar{width:26px; height:26px; border-radius:50%; background:var(--grey-bg); color:var(--navy); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:1px}
.feed .who{font-weight:700}
.feed .when{color:var(--faint); font-size:11.5px}
.feed .what{color:var(--ink); margin-top:1px}
.feed .tag{font-size:10px; font-weight:700; color:var(--accent-ink); background:var(--accent-soft); border-radius:4px; padding:1px 5px; margin-left:6px; text-transform:uppercase; letter-spacing:.05em}
.feed .tag.activity{color:var(--muted); background:var(--grey-bg)}

/* ---------- charts ---------- */
.chart-box{position:relative}
.chart-box svg{display:block; width:100%; height:auto}
#chart-tip{position:fixed; z-index:70; background:var(--navy); color:#fff; font-size:12px; border-radius:7px; padding:7px 10px; pointer-events:none; opacity:0; max-width:260px; box-shadow:0 6px 18px rgba(0,0,0,.25)}
#chart-tip b{display:block; font-size:11px; color:var(--mint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:6px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}

/* ---------- levers ---------- */
.lever{margin-bottom:14px}
.lever .l-top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px}
.lever .l-top b{color:var(--navy)}
.lever input[type=range]{width:100%; accent-color:var(--accent)}
.lever .l-marks{display:flex; justify-content:space-between; font-size:10.5px; color:var(--faint)}
.preset-row{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px}

/* ---------- checks ---------- */
.check-row{display:flex; gap:10px; align-items:flex-start; padding:8px 2px; border-bottom:1px solid var(--line-soft); font-size:13px}
.check-row:last-child{border-bottom:0}
.check-ic{flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff}
.ck-pass{background:var(--green)} .ck-fail{background:var(--red)} .ck-info{background:var(--faint)}
pre.code{background:#0f2233; color:#cfe3ee; border-radius:9px; padding:14px; font-size:12px; overflow-x:auto; font-family:Consolas,'Cascadia Mono',monospace; line-height:1.5}
details.roll{border:1px solid var(--line); border-radius:9px; background:#fff; padding:10px 14px}
details.roll summary{cursor:pointer; font-weight:600; font-size:13.5px; color:var(--navy)}

/* ---------- toast ---------- */
#toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--navy); color:#fff; border-radius:9px; padding:10px 18px; font-size:13.5px; z-index:80; transition:transform .2s; box-shadow:0 8px 26px rgba(0,0,0,.3)}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- responsive ---------- */
@media (max-width:1020px){ .grid-6{grid-template-columns:repeat(3,1fr)} .grid-5{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} .hero{grid-template-columns:1fr} .form-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){
  #app{grid-template-columns:1fr}
  nav{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px; padding:10px}
  .nav-brand{width:100%} .nav-tag{display:none} .nav-item{width:auto; padding:7px 10px} .nav-foot{margin:0 0 0 auto; border:0; padding:0}
  main{padding:16px 14px 50px}
  .grid-3,.grid-2{grid-template-columns:1fr} .grid-6,.grid-5,.grid-4{grid-template-columns:repeat(2,1fr)}
  .form-grid,.form-grid-3,.form-grid-2{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
}