/* VXQN — Page-specific styles (auth, legal, status, etc.)
   Extends enterprise.css. Production-grade. */

/* ===== Shared page chrome ===== */
.page{min-height:calc(100vh - 64px);display:flex;flex-direction:column}
.page-main{flex:1}

/* simple top nav for utility pages */
.tnav{
  border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(13,15,19,0.78);backdrop-filter:saturate(180%) blur(14px);z-index:50;
}
.tnav-inner{
  max-width:1280px;margin:0 auto;padding:14px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.tnav .brand{display:flex;align-items:center;gap:10px;color:var(--fg);font-weight:600;letter-spacing:-0.012em;font-size:17px}
.tnav .brand svg{flex-shrink:0}
.tnav .links{display:flex;gap:6px;align-items:center}
.tnav .links a{font-size:13.5px;color:var(--fg-2);padding:8px 12px;border-radius:6px;transition:color .15s,background .15s}
.tnav .links a:hover{color:var(--fg);background:rgba(255,255,255,0.03)}
.tnav .links a.on{color:var(--fg)}
.tnav .right{display:flex;gap:10px;align-items:center}

/* simple footer */
.tfoot{border-top:1px solid var(--line);padding:36px 0;background:var(--bg-1)}
.tfoot-inner{
  max-width:1280px;margin:0 auto;padding:0 32px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;
  font-family:var(--mono);font-size:11.5px;color:var(--fg-4);letter-spacing:0.04em;
}
.tfoot .links{display:flex;gap:24px;flex-wrap:wrap}
.tfoot .links a{color:var(--fg-3)}
.tfoot .links a:hover{color:var(--fg)}

/* page header */
.phead{padding:80px 0 56px;border-bottom:1px solid var(--line)}
.phead-inner{max-width:1080px;margin:0 auto;padding:0 32px}
.phead .kicker{margin-bottom:18px}
.phead h1{font-family:var(--display);font-weight:500;font-size:clamp(36px,4.4vw,64px);line-height:1.02;letter-spacing:-0.028em;color:var(--fg)}
.phead .lede{margin-top:18px;max-width:580px}
.phead .meta{margin-top:32px;display:flex;gap:32px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--fg-3);letter-spacing:0.04em}
.phead .meta b{color:var(--fg);font-weight:500;margin-right:6px}

/* ===== AUTH ===== */
.auth{
  min-height:calc(100vh - 65px);
  display:grid;grid-template-columns:1fr 1.1fr;
}
.auth-l{
  padding:80px 56px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  border-right:1px solid var(--line);
  position:relative;
}
.auth-l > *{position:relative;z-index:2;max-width:380px;width:100%}
.auth-l::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(800px 400px at 0% 100%,rgba(91,149,248,0.06),transparent 60%);
  pointer-events:none;
}
.auth-l .kicker{margin-bottom:20px}
.auth-l h1{font-family:var(--display);font-weight:500;font-size:38px;line-height:1.04;letter-spacing:-0.025em;color:var(--fg);margin-bottom:14px}
.auth-l .sub{font-size:15.5px;color:var(--fg-2);line-height:1.55;margin-bottom:36px}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-family:var(--mono);font-size:11.5px;color:var(--fg-3);letter-spacing:0.06em;text-transform:uppercase}
.field input,.field select,.field textarea{
  font:inherit;color:var(--fg);background:rgba(255,255,255,0.025);
  border:1px solid var(--line-2);border-radius:8px;
  padding:12px 14px;font-size:14.5px;letter-spacing:-0.005em;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-4)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(255,255,255,0.04);
  box-shadow:0 0 0 4px rgba(91,149,248,0.10);
}
.field .hint{font-family:var(--mono);font-size:11px;color:var(--fg-4);letter-spacing:0.04em;margin-top:2px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.auth-actions{margin-top:8px;display:flex;align-items:center;gap:14px}
.auth-actions .btn{padding:12px 22px}
.auth-actions .secondary{font-size:13.5px;color:var(--fg-3)}
.auth-actions .secondary:hover{color:var(--accent)}

.auth-sso{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.auth-sso .lbl{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--fg-4);text-transform:uppercase;margin-bottom:14px}
.auth-sso-row{display:flex;gap:8px;flex-wrap:wrap}
.auth-sso .opt{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;
  border:1px solid var(--line-2);border-radius:8px;background:rgba(255,255,255,0.02);
  font-size:13.5px;color:var(--fg-2);transition:border-color .15s,background .15s;
}
.auth-sso .opt:hover{border-color:var(--line-3);background:rgba(255,255,255,0.04);color:var(--fg)}
.auth-sso .opt svg{flex-shrink:0}

.auth-foot{margin-top:auto;padding-top:48px;font-size:13.5px;color:var(--fg-3)}
.auth-foot a{color:var(--accent)}

.auth-r{
  padding:80px 56px;background:#0A0C10;display:flex;flex-direction:column;justify-content:center;gap:32px;
  position:relative;overflow:hidden;
}
.auth-r::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.020) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.020) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 70%);
}
.auth-r > *{position:relative;z-index:2}
.auth-quote{font-family:var(--display);font-size:24px;line-height:1.4;letter-spacing:-0.015em;color:var(--fg)}
.auth-quote::before{content:"";display:block;width:24px;height:1px;background:var(--accent);margin-bottom:24px}
.auth-cite{font-family:var(--mono);font-size:11px;color:var(--fg-3);letter-spacing:0.06em;text-transform:uppercase}
.auth-cite b{color:var(--fg);font-weight:500;margin-right:6px}

