/* COMVERA design system — navy + sage.
   Navy carries action and trust; sage is the signature accent; surfaces are true white
   on a faintly sage-tinted canvas. Status colours are semantic and separate from the brand. */
:root{
  --ink:#0E1A2B; --ink-soft:#3A4658; --grey:#5E6A7A; --grey-line:#E2E7E4;
  --paper:#F3F6F4; --paper-raised:#FFFFFF; --paper-deep:#EAF0EC;
  --brand:#16325C; --brand-hover:#0F2647; --brand-ink:#0F2647; --brand-bg:#E6ECF6;
  --sage:#6E9C80; --sage-strong:#3F6E55; --sage-bg:#E4EFE7; --sage-soft:#C9DDCF;
  --blue:#1E5BB8; --blue-bg:#E7EFFB;
  --green:#12805A; --green-bg:#E1F4EA;
  --amber:#A15F00; --amber-bg:#FFF1DA;
  --red:#C0362C; --red-bg:#FDE9E7;
  /* panel: the deep navy surface used for the splash, verification and toasts */
  --panel:#0E1E36; --panel-raised:#16294A; --panel-line:#27406A;
  --panel-ink:#F2F5FA; --panel-ink-soft:#A9B7CC;
  --on-brand:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(14,26,43,.06);
  --shadow:0 1px 2px rgba(14,26,43,.05), 0 6px 20px rgba(14,26,43,.06);
  --shadow-lg:0 12px 40px rgba(14,26,43,.18);
  --radius:14px; --radius-sm:10px; --radius-xs:7px;
  --font-head:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#E9EEF5; --ink-soft:#BAC4D2; --grey:#8C99AB; --grey-line:#243249;
    --paper:#0A1322; --paper-raised:#111D31; --paper-deep:#172640;
    --brand:#8FB2F2; --brand-hover:#A9C4F6; --brand-ink:#D6E3FB; --brand-bg:#1A2D4E;
    --sage:#8FC0A2; --sage-strong:#A9D4B9; --sage-bg:#15302A; --sage-soft:#2B4A3E;
    --blue:#8DB6F5; --blue-bg:#16284A;
    --green:#6CD3A2; --green-bg:#0F2E24;
    --amber:#F0B85A; --amber-bg:#35270B;
    --red:#F28B80; --red-bg:#3A1A18;
    --panel:#060D19; --panel-raised:#0E1A2E; --panel-line:#1E2F4B;
    --on-brand:#0A1322;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.25);
    --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E9EEF5; --ink-soft:#BAC4D2; --grey:#8C99AB; --grey-line:#243249;
  --paper:#0A1322; --paper-raised:#111D31; --paper-deep:#172640;
  --brand:#8FB2F2; --brand-hover:#A9C4F6; --brand-ink:#D6E3FB; --brand-bg:#1A2D4E;
  --sage:#8FC0A2; --sage-strong:#A9D4B9; --sage-bg:#15302A; --sage-soft:#2B4A3E;
  --blue:#8DB6F5; --blue-bg:#16284A;
  --green:#6CD3A2; --green-bg:#0F2E24;
  --amber:#F0B85A; --amber-bg:#35270B;
  --red:#F28B80; --red-bg:#3A1A18;
  --panel:#060D19; --panel-raised:#0E1A2E; --panel-line:#1E2F4B;
  --on-brand:#0A1322;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.25);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  background:var(--paper); color:var(--ink); font-family:var(--font-body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100%;
  font-feature-settings:"ss01";
}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:650; letter-spacing:-.015em; text-wrap:balance;}
button{font-family:var(--font-body); cursor:pointer; color:inherit;}
a{color:inherit;}
.mono{font-family:var(--font-mono);}
::selection{background:var(--sage-soft);}

/* ---- shell ---- */
#app{max-width:960px; margin:0 auto; padding-bottom:104px;}
.topbar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
}
.brand-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(12px + env(safe-area-inset-top,0px)) 18px 12px;}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-mark{
  width:32px; height:32px; flex:none; border-radius:10px; background:var(--panel) center/24px 24px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M45.79 20.43A18 18 0 1 0 45.79 43.57' fill='none' stroke='%236E9C80' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='32' r='5' fill='%23fff'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.brand-text{line-height:1.15; min-width:0;}
.brand-name{font-family:var(--font-head); font-weight:700; font-size:17px; letter-spacing:.12em;}
.brand-tag{font-size:11px; color:var(--grey); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw;}
.identity{display:flex; align-items:center; gap:6px;}
.identity select{border:1px solid var(--grey-line); border-radius:999px; background:var(--paper-raised); color:var(--ink); font-family:var(--font-body); font-size:11.5px; font-weight:600; padding:7px 10px; max-width:96px;}
.identity select:focus{outline:none;}
.identity-avatar{
  width:36px; height:36px; border-radius:50%; background:var(--brand); color:var(--on-brand);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none;
  font-family:var(--font-head); border:none; cursor:pointer; position:relative; transition:transform .12s ease, background .12s ease;
}
.identity-avatar:hover{transform:translateY(-1px);}
.identity-avatar .ic{width:17px; height:17px;}
.bell-dot{position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--red); border:2px solid var(--paper-raised);}

/* ---- bottom nav: floating bar with a centre action ---- */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; max-width:960px; margin:0 auto;
  padding:0 12px calc(10px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
}
.bottomnav-row{
  pointer-events:auto; display:flex; align-items:center; justify-content:space-around; padding:6px 8px;
  background:color-mix(in srgb, var(--paper-raised) 92%, transparent); border-radius:22px; box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px);
  border:1px solid var(--grey-line);
}
.bottomnav button[data-nav]{
  flex:1; max-width:92px; background:none; border:none; color:var(--grey); font-size:11px; font-weight:600;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 2px; border-radius:14px; font-family:var(--font-body);
  transition:color .15s ease, background .15s ease;
}
.bottomnav button[data-nav] .ic{width:21px; height:21px;}
.bottomnav button[data-nav].active{color:var(--brand); background:var(--brand-bg);}
.bottomnav button[data-nav].active .ic path,.bottomnav button[data-nav].active .ic rect,.bottomnav button[data-nav].active .ic circle{stroke:var(--brand);}
.fab{
  width:54px; height:54px; border-radius:18px; background:var(--brand); color:var(--on-brand); border:none;
  display:flex; align-items:center; justify-content:center; flex:none; margin:0 4px;
  box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 40%, transparent); transition:transform .12s ease;
}
.fab:hover{transform:translateY(-2px);}
.fab:active{transform:translateY(0) scale(.97);}

/* ---- quick-action sheet / menus ---- */
.qa-item{display:flex; align-items:center; gap:14px; padding:12px 10px; margin:0 -10px; border:none; border-radius:var(--radius-sm); background:none; width:calc(100% + 20px); text-align:left; transition:background .12s ease;}
.qa-item:hover{background:var(--paper-deep);}
.qa-icon{width:40px; height:40px; border-radius:12px; background:var(--sage-bg); color:var(--sage-strong); display:flex; align-items:center; justify-content:center; flex:none; font-weight:700;}
.qa-icon svg{width:19px; height:19px;}
.qa-icon svg path,.qa-icon svg rect,.qa-icon svg circle{stroke:currentColor;}
.qa-title{font-weight:600; font-size:14.5px;}
.qa-sub{font-size:12.5px; color:var(--grey); margin-top:1px;}

/* ---- content ---- */
.view{padding:10px 18px 28px;}
.view-head{margin:6px 0 18px;}
.view-head h1{font-size:26px; font-weight:700; letter-spacing:-.025em;}
.view-head p{color:var(--grey); font-size:13.5px; margin-top:4px;}
.onboard-wrap{max-width:440px; margin:0 auto; padding:36px 18px 48px;}
.demo-tag{display:inline-block; font-size:9px; font-weight:700; letter-spacing:.08em; background:var(--amber-bg); color:var(--amber); padding:2px 6px; border-radius:999px; vertical-align:middle; margin-left:4px;}
.section-title{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--grey); margin:26px 2px 10px; font-weight:700; display:flex; align-items:center; gap:8px;}
.section-title:first-child{margin-top:0;}

