/* ===========================================================================
   cRUD Webinar: the Coming Soon page.
   Self-contained. The rules are the full website's own (site.css,
   sections.css) by way of The cRUD Company's holding page, trimmed to what
   this one page uses: the white shell, the pale teal opening panel, the
   highlighted phrase and the primary button. No script, no animation.
   Fonts are the full website's files, at the same addresses.
   =========================================================================== */

/* Inter, self-hosted: one variable file per character set covers weights 400 to 700. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --teal-black:          #081817;
  --teal-black-hover:    #0F302E;
  --teal-black-pressed:  #030C0B;
  --identity-strong:     #214F55;
  --identity-on-dark:    #9CC9C5;
  --white:               #FFFFFF;

  --text-primary:        #081817;
  --text-secondary:      #52606D;
  --text-muted:          #5C6672;

  --radius-button:       10px;
  --radius-banner:       32px;

  --shadow-cta-light:        0 2px 3px rgba(8,24,23,0.10), 0 6px 14px -4px rgba(8,24,23,0.18);
  --shadow-cta-light-hover:  0 3px 5px rgba(8,24,23,0.12), 0 12px 22px -6px rgba(8,24,23,0.24);
  --shadow-cta-light-active: 0 1px 2px rgba(8,24,23,0.14);
  --shadow-frame-light:      inset 0 0 26px rgba(8,24,23,0.13);

  --t-fast:     120ms;
  --t-standard: 180ms;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);

  /* the shell: page inset, border thickness and outer radius */
  --frame:        16px;
  --frame-border: 32px;
  --frame-radius: 64px;

  /* one viewport less the shell band top and bottom; dvh follows mobile
     browser chrome, the vh line is the fallback for engines without dvh */
  --view: calc(100vh - (var(--frame) * 2));
  --view: calc(100dvh - (var(--frame) * 2));

  --open-pad-y: clamp(28px, 4vh, 64px);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* the shell steps down in thickness on smaller screens, as on the full website */
@media (max-width: 1023px) {
  :root { --frame: 12px; --frame-border: 24px; --frame-radius: 48px; }
}
@media (max-width: 767px) {
  :root { --frame: 8px; --frame-border: 16px; --frame-radius: 36px; }
}
@media (max-width: 429px) {
  :root { --frame: 6px; --frame-border: 12px; --frame-radius: 28px; }
}

/* =========================== base ======================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--white); }

body {
  margin: 0;
  padding: var(--frame);
  background: var(--white);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(48, 111, 117, 0.38);
}

/* ===================== the page shell ===================================== */

.page-frame {
  position: fixed;
  inset: calc(var(--frame) * -1);
  border: var(--frame-border) solid var(--white);
  border-radius: var(--frame-radius);
  pointer-events: none;
  z-index: 40;
  box-shadow: var(--shadow-frame-light);
}

/* iOS Safari moves its visual viewport under the status bar and the floating
   toolbar, so fixed top and bottom edges cut across the page. On narrow WebKit
   touch layouts the shell keeps only its side rim. */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) and (max-width: 1023px) and (max-height: 1023px) {
    .page-frame {
      border-top-width: 0;
      border-bottom-width: 0;
      border-radius: 0;
    }
  }
}

/* ===================== the opening panel ================================== */
/* White centre easing to pale brand teal. min-height, never height, so zoom,
   larger text or a short screen lets the page grow and scroll. */

.hold {
  position: relative;
  min-height: var(--view);
  display: flex; flex-direction: column;
  background-color: #D6E7E5;
  background-image: radial-gradient(
    120% 90% at 50% 45%,
    #FFFFFF 0%,
    #F3F8F7 42%,
    #D6E7E5 74%,
    #BCDAD7 100%
  );
  border-radius: var(--radius-banner);
  padding:
    calc(var(--open-pad-y) + env(safe-area-inset-top, 0px))
    calc(24px + env(safe-area-inset-right, 0px))
    calc(clamp(16px, 3vh, 32px) + env(safe-area-inset-bottom, 0px))
    calc(24px + env(safe-area-inset-left, 0px));
}

.hold__body {
  position: relative; z-index: 1;
  margin: auto;
  width: 100%; max-width: 60rem;   /* the headline sets in two lines on a desktop, as on the home page */
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.hold__logo {
  width: 104px; height: 52px; object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  margin-bottom: clamp(16px, 4vh, 40px);
}

.hold__eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--identity-strong); margin-bottom: 14px;
}

.hold h1 {
  font-size: clamp(2.125rem, 1.5rem + 3.4vw, 3.75rem); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
}

.hold__text {
  margin-top: 18px; max-width: 37rem;
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem); line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: balance;
}

.hold__cta { margin-top: clamp(22px, 4vh, 34px); max-width: 100%; }

.hold__foot {
  position: relative; z-index: 1;
  margin-top: clamp(20px, 4vh, 32px);
  text-align: center;
  font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted);
}

/* ============ the highlighted phrase ====================================== */

.hl {
  display: inline-block;
  background: var(--identity-on-dark);
  color: var(--teal-black);
  border-radius: 14px;
  padding: 0 14px;
  margin: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
:where(*):has(> .hl) { isolation: isolate; }
.hl { position: relative; z-index: -1; }
.hl__t { position: relative; z-index: 1; }
.hl--flow { display: inline; padding: 0 10px; margin: 0; }
.hl-end { white-space: nowrap; }
.hl-end .hl { white-space: normal; }

/* =========================== button ====================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; max-width: 100%;
  font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  padding: 14px 22px; min-height: 46px;
  border: 1px solid transparent; border-radius: var(--radius-button);
  cursor: pointer; text-decoration: none; overflow-wrap: anywhere;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-standard) var(--ease),
              transform var(--t-standard) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn-lg { font-size: 1rem; padding: 17px 28px; min-height: 54px; }

.btn-primary {
  background: var(--teal-black); color: var(--white);
  box-shadow: var(--shadow-cta-light);
}
.btn-primary:hover  { background: var(--teal-black-hover); box-shadow: var(--shadow-cta-light-hover); transform: translateY(-1px); }
.btn-primary:active { background: var(--teal-black-pressed); box-shadow: var(--shadow-cta-light-active); transform: translateY(1px); }
/* keeps the raised shadow and adds the soft brand ring for keyboard focus */
.btn-primary:focus-visible { box-shadow: var(--shadow-cta-light), 0 0 0 3px rgba(48, 111, 117, 0.38); }

/* a very narrow screen gives the address a little less padding */
@media (max-width: 359px) {
  .hold__cta .btn { font-size: 0.9375rem; padding-inline: 18px; }
}

/* short screens such as a phone held in landscape: the same content, set closer
   together so it still fits one screen; anything shorter simply scrolls */
@media (max-height: 500px) {
  .hold { padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .hold__logo { width: 80px; height: 40px; margin-bottom: 8px; }
  .hold__eyebrow { margin-bottom: 6px; }
  .hold h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); }
  .hold__text { margin-top: 10px; }
  .hold__cta { margin-top: 14px; }
  .hold__foot { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn-primary:hover, .btn-primary:active { transform: none; }
}