.auth-tile{
  border:1px solid var(--line);border-radius:12px;padding:24px;
  background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.005));
}
.auth-tile .l{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--fg-3);text-transform:uppercase}
.auth-tile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.auth-tile-row .it .n{font-family:var(--display);font-size:24px;letter-spacing:-0.02em;color:var(--fg);line-height:1}
.auth-tile-row .it .d{font-family:var(--mono);font-size:11px;color:var(--fg-3);margin-top:6px;letter-spacing:0.04em}

@media (max-width:980px){
  .auth{grid-template-columns:1fr}
  .auth-l,.auth-r{padding:48px 32px}
  .auth-l{border-right:none;border-bottom:1px solid var(--line)}
}

/* ===== LEGAL / DOCS ===== */
.doc{
  display:grid;grid-template-columns:240px 1fr;gap:64px;
  max-width:1180px;margin:0 auto;padding:64px 32px 120px;
}
.doc-aside{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 96px);overflow-y:auto}
.doc-aside .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:0.18em;color:var(--fg-4);text-transform:uppercase;margin-bottom:14px}
.doc-aside ul{list-style:none}
.doc-aside li{padding:6px 0}
.doc-aside a{font-size:13.5px;color:var(--fg-3);padding:6px 0;display:block;border-left:2px solid transparent;padding-left:12px;margin-left:-12px;transition:color .15s,border-color .15s}
.doc-aside a:hover{color:var(--fg-2)}
.doc-aside a.on{color:var(--fg);border-left-color:var(--accent)}

.doc-body{max-width:760px;font-size:15.5px;line-height:1.7;color:var(--fg-2)}
.doc-body h2{font-family:var(--display);font-weight:500;font-size:28px;letter-spacing:-0.02em;line-height:1.15;color:var(--fg);margin:56px 0 16px;scroll-margin-top:80px}
.doc-body h2:first-child{margin-top:0}
.doc-body h3{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-0.01em;color:var(--fg);margin:28px 0 10px}
.doc-body p{margin-bottom:14px}
.doc-body strong{color:var(--fg);font-weight:500}
.doc-body ul{margin:8px 0 16px 20px}
.doc-body li{padding:4px 0}
.doc-body a{color:var(--accent);border-bottom:1px solid transparent;transition:border-color .15s}
.doc-body a:hover{border-bottom-color:var(--accent)}
.doc-body code{font-family:var(--mono);font-size:13px;background:var(--bg-2);padding:1px 6px;border-radius:4px;color:var(--fg);letter-spacing:0}
.doc-body hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.doc-body table{width:100%;border-collapse:collapse;margin:14px 0 24px}
.doc-body th,.doc-body td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
.doc-body th{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-3);font-weight:500;background:var(--bg-1)}

