/* 1 Sign — application styles. Mobile-first. */
:root{
  --brand:#2541b2; --brand2:#1cb5e0; --ink:#1c2333; --muted:#6b748b;
  --line:#e6eaf2; --bg:#f4f6fb; --card:#fff; --ok:#0b7a2a; --bad:#c0203a;
  --warn:#b8860b; --radius:16px; --shadow:0 10px 34px rgba(20,30,80,.08);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Segoe UI',system-ui,Arial,sans-serif;color:var(--ink);
  background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
/* Author img{display:block} above beats the browser's [hidden]{display:none};
   re-assert it so hidden images/overlays actually stay hidden. */
[hidden]{display:none!important}
h1,h2,h3{line-height:1.18;margin:0 0 .5em}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.center{text-align:center}

/* Buttons */
.btn{display:inline-block;border:0;cursor:pointer;font-size:16px;font-weight:700;
  padding:13px 22px;border-radius:12px;text-align:center;transition:.15s;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{background:#eef1f8;color:var(--ink)}
.btn-block{display:block;width:100%}
.btn-sm{padding:8px 14px;font-size:14px;border-radius:9px}
.btn-danger{background:#fdecef;color:var(--bad)}

/* Top nav (public) */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--ink)}
.brand img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:8px 12px;border-radius:9px;color:var(--ink);font-weight:600;font-size:15px}
.nav-links a:hover{background:#eef1f8;text-decoration:none}
.nav-toggle{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--ink)}
@media(max-width:820px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);padding:10px 20px;gap:2px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px}
  .nav-links .btn{margin-top:6px}
}

