@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
/* Ring Wrangler by i4CTel — sign-in page */

:root {
  --bg-0:  #070E17;
  --bg-1:  #0B1A2A;
  --ink:   #E9F0F8;
  --dim:   #8DA3BB;
  --faint: #5C7189;
  --line:  rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --glass: rgba(255,255,255,.045);
  --accent:#3B9EFF;
  --accent-2:#5FD3F3;
  --good:  #2ED47A;
  --bad:   #FF6B6B;
  --warn:  #F5B942;
  --accent-rgb: 59,158,255;
  --btn-1:#6FD6F5; --btn-2:#3B9EFF; --btn-3:#2B7BE0; --btn-ink:#04121F;
  --h1-1:#FFFFFF; --h1-2:#9ED6FF;
  --radial-1:#12324F; --radial-2:#0F2A43; --bg-deep:#060C14;
  --glow-1:#2E7DD4; --glow-1b:#123055;
  --glow-2:#34C6E8; --glow-2b:#10394F;
  --glow-3:#1E5FA8; --glow-3b:#0A1B2C;
  --font:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-0);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- animated background ---------- */
.aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; background:
  radial-gradient(1200px 700px at 15% 10%, var(--radial-1) 0%, transparent 60%),
  radial-gradient(1000px 800px at 85% 90%, var(--radial-2) 0%, transparent 62%),
  linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-deep) 100%); }
.aurora .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .34; }
.b1 { width: 38.75rem; height: 620px; left: -140px; top: -160px;
      background: radial-gradient(circle at 35% 35%, var(--glow-1), var(--glow-1b) 70%); animation: drift1 26s ease-in-out infinite; }
.b2 { width: 32.5rem; height: 520px; right: -120px; top: 22%;
      background: radial-gradient(circle at 60% 40%, var(--glow-2), var(--glow-2b) 70%); opacity: .22; animation: drift2 31s ease-in-out infinite; }
.b3 { width: 43.75rem; height: 700px; left: 32%; bottom: -320px;
      background: radial-gradient(circle at 50% 50%, var(--glow-3), var(--glow-3b) 72%); opacity: .28; animation: drift3 36s ease-in-out infinite; }
.aurora .grid {
  position: absolute; inset: 0; opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, #000 20%, transparent 78%);
}
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,60px) scale(1.09); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,50px) scale(1.13); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-60px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

/* ---------- layout ---------- */
.shell {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-columns: 1.05fr 30rem; gap: 2.5rem;
  align-items: center; padding: 2.5rem clamp(1.5rem, 5vw, 4.75rem);
  max-width: 88.75rem; margin: 0 auto;
}
@media (max-width: 1020px) {
  .shell { grid-template-columns: 1fr; overflow-y: auto; align-items: start; padding-top: 2.125rem; }
  .pitch { display: none; }
}

/* Just the logo and the sign-in — one centered column. */
.shell.solo { grid-template-columns: minmax(0, 30rem); justify-content: center; }