@media (max-width:880px){
  .doc{grid-template-columns:1fr;gap:32px}
  .doc-aside{position:static;max-height:none}
}

/* ===== TRUST CENTER ===== */
.trust-hero{padding:80px 0 64px;border-bottom:1px solid var(--line)}
.trust-hero-inner{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.trust-hero .lede{margin-top:18px}
.trust-hero .right{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.trust-hero .badge{
  border:1px solid var(--line-2);border-radius:12px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,0.025),transparent);
}
.trust-hero .badge .name{font-family:var(--display);font-size:16px;color:var(--fg);font-weight:500}
.trust-hero .badge .status{font-family:var(--mono);font-size:11px;color:var(--moss);margin-top:8px;letter-spacing:0.06em;display:flex;align-items:center;gap:6px}
.trust-hero .badge .status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--moss);box-shadow:0 0 6px var(--moss)}
.trust-hero .badge .status.warn{color:var(--warn)}
.trust-hero .badge .status.warn::before{background:var(--warn);box-shadow:0 0 6px var(--warn)}
.trust-hero .badge .d{margin-top:8px;font-size:13px;color:var(--fg-3);line-height:1.5}

.trust-controls{padding:80px 0;border-bottom:1px solid var(--line)}
.trust-controls-inner{max-width:1180px;margin:0 auto;padding:0 32px}
.tc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:32px}
.tc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tc-item{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tc-item:nth-child(2n){border-right:none}
.tc-item:nth-last-child(-n+2){border-bottom:none}
.tc-item .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.tc-item .n{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--fg-4);text-transform:uppercase}
.tc-item .pill{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;padding:3px 8px;border-radius:99px;text-transform:uppercase}
.tc-item .pill.ok{color:var(--moss);background:rgba(91,190,137,0.10);border:1px solid rgba(91,190,137,0.3)}
.tc-item .pill.warn{color:var(--warn);background:rgba(229,178,92,0.10);border:1px solid rgba(229,178,92,0.3)}
.tc-item .t{font-family:var(--display);font-size:20px;letter-spacing:-0.015em;color:var(--fg);font-weight:500}
.tc-item .d{margin-top:8px;font-size:14px;color:var(--fg-2);line-height:1.55}
.tc-item .controls{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.tc-item .controls span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;color:var(--fg-3);padding:3px 8px;background:rgba(255,255,255,0.03);border-radius:99px}

/* ===== STATUS PAGE ===== */
.status-hero{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.status-hero-inner{max-width:1180px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.status-banner{display:flex;align-items:center;gap:16px}
.status-banner .light{width:18px;height:18px;border-radius:50%;background:var(--moss);box-shadow:0 0 16px var(--moss);position:relative;flex-shrink:0}
.status-banner .light::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--moss);opacity:0.4;animation:pulse 2.5s infinite}
@keyframes pulse{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:0;transform:scale(1.4)}}
.status-banner .light.warn{background:var(--warn);box-shadow:0 0 16px var(--warn)}
.status-banner .light.crit{background:var(--crit);box-shadow:0 0 16px var(--crit)}
.status-banner .t{font-family:var(--display);font-size:32px;letter-spacing:-0.022em;line-height:1.05;color:var(--fg);font-weight:500}
.status-banner .sub{font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;color:var(--fg-3);margin-top:6px}
.status-meta{font-family:var(--mono);font-size:11px;color:var(--fg-3);letter-spacing:0.04em;text-align:right;line-height:1.8}

