/* The holding page at portal.osianic.com, in the design of osianic.com (FD-0055, FD-0056). */
:root {
  --ink: #0A2A33;
  --deep-teal: #0B4F5C;
  --teal: #1D8A89;
  --aqua: #2EC4B6;
  --page: #F0F6F5;
  --muted: #47676D;
  --display: "Century Gothic", "Futura", "Avenir Next", "URW Gothic", sans-serif;
  --body: "Aptos", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Aptos Mono", "Cascadia Code", "Consolas", "SF Mono", "Menlo", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem;
  font-family: var(--body); line-height: 1.65; color: var(--ink); background-color: var(--page);
  background-image: linear-gradient(rgba(29, 138, 137, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 138, 137, 0.09) 1px, transparent 1px);
  background-size: 3rem 3rem; background-position: center;
}
main {
  width: 100%; max-width: 36rem; background: #fff; border-radius: 1rem; padding: 2.25rem 2rem 2rem; position: relative;
  box-shadow: 0 1px 0 rgba(10, 42, 51, 0.04), 0 1.75rem 3rem -1.25rem rgba(11, 79, 92, 0.35), 0 0 0 1px rgba(11, 79, 92, 0.06);
}
main::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 1rem 1rem 0 0;
  background: linear-gradient(90deg, var(--deep-teal), var(--aqua));
}
.brand { display: inline-flex; margin-bottom: 1.75rem; }
.eyebrow { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin: 0 0 0.75rem; }
h1 { font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1rem; }
p { margin: 0 0 1rem; }
.lede { font-size: 1.1rem; color: var(--muted); }
a { color: var(--deep-teal); text-decoration-color: var(--aqua); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--deep-teal); outline-offset: 3px; }
.button {
  display: inline-block; padding: 0.85rem 1.4rem; border-radius: 999px; background: var(--deep-teal); color: #fff;
  font-weight: 700; text-decoration: none; overflow-wrap: break-word;
}
.button:hover { background: var(--ink); color: #fff; }
.button:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.back { margin: 1.25rem 0 0; font-size: 0.9rem; }
@media (max-width: 30rem) {
  body { padding: 1rem 0.9rem; }
  main { padding: 2rem 1.25rem 1.5rem; }
  .button { border-radius: 0.75rem; padding: 0.8rem 1.1rem; font-size: 0.95rem; }
}