/* ══════════════════════════════════════════════════════════════════════════
   Site chrome — everything that is NOT the original mockup.

   portal.css is the documentation design system, lifted unchanged from the
   single-file mockup. This file adds what turning that document into a SITE
   needs: the top tab bar, the home hero, the contact form, and the offsets
   that let the reference page's existing sticky rail live under a global bar.

   Kept separate on purpose — portal.css can be diffed against the mockup it
   came from, and this file is where site-level decisions are visible.
   ══════════════════════════════════════════════════════════════════════════ */

:root{ --sitebar-h:58px; }

/* ───────────────────────────── the tab bar ───────────────────────────────
   Dark in BOTH themes. The bar is brand furniture rather than page surface, so
   it holds its colour when the docs beneath it go light — the same call the
   reference site this follows makes, and it keeps the mark legible against one
   background instead of two. */
.sitebar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:22px;
  height:var(--sitebar-h); padding:0 26px;
  background:#0b0e15; border-bottom:1px solid #1c2230;
  color:#eef1f7;
}
.sitebar-mark{
  display:flex; align-items:center; gap:11px;
  color:#fff; text-decoration:none; flex:none;
}
.sitebar-mark .logo{display:block; width:96px; height:15px; color:currentColor}
.sitebar-mark span{
  font-size:12px; font-weight:600; letter-spacing:.085em; text-transform:uppercase;
  color:#8f9bb5; padding-left:11px; border-left:1px solid #262e40; line-height:1;
}
.sitebar-tabs{display:flex; align-items:center; gap:4px; margin-left:auto}
.sitebar-tabs a{
  display:block; padding:8px 13px; border-radius:var(--radius-md);
  font-size:12.5px; font-weight:600; letter-spacing:.045em; text-transform:uppercase;
  color:#9aa5bd; text-decoration:none; white-space:nowrap;
  transition:color .12s ease, background-color .12s ease;
}
.sitebar-tabs a:hover{color:#fff; background:#161c28}
.sitebar-tabs a[aria-current="page"]{color:#fff; background:#1b2333}
.sitebar-toggle{
  display:none; margin-left:auto; background:none; border:0; color:#cfd6e6;
  padding:6px; border-radius:var(--radius-sm); cursor:pointer;
}

/* The reference page keeps the mockup's sticky rail and sticky page header;
   both must now start BELOW the global bar rather than at the viewport top. */
.has-rail .side{top:var(--sitebar-h); height:calc(100vh - var(--sitebar-h))}
.has-rail .top{top:var(--sitebar-h)}
.has-rail .doc .right{top:calc(var(--sitebar-h) + var(--top-h)); max-height:calc(100vh - var(--sitebar-h) - var(--top-h))}
.has-rail .shell{min-height:calc(100vh - var(--sitebar-h))}

@media (max-width:900px){
  .sitebar{flex-wrap:wrap; height:auto; padding:10px 16px; gap:10px}
  .sitebar-toggle{display:block}
  .sitebar-tabs{
    display:none; width:100%; margin-left:0; flex-direction:column;
    align-items:stretch; gap:2px; padding-bottom:6px;
  }
  .sitebar-tabs.open{display:flex}
  .has-rail .side,.has-rail .top,.has-rail .doc .right{top:0}
  .has-rail .side{height:auto}
}

/* ───────────────────────────── generic page ─────────────────────────────── */
.page{max-width:960px; margin:0 auto; padding:56px 40px 96px}
.page .lede{margin-bottom:28px}
@media (max-width:720px){ .page{padding:40px 22px 72px} }

/* ───────────────────────────────── home ─────────────────────────────────── */
.hero{
  position:relative; display:grid; place-items:center;
  min-height:min(620px, calc(100vh - var(--sitebar-h)));
  background:#0b0e15; overflow:hidden; text-align:center; padding:72px 26px;
}
/* The beacon from the product's sign-in panel. Decorative, so it carries an empty
   alt and is not announced — the headline over it is the content.
   Only the DARK variant ships: the hero is dark in both themes, so the light one
   would never be shown. Framed low (object-position) so the beacon sits BELOW the
   headline rather than behind it. */
.hero-art{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 78%; opacity:.92;
}
/* Legible text over an image, without washing the image out: the scrim is strongest
   across the headline band and clears toward the bottom, where the beacon is. */
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 62% at 50% 26%, rgba(11,14,21,.86) 0%, rgba(11,14,21,.55) 46%, rgba(11,14,21,0) 78%),
    linear-gradient(180deg, rgba(11,14,21,.55) 0%, rgba(11,14,21,0) 40%, rgba(11,14,21,.35) 82%, #0b0e15 100%);
}
.hero-in{position:relative; z-index:1; max-width:760px; margin-bottom:auto; padding-top:6vh}
.hero h1{
  color:#fff; font-size:clamp(30px,5.2vw,52px); line-height:1.08;
  letter-spacing:-.032em; font-weight:680; text-wrap:balance;
}
.hero p{
  color:#c3ccdf; font-size:clamp(15px,1.8vw,18.5px); line-height:1.6;
  margin:20px auto 0; max-width:60ch; text-wrap:pretty;
}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px}
.hero-cta a{
  display:inline-flex; align-items:center; padding:11px 21px; border-radius:var(--radius-md);
  font-size:14px; font-weight:600; text-decoration:none; transition:filter .12s ease;
}
.hero-cta a:hover{filter:brightness(1.1)}
.hero-cta .go{background:var(--color-blue); color:#fff}
.hero-cta .alt{background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}

.tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:18px; max-width:1120px; margin:0 auto; padding:64px 40px 88px;
}
.tile{
  display:block; padding:24px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--color-border);
  box-shadow:var(--shadow-sm); text-decoration:none; color:inherit;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.tile:hover{border-color:var(--border-strong); box-shadow:var(--shadow); transform:translateY(-2px)}