.status-systems{padding:48px 0 80px}
.status-systems-inner{max-width:1180px;margin:0 auto;padding:0 32px}
.sys-row{
  display:grid;grid-template-columns:1.4fr 1fr 90px;gap:24px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.sys-row:last-child{border-bottom:none}
.sys-row .n{display:flex;align-items:center;gap:12px}
.sys-row .n .dot{width:10px;height:10px;border-radius:50%;background:var(--moss);flex-shrink:0;box-shadow:0 0 8px var(--moss)}
.sys-row .n .dot.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.sys-row .n .dot.crit{background:var(--crit);box-shadow:0 0 8px var(--crit)}
.sys-row .n .t{font-size:15px;color:var(--fg);font-weight:500;letter-spacing:-0.005em}
.sys-row .n .d{font-family:var(--mono);font-size:11px;color:var(--fg-3);margin-top:2px;letter-spacing:0.04em}
.sys-row .uptime{display:flex;align-items:center;gap:2px}
.sys-row .uptime i{width:4px;height:18px;border-radius:1px;background:var(--moss)}
.sys-row .uptime i.warn{background:var(--warn)}
.sys-row .uptime i.crit{background:var(--crit)}
.sys-row .uptime i.gap{background:rgba(255,255,255,0.06)}
.sys-row .pct{font-family:var(--mono);font-size:13px;color:var(--fg);text-align:right;letter-spacing:0.02em}

.incident-log{margin-top:48px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.incident-log .ih{padding:18px 22px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--fg-3);text-transform:uppercase}
.incident{padding:22px;border-bottom:1px solid var(--line)}
.incident:last-child{border-bottom:none}
.incident .h{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:12px}
.incident .t{font-family:var(--display);font-size:16px;color:var(--fg);font-weight:500;letter-spacing:-0.01em}
.incident .ts{font-family:var(--mono);font-size:11px;color:var(--fg-3);letter-spacing:0.04em;text-align:right;white-space:nowrap}
.incident .status-pill{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;
}
.incident .status-pill.resolved{color:var(--moss);background:rgba(91,190,137,0.10);border:1px solid rgba(91,190,137,0.3)}
.incident .status-pill.monitoring{color:var(--warn);background:rgba(229,178,92,0.10);border:1px solid rgba(229,178,92,0.3)}
.incident .body{font-size:14px;color:var(--fg-2);line-height:1.55}
.incident .updates{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.incident .upd{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:6px 0;font-size:13.5px;color:var(--fg-2)}
.incident .upd .when{font-family:var(--mono);font-size:11px;color:var(--fg-4);letter-spacing:0.04em}
.incident .upd b{color:var(--fg);font-weight:500}

/* ===== CHANGELOG ===== */
.cl-body{max-width:880px;margin:0 auto;padding:64px 32px 120px}
.cl-entry{
  display:grid;grid-template-columns:180px 1fr;gap:48px;
  padding:48px 0;border-bottom:1px solid var(--line);
}
.cl-entry:last-child{border-bottom:none}
.cl-meta{padding-top:6px;font-family:var(--mono);font-size:12px;color:var(--fg-3);letter-spacing:0.06em;line-height:1.8;position:sticky;top:80px;align-self:start}
.cl-meta .ver{font-family:var(--display);font-size:18px;color:var(--fg);font-weight:500;letter-spacing:-0.012em;display:block;margin-bottom:4px}
.cl-meta .tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;margin-top:8px}
.cl-meta .tag.major{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
.cl-meta .tag.minor{background:rgba(255,255,255,0.04);color:var(--fg-3);border:1px solid var(--line-2)}
.cl-meta .tag.patch{background:rgba(91,190,137,0.10);color:var(--moss);border:1px solid rgba(91,190,137,0.3)}

.cl-content h2{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:-0.02em;line-height:1.1;color:var(--fg);margin-bottom:14px}
.cl-content .summary{font-size:15.5px;color:var(--fg-2);line-height:1.6;margin-bottom:24px}
.cl-content .group{margin-bottom:24px}
.cl-content .group:last-child{margin-bottom:0}
.cl-content h3{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--accent);text-transform:uppercase;margin-bottom:12px}
.cl-content ul{list-style:none;display:grid;gap:6px}
.cl-content li{padding:8px 0;font-size:14.5px;color:var(--fg-2);line-height:1.5;display:flex;gap:12px;align-items:flex-start}
.cl-content li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--fg-4);margin-top:9px;flex-shrink:0}
.cl-content li b{color:var(--fg);font-weight:500}
.cl-content code{font-family:var(--mono);font-size:13px;background:var(--bg-2);padding:1px 5px;border-radius:4px;color:var(--fg-2);letter-spacing:0}