/* ---------- left pitch ---------- */
.pitch { min-width: 0; animation: rise .7s cubic-bezier(.2,.8,.25,1) both; }
.pitch .logo { width: min(40rem, 96%); height: auto; display: block; margin-bottom: 1.625rem;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,.6)); }
.pitch .logo.hero { margin-bottom: 1.125rem; }
.pitch h1 { font-size: clamp(1.875rem, 3.6vw, 2.875rem); line-height: 1.08; letter-spacing: -.02em;
  font-weight: 700; margin: 0 0 1rem;
  background: linear-gradient(100deg, var(--h1-1) 10%, var(--h1-2) 60%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.pitch p { color: var(--dim); font-size: 0.9688rem; line-height: 1.65; max-width: 62ch; margin: 0 0 1.625rem; }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6875rem; max-width: 64ch; }
.points li { display: flex; align-items: flex-start; gap: 0.75rem; color: #B7C9DC; font-size: 0.875rem; line-height: 1.5; }
.points .dot { flex: none; width: 7px; height: 7px; margin-top: 0.4375rem; border-radius: 50%;
  background: linear-gradient(140deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.65); }

/* ---------- right panel ---------- */
.panel { min-width: 0; animation: rise .7s .08s cubic-bezier(.2,.8,.25,1) both; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 2rem 1.875rem 1.75rem;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
}
/* Desktop: the logo owns the left column, so the card doesn't repeat it.
   Small screens: the columns stack and the card carries the logo instead. */
.card-logo { display: none; width: min(20rem, 92%); margin: 0 auto 1.25rem;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }
@media (max-width: 1020px) { .card-logo { display: block; } }

/* Just the logo on the left — no pitch text. Centered against the card. */
.pitch { display: flex; align-items: center; justify-content: center; }
.pitch .logo.hero { width: min(45rem, 100%); margin: 0; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }

.pane { display: none; }
.pane.is-on { display: block; animation: fade .35s ease both; }

h2 { margin: 0 0 0.375rem; font-size: 1.3125rem; font-weight: 700; letter-spacing: -.01em; }
.sub { margin: 0 0 1.375rem; color: var(--faint); font-size: 0.8125rem; line-height: 1.55; }

.field { display: block; margin-bottom: 0.9375rem; }
.field > span { display: block; font-size: 0.7188rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 0.4375rem; }
.field > span em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .75; }
input[type=text], input[type=password], input[type=email] {
  width: 100%; padding: 0.75rem 0.8125rem; font: 400 0.9062rem var(--font); color: var(--ink);
  background: rgba(6,14,23,.55); border: 1px solid var(--line); border-radius: 10px;
  outline: none; transition: border-color .16s, box-shadow .16s, background .16s;
}
input::placeholder { color: #4E637A; }
input:focus { border-color: rgba(var(--accent-rgb),.75); background: rgba(6,14,23,.8);
  box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb),.16); }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px #0C1B2B inset; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 460px) { .row { grid-template-columns: 1fr; } }

.pw { position: relative; display: block; }
.pw input { padding-right: 3.875rem; }
.peek { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--faint); font: 600 0.7188rem var(--font);
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; padding: 0.5rem 0.5rem; border-radius: 7px; }
.peek:hover { color: var(--accent); background: rgba(var(--accent-rgb),.10); }

