/* Shared stylesheet for the public marketing pages. SciPinion corporate
   brand — intentionally distinct from the app's design system. */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;600;700;800&family=Lato:wght@300;400;700&display=swap');

:root {
  /* brand */
  --blue:#0082CA; --blue-dark:#005a8f;
  --orange:#FF8228; --orange-dark:#e5741f;
  --navy:#205195; --navy-dark:#0a1628; --slate:#1a2332;
  --gradient:linear-gradient(135deg, #16406f 0%, #205195 55%, #2a62a8 100%);
  /* text */
  --text:#515861; --text-soft:#6b7280; --text-heading:#0a1628; --text-light:#f8f6f3;
  /* surfaces */
  --bg:#ffffff; --bg-gray:#edf2f9; --bg-dark:#0a1628; --border:#C8D6DC;
  /* on-dark surfaces */
  --dark-line:rgb(248 246 243 / .16);
  --dark-panel:rgb(248 246 243 / .05);
  --dark-text:rgb(248 246 243 / .78);
  --dark-text-soft:rgb(248 246 243 / .65);
  /* type */
  --font-heading:'Raleway', sans-serif;
  --font-body:'Lato', sans-serif;
  /* shape — asymmetric sweep for large surfaces (cards, image masks) only;
     small UI (buttons, inputs, chips, icons) stays at the brand 4px */
  --radius-ui:4px;
  --radius-sm:0 8px 0 8px; --radius-md:0 12px 0 12px; --radius-lg:0 16px 0 16px;
  /* motion + depth */
  --ease:150ms ease;
  --lift:translateY(-5px);
  --shadow-lift:0 12px 32px rgb(10 22 40 / .12);
  --shadow-modal:0 30px 80px rgb(10 22 40 / .35);
  /* rhythm */
  --section-pad:96px;
  --gap-card:28px;

  @media (max-width:880px) { --section-pad:72px; }
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body); color:var(--text); background:var(--bg);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1, h2, h3, h4 { font-family:var(--font-heading); color:var(--text-heading); line-height:1.15; }
a {
  color:var(--blue); text-decoration:none; transition:color var(--ease);
  &:hover { color:var(--blue-dark); text-decoration:underline; }
}
img { max-width:100%; }
.wrap {
  max-width:1200px; margin-inline:auto; padding-inline:40px;
  @media (max-width:640px) { padding-inline:20px; }
}

/* ---------- buttons ---------- */
.btn {
  display:inline-block; font-family:var(--font-heading); font-weight:700; font-size:14px;
  letter-spacing:.4px; padding:13px 26px; border-radius:var(--radius-ui);
  text-decoration:none; transition:all var(--ease); cursor:pointer;
  border:2px solid transparent; line-height:1.3;
  &:hover { text-decoration:none; }
  &:active { transform:translateY(1px); }
  &:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
}
.btn-primary {
  background:var(--orange); color:#fff;
  &:hover {
    background:var(--orange-dark); color:#fff;
    transform:translateY(-2px); box-shadow:0 8px 20px rgb(255 130 40 / .35);
  }
}
.btn-secondary {
  background:transparent; color:var(--blue); border-color:var(--blue);
  &:hover { background:var(--blue); color:#fff; }
  .on-dark & {
    color:var(--text-light); border-color:rgb(248 246 243 / .6);
    &:hover { background:rgb(248 246 243 / .12); color:#fff; border-color:#fff; }
  }
}
.btn-block { display:block; text-align:center; }
:is(a, button):focus-visible {
  outline:2px solid var(--orange); outline-offset:2px; border-radius:var(--radius-ui);
}

/* ---------- signed-in / signed-out visibility ---------- */
/* Held invisible (space reserved) until auth/home.js resolves the session,
   so the auth-dependent chrome paints once. Without JS the logged-out
   default stays visible. */
@media (scripting: enabled) {
  html:not(.auth-known) :is(#authNav, .cta-row, .foot-links) { visibility:hidden; }
}
#authNav {
  .signed-in { display:none; }
  html.is-signed-in & {
    .signed-out { display:none; }
    .signed-in { display:flex; align-items:center; gap:18px; }
  }
}
.cta-row {
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  .signed-out { display:contents; }
  .signed-in { display:none; }
  html.is-signed-in & {
    .signed-in { display:contents; }
    .signed-out { display:none; }
  }
}

/* ---------- header ---------- */
header.site {
  position:sticky; top:0; z-index:100; background:rgb(255 255 255 / .94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid transparent; transition:border-color var(--ease);
  &.is-scrolled { border-bottom-color:var(--bg-gray); }
}
.site-bar {
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px;
  @media (max-width:600px) { flex-wrap:wrap; }
}
.nav-links {
  display:flex; align-items:center; gap:18px;
  .signed-out { display:flex; align-items:center; gap:12px; }
  a:not(.btn) {
    font-family:var(--font-heading); font-weight:600; font-size:15px; color:var(--text-heading);
    &:hover { color:var(--blue); }
  }
  .btn { padding:9px 20px; }
  @media (max-width:600px) {
    gap:10px;
    .btn { padding:8px 14px; font-size:13px; }
    a:not(.btn) { font-size:14px; }
  }
}
.who {
  font-size:14px; color:var(--text-soft); display:inline-block; max-width:180px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;
  @media (max-width:600px) { display:none; }
}
.acct { display:flex; align-items:center; gap:9px; }
.avatar {
  width:30px; height:30px; border-radius:50%; background:rgb(0 130 202 / .12);
  color:var(--navy); display:grid; place-items:center; flex:none;
}

/* ---------- section scaffolding ---------- */
.label {
  font-family:var(--font-heading); font-weight:700; font-size:12px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--navy); display:block; margin-bottom:16px;
  .on-dark & { color:var(--orange); }
}
section { padding-block:var(--section-pad); }
.lead { font-weight:300; font-size:18px; }
.sec-head {
  max-width:680px; margin-bottom:56px;
  h2 {
    font-weight:800; font-size:clamp(28px, 3.6vw, 36px); letter-spacing:-.02em; text-wrap:pretty;
    em { color:var(--orange-dark); font-style:italic; }
  }
  p { margin-top:16px; font-weight:400; font-size:18px; color:var(--text); }
}
.bg-gray { background:var(--bg-gray); }

/* ---------- closing CTA ---------- */
.closing {
  background:var(--gradient); padding-block:100px; text-align:center;
  .label { color:var(--text-light); }
  h2 { color:#fff; font-weight:800; font-size:clamp(30px, 4vw, 40px); letter-spacing:-.02em; margin-bottom:16px; }
  p { color:var(--text-light); font-weight:400; font-size:18px; max-width:560px; margin:0 auto 36px; }
  .cta-row { justify-content:center; }
}

/* ---------- footer ---------- */
footer.site {
  background:var(--slate); color:rgb(248 246 243 / .75); padding-block:48px; font-size:14px;
  a {
    color:var(--text-light); font-family:var(--font-heading); font-weight:600; font-size:14px;
    display:inline-block; padding-block:4px;
    &:hover { color:var(--orange); }
  }
}
.foot-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot-links {
  display:flex; gap:28px; flex-wrap:wrap;
  .signed-out { display:contents; }
  html.is-signed-in & .signed-out { display:none; }
}

/* ---------- contact / signup modal ---------- */
.modal-overlay {
  position:fixed; inset:0; background:rgb(10 22 40 / .55); display:flex;
  align-items:flex-start; justify-content:center; padding:6vh 20px; z-index:1000; overflow-y:auto;
  &[hidden] { display:none; }
}
.modal {
  background:#fff; border-radius:var(--radius-lg); max-width:520px; width:100%;
  padding:32px; position:relative; box-shadow:var(--shadow-modal);
  h2 { font-size:24px; font-weight:800; margin-bottom:6px; }
  @media (max-width:560px) { padding:24px 20px; }
}
.modal-sub { font-size:15px; color:var(--text); margin-bottom:20px; }
.book-btn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:14px; font-size:15px; }
.or-divider {
  display:flex; align-items:center; gap:12px; margin-block:18px; color:var(--text-soft); font-size:13px;
  &::before, &::after { content:""; flex:1; height:1px; background:var(--border); }
}
.modal-close {
  position:absolute; top:14px; right:14px; background:none; border:none; font-size:26px;
  line-height:1; color:var(--text-soft); cursor:pointer; padding:2px 8px; border-radius:var(--radius-ui);
  &:hover { color:var(--text-heading); background:var(--bg-gray); }
}
.f-row {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  @media (max-width:560px) { grid-template-columns:1fr; }
}
.f-field {
  margin-bottom:14px; display:flex; flex-direction:column;
  label { font-family:var(--font-heading); font-weight:600; font-size:13px; color:var(--text-heading); margin-bottom:5px; }
  input, select {
    font-family:var(--font-body); font-size:15px; padding:10px 12px;
    border:1px solid var(--border); border-radius:var(--radius-ui); background:#fff; color:var(--text-heading);
    &:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgb(0 130 202 / .15); }
    &.invalid { border-color:#c0392b; }
  }
}
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.f-error { background:#f7ecea; color:#a4402f; font-size:13.5px; padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:14px; }
.modal-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:12px; }
.modal-success {
  text-align:center; padding:14px 0 6px;
  h3 { font-size:20px; font-weight:700; margin-bottom:8px; }
  p { font-size:15px; color:var(--text); margin-bottom:20px; }
}
.ms-check {
  width:52px; height:52px; border-radius:50%; background:#e9f5ec; color:#1f7a3d;
  font-size:26px; display:grid; place-items:center; margin:0 auto 16px;
}
.su-consent {
  display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--text);
  margin:6px 0 16px; line-height:1.45; cursor:pointer;
  input { margin-top:3px; flex:none; }
}