@media (max-width:760px){
  .cl-entry{grid-template-columns:1fr;gap:18px;padding:32px 0}
  .cl-meta{position:static}
}

/* ===== CASE STUDY ===== */
.cs-hero{padding:96px 0 56px;border-bottom:1px solid var(--line)}
.cs-hero-inner{max-width:1180px;margin:0 auto;padding:0 32px}
.cs-hero .top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.cs-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(36px,4.6vw,68px);line-height:1.0;letter-spacing:-0.028em;color:var(--fg);max-width:780px}
.cs-hero h1 em{color:var(--accent);font-style:normal}
.cs-hero .who{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--fg-3);text-transform:uppercase;text-align:right;line-height:2}
.cs-hero .who b{color:var(--fg);font-weight:500}

.cs-results{
  display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-1);
}
.cs-result{padding:28px 24px;border-right:1px solid var(--line)}
.cs-result:last-child{border-right:none}
.cs-result .l{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;color:var(--fg-3);text-transform:uppercase}
.cs-result .v{font-family:var(--display);font-weight:500;font-size:38px;letter-spacing:-0.025em;color:var(--fg);margin-top:10px;line-height:1}
.cs-result .v .u{font-size:14px;color:var(--fg-3);margin-left:4px;font-family:var(--mono);letter-spacing:0.04em}
.cs-result .v.pos{color:var(--moss)}
.cs-result .d{margin-top:8px;font-size:12.5px;color:var(--fg-3);line-height:1.5}

.cs-body{padding:80px 0;max-width:880px;margin:0 auto}
.cs-body .wrap{padding:0 32px}
.cs-section{padding:48px 0;border-bottom:1px solid var(--line)}
.cs-section:last-child{border-bottom:none}
.cs-section .label{margin-bottom:18px;color:var(--accent)}
.cs-section h2{font-family:var(--display);font-weight:500;font-size:32px;letter-spacing:-0.022em;line-height:1.1;color:var(--fg);margin-bottom:18px}
.cs-section p{font-size:16px;line-height:1.7;color:var(--fg-2);margin-bottom:14px}
.cs-section blockquote{
  margin:32px 0;padding:24px 32px;
  border-left:2px solid var(--accent);background:rgba(255,255,255,0.02);border-radius:0 8px 8px 0;
}
.cs-section blockquote .q{font-family:var(--display);font-size:20px;line-height:1.45;color:var(--fg);letter-spacing:-0.012em}
.cs-section blockquote .c{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--fg-3);letter-spacing:0.06em;text-transform:uppercase}
.cs-section blockquote .c b{color:var(--fg);font-weight:500;margin-right:6px}

