/* ============================================================
   ExamCrack - welcome-3 (Sep 15 2026)

   A preview page, not the live landing page. Built on its own file set
   (welcome-3.html + this stylesheet + js/welcome-3.js) so the live page is
   untouched while it is reviewed.

   The design brief came from a reference the owner sent (antigravity.google):
   a light page, one very large centred headline, generous whitespace, quiet
   borders, pill buttons, and a drifting particle field behind the hero. The
   layout ideas are borrowed; the assets, copy and fonts are ours. Nothing here
   is copied from that site.

   Every text colour below was measured against white before being written.
   Ratios are noted inline. Nothing under 4.5:1 ships.
   ============================================================ */

:root {
  /* text: measured on #ffffff */
  --ink:    #0d1117;   /* 18.9:1 */
  --ink-2:  #334155;   /* 9.59:1 */
  --ink-3:  #55606e;   /* 6.60:1 */
  --ink-4:  #6b7280;   /* 4.83:1 - the floor, never used below 12px */

  /* surface */
  --paper:  #ffffff;
  --wash:   #f7f9fc;
  --line:   rgba(13, 17, 23, 0.08);
  --line-2: rgba(13, 17, 23, 0.14);

  /* brand */
  --brand:      #4f46e5;   /* 6.29:1 */
  --brand-dark: #4338ca;   /* 7.67:1, for hover */
  --brand-soft: #eef2ff;

  /* the drifting field. Three hues here is what turns the flat network into the
     multi-colour drift; a page that sets only --wn-net keeps a single colour. */
  --wn-net:   #2f80ed;
  --wn-net-2: #6d5ef6;
  --wn-net-3: #06b6d4;

  --radius:    18px;
  --radius-sm: 12px;
  --max:       1140px;
  --shadow-sm: 0 1px 2px rgba(13, 17, 23, 0.04), 0 2px 8px rgba(13, 17, 23, 0.04);
  --shadow-lg: 0 2px 6px rgba(13, 17, 23, 0.04), 0 24px 60px rgba(13, 17, 23, 0.10);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* the drifting field and everything above it */
.wrap { position: relative; z-index: 1; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background-color: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip:focus { left: 0; }

/* ================= header ================= */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.site-head.is-stuck { border-bottom-color: var(--line); }

.head-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
/* When a logged-in admin's org is branded, welcome-branding.js replaces the
   letter in the mark with the org's logo image and swaps the name text. Without
   this rule that image renders at its intrinsic size and blows the header apart.
   welcome-branding.js looks for .logo-mark and .logo-text specifically. */
.brand-mark img,
.brand-mark .welcome-brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.brand-mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background-image: linear-gradient(135deg, #2f80ed 0%, #6d5ef6 100%);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.head-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.head-nav a {
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
}
.head-nav a:hover { color: var(--ink); }

.head-cta { display: flex; align-items: center; gap: 10px; }
.head-cta .linkish {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.head-cta .linkish:hover { color: var(--ink); }

/* ================= buttons ================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background-color: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.24), 0 8px 22px rgba(79, 70, 229, 0.20);
}
.btn-primary:hover { background-color: var(--brand-dark); color: #fff; }

.btn-quiet {
  background-color: var(--paper);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn-quiet:hover { background-color: var(--paper); color: var(--ink); border-color: rgba(13,17,23,0.26); }

.btn-sm { padding: 10px 20px; font-size: 14.5px; }
.btn-lg { padding: 16px 32px; font-size: 16.5px; }
.btn-block { width: 100%; }

/* ================= hero ================= */

.hero {
  position: relative;
  padding: 96px 0 76px;
  text-align: center;
  overflow: visible;
}

/* The field ran straight through the words, which is the one thing the design
   review flagged hardest. This soft mask sits above the canvas and below the
   hero text, so the drift is still visible either side of the headline while
   the words themselves sit on near-white. The wrap is a stacking context, so
   a negative z-index here lands above the canvas and under the copy. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(ellipse 76% 68% at 50% 40%,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.90) 38%,
    rgba(255, 255, 255, 0.58) 60%,
    rgba(255, 255, 255, 0) 86%);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 8px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 30px;
}
.hero-eyebrow .dot {
  width: 20px; height: 20px;
  border-radius: 999px;
  background-color: var(--brand-soft);
  display: grid;
  place-items: center;
  font-size: 11px;
}
.hero-eyebrow b { color: var(--ink); font-weight: 600; }

.hero h1 {
  margin: 0 auto;
  max-width: 23ch;
  color: var(--ink);
  font-size: clamp(38px, 6.1vw, 76px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.038em;
}
/* The setup is the quiet half and the promise is the loud half. The first draft
   had it the other way round, which buried the sentence that actually sells. */
.hero h1 .setup {
  display: block;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-size: 0.72em;
  line-height: 1.18;
}
.hero h1 .payoff { display: block; }

.hero-lede {
  margin: 26px auto 0;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

.hero-lede-2 { margin-top: 11px; }

.hero-note {
  margin: 27px 0 0;
  color: var(--ink-3);
  font-size: 13.5px;
}

/* the floating capability rail, curved the way a toolbar hangs in space */
.rail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 54px auto 0;
  max-width: 900px;
}
.rail span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.03);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* The capability rail sits in its own quiet band under the hero, rather than as
   a sixth centred layer inside it. */
.railband {
  padding: 34px 0 78px;
  position: relative;
}
.railband::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
}

/* ================= sections ================= */

.section { padding: 110px 0; position: relative; }
.section--wash { background-color: var(--wash); }
.section--tight { padding: 84px 0; }

.sec-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }

