/* ============================================================
 *  IntelX "Cast" system: shared chrome for the public pages
 *  (about, contact, privacy, terms, security, login, register,
 *  reset password, why-intelx, value, switch, the /j/{code} class
 *  join link and the parent consent pages). The landing page,
 *  templates/index.html, is the source of truth and carries its own
 *  copy of these rules inline; when its tokens, buttons, nav or
 *  footer change, change them here too. DESIGN.md documents the
 *  system.
 *
 *  Pages that link this file do NOT load foundations.css: its
 *  element-level button rules (button[type=submit] as an ink pill)
 *  would beat the chunky .btn styles below.
 *
 *  Partials: templates/_publicnav.html, templates/_publicfooter.html
 *  Fonts:    Fredoka (heads) + Nunito (body), linked in each <head>
 *  Art:      /static/img/cast/*.webp, each character on its own tile
 * ============================================================ */
:root {
  --white: #ffffff;
  --ink: #1e2b4f;
  --ink-2: #4a5270;
  --mute: #6b7189;
  --rule: #ebe7e1;
  --rule-2: #dcd7cf;
  --field: #fbfaf8;

  --graphite: #1e2b4f;
  --graphite-2: #283a66;
  --graphite-3: #36497a;

  /* the cast palette: purple leads, every character brings its own tile colour */
  --brand: #7a5cc7;
  --brand-deep: #5b40a6;
  --lavender: #c9b8f2;
  --lavender-light: #f3effc;
  --coral: #f2826f;          /* review stars only */
  --highlight: #ffe45c;      /* text marker and ::selection */
  --tile-cream: #f0ddc3;     /* ink drop */
  --tile-sage: #97b198;      /* brain */
  --tile-sky: #81b0ce;       /* bulb */
  --tile-peach: #f9c1a0;     /* sprout */
  --tile-teal: #76b5b9;      /* pencil */
  --tile-teal-deep: #5a9da1;
  --tile-lav: #d9ccf0;       /* waver */

  /* graded data only */
  --good: #12b76a; --good-text: #0d8a54; --good-bg: #ecfdf3;
  --warn: #f59e0b; --warn-text: #b45309; --warn-bg: #fffaeb;
  --bad: #e24b4a;  --bad-text: #c0392b;  --bad-bg: #fef3f2;

  --head: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --body: 'Nunito', ui-rounded, system-ui, -apple-system, sans-serif;

  --travel: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --container: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--highlight); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 10px; }

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