/* Hero */
.hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1200px 500px at 80% -10%,#1cb5e0 0,transparent 60%),
             linear-gradient(135deg,#1b2a6b,#2541b2 60%,#1cb5e0)}
.hero .container{padding-top:64px;padding-bottom:72px}
.hero h1{font-size:clamp(30px,6vw,52px);font-weight:800;max-width:18ch}
.hero p{font-size:clamp(16px,2.4vw,20px);opacity:.92;max-width:54ch;margin:0 0 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-ghost{background:rgba(255,255,255,.16);color:#fff}
.eyebrow{display:inline-block;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.5px;margin-bottom:18px}

/* Hero with faded background image (small box, right of the hero container) */
.hero .container{position:relative}
.hero-copy{position:relative;z-index:1}
.hero-art{position:absolute;top:50%;right:20px;transform:translateY(-50%);z-index:0;
  width:min(44%,520px);border-radius:18px;overflow:hidden;opacity:.38;pointer-events:none;
  border:1px solid rgba(255,255,255,.2);box-shadow:0 24px 60px rgba(8,15,46,.35);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%);
  mask-image:linear-gradient(90deg,transparent,#000 28%)}
.hero-art img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;object-position:78% center}
/* Full-bleed variant: image fills the whole hero as a faded background layer */
.hero-art-bg{inset:0;top:0;right:0;transform:none;width:auto;border:0;border-radius:0;
  box-shadow:none;opacity:.22;
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 58%);
  mask-image:linear-gradient(90deg,transparent 8%,#000 58%)}
.hero-art-bg img{aspect-ratio:auto}
/* Mobile: every hero image becomes a faint full-bleed layer, fading in below
   the headline so the text stays on clean gradient. */
@media(max-width:880px){
  .hero-art{inset:0;transform:none;width:auto;border:0;border-radius:0;box-shadow:none;opacity:.18;
    -webkit-mask-image:linear-gradient(180deg,transparent 6%,rgba(0,0,0,.55) 45%,#000 90%);
    mask-image:linear-gradient(180deg,transparent 6%,rgba(0,0,0,.55) 45%,#000 90%)}
  .hero-art img{aspect-ratio:auto;width:100%;height:100%}
}

/* Alternating image + text rows */
.media-row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.media-row+.media-row{margin-top:56px}
.media-row .shot{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:#fff}
.media-row .shot img{width:100%;height:auto;display:block}
.media-row.flip .shot{order:2}
.media-row h3{font-size:clamp(20px,3vw,26px)}
.media-row p{color:var(--muted);font-size:17px}
@media(max-width:760px){
  .media-row{grid-template-columns:1fr;gap:20px}
  .media-row.flip .shot{order:0}
  .media-row+.media-row{margin-top:44px}
}

/* Sections */
.section{padding:64px 0}
.section h2{font-size:clamp(24px,4vw,36px);text-align:center}
.section .lead{text-align:center;max-width:60ch;margin:0 auto 40px;color:var(--muted);font-size:18px}
.grid{display:grid;gap:22px}
.grid>*{min-width:0}            /* let grid items shrink instead of overflowing */
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow)}
.feature{display:flex;flex-direction:column}
.feature .ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,#eaf0ff,#e6f8ff);font-size:26px;margin-bottom:14px;color:var(--brand)}
.feature .ic svg{width:27px;height:27px}
.feature h3{font-size:19px;margin-bottom:6px}
.feature p{color:var(--muted);margin:0 0 18px}
.feature-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font-weight:700;font-size:14px;color:var(--brand);background:#eef2ff;padding:9px 16px;border-radius:10px;transition:.15s}
.feature-cta svg{width:16px;height:16px;transition:transform .15s}
.feature-cta:hover{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;text-decoration:none;transform:translateY(-1px)}
.feature-cta:hover svg{transform:translateX(3px)}
.btn-lg{padding:16px 32px;font-size:18px;border-radius:13px}

/* Steps */
.steps{counter-reset:s}
.step{position:relative;padding-left:14px}
.step .num{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:800;margin-bottom:12px}

/* Pricing */
.price-grid{display:grid;gap:22px;grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.price-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column;box-shadow:var(--shadow)}
.plan.popular{border:2px solid var(--brand);position:relative}
.plan.popular .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.plan h3{font-size:20px;margin-bottom:4px}
.plan .price{font-size:38px;font-weight:800;margin:8px 0 2px}
.plan .price small{font-size:15px;font-weight:600;color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:18px 0;flex:1}
.plan li{padding:7px 0 7px 26px;position:relative;color:#33405c;border-bottom:1px solid #f1f4f9}
.plan li:before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:800}

/* Forms */
.form-wrap{max-width:460px;margin:48px auto;padding:0 20px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow)}
label{display:block;font-size:13px;font-weight:600;color:#445;margin:14px 0 6px}
input,textarea,select{width:100%;padding:12px 14px;border:1px solid #d6dbe6;border-radius:11px;
  font-size:16px;background:#fff;font-family:inherit;color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,65,178,.12)}
textarea{min-height:110px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row{grid-template-columns:1fr}}
.help{font-size:13px;color:var(--muted);margin-top:6px}

/* Flash */
.flash{padding:13px 16px;border-radius:11px;margin:12px 0;font-size:15px;font-weight:600}
.flash--success{background:#e6f6ec;color:var(--ok)}
.flash--error{background:#fdecef;color:var(--bad)}
.flash--info{background:#e8f1fd;color:#1456b8}
.flash--warning{background:#fff5e0;color:var(--warn)}

/* Legal / long-form document pages */
.legal-doc h2{font-size:21px;margin:34px 0 10px}
.legal-doc h2:first-of-type{margin-top:8px}
.legal-doc p{color:#33405c;line-height:1.75;margin:0 0 14px}
.legal-doc ul{color:#33405c;line-height:1.75;margin:0 0 16px;padding-left:22px}
.legal-doc li{margin-bottom:7px}
.legal-doc code{background:#f4f6fb;padding:2px 7px;border-radius:6px;font-size:13px}

/* Footer */
.footer{background:#10173a;color:#c5ccde;padding:50px 0 30px;margin-top:40px}
.footer a{color:#c5ccde}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
@media(max-width:700px){.footer .cols{grid-template-columns:1fr}}
.footer h4{color:#fff;font-size:15px;margin-bottom:12px}
.footer .legal{border-top:1px solid #25305e;margin-top:30px;padding-top:18px;font-size:13px;color:#8893b5}

/* ===== Control-panel shell ===== */
.panel{display:flex;min-height:100vh}
.side{width:248px;background:#10173a;color:#c5ccde;flex-shrink:0;display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0}
.side .brand{color:#fff;padding:20px;border-bottom:1px solid #25305e;font-size:18px}
.side .brand img{height:30px}
.side nav{padding:14px 10px;flex:1;overflow:auto}
.side nav a{display:flex;align-items:center;gap:10px;color:#c5ccde;padding:11px 14px;border-radius:10px;
  font-weight:600;font-size:15px;margin-bottom:3px}
.side nav a:hover{background:#1b2350;text-decoration:none}
.side nav a.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.side .side-foot{padding:14px;border-top:1px solid #25305e;font-size:13px}
.main{flex:1;margin-left:248px;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:16px 26px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.topbar h1{font-size:20px;margin:0}
.content{padding:26px}
.side-toggle{display:none;background:none;border:0;font-size:24px;cursor:pointer}
@media(max-width:860px){
  .side{transform:translateX(-100%);transition:.2s;z-index:60}
  .side.open{transform:none}
  .main{margin-left:0}
  .side-toggle{display:block}
}

/* Stat cards + tables */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.stat .n{font-size:30px;font-weight:800}
.stat .l{color:var(--muted);font-size:14px}
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:auto;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#f7f9fc;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.badge-green{background:#e6f6ec;color:var(--ok)}
.badge-blue{background:#e8f1fd;color:#1456b8}
.badge-amber{background:#fff5e0;color:var(--warn)}
.badge-red{background:#fdecef;color:var(--bad)}
.badge-grey{background:#eef1f6;color:#67708a}
.page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.page-head h2{margin:0;font-size:24px}

/* Tables that collapse into stacked cards on mobile (opt-in via .table-wrap.cards). */
@media(max-width:680px){
  .table-wrap.cards{border:0;box-shadow:none;background:transparent;overflow:visible}
  .table-wrap.cards thead{display:none}
  .table-wrap.cards table,.table-wrap.cards tbody,.table-wrap.cards tr,.table-wrap.cards td{display:block;width:100%}
  .table-wrap.cards tr{border:1px solid var(--line);border-radius:14px;margin-bottom:14px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
  .table-wrap.cards td{border:0;border-bottom:1px solid #f1f4f9;padding:11px 16px;white-space:normal;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:right}
  .table-wrap.cards td:last-child{border-bottom:0}
  .table-wrap.cards td::before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;text-align:left;flex:0 0 auto}
  .table-wrap.cards td:empty{display:none}
  /* Action cells: let the buttons sit full-width and wrap neatly. */
  .table-wrap.cards td.cell-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
  .table-wrap.cards td.cell-actions::before{align-self:center}
}

/* Signature pad */
.sigBox{border:1px solid #d6dbe6;border-radius:12px;overflow:hidden;background:#fff;margin-top:6px}
.sigTop{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #eef0f4}
canvas.sig{width:100%;height:200px;touch-action:none;display:block;background:#fff}

/* Collapsible sign-off list (engineer dashboard) */
.so-acc{display:flex;flex-direction:column;gap:10px}
.so-item{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden}
.so-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 16px}
.so-item>summary::-webkit-details-marker{display:none}
.so-item .so-biz{flex:1;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-item .so-date{color:var(--muted);font-size:14px;white-space:nowrap}
.so-item .chev{color:var(--muted);transition:transform .15s;font-size:12px}
.so-item[open] .chev{transform:rotate(90deg)}
.so-item[open]>summary{border-bottom:1px solid var(--line)}
.so-body{padding:6px 16px 12px}
.so-body .row2{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid #f1f4f9;font-size:15px;text-align:right}
.so-body .row2:last-child{border-bottom:0}
.so-body .row2>span{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.4px;font-weight:700;text-align:left;flex:0 0 auto}
.so-body .so-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}

/* Dynamic template form */
.tpl-section{margin:6px 0 18px;padding-top:6px}
.tpl-section-title{font-size:16px;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid var(--brand);color:var(--brand);display:inline-block}
.tpl-h{font-size:14px;margin:10px 0 4px}
.tpl-fields{display:grid;gap:12px}
.tpl-fields.cols2{grid-template-columns:1fr 1fr}
@media(max-width:600px){.tpl-fields.cols2{grid-template-columns:1fr}}
.tpl-field label{margin-top:0}
.tpl-radios{display:flex;flex-wrap:wrap;gap:8px 16px;padding:6px 0}
.tpl-radio{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:15px;margin:0}
.tpl-radio input{width:auto}
.tpl-grid th,.tpl-grid td{padding:8px 10px}
.tpl-grid .tpl-grid-row{font-weight:600;white-space:normal}
.tpl-grid input{padding:8px 10px;border-radius:8px}
.tpl-val{padding:8px 0;border-bottom:1px solid var(--line);min-height:20px;overflow-wrap:anywhere}
.tpl-fields>*{min-width:0}
/* Repeatable group sections (e.g. windows you can add to) */
.tpl-repeat-item{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:#fbfcfe}
.tpl-repeat-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tpl-repeat-item-head strong{color:var(--brand)}
.tpl-repeat-remove{background:none;border:0;color:#c0392b;font:inherit;font-size:14px;cursor:pointer;padding:2px 4px}
.tpl-repeat-remove:hover{text-decoration:underline}
.tpl-repeat-item:only-child .tpl-repeat-remove{display:none}
.tpl-repeat-add{margin-top:2px}
/* Draft (in-progress sign-off) cards on the engineer dashboard */
.draft-card{display:flex;flex-direction:column;gap:12px}
.draft-card .tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}
.draft-card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto}
/* Pending offline-upload banner (only laid out when shown — the [hidden]
   attribute must still win, so scope the flex to :not([hidden])) */
.pending-card:not([hidden]){display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.pending-card .pending-text{flex:1;min-width:220px}
.pending-card .pending-msg{font-weight:600}

/* ===== "Open in the app / install" slide-down hint ===== */
.pwa-hint{position:fixed;top:0;left:0;right:0;z-index:1200;display:flex;align-items:center;gap:12px;
  margin:0 auto;max-width:560px;padding:12px 14px;background:#10173a;color:#fff;
  border-radius:0 0 16px 16px;box-shadow:0 12px 30px rgba(10,16,40,.35);
  transform:translateY(-130%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pwa-hint.show{transform:translateY(0)}
.pwa-hint-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.pwa-hint-ic svg{width:20px;height:20px}
.pwa-hint-text{flex:1;min-width:0;line-height:1.3}
.pwa-hint-text strong{display:block;font-size:14.5px}
.pwa-hint-text span{font-size:12.5px;color:#c4cef0}
.pwa-hint-act{flex:0 0 auto;background:#fff;color:#10173a;border:0;border-radius:9px;padding:9px 14px;font-weight:700;cursor:pointer}
.pwa-hint-x{flex:0 0 auto;background:none;border:0;color:#aab4d8;font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.pwa-hint-x:hover{color:#fff}
@media(max-width:600px){.pwa-hint{border-radius:0;gap:10px;padding:11px 12px}}

/* ===== Homepage "Works offline" upsell band ===== */
.offline-band{background:linear-gradient(135deg,#0f1736,#1c2f7a 58%,#16409a);color:#fff}
.offline-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.offline-copy h2{color:#fff;margin:10px 0 14px}
.offline-copy>p{color:#cdd6f5;font-size:17px;max-width:52ch}
.eyebrow-light{display:inline-flex;align-items:center;gap:8px;color:#8fb4ff;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:13px}
.eyebrow-light svg{width:16px;height:16px}
.offline-points{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:16px}
.offline-points li{display:flex;gap:14px;align-items:flex-start}
.offline-points .op-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#cfe0ff}
.offline-points .op-ic svg{width:20px;height:20px}
.offline-points div{color:#c4cef0;font-size:14.5px;line-height:1.5}
.offline-points strong{display:block;color:#fff;font-size:15.5px;margin-bottom:2px}
.btn-ghost-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.offline-copy .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
/* Phone mock visual */
.offline-visual{display:flex;justify-content:center}
.phone{position:relative;width:240px;background:#fff;border:9px solid #0b1230;border-radius:38px;box-shadow:0 24px 60px rgba(0,0,0,.4);padding:18px 14px 22px}
.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:64px;height:6px;border-radius:99px;background:#0b1230}
.phone-screen{display:flex;flex-direction:column;gap:14px;padding-top:14px}
.sig-off{align-self:center;display:inline-flex;align-items:center;gap:6px;background:#fdeaea;color:#c0392b;font-weight:700;font-size:12.5px;padding:5px 12px;border-radius:99px}
.sig-off svg{width:15px;height:15px}
.osh-card{display:flex;align-items:center;gap:11px;background:#eaf7ef;border:1px solid #cdeed8;border-radius:13px;padding:13px}
.osh-tick{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#1f9d57;color:#fff;display:flex;align-items:center;justify-content:center}
.osh-tick svg{width:19px;height:19px}
.osh-text strong{display:block;color:#143a23;font-size:14.5px}
.osh-text span{color:#4f7a60;font-size:12.5px}
.osh-sync{display:flex;align-items:center;gap:8px;justify-content:center;background:#eef3ff;color:#2541b2;font-weight:600;font-size:12.5px;padding:9px 12px;border-radius:11px}
.osh-sync svg{width:17px;height:17px}
@media(max-width:820px){
  .offline-grid{grid-template-columns:1fr;gap:34px}
  .offline-visual{order:-1}
  .offline-copy{text-align:center}            /* centres the eyebrow pill + heading */
  .offline-copy>p{text-align:left}            /* keep body copy readable */
  .offline-points{text-align:left}
  .offline-copy .cta{justify-content:center;gap:14px}
  .offline-copy .cta .btn{flex:1 1 240px}     /* even, full-width, spaced buttons */
  .feature-body p{text-align:center}          /* centre feature-page body copy on mobile */
}
.tpl-card{display:block;text-align:left;border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff;box-shadow:var(--shadow);transition:.15s;color:var(--ink)}
.tpl-card:hover{border-color:var(--brand);transform:translateY(-2px);text-decoration:none}
.tpl-card h3{margin:0 0 6px;font-size:18px}
.tpl-card .tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;margin-bottom:10px}

/* ===== Visual template builder ===== */
.tb{margin-top:18px}
.tb-head{margin-bottom:12px}
.tb-card{border:1px solid var(--line);border-radius:13px;background:#fbfcfe;padding:16px;margin-bottom:14px}
.tb-sig-card{background:#f4f7ff}
.tb-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tb-stitle{flex:1;font-weight:700}
.tb-scols{width:auto;flex:0 0 auto;padding:8px 10px;font-size:14px;border-radius:9px}
.tb-tag{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--brand);background:#e8edff;padding:3px 9px;border-radius:999px}
.tb-sec-ctrl,.tb-frow-ctrl{display:flex;gap:4px;flex:0 0 auto}
.tb-ic{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;
  font-size:14px;line-height:1;color:var(--muted);display:grid;place-items:center;padding:0}
.tb-ic:hover{border-color:var(--brand);color:var(--brand)}
.tb-snote{margin-bottom:12px;font-size:14px}
.tb-fields{display:flex;flex-direction:column;gap:10px}
.tb-field-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) auto minmax(0,1fr) auto;
  gap:8px;align-items:center}
.tb-field-row input,.tb-field-row select{padding:9px 11px;font-size:14px;border-radius:9px}
.tb-fkey{font-family:monospace;font-size:13px}
.tb-chk{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#445;margin:0;white-space:nowrap}
.tb-chk input{width:auto}
.tb-fopts{grid-column:1/-1;background:#fff;border:1px dashed var(--line);border-radius:10px;padding:10px 12px}
.tb-fopts label{margin-top:0}
.tb-fopts textarea{min-height:64px;font-size:14px}
.tb-addf{margin-top:12px}
.tb-add{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 18px}
.tb-grid-key{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tb-grid-key label{margin:0}
.tb-grid-key input{max-width:220px}
.tb-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.tb-grid-two{grid-template-columns:1fr}}
.tb-kl{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.tb-kl-row{display:grid;grid-template-columns:1fr .8fr auto;gap:7px;align-items:center}
.tb-kl-row input{padding:8px 10px;font-size:14px;border-radius:8px}
.tb-sigs{display:flex;flex-wrap:wrap;gap:10px 26px}
.tb-sig{display:flex;align-items:center;gap:14px}
.tb-adv{margin-top:6px;border-top:1px solid var(--line);padding-top:12px}
.tb-adv summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--muted)}
.tb-adv textarea{min-height:240px;font-family:monospace;font-size:13px;margin-top:8px}
.tb-apply-msg{margin-left:10px;font-size:13px;font-weight:600}
.tb-apply-msg.ok{color:var(--ok)} .tb-apply-msg.bad{color:var(--bad)}
/* Template reference image (the uploaded paper-form guide) */
.tpl-ref-current{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.tpl-ref-current img,.tpl-ref-preview{max-width:100%;max-height:300px;width:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.tpl-ref-preview{margin:8px 0 0}
.tpl-ref-overlay{position:fixed;inset:0;z-index:1300;background:rgba(8,12,28,.88);display:flex;align-items:center;justify-content:center;padding:18px;cursor:zoom-out}
.tpl-ref-overlay img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 10px 50px rgba(0,0,0,.5)}
@media(max-width:760px){
  .tb-card{padding:13px}
  /* Section header: title gets its own full-width row; the column picker and
     the up/down/remove controls share the row below it. */
  .tb-card-head{flex-wrap:wrap;gap:8px}
  .tb-stitle{flex:1 1 100%}
  .tb-scols{flex:1 1 auto;width:auto}
  .tb-card-head .tb-tag{order:-1}
  .tb-sec-ctrl{margin-left:auto}
  /* Field row: label, then type+key paired, then the link picker and controls
     on their own full-width rows so nothing gets squashed. */
  .tb-field-row{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:9px 8px}
  .tb-field-row .tb-flab{grid-column:1/-1}
  .tb-field-row .tb-fmap{grid-column:1/-1}
  .tb-field-row .tb-freq{grid-column:1/-1}
  .tb-frow-ctrl{grid-column:1/-1;justify-content:flex-end}
  /* Table (grid) key + column/row editors stack cleanly */
  .tb-grid-key{flex-wrap:wrap}
  .tb-grid-key input{max-width:none;flex:1 1 100%}
}

/* Loading + modal (reused from prototype) */
.loading{position:fixed;inset:0;background:rgba(255,255,255,.8);z-index:9999;text-align:center;display:none}
.loading img{height:5rem;margin-top:40vh;display:inline-block}

/* Global navigation loader (shows during slow page transitions) */
.app-loader{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;
  background:rgba(244,246,251,.78);backdrop-filter:saturate(140%) blur(4px);
  opacity:0;visibility:hidden}
.app-loader.on{visibility:visible;animation:appLoaderIn .35s ease .18s forwards}
@keyframes appLoaderIn{from{opacity:0}to{opacity:1}}
.app-loader-box{display:flex;flex-direction:column;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 34px;
  box-shadow:0 24px 60px -24px rgba(20,30,80,.45)}
.app-spinner{width:42px;height:42px;border-radius:50%;
  border:4px solid rgba(43,70,216,.16);border-top-color:#2b46d8;animation:appSpin .7s linear infinite}
@keyframes appSpin{to{transform:rotate(360deg)}}
.app-loader-text{font-weight:700;font-size:14px;color:#46506e;letter-spacing:.01em}

/* In-house confirmation modal */
.modal-ov{position:fixed;inset:0;background:rgba(16,23,58,.55);z-index:1000;display:none;
  align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .15s}
.modal-ov.open{display:flex;opacity:1}
.modal{background:#fff;border-radius:var(--radius);box-shadow:0 24px 70px rgba(16,23,58,.35);
  max-width:430px;width:100%;padding:26px;transform:translateY(10px) scale(.98);transition:transform .15s}
.modal-ov.open .modal{transform:none}
.modal h3{margin:0 0 8px;font-size:20px}
.modal p{margin:0 0 22px;color:var(--muted);font-size:15px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* Responsive search form (never overflows its container) */
.search-form{display:flex;gap:8px;flex-wrap:wrap;min-width:0;max-width:100%}
.search-form input{flex:1 1 220px;min-width:0;width:auto;max-width:100%}
.search-form .btn{flex:0 0 auto}
.page-head .search-form{flex:1 1 280px;justify-content:flex-end}
@media(max-width:560px){.page-head .search-form{flex-basis:100%}.search-form input{flex-basis:100%}}

/* Monthly / annual billing toggle */
.bill-toggle{display:flex;width:max-content;margin:0 auto 28px;background:#eef1f8;border:1px solid var(--line);
  border-radius:999px;padding:5px;gap:4px}
.bill-toggle button{border:0;background:transparent;font-family:inherit;font-weight:700;font-size:14px;
  padding:9px 20px;border-radius:999px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:.15s}
.bill-toggle button.active{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(20,30,80,.14)}
.bill-toggle .save{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-size:11px;
  padding:2px 9px;border-radius:999px;font-weight:800;letter-spacing:.02em}
.price-grid .pa,.price-grid .pa-note{display:none}
.price-grid[data-cycle="annual"] .pm{display:none}
.price-grid[data-cycle="annual"] .pa{display:inline}
.price-grid[data-cycle="annual"] .pa-note{display:block}
.pa-note{font-size:13px;margin-bottom:6px}

/* ============================================================================
   "Signature Console" — control-panel redesign (scoped to body.app only,
   so the public marketing site is untouched).
   ========================================================================= */
body.app{
  --ink:#0a0f24; --ink-soft:#141b3a;
  --canvas:#eceffb; --card:#ffffff; --line:#e3e7f3;
  --brand:#2b46d8; --brand2:#1cb5e0; --accent:#5b8cff;
  --ok:#0c8a43; --bad:#d92d4e; --warn:#b26a00; --muted:#6a7390; --ink-text:#10162e;
  font-family:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  color:var(--ink-text);background:var(--ink);letter-spacing:-.005em;
}
body.app h1,body.app h2,body.app h3,body.app h4,body.app .stat .n,body.app .price{
  font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;letter-spacing:-.02em;font-weight:700}

/* ---- Sidebar ---- */
body.app .side{
  width:264px;background:
    radial-gradient(120% 60% at 15% -5%,rgba(28,181,224,.16),transparent 65%),
    linear-gradient(185deg,#0c1432 0%,#0a0f26 55%,#080c1d 100%);
  border-right:1px solid rgba(120,140,220,.10);box-shadow:2px 0 30px rgba(0,0,0,.18)}
body.app .main{margin-left:264px}
body.app .side .brand{display:flex;align-items:center;gap:11px;padding:20px 18px;
  border-bottom:1px solid rgba(120,140,220,.12)}
body.app .side .brand img{height:34px;width:auto;background:#fff;padding:5px 9px;border-radius:11px;
  box-shadow:0 6px 18px rgba(0,0,0,.25)}
body.app .side .brand-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#7d88b8}
body.app .side nav{padding:16px 12px;gap:4px;display:flex;flex-direction:column}
body.app .side nav a{display:flex;align-items:center;gap:12px;color:#aab2d6;padding:11px 14px;border-radius:12px;
  font-weight:600;font-size:14.5px;position:relative;transition:.18s cubic-bezier(.2,.7,.2,1)}
body.app .side nav a .ico{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;opacity:.85}
body.app .side nav a .ico svg{width:19px;height:19px}
body.app .side nav a:hover{background:rgba(120,140,220,.10);color:#fff;text-decoration:none;transform:translateX(2px)}
body.app .side nav a.active{
  background:linear-gradient(120deg,rgba(43,70,216,.92),rgba(28,181,224,.85));color:#fff;
  box-shadow:0 10px 24px -8px rgba(43,90,230,.7)}
body.app .side nav a.active .ico{opacity:1}
body.app .side nav a.active::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:4px;height:20px;border-radius:0 4px 4px 0;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.6)}
body.app .side .side-foot{display:flex;align-items:center;gap:11px;padding:14px 16px;
  border-top:1px solid rgba(120,140,220,.12)}
body.app .side .avatar{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:#fff;font-size:16px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 6px 16px -4px rgba(43,90,230,.6)}
body.app .side .who{min-width:0}
body.app .side .who-name{color:#fff;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.app .side .logout{color:#8d97bf;font-size:13px;font-weight:600}
body.app .side .logout:hover{color:#1cb5e0;text-decoration:none}

/* ---- Topbar ---- */
body.app .topbar{background:rgba(236,239,251,.82);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);padding:15px 30px}
body.app .topbar h1{font-size:22px;margin:0;color:var(--ink-text)}
body.app .topbar-link{font-size:13px;font-weight:700;color:var(--brand);background:#fff;border:1px solid var(--line);
  padding:8px 14px;border-radius:10px;transition:.15s}
body.app .topbar-link:hover{text-decoration:none;border-color:var(--brand);transform:translateY(-1px)}

/* ---- Content canvas with dot-grid texture ---- */
body.app .content{padding:30px;background:
  radial-gradient(circle at 1px 1px,rgba(20,30,90,.055) 1px,transparent 0) -1px -1px/24px 24px,
  linear-gradient(180deg,#eceffb,#e7ebf8)}
body.app .page-head h2{font-size:26px}
body.app .muted{color:var(--muted)}

/* ---- Cards ---- */
body.app .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 14px 40px -22px rgba(20,30,80,.4);transition:.22s cubic-bezier(.2,.7,.2,1)}
body.app .card:hover{transform:translateY(-3px);border-color:#cdd6f3;box-shadow:0 26px 60px -30px rgba(20,30,80,.55)}

/* ---- Stat cards ---- */
body.app .stats{gap:18px}
body.app .stat{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;
  overflow:hidden;box-shadow:0 14px 40px -26px rgba(20,30,80,.45);transition:.22s cubic-bezier(.2,.7,.2,1)}
body.app .stat::after{content:'';position:absolute;left:0;top:0;height:100%;width:4px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));opacity:.85}
body.app .stat:hover{transform:translateY(-3px);box-shadow:0 26px 60px -30px rgba(20,30,80,.55)}
body.app .stat .n{font-size:34px;line-height:1.05;color:var(--ink-text);margin-bottom:4px}
body.app .stat .l{color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* ---- Buttons (consistent box model — fixes uneven action buttons) ---- */
body.app .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:700;
  border-radius:12px;border:1px solid transparent;line-height:1.1;white-space:nowrap;vertical-align:middle;
  transition:.16s cubic-bezier(.2,.7,.2,1);font-size:15px;padding:12px 20px}
body.app .btn-sm{padding:9px 15px;font-size:13.5px;border-radius:10px}
body.app .btn-block{display:flex;width:100%}
body.app .btn-lg{padding:15px 30px;font-size:17px;border-radius:14px}
body.app .btn svg{width:16px;height:16px}
body.app .btn:disabled,body.app .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none}
body.app .btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand2));color:#fff;
  box-shadow:0 12px 26px -12px rgba(43,90,230,.85)}
body.app .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(43,90,230,.95)}
body.app .btn-ghost{background:#fff;color:var(--ink-text);border-color:var(--line)}
body.app .btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
body.app .btn-dark{background:var(--ink);color:#fff}
body.app .btn-danger{background:#fff;color:var(--bad);border-color:#f3c9d2}
body.app .btn-danger:hover{background:var(--bad);color:#fff;border-color:var(--bad);transform:translateY(-2px)}
body.app .btn:hover{text-decoration:none}
/* Action cells / inline button groups line up evenly at equal height */
body.app .cell-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.app .cell-actions form{display:inline-flex;margin:0}
body.app td .btn,body.app .cell-actions .btn{min-height:38px}

/* ---- Badges ---- */
body.app .badge{padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:5px}
body.app .badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
body.app .badge-green{background:#e3f7ec;color:#0c8a43}
body.app .badge-blue{background:#e6efff;color:#2b46d8}
body.app .badge-amber{background:#fdf0d8;color:#9a6200}
body.app .badge-red{background:#fce4e9;color:#cb2244}
body.app .badge-grey{background:#eef1f8;color:#5b647f}

/* ---- Tables ---- */
body.app .table-wrap{border:1px solid var(--line);border-radius:18px;
  box-shadow:0 14px 40px -28px rgba(20,30,80,.4);background:#fff}
body.app table{font-size:14px}
body.app th{background:#f4f6fd;color:#7a839f;font-size:11px;letter-spacing:.08em;padding:14px 18px}
body.app td{padding:15px 18px;border-bottom:1px solid #eef1f8}
body.app tbody tr{transition:background .14s}
body.app tbody tr:hover{background:#f7f9ff}

/* ---- Forms ---- */
body.app label{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#56607e;text-transform:uppercase;margin:16px 0 7px}
body.app input,body.app textarea,body.app select{border:1.5px solid #dce1ee;border-radius:12px;padding:13px 15px;
  font-family:inherit;font-size:15px;background:#fbfcfe;transition:.15s}
body.app input:focus,body.app textarea:focus,body.app select:focus{border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 4px rgba(43,70,216,.13)}

/* ---- Flashes ---- */
/* Block layout (not flex): mixed text + links must wrap as normal prose. */
body.app .flash{border-radius:13px;padding:14px 18px;border:1px solid transparent;font-weight:600;
  line-height:1.5}
body.app .flash::before{font-size:17px;line-height:1;display:inline-block;margin-right:9px;vertical-align:-2px}
body.app .flash a{font-weight:700;text-decoration:underline}
body.app .flash--success{background:#e7f7ee;color:#0b7a3c;border-color:#bfe8cf}
body.app .flash--success::before{content:'\2713'}
body.app .flash--error{background:#fdeaee;color:#c01f40;border-color:#f6c9d3}
body.app .flash--error::before{content:'\26A0'}
body.app .flash--info{background:#e8f0ff;color:#2747c7;border-color:#c8d8fb}
body.app .flash--info::before{content:'\2139'}
body.app .flash--warning{background:#fdf3df;color:#9a6200;border-color:#f3dcab}
body.app .flash--warning::before{content:'\26A0'}

/* ---- Accordion (sign-off list) refinement ---- */
body.app .so-item{border-radius:15px;border-color:var(--line);box-shadow:0 12px 34px -26px rgba(20,30,80,.4)}
body.app .so-item[open]{box-shadow:0 22px 50px -28px rgba(20,30,80,.5)}

/* ---- Page-load staggered reveal ---- */
@keyframes app-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  body.app .content>*{animation:app-rise .55s cubic-bezier(.2,.7,.2,1) both}
  body.app .content>*:nth-child(1){animation-delay:.04s}
  body.app .content>*:nth-child(2){animation-delay:.10s}
  body.app .content>*:nth-child(3){animation-delay:.16s}
  body.app .content>*:nth-child(4){animation-delay:.22s}
  body.app .content>*:nth-child(5){animation-delay:.28s}
  body.app .content>*:nth-child(6){animation-delay:.34s}
  body.app .side nav a{animation:app-rise .5s cubic-bezier(.2,.7,.2,1) both}
  body.app .side nav a:nth-child(1){animation-delay:.06s}
  body.app .side nav a:nth-child(2){animation-delay:.11s}
  body.app .side nav a:nth-child(3){animation-delay:.16s}
  body.app .side nav a:nth-child(4){animation-delay:.21s}
  body.app .side nav a:nth-child(5){animation-delay:.26s}
  body.app .side nav a:nth-child(6){animation-delay:.31s}
  body.app .side nav a:nth-child(7){animation-delay:.36s}
}

/* ---- Stat grid stays 4-up but breathes on smaller screens ---- */
@media(max-width:860px){
  body.app .main{margin-left:0}
  body.app .side{width:264px}
}

/* ---- Sign-off job photos (engineer capture + subscriber view) ---- */
.photo-blocks{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:680px){.photo-blocks{grid-template-columns:1fr}}
.photo-block{border:1.5px dashed #cdd5e8;border-radius:14px;padding:14px;background:#fbfcfe}
.photo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.photo-grid:empty{display:none}
.photo-thumb{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1}
.photo-thumb img{width:100%;height:100%;object-fit:cover}
.photo-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;
  background:rgba(16,23,58,.72);color:#fff;font-size:16px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0}
.photo-x:hover{background:#c0203a}
.photo-actions{display:flex;gap:8px;flex-wrap:wrap}
.photo-err{margin:10px 0 0;font-size:14px}
.photo-view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.photo-view-thumb{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1}
.photo-view-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .18s}
.photo-view-thumb:hover img{transform:scale(1.04)}

/* ---- Photo lightbox (sign-off view) ---- */
.lb{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(10,15,40,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .22s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:min(92vw,1100px);max-height:78vh;border-radius:14px;background:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.55);transform:scale(.96);transition:transform .22s}
.lb.open img{transform:scale(1)}
.lb-cap{color:#cdd6f5;font-weight:600;margin-top:14px;font-size:15px;text-align:center;padding:0 16px}
.lb-btn{position:absolute;border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;
  width:46px;height:46px;border-radius:50%;font-size:26px;line-height:1;display:grid;place-items:center;
  padding:0;transition:background .15s}
.lb-btn:hover{background:rgba(255,255,255,.28)}
.lb-close{top:18px;right:18px}
.lb-prev{left:14px;top:50%;margin-top:-23px}
.lb-next{right:14px;top:50%;margin-top:-23px}
@media(max-width:620px){.lb-prev{left:6px}.lb-next{right:6px}.lb img{max-height:70vh}}

/* ---- Before/after USP visual (homepage) ---- */
.ba-demo{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:46px 18px;background:linear-gradient(135deg,#f2f5fc,#e8f6fd);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.ba-card{width:42%;max-width:190px;aspect-ratio:4/5;border-radius:12px;border:5px solid #fff;
  box-shadow:0 14px 34px rgba(20,30,80,.18);display:grid;place-items:center;position:relative}
.ba-card svg{width:34px;height:34px;color:#fff;opacity:.9}
.ba-before{background:linear-gradient(160deg,#8d97b5,#5a6585);transform:rotate(-4deg)}
.ba-after{background:linear-gradient(160deg,#2541b2,#1cb5e0);transform:rotate(3deg)}
.ba-tag{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(10,15,40,.65);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px;border-radius:999px}
.ba-arrow{color:var(--brand);flex:0 0 auto}
.ba-arrow svg{width:30px;height:30px}
.ba-chip{position:absolute;top:14px;right:16px;display:inline-flex;align-items:center;gap:6px;
  background:#e7f7ee;color:#0b7a3c;border:1px solid #bfe8cf;font-size:12.5px;font-weight:700;
  padding:5px 12px;border-radius:999px}
.ba-chip svg{width:14px;height:14px}

/* ---- Hero CTAs: pop on the blue gradient ---- */
.hero .btn-primary{background:#fff;color:var(--brand);box-shadow:0 14px 34px rgba(8,15,46,.38)}
.hero .btn-primary:hover{box-shadow:0 18px 44px rgba(8,15,46,.5);transform:translateY(-2px)}
.hero .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.22)}

/* ---- Stacked title + subtitle inside a table cell (survives card collapse) ---- */
.cell-main{min-width:0}
.cell-main .sub{display:block;color:var(--muted);font-size:13px;font-weight:500;margin-top:2px}

/* ---- Share CTA (homepage closing band) ---- */
.share-row{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.share-label{display:block;color:#cdd6f5;font-weight:600;margin-bottom:12px}
.share-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.share-btn{display:inline-block;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);
  color:#fff;font-size:14px;font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;
  text-decoration:none;transition:.15s;font-family:inherit}
.share-btn:hover{background:#fff;color:var(--brand);text-decoration:none;transform:translateY(-1px)}