.sec-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sec-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(27px, 3.5vw, 43px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.032em;
}

.sec-head p {
  margin: 18px 0 0;
  color: var(--ink-2);
  font-size: 17px;
}

/* ================= product frames ================= */

.frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 15px;
  background-color: var(--wash);
  border-bottom: 1px solid var(--line);
}
.frame-bar i {
  width: 10px; height: 10px;
  border-radius: 999px;
  background-color: rgba(13, 17, 23, 0.14);
}
.frame-bar .addr {
  margin-left: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-4);
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 12px;
}
.frame img { width: 100%; height: auto; }

.figcap {
  margin: 18px auto 0;
  max-width: 60ch;
  text-align: center;
  color: var(--ink-3);
  font-size: 13.5px;
}

/* ================= split rows ================= */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split--flip .split-media { order: 2; }

.split-copy h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(23px, 2.4vw, 31px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.028em;
}
.split-copy > p {
  margin: 0 0 22px;
  color: var(--ink-2);
  font-size: 16.5px;
}

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--ink-2);
  font-size: 15.5px;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 16px;
  border-radius: 999px;
  background-color: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.22);
}
.ticks li::after {
  content: '';
  position: absolute;
  left: 5px; top: 12.5px;
  width: 6px; height: 3px;
  border-left: 1.6px solid var(--brand);
  border-bottom: 1.6px solid var(--brand);
  rotate: -45deg;
}

/* The paper-building section is a single centred column. It briefly carried a
   dark terminal-style block, which was removed: it implied a command-line import
   tool that does not exist, and marketing on this site claims only what is
   built. */
.build {
  max-width: 620px;
  margin: 0 auto;
}
.build h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(23px, 2.4vw, 31px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.028em;
}
.build > p { margin: 0 0 22px; color: var(--ink-2); font-size: 16.5px; }
.build .btn { margin-top: 26px; }

/* ================= video ================= */

.video-shell {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--wash);
  box-shadow: var(--shadow-lg);
}
.video-shell video {
  width: 100%;
  height: auto;
  display: block;
  background-color: var(--wash);
}
/* ================= stat band ================= */

.band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.band div {
  background-color: var(--paper);
  padding: 30px 24px;
  text-align: center;
}
.band b {
  display: block;
  color: var(--ink);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.band small {
  display: block;
  margin-top: 7px;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ================= cards ================= */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--paper);
  padding: 30px 28px;
  transition: transform 0.22s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}