@media (max-width:880px){
  .cs-results{grid-template-columns:1fr 1fr}
  .cs-result{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .cs-result:nth-child(2n){border-right:none}
  .cs-result:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:560px){
  .cs-results{grid-template-columns:1fr}
  .cs-result{border-right:none}
}

/* ===== 404 / ERROR ===== */
.err{
  min-height:calc(100vh - 65px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 32px;position:relative;overflow:hidden;
}
.err::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 400px at 50% 30%,rgba(91,149,248,0.06),transparent 60%);
  pointer-events:none;
}
.err > *{position:relative;z-index:2}
.err .code{
  font-family:var(--mono);font-size:13px;letter-spacing:0.22em;color:var(--accent);text-transform:uppercase;
  margin-bottom:24px;display:inline-flex;align-items:center;gap:14px;
}
.err .code::before,.err .code::after{content:"";width:28px;height:1px;background:var(--accent)}
.err h1{font-family:var(--display);font-weight:500;font-size:clamp(56px,8vw,128px);line-height:0.95;letter-spacing:-0.04em;color:var(--fg);margin-bottom:16px}
.err .num{display:block;color:var(--accent);font-size:0.5em;letter-spacing:-0.02em;margin-bottom:14px}
.err .lede{margin:0 auto 36px;max-width:480px}
.err .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ===== MOBILE NAV (drawer) ===== */
.mob-btn{
  display:none;width:40px;height:40px;border:1px solid var(--line-2);border-radius:8px;
  align-items:center;justify-content:center;background:transparent;
}
.mob-btn span,.mob-btn span::before,.mob-btn span::after{
  content:"";display:block;width:18px;height:1.4px;background:var(--fg);transition:transform .2s,top .2s,bottom .2s;
}
.mob-btn span{position:relative}
.mob-btn span::before{position:absolute;top:-6px;left:0;right:0}
.mob-btn span::after{position:absolute;top:6px;left:0;right:0}
.mob-btn.open span{background:transparent}
.mob-btn.open span::before{top:0;transform:rotate(45deg)}
.mob-btn.open span::after{top:0;transform:rotate(-45deg)}