/* dashboard hero */
.dash-hero{
  position:relative; overflow:hidden; margin:4px 0 18px; padding:22px 20px 20px; border-radius:22px; color:var(--panel-ink);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--sage) 42%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, #16325C 0%, #0E1E36 100%);
  box-shadow:var(--shadow);
}
.dash-hero::after{
  content:""; position:absolute; right:-34px; top:-38px; width:150px; height:150px; opacity:.07; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2.5 4 5.6v6.1c0 4.9 3.3 8.6 8 9.8 4.7-1.2 8-4.9 8-9.8V5.6L12 2.5Z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
}
.dash-hero h1{font-size:clamp(22px,6vw,28px); color:#fff; margin-top:2px;}
.hero-eyebrow{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A9D0B7;}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; position:relative; z-index:1;}
.hero-stat{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:10px 12px;}
.hero-stat b{display:block; font-size:24px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; line-height:1.1;}
.hero-stat span{font-size:11.5px; color:#C8D4E6; font-weight:500;}
.dash-hero p.greeting{color:#C8D4E6; font-size:13.5px; margin-top:4px;}
.dash-hero .btn.secondary{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.18);}
.dash-hero .btn.secondary:hover{background:rgba(255,255,255,.2);}

/* cards */
.card{position:relative; background:var(--paper-raised); border:1px solid var(--grey-line); padding:16px; margin-bottom:10px; border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.card.checkpoint{box-shadow:var(--shadow);}
[data-action].card,.card[data-action]{transition:transform .12s ease, box-shadow .12s ease;}
.card[data-action]:hover{transform:translateY(-1px); box-shadow:var(--shadow-lg);}

.attn-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.attn-card{background:var(--paper-raised); border:1px solid var(--grey-line); border-radius:var(--radius); padding:14px; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease;}
.attn-card:hover{transform:translateY(-1px); box-shadow:var(--shadow);}
.attn-num{font-family:var(--font-head); font-size:30px; font-weight:700; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.attn-label{font-size:12.5px; color:var(--grey); margin-top:6px; font-weight:500;}
.attn-card.red .attn-num{color:var(--red);}
.attn-card.amber .attn-num{color:var(--amber);}
.attn-card.blue .attn-num{color:var(--blue);}
.attn-card.green .attn-num{color:var(--green);}

.portfolio-row{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--grey-line); border-radius:var(--radius); background:var(--paper-raised); margin-bottom:8px; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease;}
.portfolio-row:hover{transform:translateY(-1px); box-shadow:var(--shadow);}
.portfolio-bar{flex:1; min-width:0;}
.portfolio-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.portfolio-name{font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.portfolio-pct{font-family:var(--font-head); font-weight:700; font-size:14px; flex:none; font-variant-numeric:tabular-nums;}
.portfolio-track{height:7px; background:var(--paper-deep); border-radius:999px; margin-top:8px; overflow:hidden;}
.portfolio-fill{height:100%; border-radius:999px;}
.portfolio-sub{font-size:12px; color:var(--grey); margin-top:6px;}

.site-card{display:flex; align-items:center; gap:14px; padding:16px;}
.gauge{position:relative; width:50px; height:50px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.gauge svg{position:absolute; inset:0; transform:rotate(-90deg);}
.gauge span{font-family:var(--font-head); font-weight:700; font-size:12.5px; font-variant-numeric:tabular-nums;}
.site-card-body{flex:1; min-width:0;}
.site-card-title{font-weight:650; font-size:15.5px; letter-spacing:-.01em;}
.site-card-sub{font-size:13px; color:var(--grey); margin-top:2px;}
.site-card-arrow{color:var(--grey); flex:none;}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap;}
.badge.complete,.badge.approved,.badge.green{background:var(--green-bg); color:var(--green);}
.badge.missing,.badge.correction_required,.badge.expired{background:var(--red-bg); color:var(--red);}
.badge.expiring{background:var(--amber-bg); color:var(--amber);}
.badge.awaiting_review,.badge.blue{background:var(--blue-bg); color:var(--blue);}
.badge.grey{background:var(--paper-deep); color:var(--grey);}
.badge.sage{background:var(--sage-bg); color:var(--sage-strong);}
.badge dot{width:6px; height:6px; border-radius:50%; background:currentColor; display:block;}

.reqrow{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--grey-line);}
.reqrow:last-child{border-bottom:none;}
.reqrow[data-action]{cursor:pointer;}
.reqrow-main{flex:1; min-width:0;}
.reqrow-name{font-size:14.5px; font-weight:550;}
.reqrow-meta{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; align-items:center;}
.srctag{font-size:11px; padding:2px 8px; border-radius:999px; background:var(--paper-deep); color:var(--grey); font-weight:500;}
.reqrow-chevron{color:var(--grey); flex:none;}

.btn{
  font-size:13.5px; font-weight:600; padding:10px 16px; border-radius:var(--radius-sm); border:1px solid transparent;
  background:var(--ink); color:var(--paper-raised); display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:background .12s ease, transform .12s ease, box-shadow .12s ease; text-decoration:none; line-height:1.2; white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:none;}
.btn.primary{background:var(--brand); color:var(--on-brand); box-shadow:0 4px 12px color-mix(in srgb, var(--brand) 25%, transparent);}
.btn.primary:hover{background:var(--brand-hover);}
.btn.sage{background:var(--sage-strong); color:#fff;}
.btn.secondary{background:var(--paper-raised); color:var(--ink); border-color:var(--grey-line); box-shadow:var(--shadow-sm);}
.btn.secondary:hover{border-color:color-mix(in srgb, var(--brand) 35%, var(--grey-line));}
.btn.danger{background:transparent; border-color:color-mix(in srgb, var(--red) 45%, transparent); color:var(--red);}
.btn.ghost{background:transparent; color:var(--grey); border-color:transparent;}
.btn.ghost:hover{color:var(--ink);}
.btn.block{width:100%;}
.btn.small{padding:7px 12px; font-size:12.5px; border-radius:9px;}
.btn.icon{padding:8px 10px;}
.btn:disabled{opacity:.45; transform:none; cursor:default;}
.btn svg{width:16px; height:16px;}

.readiness-hero{display:flex; align-items:center; gap:18px; padding:20px 18px;}
.readiness-hero .gauge{width:78px; height:78px;}
.readiness-hero .gauge span{font-size:18px;}
.why-link{font-size:12.5px; color:var(--blue); text-decoration:underline; cursor:pointer; margin-top:4px; display:inline-block;}

.breakdown-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--grey-line); font-size:13.5px;}
.breakdown-row:last-child{border-bottom:none;}

.thread{border-top:1px solid var(--grey-line); margin-top:12px; padding-top:10px;}
.thread-item{padding:9px 0; border-bottom:1px solid var(--grey-line);}
.thread-item:last-child{border-bottom:none;}
.thread-who{font-size:12.5px; font-weight:650;}
.thread-role{font-size:11px; color:var(--grey); font-weight:400;}
.thread-text{font-size:13.5px; margin-top:3px;}
.thread-ts{font-size:11px; color:var(--grey); margin-top:3px;}

textarea,input[type=text],input[type=date],input[type=number],select.field,
input[type=email],input[type=password],input[type=datetime-local],input[type=search],input[type=url],input[type=tel]{
  width:100%; font-family:var(--font-body); font-size:15px; padding:11px 12px;
  border:1px solid var(--grey-line); border-radius:var(--radius-sm); background:var(--paper-raised); color:var(--ink);
  transition:border-color .12s ease, box-shadow .12s ease;
}
textarea{min-height:72px; resize:vertical;}
textarea:focus,input:focus,select.field:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);}
label.field-label{font-size:12.5px; color:var(--ink-soft); font-weight:600; display:block; margin-bottom:6px; margin-top:14px;}