.card .ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background-color: var(--brand-soft);
  color: var(--brand);
}
.card h3 {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 18.5px;
  font-weight: 650;
  letter-spacing: -0.018em;
}
.card p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ================= closing ================= */

.close {
  position: relative;
  text-align: center;
  padding: 118px 0 108px;
}
.close h2 {
  margin: 0 auto;
  max-width: 20ch;
  color: var(--ink);
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.034em;
}
.close p {
  margin: 20px auto 0;
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 17.5px;
}
.close .hero-actions { margin-top: 32px; }

/* ================= footer ================= */

.site-foot {
  border-top: 1px solid var(--line);
  background-color: var(--paper);
  padding: 48px 0 56px;
  position: relative;
  z-index: 1;
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { color: var(--ink-3); font-size: 14.5px; }
.foot-links a:hover { color: var(--ink); }
.foot-note { color: var(--ink-4); font-size: 13px; }

/* ================= reveal on scroll ================= */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ================= responsive ================= */

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--flip .split-media { order: 0; }
  .cards { grid-template-columns: 1fr 1fr; }
  .band { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .head-nav { display: none; }
  .head-cta { margin-left: auto; }
}

/* On a narrow phone the logo, the Log in link and the pill were competing for
   one row, which the review flagged as mis-tap prone. Log in is still in the
   footer, so the header gives the space to the button. */
@media (max-width: 480px) {
  /* The Log in link stays at EVERY width. An earlier version of this rule hid it
     under 480px to relieve a cramped header, and that removed the only route to
     the sign-in page for anyone on a phone. The header is made to fit instead:
     smaller mark, tighter gaps, narrower pill. The pill keeps its 45px height so
     it is still a comfortable tap target. */
  .head-inner { gap: 10px; }
  .brand { font-size: 15.5px; }
  .brand-mark { width: 24px; height: 24px; font-size: 12px; }
  .head-cta { gap: 9px; }
  /* 6px of vertical padding as well: the link's own box measured 41x23, and 23
     is one pixel under the 24px minimum target size, which is the one a text
     link has to clear on its own. */
  .head-cta .linkish { font-size: 14px; padding: 7px 6px; }
  .head-cta .btn { padding: 14px 16px; font-size: 14.5px; }
}

@media (max-width: 700px) {
  .hero { padding: 64px 0 52px; }
  /* Stacked, the hero fills the screen and the copy runs nearly edge to edge, so
     the field sits right behind the words and reads as smudges rather than as
     texture. Two levers here, because the mask alone was not enough: the field
     itself is backed off on phones, and the mask is much stronger. It still
     shows through plainly in the sections below, where the copy sits in cards
     and narrow columns with room around it.

     Three values were tried and measured before this one, and the reasoning is
     worth keeping because the constraint is structural, not a matter of taste.
     At 0.55 with the strong hero mask the field vanished on phones altogether
     and the design with it. At 0.72 it drew dots visibly through letters in the
     body sections. At 0.34 it still read as lines crossing the text. On a phone
     every section is full width, so the field can never sit beside the copy the
     way it does on a desktop: the only workable setting is quiet enough to read
     as texture rather than as content. Desktop is untouched and keeps the
     full-strength field. */
  .wn-net { opacity: 0.2; }
  .hero::before {
    background-image: radial-gradient(ellipse 132% 118% at 50% 46%,
      rgba(255, 255, 255, 0.985) 0%,
      rgba(255, 255, 255, 0.955) 54%,
      rgba(255, 255, 255, 0.80) 82%,
      rgba(255, 255, 255, 0) 100%);
  }
  .hero h1 { max-width: 100%; }
  .section { padding: 76px 0; }
  .section--tight { padding: 60px 0; }
  .cards { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr 1fr; }
  .band div { padding: 24px 16px; }
  .hero-actions .btn { width: 100%; }
  .rail { margin-top: 38px; }
  .close { padding: 84px 0 76px; }
}

@media (max-width: 380px) {
  .container { padding: 0 18px; }
  .band { grid-template-columns: 1fr; }
}

/* ================= motion preferences ================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }
}