.mob-drawer{
  position:fixed;inset:0;background:rgba(13,15,19,0.96);backdrop-filter:blur(16px);z-index:100;
  display:flex;flex-direction:column;padding:80px 32px 32px;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.mob-drawer.open{opacity:1;visibility:visible}
.mob-drawer .close{position:absolute;top:18px;right:18px}
.mob-drawer a{
  display:block;font-family:var(--display);font-size:32px;font-weight:500;letter-spacing:-0.025em;
  color:var(--fg);padding:14px 0;border-bottom:1px solid var(--line);
}
.mob-drawer .cta{margin-top:32px;display:flex;flex-direction:column;gap:10px}
.mob-drawer .cta .btn{justify-content:center;padding:14px 22px}

@media (max-width:880px){
  .mob-btn{display:flex}
  .tnav .links{display:none}
}

/* =========================================================================
   RESPONSIVE — mobile/tablet refinements (added; desktop unchanged)
   Breakpoints: ~820px tablet, ~640/600/560px component, ~480/400px phone.
   Only max-width rules. Goals: collapse multi-col grids to 1 col, fix
   collapsed borders, kill horizontal overflow, trim section padding/headings.
   ========================================================================= */

/* ----- Tablet (<=820px) ----- */
@media (max-width:820px){
  /* 1. Trust hero: stack the 2-col hero so the left col is not squished */
  .trust-hero{padding:56px 0 44px}
  .trust-hero-inner{grid-template-columns:1fr;gap:36px;align-items:start}

  /* 8. Trim oversized section paddings on tablets */
  .trust-controls{padding:56px 0}
  .status-systems{padding:36px 0 56px}
  .cs-body{padding:56px 0}
  .cs-hero{padding:64px 0 44px}
  .doc{padding:48px 24px 80px}
  .phead{padding:60px 0 44px}
}

/* ----- Component breakpoints (<=640px) ----- */
@media (max-width:640px){
  /* 2. Controls grid: one column; fix borders for single-column layout */
  .tc-grid{grid-template-columns:1fr}
  .tc-item{border-right:none}
  /* reset the 2-col nth rules, then apply single-col rule */
  .tc-item:nth-child(2n){border-right:none}
  .tc-item:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .tc-item:last-child{border-bottom:none}

  /* 3. Controls head: let the button drop below the heading */
  .tc-head{flex-wrap:wrap;align-items:flex-start;gap:18px}

  /* 4. System rows: name + pct on one row; hide 90-day uptime bars */
  .sys-row{grid-template-columns:1fr auto;gap:16px}
  .sys-row .uptime{display:none}

  /* Status hero: left-align the meta block once it wraps below the banner */
  .status-hero-inner{gap:20px}
  .status-meta{text-align:left}

  /* Case-study hero meta: left-align once the row wraps to stack */
  .cs-hero .top{gap:20px}
  .cs-hero .who{text-align:left}

  /* Incident header: let timestamp drop below title cleanly */
  .incident .h{flex-wrap:wrap;gap:8px}
  .incident .ts{text-align:left;white-space:normal}

  /* Doc ToC -> a compact stacked block of tappable chips (not a sticky rail).
     Removes the left-border-rail treatment which dangles when stacked. */
  .doc-aside{border-bottom:1px solid var(--line);padding-bottom:20px}
  .doc-aside ul{display:flex;flex-wrap:wrap;gap:8px}
  .doc-aside li{padding:0}
  .doc-aside a{
    border-left:none;margin-left:0;padding:11px 14px;min-height:44px;
    display:inline-flex;align-items:center;
    border:1px solid var(--line-2);border-radius:8px;
    background:rgba(255,255,255,0.02);line-height:1.2;
  }
  .doc-aside a.on{border-left:none;border-color:var(--accent);color:var(--fg);background:var(--accent-soft)}

  /* Footer: generous tap targets + wrap long links */
  .tfoot-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .tfoot .links{gap:8px 18px}
  .tfoot .links a{padding:6px 0;min-height:40px;display:inline-flex;align-items:center;overflow-wrap:anywhere}

  /* Utility nav: tighten gutters once the inline links are hidden */
  .tnav-inner{padding:12px 20px;gap:16px}
}

/* ----- Status incident updates (<=560px) ----- */
@media (max-width:560px){
  /* 7. Incident update rows: stack timestamp above the text */
  .incident .upd{grid-template-columns:1fr;gap:4px}
}

/* ----- Legal/doc tables (<=600px) ----- */
@media (max-width:600px){
  /* 6. Wide legal/subprocessor tables: scroll instead of breaking layout */
  .doc-body table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
}

/* ----- Phone (<=480px) ----- */
@media (max-width:480px){
  /* 1. Trust hero badge grid: single column on phones */
  .trust-hero .right{grid-template-columns:1fr}
  .trust-hero{padding:44px 0 36px}

  /* 5. Form rows: stack the two fields */
  .field-row{grid-template-columns:1fr}

  /* 8. Tighter container side padding (~18-20px) + reduced section padding */
  .trust-hero-inner,
  .trust-controls-inner,
  .status-hero-inner,
  .status-systems-inner,
  .cs-hero-inner,
  .cs-body .wrap{padding-left:20px;padding-right:20px}
  .phead-inner{padding-left:20px;padding-right:20px}
  .doc{padding:36px 20px 64px;gap:28px}
  .cl-body{padding:48px 20px 80px}
  .trust-controls{padding:44px 0}
  .status-systems{padding:28px 0 44px}
  .cs-body{padding:44px 0}
  .phead{padding:48px 0 36px}
  .cs-hero{padding:48px 0 36px}

  /* Reduce very large headings on phones */
  .auth-l h1{font-size:clamp(28px,8vw,38px)}
  .status-banner .t{font-size:clamp(24px,7vw,32px)}
  .cs-section h2{font-size:clamp(24px,6.5vw,32px)}
  .doc-body h2{font-size:clamp(22px,6vw,28px)}
  .phead h1{font-size:clamp(30px,8.5vw,40px)}
  .cl-content h2{font-size:clamp(22px,6vw,26px)}

  /* Reduce inner padding on bordered control items */
  .tc-item{padding:22px}

  /* ----- AUTH: comfortable padding + full-width >=44px controls ----- */
  .auth-l,.auth-r{padding:44px 20px}
  .auth-l h1{margin-bottom:12px}
  .auth-l .sub{font-size:15px;margin-bottom:28px}
  /* Inputs go full-bleed and tall enough to tap (>=44px) */
  .field input,.field select,.field textarea{
    width:100%;padding:13px 14px;font-size:16px;
  }
  /* 16px font-size on inputs also stops iOS zoom-on-focus */
  .auth-actions{flex-direction:column;align-items:stretch;gap:12px}
  .auth-actions .btn{width:100%;justify-content:center;padding:14px 22px}
  .auth-actions .secondary{text-align:center;padding:10px 0;min-height:44px;display:flex;align-items:center;justify-content:center}
  /* SSO options span full width and reach a tappable height */
  .auth-sso-row{flex-direction:column;gap:10px}
  .auth-sso .opt{width:100%;justify-content:center;padding:13px 16px;min-height:46px}
  /* Long emails / SSO labels wrap rather than overflow */
  .auth-foot,.auth-l .sub,.auth-l h1{overflow-wrap:anywhere}
  .auth-quote{font-size:21px}
  .auth-tile-row{grid-template-columns:1fr 1fr;gap:16px}

  /* ----- DOC body: comfortable reading + safe media ----- */
  .doc-body{font-size:15px}
  .doc-body h3{font-size:17px}
  .doc-body a{overflow-wrap:anywhere}
  .doc-body code{overflow-wrap:anywhere}
  .doc-body pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .doc-body img{max-width:100%;height:auto}

  /* ----- STATUS: tighter banner + readable rows ----- */
  .status-hero{padding:48px 0 32px}
  .status-banner{gap:14px}
  .sys-row .n .t{overflow-wrap:anywhere}
  .incident{padding:18px}
  .incident-log .ih{padding:16px 18px}

  /* ----- TRUST hero badges: a touch tighter ----- */
  .trust-hero .badge{padding:16px}

  /* ----- CASE STUDY: tighten + protect media ----- */
  .cs-hero .top{margin-bottom:32px}
  .cs-result{padding:24px 20px}
  .cs-result .v{font-size:34px}
  .cs-section{padding:36px 0}
  .cs-section p{font-size:15px}
  .cs-section blockquote{padding:20px 22px;margin:24px 0}
  .cs-section blockquote .q{font-size:18px}
  .cs-section img,.cs-body img{max-width:100%;height:auto}

  /* ----- CHANGELOG: comfortable list ----- */
  .cl-content li{font-size:14px}
  .cl-content code{overflow-wrap:anywhere}

  /* ----- 404: full-width stacked CTAs, balanced spacing ----- */
  .err{padding:64px 20px}
  .err .ctas{flex-direction:column;align-items:stretch;width:100%;max-width:300px;margin:0 auto}
  .err .ctas .btn{width:100%;justify-content:center;padding:14px 22px}
  .err .lede{margin-bottom:32px}

  /* ----- Mobile drawer: keep links big but not overscaled ----- */
  .mob-drawer{padding:76px 20px 28px}
  .mob-drawer a{font-size:28px}
}

/* ----- Small phone tuning (<=400px) ----- */
@media (max-width:400px){
  .trust-hero-inner,
  .trust-controls-inner,
  .status-hero-inner,
  .status-systems-inner,
  .cs-hero-inner,
  .cs-body .wrap,
  .phead-inner{padding-left:18px;padding-right:18px}
  .doc,.cl-body{padding-left:18px;padding-right:18px}
  .auth-l,.auth-r{padding-left:18px;padding-right:18px}
  .err{padding-left:18px;padding-right:18px}
  .tnav-inner{padding-left:18px;padding-right:18px}

  /* Auth stat tiles + case-study results to a single column on tiny screens */
  .auth-tile-row{grid-template-columns:1fr;gap:14px}
  .cs-result .v{font-size:30px}

  /* 404 numeral never dwarfs the screen */
  .err h1{font-size:clamp(48px,17vw,72px)}

  /* Page-header meta wraps comfortably */
  .phead .meta{gap:14px 24px}
}