.tile h2{font-size:16px; font-weight:640; letter-spacing:-.012em; margin:0 0 7px}
.tile p{color:var(--color-grey); font-size:13.8px; line-height:1.58; margin:0}
.tile .go{
  display:inline-block; margin-top:13px; font-size:13px; font-weight:600; color:var(--color-blue);
}
@media (max-width:720px){ .tiles{padding:44px 22px 64px} }

/* ──────────────────────────── contact form ──────────────────────────────── */
.form{max-width:620px; display:grid; gap:17px}
.field{display:grid; gap:6px}
.field label{font-size:13px; font-weight:600; letter-spacing:-.005em}
.field .hint{font-size:12.5px; color:var(--color-grey); line-height:1.5}
.field input,.field textarea,.field select{
  font:inherit; font-size:14px; color:var(--text);
  background:var(--card); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); padding:10px 12px; width:100%;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.field textarea{min-height:158px; resize:vertical; line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--color-blue); box-shadow:0 0 0 3px var(--color-blue-20);
}
/* :user-invalid, not :invalid — a required field is "invalid" the moment the page
   loads, so plain :invalid paints every empty box red before anyone has typed. The
   old guard for that was :not(:placeholder-shown), which only worked because the
   fields HAD placeholders; they no longer do. :user-invalid fires only after the
   person has interacted with the field or tried to submit, which is the behaviour
   the guard was approximating anyway. */
.field input:user-invalid,.field textarea:user-invalid{
  border-color:var(--color-red);
}
/* Honeypot: a real field to a bot, gone for everyone else. Not display:none —
   some bots skip hidden inputs, and this one is meant to be filled in. */
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px}
.form-note{font-size:12.5px; color:var(--color-grey); line-height:1.5; max-width:46ch}
.form-msg{
  display:none; padding:13px 15px; border-radius:var(--radius-md); font-size:13.8px; line-height:1.55;
}
.form-msg.on{display:block}
.form-msg.ok{background:var(--color-green-10); color:var(--color-green); border:1px solid var(--color-green)}
.form-msg.bad{background:var(--color-red-15); color:var(--color-red); border:1px solid var(--color-red)}
button[disabled]{opacity:.55; cursor:not-allowed}

/* ─────────────────── pages that carry mockup panels, no rail ─────────────────
   Guides, Event Catalog and Status reuse panels built for the reference page's
   two-column `.doc` grid. Without the rail they have the full width, so cap the
   measure and let the panels lay themselves out inside it. */
.shell-plain{max-width:1500px; margin:0 auto}
.shell-plain .doc{max-width:none}
.shell-plain > .panel + .panel{border-top:1px solid var(--color-border)}

/* The mockup's .btn was only ever a <button>. Some of those actions are now links to
   another page (Request access, How webhooks work), and a link brings an underline and
   the visited colour with it. */
a.btn{text-decoration:none; color:var(--text)}
a.btn.primary{color:#fff}
a.btn:hover{text-decoration:none}