h2.head {
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 46ch; margin-top: 14px; }
.lede strong { color: var(--ink); font-weight: 800; }
mark, .marker {
  background: linear-gradient(transparent 58%, var(--highlight) 58%, var(--highlight) 94%, transparent 94%);
  color: inherit; padding: 0 .05em;
}
.text-link { color: var(--brand-deep); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.text-link:hover { color: var(--brand); }

/* ---------- buttons: solid face, darker bottom edge, press down ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border-radius: 16px; border: 2px solid transparent;
  font-family: var(--body); font-weight: 800; font-size: 0.92rem; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: transform .08s ease-out, box-shadow .08s ease-out, filter .15s;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 transparent !important; }
.btn[disabled] { cursor: not-allowed; filter: saturate(.35); opacity: .6; }
.btn[disabled]:active { transform: none; }
.btn-go { background: var(--brand); color: var(--white); box-shadow: 0 4px 0 var(--brand-deep); }
.btn-alt { background: var(--white); color: var(--brand-deep); border-color: var(--rule-2); box-shadow: 0 4px 0 var(--rule-2); }
.btn-ink { background: var(--graphite); color: var(--white); box-shadow: 0 4px 0 #0b1427; }
.btn-white { background: var(--white); color: var(--graphite); box-shadow: 0 4px 0 #8f99b0; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.8rem; border-radius: 13px; }
.btn-block { width: 100%; }

/* ---------- characters and their tiles ---------- */
.char { position: relative; display: inline-block; }
.char img { width: 100%; height: auto; position: relative; z-index: 1; }
.float img { animation: bob 4.2s ease-in-out infinite; }
.float.d1 img { animation-delay: -1.1s; }
.float.d2 img { animation-delay: -2.2s; }
.float.d3 img { animation-delay: -3.1s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

.tile { position: relative; flex: none; width: 124px; height: 124px; border-radius: 32px; background: var(--panel); display: flex; align-items: flex-end; justify-content: center; box-shadow: inset 0 -5px 0 rgba(30, 43, 79, 0.08); }
.tile .char { width: 90px; margin-bottom: 12px; }
.tile-sky { --panel: var(--tile-sky); } .tile-sage { --panel: var(--tile-sage); } .tile-teal { --panel: var(--tile-teal); }
.tile-lav { --panel: var(--tile-lav); } .tile-cream { --panel: var(--tile-cream); } .tile-peach { --panel: var(--tile-peach); }
.tile-lg { width: 168px; height: 168px; border-radius: 40px; }
.tile-lg .char { width: 122px; margin-bottom: 16px; }

/* a speech bubble for a character, pointing down-left at it */
.bubble {
  position: relative; display: inline-block; max-width: 240px;
  background: var(--white); color: var(--ink); font-weight: 800; font-size: 0.98rem; line-height: 1.3;
  padding: 12px 16px; border-radius: 18px 18px 18px 6px; box-shadow: 0 4px 0 rgba(30, 43, 79, 0.16);
}

/* ---------- cards ---------- */
.card {
  background: var(--white); border: 2px solid var(--rule-2); border-radius: 22px; box-shadow: 0 5px 0 var(--rule-2);
  padding: 22px;
}

/* ---------- inner-page head: heading left, the page's character right ---------- */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding-top: 56px; padding-bottom: 40px; }
.page-head h1 {
  font-family: var(--head); font-weight: 600;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--ink);
}
.page-head .lede { font-size: 1.18rem; margin-top: 18px; }
.page-head .actions { margin-top: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- forms ---------- */
.cast-form label, .cast-label {
  display: block; margin-bottom: 7px;
  font-weight: 800; font-size: 0.92rem; color: var(--ink);
}
.cast-form input[type="text"], .cast-form input[type="email"], .cast-form input[type="password"],
.cast-form input[type="number"], .cast-form select, .cast-form textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 2px solid var(--rule-2); border-radius: 14px; background-color: var(--field);
  font-weight: 700; font-size: 1rem; color: var(--ink);
  transition: border-color .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
.cast-form textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.cast-form select {
  cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e2b4f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.cast-form input::placeholder, .cast-form textarea::placeholder { color: #9a9fb0; font-weight: 600; }
/* background-color, not background: the shorthand would wipe the select chevron */
.cast-form input:focus, .cast-form select:focus, .cast-form textarea:focus { outline: none; border-color: var(--brand); background-color: var(--white); }
.cast-form input.valid, .cast-form select.valid { border-color: var(--good); background-color: var(--white); }
.cast-form input.invalid, .cast-form select.invalid { border-color: var(--bad); background-color: var(--bad-bg); }
.cast-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; flex: none; }
.cast-form .field, .cast-form .form-group { margin-bottom: 18px; }
.cast-form .hint { margin-top: 6px; font-size: 0.86rem; font-weight: 600; color: var(--mute); }
.cast-form .validation-feedback { min-height: 1.2em; margin-top: 6px; font-size: 0.86rem; font-weight: 700; color: var(--bad-text); }

/* status messages: scripts set className to "success" / "error" */
.cast-form .success, .cast-form .error,
.note { padding: 12px 16px; border-radius: 14px; font-weight: 700; font-size: 0.95rem; line-height: 1.45; }
.cast-form .success, .note.good { background: var(--good-bg); color: var(--good-text); }
.cast-form .error, .note.bad { background: var(--bad-bg); color: var(--bad-text); }

.or-rule { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; font-weight: 800; font-size: 0.8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--rule); }

/* ---------- auth pages: the character's stage beside the form ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
.auth-stage {
  position: relative; min-height: 500px; border-radius: 32px; background: var(--panel);
  box-shadow: inset 0 -6px 0 rgba(30, 43, 79, 0.10);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px;
}
.auth-stage .char { width: 190px; }
.auth-stage .bubble { order: -1; max-width: 280px; font-size: 1.08rem; }
.auth h1 { font-family: var(--head); font-weight: 600; font-size: clamp(2.1rem, 3.4vw, 2.7rem); line-height: 1.06; letter-spacing: -0.015em; }
.auth .sub { margin: 8px 0 24px; color: var(--ink-2); font-size: 1.05rem; }
.auth .card { padding: 30px; }
.auth .switch { margin-top: 22px; text-align: center; font-weight: 700; color: var(--ink-2); }
.google-button-wrap { display: flex; justify-content: center; min-height: 44px; }

/* ---------- long-form documents (privacy, terms, security) ---------- */
/* legal pages: head and document share one 860px column */
.doc-page .container { max-width: calc(860px + 80px); }
.doc { padding: 34px 38px; }
.doc .effective-date { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 2px solid var(--rule); font-weight: 700; font-size: 0.92rem; color: var(--mute); }
.doc .effective-date strong { color: var(--ink); font-weight: 800; }
.doc .effective-date p { margin: 0; color: inherit; }
.doc .section { margin-bottom: 38px; }
.doc .section:last-child { margin-bottom: 0; }
.doc h2 { font-family: var(--head); font-weight: 600; font-size: 1.55rem; line-height: 1.2; color: var(--ink); margin-bottom: 12px; }
.doc h3 { font-weight: 800; font-size: 1.08rem; color: var(--ink); margin: 22px 0 8px; }
.doc h4 { font-weight: 800; font-size: 1rem; color: var(--ink); margin: 16px 0 6px; }
.doc p { margin-bottom: 12px; color: var(--ink-2); }
.doc ul { margin: 8px 0 14px; padding-left: 22px; color: var(--ink-2); }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--brand); }
.doc strong { color: var(--ink); font-weight: 800; }
.doc .callout { margin-bottom: 28px; padding: 18px 22px; border-radius: 18px; background: var(--lavender-light); }
.doc .callout p { margin: 0 0 8px; color: var(--ink-2); }
.doc .callout p:last-child { margin-bottom: 0; }
.doc .commitment { margin-top: 38px; padding: 26px 28px; border-radius: 22px; background: var(--brand); color: var(--white); box-shadow: 0 5px 0 var(--brand-deep); }
.doc .commitment h2, .doc .commitment p, .doc .commitment strong { color: var(--white); }
.doc .commitment p { margin: 0; font-size: 1.08rem; }