.overlay{position:fixed; inset:0; background:rgba(8,15,28,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:50; display:flex; align-items:flex-end; animation:fadein .16s ease;}
.sheet{
  background:var(--paper-raised); width:100%; max-height:90vh; overflow-y:auto; border-radius:24px 24px 0 0;
  padding:10px 20px calc(24px + env(safe-area-inset-bottom,0px)); box-shadow:var(--shadow-lg); animation:sheetup .22s cubic-bezier(.2,.8,.2,1);
}
.sheet::before{content:""; display:block; width:40px; height:5px; border-radius:999px; background:var(--grey-line); margin:0 auto 12px;}
@media(min-width:640px){
  .overlay{align-items:center; justify-content:center;}
  .sheet{max-width:520px; border-radius:24px; max-height:84vh; padding-top:20px;}
  .sheet::before{display:none;}
}
@keyframes toastup{from{transform:translate(-50%, 16px); opacity:.6;} to{transform:translateX(-50%); opacity:1;}}
@keyframes sheetup{from{transform:translateY(24px); opacity:.6;} to{transform:none; opacity:1;}}
@keyframes fadein{from{opacity:0;} to{opacity:1;}}
.sheet-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px;}
.sheet-head h3{font-size:20px; font-weight:700;}
.sheet-close{background:var(--paper-deep); border:none; color:var(--grey); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;}
.sheet-close svg{width:14px; height:14px;}

.empty{padding:40px 18px; text-align:center; color:var(--grey);}
.empty h3{color:var(--ink); font-size:16px; margin-bottom:6px;}
.empty p{font-size:13.5px; margin-bottom:14px;}

.audit-row{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--grey-line);}
.audit-row:last-child{border-bottom:none;}
.audit-dot{width:8px; height:8px; border-radius:50%; background:var(--grey-line); margin-top:6px; flex:none;}
.audit-dot.action{background:var(--sage);}
.audit-body{flex:1;}
.audit-action{font-size:13.5px;}
.audit-meta{font-size:12px; color:var(--grey); margin-top:2px;}

.verify-card{background:linear-gradient(160deg, var(--panel-raised), var(--panel)); color:var(--panel-ink); padding:26px 22px; border-radius:22px; text-align:center; box-shadow:var(--shadow-lg);}
.verify-card .stamp{display:inline-block; border:1.5px solid var(--sage); color:#B7D8C3; padding:5px 14px; font-size:11px; font-weight:700; letter-spacing:.1em; margin-bottom:16px; border-radius:999px;}
.verify-card .qr{width:112px; height:112px; background:#fff; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; border-radius:12px;}
.verify-card h3{font-size:18px; margin-bottom:2px;}
.verify-card .vrow{display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-top:1px solid var(--panel-line); text-align:left;}
.verify-card .vid{font-family:var(--font-mono); font-size:11px; opacity:.7; margin-top:12px;}

.notice{background:var(--blue-bg); color:var(--blue); font-size:13px; padding:11px 13px; border-radius:var(--radius-sm); margin-bottom:12px;}
.divider{height:1px; background:var(--grey-line); margin:16px 0;}
.muted{color:var(--grey);}
.flexbetween{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.toast{
  position:fixed; bottom:calc(100px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); background:var(--panel); color:var(--panel-ink);
  padding:11px 18px; border-radius:18px; font-size:13px; font-weight:500; z-index:60; width:max-content; max-width:min(440px, calc(100vw - 32px)); text-align:center; box-shadow:var(--shadow-lg); pointer-events:none;
  animation:toastup .2s ease;
}
::-webkit-scrollbar{width:0; height:0;}
#printArea{display:none;}
@media print{
  body *{visibility:hidden;}
  #printArea, #printArea *{visibility:visible;}
  #printArea{display:block; position:absolute; left:0; top:0; width:100%; padding:24px; color:#111; background:#fff;}
  #printArea h1{font-size:20px; margin-bottom:2px;}
  #printArea .p-sub{color:#555; font-size:12px; margin-bottom:14px;}
  #printArea table{width:100%; border-collapse:collapse; margin-bottom:16px;}
  #printArea th,#printArea td{border:1px solid #ccc; padding:6px 8px; font-size:11px; text-align:left;}
  #printArea th{background:#eef2f0;}
  #printArea .p-section{font-size:13px; font-weight:700; margin:16px 0 6px;}
  #printArea .p-foot{font-size:10px; color:#777; margin-top:20px;}
}
.inspection-card{margin-bottom:10px;}
.defect-row{border-top:1px solid var(--grey-line); padding:10px 0;}
.defect-row:first-child{border-top:none; padding-top:0;}
.sev{font-size:11px; padding:2px 8px; border-radius:999px; font-weight:600;}
.sev.high{background:var(--red-bg); color:var(--red);}
.sev.medium{background:var(--amber-bg); color:var(--amber);}
.sev.low{background:var(--blue-bg); color:var(--blue);}
.subtabs{display:flex; gap:4px; margin-bottom:16px; padding:4px; background:var(--paper-deep); border-radius:12px;}
.subtabs button{flex:1; padding:9px 6px; border:none; background:transparent; font-size:13.5px; font-weight:600; color:var(--grey); border-radius:9px; transition:background .12s ease, color .12s ease;}
.subtabs button.active{color:var(--ink); background:var(--paper-raised); box-shadow:var(--shadow-sm);}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--grey-line); font-size:14px;}
.toggle-row:last-child{border-bottom:none;}
input[type=checkbox]{accent-color:var(--brand); width:18px; height:18px; flex:none;}

/* diary */
.diary-row{padding:10px 0; border-bottom:1px solid var(--grey-line); font-size:13.5px;}
.diary-row:last-child{border-bottom:none;}
.diary-head{display:flex; justify-content:space-between; font-weight:650;}
.diary-incident{color:var(--red); font-weight:600;}

.score-pill{display:inline-flex; align-items:baseline; gap:4px; font-family:var(--font-head); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums;}
.score-pill .lbl{font-family:var(--font-body); font-size:11px; color:var(--grey); font-weight:500;}

.ecard{background:var(--red-bg); color:var(--red); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:10px;}
.ecard .elabel{font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; opacity:.9;}
.ecard .eval{font-size:15px; font-weight:650; margin-top:2px; color:var(--ink);}

/* splash */
.splash{position:fixed; inset:0; z-index:100; background:radial-gradient(90% 70% at 70% 20%, #1B3B69 0%, #0E1E36 60%); color:var(--panel-ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; transition:opacity .35s ease;}
.splash-mark{width:64px; height:64px; border-radius:20px; background:rgba(255,255,255,.08) center/38px 38px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2.5 4 5.6v6.1c0 4.9 3.3 8.6 8 9.8 4.7-1.2 8-4.9 8-9.8V5.6L12 2.5Z' fill='%236E9C80'/%3E%3Cpath d='m8.3 12.2 2.6 2.6 5-5.2' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.splash h1{font-family:var(--font-head); font-size:24px; font-weight:700;}
.splash p{font-size:13.5px; color:var(--panel-ink-soft);}
.splash.fade{opacity:0; pointer-events:none;}

/* onboarding tutorial */
.tut-card{padding:28px 24px calc(24px + env(safe-area-inset-bottom,0px));}
.tut-icon{width:56px; height:56px; border-radius:18px; background:var(--sage-bg); color:var(--sage-strong); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.tut-card h2{font-size:21px; margin-bottom:8px;}
.tut-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.6;}
.tut-dots{display:flex; gap:6px; justify-content:center; margin:20px 0;}
.tut-dots span{width:7px; height:7px; border-radius:999px; background:var(--grey-line); transition:width .2s ease;}
.tut-dots span.active{background:var(--brand); width:20px;}

/* guided dashboard */
.greeting{font-size:13px; color:var(--grey);}
.site-picker-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:6px;}
.site-picker-chip{flex:none; padding:9px 15px; border:1px solid var(--grey-line); border-radius:999px; background:var(--paper-raised); font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap;}
.site-picker-chip.active{background:var(--brand); color:var(--on-brand); border-color:var(--brand);}
.focus-card{padding:20px 18px;}
.focus-card .site-card-title{font-size:18px;}
.mini-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:16px;}
.mini-stat{text-align:center; background:var(--paper-deep); border-radius:12px; padding:10px 4px;}
.mini-stat b{font-family:var(--font-head); font-weight:700; font-size:19px; display:block; font-variant-numeric:tabular-nums;}
.mini-stat span{font-size:10.5px; color:var(--grey); text-transform:uppercase; letter-spacing:.06em; font-weight:600;}

/* drafts */
.ai-output{background:var(--paper); border:1px solid var(--grey-line); border-radius:var(--radius-sm); padding:14px; font-size:13.5px; line-height:1.6; white-space:pre-wrap; max-height:300px; overflow-y:auto; margin-top:12px;}

button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.linkish{background:none; border:none; color:var(--blue); text-decoration:underline; font-size:13px; padding:0; cursor:pointer;}
.auth-links{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px;}
.form-error{background:var(--red-bg); color:var(--red); font-size:13px; padding:10px 12px; border-radius:var(--radius-sm); margin-top:12px;}
.form-ok{background:var(--green-bg); color:var(--green); font-size:13px; padding:10px 12px; border-radius:var(--radius-sm); margin-top:12px;}
.banner{font-size:13px; padding:10px 18px; display:flex; gap:10px; align-items:center; justify-content:space-between; margin:0 12px 8px; border-radius:var(--radius-sm);}
.banner.warn{background:var(--amber-bg); color:var(--amber);}
.banner.bad{background:var(--red-bg); color:var(--red);}
.banner.info{background:var(--blue-bg); color:var(--blue);}
.banner .btn{flex:none;}
.banner > span{min-width:0; overflow-wrap:anywhere;}
.live-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--sage); margin-right:5px; vertical-align:1px; box-shadow:0 0 0 3px color-mix(in srgb, var(--sage) 25%, transparent);}
.live-dot.off{background:var(--grey); box-shadow:none;}
.menu-row{display:flex; align-items:center; gap:14px; padding:12px 10px; margin:0 -10px; border:none; border-radius:var(--radius-sm); cursor:pointer; background:none; width:calc(100% + 20px); text-align:left; color:var(--ink); transition:background .12s ease;}
a.menu-row{text-decoration:none;}
.menu-row:hover{background:var(--paper-deep);}
.menu-row .qa-sub{margin-top:0;}
.kv{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:8px 0; border-bottom:1px solid var(--grey-line);}
.kv:last-child{border-bottom:none;}
.kv span:first-child{color:var(--grey);}
.row-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.plan-card{border:1px solid var(--grey-line); border-radius:var(--radius); padding:14px; margin-bottom:10px; background:var(--paper-raised);}
.plan-card.current{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg);}
.sigpad{width:100%; height:160px; background:#fff; border:1px solid var(--grey-line); border-radius:var(--radius-sm); touch-action:none; display:block;}
.sig-thumb{height:36px; background:#fff; border:1px solid var(--grey-line); border-radius:6px;}
.cert-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; border-bottom:1px solid var(--grey-line); font-size:13.5px;}
.cert-row:last-child{border-bottom:none;}
.dash-edit-row{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--grey-line);}
.dash-edit-row span{flex:1; font-size:14.5px;}
.copy-box{display:flex; gap:8px; margin-top:10px;}
.copy-box input{font-family:var(--font-mono); font-size:12px;}
.persona-select{border:1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius:999px; background:var(--amber-bg); color:var(--amber); font-size:11.5px; font-weight:600; padding:7px 10px; max-width:124px; font-family:var(--font-body);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ===== Assistant ===== */
.sheet.chat-sheet{display:flex; flex-direction:column; height:90vh; overflow:hidden;}
@media(min-width:640px){ .sheet.chat-sheet{max-width:600px; height:84vh;} }
.chat-log{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:4px 2px 12px;}
.chat-msg{max-width:92%; font-size:14px; line-height:1.55; padding:11px 14px; border-radius:18px; overflow-wrap:anywhere;}
.chat-msg.user{align-self:flex-end; background:var(--brand); color:var(--on-brand); white-space:pre-wrap; border-bottom-right-radius:6px;}
.chat-msg.bot{align-self:flex-start; background:var(--paper); border:1px solid var(--grey-line); border-bottom-left-radius:6px;}
.chat-msg ul{margin:4px 0 4px 18px; padding:0;}
.chat-msg li{margin:3px 0;}
.chat-block + .chat-block{margin-top:10px;}
.chat-card{margin-top:12px; padding:12px; border:1px solid var(--grey-line); border-radius:14px; background:var(--paper-raised); box-shadow:var(--shadow-sm);}
.chat-card.chat-card-inline{padding:6px; box-shadow:none;}
.chat-card-title{display:flex; align-items:center; gap:6px; font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--sage-strong); font-weight:700; margin-bottom:6px;}
.chat-card-title svg{width:14px; height:14px;}
.chat-card-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.chat-card .btn svg{width:14px; height:14px; vertical-align:-2px;}
.chat-sources{margin-top:10px; display:flex; flex-direction:column; gap:3px; font-size:12.5px;}
.chat-sources a{color:var(--blue); overflow-wrap:anywhere;}
.chat-empty{color:var(--grey); font-size:14px; display:flex; flex-direction:column; gap:8px; padding:8px 0;}
.chat-chip{text-align:left; background:var(--paper); border:1px solid var(--grey-line); color:var(--ink); border-radius:14px; padding:11px 14px; font-size:14px; cursor:pointer; transition:border-color .12s ease, background .12s ease;}
.chat-chip:hover{border-color:var(--sage); background:var(--sage-bg);}
.chat-form{display:flex; gap:8px; align-items:flex-end; padding-top:12px; border-top:1px solid var(--grey-line);}
.chat-form textarea{min-height:48px; max-height:130px; flex:1; border-radius:16px;}
.chat-form .btn{height:48px; border-radius:14px;}
.chat-typing{display:flex; gap:5px; padding:14px;}
.chat-typing span{width:7px; height:7px; border-radius:50%; background:var(--sage); animation:chatdot 1s infinite ease-in-out;}
.chat-typing span:nth-child(2){animation-delay:.15s;} .chat-typing span:nth-child(3){animation-delay:.3s;}
@keyframes chatdot{0%,80%,100%{opacity:.25; transform:translateY(0);} 40%{opacity:1; transform:translateY(-2px);}}
.ask-card{display:flex; gap:8px; margin-top:10px;}
.ask-card input{flex:1;}
.ask-hero{background:linear-gradient(135deg, var(--sage-bg), var(--paper-raised) 70%); border-color:var(--sage-soft);}

