/* early-access.css — the early-access page: one section with the heading on the
   left and the name/email form with its feedback panels on the right. Header, nav
   and footer are chrome.css's. The form and panel rules are the careers form's
   (careers.css), copied rather than shared because per-page sheets are the rule
   here. Light-only, one breakpoint at 980px (700px for the form grid). */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-display);-webkit-font-smoothing:antialiased;}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--sel-bg);color:var(--sel-ink)}
  /* Author display rules on .form and .panel would otherwise beat the UA's [hidden]. */
  [hidden]{display:none!important}

  .mono{font-family:var(--font-mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-size:11px;color:var(--ink-2)}
  .container{max-width:1480px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

  .btn{
    display:inline-flex;align-items:center;gap:14px;
    background:var(--btn);color:var(--btn-ink);padding:18px 24px;border-radius:0;
    font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:-.01em;
    border:1px solid transparent;cursor:pointer;
    transition:background .2s ease,border-color .2s ease;
  }
  .btn:hover{background:var(--btn-hover)}
  .btn .arr{width:18px;height:10px;position:relative}
  .btn .arr::before{content:"";position:absolute;left:0;right:4px;top:50%;height:1.5px;background:currentColor}
  .btn .arr::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)}
  .btn.is-busy{opacity:.65;cursor:progress}

  /* ---------- request ---------- */
  .request{padding:112px 0 128px}
  .request:focus{outline:none}
  .request .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,88px);align-items:start}
  .request h1{font-size:clamp(44px,5.6vw,84px);line-height:.96;letter-spacing:-.04em;font-weight:500;margin:0;text-wrap:balance;max-width:11ch}
  .request .lede{font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--ink-2);margin:28px 0 0;max-width:44ch}
  .request .body{max-width:640px;padding-top:6px}

  /* Feedback panels. Pre-rendered so the no-JS path works: the function answers a
     native POST with a 303 to /early-access#requested or #error-<code>, and
     :target shows the matching panel. early-access.js uses .show/.hide instead;
     .hide is declared last so a stale :target from an earlier attempt cannot
     resurface. A request that went through needs no second form under it. */
  .panel{display:none;scroll-margin-top:88px}
  .panel:target,.panel.show{display:block}
  .panel.hide{display:none}
  #requested:target ~ .form{display:none}
  .panel{border:1px solid var(--line);border-left:3px solid var(--ink);background:var(--bg-2);padding:22px 26px;margin-bottom:32px}
  .panel.error{border-left-color:var(--red-deep)}
  .panel .mono{display:block;margin-bottom:10px}
  .panel.error .mono{color:var(--red-deep)}
  /* The success text carries the visitor's email, one unbreakable word that would
     otherwise widen a phone's page past the viewport. */
  .panel p{margin:0;font-size:16px;line-height:1.55;color:var(--ink);max-width:60ch;overflow-wrap:anywhere}
  .panel a{color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}
  .panel a:hover{color:var(--ink)}
  .panel:focus{outline:2px solid var(--ink);outline-offset:3px}

  /* Form */
  .form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
  .field{display:flex;flex-direction:column;gap:8px;min-width:0}
  .field label{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
  .field input{
    font:inherit;font-size:15px;line-height:1.4;color:var(--ink);
    background:var(--bg);border:1px solid var(--line-strong);border-radius:0;
    padding:14px 16px;width:100%;margin:0;
    transition:border-color .15s;
  }
  .field input:hover{border-color:var(--ink-2)}
  .field input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
  .form .actions{grid-column:1/-1;margin-top:6px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .fine{font-size:13px;line-height:1.55;color:var(--mute);margin:24px 0 0;max-width:62ch}
  .fine a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
  .fine a:hover{color:var(--red-deep)}

  @media (max-width: 980px){
    .request{padding:72px 0 96px}
    .request .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
    .request .body{padding-top:0}
  }
  @media (max-width: 700px){
    .form{grid-template-columns:1fr}
    .form .actions .btn{width:100%;justify-content:space-between}
  }