/* ---------- nav (markup in templates/_publicnav.html) ---------- */
.cast-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 2px solid transparent;
  transition: border-color .25s;
}
.cast-nav.scrolled { border-bottom-color: var(--rule); }
.cast-nav .nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 40px; height: 76px; display: flex; align-items: center; gap: 32px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 700; font-size: 1.85rem; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.logo img { width: 30px; height: auto; }
.cast-nav .nav-links { list-style: none; display: flex; gap: 26px; margin-left: auto; }
.cast-nav .nav-links a { font-weight: 700; font-size: 0.97rem; color: var(--ink-2); transition: color .2s; }
.cast-nav .nav-links a:hover { color: var(--brand-deep); }
.cast-nav .nav-cta { display: flex; align-items: center; gap: 18px; }
.cast-nav .nav-cta .login { font-weight: 800; font-size: 0.86rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-deep); }
.cast-nav .nav-burger { display: none; width: 44px; height: 44px; border: 2px solid var(--rule-2); border-radius: 12px; background: var(--white); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
.cast-nav .nav-burger span { width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .25s; }
.cast-nav.open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cast-nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.cast-nav.open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- footer (markup in templates/_publicfooter.html) ---------- */
.cast-footer { position: relative; margin-top: 120px; background: var(--brand); color: var(--white); }
.cast-footer .wave { position: absolute; left: 0; right: 0; top: -58px; width: 100%; height: 60px; }
.cast-footer .footer-inner { max-width: var(--container); margin: 0 auto; padding: 48px 40px 36px; }
.cast-footer .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.cast-footer h4 { font-weight: 800; font-size: 1rem; margin-bottom: 10px; }
.cast-footer ul { list-style: none; display: grid; gap: 6px; font-weight: 700; }
.cast-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cast-footer .footer-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 36px; padding-top: 22px; border-top: 2px solid rgba(255, 255, 255, .25); font-weight: 700; }
.cast-footer .footer-base .logo { color: var(--white); font-size: 1.6rem; }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .cast-nav .nav-links { gap: 18px; }
}
@media (max-width: 900px) {
  .container, .cast-nav .nav-inner, .cast-footer .footer-inner { padding-left: 20px; padding-right: 20px; }
  .cast-nav .nav-inner { height: 68px; gap: 14px; }
  .cast-nav .nav-burger { display: inline-flex; }
  .cast-nav .nav-cta .login { display: none; }
  .cast-nav .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0; padding: 8px 20px 18px;
    background: var(--white); border-bottom: 2px solid var(--rule);
    display: none;
  }
  .cast-nav.open .nav-links { display: flex; }
  .cast-nav .nav-links a { display: block; padding: 13px 0; font-size: 1.05rem; border-bottom: 2px solid var(--rule); }
  .cast-nav .nav-links li:last-child a { border-bottom: 0; }
  .cast-nav .nav-links .mobile-only { display: list-item; }
  .cast-footer { margin-top: 96px; }
  .cast-footer .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .page-head { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 32px; padding-bottom: 28px; }
  .page-head > .tile { order: -1; }
  .tile { width: 104px; height: 104px; border-radius: 28px; } .tile .char { width: 76px; }
  .tile-lg { width: 120px; height: 120px; border-radius: 30px; } .tile-lg .char { width: 88px; margin-bottom: 12px; }

  .auth { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 20px; }
  .auth-stage { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 16px; padding: 18px 20px; border-radius: 26px; }
  .auth-stage .char { width: 78px; flex: none; }
  .auth-stage .bubble { order: 0; font-size: 0.95rem; border-radius: 18px 18px 18px 6px; }
  .auth .card { padding: 24px 20px; }
  .doc { padding: 24px 20px; }
}
@media (min-width: 901px) { .cast-nav .nav-links .mobile-only { display: none; } }
@media (max-width: 600px) {
  .actions .btn { width: 100%; }
  .cast-footer .footer-base { flex-direction: column; align-items: flex-start; }
  /* iOS zooms into fields under 16px; these are 16px already, keep it that way */
  .cast-form input, .cast-form select, .cast-form textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}