/* ===== Document studio ===== */
.studio-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px;}
.studio-card{display:flex; flex-direction:column; gap:6px; text-align:left; padding:16px; border:1px solid var(--grey-line); border-radius:var(--radius); background:var(--paper-raised); box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;}
.studio-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--sage-soft);}
.studio-card .qa-icon{margin-bottom:4px;}
.studio-card h4{font-size:15px; font-weight:650;}
.studio-card p{font-size:12.5px; color:var(--grey);}
.studio-cats{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px;}
.doc-preview{border:1px solid var(--grey-line); border-radius:var(--radius-sm); background:#fff; color:#111; padding:18px; margin-top:12px; font-size:12.5px; max-height:340px; overflow:auto;}
.doc-preview .dp-head{display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:2px solid var(--dp-brand,#16325C); padding-bottom:8px; margin-bottom:10px;}
.doc-preview .dp-head img{max-height:34px; max-width:120px;}
.doc-preview h5{font-size:15px; margin:0;}
.doc-preview .dp-sec{font-weight:700; color:var(--dp-brand,#16325C); margin:12px 0 4px; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;}
.logo-preview{display:flex; align-items:center; gap:12px; padding:12px; border:1px dashed var(--grey-line); border-radius:var(--radius-sm); margin-top:8px;}
.logo-preview img{max-height:44px; max-width:140px; object-fit:contain;}
.swatch-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.swatch{width:32px; height:32px; border-radius:10px; border:2px solid transparent; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.swatch.active{border-color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}

/* auth */
.auth-shell{min-height:100%; display:flex; flex-direction:column;}
.auth-hero{
  color:#fff; padding:calc(30px + env(safe-area-inset-top,0px)) 22px 30px; text-align:center; border-radius:0 0 28px 28px;
  background:radial-gradient(120% 120% at 90% 0%, rgba(110,156,128,.45) 0%, transparent 55%), linear-gradient(160deg, #1A3A68 0%, #0E1E36 100%);
}
.auth-hero .brand{justify-content:center;}
.auth-hero .brand-name{font-size:22px;}
.auth-hero .brand-mark{width:40px; height:40px; border-radius:12px; background-size:24px 24px; background-color:rgba(255,255,255,.1);}
.auth-tagline{max-width:32ch; margin:14px auto 0; font-size:17px; font-weight:600; line-height:1.4; text-wrap:balance;}
.auth-points{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:14px;}
.auth-points span{font-size:12px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.1); color:#D6E2F0;}
.auth-shell .onboard-wrap{padding-top:24px;}
.auth-shell .onboard-wrap > h1,.auth-shell .onboard-wrap > h2{color:var(--ink);}
@media (max-width:480px){
  .brand-name .demo-tag{display:none;}
  .brand-tag{display:none;}
  .identity{gap:4px;}
  .identity-avatar{width:33px; height:33px;}
  .identity select,.persona-select{max-width:80px;}
  .brand-row{padding-left:14px; padding-right:14px;}
}

/* ===== Inbox ===== */
.bell-count{position:absolute; top:-3px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--red); color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--paper);}
.inbox-item.unread{background:var(--brand-bg);}
.inbox-item.unread .qa-title::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--brand); margin-right:7px; vertical-align:2px;}
.inbox-body{white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.guest-top{padding:calc(14px + env(safe-area-inset-top,0px)) 18px 6px; max-width:960px; margin:0 auto;}

/* ===== Review workspace ===== */
.rv{padding-bottom:84px;}
.rv-hero h1{font-size:clamp(20px,5vw,26px);}
.rv-progress{height:8px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; margin-top:14px; position:relative; z-index:1;}
.rv-progress i{display:block; height:100%; background:#8FD1A8; border-radius:999px; transition:width .3s ease;}
.rv-sec{background:var(--paper-raised); border:1px solid var(--grey-line); border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:var(--shadow-sm); border-left:4px solid var(--grey-line); scroll-margin-top:80px;}
.rv-sec.is-approved{border-left-color:var(--green);}
.rv-sec.is-changes{border-left-color:var(--red);}
.rv-sec header{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
.rv-sec h3{font-size:16.5px; display:flex; align-items:center; gap:9px;}
.rv-num{width:26px; height:26px; border-radius:8px; background:var(--brand-bg); color:var(--brand); font-size:13px; display:inline-flex; align-items:center; justify-content:center; flex:none;}
.rv-body{font-size:14.5px; line-height:1.6; color:var(--ink);}
.rv-body p{margin:0 0 8px;}
.rv-body ul,.rv-body ol{margin:0 0 8px 20px;}
.rv-body li{margin:2px 0;}
.rv-body mark{background:#FFE58A; color:#1B2433; border-radius:3px; padding:0 2px;}
.rv-note{background:var(--sage-bg); border-radius:10px; padding:10px 12px; margin:6px 0 10px; font-size:13.5px;}
.rv-fields{display:grid; grid-template-columns:minmax(110px,34%) 1fr; gap:0; border:1px solid var(--grey-line); border-radius:10px; overflow:hidden; margin:4px 0 10px;}
.rv-fields dt{background:var(--paper-deep); font-weight:600; padding:7px 10px; font-size:13px; border-bottom:1px solid var(--grey-line);}
.rv-fields dd{margin:0; padding:7px 10px; font-size:13.5px; border-bottom:1px solid var(--grey-line);}
.rv-table,.rv-edit-table{overflow-x:auto; margin:4px 0 10px; border:1px solid var(--grey-line); border-radius:10px;}
.rv-table table,.rv-edit-table table{border-collapse:collapse; width:100%; font-size:13px; min-width:520px;}
.rv-table th,.rv-edit-table th{background:var(--brand); color:var(--on-brand); text-align:left; padding:7px 9px; font-weight:600;}
.rv-table td{padding:7px 9px; border-top:1px solid var(--grey-line); vertical-align:top;}
.rv-table td.rate{font-weight:700;} .rv-table td.rate.high{background:var(--red-bg); color:var(--red);} .rv-table td.rate.medium{background:var(--amber-bg); color:var(--amber);} .rv-table td.rate.low{background:var(--green-bg); color:var(--green);}
.rv-edit-table td{padding:4px; border-top:1px solid var(--grey-line); vertical-align:top;}
.rv-edit-table textarea{min-height:40px; font-size:13px; padding:6px 7px;}
.rv-sign{display:grid; gap:6px; margin:6px 0;}
.rv-sign div{display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--grey-line); padding:6px 0; font-size:13.5px;}
.rv-sign i{color:var(--grey); font-style:normal; font-size:12px;}
.rv-changes{background:var(--red-bg); color:var(--red); border-radius:10px; padding:9px 12px; font-size:13.5px; margin-bottom:10px;}
.rv-comments{margin-top:10px; display:grid; gap:8px;}
.rv-comment{background:var(--paper); border:1px solid var(--grey-line); border-radius:12px; padding:10px 12px; font-size:13.5px;}
.rv-comment.resolved{opacity:.7;}
.rv-comment blockquote,.rv-form blockquote{margin:0 0 6px; padding:4px 10px; border-left:3px solid #E8C547; background:#FFF8D9; color:#4A3B00; border-radius:0 8px 8px 0; font-size:13px;}
.rv-meta{font-size:12px; color:var(--grey); margin-top:4px;}
.rv-done{margin-top:8px; font-size:13px; color:var(--grey);}
.rv-done summary{cursor:pointer;}
.rv-form{margin-top:10px; padding:12px; background:var(--paper); border-radius:12px; border:1px solid var(--grey-line);}
.rv-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.rv-editor{display:grid; gap:4px;}
.rv-grid-2{display:grid; grid-template-columns:minmax(100px,34%) 1fr; gap:6px;}
.rv-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:25; width:min(936px, calc(100% - 24px)); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:var(--paper-raised); border:1px solid var(--grey-line); border-radius:18px; padding:10px 12px; box-shadow:var(--shadow-lg); font-size:13.5px; font-weight:600;}
.rv-bar input{flex:1; min-width:200px;}
body:has(.guest-top) .rv-bar{bottom:calc(14px + env(safe-area-inset-bottom,0px));}

/* ===== Join codes ===== */
.join-code{font-family:var(--font-mono); font-size:34px; font-weight:600; letter-spacing:.12em; text-align:center; padding:22px 10px; margin:6px 0 12px; border-radius:18px; background:var(--brand-bg); color:var(--brand);}
.join-input{font-family:var(--font-mono); font-size:22px !important; letter-spacing:.14em; text-transform:uppercase; text-align:center;}

/* ===== Safety File Builder ===== */
.builder-card{background:linear-gradient(135deg, var(--sage-bg), var(--paper-raised) 75%); border-color:var(--sage-soft);}
.builder-steps{display:flex; gap:6px; margin:4px 0 12px; flex-wrap:wrap;}
.builder-steps span{font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--paper-deep); color:var(--grey);}
.builder-steps span.on{background:var(--brand); color:var(--on-brand);}
.builder-steps span.done{background:var(--green-bg); color:var(--green);}
.builder-manual{margin-top:10px; font-size:13.5px;}
.builder-manual summary{cursor:pointer; font-weight:600; color:var(--ink-soft);}
.builder-manual ul{margin:6px 0 0 18px;}
.bld-progress{height:8px; border-radius:999px; background:var(--paper-deep); overflow:hidden; margin:4px 0 10px;}
.bld-progress i{display:block; height:100%; background:var(--sage); border-radius:999px; transition:width .3s ease;}
.bld-state{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; background:var(--paper-deep); color:var(--grey);}
.bld-state.done{background:var(--green-bg); color:var(--green);}
.bld-state.failed{background:var(--red-bg); color:var(--red);}
.bld-state svg{width:16px; height:16px;}
.bld-dot{width:8px; height:8px; border-radius:50%; background:var(--grey-line);}
.bld-spin{width:16px; height:16px; border-radius:50%; border:2.5px solid var(--sage-soft); border-top-color:var(--sage-strong); animation:bldspin .8s linear infinite;}
@keyframes bldspin{to{transform:rotate(360deg);}}
.bundle-link{display:flex; align-items:center; gap:12px; padding:14px 16px; margin:0 0 14px; border:1px solid var(--grey-line); border-radius:16px; background:var(--paper-raised); color:var(--ink); text-decoration:none;}
.bundle-link:hover{border-color:var(--sage-soft);}
.bundle-txt{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0;}
.bundle-ic{width:40px; height:40px; border-radius:12px; background:var(--sage-bg); color:var(--sage-strong); display:flex; align-items:center; justify-content:center; flex:none;}
.bundle-link svg{width:20px; height:20px; flex:none;}
.qa-item.join-first{margin:0 0 14px; width:100%; padding:14px 16px; background:var(--paper-raised); border:1px solid var(--sage-soft); border-radius:16px;}
/* ===== Page search ===== */
.page-search{position:relative; margin:0 0 12px;}
.page-search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--grey); pointer-events:none;}
.page-search input{width:100%; padding:12px 14px 12px 42px; border-radius:14px; border:1px solid var(--grey-line); background:var(--paper-raised); font-size:15px;}
.page-search input:focus{outline:none; border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-bg);}
.filter-chips{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px;}
.filter-chips .site-picker-chip b{font-weight:700; margin-left:4px; opacity:.75;}
.list-empty{padding:14px 4px; color:var(--grey); font-size:14px;}
.group-head{display:flex; flex-direction:column; gap:1px; margin:16px 4px 8px; font-weight:700; font-size:14px; color:var(--ink);}
.group-head .site-card-sub{font-weight:400;}
.list-tools{display:flex; gap:10px; margin:0 0 12px; flex-wrap:wrap;}
.list-tools label{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--grey); flex:1; min-width:140px;}
.list-tools select{flex:1; min-width:0; padding:8px 10px; font-size:14px;}
.avatar-sq{width:40px; height:40px; border-radius:12px; background:var(--sage-bg); color:var(--sage-strong); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none; margin-right:12px;}
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--grey-line); font-size:14px;}
.kv:last-child{border-bottom:none;}
.kv span{color:var(--grey);}
.kv strong{text-align:right; font-weight:600; overflow-wrap:anywhere;}
/* ===== Shared sites (mine side) ===== */
.wp-card{cursor:pointer;}
.wp-code-pill{font-size:12px; font-weight:700; padding:5px 9px; border-radius:999px; background:var(--sage-bg); color:var(--sage-strong); white-space:nowrap;}
.wp-mini-stats{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:13px; color:var(--grey);}
.wp-mini-stats b{color:var(--ink); font-weight:700;}
.wp-mini-stats .hot b, .wp-mini-stats .hot{color:var(--amber);}
.wp-code-card{display:flex; flex-direction:column; gap:10px; background:linear-gradient(135deg, var(--sage-bg), var(--paper-raised) 70%); border-color:var(--sage-soft);}
.wp-code{font-size:34px; font-weight:800; letter-spacing:4px; color:var(--brand); margin:2px 0 6px;}
@media (max-width:360px){ .wp-code{font-size:28px; letter-spacing:2px;} }
/* ===== Safety file guide ===== */
.guide-step{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--grey-line);}
.guide-step:last-child{border-bottom:none;}
.guide-num{width:30px; height:30px; flex:none; border-radius:50%; background:var(--brand); color:var(--on-brand); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.guide-step.done .guide-num{background:var(--green-bg); color:var(--green);}
.guide-step.done .qa-title{color:var(--grey);}
.guide-body{flex:1; min-width:0;}
.guide-link{display:flex; width:100%; justify-content:space-between; align-items:center; gap:8px; padding:9px 0; border:none; border-top:1px dashed var(--grey-line); background:none; text-align:left; font-size:14px; color:var(--ink); cursor:pointer;}
.guide-link:first-of-type{margin-top:8px;}
.guide-link svg{width:16px; height:16px; color:var(--grey); flex:none;}
/* ===== Sign-up: who are you? ===== */
.role-cards{display:grid; gap:10px; margin:6px 0 4px;}
.role-card{display:flex; gap:12px; align-items:flex-start; text-align:left; padding:14px; border-radius:16px; border:1.5px solid var(--grey-line); background:var(--paper-raised); color:var(--ink); cursor:pointer; font:inherit;}
.role-card strong{display:block; font-size:15px; margin-bottom:2px;}
.role-card span span{display:block; font-size:13px; color:var(--grey); line-height:1.4;}
.role-card .role-dot{width:20px; height:20px; border-radius:50%; border:2px solid var(--grey-line); flex:none; margin-top:1px;}
.role-card.on{border-color:var(--brand); background:var(--brand-bg);}
.role-card.on .role-dot{border-color:var(--brand); background:radial-gradient(circle, var(--brand) 45%, transparent 50%);}
.wp-code-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px;}
.wp-code-sm{font-size:18px; font-weight:800; letter-spacing:2px; color:var(--brand); flex:1;}
/* ===== Oversight: suspension, gate clearance, audits, revisions ===== */
.notice.alert-red{background:var(--red-bg); color:var(--red);}
.notice.alert-green{background:var(--green-bg); color:var(--green);}
.plain-list{margin:10px 0 0 18px; font-size:13px; color:var(--ink-soft); line-height:1.7;}
.gate-summary{display:flex; gap:16px; font-size:13px; color:var(--grey); margin:0 2px 8px;}
.gate-summary b{color:var(--ink); font-size:15px;}
.gate-summary .hot b{color:var(--red);}
.gate-row{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--grey-line);}
.gate-row:last-child{border-bottom:none;}
.gate-dot{width:10px; height:10px; border-radius:50%; margin-top:6px; flex:none; background:var(--green);}
.gate-row.no .gate-dot{background:var(--red);}
.gate-reasons{margin:6px 0 0 16px; font-size:12.5px; color:var(--red); line-height:1.5;}
.finding-response{margin-top:6px; padding:8px 10px; border-left:3px solid var(--sage); background:var(--paper-deep); border-radius:0 var(--radius-xs) var(--radius-xs) 0; font-size:13px;}
.audit-item{padding:12px 0; border-bottom:1px solid var(--grey-line);}
.audit-q{font-size:14px; font-weight:500; margin-bottom:8px;}
.audit-item input[type=text]{margin-top:8px;}
.audit-item input[type=date]{width:auto; margin-left:6px;}
.seg{display:inline-flex; border:1px solid var(--grey-line); border-radius:var(--radius-xs); overflow:hidden;}
.seg-btn{min-width:64px; min-height:44px; padding:0 14px; background:var(--paper-raised); border:none; border-right:1px solid var(--grey-line); font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.seg-btn:last-child{border-right:none;}
.seg-btn.yes.on{background:var(--green-bg); color:var(--green);}
.seg-btn.no.on{background:var(--red-bg); color:var(--red);}
.seg-btn.na.on{background:var(--paper-deep); color:var(--ink);}
.audit-res.yes{color:var(--green);} .audit-res.no{color:var(--red);} .audit-res.na{color:var(--grey);}
.chg.added{color:var(--green);} .chg.removed{color:var(--red);} .chg.changed{color:var(--amber);}
.revisions-link{display:block; margin:-4px 0 14px 4px; font-size:13px;}
.check-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.check-chip{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:6px 12px; border:1px solid var(--grey-line); border-radius:999px; background:var(--paper-raised); font-size:13.5px; cursor:pointer;}
.check-chip:has(input:checked){border-color:var(--sage); background:var(--sage-bg); color:var(--sage-strong);}
.check-chip input{width:18px; height:18px; margin:0;}
/* ===== Walkthrough ===== */
.tour-cta{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 16px; margin-bottom:12px; border:1px solid var(--sage-soft); border-radius:var(--radius); background:var(--sage-bg); color:var(--ink); font:inherit; cursor:pointer;}
.tour-cta strong{display:block; font-size:15px;}
.tour-cta > span:nth-child(2){flex:1;}
.tour-cta-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--sage-strong); color:#fff; flex:none;}
.tour{position:fixed; inset:0; z-index:80;}
.tour-block{position:absolute; inset:0;}
.tour.centred .tour-block{background:rgba(8,15,28,.55);}
.tour-spot{position:fixed; border-radius:12px; box-shadow:0 0 0 9999px rgba(8,15,28,.55); outline:2px solid var(--sage); transition:all .25s ease; pointer-events:none;}
.tour-card{position:fixed; background:var(--paper-raised); color:var(--ink); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:16px 18px; transition:top .25s ease, left .25s ease;}
.tour.centred .tour-card{top:50% !important; left:50% !important; transform:translate(-50%,-50%); width:min(420px, calc(100vw - 32px)) !important;}
.tour-top{display:flex; justify-content:space-between; align-items:center;}
.tour-count{font-size:12px; font-weight:600; color:var(--grey); letter-spacing:.02em;}
.tour-x{background:none; border:none; font-size:24px; line-height:1; color:var(--grey); cursor:pointer; min-width:40px; min-height:40px;}
.tour-bar{height:4px; background:var(--grey-line); border-radius:4px; margin:4px 0 12px; overflow:hidden;}
.tour-bar span{display:block; height:100%; background:var(--sage-strong); transition:width .25s ease;}
.tour-card h2{font-size:18px; margin-bottom:6px;}
.tour-card p{font-size:14px; line-height:1.6; color:var(--ink-soft);}
.tour-play-bar{height:2px; margin-top:12px; background:transparent;}
.tour-play-bar.on{background:var(--grey-line);}
.tour-play-bar span{display:block; height:100%; width:0; background:var(--brand);}
.tour-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:12px;}
.tour-actions .btn{min-height:40px;}
@media (prefers-reduced-motion: reduce){ .tour-spot, .tour-card, .tour-bar span{transition:none;} }
@media print{
  #printArea .gate-cards{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
  #printArea .gate-card{border:1.5px solid #16325C; border-radius:10px; padding:12px; text-align:center; break-inside:avoid; height:82mm;}
  #printArea .gc-head{display:flex; justify-content:space-between; font-size:9px; font-weight:700; color:#16325C; letter-spacing:.04em;}
  #printArea .gc-qr{width:38mm; height:38mm; margin:8px auto;}
  #printArea .gc-name{font-size:15px; font-weight:700;}
  #printArea .gc-sub{font-size:11px; color:#444;}
  #printArea .gc-foot{font-size:8px; color:#777; margin-top:6px;}
}
.gate-reissue{display:block; margin-top:6px; font-size:12.5px;}
/* ===== Contractor projects ===== */
.project-bar{border-left:4px solid var(--sage); margin-top:12px;}
.project-empty{border:1px dashed var(--sage-soft); background:var(--sage-bg);}
.section-title.flexbetween .linkish{font-size:13px; text-transform:none; letter-spacing:0;}
/* ===== Landing page (signed out) ===== */
.auth-home{display:inline-block; margin:0 0 10px; font-size:13px;}
.lp{max-width:1120px; margin:0 auto; padding:0 16px calc(24px + env(safe-area-inset-bottom,0px)); color:var(--ink);}
.lp-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0;}
.lp-top .brand-name{font-size:23px;}
.lp-brand{text-decoration:none; color:inherit;}
.lp-brand .brand-mark{width:42px; height:42px; border-radius:12px; background-size:26px 26px;}
.lp-top{flex-wrap:wrap;}
.lp-nav{flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.lp-nav::-webkit-scrollbar{display:none;}
.lp-link{color:var(--ink-soft); text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; padding:6px 2px;}
.lp-link:hover, .lp-link.active{color:var(--brand);}
.lp-link.active{box-shadow:inset 0 -2px 0 var(--sage-strong);}
.lp-nav .btn{white-space:nowrap;}
@media (max-width:899px){ .lp-nav{order:3; width:100%; gap:16px; padding:6px 0 2px; border-top:1px solid var(--grey-line);} }
.lp-nav{display:flex; align-items:center; gap:14px;}
.lp-nav .linkish{font-weight:600; font-size:14px;}
.lp-eyebrow{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sage-strong); margin:0 0 10px;}
.lp-hero{display:grid; gap:28px; padding:20px 0 36px; align-items:center;}
.lp-hero h1{font-family:var(--font-head); font-size:clamp(30px, 7.5vw, 52px); line-height:1.08; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance;}
.lp-lead{font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:56ch; margin:0 0 22px;}
.lp-cta{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.lp-cta .btn{min-height:48px; padding:0 20px; font-size:15px;}
.lp-proof{list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; padding:0; margin:18px 0 0; font-size:13.5px; color:var(--ink-soft);}
.lp-proof li{display:flex; align-items:center; gap:6px;}
.lp-proof svg, .lp-side li svg{color:var(--sage-strong); flex:none;}
/* product picture, drawn with HTML so it stays sharp and themes with the app */
.lp-mock{position:relative; padding:8px 0 30px;}
.lp-mcard{background:var(--paper-raised); border:1px solid var(--grey-line); border-radius:18px; box-shadow:var(--shadow-lg); padding:18px; max-width:420px; margin:0 auto;}
.lp-mhead{display:flex; justify-content:space-between; gap:12px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--grey-line); margin-bottom:6px;}
.lp-meyebrow{font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--grey); text-transform:uppercase;}
.lp-mtitle{font-weight:700; font-size:17px; margin:2px 0;}
.lp-msub{font-size:12.5px; color:var(--grey);}
.lp-gauge{position:relative; width:62px; height:62px; color:var(--green); flex:none;}
.lp-gauge svg{width:100%; height:100%;}
.lp-gauge b{position:absolute; inset:0; display:grid; place-items:center; font-size:15px; color:var(--ink);}
.lp-mrow{display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--grey-line); font-size:13.5px;}
.lp-mrow:last-child{border-bottom:none;}
.lp-mbadge{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap;}
.lp-mbadge.ok{background:var(--green-bg); color:var(--green);}
.lp-mbadge.rev{background:var(--blue-bg); color:var(--blue);}
.lp-mbadge.warn{background:var(--amber-bg); color:var(--amber);}
.lp-mbadge.bad{background:var(--red-bg); color:var(--red);}
.lp-mgate{position:absolute; right:4%; bottom:0; display:flex; gap:10px; align-items:center; background:var(--panel); color:var(--panel-ink); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow-lg);}
.lp-mgate-q{color:var(--sage);}
.lp-mgate-s{font-weight:800; letter-spacing:.06em; color:#6CD3A2; font-size:14px;}
.lp-mgate .lp-msub{color:var(--panel-ink-soft);}
.lp h2{font-family:var(--font-head); font-size:clamp(24px, 5vw, 34px); line-height:1.15; letter-spacing:-.01em; margin:0 0 14px; text-wrap:balance;}
.lp h3{font-size:16px; margin:0 0 4px;}
/* Landing: the problem next to the fix, on the brand's navy panel. */
.lp-pain{background:var(--panel); color:var(--panel-ink); border-radius:24px; padding:30px 22px; margin:8px 0 28px;}
.lp-pain .lp-eyebrow{color:#B7D8C3;}
.lp-pain-head{max-width:720px; margin-bottom:22px;}
.lp-pain-head p:last-child{color:var(--panel-ink-soft); font-size:16px; line-height:1.6; margin:0;}
.lp .lp-pain h2{color:var(--panel-ink);}
.lp-pain-rows{list-style:none; padding:0; margin:0; display:grid; gap:12px;}
.lp-pain-rows li{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; align-items:stretch;}
.lp-pain-was,.lp-pain-now{display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:16px;}
.lp-pain-was{background:var(--panel-raised); border:1px solid var(--panel-line);}
.lp-pain-now{background:var(--paper-raised); color:var(--ink); border:1px solid transparent;}
.lp-pain-was h3,.lp-pain-now h3{font-size:16px; margin:0 0 4px; font-family:var(--font-head);}
.lp-pain-was p{color:var(--panel-ink-soft); font-size:14px; line-height:1.5; margin:0;}
.lp-pain-now p{color:var(--ink-soft); font-size:14px; line-height:1.5; margin:0;}
.lp-pain-ic{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; flex:none;}
.lp-pain-was .lp-pain-ic{background:#5A2A2A; color:#F6B4AC;}
.lp-pain-now .lp-pain-ic{background:var(--sage-strong); color:#fff;}
.lp-pain-arrow{align-self:center; color:#B7D8C3; font-size:22px; font-weight:700;}
.lp-pain-foot{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between; margin-top:22px; padding-top:20px; border-top:1px solid var(--panel-line);}
.lp-pain-foot p{margin:0; color:var(--panel-ink); font-size:15px; max-width:60ch;}
.lp-pain-foot .btn{min-height:46px; background:#fff; color:#0E1E36; box-shadow:none;}
@media (max-width:720px){
  .lp-pain{padding:24px 16px; border-radius:18px;}
  .lp-pain-rows li{grid-template-columns:minmax(0,1fr); gap:6px;}
  .lp-pain-arrow{transform:rotate(90deg); justify-self:center; font-size:18px; line-height:1;}
}
.lp-sides{display:grid; gap:16px; padding:24px 0;}
.lp-side{background:var(--paper-raised); border:1px solid var(--grey-line); border-radius:var(--radius); padding:22px;}
.lp-side ul{list-style:none; padding:0; margin:0 0 16px; display:grid; gap:10px;}
.lp-side li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:var(--ink-soft);}
.lp-side li svg{margin-top:3px;}
.lp-how{padding:28px 0;}
.lp-how ol{list-style:none; padding:0; margin:0; display:grid; gap:14px;}
.lp-how li{display:flex; gap:14px; align-items:flex-start;}
.lp-how li > b{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--brand); color:var(--on-brand); flex:none; font-size:15px;}
.lp-how p, .lp-feat p{font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0;}
.lp-feats{padding:28px 0;}
.lp-grid{display:grid; gap:12px; grid-template-columns:1fr;}
.lp-feat{background:var(--paper-raised); border:1px solid var(--grey-line); border-radius:var(--radius); padding:18px;}
.lp-feat-ic{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--sage-bg); color:var(--sage-strong); margin-bottom:12px;}
.lp-close{margin:28px 0 12px; padding:32px 22px; border-radius:22px; background:var(--panel); color:var(--panel-ink); text-align:center;}
.lp-close p{color:var(--panel-ink-soft); margin:0 auto 20px; max-width:48ch;}
.lp-close .lp-cta{justify-content:center;}
.lp-close .btn.secondary{background:transparent; color:var(--panel-ink); border-color:var(--panel-line);}
.lp-close .linkish{color:var(--panel-ink-soft);}
.lp-foot{display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:space-between; font-size:12px; color:var(--grey); padding:14px 0;}
@media (min-width:560px){ .lp-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:900px){
  .lp-hero{grid-template-columns:1.05fr .95fr; gap:48px; padding:48px 0 64px;}
  .lp-sides{grid-template-columns:1fr 1fr;}
  .lp-how ol{grid-template-columns:repeat(3, 1fr); gap:24px;}
  .lp-grid{grid-template-columns:repeat(4, 1fr);}
  .lp-close{padding:48px;}
}
.sfr-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:12px;}
.sfr-stat{background:var(--paper-deep); border-radius:var(--radius-sm); padding:12px;}
.sfr-stat b{display:block; font-size:24px; line-height:1.1;}
.sfr-stat span{font-size:12.5px; color:var(--grey);}
.sfr-stat.ok b{color:var(--green);} .sfr-stat.bad b{color:var(--red);}
.timeline{padding-top:6px;}
.tl-day{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); margin:12px 0 4px;}
.tl-day:first-child{margin-top:0;}
.tl-row{display:flex; gap:10px; padding:7px 0 7px 2px; border-left:2px solid var(--grey-line); margin-left:4px; padding-left:12px; position:relative;}
.tl-dot{position:absolute; left:-6px; top:12px; width:10px; height:10px; border-radius:50%; background:var(--sage); box-shadow:0 0 0 3px var(--paper-raised);}
.tl-action{font-size:13.5px; font-weight:600;}
.tl-detail{font-weight:400; color:var(--ink-soft);}
/* ===== Optional requirements; choosing what goes in the PDF ===== */
.req-actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.sfr-pick{margin-top:12px; border:1px solid var(--grey-line); border-radius:var(--radius-sm); padding:10px 12px;}
.sfr-pick summary{cursor:pointer; font-weight:600; font-size:14px;}
.sfr-list{max-height:40vh; overflow:auto;}

.sponsor-line{font-size:12.5px;color:var(--grey);margin:-4px 0 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.hero-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.hero-actions .btn{display:inline-flex;align-items:center;gap:6px;}
.hero-actions .btn svg{width:16px;height:16px;}
.sfr-docs a{font-size:12px;margin-left:8px;white-space:nowrap;}
.studio-top{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px;}

/* ---------- public site pages ---------- */
.lp-page-head{padding:28px 0 8px; max-width:760px;}
.lp-page-head h1{font-family:var(--font-head); font-size:clamp(28px, 6vw, 44px); line-height:1.1; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance;}
.lp-p{font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 12px;}
.lp-sub-links{font-size:14px; margin:14px 0 0; color:var(--grey);}
.lp-sub-links a, .lp-foot a, .lp-foot-links a{color:var(--brand); text-decoration:none; font-weight:600;}
.lp-list{list-style:none; padding:0; margin:0 0 16px; display:grid; gap:10px;}
.lp-list li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:var(--ink-soft);}
.lp-list li svg{color:var(--sage-strong); flex:none; margin-top:3px;}
.lp-olist{margin:0; padding-left:20px; display:grid; gap:8px; font-size:14.5px; line-height:1.55; color:var(--ink-soft);}
.lp-note{background:var(--sage-bg); border-radius:var(--radius); padding:22px; margin:12px 0;}
.lp-note h2{margin-top:0;}
.lp-note p{font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 12px;}
.lp-steps{grid-template-columns:1fr !important;}
.lp-prices{display:grid; gap:14px; grid-template-columns:1fr; margin-top:12px;}
.lp-price{background:var(--paper-raised); border:1px solid var(--grey-line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column;}
.lp-price h3{margin:0 0 6px;}
.lp-price .btn{margin-top:auto;}
.lp-amount{font-family:var(--font-head); font-size:30px; font-weight:700; margin:4px 0 10px; letter-spacing:-.02em;}
.lp-amount span{font-size:14px; font-weight:500; color:var(--grey);}
.lp-foot{flex-direction:column; align-items:flex-start;}
.lp-foot-links{display:block; line-height:1.9;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
@media (min-width:700px){ .lp-prices{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));} .lp-steps{grid-template-columns:1fr 1fr !important;} }
/* in the app, the logo goes home */
.brand-home{background:none; border:none; padding:0; cursor:pointer; color:inherit; text-align:left; font:inherit;}
.topbar .brand-mark{width:36px; height:36px; background-size:22px 22px;}
.topbar .brand-name{font-size:18px;}
.welcome{background:var(--paper-raised); border:1px solid var(--grey-line); border-radius:var(--radius); padding:20px; margin:14px 0;}
.welcome h2{margin:0 0 4px;}
.welcome .welcome-opt{width:100%; margin-top:8px;}
.lp-actions{display:flex; align-items:center; gap:12px;}
.lp-actions .linkish{font-weight:600; font-size:14px;}
.lp-actions .btn{min-height:38px; padding:0 14px; font-size:13.5px; white-space:nowrap;}
@media (min-width:900px){ .lp-top{flex-wrap:nowrap;} .lp-nav{order:2; margin-left:auto; gap:18px;} .lp-actions{order:3;} }
.lp-top .brand-name{font-size:20px; letter-spacing:.1em;}
.lp-actions .linkish{white-space:nowrap;}
@media (min-width:900px){ .lp-nav{gap:14px;} .lp-link{font-size:13.5px;} .lp-top{gap:16px;} }
@media (min-width:900px) and (max-width:1180px){ .lp-link[data-page="builder"]{display:none;} }
.promo-box{margin-top:12px;} .promo-box summary{cursor:pointer;font-size:13.5px;} .promo-box input{margin-top:8px;}