.check { display: flex; align-items: center; gap: 0.5625rem; margin: 0.25rem 0 1.25rem; cursor: pointer;
  color: var(--dim); font-size: 0.8125rem; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.meter { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: -0.375rem; }
.meter i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s, background .25s; }
.meter i.s0, .meter i.s1 { background: var(--bad); }
.meter i.s2 { background: var(--warn); }
.meter i.s3 { background: #7FD37F; }
.meter i.s4 { background: var(--good); }
.hint { font-size: 0.7188rem; color: var(--faint); margin: 0.4375rem 0 0.875rem; }

.btn { width: 100%; padding: 0.8125rem 1rem; border: 0; border-radius: 11px; cursor: pointer;
  font: 600 0.9062rem var(--font); letter-spacing: .01em; transition: transform .12s, box-shadow .16s, filter .16s; }
.btn.primary { color: var(--btn-ink); background: linear-gradient(135deg, var(--btn-1) 0%, var(--btn-2) 55%, var(--btn-3) 100%);
  box-shadow: 0 12px 28px rgba(43,123,224,.34); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.btn.primary:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.busy { position: relative; color: transparent; }
.btn.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px;
  border: 2.5px solid rgba(4,18,31,.35); border-top-color: #04121F; border-radius: 50%;
  animation: spin .7s linear infinite; }
.btn.ghost { color: var(--faint); background: transparent; border: 1px solid #2A3644; margin-top: 0.625rem; }
.btn.ghost:hover:not(:disabled) { color: #DCE6F0; border-color: #3D4C5E; }

.msg { padding: 0.625rem 0.75rem; border-radius: 9px; font-size: 0.8125rem; line-height: 1.45; margin-bottom: 0.875rem; }
.msg.error { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.34); color: #FFC2C2; }
.msg.ok { background: rgba(46,212,122,.12); border: 1px solid rgba(46,212,122,.34); color: #B6F2D2; }
.msg.setup { background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.3); color: #BFE0FF; font-size: 0.7625rem; line-height: 1.55; }
.msg.setup b { color: #fff; font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.madeby { text-align: center; margin-top: 1.25rem; font-size: 0.7188rem; color: #4E637A; letter-spacing: .04em; }

.shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-1.5px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.madeby .legalline { margin-top: 0.375rem; font-size: 0.6562rem; color: #405469; line-height: 1.6; }
.madeby .legalline a { color: #5B7D9E; text-decoration: none; border-bottom: 1px dotted #405469; }
.madeby .legalline a:hover { color: #7FA6CC; }


/* ---------- themes (mirrors the console's Look & feel setting) ---------- */
html[data-theme="trailhead"] { --btn-1:#F5C063; --btn-2:#E8912D; --btn-3:#BE6A1B; --btn-ink:#1A1206; --h1-2:#F5C063; --bg-0:#0F1309; --bg-1:#191E10; --bg-deep:#0A0D06;
  --radial-1:#2B3317; --radial-2:#222A13;
  --glow-1:#8A7B2E; --glow-1b:#2E2A10; --glow-2:#C77B31; --glow-2b:#33230E; --glow-3:#6C7C2C; --glow-3b:#171A0A;
  --accent:#E8912D; --accent-2:#F5B942; --accent-rgb:232,145,45; --ink:#F2EFE2; --dim:#A39C81; --faint:#7A745B; }
html[data-theme="redline"] { --btn-1:#FF7A6B; --btn-2:#F02D44; --btn-3:#B31226; --btn-ink:#1D0508; --h1-2:#FF9C9C; --bg-0:#0C0C0E; --bg-1:#161419; --bg-deep:#070708;
  --radial-1:#2A1418; --radial-2:#1F1013;
  --glow-1:#B3202E; --glow-1b:#2C0D12; --glow-2:#5A5F6B; --glow-2b:#17181D; --glow-3:#8A1B29; --glow-3b:#120608;
  --accent:#F02D44; --accent-2:#FF7A6B; --accent-rgb:240,45,68; --ink:#F3F1F1; --dim:#9C949B; --faint:#6E676D; }
html[data-theme="sterling"] { --btn-1:#E8EFF6; --btn-2:#BECFE0; --btn-3:#8FA5BB; --btn-ink:#0D141C; --h1-2:#D4E0EC; --bg-0:#0A0C0F; --bg-1:#121620; --bg-deep:#06080A;
  --radial-1:#1B2129; --radial-2:#151A21;
  --glow-1:#4A5666; --glow-1b:#141920; --glow-2:#7C8B9E; --glow-2b:#1A2028; --glow-3:#39434F; --glow-3b:#0C1014;
  --accent:#AFC4DA; --accent-2:#D4E0EC; --accent-rgb:175,196,218; --ink:#EFF2F5; --dim:#93A0AF; --faint:#65707D; }
html[data-theme="concierge"] { --btn-1:#E8CB93; --btn-2:#D4AF6A; --btn-3:#A9823F; --btn-ink:#1A1408; --h1-2:#E8CB93; --bg-0:#0D0B08; --bg-1:#17140D; --bg-deep:#080706;
  --radial-1:#292115; --radial-2:#201A11;
  --glow-1:#8A6D35; --glow-1b:#241C0E; --glow-2:#5C4B28; --glow-2b:#17130A; --glow-3:#6E5B2C; --glow-3b:#100D07;
  --accent:#D4AF6A; --accent-2:#E8CB93; --accent-rgb:212,175,106; --ink:#F4EFE5; --dim:#A99D84; --faint:#7A7160; }
html[data-theme="fairway"] { --btn-1:#9BD96A; --btn-2:#57C97B; --btn-3:#2E9457; --btn-ink:#06170B; --h1-2:#B7E4A8; --bg-0:#081209; --bg-1:#0E2013; --bg-deep:#050C06;
  --radial-1:#173321; --radial-2:#122A1B;
  --glow-1:#2E7D4F; --glow-1b:#0E2416; --glow-2:#8A9E34; --glow-2b:#20260E; --glow-3:#1F6B44; --glow-3b:#081209;
  --accent:#57C97B; --accent-2:#9BD96A; --accent-rgb:87,201,123; --ink:#EDF4EA; --dim:#93AB90; --faint:#657D64; }
html[data-theme="harbor"] { --btn-1:#7ADEDF; --btn-2:#35C4C8; --btn-3:#1D8F97; --btn-ink:#04191A; --h1-2:#A5E6E8; --bg-0:#071417; --bg-1:#0C2228; --bg-deep:#040C0F;
  --radial-1:#123640; --radial-2:#0E2B34;
  --glow-1:#1E7D8C; --glow-1b:#0B2227; --glow-2:#37B6C4; --glow-2b:#0D2A2E; --glow-3:#16606E; --glow-3b:#061417;
  --accent:#35C4C8; --accent-2:#7ADEDF; --accent-rgb:53,196,200; --ink:#EAF4F5; --dim:#8CACB2; --faint:#5F7D83; }
html[data-theme="daylight"] { --btn-1:#1B3FA6; --btn-2:#1B3FA6; --btn-3:#15338A; --btn-ink:#FFFFFF; --h1-1:#17191E; --h1-2:#1B3FA6; --bg-0:#F3F2EE; --bg-1:#EDECE7; --bg-deep:#E9E7E1;
  --radial-1:#D6E4F4; --radial-2:#DEE9F5;
  --glow-1:#9CC4EC; --glow-1b:#C9DDF3; --glow-2:#A8DCEC; --glow-2b:#D3EAF3; --glow-3:#8FB4E4; --glow-3b:#DAE6F4;
  --accent:#1D6FE0; --accent-2:#1592C4; --accent-rgb:29,111,224;
  --ink:#16202B; --dim:#5A7089; --faint:#8195AA;
  --line: rgba(18,32,48,.14); --line-2: rgba(18,32,48,.22); --glass: rgba(255,255,255,.6); }

/* Polish layer (1.51.0) — sentence-case labels, a solid button, softer field */
.field > span { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 500; }
.field input { border-radius: 11px; border-color: transparent; background: rgba(255,255,255,.07); }
.field input:focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 59,158,255),.35); border-color: transparent; }
.btn.primary { background: var(--btn-2); box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px -10px var(--btn-2); }
.btn.ghost { border-color: rgba(255,255,255,.12); border-radius: 11px; }

/* ---------- photo background (a skyline behind the sign-in) ----------
   The photo sits under the aurora; a navy wash keeps the card and the
   wordmark readable and pulls the image toward the brand palette. */
:root { --login-bg: url('/img/login-bg-fb427c13.jpg'); --login-pos: right 45%; --login-darken: .30; --login-blur: 0px; }
body.has-photo .aurora { background:
  linear-gradient(180deg, rgba(8,20,36,var(--login-darken)) 0%, rgba(8,20,36,calc(var(--login-darken) * .4)) 45%, rgba(8,20,36,calc(var(--login-darken) + .25)) 100%),
  var(--login-bg) var(--login-pos) / cover no-repeat; }
body.has-photo .aurora::after { content: ''; position: absolute; inset: -20px; backdrop-filter: blur(var(--login-blur)); -webkit-backdrop-filter: blur(var(--login-blur)); pointer-events: none; }
body.has-photo.blur-0 .aurora::after { display: none; }
body.has-photo .aurora .blob { opacity: .10; }
body.has-photo .aurora .grid { opacity: .22; }
body.has-photo .pitch .logo.hero { filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); }
body.has-photo .card { background: linear-gradient(180deg, rgba(10,22,38,.86), rgba(10,22,38,.76)); border-color: rgba(255,255,255,.14); }
/* A photo is a dark surface whatever the theme: the card keeps the night palette on it. */
html[data-theme="daylight"] body.has-photo { --ink:#E9F0F8; --dim:#A9BCD0; --faint:#7C92AA; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.18); --glass: rgba(255,255,255,.05); --h1-1:#FFFFFF; --h1-2:#9ED6FF; --accent:#3B9EFF; --accent-rgb:59,158,255; --btn-2:#2D7FF9; --btn-ink:#FFFFFF; }
body.has-photo .field input { background: rgba(255,255,255,.09); color: var(--ink); }
body.has-photo .foot, body.has-photo .legal, body.has-photo .copy { color: #B9C8D8; }
body.has-photo .foot a, body.has-photo .legal a { color: #D7E4F2; }
body.has-photo .madeby, body.has-photo .madeby .legalline { color: #C3D2E2; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
body.has-photo .madeby .legalline a { color: #E4EEF8; border-bottom-color: #9FB4CA; }
/* With the skyline: everything lives in one left-hand column — wordmark above
   the sign-in card — so the right two-thirds of the picture stay in view. */
@media (min-width: 1021px) {
  body.has-photo .shell { grid-template-columns: minmax(22.5rem, 28.75rem); justify-content: start; align-content: center; gap: 1.375rem; max-width: none; padding-left: clamp(2rem, 6vw, 6.875rem); }
  body.has-photo.card-right .shell { justify-content: end; padding-left: clamp(1.5rem, 5vw, 4.75rem); padding-right: clamp(2rem, 6vw, 6.875rem); }
  body.has-photo.card-center .shell { justify-content: center; }
  body.has-photo .pitch { justify-content: flex-start; }
  body.has-photo .pitch .logo.hero { width: 100%; max-width: 28.75rem; }
  body.has-photo .panel { width: 100%; }
}
/* the customer's own logo, above the sign-in card, when the company wants it there */
.cust-logo { display: none; max-width: 100%; margin: 0 0 0.5rem; }
.cust-logo img { max-height: 64px; max-width: 20rem; object-fit: contain; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
body.has-cust-logo .cust-logo { display: block; }
/* an optional welcome line under the wordmark */
.login-tag { display: none; color: #DCE7F3; font-size: 0.9688rem; line-height: 1.5; margin: -0.375rem 0 0.375rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); max-width: 28.75rem; }
body.has-tag .login-tag { display: block; }


/* ---- Access notice ---------------------------------------------------- */
.notice-gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(4, 10, 20, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.notice-gate[hidden] { display: none; }
.notice-card { width: min(35rem, 100%); max-height: calc(100vh - 48px); overflow: auto; background: linear-gradient(180deg, rgba(14,26,44,.98), rgba(10,20,36,.98)); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 1.625rem 1.75rem 1.5rem; box-shadow: 0 30px 80px rgba(0,0,0,.6); color: #E9F0F8; }
.notice-kicker { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: #9FB4CA; margin-bottom: 0.375rem; }
.notice-card h2 { margin: 0 0 0.75rem; font-size: 1.375rem; color: #FFFFFF; }
.notice-body p { margin: 0 0 0.625rem; font-size: 0.875rem; line-height: 1.55; color: #D2DEEB; }
.notice-body p:last-child { margin-bottom: 0; }
.notice-card .btn { margin-top: 1.125rem; width: 100%; }
body.gated .shell { filter: blur(2px); pointer-events: none; user-select: none; }
.notice-inline { margin: 0 0 0.875rem; padding: 0.75rem 0.875rem; border-radius: 12px; border: 1px solid rgba(255, 196, 92, .35); background: rgba(255, 196, 92, .08); }
.notice-inline[hidden] { display: none; }
.notice-inline h3 { margin: 0 0 0.375rem; font-size: 0.8125rem; letter-spacing: .04em; text-transform: uppercase; color: #FFD27A; }
.notice-inline .notice-body { max-height: 150px; overflow: auto; }
.notice-inline .notice-body p { font-size: 0.7812rem; line-height: 1.5; margin: 0 0 0.5rem; color: var(--dim, #C7D4E2); }
.notice-inline .notice-body p:last-child { margin-bottom: 0; }